loviuz/openstamanager
loviuz
/
openstamanager
mirror of https://github.com/devcode-it/openstamanager.git
1
0
Fork 0
Code Issues Releases Activity

fix: 💄 Fix M3 breaking changes

This commit is contained in:
Maicol Battistini 2023-04-28 17:48:11 +02:00
parent eeb1c0f675
commit b399b5d7e2
No known key found for this signature in database
9 changed files with 18 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
resources/ts/Components/Pages/RecordsPage.tsx
View File

@ -1,14 +1,13 @@
/* eslint-disable sonarjs/no-duplicate-string */
import '@maicol07/material-web-additions/layout-grid/layout-grid.js';
import '@material/web/dialog/dialog.js';
import '@material/web/fab/fab-extended.js';
import '@material/web/iconbutton/standard-icon-button.js';
import {router} from '@maicol07/inertia-mithril';
import {
FilterTextFieldInputEventDetail,
SortButtonClickedEventDetail
} from '@maicol07/material-web-additions/data-table/lib/data-table-column.js';
import '@maicol07/material-web-additions/layout-grid/layout-grid.js';
import '@material/web/dialog/dialog.js';
import '@material/web/fab/branded-fab.js';
import '@material/web/iconbutton/standard-icon-button.js';
import {mdiPlus} from '@mdi/js';
import collect, {type Collection} from 'collect.js';
import {SortDirection} from 'coloquent';
@ -119,9 +118,9 @@ export default abstract class RecordsPage<M extends Model<any, any>, D extends A
fab(): Children {
return (
<md-fab-extended id="add-record" label={__('Aggiungi')} className="sticky" onclick={this.onAddNewRecordButtonClicked.bind(this)}>
<md-branded-fab id="add-record" label={__('Aggiungi')} className="sticky" onclick={this.onAddNewRecordButtonClicked.bind(this)}>
<MdIcon icon={mdiPlus} slot="icon"/>
</md-fab-extended>
</md-branded-fab>
);
}

6
resources/ts/Components/layout/Drawer.tsx
View File

