@operato/context 7.1.31 → 7.1.33

package/src/tools/ox-page-action-context-bar.ts

@@ -1,222 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@material/web/chips/assist-chip.js'
-import './ox-page-action-overlay-template.js'
-
-import { css, html, LitElement, nothing, PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-import throttle from 'lodash-es/throttle'
-import { connect } from 'pwa-helpers/connect-mixin'
-
-import { openOverlay } from '@operato/layout'
-import { store } from '@operato/shell'
-import { sleep } from '@operato/utils'
-import { ButtonContainerStyles } from '@operato/styles'
-
-@customElement('ox-page-action-context-bar')
-export class PageActionContextBar extends connect(store)(LitElement) {
-  static get styles() {
-    return [
-      ButtonContainerStyles,
-      css`
-        :host {
-          display: flex;
-          position: relative;
-          overflow-x: clip;
-          overflow-y: hidden;
-
-          text-transform: capitalize;
-        }
-
-        :host *:focus {
-          outline: none;
-        }
-
-        [container] {
-          flex: 1;
-
-          display: flex;
-          overflow: hidden;
-          gap: var(--spacing-small);
-          padding: 2px; /* only for button shadow */
-          align-items: center;
-        }
-
-        [more] {
-          position: absolute;
-          bottom: 0;
-          right: 0;
-          color: var(--md-sys-color-inverse-on-surface);
-          background-color: var(--md-sys-color-inverse-surface);
-          box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.2);
-          padding: var(--context-action-bar-more-button-padding, 11px 10px);
-          font-size: 2rem;
-          z-index: 10;
-        }
-
-        select,
-        input[type='text'] {
-          box-sizing: border-box;
-          padding: 0 var(--spacing-small);
-          height: var(--form-element-height-medium);
-          border: 1px solid var(--md-sys-color-outline);
-          border-radius: var(--md-sys-shape-corner-small);
-          color: var(--md-sys-color-on-primary);
-          background-color: var(--md-sys-color-on-primary);
-          font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
-          outline: none;
-        }
-
-        md-icon[working] {
-          animation: rotate 1s linear infinite;
-        }
-
-        md-assist-chip[icon-only] {
-          --md-assist-chip-trailing-space: 0;
-        }
-
-        @media screen and (max-width: 460px) {
-          [container] {
-            padding: 0;
-            gap: 0;
-            --md-assist-chip-container-shape: 0;
-          }
-        }
-
-        @keyframes rotate {
-          from {
-            transform: rotate(0deg);
-          }
-          to {
-            transform: rotate(360deg);
-          }
-        }
-      `
-    ]
-  }
-
-  @property({ type: Array }) actions: {
-    title: string
-    action: () => void
-    icon: string
-    type: string
-    select: string[]
-    href?: string
-    emphasis?: boolean
-  }[] = []
-
-  @state() private overflown: boolean = false
-  @query('[container]') container?: HTMLDivElement
-
-  private overflownUpdaterThrottle: any
-  private resizeCallback: any
-
-  get overflownUpdater() {
-    if (!this.overflownUpdaterThrottle) {
-      this.overflownUpdaterThrottle = throttle(() => {
-        this.overflown = !!this.container && this.container.scrollWidth > this.container.clientWidth
-      }, 100)
-    }
-
-    return this.overflownUpdaterThrottle
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    this.resizeCallback = () => this.overflownUpdater()
-
-    window.addEventListener('resize', this.resizeCallback)
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-
-    window.removeEventListener('resize', this.resizeCallback)
-  }
-
-  render() {
-    return this.actions.length > 0
-      ? html`
-          <div container>${this.renderActions()}</div>
-          ${this.overflown ? html` <md-icon more @click=${this.showMore.bind(this)}>more_horiz</md-icon> ` : html``}
-        `
-      : nothing
-  }
-
-  renderActions() {
-    return html`
-      ${this.actions.map(($action, idx) => {
-        let { type, title, icon, action, select, href, emphasis } = $action as any
-        let { raised, danger } = emphasis || {}
-
-        return type == 'text'
-          ? html` <span @click=${action}>${title}</span> `
-          : type == 'select' || (select && select.length > 0)
-            ? html`
-                <select @change=${action}>
-                  ${select.map((option: any) => html` <option>${option}</option> `)}
-                </select>
-              `
-            : type == 'link'
-              ? html` <a href=${href}>${title}</a> `
-              : html`
-                  <md-assist-chip
-                    ?icon-only=${type == 'icon' || !title}
-                    ?elevated=${raised}
-                    ?danger=${danger}
-                    label=${title}
-                    @click=${async (e: MouseEvent) => {
-                      /* all actions should be bloked for a second */
-                      const button = e.currentTarget as any
-                      const iconElement = button.querySelector('[slot="icon"]')
-                      if (iconElement) {
-                        icon = this.actions[idx].icon
-                        this.actions[idx].icon = 'refresh'
-                        this.requestUpdate()
-                        iconElement.setAttribute('working', true)
-                      }
-                      button.disabled = true
-
-                      try {
-                        await action()
-                      } finally {
-                        await sleep(1000) /* waiting for additionla 1 second */
-
-                        /* because icon can be changed after sleep, don't use closure 'icon'. */
-                        if (iconElement) {
-                          this.actions[idx].icon = icon
-                          this.requestUpdate()
-                          iconElement.removeAttribute('working')
-                        }
-
-                        button.disabled = false
-                      }
-                    }}
-                  >
-                    <md-icon slot="icon">${this.actions[idx].icon}</md-icon>
-                  </md-assist-chip>
-                `
-      })}
-    `
-  }
-
-  async updated(changed: PropertyValues<this>) {
-    if (changed.has('actions')) {
-      requestAnimationFrame(this.overflownUpdater)
-    }
-  }
-
-  stateChanged(state: any) {
-    const { actions } = state.route?.context || {}
-
-    if (actions) {
-      this.actions = actions.filter((action: any) => !!action)
-    }
-  }
-
-  showMore() {
-    openOverlay('context-toolbar-overlay', {
-      template: html`<ox-page-action-overlay-template></ox-page-action-overlay-template>`
-    })
-  }
-}

package/src/tools/ox-page-action-overlay-template.ts

@@ -1,111 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@material/web/chips/assist-chip.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers'
-
-import { store } from '@operato/shell'
-import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'
-import { sleep } from '@operato/utils'
-
-import { ContextToolbarOverlayStyle } from '../styles/ox-context-toolbar-overlay-style.js'
-
-@customElement('ox-page-action-overlay-template')
-export class PageActionOverlayTemplate extends connect(store)(LitElement) {
-  static get styles() {
-    return [
-      ScrollbarStyles,
-      ButtonContainerStyles,
-      ContextToolbarOverlayStyle,
-      css`
-        :host {
-          display: flex;
-          flex-wrap: wrap;
-          gap: var(--spacing-small);
-          align-items: center;
-        }
-
-        :host *:focus {
-          outline: none;
-        }
-
-        md-icon[working] {
-          animation: rotate 1s linear infinite;
-        }
-
-        md-assist-chip[icon-only] {
-          --md-assist-chip-trailing-space: 0;
-        }
-
-        @keyframes rotate {
-          from {
-            transform: rotate(0deg);
-          }
-          to {
-            transform: rotate(360deg);
-          }
-        }
-      `
-    ]
-  }
-
-  @state() private actions: any[] = []
-
-  render() {
-    return html`
-      ${this.actions.map(($action, idx) => {
-        let { type, title, icon, action, select, href, emphasis } = $action as any
-        let { raised, danger } = emphasis || {}
-
-        return type == 'text'
-          ? html` <span>${title}</span> `
-          : type == 'select' || (select && select.length > 0)
-            ? html`
-                <select @change=${action}>
-                  ${select.map((option: any) => html` <option>${option}</option> `)}
-                </select>
-              `
-            : type == 'link'
-              ? html` <a href=${href}>${title}</a> `
-              : html`
-                  <md-assist-chip
-                    ?icon-only=${type == 'icon' || !title}
-                    ?elevated=${raised}
-                    ?danger=${danger}
-                    label=${title}
-                    @click=${async (e: MouseEvent) => {
-                      /* all actions should be bloked for a second */
-                      const button = e.currentTarget as any
-                      const iconElement = button.querySelector('[slot="icon"]')
-                      if (iconElement) {
-                        iconElement.textContent = 'refresh'
-                        iconElement.setAttribute('working', true)
-                      }
-                      button.disabled = true
-
-                      try {
-                        await action()
-                      } finally {
-                        await sleep(1000) /* waiting for additionla 1 second */
-
-                        /* because icon can be changed after sleep, don't use closure 'icon'. */
-                        if (iconElement) {
-                          iconElement.textContent = this.actions[idx]?.icon
-                          iconElement.removeAttribute('working')
-                        }
-                        button.disabled = false
-                      }
-                    }}
-                  >
-                    <md-icon slot="icon">${icon || 'done_all'}</md-icon>
-                  </md-assist-chip>
-                `
-      })}
-    `
-  }
-
-  stateChanged(state: any) {
-    this.actions = state.route?.context?.actions?.filter((action: any) => !!action) || []
-  }
-}

package/src/tools/ox-page-title-bar.ts

@@ -1,125 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/input/ox-input-search.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers'
-
-import { openHelp } from '@operato/help'
-import { store } from '@operato/shell'
-import { isMobileDevice } from '@operato/utils'
-
-@customElement('ox-page-title-bar')
-export class PageTitleBar extends connect(store)(LitElement) {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        align-items: center;
-        text-transform: capitalize;
-
-        --help-icon-color: var(--md-sys-color-on-surface);
-        --help-icon-hover-color: var(--md-sys-color-on-surface-variant);
-        --help-icon-opacity: 0.2;
-        --help-icon-size: 20px;
-
-        --md-icon-size: 20px;
-
-        --input-search-padding: var(--spacing-small);
-        --input-search-font: normal 14px var(--theme-font);
-      }
-
-      [titler] {
-        display: flex;
-        padding: var(--spacing-small);
-        padding-top: var(--spacing-medium);
-        font: var(--context-toolbar-title);
-        color: var(--title-text-color);
-      }
-
-      [titler] > * {
-        align-self: center;
-      }
-
-      [help] {
-        opacity: var(--help-icon-opacity);
-        font-size: var(--help-icon-size);
-        color: var(--help-icon-color);
-      }
-
-      [help]:hover {
-        cursor: help;
-        opacity: var(--help-icon-hover-opacity);
-        color: var(--help-icon-hover-color);
-      }
-
-      [search] [help] {
-        color: var(--md-sys-color-on-secondary-container);
-      }
-
-      [search] {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        align-self: center;
-        color: var(--md-sys-color-primary);
-        background-color: var(--md-sys-color-on-primary);
-        border-radius: var(--md-sys-shape-corner-full);
-        margin-left: auto;
-        padding: 0 var(--spacing-medium);
-      }
-
-      [search] > * {
-        align-self: center;
-      }
-    `
-  ]
-
-  @state() private context: any
-
-  mobile = isMobileDevice()
-
-  render() {
-    var { search, filter, title, help } = this.context || ({} as any)
-    var { value = '', handler: searchHandler, placeholder = '', autofocus = true } = search || ({} as any)
-    const { handler: filterHandler } = filter || ({} as any)
-    const { icon, text = title } = typeof title === 'object' ? title : ({} as any)
-    const searchable = typeof searchHandler == 'function'
-    const filterable = typeof filterHandler == 'function'
-
-    if (this.mobile && searchable && title) {
-      placeholder ||= title
-      title = ''
-    }
-
-    return html`
-      ${title ? html` <div titler>${icon ? html`<md-icon>${icon}</md-icon>&nbsp;` : html``}${text}</div> ` : html``}
-      ${help && title ? html` &nbsp;<md-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</md-icon> ` : html``}
-      ${searchable || filterable
-        ? html`
-            <div search>
-              ${searchable
-                ? html` <ox-input-search
-                    .placeholder=${placeholder}
-                    .value=${value || ''}
-                    ?autofocus=${autofocus}
-                    @change=${(e: Event) => {
-                      searchHandler((e.target as any).value)
-                    }}
-                  ></ox-input-search>`
-                : html``}
-              ${!title && help && searchable
-                ? html`<md-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</md-icon>`
-                : html``}
-              ${filterable ? html`<md-icon @click=${(e: MouseEvent) => filterHandler()}>unfold_more</md-icon>` : html``}
-            </div>
-          `
-        : html``}
-    `
-  }
-
-  stateChanged(state: any) {
-    this.context = state.route.context
-  }
-}

package/src/tools/ox-title-bar.ts

@@ -1,121 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/input/ox-input-search.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers'
-
-import { openHelp } from '@operato/help'
-import { store } from '@operato/shell'
-
-@customElement('ox-title-bar')
-export class TitleBar extends connect(store)(LitElement) {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        align-items: center;
-        text-transform: capitalize;
-
-        --help-icon-color: var(--md-sys-color-primary);
-        --help-icon-hover-color: var(--md-sys-color-primary);
-        --help-icon-opacity: 0.2;
-        --help-icon-size: 20px;
-
-        --md-icon-size: 20px;
-
-        --input-search-padding: var(--spacing-medium);
-        --input-search-focus-border-bottom: none;
-        --input-search-font: normal 16px var(--theme-font);
-      }
-
-      [titler] {
-        display: flex;
-        font: var(--context-toolbar-title);
-      }
-
-      [titler] > * {
-        align-self: center;
-      }
-
-      [help] {
-        opacity: 0.5;
-        font-size: var(--help-icon-size);
-        color: var(--context-toolbar-title);
-      }
-
-      [help]:hover {
-        cursor: help;
-        opacity: var(--help-icon-hover-opacity);
-        color: var(--context-toolbar-title);
-      }
-
-      [search] {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        align-self: center;
-        color: var(--md-sys-color-primary);
-        background-color: var(--md-sys-color-on-primary);
-        border-radius: var(--md-sys-shape-corner-full);
-        padding: 0 var(--spacing-medium);
-      }
-
-      [search] > * {
-        align-self: center;
-      }
-
-      ox-input-search {
-        color: var(--md-sys-color-primary);
-        background-color: transparent;
-        border-radius: var(--md-sys-shape-corner-full);
-      }
-    `
-  ]
-
-  @state() private context: any
-
-  render() {
-    var { search, filter, title, help } = this.context || ({} as any)
-    var { value = '', handler: searchHandler, placeholder = '', autofocus = true } = search || ({} as any)
-    const { handler: filterHandler } = filter || ({} as any)
-    const { icon, text = title } = typeof title === 'object' ? title : ({} as any)
-    const searchable = typeof searchHandler == 'function'
-    const filterable = typeof filterHandler == 'function'
-
-    if (searchable && title) {
-      placeholder ||= text
-      title = ''
-    }
-
-    return html`
-      ${title ? html` <div titler>${icon ? html`<md-icon>${icon}</md-icon>&nbsp;` : html``}${text}</div> ` : html``}
-      ${help && title ? html` &nbsp;<md-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</md-icon> ` : html``}
-      ${searchable || filterable
-        ? html`
-            <div search>
-              ${searchable
-                ? html` <ox-input-search
-                    .placeholder=${placeholder}
-                    .value=${value || ''}
-                    ?autofocus=${autofocus}
-                    @change=${(e: Event) => {
-                      searchHandler((e.target as any).value)
-                    }}
-                  ></ox-input-search>`
-                : html``}
-              ${!title && help && searchable
-                ? html`<md-icon @click=${(e: MouseEvent) => openHelp(help)} help>help</md-icon>`
-                : html``}
-              ${filterable ? html`<md-icon @click=${(e: MouseEvent) => filterHandler()}>tune</md-icon>` : html``}
-            </div>
-          `
-        : html``}
-    `
-  }
-
-  stateChanged(state: any) {
-    this.context = state.route.context
-  }
-}