@things-factory/apptool-ui 8.0.0-beta.1 → 8.0.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/apptool-ui",
-  "version": "8.0.0-beta.1",
+  "version": "8.0.0-beta.4",
   "main": "dist-server/index.js",
   "browser": "dist-client/index.js",
   "things-factory": true,
@@ -29,8 +29,8 @@
   "dependencies": {
     "@material/web": "^2.0.0",
     "@operato/layout": "^8.0.0-beta",
-    "@things-factory/apptool-base": "^8.0.0-beta.1",
-    "@things-factory/setting-base": "^8.0.0-beta.1"
+    "@things-factory/apptool-base": "^8.0.0-beta.4",
+    "@things-factory/setting-base": "^8.0.0-beta.4"
   },
-  "gitHead": "36c494e587640c1490318ef7b95adab02606e0c2"
+  "gitHead": "d83d12ed4ba07177dff1dac26e37be347d156b43"
 }

package/client/index.ts

@@ -1,80 +0,0 @@
-import './layout/app-toolbar'
-import './layout/app-busybar'
-import './layout/page-mdibar'
-import './layout/page-toolbar'
-import './mdibar-setting-let'
-
-import { html } from 'lit-html'
-
-import { store, clientSettingStore } from '@operato/shell'
-import { appendViewpart, VIEWPART_POSITION, VIEWPART_LEVEL } from '@operato/layout'
-import { isMobileDevice } from '@operato/utils'
-
-import { ADD_SETTING } from '@things-factory/setting-base/dist-client'
-
-export async function setupAppToolPart({
-  toolbar = true,
-  busybar = true,
-  mdibar = true,
-  pageToolbar = false
-}: {
-  toolbar?: boolean
-  busybar?: boolean
-  mdibar?: boolean
-  pageToolbar?: boolean
-}) {
-  if (toolbar) {
-    appendViewpart({
-      name: 'apptoolbar',
-      viewpart: {
-        show: true,
-        template: html` <app-toolbar></app-toolbar> `
-      },
-      position: VIEWPART_POSITION.HEADERBAR
-    })
-  }
-
-  if (busybar) {
-    appendViewpart({
-      name: 'appbusybar',
-      viewpart: {
-        show: true,
-        template: html` <app-busybar></app-busybar> `
-      },
-      position: VIEWPART_POSITION.HEADERBAR
-    })
-  }
-
-  if (mdibar && !isMobileDevice()) {
-    const show = ((await clientSettingStore.get('mdibar'))?.value || {}).show
-
-    appendViewpart({
-      name: 'appmdibar',
-      viewpart: {
-        show,
-        level: VIEWPART_LEVEL.TOPMOST,
-        template: html` <page-mdibar></page-mdibar> `
-      },
-      position: VIEWPART_POSITION.PAGE_HEADERBAR
-    })
-
-    store.dispatch({
-      type: ADD_SETTING,
-      setting: {
-        seq: 21,
-        template: html` <mdibar-setting-let></mdibar-setting-let> `
-      }
-    })
-  }
-
-  if (pageToolbar) {
-    appendViewpart({
-      name: 'page-toolbar',
-      viewpart: {
-        show: true,
-        template: html` <page-toolbar> </page-toolbar> `
-      },
-      position: VIEWPART_POSITION.PAGE_HEADERBAR
-    })
-  }
-}

package/client/layout/app-busybar.ts

@@ -1,54 +0,0 @@
-import '@material/web/progress/linear-progress.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-import { store } from '@operato/shell'
-
-@customElement('app-busybar')
-class AppBusyBar extends connect(store)(LitElement) {
-  static styles = [
-    css`
-      :host {
-        display: block;
-        position: relative;
-
-        --md-linear-progress-track-color: var(--md-sys-color-on-primary);
-      }
-
-      md-linear-progress {
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        overflow: hidden;
-      }
-    `
-  ]
-
-  @state() private busy?: Boolean
-  @state() private lastState?: boolean
-  @state() private timeout?: any
-
-  render() {
-    return this.busy ? html`<md-linear-progress indeterminate></md-linear-progress>` : html``
-  }
-
-  stateChanged(state) {
-    if (!state.busy.busy) {
-      this.busy = false
-    }
-
-    this.lastState = state.busy.busy
-
-    if (!this.timeout) {
-      this.timeout = setTimeout(() => {
-        if (this.lastState) {
-          this.busy = true
-        }
-
-        this.timeout = null
-      }, 500)
-    }
-  }
-}

