@things-factory/meta-ui 7.0.1-alpha.1 → 7.0.1-alpha.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/meta-ui",
-  "version": "7.0.1-alpha.1",
+  "version": "7.0.1-alpha.11",
   "main": "dist-server/index.js",
   "browser": "dist-client/index.js",
   "things-factory": true,
@@ -30,18 +30,19 @@
     "@operato/data-grist": "^2.0.0-alpha.0",
     "@operato/i18n": "^2.0.0-alpha.0",
     "@operato/layout": "^2.0.0-alpha.0",
+    "@operato/menu": "^2.0.0-alpha.0",
     "@operato/popup": "^2.0.0-alpha.0",
     "@operato/shell": "^2.0.0-alpha.0",
     "@operato/styles": "^2.0.0-alpha.0",
     "@operato/time-calculator": "^2.0.0-alpha.0",
     "@operato/utils": "^2.0.0-alpha.0",
-    "@things-factory/auth-base": "^7.0.1-alpha.1",
+    "@things-factory/auth-base": "^7.0.1-alpha.10",
     "@things-factory/env": "^7.0.1-alpha.0",
-    "@things-factory/id-rule-base": "^7.0.1-alpha.1",
-    "@things-factory/menu-base": "^7.0.1-alpha.1",
-    "@things-factory/resource-base": "^7.0.1-alpha.1",
-    "@things-factory/shell": "^7.0.1-alpha.1",
-    "@things-factory/worklist": "^7.0.1-alpha.1"
+    "@things-factory/id-rule-base": "^7.0.1-alpha.10",
+    "@things-factory/menu-base": "^7.0.1-alpha.10",
+    "@things-factory/resource-base": "^7.0.1-alpha.10",
+    "@things-factory/shell": "^7.0.1-alpha.10",
+    "@things-factory/worklist": "^7.0.1-alpha.10"
   },
-  "gitHead": "6cc9a9da9059f32f8c2968c57831c1d353a2ec97"
+  "gitHead": "c535494f8e2d0761fb672bcb7a8efe427e733129"
 }

package/client/viewparts/dynamic-menu-landscape-styles.js

@@ -1,149 +0,0 @@
-import { css } from 'lit'
-
-export const DynamicMenuLandscapeStyles = css`
-  :host {
-    overflow-x: auto;
-    background-color: var(--secondary-text-color);
-    --focus-anchor-color: #e6ffa2;
-  }
-
-  :host > div {
-    overflow-x: auto;
-  }
-
-  :host > div > ul {
-    display: flex;
-    flex-direction: row;
-    list-style: none;
-    margin: auto;
-    padding: 0;
-    border: var(--border-dark-color);
-    border-width: 0 1px;
-    max-width: 1250px;
-  }
-
-  :host > div > ul > li {
-    flex: 1;
-
-    display: flex;
-    flex-direction: column;
-  }
-  :host > div > ul > li > a {
-    display: none;
-    font-weight: bold;
-    font-size: var(--fontsize-large);
-  }
-
-  ul[submenus] {
-    flex: 1;
-    list-style: none;
-    overflow-y: hidden;
-    background-color: var(--primary-color);
-    margin: 0;
-    padding: 0;
-    border-left: var(--border-dark-color);
-  }
-
-  ul[submenus] li {
-    min-width: 120px;
-    max-width: 180px;
-  }
-
-  a {
-    display: block;
-    padding: var(--padding-default) var(--padding-default) var(--padding-narrow) var(--padding-wide);
-    text-decoration: none;
-    font: normal 14px var(--theme-font);
-    color: var(--theme-white-color);
-    text-transform: capitalize;
-
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  a:hover {
-    font-weight: bold;
-  }
-
-  ul[submenus] a::before {
-    content: '';
-    display: inline-block;
-    position: relative;
-    top: -1px;
-    width: 5px;
-    height: 5px;
-    border: 1px solid var(--theme-white-color);
-    border-radius: 50%;
-    background-color: transparent;
-    margin-right: 3px;
-  }
-  ul[submenus] a:hover,
-  ul[submenus] li[active] a {
-    background-color: rgba(var(--secondary-color-rgb), 0.3);
-    color: var(--focus-anchor-color);
-    font-weight: bold;
-  }
-
-  [description] {
-    background-color: var(--primary-color);
-    margin: 0;
-    padding: var(--padding-default) 0;
-    border-left: 1px solid rgba(0, 0, 0, 0.1);
-    color: var(--focus-anchor-color);
-    font-size: 11px;
-  }
-  [description] mwc-icon {
-    background-color: rgba(0, 0, 0, 0.15);
-    margin-right: 4px;
-    padding: var(--padding-narrow);
-    border-radius: 0 5px 5px 0;
-    float: left;
-    font-size: 26px;
-  }
-
-  @media only screen and (max-width: 460px) {
-    :host {
-      min-width: 100vw;
-    }
-    :host > div {
-      display: initial;
-    }
-    :host > div > ul {
-      flex-direction: column;
-    }
-    a {
-      padding: var(--padding-wide);
-      font: normal 15px var(--theme-font);
-    }
-    li[active] ul {
-      border-bottom: 2px solid rgba(0, 0, 0, 0.1);
-    }
-    li li a {
-      display: block;
-      padding: var(--padding-wide) var(--padding-default) var(--padding-wide) 35px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font: normal 14px var(--theme-font);
-    }
-    li li[active] a {
-      font: bold 14px var(--theme-font);
-    }
-    :host > div > ul > li > a {
-      display: block;
-    }
-    :host > div > ul > li > a mwc-icon {
-      font-size: 1em;
-      position: relative;
-      top: 2px;
-    }
-    [description] {
-      display: none;
-    }
-    ul[submenus] a:hover,
-    ul[submenus] li[active] a {
-      background-color: rgba(var(--secondary-color-rgb), 0.3);
-    }
-  }
-`

package/client/viewparts/dynamic-menu-landscape.js

@@ -1,106 +0,0 @@
-import '@material/mwc-icon'
-
-import { html, LitElement } from 'lit'
-import { connect } from 'pwa-helpers'
-
-import { navigate, store } from '@operato/shell'
-import { ScrollbarStyles } from '@operato/styles'
-
-import { DynamicMenuLandscapeStyles } from './dynamic-menu-landscape-styles'
-
-export class DynamicMenuLandscape extends connect(store)(LitElement) {
-  static get styles() {
-    return [ScrollbarStyles, DynamicMenuLandscapeStyles]
-  }
-
-  static get properties() {
-    return {
-      menus: Array,
-      activeTopLevel: Object,
-      activeMenu: Object,
-      path: String
-    }
-  }
-
-  render() {
-    const { menus = [], activeTopLevel, activeMenu } = this
-
-    return html`
-      <div id="wrap">
-        <ul>
-          ${menus.map(menu =>
-            menu.type == 'group'
-              ? html``
-              : html`
-                  <li ?active=${menu === activeTopLevel}>
-                    <a href=${menu.path || '#'}>
-                      ${menu.icon ? html`<mwc-icon>${menu.icon}</mwc-icon>` : html``} ${menu.name}
-                    </a>
-
-                    <ul submenus>
-                      ${menu.menus?.map(
-                        menu => html`
-                          <li ?active=${menu === activeMenu}>
-                            <a href=${menu.path || '#'}> ${menu.name} </a>
-                          </li>
-                        `
-                      )}
-                    </ul>
-
-                    <div description>
-                      ${menu.icon ? html`<mwc-icon>${menu.icon}</mwc-icon>` : html``} ${menu.description || ''}
-                    </div>
-                  </li>
-                `
-          )}
-        </ul>
-      </div>
-    `
-  }
-
-  firstUpdated() {
-    const wrap = this.renderRoot.querySelector('#wrap')
-    wrap.addEventListener('mousewheel', this.onWheelEvent.bind(this), false)
-
-    this.renderRoot.addEventListener('click', e => {
-      if (e.target.submenu) {
-        /* protect to act move to href. */
-        e.stopPropagation()
-        e.preventDefault()
-
-        let menu = e.target.submenu
-
-        this.dispatchEvent(
-          new CustomEvent('active-toplevel', {
-            bubbles: true,
-            detail: this.activeTopLevel === menu ? undefined : menu
-          })
-        )
-
-        return
-      }
-
-      /* to respond even if current acting menu is selected */
-      let href = e.target.href
-      href && location.href === href && navigate(href + '#force', true)
-    })
-
-    /* to hide scrollbar during transition */
-    this.renderRoot.addEventListener('transitionstart', e => {
-      e.target.removeAttribute('settled')
-    })
-    this.renderRoot.addEventListener('transitionend', e => {
-      e.target.setAttribute('settled', '')
-    })
-  }
-
-  onWheelEvent(e) {
-    const wrap = e.currentTarget
-    var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))
-    wrap.scrollLeft -= delta * 10
-
-    e.preventDefault()
-  }
-}
-
-customElements.define('dynamic-menu-landscape', DynamicMenuLandscape)

