@operato/menu 8.0.0-beta.0 → 8.0.0-beta.2

package/src/ox-menu-part.ts

@@ -1,131 +0,0 @@
-import '@material/web/icon/icon.js'
-import './ox-menu-portrait'
-import './ox-menu-landscape'
-
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers'
-
-import { store } from '@operato/shell'
-import { ScrollbarStyles } from '@operato/styles'
-
-import { Menu } from './types'
-
-function isActiveMenu(menu: Menu, path: string) {
-  return (
-    menu.path?.split('?')[0] === path ||
-    (menu.active && typeof menu.active === 'function' && menu.active.call(menu, { path }))
-  )
-}
-
-@customElement('ox-menu-part')
-export class OxMenuPart extends connect(store)(LitElement) {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        overflow-y: auto;
-        flex-direction: column;
-        height: 100%;
-        min-width: 200px;
-        background-color: var(--md-sys-color-surface);
-      }
-
-      :host([landscape]) {
-        overflow-x: auto;
-        flex-direction: row;
-        width: 100%;
-        min-height: 20px;
-      }
-
-      ox-menu-portrait,
-      ox-menu-landscape {
-        flex: 1;
-      }
-    `
-  ]
-
-  @property({ type: String }) page!: string
-  @property({ type: String }) resourceId?: string
-  @property({ type: Array }) menus?: Menu[]
-  @property({ type: String }) orientation?: 'landscape' | 'portrait'
-
-  @state() slotTemplate: any
-  @state() _activeTopLevel?: Menu
-  @state() _activeMenu?: Menu
-  @state() _path?: string
-
-  render() {
-    return html`
-      <slot name="head"></slot>
-      ${this.orientation !== 'landscape'
-        ? html`<ox-menu-portrait
-            .menus=${this.menus}
-            .activeTopLevel=${this._activeTopLevel}
-            .activeMenu=${this._activeMenu}
-            .path=${this._path}
-          ></ox-menu-portrait>`
-        : html`<ox-menu-landscape
-            .menus=${this.menus}
-            .activeTopLevel=${this._activeTopLevel}
-            .activeMenu=${this._activeMenu}
-            .path=${this._path}
-          ></ox-menu-landscape>`}
-      <slot name="tail"></slot>
-    `
-  }
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('active-toplevel', (e: Event) => {
-      e.stopPropagation()
-      e.preventDefault()
-
-      this._activeTopLevel = (e as CustomEvent).detail
-    })
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('menus') || changes.has('page') || changes.has('resourceId')) {
-      this.findActivePage()
-    }
-
-    if (changes.has('orientation')) {
-      if (this.orientation == 'portrait') {
-        this.removeAttribute('landscape')
-      } else {
-        this.setAttribute('landscape', '')
-      }
-    }
-
-    if (changes.has('slotTemplate')) {
-      this.replaceChild(this.slotTemplate, this.renderRoot)
-    }
-  }
-
-  stateChanged(state: any): void {
-    this.page = state.route.page
-    this.resourceId = state.route.resourceId
-    this.menus = state.liteMenu.menus || []
-    this.slotTemplate = state.liteMenu.slotTemplate
-  }
-
-  private findActivePage() {
-    var path = this.resourceId ? `${this.page}/${this.resourceId}` : this.page
-    var menus = this.menus || []
-    var activeMenu
-
-    this._activeTopLevel = menus.find(menu => {
-      if (isActiveMenu(menu, path)) {
-        activeMenu = menu
-        return true
-      } else if (menu.menus) {
-        activeMenu = menu.menus.find(menu => isActiveMenu(menu, path))
-        return !!activeMenu
-      }
-    })
-
-    this._path = path
-    this._activeMenu = activeMenu || this._activeTopLevel
-  }
-}

package/src/ox-menu-portrait.ts

@@ -1,91 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { html, LitElement, nothing, TemplateResult } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { navigate } from '@operato/shell'
-import { ScrollbarStyles } from '@operato/styles'
-
-import { Menu } from './types'
-import { MenuPortraitStyles } from './menu-portrait-styles'
-
-@customElement('ox-menu-portrait')
-export class OxMenuPortrait extends LitElement {
-  static styles = [ScrollbarStyles, MenuPortraitStyles]
-
-  @property({ type: Array }) menus?: Menu[]
-  @property({ type: Object }) activeTopLevel?: Menu
-  @property({ type: Object }) activeMenu?: Menu
-  @property({ type: String }) path!: string
-
-  renderMenus(menus: Menu[], activeTopLevel?: Menu, activeMenu?: Menu): TemplateResult | typeof nothing {
-    if (menus.length == 0) {
-      return nothing
-    }
-
-    return html`
-      <ul>
-        ${menus.map(menu => {
-          var { type, name, active, path, label = name, badge, icon, menus = [] } = menu
-          active = active && typeof active === 'function' ? active.call(menu, { path: this.path }) : false
-          badge = typeof badge === 'function' ? badge.call(menu) : badge ?? false
-
-          return type == 'group'
-            ? html`<li group-label>${label}</li>`
-            : html`
-                <li ?active=${activeTopLevel ? menu === activeTopLevel : active} .menu=${menu} menu>
-                  <a href=${path || '#'}>
-                    <md-icon filled>${icon || 'fiber_manual_record'}</md-icon>
-                    <span>${label}</span>${badge !== false ? html`<div badge>${badge}</div>` : html``}
-                    ${menus.length > 0 ? html` <md-icon filled submenu-button></md-icon> ` : html``}
-                  </a>
-                  ${menus && this.renderMenus(menus || [], activeMenu)}
-                </li>
-              `
-        })}
-      </ul>
-    `
-  }
-
-  render() {
-    const { menus, activeTopLevel, activeMenu } = this
-    return this.renderMenus(menus || [], activeTopLevel, activeMenu)
-  }
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('click', (e: Event) => {
-      const menuElement = (e.target as Element)!.closest('[menu]')
-
-      //@ts-ignore
-      if (menuElement?.menu) {
-        //@ts-ignore
-        let menu = menuElement.menu
-
-        if (!menu.path) {
-          /* protect to act move to href. */
-          e.stopPropagation()
-          e.preventDefault()
-        }
-
-        this.dispatchEvent(
-          new CustomEvent('active-toplevel', {
-            bubbles: true,
-            detail: this.activeTopLevel === menu ? undefined : menu
-          })
-        )
-      }
-
-      /* to respond even if current acting menu is selected */
-      let href = (e.target as HTMLAnchorElement)!.href
-      href && location.href === href && navigate(href + '#force', true)
-    })
-
-    /* to hide scrollbar during transition */
-    this.renderRoot.addEventListener('transitionstart', e => {
-      ;(e.target as Element).removeAttribute('settled')
-    })
-    this.renderRoot.addEventListener('transitionend', e => {
-      ;(e.target as Element).setAttribute('settled', '')
-    })
-  }
-}

package/src/ox-top-menu-bar.ts

@@ -1,147 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { css, html, LitElement, PropertyValueMap, TemplateResult } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers'
-
-import { toggleOverlay } from '@operato/layout'
-import { store } from '@operato/shell'
-
-import { Menu } from './types'
-
-@customElement('ox-top-menu-bar')
-export class OxTopMenuBar extends connect(store)(LitElement) {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: row;
-      }
-
-      span {
-        flex: 1;
-      }
-
-      ul {
-        display: flex;
-        align-items: center;
-        list-style: none;
-        margin: 0;
-        padding: 0;
-      }
-
-      li {
-        display: inline-flex;
-        flex-direction: row nowrap;
-        float: left;
-        overflow: none;
-      }
-
-      a {
-        display: inline-block;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        padding: var(--padding-default) var(--spacing-large) var(--spacing-small) var(--spacing-large);
-        text-decoration: none;
-        color: white;
-      }
-      a * {
-        vertical-align: middle;
-      }
-      a md-icon {
-        opacity: 0.5;
-        position: relative;
-        top: -2px;
-        font-size: 1em;
-      }
-
-      li[active] a {
-        font-weight: bold;
-      }
-      li[active] a md-icon {
-        opacity: 1;
-      }
-    `
-  ]
-
-  @property({ type: String }) page?: string
-  @property({ type: String }) resourceId?: string
-  @property({ type: Array }) menus?: Menu[]
-  @property({ type: Object }) slotTemplate!: Node
-
-  @state() private _activeTopLevel?: Menu
-
-  render() {
-    const { menus = [], _activeTopLevel } = this
-
-    return html`
-      <slot name="head"></slot>
-      <ul>
-        ${menus.map(menu =>
-          menu.type == 'group'
-            ? html``
-            : html`
-                <li ?active=${menu === _activeTopLevel}>
-                  <a
-                    href="#"
-                    @click=${(e: MouseEvent) => {
-                      e.preventDefault()
-                      toggleOverlay('ox-menu-part', {
-                        backdrop: true
-                      })
-                    }}
-                  >
-                    ${menu.name}
-                    <md-icon>expand_more</md-icon>
-                  </a>
-                </li>
-              `
-        )}
-      </ul>
-      <slot name="tail"></slot>
-    `
-  }
-
-  stateChanged(state: any): void {
-    this.page = state.route.page
-    this.resourceId = state.route.resourceId
-    this.menus = state.liteMenu.menus || []
-    this.slotTemplate = state.liteMenu.slotTemplate
-  }
-
-  // firstUpdated() {
-  //   this.addEventListener('mousewheel', this.onWheelEvent.bind(this), false)
-  // }
-
-  updated(changes: PropertyValueMap<this>) {
-    if (changes.has('menus') || changes.has('page') || changes.has('resourceId')) {
-      this._findActivePage()
-    }
-
-    if (changes.has('slotTemplate')) {
-      this.replaceChild(this.slotTemplate, this.renderRoot)
-    }
-  }
-
-  // onWheelEvent(e) {
-  //   var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))
-  //   this.scrollLeft -= delta * 40
-  //   console.log('delta', this.scrollLeft, delta, e.wheelDelta || -e.detail)
-
-  //   e.preventDefault()
-  // }
-
-  _findActivePage() {
-    var path = this.resourceId ? `${this.page}/${this.resourceId}` : this.page
-    var menus = this.menus || []
-
-    this._activeTopLevel = menus.find(menu => {
-      if (menu.path?.split('?')[0] === path) {
-        return true
-      } else if (menu.menus) {
-        return !!menu.menus.find(menu => menu.path?.split('?')[0] === path)
-      }
-    })
-  }
-}

