@operato/data-grist 2.0.0-alpha.146 → 2.0.0-alpha.148

package/stories/dynamic-editable.stories.ts

@@ -5,6 +5,7 @@ import '@operato/popup/ox-popup-list.js'
 import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 import { FetchHandler } from '../src/types.js'
 import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
@@ -180,7 +181,8 @@ export default {
   title: 'dynamic-editable for ox-grist',
   component: 'ox-grist',
   argTypes: {
-    headerFilter: { control: 'boolean' }
+    headerFilter: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -192,10 +194,18 @@ interface Story<T> {
 
 interface ArgTypes {
   headerFilter: boolean
+  theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
-  html` <link
+const Template: Story<ArgTypes> = ({ headerFilter, theme = 'light' }: 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="/themes/grist-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"
     />
@@ -208,15 +218,19 @@ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
       rel="stylesheet"
     />
 
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="/themes/oops-theme.css" rel="stylesheet" />
-    <link href="/themes/grist-theme.css" rel="stylesheet" />
+    <style>
+      ${MDTypeScaleStyles.cssText}
+    </style>
 
     <style>
       ${CommonGristStyles.cssText}
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <script>
+      document.body.classList.add('${theme}')
+    </script>
+
     <style>
       ox-grist {
         height: 600px;
@@ -237,31 +251,31 @@ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
         console.log(name, number, chk)
       }}
     >
-      <div slot="headroom">
-        <div id="filters">
+      <div slot="headroom" class="header">
+        <div class="filters">
           <ox-filters-form></ox-filters-form>
-        </div>
 
-        <div id="sorters">
-          Sort
-          <md-icon
-            @click=${(e: Event) => {
-              const target = e.currentTarget as HTMLElement
-              ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
-                right: 0,
-                top: target.offsetTop + target.offsetHeight
-              })
-            }}
-            >expand_more</md-icon
-          >
-          <ox-popup id="sorter-control">
-            <ox-sorters-control> </ox-sorters-control>
-          </ox-popup>
-        </div>
+          <div id="sorters">
+            Sort
+            <md-icon
+              @click=${(e: Event) => {
+                const target = e.currentTarget as HTMLElement
+                ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
+                  right: 0,
+                  top: target.offsetTop + target.offsetHeight
+                })
+              }}
+              >expand_more</md-icon
+            >
+            <ox-popup id="sorter-control">
+              <ox-sorters-control> </ox-sorters-control>
+            </ox-popup>
+          </div>
 
-        <ox-record-creator id="add" light-popup>
-          <button><md-icon>add</md-icon></button>
-        </ox-record-creator>
+          <ox-record-creator id="add" light-popup>
+            <button><md-icon>add</md-icon></button>
+          </ox-record-creator>
+        </div>
       </div>
     </ox-grist>`
 

package/stories/empty-sorters.stories.ts

@@ -5,6 +5,7 @@ import '@operato/popup/ox-popup-list.js'
 import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 import { FetchHandler } from '../src/types.js'
 import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
@@ -92,7 +93,9 @@ const config = {
 export default {
   title: 'empty sorters for ox-grist',
   component: 'ox-grist',
-  argTypes: {}
+  argTypes: {
+    theme: { control: 'select', options: ['light', 'dark'] }
+  }
 }
 
 interface Story<T> {
@@ -101,10 +104,19 @@ interface Story<T> {
   argTypes?: Record<string, unknown>
 }
 
-interface ArgTypes {}
+interface ArgTypes {
+  theme: 'light' | 'dark'
+}
+
+const Template: Story<ArgTypes> = ({ theme = 'light' }: ArgTypes) =>
+  html` <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
-const Template: Story<ArgTypes> = ({}: ArgTypes) =>
-  html` <link
+    <link href="/themes/light.css" rel="stylesheet" />
+    <link href="/themes/dark.css" rel="stylesheet" />
+    <link href="/themes/spacing.css" rel="stylesheet" />
+    <link href="/themes/grist-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"
     />
@@ -117,15 +129,19 @@ const Template: Story<ArgTypes> = ({}: ArgTypes) =>
       rel="stylesheet"
     />
 
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="/themes/oops-theme.css" rel="stylesheet" />
-    <link href="/themes/grist-theme.css" rel="stylesheet" />
+    <style>
+      ${MDTypeScaleStyles.cssText}
+    </style>
 
     <style>
       ${CommonGristStyles.cssText}
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <script>
+      document.body.classList.add('${theme}')
+    </script>
+
     <style>
       ox-grist {
         height: 600px;
@@ -142,26 +158,26 @@ const Template: Story<ArgTypes> = ({}: ArgTypes) =>
       .fetchHandler=${fetchHandler}
       @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
     >
-      <div slot="headroom">
-        <div id="filters">
+      <div slot="headroom" class="header">
+        <div class="filters">
           <ox-filters-form></ox-filters-form>
-        </div>
 
-        <div id="sorters">
-          Sort
-          <md-icon
-            @click=${(e: Event) => {
-              const target = e.currentTarget as HTMLElement
-              ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
-                right: 0,
-                top: target.offsetTop + target.offsetHeight
-              })
-            }}
-            >expand_more</md-icon
-          >
-          <ox-popup id="sorter-control">
-            <ox-sorters-control> </ox-sorters-control>
-          </ox-popup>
+          <div id="sorters">
+            Sort
+            <md-icon
+              @click=${(e: Event) => {
+                const target = e.currentTarget as HTMLElement
+                ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
+                  right: 0,
+                  top: target.offsetTop + target.offsetHeight
+                })
+              }}
+              >expand_more</md-icon
+            >
+            <ox-popup id="sorter-control">
+              <ox-sorters-control> </ox-sorters-control>
+            </ox-popup>
+          </div>
         </div>
       </div>
     </ox-grist>`

package/stories/explicit-fetch.stories.ts

@@ -5,6 +5,7 @@ import '@operato/popup/ox-popup-list.js'
 import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 import { FetchHandler } from '../src/types.js'
 import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
@@ -94,7 +95,8 @@ export default {
   title: 'explicit-fetch attribute for ox-grist',
   component: 'ox-grist',
   argTypes: {
-    explicitFetch: { control: 'boolean' }
+    explicitFetch: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -106,10 +108,18 @@ interface Story<T> {
 
 interface ArgTypes {
   explicitFetch: boolean
+  theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ explicitFetch = false }: ArgTypes) =>
-  html` <link
+const Template: Story<ArgTypes> = ({ explicitFetch = false, theme = 'light' }: 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="/themes/grist-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"
     />
@@ -122,15 +132,19 @@ const Template: Story<ArgTypes> = ({ explicitFetch = false }: ArgTypes) =>
       rel="stylesheet"
     />
 
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="/themes/oops-theme.css" rel="stylesheet" />
-    <link href="/themes/grist-theme.css" rel="stylesheet" />
+    <style>
+      ${MDTypeScaleStyles.cssText}
+    </style>
 
     <style>
       ${CommonGristStyles.cssText}
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <script>
+      document.body.classList.add('${theme}')
+    </script>
+
     <style>
       ox-grist {
         height: 600px;
@@ -148,26 +162,26 @@ const Template: Story<ArgTypes> = ({ explicitFetch = false }: ArgTypes) =>
       .fetchHandler=${fetchHandler}
       @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
     >
-      <div slot="headroom">
-        <div id="filters">
+      <div slot="headroom" class="header">
+        <div class="filters">
           <ox-filters-form></ox-filters-form>
-        </div>
 
-        <div id="sorters">
-          Sort
-          <md-icon
-            @click=${(e: Event) => {
-              const target = e.currentTarget as HTMLElement
-              ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
-                right: 0,
-                top: target.offsetTop + target.offsetHeight
-              })
-            }}
-            >expand_more</md-icon
-          >
-          <ox-popup id="sorter-control">
-            <ox-sorters-control> </ox-sorters-control>
-          </ox-popup>
+          <div id="sorters">
+            Sort
+            <md-icon
+              @click=${(e: Event) => {
+                const target = e.currentTarget as HTMLElement
+                ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
+                  right: 0,
+                  top: target.offsetTop + target.offsetHeight
+                })
+              }}
+              >expand_more</md-icon
+            >
+            <ox-popup id="sorter-control">
+              <ox-sorters-control> </ox-sorters-control>
+            </ox-popup>
+          </div>
         </div>
       </div>
     </ox-grist>`

package/stories/fixed-column.stories.ts

@@ -6,6 +6,7 @@ import '@operato/popup/ox-popup-list.js'
 import '@material/web/icon/icon.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 import {
   ColumnConfig,
@@ -317,7 +318,8 @@ export default {
   title: 'fixed column',
   component: 'ox-grist',
   argTypes: {
-    config: { control: 'object' }
+    config: { control: 'object' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -329,10 +331,18 @@ interface Story<T> {
 
 interface ArgTypes {
   config: object
+  theme: 'light' | 'dark'
 }
 
-const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
-  html` <link
+const Template: Story<ArgTypes> = ({ config, theme = 'light' }: 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="/themes/grist-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"
     />
@@ -345,15 +355,19 @@ const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
       rel="stylesheet"
     />
 
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="/themes/oops-theme.css" rel="stylesheet" />
-    <link href="/themes/grist-theme.css" rel="stylesheet" />
+    <style>
+      ${MDTypeScaleStyles.cssText}
+    </style>
 
     <style>
       ${CommonGristStyles.cssText}
       ${CommonHeaderStyles.cssText}
     </style>
 
+    <script>
+      document.body.classList.add('${theme}')
+    </script>
+
     <style>
       ox-grist {
         height: 600px;
@@ -370,31 +384,31 @@ const Template: Story<ArgTypes> = ({ config }: ArgTypes) =>
       .fetchHandler=${fetchHandler}
       @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
     >
-      <div slot="headroom">
-        <div id="filters">
+      <div slot="headroom" class="header">
+        <div class="filters">
           <ox-filters-form autofocus></ox-filters-form>
-        </div>
 
-        <div id="sorters">
-          Sort
-          <md-icon
-            @click=${(e: Event) => {
-              const target = e.currentTarget as HTMLElement
-              ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
-                right: 0,
-                top: target.offsetTop + target.offsetHeight
-              })
-            }}
-            >expand_more</md-icon
-          >
-          <ox-popup id="sorter-control">
-            <ox-sorters-control> </ox-sorters-control>
-          </ox-popup>
-        </div>
+          <div id="sorters">
+            Sort
+            <md-icon
+              @click=${(e: Event) => {
+                const target = e.currentTarget as HTMLElement
+                ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
+                  right: 0,
+                  top: target.offsetTop + target.offsetHeight
+                })
+              }}
+              >expand_more</md-icon
+            >
+            <ox-popup id="sorter-control">
+              <ox-sorters-control> </ox-sorters-control>
+            </ox-popup>
+          </div>
 