@ -1,6 +1,4 @@
import '../m3/NavigationDrawer';
import '../m3/NavigationDrawerModal';
import '../m3/List';
import '@material/web/list/list.js';
import {
mdiAccountGroupOutline,
@ -21,6 +19,8 @@ import {
import MdIcon from '~/Components/MdIcon';
import {VnodeCollectionItem} from '~/typings/jsx';
import {isMobile} from '~/utils/misc';
import '../m3/NavigationDrawer';
import '../m3/NavigationDrawerModal';
import {DrawerEntry} from './DrawerEntry';

12
resources/ts/Components/layout/DrawerEntry.tsx
View File

@ -1,10 +1,10 @@
import '../m3/ListItemLink';
import '@material/web/icon/icon.js';
import {router} from '@maicol07/inertia-mithril';
import '@material/web/icon/icon.js';
import {ListItemLink} from '@material/web/list/lib/listitemlink/list-item-link';
import MaterialIcons from '@mdi/js';
import '@material/web/list/list-item-link.js';
import type * as MaterialIcons from '@mdi/js';
import {Vnode} from 'mithril';
import {ValueOf} from 'type-fest';
import {
Attributes,
@ -12,9 +12,11 @@ import {
} from '~/Components/Component';
import MdIcon from '~/Components/MdIcon';
type Icons = ValueOf<typeof MaterialIcons>;
export interface DrawerEntryAttributes extends Attributes {
route: string;
icon: typeof MaterialIcons;
icon: Icons;
}
export class DrawerEntry<A extends DrawerEntryAttributes = DrawerEntryAttributes> extends Component<A> {

15
resources/ts/Components/m3/List.ts
View File

@ -1,15 +0,0 @@
import {List as MDList} from '@material/web/list/lib/list.js';
import {ARIARole} from '@material/web/types/aria';
import {customElement} from 'lit/decorators.js';
@customElement('md-list')
export default class List extends MDList {
// @ts-expect-error - Workaround for https://github.com/material-components/material-web/issues/3804
// eslint-disable-next-line unicorn/no-null
override role: ARIARole | null = null;
connectedCallback() {
super.connectedCallback();
this.role = 'menu';
}
}

7
resources/ts/Components/m3/ListItem.ts
View File

@ -1,7 +0,0 @@
import {customElement} from 'lit/decorators.js';
import ListItemEl from '~/Components/m3/ListItemElement';
@customElement('md-list-item')
export default class ListItem extends ListItemEl {
}

62
resources/ts/Components/m3/ListItemElement.ts
View File

@ -1,62 +0,0 @@
import autoAnimate from '@formkit/auto-animate';
import {ListItemEl as MdListItem} from '@material/web/list/lib/listitem/list-item';
import {styles} from '@material/web/list/lib/listitem/list-item-styles.css.js';
import {ARIARole} from '@material/web/types/aria';
import {
html,
TemplateResult
} from 'lit';
import {
property,
queryAsync
} from 'lit/decorators.js';
export default class ListItemElement extends MdListItem {
static override styles = [styles];
@property({type: Boolean}) showSupportingText = false;
@property({type: Boolean}) showMultiLineSupportingText = false;
@queryAsync('.body') body!: Promise<HTMLDivElement>;
// @ts-expect-error - Workaround for https://github.com/material-components/material-web/issues/3804
// eslint-disable-next-line unicorn/no-null
override role: ARIARole | null = null;
async connectedCallback() {
super.connectedCallback();
// Auto-animate the body when it is rendered.
autoAnimate(await this.body);
this.role = 'menuitem';
}
/**
* Handles rendering the headline and supporting text.
*/
protected renderBody(): TemplateResult {
return html`
<div class="body">
<span class="label-text">${this.headline}</span>
${this.showSupportingText ? this.renderSupportingText() : ''}
${this.showMultiLineSupportingText ? this.renderMultiLineSupportingText() : ''}
</div>
`;
}
/**
* Renders the one-line supporting text.
*/
protected renderSupportingText(): TemplateResult {
return html`
<span class="supporting-text">
<slot name="supportingText">${this.supportingText}</slot>
</span>
`;
}
protected renderMultiLineSupportingText(): TemplateResult {
return html`
<span class="supporting-text supporting-text--multi-line">
<slot name="multilineSupportingText">${this.multiLineSupportingText}</slot>
</span>
`;
}
}

47
resources/ts/Components/m3/ListItemLink.ts
View File

@ -1,47 +0,0 @@
import {ripple} from '@material/web/ripple/directive';
import {
html,
nothing
} from 'lit';
import {
customElement,
property
} from 'lit/decorators.js';
import {classMap} from 'lit/directives/class-map.js';
import ListItemEl from '~/Components/m3/ListItemElement';
type LinkTarget = '_blank' | '_parent' | '_self' | '_top';
@customElement('md-list-item-link')
export default class ListItemLink extends ListItemEl {
/**
* Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.
*/
@property() href!: string;
/**
* Sets the underlying `HTMLAnchorElement`'s `target` attribute.
*/
@property() target!: string;
protected override renderListItem(content: unknown) {
return html`
<a
tabindex=${this.disabled ? -1 : this.itemTabIndex}
role=${this.role}
aria-selected=${this.ariaSelected || nothing}
aria-checked=${this.ariaChecked || nothing}
class="list-item ${classMap(this.getRenderClasses())}"
href=${this.href}
target=${this.target as LinkTarget || nothing}
@pointerdown=${this.onPointerdown}
@focus=${this.onFocus}
@blur=${this.onBlur}
@click=${this.onClick}
@pointerenter=${this.onPointerenter}
@pointerleave=${this.onPointerleave}
@keydown=${this.onKeydown}
${ripple(this.getRipple)}>${content}</a>`;
}
}

11
resources/ts/Components/m3/NavigationDrawer.ts
View File

@ -1,5 +1,5 @@
import {NavigationDrawer as MDNavigationDrawer} from '@material/web/navigationdrawer/lib/navigation-drawer.js';
import {styles} from '@material/web/navigationdrawer/lib/navigation-drawer-styles.css.js';
import {NavigationDrawer as MDNavigationDrawer} from '@material/web/navigationdrawer/lib/navigation-drawer.js';
import {styles as sharedStyles} from '@material/web/navigationdrawer/lib/shared-styles.css.js';
import {css} from 'lit';
import {customElement} from 'lit/decorators.js';
@ -20,13 +20,4 @@ export default class MdNavigationDrawer extends MDNavigationDrawer {
width: inherit;
}
`];
// @ts-expect-error - Workaround for https://github.com/material-components/material-web/issues/3804
// eslint-disable-next-line unicorn/no-null
override ariaModal: 'true' | 'false' | null = null;
connectedCallback() {
super.connectedCallback();
this.ariaModal = 'false';
}
}

11
resources/ts/Components/m3/NavigationDrawerModal.ts
View File

@ -1,5 +1,5 @@
import {NavigationDrawerModal as MDNavigationDrawerModal} from '@material/web/navigationdrawer/lib/navigation-drawer-modal.js';
import {styles} from '@material/web/navigationdrawer/lib/navigation-drawer-modal-styles.css.js';
import {NavigationDrawerModal as MDNavigationDrawerModal} from '@material/web/navigationdrawer/lib/navigation-drawer-modal.js';
import {styles as sharedStyles} from '@material/web/navigationdrawer/lib/shared-styles.css.js';
import {css} from 'lit';
import {customElement} from 'lit/decorators.js';
@ -15,13 +15,4 @@ export default class MdNavigationDrawer extends MDNavigationDrawerModal {
padding-top: 64px;
}*/
`];
// @ts-expect-error - Workaround for https://github.com/material-components/material-web/issues/3804
// eslint-disable-next-line unicorn/no-null
override ariaModal: 'true' | 'false' | null = null;
connectedCallback() {
super.connectedCallback();
this.ariaModal = 'false';
}
}