package/client/layout/app-toolbar.ts

@@ -1,116 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { css, html, LitElement, TemplateResult } from 'lit'
-import { customElement, query, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-import { TOOL_POSITION } from '@operato/layout'
-import { navigate, store } from '@operato/shell'
-
-@customElement('app-toolbar')
-class AppToolbar extends connect(store)(LitElement) {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        height: var(--header-bar-height, 42px);
-        color: var(--header-bar-color);
-        background-color: var(--header-bar-background-color, white);
-        justify-content: space-between;
-        align-items: center;
-        padding: 0 5px;
-        gap: 10px;
-
-        text-transform: capitalize;
-      }
-
-      [center] {
-        flex: 1;
-        flex-wrap: nowrap;
-        display: flex;
-        align-items: center;
-        overflow: hidden;
-      }
-
-      [center] > * {
-        margin: auto;
-      }
-
-      :host(.vline) {
-        display: block;
-        flex: none;
-        border-left: 1px solid rgba(255, 255, 255, 0.07);
-        border-right: 1px solid rgba(0, 0, 0, 0.1);
-        width: 0px;
-        height: 18px;
-        margin: 0 4px;
-      }
-
-      :host(label) {
-        margin-right: 5px;
-        color: #fff;
-        font-size: 20px;
-      }
-
-      span.space {
-        width: 10px;
-      }
-    `
-  ]
-
-  @state() _tools: { position: string; template: TemplateResult }[] = []
-  @state() _route: any
-
-  @query('[center]') center!: HTMLDivElement
-
-  render() {
-    var tools = this._tools || ([] as { position: string; template: TemplateResult }[])
-
-    var frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END)
-    var frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT)
-    var centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER)
-    var rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR)
-    var rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END)
-
-    /* 현재 OVERLAY가 있으면, 뒤로가기 버튼이 보이고, 아니면, HOME 버튼이 보인다. */
-    var state = history.state
-    var overlay = (state || {}).overlay
-
-    return html`
-      ${overlay
-        ? html` <md-icon @click=${e => history.back()}>arrow_back</md-icon> `
-        : frontEndTools.length == 0
-          ? html` <md-icon @click=${e => this.navigateToHome()}>home</md-icon> `
-          : frontEndTools.map(tool => html` ${tool.template} `)}
-      ${frontTools.map(tool => html` ${tool.template} `)}
-
-      <div center @mousewheel=${this.onWheelEvent}>${centerTools.map(tool => html` ${tool.template} `)}</div>
-
-      ${rearTools.map(tool => html` ${tool.template} `)} ${rearEndTools.map(tool => html` ${tool.template} `)}
-    `
-  }
-
-  stateChanged(state) {
-    /* page의 변화를 감지하기 위해서 route의 변화를 체크한다. */
-    this._route = state.route
-
-    this._tools = state.apptool.tools
-  }
-
-  navigateToHome() {
-    var base = document.querySelector('base')
-    if (base) {
-      navigate(base.getAttribute('href') || '')
-    } else {
-      navigate('/')
-    }
-  }
-
-  onWheelEvent(e) {
-    const center = e.currentTarget
-    var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))
-    center.scrollLeft -= delta * 10
-
-    e.preventDefault()
-  }
-}

package/client/layout/page-mdibar.ts

@@ -1,357 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/popup/ox-popup-menu.js'
-
-import { css, html, nothing, LitElement } from 'lit'
-import { customElement, query, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-import { navigate, store, PageView } from '@operato/shell'
-import { i18next, localize } from '@operato/i18n'
-import { OxPopupMenu } from '@operato/popup/ox-popup-menu.js'
-
-@customElement('page-mdibar')
-export class PageMDIBar extends connect(store)(localize(i18next)(LitElement)) {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        background-color: var(--md-sys-color-secondary-container);
-        color: var(--md-sys-color-on-secondary-container);
-        font-size: var(--fontsize-small);
-        overflow: hidden;
-        align-items: stretch;
-      }
-
-      div {
-        box-sizing: border-box;
-      }
-
-      div[routes] {
-        flex: 1;
-
-        display: flex;
-        overflow: hidden;
-      }
-
-      div[route] {
-        display: inline-block;
-        position: relative;
-        min-width: var(--mdibar-min-width, 100px);
-        max-width: var(--mdibar-max-width, 150px);
-        padding: var(--mdibar-padding, 3px 22px 1px 7px);
-        border-right: var(--border-dim-color);
-        border-top: var(--border-dim-color);
-        border-bottom: var(--border-dim-color);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        text-transform: capitalize;
-        cursor: pointer;
-      }
-
-      div[arrows] {
-        display: flex;
-        border: var(--border-dim-color);
-        align-items: center;
-      }
-
-      div[arrows] * {
-        opacity: 0.8;
-        font-size: var(--mdibar-icon-size, 24px);
-        flex: 1;
-      }
-
-      md-icon {
-        --md-icon-size: var(--mdibar-icon-size, 18px);
-        opacity: 0.5;
-      }
-
-      md-icon:hover {
-        opacity: 0.8;
-        color: var(--md-sys-color-secondary);
-      }
-
-      div[arrows] md-icon[disabled] {
-        opacity: 0.2;
-        color: unset;
-      }
-
-      div[route] md-icon {
-        position: absolute;
-        right: 2px;
-        margin-left: var(--spacing-small);
-      }
-
-      div[route][active] {
-        background-color: var(--md-sys-color-background);
-        border-bottom: 1px solid var(--md-sys-color-background);
-        color: var(--md-sys-color-on-background);
-        font-weight: bold;
-      }
-
-      div[route][home] {
-        padding: var(--mdibar-padding-home, 3px 5px 0 23px);
-        overflow: visible;
-        min-width: unset;
-        max-width: unset;
-      }
-
-      div[route][home] md-icon {
-        left: 0;
-      }
-
-      div[route][rest] {
-        flex: 1;
-        min-width: unset;
-        max-width: unset;
-        border-right: unset;
-      }
-    `
-  ]
-
-  @state() routes: { page?: PageView; url: string }[] = [{ url: this.getHomeRoute() }]
-  @state() activePage?: PageView
-  @state() pagename?: string
-  @state() params?: any
-  @state() resourceId?: string
-  @state() title: string = ''
-
-  @query('[routes]') scroller!: HTMLDivElement
-  @query('#context-menu') contextMenu!: HTMLDivElement
-
-  private contextMenuTargetIndex?: number
-  private contextMenuTargetRoute?: { page?: PageView; url: string }
-
-  render() {
-    const home = this.routes[0]
-    const routes = this.routes.slice(1)
-
-    return html`
-      <div
-        home
-        route
-        ?active=${this.activePage === home.page}
-        @click=${() => this.moveToHome()}
-        @contextmenu=${(e: MouseEvent) => {
-          e.preventDefault()
-          e.stopPropagation()
-
-          delete this.contextMenuTargetRoute
-          delete this.contextMenuTargetIndex
-
-          this.openContextMenu(e)
-        }}
-      >
-        <md-icon>home</md-icon>&#8203;
-      </div>
-
-      <div
-        routes
-        @mousewheel=${this.onWheelEvent.bind(this)}
-        @contextmenu=${(e: MouseEvent) => {
-          e.preventDefault()
-          e.stopPropagation()
-
-          delete this.contextMenuTargetRoute
-          delete this.contextMenuTargetIndex
-
-          this.openContextMenu(e)
-        }}
-      >
-        ${routes.map((route, idx) => {
-          const context = route.page?.context as any
-          const title = context?.title || context?.search?.placeholder || ''
-
-          return html`
-            <div
-              @contextmenu=${(e: MouseEvent) => {
-                e.preventDefault()
-                e.stopPropagation()
-
-                this.contextMenuTargetRoute = route
-                this.contextMenuTargetIndex = idx
-
-                this.openContextMenu(e)
-              }}
-              @click=${() => this.moveTo(route)}
-              ?active=${this.activePage === route.page}
-              route
-            >
-              ${typeof title == 'object' ? title.text : title}
-              <md-icon
-                @click=${(e: MouseEvent) => {
-                  e.stopPropagation()
-                  this.closePage(route, idx + 1)
-                }}
-                >close</md-icon
-              >
-            </div>
-          `
-        })}
-        <div rest route></div>
-      </div>
-
-      <div arrows>
-        <md-icon ?disabled=${!this.scroller || this.scroller.scrollLeft <= 0} @click=${() => this.onScrollByArrow(1)}
-          >arrow_left</md-icon
-        >
-        <md-icon
-          ?disabled=${!this.scroller ||
-          this.scroller.scrollWidth <= this.scroller.offsetWidth + this.scroller.scrollLeft}
-          @click=${() => this.onScrollByArrow(-1)}
-          >arrow_right</md-icon
-        >
-      </div>
-    `
-  }
-
-  updated(changed) {
-    if (
-      changed.has('activePage') ||
-      (!changed.has('pagename') && (changed.has('resourceId') || changed.has('params')))
-    ) {
-      if (!this.activePage) {
-        return
-      }
-
-      const page = this.activePage
-
-      if (location.pathname == this.getHomeRoute()) {
-        this.routes[0].page = page
-        return
-      }
-
-      var route = this.routes.find(route => route.page === page)
-      if (!route) {
-        this.routes = [...this.routes, { page, url: location.href }]
-      } else {
-        route.url = location.href
-      }
-    }
-  }
-
-  stateChanged(state) {
-    const { page, context, activePage, resourceId, params } = state.route || {}
-    this.activePage = activePage
-    this.pagename = page
-    this.resourceId = resourceId
-    this.params = params
-
-    /* refresh를 일으키기위한 property 변경을 위한 코드임. */
-    this.title = context.title || context.search?.placeholder
-  }
-
-  onScrollByArrow(delta: number) {
-    this.scroller.scrollLeft -= delta * 10
-
-    this.requestUpdate()
-  }
-
-  onWheelEvent(e: Event) {
-    const target = e.currentTarget as HTMLDivElement
-
-    var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))
-    target.scrollLeft -= delta * 10
-
-    this.requestUpdate()
-
-    e.preventDefault()
-  }
-
-  getHomeRoute() {
-    var base = document.querySelector('base')
-    return base?.getAttribute('href') || '/'
-  }
-
-  moveTo(route: { page?: PageView; url: string }) {
-    console.log('route', route)
-    navigate(route.url)
-  }
-
-  moveToHome() {
-    navigate(this.getHomeRoute())
-  }
-
-  closePage(route: { page?: PageView; url: string }, idx: number) {
-    this.routes = [...this.routes.slice(0, idx), ...this.routes.slice(idx + 1)]
-    const page = route.page!
-
-    page.parentNode?.removeChild(page)
-    page.pageDispose()
-
-    if (this.activePage === page) {
-      const next = this.routes.length > 0 ? Math.max(0, idx - 1) : -1
-      navigate(next != -1 ? this.routes[next].url : this.getHomeRoute())
-    }
-  }
-
-  closeAllPage() {
-    this.routes.slice(1).forEach((route, idx) => {
-      const page = route.page!
-
-      page.parentNode?.removeChild(page)
-      page.pageDispose()
-    })
-
-    this.routes = [this.routes[0]]
-
-    navigate(this.routes[0].url)
-  }
-
-  closeOtherPages(route: { page?: PageView; url: string }, idx: number) {
-    this.routes.slice(1).forEach((route, idx) => {
-      if (route === route) {
-        return
-      }
-
-      const page = route.page!
-
-      page.parentNode?.removeChild(page)
-      page.pageDispose()
-    })
-
-    this.routes = [this.routes[0], route]
-
-    navigate(route.url)
-  }
-
-  openContextMenu(e: MouseEvent) {
-    OxPopupMenu.open({
-      template: html`
-        ${this.contextMenuTargetRoute
-          ? html`
-              <ox-popup-menuitem
-                label="close"
-                @select=${(e: Event) => {
-                  this.closePage(this.contextMenuTargetRoute!, this.contextMenuTargetIndex!)
-                }}
-              >
-                <md-icon slot="icon">close</md-icon>
-              </ox-popup-menuitem>
-
-              <ox-popup-menuitem
-                label="close others"
-                @select=${(e: Event) => {
-                  this.closeOtherPages(this.contextMenuTargetRoute!, this.contextMenuTargetIndex!)
-                }}
-              >
-                <md-icon slot="icon">cancel</md-icon>
-              </ox-popup-menuitem>
-            `
-          : nothing}
-
-        <ox-popup-menuitem
-          label="close all"
-          @select=${(e: Event) => {
-            this.closeAllPage()
-          }}
-        >
-          <md-icon slot="icon">disabled_by_default</md-icon>
-        </ox-popup-menuitem>
-      `,
-      top: e.clientY,
-      left: e.clientX,
-      parent: document.body
-    })
-  }
-}

