@operato/menu 2.0.0-alpha.99 → 2.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +440 -0
- package/dist/src/menu-landscape-styles.js +5 -5
- package/dist/src/menu-landscape-styles.js.map +1 -1
- package/dist/src/menu-portrait-styles.js +50 -30
- package/dist/src/menu-portrait-styles.js.map +1 -1
- package/dist/src/ox-menu-landscape.js +2 -2
- package/dist/src/ox-menu-landscape.js.map +1 -1
- package/dist/src/ox-menu-part.js +1 -1
- package/dist/src/ox-menu-part.js.map +1 -1
- package/dist/src/ox-menu-portrait.d.ts +1 -1
- package/dist/src/ox-menu-portrait.js +5 -5
- package/dist/src/ox-menu-portrait.js.map +1 -1
- package/dist/src/types.d.ts +1 -0
- package/dist/src/types.js.map +1 -1
- package/dist/stories/ox-menu-container.js +1 -1
- package/dist/stories/ox-menu-container.js.map +1 -1
- package/dist/stories/ox-menu-portrait.stories.d.ts +7 -1
- package/dist/stories/ox-menu-portrait.stories.js +11 -2
- package/dist/stories/ox-menu-portrait.stories.js.map +1 -1
- package/dist/stories/test-menus.js +2 -2
- package/dist/stories/test-menus.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +11 -11
- package/src/menu-landscape-styles.ts +5 -5
- package/src/menu-portrait-styles.ts +50 -30
- package/src/ox-menu-landscape.ts +2 -2
- package/src/ox-menu-part.ts +1 -1
- package/src/ox-menu-portrait.ts +5 -5
- package/src/types.ts +1 -0
- package/stories/ox-menu-container.ts +1 -1
- package/stories/ox-menu-portrait.stories.ts +14 -3
- package/stories/test-menus.ts +2 -2
- package/themes/app-theme.css +1 -1
- package/themes/dark-hc.css +151 -0
- package/themes/dark-mc.css +151 -0
- package/themes/dark.css +151 -0
- package/themes/light-hc.css +151 -0
- package/themes/light-mc.css +151 -0
- package/themes/light.css +151 -0
- package/themes/md-typescale-styles.css +100 -0
- package/themes/spacing.css +43 -0
- package/themes/state-color.css +6 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-portrait-styles.js","sourceRoot":"","sources":["../../src/menu-portrait-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"menu-portrait-styles.js","sourceRoot":"","sources":["../../src/menu-portrait-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgKpC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const MenuPortraitStyles = css`\n :host {\n display: flex;\n overflow-y: auto;\n flex-direction: column;\n height: 100%;\n background-color: var(--md-sys-color-on-primary);\n }\n\n :host > ul {\n margin-block-end: 1.5em;\n }\n\n ul {\n list-style: none;\n margin: var(--spacing-none);\n padding: var(--spacing-none);\n }\n\n [group-label] {\n padding: var(--spacing-huge) var(--spacing-none) var(--spacing-small) var(--spacing-large);\n border-bottom: var(--border-dark-color);\n font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)) 12px var(--theme-font);\n color: var(--md-sys-color-primary);\n text-transform: uppercase;\n }\n\n a {\n display: flex;\n align-items: center;\n border-bottom: 1px solid rgba(0, 0, 0, 0.07);\n padding: var(--spacing-medium);\n padding-left: var(--spacing-large);\n text-decoration: none;\n font: normal var(--md-sys-typescale-label-large-size, 0.875rem) var(--theme-font);\n color: var(--md-sys-color-on-surface-variant);\n text-transform: capitalize;\n\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n a:hover {\n color: var(--md-sys-color-primary);\n font-weight: bold;\n }\n\n a * {\n vertical-align: middle;\n }\n\n a md-icon {\n --md-icon-size: var(--icon-size-tiny);\n opacity: 0.7;\n margin-right: var(--spacing-small);\n color: var(--md-sys-color-primary);\n }\n\n md-icon[filled] {\n font-variation-settings: 'FILL' 1;\n }\n\n a [submenu-button] {\n --md-icon-size: var(--icon-size-tiny);\n max-height: 1em;\n margin-left: auto;\n }\n\n a [submenu-button]::before {\n content: 'chevron_right';\n }\n\n a > span {\n flex: 1;\n display: block;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n li[active] > a [submenu-button]::before {\n content: 'expand_more';\n }\n\n li[active] > a {\n color: var(--md-sys-color-on-primary-container);\n font-weight: bold;\n border-left: 3px solid var(--md-sys-color-on-primary-container);\n }\n\n li li a {\n padding: var(--spacing-medium);\n padding-left: var(--spacing-huge);\n font: normal 13px var(--theme-font);\n color: var(--md-sys-color-on-surface-variant);\n }\n\n li li[active] a {\n background-color: var(--md-sys-color-primary-container);\n font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500))\n var(--md-sys-typescale-label-large-size, 0.875rem) var(--theme-font);\n color: var(--md-sys-color-primary);\n }\n\n li > ul {\n overflow-y: hidden;\n max-height: 0;\n background-color: var(--md-sys-color-surface-container-low);\n\n transition-property: all;\n transition-duration: 0.7s;\n }\n\n li[active] > ul {\n max-height: 500px;\n }\n\n li[active] > ul[settled] {\n overflow-y: auto;\n }\n\n li li a::before {\n margin-right: var(--margin-narrow);\n }\n\n a [badge] {\n margin-left: auto;\n background-color: var(--md-sys-color-primary);\n border-radius: var(--md-sys-shape-corner-full);\n padding: 0 var(--spacing-small);\n color: var(--md-sys-color-on-primary);\n font-size: 0.9em;\n }\n\n @media only screen and (max-width: 460px) {\n :host {\n min-width: 100vw;\n }\n\n a {\n padding: var(--spacing-large);\n font: normal 15px var(--theme-font);\n }\n\n li li a {\n display: block;\n padding: var(--spacing-medium);\n padding-left: var(--spacing-huge);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font: normal var(--md-sys-typescale-label-large-size, 0.875rem) var(--theme-font);\n }\n\n li li[active] a {\n font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500))\n var(--md-sys-typescale-label-large-size, 0.875rem) var(--theme-font);\n }\n }\n`\n"]}
|
|
@@ -19,13 +19,13 @@ let OxMenuLandscape = class OxMenuLandscape extends connect(store)(LitElement) {
|
|
|
19
19
|
: html `
|
|
20
20
|
<li ?active=${menu === activeTopLevel}>
|
|
21
21
|
<a href=${menu.path || '#'}>
|
|
22
|
-
${menu.icon ? html `<md-icon>${menu.icon}</md-icon>` : html ``} ${menu.name}
|
|
22
|
+
${menu.icon ? html `<md-icon>${menu.icon}</md-icon>` : html ``} ${menu.label || menu.name}
|
|
23
23
|
</a>
|
|
24
24
|
|
|
25
25
|
<ul submenus>
|
|
26
26
|
${(_a = menu.menus) === null || _a === void 0 ? void 0 : _a.map(menu => html `
|
|
27
27
|
<li ?active=${menu === activeMenu}>
|
|
28
|
-
<a href=${menu.path || '#'}> ${menu.name} </a>
|
|
28
|
+
<a href=${menu.path || '#'}> ${menu.label || menu.name} </a>
|
|
29
29
|
</li>
|
|
30
30
|
`)}
|
|
31
31
|
</ul>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-menu-landscape.js","sourceRoot":"","sources":["../../src/ox-menu-landscape.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAgB,MAAM,mBAAmB,CAAA;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAErC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAA;AAGtD,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAQ7D,MAAM;QACJ,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,IAAI,CAAA;QAEvD,OAAO,IAAI,CAAA;mCACoB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;;YAEnD,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;;YACjB,OAAA,IAAI,CAAC,IAAI,IAAI,OAAO;gBAClB,CAAC,CAAC,IAAI,CAAA,EAAE;gBACR,CAAC,CAAC,IAAI,CAAA;gCACY,IAAI,KAAK,cAAc;8BACzB,IAAI,CAAC,IAAI,IAAI,GAAG;wBACtB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,YAAY,IAAI,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE,IAAI,IAAI,CAAC,IAAI;;;;
|
|
1
|
+
{"version":3,"file":"ox-menu-landscape.js","sourceRoot":"","sources":["../../src/ox-menu-landscape.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers'\n\nimport { navigate, store } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { Menu } from './types'\nimport { MenuLandscapeStyles } from './menu-landscape-styles'\n\n@customElement('ox-menu-landscape')\nexport class OxMenuLandscape extends connect(store)(LitElement) {\n static styles = [ScrollbarStyles, MenuLandscapeStyles]\n\n @property({ type: Array }) menus?: Menu[]\n @property({ type: Object }) activeTopLevel?: Menu\n @property({ type: Object }) activeMenu!: Menu\n @property({ type: String }) path?: string\n\n render() {\n const { menus = [], activeTopLevel, activeMenu } = this\n\n return html`\n <div id=\"wrap\" @mousewheel=${this.onWheelEvent.bind(this)}>\n <ul>\n ${menus.map(menu =>\n menu.type == 'group'\n ? html``\n : html`\n <li ?active=${menu === activeTopLevel}>\n <a href=${menu.path || '#'}>\n ${menu.icon ? html`<md-icon>${menu.icon}</md-icon>` : html``} ${menu.label || menu.name}\n </a>\n\n <ul submenus>\n ${menu.menus?.map(\n menu => html`\n <li ?active=${menu === activeMenu}>\n <a href=${menu.path || '#'}> ${menu.label || menu.name} </a>\n </li>\n `\n )}\n </ul>\n\n <div description>\n ${menu.icon ? html`<md-icon>${menu.icon}</md-icon>` : html``} ${menu.description || ''}\n </div>\n </li>\n `\n )}\n </ul>\n </div>\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('click', (e: Event) => {\n //@ts-ignore\n if (e.target.submenu) {\n /* protect to act move to href. */\n e.stopPropagation()\n e.preventDefault()\n\n //@ts-ignore\n let menu = e.target.submenu\n\n this.dispatchEvent(\n new CustomEvent('active-toplevel', {\n bubbles: true,\n detail: this.activeTopLevel === menu ? undefined : menu\n })\n )\n\n return\n }\n\n /* to respond even if current acting menu is selected */\n let href = (e.target as HTMLAnchorElement).href\n href && location.href === href && navigate(href + '#force', true)\n })\n\n /* to hide scrollbar during transition */\n this.renderRoot.addEventListener('transitionstart', e => {\n ;(e.target as HTMLElement).removeAttribute('settled')\n })\n this.renderRoot.addEventListener('transitionend', e => {\n ;(e.target as HTMLElement).setAttribute('settled', '')\n })\n }\n\n onWheelEvent(e: WheelEvent) {\n const { target, deltaY, detail } = e\n\n if (!(target instanceof HTMLElement)) {\n return\n }\n\n const delta = deltaY || -detail\n target.scrollLeft -= (delta / Math.abs(delta)) * 10\n\n e.preventDefault()\n }\n}\n"]}
|
package/dist/src/ox-menu-part.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-menu-part.js","sourceRoot":"","sources":["../../src/ox-menu-part.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './ox-menu-portrait'\nimport './ox-menu-landscape'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers'\n\nimport { store } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { Menu } from './types'\n\nfunction isActiveMenu(menu: Menu, path: string) {\n return (\n menu.path?.split('?')[0] === path ||\n (menu.active && typeof menu.active === 'function' && menu.active.call(menu, { path }))\n )\n}\n\n@customElement('ox-menu-part')\nexport class OxMenuPart extends connect(store)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n overflow-y: auto;\n flex-direction: column;\n height: 100%;\n min-width: 200px;\n background-color: var(--
|
|
1
|
+
{"version":3,"file":"ox-menu-part.js","sourceRoot":"","sources":["../../src/ox-menu-part.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './ox-menu-portrait'\nimport './ox-menu-landscape'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers'\n\nimport { store } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { Menu } from './types'\n\nfunction isActiveMenu(menu: Menu, path: string) {\n return (\n menu.path?.split('?')[0] === path ||\n (menu.active && typeof menu.active === 'function' && menu.active.call(menu, { path }))\n )\n}\n\n@customElement('ox-menu-part')\nexport class OxMenuPart extends connect(store)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n overflow-y: auto;\n flex-direction: column;\n height: 100%;\n min-width: 200px;\n background-color: var(--md-sys-color-surface);\n }\n\n :host([landscape]) {\n overflow-x: auto;\n flex-direction: row;\n width: 100%;\n min-height: 20px;\n }\n\n ox-menu-portrait,\n ox-menu-landscape {\n flex: 1;\n }\n `\n ]\n\n @property({ type: String }) page!: string\n @property({ type: String }) resourceId?: string\n @property({ type: Array }) menus?: Menu[]\n @property({ type: String }) orientation?: 'landscape' | 'portrait'\n\n @state() slotTemplate: any\n @state() _activeTopLevel?: Menu\n @state() _activeMenu?: Menu\n @state() _path?: string\n\n render() {\n return html`\n <slot name=\"head\"></slot>\n ${this.orientation !== 'landscape'\n ? html`<ox-menu-portrait\n .menus=${this.menus}\n .activeTopLevel=${this._activeTopLevel}\n .activeMenu=${this._activeMenu}\n .path=${this._path}\n ></ox-menu-portrait>`\n : html`<ox-menu-landscape\n .menus=${this.menus}\n .activeTopLevel=${this._activeTopLevel}\n .activeMenu=${this._activeMenu}\n .path=${this._path}\n ></ox-menu-landscape>`}\n <slot name=\"tail\"></slot>\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('active-toplevel', (e: Event) => {\n e.stopPropagation()\n e.preventDefault()\n\n this._activeTopLevel = (e as CustomEvent).detail\n })\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('menus') || changes.has('page') || changes.has('resourceId')) {\n this.findActivePage()\n }\n\n if (changes.has('orientation')) {\n if (this.orientation == 'portrait') {\n this.removeAttribute('landscape')\n } else {\n this.setAttribute('landscape', '')\n }\n }\n\n if (changes.has('slotTemplate')) {\n this.replaceChild(this.slotTemplate, this.renderRoot)\n }\n }\n\n stateChanged(state: any): void {\n this.page = state.route.page\n this.resourceId = state.route.resourceId\n this.menus = state.liteMenu.menus || []\n this.slotTemplate = state.liteMenu.slotTemplate\n }\n\n private findActivePage() {\n var path = this.resourceId ? `${this.page}/${this.resourceId}` : this.page\n var menus = this.menus || []\n var activeMenu\n\n this._activeTopLevel = menus.find(menu => {\n if (isActiveMenu(menu, path)) {\n activeMenu = menu\n return true\n } else if (menu.menus) {\n activeMenu = menu.menus.find(menu => isActiveMenu(menu, path))\n return !!activeMenu\n }\n })\n\n this._path = path\n this._activeMenu = activeMenu || this._activeTopLevel\n }\n}\n"]}
|
|
@@ -8,6 +8,6 @@ export declare class OxMenuPortrait extends LitElement {
|
|
|
8
8
|
activeMenu?: Menu;
|
|
9
9
|
path: string;
|
|
10
10
|
renderMenus(menus: Menu[], activeTopLevel?: Menu, activeMenu?: Menu): TemplateResult | typeof nothing;
|
|
11
|
-
render():
|
|
11
|
+
render(): typeof nothing | TemplateResult;
|
|
12
12
|
firstUpdated(): void;
|
|
13
13
|
}
|
|
@@ -13,17 +13,17 @@ let OxMenuPortrait = class OxMenuPortrait extends LitElement {
|
|
|
13
13
|
return html `
|
|
14
14
|
<ul>
|
|
15
15
|
${menus.map(menu => {
|
|
16
|
-
var { type, active, path, name, badge, icon, menus = [] } = menu;
|
|
16
|
+
var { type, name, active, path, label = name, badge, icon, menus = [] } = menu;
|
|
17
17
|
active = active && typeof active === 'function' ? active.call(menu, { path: this.path }) : false;
|
|
18
18
|
badge = typeof badge === 'function' ? badge.call(menu) : badge !== null && badge !== void 0 ? badge : false;
|
|
19
19
|
return type == 'group'
|
|
20
|
-
? html `<li group-label>${
|
|
20
|
+
? html `<li group-label>${label}</li>`
|
|
21
21
|
: html `
|
|
22
22
|
<li ?active=${activeTopLevel ? menu === activeTopLevel : active} .menu=${menu} menu>
|
|
23
23
|
<a href=${path || '#'}>
|
|
24
|
-
<md-icon>${icon}</md-icon>
|
|
25
|
-
|
|
26
|
-
${menus.length > 0 ? html ` <md-icon submenu-button></md-icon> ` : html ``}
|
|
24
|
+
<md-icon filled>${icon || 'fiber_manual_record'}</md-icon>
|
|
25
|
+
<span>${label}</span>${badge !== false ? html `<div badge>${badge}</div>` : html ``}
|
|
26
|
+
${menus.length > 0 ? html ` <md-icon filled submenu-button></md-icon> ` : html ``}
|
|
27
27
|
</a>
|
|
28
28
|
${menus && this.renderMenus(menus || [], activeMenu)}
|
|
29
29
|
</li>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-menu-portrait.js","sourceRoot":"","sources":["../../src/ox-menu-portrait.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAGpD,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAQ5C,WAAW,CAAC,KAAa,EAAE,cAAqB,EAAE,UAAiB;QACjE,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;YACtB,OAAO,OAAO,CAAA;QAChB,CAAC;QAED,OAAO,IAAI,CAAA;;UAEL,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACjB,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,IAAI,CAAA;
|
|
1
|
+
{"version":3,"file":"ox-menu-portrait.js","sourceRoot":"","sources":["../../src/ox-menu-portrait.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { html, LitElement, nothing, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { navigate } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { Menu } from './types'\nimport { MenuPortraitStyles } from './menu-portrait-styles'\n\n@customElement('ox-menu-portrait')\nexport class OxMenuPortrait extends LitElement {\n static styles = [ScrollbarStyles, MenuPortraitStyles]\n\n @property({ type: Array }) menus?: Menu[]\n @property({ type: Object }) activeTopLevel?: Menu\n @property({ type: Object }) activeMenu?: Menu\n @property({ type: String }) path!: string\n\n renderMenus(menus: Menu[], activeTopLevel?: Menu, activeMenu?: Menu): TemplateResult | typeof nothing {\n if (menus.length == 0) {\n return nothing\n }\n\n return html`\n <ul>\n ${menus.map(menu => {\n var { type, name, active, path, label = name, badge, icon, menus = [] } = menu\n active = active && typeof active === 'function' ? active.call(menu, { path: this.path }) : false\n badge = typeof badge === 'function' ? badge.call(menu) : badge ?? false\n\n return type == 'group'\n ? html`<li group-label>${label}</li>`\n : html`\n <li ?active=${activeTopLevel ? menu === activeTopLevel : active} .menu=${menu} menu>\n <a href=${path || '#'}>\n <md-icon filled>${icon || 'fiber_manual_record'}</md-icon>\n <span>${label}</span>${badge !== false ? html`<div badge>${badge}</div>` : html``}\n ${menus.length > 0 ? html` <md-icon filled submenu-button></md-icon> ` : html``}\n </a>\n ${menus && this.renderMenus(menus || [], activeMenu)}\n </li>\n `\n })}\n </ul>\n `\n }\n\n render() {\n const { menus, activeTopLevel, activeMenu } = this\n return this.renderMenus(menus || [], activeTopLevel, activeMenu)\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('click', (e: Event) => {\n const menuElement = (e.target as Element)!.closest('[menu]')\n\n //@ts-ignore\n if (menuElement?.menu) {\n //@ts-ignore\n let menu = menuElement.menu\n\n if (!menu.path) {\n /* protect to act move to href. */\n e.stopPropagation()\n e.preventDefault()\n }\n\n this.dispatchEvent(\n new CustomEvent('active-toplevel', {\n bubbles: true,\n detail: this.activeTopLevel === menu ? undefined : menu\n })\n )\n }\n\n /* to respond even if current acting menu is selected */\n let href = (e.target as HTMLAnchorElement)!.href\n href && location.href === href && navigate(href + '#force', true)\n })\n\n /* to hide scrollbar during transition */\n this.renderRoot.addEventListener('transitionstart', e => {\n ;(e.target as Element).removeAttribute('settled')\n })\n this.renderRoot.addEventListener('transitionend', e => {\n ;(e.target as Element).setAttribute('settled', '')\n })\n }\n}\n"]}
|
package/dist/src/types.d.ts
CHANGED
package/dist/src/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export type Menu = {\n type?: 'group' | 'board'\n name?: string\n description?: string\n path?: string\n icon?: string\n badge?: boolean | string | (() => boolean)\n active?: boolean | ((menu?: Menu) => boolean)\n menus?: Menu[]\n}\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export type Menu = {\n type?: 'group' | 'board'\n name?: string\n description?: string\n path?: string\n icon?: string\n label?: string\n badge?: boolean | string | (() => boolean)\n active?: boolean | ((menu?: Menu) => boolean)\n menus?: Menu[]\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-menu-container.js","sourceRoot":"","sources":["../../stories/ox-menu-container.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/ox-menu-portrait'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { Menu } from '../src/types'\n\nfunction isActiveMenu(menu: Menu, path?: string) {\n return (\n menu.path?.split('?')[0] === path ||\n (menu.active && typeof menu.active === 'function' && menu.active.call(menu, { path }))\n )\n}\n\n@customElement('ox-menu-container')\nexport class OxMenuContainer extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n overflow-y: auto;\n flex-direction: column;\n background-color: var(--
|
|
1
|
+
{"version":3,"file":"ox-menu-container.js","sourceRoot":"","sources":["../../stories/ox-menu-container.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../src/ox-menu-portrait'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { Menu } from '../src/types'\n\nfunction isActiveMenu(menu: Menu, path?: string) {\n return (\n menu.path?.split('?')[0] === path ||\n (menu.active && typeof menu.active === 'function' && menu.active.call(menu, { path }))\n )\n}\n\n@customElement('ox-menu-container')\nexport class OxMenuContainer extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n overflow-y: auto;\n flex-direction: column;\n background-color: var(--md-sys-color-surface);\n }\n `\n ]\n\n @property({ type: Array }) menus?: Menu[]\n\n @state() activeMenu?: Menu\n @state() activeTopLevel?: Menu\n @state() path?: string\n\n render() {\n return html`\n <div\n @click=${(e: MouseEvent) => {\n if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey) {\n return\n }\n const anchor: HTMLAnchorElement = e.composedPath().filter((n: any) => n.tagName === 'A')[0] as any\n if (!anchor) {\n return\n }\n const href = anchor.href\n e.preventDefault()\n\n var [_, path, ...others] = new URL(href).pathname.split('/')\n this.path = path\n }}\n >\n <ox-menu-portrait\n .menus=${this.menus}\n .activeTopLevel=${this.activeTopLevel}\n .activeMenu=${this.activeMenu}\n .path=${this.path || ''}\n ></ox-menu-portrait>\n </div>\n `\n }\n\n firstUpdated() {\n this.renderRoot.addEventListener('active-toplevel', (e: Event) => {\n e.stopPropagation()\n e.preventDefault()\n\n this.activeTopLevel = (e as CustomEvent).detail\n })\n }\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('menus') || changes.has('path')) {\n this.findActivePage()\n }\n }\n\n private findActivePage() {\n var menus = this.menus || []\n var activeMenu\n\n this.activeTopLevel = menus.find(menu => {\n if (isActiveMenu(menu, this.path)) {\n activeMenu = menu\n return true\n } else if (menu.menus) {\n activeMenu = menu.menus.find((menu: Menu) => isActiveMenu(menu, this.path))\n return !!activeMenu\n }\n })\n\n this.activeMenu = activeMenu || this.activeTopLevel\n }\n}\n"]}
|
|
@@ -4,7 +4,12 @@ import './ox-menu-container';
|
|
|
4
4
|
declare const _default: {
|
|
5
5
|
title: string;
|
|
6
6
|
component: string;
|
|
7
|
-
argTypes: {
|
|
7
|
+
argTypes: {
|
|
8
|
+
theme: {
|
|
9
|
+
control: string;
|
|
10
|
+
options: string[];
|
|
11
|
+
};
|
|
12
|
+
};
|
|
8
13
|
};
|
|
9
14
|
export default _default;
|
|
10
15
|
interface Story<T> {
|
|
@@ -13,5 +18,6 @@ interface Story<T> {
|
|
|
13
18
|
argTypes?: Record<string, unknown>;
|
|
14
19
|
}
|
|
15
20
|
interface ArgTypes {
|
|
21
|
+
theme: 'light' | 'dark';
|
|
16
22
|
}
|
|
17
23
|
export declare const Regular: Story<ArgTypes>;
|
|
@@ -5,10 +5,16 @@ import './ox-menu-container';
|
|
|
5
5
|
export default {
|
|
6
6
|
title: 'OxMenuPortrait',
|
|
7
7
|
component: 'ox-menu-portrait',
|
|
8
|
-
argTypes: {
|
|
8
|
+
argTypes: {
|
|
9
|
+
theme: { control: 'select', options: ['light', 'dark'] }
|
|
10
|
+
}
|
|
9
11
|
};
|
|
10
|
-
const Template = ({}) => html `
|
|
12
|
+
const Template = ({ theme = 'light' }) => html `
|
|
11
13
|
<link href="/themes/app-theme.css" rel="stylesheet" />
|
|
14
|
+
|
|
15
|
+
<link href="/themes/light.css" rel="stylesheet" />
|
|
16
|
+
<link href="/themes/dark.css" rel="stylesheet" />
|
|
17
|
+
<link href="/themes/spacing.css" rel="stylesheet" />
|
|
12
18
|
<link
|
|
13
19
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
14
20
|
rel="stylesheet"
|
|
@@ -22,6 +28,9 @@ const Template = ({}) => html `
|
|
|
22
28
|
rel="stylesheet"
|
|
23
29
|
/>
|
|
24
30
|
|
|
31
|
+
<script>
|
|
32
|
+
document.body.classList.add('${theme}')
|
|
33
|
+
</script>
|
|
25
34
|
<style>
|
|
26
35
|
body {
|
|
27
36
|
background-color: cyan;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-menu-portrait.stories.js","sourceRoot":"","sources":["../../stories/ox-menu-portrait.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AACpC,OAAO,qBAAqB,CAAA;AAE5B,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE,EAAE;
|
|
1
|
+
{"version":3,"file":"ox-menu-portrait.stories.js","sourceRoot":"","sources":["../../stories/ox-menu-portrait.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AACpC,OAAO,qBAAqB,CAAA;AAE5B,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;mCAoBtC,KAAK;;;;;;;;;;;;;;;;;;;gCAmBR,KAAK;;CAEpC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA","sourcesContent":["import '../src/ox-menu-portrait'\n\nimport { html, TemplateResult } from 'lit'\nimport { menus } from './test-menus'\nimport './ox-menu-container'\n\nexport default {\n title: 'OxMenuPortrait',\n component: 'ox-menu-portrait',\n argTypes: {\n theme: { control: 'select', options: ['light', 'dark'] }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n theme: 'light' | 'dark'\n}\n\nconst Template: Story<ArgTypes> = ({ theme = 'light' }: ArgTypes) => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <script>\n document.body.classList.add('${theme}')\n </script>\n <style>\n body {\n background-color: cyan;\n }\n\n .container {\n display: flex;\n width: 260px;\n height: 500px;\n }\n\n ox-menu-container {\n flex: 1;\n }\n </style>\n\n <div class=\"container\">\n <ox-menu-container .menus=${menus}></ox-menu-container>\n </div>\n`\n\nexport const Regular = Template.bind({})\n"]}
|
|
@@ -58,7 +58,7 @@ export const menus = [
|
|
|
58
58
|
},
|
|
59
59
|
{
|
|
60
60
|
icon: 'post_add',
|
|
61
|
-
name: '
|
|
61
|
+
name: 'LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG Named MENU',
|
|
62
62
|
path: 'data-entry-list'
|
|
63
63
|
},
|
|
64
64
|
{
|
|
@@ -66,7 +66,7 @@ export const menus = [
|
|
|
66
66
|
type: 'group'
|
|
67
67
|
},
|
|
68
68
|
{
|
|
69
|
-
name: '데이타 샘플 조회',
|
|
69
|
+
name: '데이타 샘플 조회 - 데이타 샘플 조회 - 데이타 샘플 조회 - 데이타 샘플 조회 - 데이타 샘플 조회',
|
|
70
70
|
icon: 'checklist',
|
|
71
71
|
path: 'data-sample-list',
|
|
72
72
|
menus: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"test-menus.js","sourceRoot":"","sources":["../../stories/test-menus.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,KAAK,GAAW;IAC3B;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,OAAO;KACd;IACD;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,sBAAsB;QAC5B,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,KAAK;KACb;IACD;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,uBAAuB;QAC7B,KAAK,EAAE,GAAG;KACX;IACD;QACE,IAAI,EAAE,WAAW;QACjB,IAAI,EAAE,gBAAgB;QACtB,IAAI,EAAE,oBAAoB;QAC1B,WAAW,EAAE,wCAAwC;QACrD,KAAK,EAAE;YACL;gBACE,IAAI,EAAE,OAAO;gBACb,IAAI,EAAE,SAAS;gBACf,IAAI,EAAE,WAAW;aAClB;YACD;gBACE,IAAI,EAAE,UAAU;gBAChB,IAAI,EAAE,SAAS;gBACf,IAAI,EAAE,oBAAoB;aAC3B;SACF;KACF;IACD;QACE,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,OAAO;KACd;IACD;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,kBAAkB;QACxB,IAAI,EAAE,eAAe;KACtB;IACD;QACE,IAAI,EAAE,WAAW;QACjB,IAAI,EAAE,kBAAkB;QACxB,IAAI,EAAE,mBAAmB;KAC1B;IACD;QACE,IAAI,EAAE,WAAW;QACjB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,kBAAkB;KACzB;IACD;QACE,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,OAAO;KACd;IACD;QACE,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"test-menus.js","sourceRoot":"","sources":["../../stories/test-menus.ts"],"names":[],"mappings":"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","sourcesContent":["import { Menu } from '../src/types'\n\nexport const menus: Menu[] = [\n {\n name: '나의 업무 공간',\n type: 'group'\n },\n {\n name: '내 업무함',\n icon: 'format_list_bulleted',\n path: 'todo-list',\n badge: '777'\n },\n {\n name: '내 결재함',\n icon: 'approval',\n path: 'approval-pending-list',\n badge: '3'\n },\n {\n name: '업무 이력 캘린더',\n icon: 'calendar_month',\n path: 'done-list-calendar',\n description: '업무와 관련된 수행 또는 결재 이력을 캘린더에서 조회할 수 있습니다.',\n menus: [\n {\n name: '업무 이력',\n icon: 'history',\n path: 'done-list'\n },\n {\n name: '결재 수행 이력',\n icon: 'history',\n path: 'approval-done-list'\n }\n ]\n },\n {\n name: 'DATASET',\n type: 'group'\n },\n {\n name: '데이타 셋 관리',\n icon: 'display_settings',\n path: 'data-set-list'\n },\n {\n name: '데이타 키셋 관리',\n icon: 'display_settings',\n path: 'data-key-set-list'\n },\n {\n name: '데이타 센서 관리',\n icon: 'sensors',\n path: 'data-sensor-list'\n },\n {\n name: 'DATA ENTRY',\n type: 'group'\n },\n {\n icon: 'post_add',\n name: 'LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG Named MENU',\n path: 'data-entry-list'\n },\n {\n name: 'DATA REPORT',\n type: 'group'\n },\n {\n name: '데이타 샘플 조회 - 데이타 샘플 조회 - 데이타 샘플 조회 - 데이타 샘플 조회 - 데이타 샘플 조회',\n icon: 'checklist',\n path: 'data-sample-list',\n menus: [\n {\n name: 'TEST',\n icon: 'checklist',\n path: 'data-sample-search/bfb95a47-5cbd-4415-9032-14789e27c819'\n },\n {\n name: '자숙 공정',\n icon: 'checklist',\n path: 'data-sample-search/5aad9fe2-56a3-4796-afd9-6c044ab39990'\n },\n {\n name: '탕비실 관리',\n icon: 'checklist',\n path: 'data-sample-search/0176fcc3-0dbf-4fe6-9bd0-ca9f9ae91cf4'\n },\n {\n name: '파일 관리',\n icon: 'checklist',\n path: 'data-sample-search/9c6ce158-e28c-4b00-92b9-59739d906609'\n },\n {\n name: '화장실 관리',\n icon: 'checklist',\n path: 'data-sample-search/3998c6a1-b39d-45cf-a0cb-2b11b49331a0'\n }\n ]\n },\n {\n name: '데이타 이탈점 조회',\n icon: 'playlist_remove',\n path: 'data-ooc-list'\n },\n {\n name: '데이터 수집 마감 조회',\n icon: 'functions',\n path: 'data-summary-list',\n menus: [\n {\n name: '자숙 공정',\n icon: 'checklist',\n path: 'data-summary-period/5aad9fe2-56a3-4796-afd9-6c044ab39990'\n },\n {\n name: '탕비실 관리',\n icon: 'checklist',\n path: 'data-summary-period/0176fcc3-0dbf-4fe6-9bd0-ca9f9ae91cf4'\n },\n {\n name: '화장실 관리',\n icon: 'checklist',\n path: 'data-summary-period/3998c6a1-b39d-45cf-a0cb-2b11b49331a0'\n }\n ]\n },\n {\n icon: 'newspaper',\n name: '데이타 리포트',\n path: 'data-report-list'\n },\n {\n icon: 'archive',\n name: '데이타 아카이브 조회',\n path: 'data-archive-list'\n },\n {\n name: '조직',\n type: 'group'\n },\n {\n name: '조직',\n icon: 'account_tree',\n description: '조직 구성과 결재선 관리를 위한 메뉴 구성입니다.',\n menus: [\n {\n name: '연락처 관리',\n path: 'contact-list'\n },\n {\n name: '직원 목록',\n path: 'employee-list'\n },\n {\n name: '부서 조직도',\n path: 'department-tree'\n },\n {\n name: '부서 목록',\n path: 'department-list'\n },\n {\n name: '나의 결재라인 템플릿 목록',\n path: 'my-approval-line-templates-page'\n },\n {\n name: '공통 결재라인 템플릿 목록',\n path: 'common-approval-line-templates-page'\n }\n ]\n },\n {\n name: '모니터링',\n type: 'board',\n path: 'board-viewer/85f69924-cdff-438a-9691-569b3542c38e?title=모니터링',\n icon: 'dashboard'\n }\n]\n"]}
|