@operato/context 8.0.0-alpha.8 → 8.0.0-beta.1

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,124 +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;
-
-        --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,120 +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;
-
-        --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: 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] {
-        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
-  }
-}

package/stories/ox-context-page-toolbar-select-buttons.stories.ts

@@ -1,166 +0,0 @@
-import '@material/web/icon/icon.js'
-import '../src/layouts/ox-context-page-toolbar.js'
-import '../src/tools/ox-page-action-context-bar.js'
-import '@operato/input/ox-input-select-buttons.js'
-import { CommonHeaderStyles } from '@operato/styles'
-import { TOOL_POSITION } from '@operato/layout'
-
-import '@operato/styles'
-
-import { css, html, render, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-context-page-toolbar select buttons',
-  component: 'ox-context-page-toolbar',
-  argTypes: {
-    label: { control: 'string' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  label?: string
-}
-
-const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" 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="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"
-  />
-
-  <style>
-    ${MDTypeScaleStyles.cssText}
-  </style>
-
-  <style>
-    .container {
-      height: 500px;
-      text-align: center;
-      padding: 20px;
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-
-      padding: 20px;
-    }
-
-    ox-buttons-radio {
-      padding: 20px;
-    }
-  </style>
-
-  <div class="container md-typescale-body-large-prominent">
-    <div class="header">
-      <div class="title">${label}</div>
-
-      <div class="filters">
-        <label>Filter-X</label><input type="text" name="name" />
-        <ox-input-select-buttons
-          @change=${(e: Event) => {
-            console.log((e.target as HTMLInputElement).value)
-          }}
-          name="wearables"
-          .value=${'Gloves'}
-          .options=${[
-            { display: 'SHOOSE', value: 'Shoose' },
-            { display: 'CHOTHES', value: 'Clothes' },
-            { display: 'GLOVES', value: 'Gloves' }
-          ]}
-          multiple
-        ></ox-input-select-buttons>
-      </div>
-
-      <ox-context-page-toolbar
-        class="actions"
-        .tools=${[
-          {
-            position: TOOL_POSITION.FRONT,
-            template: html` <md-icon>download</md-icon> `,
-            context: 'exportable'
-          },
-          {
-            position: TOOL_POSITION.FRONT,
-            template: html` <md-icon>upload</md-icon> `,
-            context: 'importable'
-          },
-          {
-            position: TOOL_POSITION.CENTER,
-            template: html`<ox-page-action-context-bar
-              .actions=${[
-                {
-                  title: 'save',
-                  action: () => {},
-                  icon: 'save'
-                },
-                {
-                  title: 'copy',
-                  action: () => {},
-                  icon: 'content_copy',
-                  emphasis: {
-                    outlined: true
-                  }
-                },
-                {
-                  title: 'edit',
-                  action: () => {},
-                  icon: 'content_copy',
-                  emphasis: {
-                    outlined: true
-                  }
-                },
-                {
-                  title: 'hoppaang',
-                  action: () => {},
-                  icon: '',
-                  emphasis: {
-                    outlined: true
-                  }
-                },
-                {
-                  title: 'delete',
-                  action: () => {},
-                  icon: 'delete',
-                  emphasis: {
-                    danger: true,
-                    filled: true
-                  }
-                }
-              ]}
-            ></ox-page-action-context-bar>`
-          }
-        ]}
-        .context=${{
-          exportable: true,
-          importable: true,
-          toolbar: false
-        }}
-        }
-      >
-      </ox-context-page-toolbar>
-    </div>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  label: 'common header styles'
-}

package/stories/ox-context-page-toolbar-select.stories.ts

@@ -1,129 +0,0 @@
-import '@material/web/icon/icon.js'
-import '../src/layouts/ox-context-page-toolbar.js'
-import '../src/tools/ox-page-action-context-bar.js'
-import { TOOL_POSITION } from '@operato/layout'
-import { sleep } from '@operato/utils'
-
-import '@operato/styles'
-
-import { css, html, render, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-context-page-toolbar-select',
-  component: 'ox-context-page-toolbar',
-  argTypes: {
-    label: { control: 'string' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  label?: string
-}
-
-const Template: Story<ArgTypes> = ({ label = '' }: ArgTypes) => html`
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" 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="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"
-  />
-
-  <style>
-    ${MDTypeScaleStyles.cssText}
-  </style>
-
-  <style>
-    .container {
-      height: 500px;
-      text-align: center;
-      padding: 20px;
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-
-      padding: 20px;
-    }
-
-    ox-buttons-radio {
-      padding: 20px;
-    }
-  </style>
-
-  <div class="container md-typescale-body-large-prominent">
-    <div class="header">
-      <div class="title">${label}</div>
-
-      <div class="filters"><label>Filter</label><input type="text" /></div>
-
-      <ox-context-page-toolbar
-        class="actions"
-        .tools=${[
-          {
-            position: TOOL_POSITION.FRONT,
-            template: html` <md-icon>download</md-icon> `,
-            context: 'exportable'
-          },
-          {
-            position: TOOL_POSITION.FRONT,
-            template: html` <md-icon>upload</md-icon> `,
-            context: 'importable'
-          },
-          {
-            position: TOOL_POSITION.CENTER,
-            template: html`<ox-page-action-context-bar
-              .actions=${[
-                {
-                  type: 'icon',
-                  title: 'favorite',
-                  icon: 'favorite',
-                  action: async () => {
-                    await sleep(1000)
-                  }
-                },
-                {
-                  title: 'smile',
-                  action: () => {},
-                  select: ['', 'delete', 'hahaha', 'hohoho']
-                },
-                {
-                  title: 'save',
-                  action: () => {},
-                  icon: 'save'
-                }
-              ]}
-            ></ox-page-action-context-bar>`
-          }
-        ]}
-        .context=${{
-          exportable: true,
-          importable: true,
-          toolbar: false
-        }}
-      >
-      </ox-context-page-toolbar>
-    </div>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  label: 'common header styles'
-}