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

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 = {}

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

@@ -1,112 +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 { sleep } from '@operato/utils'
-
-import { css, html, render, TemplateResult } from 'lit'
-
-export default {
-  title: 'ox-context-toolbar empty',
-  component: 'ox-context-toolbar',
-  argTypes: {}
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {}
-
-const Template: Story<ArgTypes> = () => html`
-  <link href="/themes/app-theme.css" rel="stylesheet" />
-  <link href="/themes/material-theme.css" rel="stylesheet" />
-  <link href="/themes/context-theme.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>
-    body {
-      background-color: var(--md-sys-color-surface);
-    }
-  </style>
-
-  <div style="display: flex; flex-direction: column; gap: 10px; padding: 10px; background-color: black;">
-    <ox-context-toolbar
-      .tools=${[]}
-      .context=${{
-        exportable: true,
-        importable: true,
-        toolbar: true
-      }}
-    >
-    </ox-context-toolbar>
-
-    <ox-context-toolbar
-      .tools=${[
-        {
-          position: TOOL_POSITION.CENTER,
-          template: html`<ox-page-action-context-bar .actions=${[]}></ox-page-action-context-bar>`
-        }
-      ]}
-      .context=${{
-        exportable: true,
-        importable: true,
-        toolbar: true
-      }}
-    >
-    </ox-context-toolbar>
-
-    <ox-context-toolbar
-      .tools=${[
-        {
-          position: TOOL_POSITION.CENTER,
-          template: html`<ox-page-action-context-bar
-            .actions=${[
-              {
-                type: 'icon',
-                action: async () => {},
-                icon: 'check'
-              },
-              {
-                title: 'short-take(0secs)',
-                action: async () => {},
-                icon: 'delete'
-              },
-              {
-                title: 'long-take(3secs)',
-                action: async () => {
-                  await sleep(3000)
-                },
-                icon: 'save'
-              }
-            ]}
-          ></ox-page-action-context-bar>`
-        }
-      ]}
-      .context=${{
-        exportable: true,
-        importable: true,
-        toolbar: true
-      }}
-    >
-    </ox-context-toolbar>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {}

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

@@ -1,111 +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 { sleep } from '@operato/utils'
-
-import { css, html, render, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-context-toolbar empty',
-  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=${[]}
-      .context=${{
-        exportable: true,
-        importable: true,
-        toolbar: true
-      }}
-    >
-    </ox-context-toolbar>
-
-    <ox-context-toolbar
-      .tools=${[
-        {
-          position: TOOL_POSITION.CENTER,
-          template: html`<ox-page-action-context-bar .actions=${[]}></ox-page-action-context-bar>`
-        }
-      ]}
-      .context=${{
-        exportable: true,
-        importable: true,
-        toolbar: true
-      }}
-    >
-    </ox-context-toolbar>
-
-    <ox-context-toolbar
-      .tools=${[
-        {
-          position: TOOL_POSITION.CENTER,
-          template: html`<ox-page-action-context-bar .actions=${[]}></ox-page-action-context-bar>`
-        }
-      ]}
-      .context=${{
-        exportable: true,
-        importable: true,
-        toolbar: true
-      }}
-    >
-    </ox-context-toolbar>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {}

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

@@ -1,165 +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 overflow',
-  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,
-          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'
-              },
-              {
-                title: 'save',
-                action: () => {},
-                icon: 'save',
-                emphasis: {
-                  raised: true
-                }
-              },
-              {
-                title: 'copy',
-                action: () => {},
-                icon: 'content_copy'
-              },
-              {
-                title: 'delete',
-                action: () => {},
-                icon: 'delete'
-              },
-              {
-                title: 'save',
-                action: () => {},
-                icon: 'save'
-              },
-              {
-                title: 'copy',
-                action: () => {},
-                icon: 'content_copy'
-              },
-              {
-                title: 'delete',
-                action: () => {},
-                icon: 'delete'
-              },
-              {
-                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: true
-      }}
-    >
-    </ox-context-toolbar>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {}