@things-factory/lite-menu 6.2.77 → 6.2.78

package/client/actions/{lite-menu.js → lite-menu.ts}

@@ -8,8 +8,8 @@ import { client } from '@operato/graphql'
 import { appendViewpart, toggleOverlay, TOOL_POSITION, VIEWPART_POSITION } from '@operato/layout'
 import { store, InheritedValueType } from '@operato/shell'
 import { isMobileDevice } from '@operato/utils'
+import { clientSettingStore } from '@operato/shell'
 import { APPEND_APP_TOOL, REMOVE_APP_TOOL } from '@things-factory/apptool-base'
-import { clientSettingStore } from '@things-factory/shell'
 
 export const UPDATE_ADDON_MENUS = 'UPDATE_ADDON_MENUS'
 export const UPDATE_MENU_TEMPLATE = 'UPDATE_MENU_TEMPLATE'
@@ -87,7 +87,7 @@ export function updateMenuTemplate(template) {
 }
 
 export async function fetchAddonMenus() {
-  var applicationName = document.querySelector('meta[name="application-name"]')?.content
+  var applicationName = (document.querySelector('meta[name="application-name"]') as HTMLMetaElement)?.content
 
   var liteMenus = (
     await client.query({

package/client/{lite-menu-setting-let.js → lite-menu-setting-let.ts}

@@ -3,30 +3,26 @@ import '@material/mwc-checkbox'
 import '@operato/i18n/ox-i18n.js'
 
 import { css, html, LitElement } from 'lit'
+import { customElement, query, property, state } from 'lit/decorators.js'
 
-import { i18next, localize } from '@things-factory/i18n-base'
-import { clientSettingStore } from '@things-factory/shell'
+import { clientSettingStore } from '@operato/shell'
+import { i18next, localize } from '@operato/i18n'
 
 import { setupMenuPart } from './actions/lite-menu'
 
+@customElement('lite-menu-setting-let')
 export class LiteMenuSettingLet extends localize(i18next)(LitElement) {
-  static get styles() {
-    return [
-      css`
-        label {
-          font: var(--label-font);
-          color: var(--label-color);
-          text-transform: var(--label-text-transform);
-        }
-      `
-    ]
-  }
+  static styles = [
+    css`
+      label {
+        font: var(--label-font);
+        color: var(--label-color);
+        text-transform: var(--label-text-transform);
+      }
+    `
+  ]
 
-  static get properties() {
-    return {
-      hovering: Boolean
-    }
-  }
+  @property({ type: Boolean }) hovering?: boolean
 
   render() {
     const checked = this.hovering === true
@@ -40,7 +36,7 @@ export class LiteMenuSettingLet extends localize(i18next)(LitElement) {
           <mwc-formfield label="hovering">
             <mwc-checkbox
               id="hovering"
-              @change=${e => this.onchange(e)}
+              @change=${e => this.onChange(e)}
               ?checked=${checked}
               ?indeterminate=${indeterminate}
             ></mwc-checkbox>
@@ -54,7 +50,7 @@ export class LiteMenuSettingLet extends localize(i18next)(LitElement) {
     this.hovering = ((await clientSettingStore.get('lite-menu'))?.value || {}).hovering
   }
 
-  async onchange(e) {
+  async onChange(e: Event) {
     if (this.hovering === true) {
       this.hovering = false
     } else if (this.hovering === false) {
@@ -84,5 +80,3 @@ export class LiteMenuSettingLet extends localize(i18next)(LitElement) {
     })
   }
 }
-
-customElements.define('lite-menu-setting-let', LiteMenuSettingLet)

package/client/pages/{addon-menu-setting.js → addon-menu-setting.ts}

@@ -3,77 +3,76 @@ import '@operato/data-grist/ox-filters-form.js'
 import '@operato/data-grist/ox-sorters-control.js'
 import '@operato/data-grist/ox-record-creator.js'
 import '@operato/popup/ox-popup.js'
+import '@operato/context/ox-context-page-toolbar.js'
 import '@material/mwc-icon'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
-import { getEditor, getRenderer } from '@operato/data-grist'
+import { DataGrist, getEditor, getRenderer } from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { PageView, store } from '@operato/shell'
-import { CommonButtonStyles, CommonGristStyles } from '@operato/styles'
+import { ScrollbarStyles, CommonHeaderStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
 
 import { fetchAddonMenus } from '../actions/lite-menu'
 
-const applicationName = document.querySelector('meta[name="application-name"]')?.content
+const applicationName = (document.querySelector('meta[name="application-name"]') as HTMLMetaElement)?.content
 
+@customElement('addon-menu-setting')
 class AddonMenuSetting extends connect(store)(localize(i18next)(PageView)) {
-  static get properties() {
-    return {
-      config: Object,
-      menus: Array,
-      mode: String
-    }
-  }
-
-  static get styles() {
-    return [
-      CommonGristStyles,
-      css`
-        :host {
-          display: flex;
-          overflow-x: hidden;
-          flex-direction: column;
+  static styles = [
+    ScrollbarStyles,
+    CommonHeaderStyles,
+    css`
+      :host {
+        display: flex;
+        overflow-x: hidden;
+        flex-direction: column;
+
+        width: 100%;
+      }
 
-          width: 100%;
-        }
-      `
-    ]
-  }
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+      }
+    `
+  ]
 
-  constructor() {
-    super()
+  @state() config: any
+  @state() mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
+  @state() menus: any[] = []
 
-    this.mode = isMobileDevice() ? 'CARD' : 'GRID'
-  }
+  @query('ox-grist') private grist!: DataGrist
 
   get context() {
     return {
       title: i18next.t('text.addon-menu management'),
       actions: [
         {
-          title: i18next.t('button.reload'),
+          title: i18next.t('button.refresh'),
           action: () => {
             this.onReload()
           },
-          ...CommonButtonStyles.refresh
+          icon: 'refresh'
         },
         {
           title: i18next.t('button.delete'),
           action: () => {
             this.onDelete()
           },
-          ...CommonButtonStyles.delete
+          icon: 'delete'
         },
         {
           title: i18next.t('button.save'),
           action: () => {
             this.onCommit()
           },
-          ...CommonButtonStyles.save
+          icon: 'save'
         }
       ],
       exportable: {
@@ -82,39 +81,25 @@ class AddonMenuSetting extends connect(store)(localize(i18next)(PageView)) {
         data: () => {
           return this.grist.data
         }
-      }
+      },
+      toolbar: false
     }
   }
 
   render() {
     return html`
       <ox-grist .mode=${this.mode} .config=${this.config} .fetchHandler=${this.fetchHandler}>
-        <div slot="headroom">
-          <div id="filters">
-            <ox-filters-form autofocus></ox-filters-form>
+        <div slot="headroom" class="header">
+          <div class="title">
+            <mwc-icon>summarize</mwc-icon>
+            ${i18next.t('text.addon-menu management')}
           </div>
 
-          <div id="sorters">
-            Sort
-            <mwc-icon
-              @click=${e => {
-                const target = e.currentTarget
-                this.renderRoot.querySelector('#sorter-control').open({
-                  right: 0,
-                  top: target.offsetTop + target.offsetHeight
-                })
-              }}
-              >expand_more</mwc-icon
-            >
-            <ox-popup id="sorter-control">
-              <ox-sorters-control> </ox-sorters-control>
-            </ox-popup>
+          <div class="filters">
+            <ox-filters-form autofocus without-search></ox-filters-form>
           </div>
 
-          <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${this.mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${this.mode == 'CARD'}>apps</mwc-icon>
-          </div>
+          <ox-context-page-toolbar class="actions" .context=${this.context}> </ox-context-page-toolbar>
         </div>
       </ox-grist>
     `
@@ -124,10 +109,6 @@ class AddonMenuSetting extends connect(store)(localize(i18next)(PageView)) {
     this.menus = state.liteMenu?.menus
   }
 
-  get grist() {
-    return this.shadowRoot.querySelector('ox-grist')
-  }
-
   async onCommit() {
     var grist = this.grist
 
@@ -249,16 +230,19 @@ class AddonMenuSetting extends connect(store)(localize(i18next)(PageView)) {
       columns: [
         {
           type: 'gutter',
-          gutterName: 'dirty'
+          gutterName: 'dirty',
+          fixed: true
         },
         {
           type: 'gutter',
-          gutterName: 'sequence'
+          gutterName: 'sequence',
+          fixed: true
         },
         {
           type: 'gutter',
           gutterName: 'row-selector',
-          multiple: true
+          multiple: true,
+          fixed: true
         },
         {
           type: 'string',
@@ -269,6 +253,7 @@ class AddonMenuSetting extends connect(store)(localize(i18next)(PageView)) {
           type: 'string',
           name: 'name',
           header: i18next.t('field.name'),
+          fixed: true,
           record: {
             editable: true
           },
@@ -432,13 +417,6 @@ class AddonMenuSetting extends connect(store)(localize(i18next)(PageView)) {
         pages: [20, 30, 50, 100, 200]
       }
     }
-
-    this.page = 1
-    this.limit = 50
-
-    await this.updateComplete
-
-    this.grist.fetch()
   }
 
   async pageUpdated(changes, lifecycle) {
@@ -518,5 +496,3 @@ class AddonMenuSetting extends connect(store)(localize(i18next)(PageView)) {
     console.warn('not implemented yet.')
   }
 }
-
-window.customElements.define('addon-menu-setting', AddonMenuSetting)

package/client/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig-base.json",
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "declaration": true,
+    "module": "esnext",
+    "outDir": "../dist-client",
+    "baseUrl": "./"
+  },
+  "include": ["./**/*"]
+}

package/client/viewparts/{lite-menu-landscape.js → lite-menu-landscape.ts}

@@ -1,6 +1,7 @@
 import '@material/mwc-icon'
 
 import { html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 import { connect } from 'pwa-helpers'
 
 import { navigate, store } from '@operato/shell'
@@ -8,25 +9,20 @@ import { ScrollbarStyles } from '@operato/styles'
 
 import { LiteMenuLandscapeStyles } from './lite-menu-landscape-styles'
 
+@customElement('lite-menu-landscape')
 export class LiteMenuLandscape extends connect(store)(LitElement) {
-  static get styles() {
-    return [ScrollbarStyles, LiteMenuLandscapeStyles]
-  }
+  static styles = [ScrollbarStyles, LiteMenuLandscapeStyles]
 
-  static get properties() {
-    return {
-      menus: Array,
-      activeTopLevel: Object,
-      activeMenu: Object,
-      path: String
-    }
-  }
+  @property({ type: Array }) menus?: any[]
+  @property({ type: Object }) activeTopLevel: any
+  @property({ type: Object }) activeMenu: any
+  @property({ type: String }) path?: string
 
   render() {
     const { menus = [], activeTopLevel, activeMenu } = this
 
     return html`
-      <div id="wrap">
+      <div id="wrap" @mousewheel=${this.onWheelEvent.bind(this)}>
         <ul>
           ${menus.map(menu =>
             menu.type == 'group'
@@ -59,15 +55,14 @@ export class LiteMenuLandscape extends connect(store)(LitElement) {
   }
 
   firstUpdated() {
-    const wrap = this.renderRoot.querySelector('#wrap')
-    wrap.addEventListener('mousewheel', this.onWheelEvent.bind(this), false)
-
-    this.renderRoot.addEventListener('click', e => {
+    this.renderRoot.addEventListener('click', (e: Event) => {
+      //@ts-ignore
       if (e.target.submenu) {
         /* protect to act move to href. */
         e.stopPropagation()
         e.preventDefault()
 
+        //@ts-ignore
         let menu = e.target.submenu
 
         this.dispatchEvent(
@@ -81,26 +76,29 @@ export class LiteMenuLandscape extends connect(store)(LitElement) {
       }
 
       /* to respond even if current acting menu is selected */
-      let href = e.target.href
+      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.removeAttribute('settled')
+      ;(e.target as HTMLElement).removeAttribute('settled')
     })
     this.renderRoot.addEventListener('transitionend', e => {
-      e.target.setAttribute('settled', '')
+      ;(e.target as HTMLElement).setAttribute('settled', '')
     })
   }
 
-  onWheelEvent(e) {
-    const wrap = e.currentTarget
-    var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))
-    wrap.scrollLeft -= delta * 10
+  onWheelEvent(e: WheelEvent) {
+    const { target, deltaY, detail } = e
+
+    if (!(target instanceof HTMLElement)) {
+      return
+    }
+
+    const delta = deltaY || -detail
+    target.scrollLeft -= (delta / Math.abs(delta)) * 10
 
     e.preventDefault()
   }
 }
-
-customElements.define('lite-menu-landscape', LiteMenuLandscape)

package/client/viewparts/{lite-menu-part.js → lite-menu-part.ts}

@@ -2,7 +2,8 @@ import '@material/mwc-icon'
 import './lite-menu-portrait'
 import './lite-menu-landscape'
 
-import { css, html, LitElement } from 'lit'
+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'
@@ -15,47 +16,43 @@ function isActiveMenu(menu, path) {
   )
 }
 
+@customElement('lite-menu-part')
 export class LiteMenuPart extends connect(store)(LitElement) {
-  static get properties() {
-    return {
-      page: String,
-      resourceId: String,
-      menus: Array,
-      orientation: String,
-
-      _activeTopLevel: Object,
-      _activeMenu: Object,
-      _path: String
-    }
-  }
+  static styles = [
+    ScrollbarStyles,
+    css`
+      :host {
+        display: flex;
+        overflow-y: auto;
+        flex-direction: column;
+        height: 100%;
+        min-width: 200px;
+        background-color: var(--theme-white-color);
+      }
 
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      css`
-        :host {
-          display: flex;
-          overflow-y: auto;
-          flex-direction: column;
-          height: 100%;
-          min-width: 200px;
-          background-color: var(--theme-white-color);
-        }
-
-        :host([landscape]) {
-          overflow-x: auto;
-          flex-direction: row;
-          width: 100%;
-          min-height: 20px;
-        }
-
-        lite-menu-portrait,
-        lite-menu-landscape {
-          flex: 1;
-        }
-      `
-    ]
-  }
+      :host([landscape]) {
+        overflow-x: auto;
+        flex-direction: row;
+        width: 100%;
+        min-height: 20px;
+      }
+
+      lite-menu-portrait,
+      lite-menu-landscape {
+        flex: 1;
+      }
+    `
+  ]
+
+  @property({ type: String }) page?: string
+  @property({ type: String }) resourceId?: string
+  @property({ type: Array }) menus?: any[]
+  @property({ type: String }) orientation?: string
+
+  @state() slotTemplate: any
+  @state() _activeTopLevel: any
+  @state() _activeMenu: any
+  @state() _path?: string
 
   render() {
     return html`
@@ -78,29 +75,29 @@ export class LiteMenuPart extends connect(store)(LitElement) {
   }
 
   firstUpdated() {
-    this.renderRoot.addEventListener('active-toplevel', e => {
+    this.renderRoot.addEventListener('active-toplevel', (e: Event) => {
       e.stopPropagation()
       e.preventDefault()
 
-      this._activeTopLevel = e.detail
+      this._activeTopLevel = (e as CustomEvent).detail
     })
   }
 
-  updated(changes) {
+  updated(changes: PropertyValues<this>) {
     if (changes.has('menus') || changes.has('page') || changes.has('resourceId')) {
-      this._findActivePage()
+      this.findActivePage()
     }
 
     if (changes.has('orientation')) {
       if (this.orientation == 'portrait') {
         this.removeAttribute('landscape')
       } else {
-        this.setAttribute('landscape', true)
+        this.setAttribute('landscape', '')
       }
     }
 
     if (changes.has('slotTemplate')) {
-      this.replaceChild(this.slotTemplate)
+      this.replaceChild(this.slotTemplate, this.renderRoot)
     }
   }
 
@@ -111,7 +108,7 @@ export class LiteMenuPart extends connect(store)(LitElement) {
     this.slotTemplate = state.liteMenu.slotTemplate
   }
 
-  _findActivePage() {
+  private findActivePage() {
     var path = this.resourceId ? `${this.page}/${this.resourceId}` : this.page
     var menus = this.menus || []
     var activeMenu
@@ -130,5 +127,3 @@ export class LiteMenuPart extends connect(store)(LitElement) {
     this._activeMenu = activeMenu || this._activeTopLevel
   }
 }
-
-customElements.define('lite-menu-part', LiteMenuPart)

package/client/viewparts/{lite-menu-portrait.js → lite-menu-portrait.ts}

@@ -1,27 +1,23 @@
 import '@material/mwc-icon'
 
 import { html, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { navigate } from '@operato/shell'
 import { ScrollbarStyles } from '@operato/styles'
 
 import { LiteMenuPortraitStyles } from './lite-menu-portrait-styles'
 
+@customElement('lite-menu-portrait')
 export class LiteMenuPortrait extends LitElement {
-  static get styles() {
-    return [ScrollbarStyles, LiteMenuPortraitStyles]
-  }
+  static styles = [ScrollbarStyles, LiteMenuPortraitStyles]
 
-  static get properties() {
-    return {
-      menus: Array,
-      activeTopLevel: Object,
-      activeMenu: Object,
-      path: String
-    }
-  }
+  @property({ type: Array }) menus?: any[]
+  @property({ type: Object }) activeTopLevel: any
+  @property({ type: Object }) activeMenu: any
+  @property({ type: String }) path?: string
 
-  renderMenus(menus, activeTopLevel, activeMenu) {
+  renderMenus(menus, activeTopLevel, activeMenu?) {
     return html`
       <ul>
         ${menus.map(menu => {
@@ -52,10 +48,12 @@ export class LiteMenuPortrait extends LitElement {
   }
 
   firstUpdated() {
-    this.renderRoot.addEventListener('click', e => {
-      const menuElement = e.target.closest('[menu]')
+    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) {
@@ -73,18 +71,16 @@ export class LiteMenuPortrait extends LitElement {
       }
 
       /* to respond even if current acting menu is selected */
-      let href = e.target.href
+      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.removeAttribute('settled')
+      ;(e.target as Element).removeAttribute('settled')
     })
     this.renderRoot.addEventListener('transitionend', e => {
-      e.target.setAttribute('settled', '')
+      ;(e.target as Element).setAttribute('settled', '')
     })
   }
 }
-
-customElements.define('lite-menu-portrait', LiteMenuPortrait)