-        <ox-record-creator id="add" light-popup>
-          <button><md-icon>add</md-icon></button>
-        </ox-record-creator>
+          <ox-record-creator id="add" light-popup>
+            <button><md-icon>add</md-icon></button>
+          </ox-record-creator>
+        </div>
       </div>
     </ox-grist>`
 

package/stories/grid-setting.stories.ts

@@ -11,6 +11,7 @@ import '../src/personalizer/ox-grist-personalizer.js'
 import '../src/personalizer/ox-grist-filter-personalizer.js'
 
 import { html, TemplateResult } from 'lit'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
 
@@ -345,6 +346,7 @@ export default {
     config: { control: 'object' },
     mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },
     urlParamsSensitive: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] },
     withoutSearch: { control: 'boolean' },
     debug: { control: 'boolean' }
   }
@@ -362,6 +364,7 @@ interface ArgTypes {
   urlParamsSensitive: boolean
   withoutSearch: boolean
   fetchHandler: FetchHandler
+  theme: 'light' | 'dark'
   debug: boolean
 }
 
@@ -382,9 +385,17 @@ const Template: Story<ArgTypes> = ({
   urlParamsSensitive = false,
   withoutSearch = false,
   debug = false,
-  fetchHandler
+  fetchHandler,
+  theme = 'light'
 }: ArgTypes) =>
-  html` <link
+  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="/themes/grist-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"
     />
@@ -397,9 +408,9 @@ const Template: Story<ArgTypes> = ({
       rel="stylesheet"
     />
 
-    <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="/themes/oops-theme.css" rel="stylesheet" />
-    <link href="/themes/grist-theme.css" rel="stylesheet" />
+    <style>
+      ${MDTypeScaleStyles.cssText}
+    </style>
 
     <style>
       ${CommonGristStyles.cssText} ${CommonHeaderStyles.cssText}
@@ -441,22 +452,39 @@ const Template: Story<ArgTypes> = ({
       ?url-params-sensitive=${urlParamsSensitive}
       @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}
     >
-      <div slot="headroom">
-        <div id="filters">
+      <div slot="headroom" class="header">
+        <div class="filters">
           <ox-filters-form autofocus ?without-search=${withoutSearch}>
             <ox-grist-filter-personalizer slot="setting"></ox-grist-filter-personalizer>
           </ox-filters-form>
-        </div>
 
-        <div id="modes">
-          <md-icon @click=${() => (mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
-          <md-icon @click=${() => (mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
-          <md-icon @click=${() => (mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
-        </div>
+          <div id="sorters">
+            Sort
+            <md-icon
+              @click=${(e: Event) => {
+                const target = e.currentTarget as HTMLElement
+                ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({
+                  right: 0,
+                  top: target.offsetTop + target.offsetHeight
+                })
+              }}
+              >expand_more</md-icon
+            >
+            <ox-popup id="sorter-control">
+              <ox-sorters-control> </ox-sorters-control>
+            </ox-popup>
+          </div>
+
+          <div id="modes">
+            <md-icon @click=${() => (mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
+            <md-icon @click=${() => (mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
+          </div>
 
-        <ox-record-creator id="add" light-popup>
-          <button><md-icon>add</md-icon></button>
-        </ox-record-creator>
+          <ox-record-creator id="add" light-popup>
+            <button><md-icon>add</md-icon></button>
+          </ox-record-creator>
+        </div>
       </div>
 
       <ox-grist-personalizer slot="setting" ?debug=${debug}></ox-grist-personalizer>