package/client/viewparts/dynamic-menu-portrait-styles.js

@@ -1,130 +0,0 @@
-import { css } from 'lit'
-
-export const DynamicMenuPortraitStyles = css`
-  :host {
-    display: flex;
-    overflow-y: auto;
-    flex-direction: column;
-    height: 100%;
-  }
-
-  :host > ul {
-    margin-block-end: 1.5em;
-  }
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  [group-label] {
-    padding: 25px 0 var(--padding-narrow) var(--padding-wide);
-    border-bottom: var(--border-dark-color);
-    font: bold 12px var(--theme-font);
-    color: rgba(var(--primary-color-rgb), 0.9);
-    text-transform: uppercase;
-  }
-  a {
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
-    padding: var(--padding-default) var(--padding-default) var(--padding-default) var(--padding-wide);
-    text-decoration: none;
-    font: normal 14px var(--theme-font);
-    color: var(--secondary-color);
-    text-transform: capitalize;
-
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  a:hover {
-    color: var(--primary-color);
-    font-weight: bold;
-  }
-  a * {
-    vertical-align: middle;
-  }
-  a mwc-icon {
-    margin-top: -3px;
-    margin-right: var(--margin-narrow);
-    font-size: 15px;
-    color: rgba(var(--secondary-color-rgb), 0.7);
-  }
-  a [submenu-button] {
-    float: left;
-    margin: -5px 0 0 -8px;
-    font-size: 25px;
-    max-height: 20px;
-  }
-  a [submenu-button]::before {
-    content: 'arrow_right';
-  }
-  li[active] > a [submenu-button]::before {
-    content: 'arrow_drop_down';
-  }
-  li[active] > a {
-    border-left: 3px solid var(--primary-color);
-    font-weight: bold;
-    color: var(--primary-color);
-  }
-  li li a {
-    padding: 7px 0 7px 35px;
-    font: normal 13px var(--theme-font);
-    color: var(--secondary-color);
-  }
-  li li[active] a {
-    background-color: rgba(var(--primary-color-rgb), 0.15);
-    font: bold 13px var(--theme-font);
-    color: var(--primary-color);
-  }
-  li > ul {
-    overflow-y: hidden;
-    max-height: 0;
-    background-color: #f6f6f6;
-
-    transition-property: all;
-    transition-duration: 0.7s;
-  }
-  li[active] > ul {
-    max-height: 500px;
-  }
-  li[active] > ul[settled] {
-    overflow-y: auto;
-  }
-  li li a::before {
-    margin-right: var(--margin-narrow);
-  }
-
-  a [badge] {
-    margin-left: auto;
-    background-color: var(--primary-background-color);
-    color: white;
-    border-radius: 999em;
-    padding: 0px 6px;
-  }
-
-  @media only screen and (max-width: 460px) {
-    :host {
-      min-width: 100vw;
-    }
-    a {
-      padding: var(--padding-wide);
-      font: normal 15px var(--theme-font);
-    }
-    li[active] ul {
-      border-bottom: 2px solid rgba(0, 0, 0, 0.1);
-    }
-    li li a {
-      display: block;
-      padding: var(--padding-wide) var(--padding-default) var(--padding-wide) 35px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font: normal 14px var(--theme-font);
-    }
-    li li[active] a {
-      font: bold 14px var(--theme-font);
-    }
-  }
-`

package/client/viewparts/dynamic-menu-portrait.js

@@ -1,90 +0,0 @@
-import '@material/mwc-icon'
-
-import { html, LitElement } from 'lit'
-
-import { navigate } from '@operato/shell'
-import { ScrollbarStyles } from '@operato/styles'
-
-import { DynamicMenuPortraitStyles } from './dynamic-menu-portrait-styles'
-
-export class DynamicMenuPortrait extends LitElement {
-  static get styles() {
-    return [ScrollbarStyles, DynamicMenuPortraitStyles]
-  }
-
-  static get properties() {
-    return {
-      menus: Array,
-      activeTopLevel: Object,
-      activeMenu: Object,
-      path: String
-    }
-  }
-
-  renderMenus(menus, activeTopLevel, activeMenu) {
-    return html`
-      <ul>
-      ${menus.map(menu => {
-        var { type, active, path, 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>${name}</li>`
-          : html`
-              <li ?active=${activeTopLevel ? menu === activeTopLevel : active} .menu=${menu} menu>
-                <a href=${path || '#'}>
-                  ${menus?.length > 0 ? html` <mwc-icon submenu-button></mwc-icon> ` : html``}
-                  <mwc-icon>${icon}</mwc-icon>
-                  ${name} ${badge !== false ? html`<div badge>${badge}</div>` : 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 => {
-      const menuElement = e.target.closest('[menu]')
-
-      if (menuElement?.menu) {
-        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.href
-      href && location.href === href && navigate(href + '#force', true)
-    })
-
-    /* to hide scrollbar during transition */
-    this.renderRoot.addEventListener('transitionstart', e => {
-      e.target.removeAttribute('settled')
-    })
-    this.renderRoot.addEventListener('transitionend', e => {
-      e.target.setAttribute('settled', '')
-    })
-  }
-}
-
-customElements.define('dynamic-menu-portrait', DynamicMenuPortrait)

package/client/viewparts/dynamic-top-menu-bar.js

@@ -1,148 +0,0 @@
-import '@material/mwc-icon'
-
-import { css, html, LitElement } from 'lit'
-import { connect } from 'pwa-helpers'
-
-import { toggleOverlay } from '@operato/layout'
-import { store } from '@operato/shell'
-
-export class DynamicTopMenuBar extends connect(store)(LitElement) {
-  static get styles() {
-    return 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(--padding-wide) var(--padding-narrow) var(--padding-wide);
-        text-decoration: none;
-        color: white;
-      }
-      a * {
-        vertical-align: middle;
-      }
-      a mwc-icon {
-        opacity: 0.5;
-        position: relative;
-        top: -2px;
-        font-size: 1em;
-      }
-
-      li[active] a {
-        font-weight: bold;
-      }
-      li[active] a mwc-icon {
-        opacity: 1;
-      }
-    `
-  }
-
-  static get properties() {
-    return {
-      page: String,
-      resourceId: String,
-      menus: Array,
-
-      _activeTopLevel: Object
-    }
-  }
-
-  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 => {
-                      e.preventDefault()
-                      toggleOverlay('dyamic-menu-part', {
-                        backdrop: true
-                      })
-                    }}
-                  >
-                    ${menu.name}
-                    <mwc-icon>expand_more</mwc-icon>
-                  </a>
-                </li>
-              `
-        )}
-      </ul>
-      <slot name="tail"></slot>
-    `
-  }
-
-  stateChanged(state) {
-    this.page = state.route.page
-    this.resourceId = state.route.resourceId
-    this.menus = state.metaUI.menus || []
-    this.slotTemplate = state.metaUI.slotTemplate
-  }
-
-  // firstUpdated() {
-  //   this.addEventListener('mousewheel', this.onWheelEvent.bind(this), false)
-  // }
-
-  updated(changes) {
-    if (changes.has('menus') || changes.has('page') || changes.has('resourceId')) {
-      this._findActivePage()
-    }
-
-    if (changes.has('slotTemplate')) {
-      this.replaceChild(this.slotTemplate)
-    }
-  }
-
-  // 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)
-      }
-    })
-  }
-}
-
-customElements.define('dynamic-top-menu-bar', DynamicTopMenuBar)

package/dist-client/viewparts/dynamic-menu-landscape-styles.d.ts

@@ -1 +0,0 @@
-export const DynamicMenuLandscapeStyles: import("lit").CSSResult;