package/client/layout/page-toolbar.ts

@@ -1,101 +0,0 @@
-import { css, html, LitElement, TemplateResult } from 'lit'
-import { customElement, query, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-import { TOOL_POSITION } from '@operato/layout'
-import { store } from '@operato/shell'
-
-@customElement('page-toolbar')
-class PageToolbar extends connect(store)(LitElement) {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        color: var(--page-header-bar-color, var(--md-sys-color-on-surface));
-        background-color: var(--page-header-bar-background-color, var(--md-sys-color-surface-container));
-        justify-content: space-between;
-        align-items: center;
-        padding: 0 5px;
-
-        text-transform: capitalize;
-
-        --ox-input-search-background-color: var(--md-sys-color-on-primary);
-      }
-
-      :host > * {
-        margin: var(--page-header-bar-item-padding, 0);
-      }
-
-      [center] {
-        flex: 1;
-        flex-wrap: nowrap;
-        display: flex;
-        align-items: center;
-        overflow: hidden;
-      }
-
-      [center] > * {
-        flex: 1;
-        margin: auto;
-      }
-
-      :host(.vline) {
-        display: block;
-        flex: none;
-        border-left: 1px solid rgba(255, 255, 255, 0.07);
-        border-right: 1px solid rgba(0, 0, 0, 0.1);
-        width: 0px;
-        height: 18px;
-        margin: 0 4px;
-      }
-
-      :host(label) {
-        margin-right: 5px;
-        color: #fff;
-        font-size: 20px;
-      }
-
-      span.space {
-        width: 10px;
-      }
-    `
-  ]
-
-  @state() _tools: { position: string; template: TemplateResult }[] = []
-  @state() _route: any
-
-  @query('[center]') center!: HTMLDivElement
-
-  render() {
-    var tools = this._tools || ([] as { position: string; template: TemplateResult }[])
-
-    var frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END)
-    var frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT)
-    var centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER)
-    var rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR)
-    var rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END)
-
-    return html`
-      ${frontEndTools.map(tool => html` ${tool.template} `)} ${frontTools.map(tool => html` ${tool.template} `)}
-
-      <div center @mousewheel=${this.onWheelEvent}>${centerTools.map(tool => html` ${tool.template} `)}</div>
-
-      ${rearTools.map(tool => html` ${tool.template} `)} ${rearEndTools.map(tool => html` ${tool.template} `)}
-    `
-  }
-
-  stateChanged(state) {
-    /* page의 변화를 감지하기 위해서 route의 변화를 체크한다. */
-    this._route = state.route
-
-    this._tools = state.pagetool.tools
-  }
-
-  onWheelEvent(e) {
-    const center = e.currentTarget
-    var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))
-    center.scrollLeft -= delta * 10
-
-    e.preventDefault()
-  }
-}

package/client/mdibar-setting-let.ts

@@ -1,68 +0,0 @@
-import '@operato/i18n/ox-i18n.js'
-import '@material/web/checkbox/checkbox.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-import { i18next, localize } from '@operato/i18n'
-import { clientSettingStore } from '@operato/shell'
-import { updateViewpart } from '@operato/layout'
-
-@customElement('mdibar-setting-let')
-export class MDIBarSettingLet extends localize(i18next)(LitElement) {
-  static styles = [
-    css`
-      label {
-        display: flex;
-        gap: 10px;
-        align-items: center;
-
-        font: var(--label-font);
-        color: var(--md-sys-color-on-primary-container);
-        text-transform: var(--label-text-transform);
-      }
-    `
-  ]
-
-  @property({ type: Boolean }) show: boolean = false
-
-  render() {
-    const checked = this.show === true
-
-    return html`
-      <setting-let>
-        <ox-i18n slot="title" msgid="title.mdibar setting"></ox-i18n>
-
-        <div slot="content">
-          <label>
-            <md-checkbox @change=${e => this.onChangeShowMDIBar(e)} ?checked=${checked}></md-checkbox>
-            ${i18next.t('label.show')}
-          </label>
-        </div>
-      </setting-let>
-    `
-  }
-
-  async firstUpdated() {
-    this.show = ((await clientSettingStore.get('mdibar'))?.value || {}).show
-  }
-
-  async onChangeShowMDIBar(e) {
-    const show = e.currentTarget.checked
-
-    try {
-      await clientSettingStore.put({
-        key: 'mdibar',
-        value: {
-          show
-        }
-      })
-    } catch (e) {
-      console.error(e)
-    }
-
-    updateViewpart('appmdibar', {
-      show
-    })
-  }
-}