@operato/context 7.1.31 → 7.1.32

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'
-}

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

@@ -1,130 +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 { 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',
-  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=${[
-                {
-                  title: 'save',
-                  action: () => {},
-                  icon: 'save'
-                },
-                {
-                  title: 'copy',
-                  action: () => {},
-                  icon: 'content_copy'
-                },
-                {
-                  title: 'delete',
-                  action: () => {},
-                  icon: 'delete',
-                  emphasis: {
-                    danger: 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-toolbar-complex.stories.ts

@@ -1,181 +0,0 @@
-import '@material/web/icon/icon.js'
-import '../src/layouts/ox-context-toolbar.js'
-import '../src/tools/ox-page-action-context-bar.js'
-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-toolbar complex',
-  component: 'ox-context-toolbar',
-  argTypes: {
-    theme: { control: 'select', options: ['light', 'dark'] }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {}
-
-const Template: Story<ArgTypes> = ({}: 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">
-    <ox-context-toolbar
-      .tools=${[
-        {
-          position: TOOL_POSITION.FRONT_END,
-          template: html` <md-icon>download</md-icon> `,
-          context: 'exportable'
-        },
-        {
-          position: TOOL_POSITION.FRONT_END,
-          template: html` <md-icon>upload</md-icon> `,
-          context: 'importable'
-        },
-        {
-          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'
-              },
-              {
-                title: 'delete',
-                action: () => {},
-                icon: 'delete',
-                emphasis: {
-                  danger: true
-                }
-              }
-            ]}
-          ></ox-page-action-context-bar>`
-        },
-        {
-          position: TOOL_POSITION.REAR,
-          template: html`<ox-page-action-context-bar
-            .actions=${[
-              {
-                title: 'save',
-                action: () => {},
-                icon: 'save'
-              },
-              {
-                title: 'copy',
-                action: () => {},
-                icon: 'content_copy'
-              },
-              {
-                title: 'delete',
-                action: () => {},
-                icon: 'delete'
-              }
-            ]}
-          ></ox-page-action-context-bar>`
-        },
-        {
-          position: TOOL_POSITION.REAR_END,
-          template: html`<ox-page-action-context-bar
-            .actions=${[
-              {
-                title: 'save',
-                action: () => {},
-                icon: 'save'
-              },
-              {
-                title: 'copy',
-                action: () => {},
-                icon: 'content_copy'
-              },
-              {
-                title: 'delete',
-                action: () => {},
-                icon: 'delete'
-              }
-            ]}
-          ></ox-page-action-context-bar>`
-        },
-        {
-          position: TOOL_POSITION.REAR_END,
-          template: html` <md-icon>download</md-icon> `,
-          context: 'exportable'
-        },
-        {
-          position: TOOL_POSITION.REAR_END,
-          template: html` <md-icon>upload</md-icon> `,
-          context: 'importable'
-        }
-      ]}
-      .context=${{
-        exportable: true,
-        importable: true,
-        toolbar: true
-      }}
-    >
-    </ox-context-toolbar>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {}