@operato/context 2.0.0-alpha.9 → 2.0.0-alpha.90

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

@@ -0,0 +1,162 @@
+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'
+
+export default {
+  title: 'ox-context-toolbar complex',
+  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: white;
+    }
+  </style>
+
+  <div style="height:100px; padding: 10px; background-color: black;">
+    <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-empty.stories.ts

@@ -0,0 +1,100 @@
+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'
+
+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: white;
+    }
+  </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=${[
+              {
+                title: 'save',
+                action: () => {},
+                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-overflow.stories.ts

@@ -0,0 +1,143 @@
+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'
+
+export default {
+  title: 'ox-context-toolbar overflow',
+  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: white;
+    }
+  </style>
+
+  <div style="height:100px; padding: 10px; background-color: yellow;">
+    <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'
+              },
+              {
+                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 = {}

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

@@ -0,0 +1,200 @@
+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'
+
+export default {
+  title: 'ox-context-toolbar',
+  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: white;
+    }
+  </style>
+
+  <div style="height:500px; padding: 10px; display: flex; flex-direction: column; gap: 10px; background-color: black;">
+    <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',
+                emphasis: {
+                  raised: true,
+                  outlined: false,
+                  dense: false,
+                  danger: true
+                }
+              }
+            ]}
+          ></ox-page-action-context-bar>`
+        }
+      ]}
+      .context=${{
+        exportable: true,
+        importable: true,
+        toolbar: true
+      }}
+    >
+    </ox-context-toolbar>
+
+    <ox-context-toolbar
+      .tools=${[
+        {
+          position: TOOL_POSITION.FRONT,
+          template: html` <md-icon>download</md-icon> `,
+          context: 'exportable'
+        },
+        {
+          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: {
+                  raised: false,
+                  outlined: false,
+                  dense: false,
+                  danger: true
+                }
+              }
+            ]}
+          ></ox-page-action-context-bar>`
+        }
+      ]}
+      .context=${{
+        exportable: true,
+        importable: true,
+        toolbar: true
+      }}
+    >
+    </ox-context-toolbar>
+
+    <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.FRONT,
+          template: html` <md-icon>restart_alt</md-icon> `,
+          context: 'resettable'
+        },
+        {
+          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: {
+                  raised: true,
+                  outlined: false,
+                  dense: false,
+                  danger: true
+                }
+              }
+            ]}
+          ></ox-page-action-context-bar>`
+        }
+      ]}
+      .context=${{
+        exportable: true,
+        importable: true,
+        resettable: true,
+        toolbar: true
+      }}
+    >
+    </ox-context-toolbar>
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {}