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

package/stories/grist-modes.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 { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
 
@@ -338,7 +339,8 @@ export default {
   argTypes: {
     config: { control: 'object' },
     mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },
-    urlParamsSensitive: { control: 'boolean' }
+    urlParamsSensitive: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -352,11 +354,25 @@ interface ArgTypes {
   config: object
   mode: 'GRID' | 'LIST' | 'CARD'
   urlParamsSensitive: boolean
+  theme: 'light' | 'dark'
   fetchHandler: FetchHandler
 }
 
-const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>
-  html` <link
+const Template: Story<ArgTypes> = ({
+  config,
+  mode = 'GRID',
+  urlParamsSensitive = false,
+  fetchHandler,
+  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"
     />
@@ -369,15 +385,19 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
       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;
@@ -395,37 +415,37 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
       ?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></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>
 
-        <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="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>`
 

package/stories/group-header.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 { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
 
@@ -346,7 +347,8 @@ export default {
   title: 'group header',
   component: 'ox-grist',
   argTypes: {
-    config: { control: 'object' }
+    config: { control: 'object' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -358,10 +360,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"
     />
@@ -374,15 +384,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;
@@ -399,31 +413,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/textarea.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 { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
 
@@ -175,7 +176,8 @@ export default {
   argTypes: {
     config: { control: 'object' },
     mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },
-    urlParamsSensitive: { control: 'boolean' }
+    urlParamsSensitive: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -189,11 +191,25 @@ interface ArgTypes {
   config: object
   mode: 'GRID' | 'LIST' | 'CARD'
   urlParamsSensitive: boolean
+  theme: 'light' | 'dark'
   fetchHandler: FetchHandler
 }
 
-const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: ArgTypes) =>
-  html` <link
+const Template: Story<ArgTypes> = ({
+  config,
+  mode = 'GRID',
+  urlParamsSensitive = false,
+  fetchHandler,
+  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"
     />
@@ -206,15 +222,20 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
       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}
+      ${CommonGristStyles.cssText} ${CommonHeaderStyles.cssText} #add {
+        margin-left: auto;
+      }
     </style>
 
+    <script>
+      document.body.classList.add('${theme}')
+    </script>
+
     <style>
       ox-grist {
         height: 600px;
@@ -232,14 +253,14 @@ const Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive =
       ?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></ox-filters-form>
-        </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/tree-column-with-checkbox.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 { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
 
@@ -202,7 +203,8 @@ export default {
   title: 'tree column with checkbox',
   component: 'ox-grist',
   argTypes: {
-    config: { control: 'object' }
+    config: { control: 'object' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -214,10 +216,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"
     />
@@ -230,15 +240,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;
@@ -255,31 +269,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/tree-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 { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'
 
@@ -201,7 +202,8 @@ export default {
   title: 'tree column',
   component: 'ox-grist',
   argTypes: {
-    config: { control: 'object' }
+    config: { control: 'object' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -213,10 +215,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"
     />
@@ -229,15 +239,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;
@@ -254,31 +268,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>`