package/src/types.ts

@@ -1,11 +0,0 @@
-export type Menu = {
-  type?: 'group' | 'board'
-  name?: string
-  description?: string
-  path?: string
-  icon?: string
-  label?: string
-  badge?: boolean | string | (() => boolean)
-  active?: boolean | ((menu?: Menu) => boolean)
-  menus?: Menu[]
-}

package/stories/ox-menu-container.ts

@@ -1,97 +0,0 @@
-import '@material/web/icon/icon.js'
-import '../src/ox-menu-portrait'
-
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-
-import { ScrollbarStyles } from '@operato/styles'
-
-import { Menu } from '../src/types'
-
-function isActiveMenu(menu: Menu, path?: string) {
-  return (
-    menu.path?.split('?')[0] === path ||
-    (menu.active && typeof menu.active === 'function' && menu.active.call(menu, { path }))
-  )
-}
-
-@customElement('ox-menu-container')
-export class OxMenuContainer extends LitElement {
-  static styles = [
-    ScrollbarStyles,
-    css`
-      :host {
-        display: flex;
-        overflow-y: auto;
-        flex-direction: column;
-        background-color: var(--md-sys-color-surface);
-      }
-    `
-  ]
-
-  @property({ type: Array }) menus?: Menu[]
-
-  @state() activeMenu?: Menu
-  @state() activeTopLevel?: Menu
-  @state() path?: string
-
-  render() {
-    return html`
-      <div
-        @click=${(e: MouseEvent) => {
-          if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey) {
-            return
-          }
-          const anchor: HTMLAnchorElement = e.composedPath().filter((n: any) => n.tagName === 'A')[0] as any
-          if (!anchor) {
-            return
-          }
-          const href = anchor.href
-          e.preventDefault()
-
-          var [_, path, ...others] = new URL(href).pathname.split('/')
-          this.path = path
-        }}
-      >
-        <ox-menu-portrait
-          .menus=${this.menus}
-          .activeTopLevel=${this.activeTopLevel}
-          .activeMenu=${this.activeMenu}
-          .path=${this.path || ''}
-        ></ox-menu-portrait>
-      </div>
-    `
-  }
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('active-toplevel', (e: Event) => {
-      e.stopPropagation()
-      e.preventDefault()
-
-      this.activeTopLevel = (e as CustomEvent).detail
-    })
-  }
-
-  updated(changes: PropertyValues<this>) {
-    if (changes.has('menus') || changes.has('path')) {
-      this.findActivePage()
-    }
-  }
-
-  private findActivePage() {
-    var menus = this.menus || []
-    var activeMenu
-
-    this.activeTopLevel = menus.find(menu => {
-      if (isActiveMenu(menu, this.path)) {
-        activeMenu = menu
-        return true
-      } else if (menu.menus) {
-        activeMenu = menu.menus.find((menu: Menu) => isActiveMenu(menu, this.path))
-        return !!activeMenu
-      }
-    })
-
-    this.activeMenu = activeMenu || this.activeTopLevel
-  }
-}

package/stories/ox-menu-portrait.stories.ts

@@ -1,65 +0,0 @@
-import '../src/ox-menu-portrait'
-
-import { html, TemplateResult } from 'lit'
-import { menus } from './test-menus'
-import './ox-menu-container'
-
-export default {
-  title: 'OxMenuPortrait',
-  component: 'ox-menu-portrait',
-  argTypes: {}
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {}
-
-const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
-
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/light.css" rel="stylesheet" />
-  <link href="/themes/dark.css" rel="stylesheet" />
-  <link href="/themes/spacing.css" rel="stylesheet" />
-  <link href="/themes/grist-theme.css" rel="stylesheet" />
-  <link href="/themes/form-theme.css" rel="stylesheet" />
-
-  <style>
-    body {
-      background-color: cyan;
-    }
-
-    .container {
-      display: flex;
-      width: 260px;
-      height: 500px;
-    }
-
-    ox-menu-container {
-      flex: 1;
-    }
-  </style>
-
-  <div class="container">
-    <ox-menu-container .menus=${menus}></ox-menu-container>
-  </div>
-`
-
-export const Regular = Template.bind({})