@operato/data-grist 2.0.0-alpha.99 → 2.0.0-beta.1

package/stories/creatable-only-column.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'
@@ -65,6 +66,7 @@ function buildConfig({ headerFilter }: { headerFilter: boolean }) {
         header: 'name',
         filter: 'search',
         record: {
+          mandatory: true,
           editable: (value: any, column: any, record: any, rowIndex: any, field: any) => {
             return !record.id
           }
@@ -97,6 +99,7 @@ function buildConfig({ headerFilter }: { headerFilter: boolean }) {
         name: 'number',
         header: 'number',
         record: {
+          mandatory: true,
           editable: true
         },
         width: 80
@@ -152,7 +155,8 @@ export default {
   title: 'creatable only column for ox-grist',
   component: 'ox-grist',
   argTypes: {
-    headerFilter: { control: 'boolean' }
+    headerFilter: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -164,10 +168,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"
     />
@@ -180,15 +192,29 @@ 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;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       .config=${buildConfig({ headerFilter })}
       mode="GRID"
@@ -199,31 +225,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/default-filters.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'
 
@@ -25,6 +26,7 @@ const fetchHandler: FetchHandler = async ({ sorters = [], filters, page, limit }
           id: String(idx),
           name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,
           description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,
+          due: idx % 2 ? '2024-01-01' : '2024-02-01',
           createdAt: Date.now(),
           updatedAt: Date.now()
         }
@@ -73,10 +75,52 @@ function buildConfig({ headerFilter }: { headerFilter: boolean }) {
         },
         width: 200
       },
+      {
+        type: 'date',
+        name: 'due',
+        header: 'due',
+        filter: {
+          operator: 'between',
+          value: [
+            {
+              name: 'today',
+              params: {
+                relativeDays: -2,
+                timeZone: 'Asia/Seoul',
+                format: 'YYYY-MM-DD'
+              }
+            },
+            {
+              name: 'today',
+              params: {
+                relativeDays: 1,
+                timeZone: 'Asia/Seoul',
+                locale: 'en-CA' /* 'YYYY-MM-DD' format */,
+                format: {
+                  year: 'numeric',
+                  month: '2-digit',
+                  day: '2-digit'
+                }
+              }
+            }
+          ]
+        },
+        record: {
+          align: 'left'
+        },
+        width: 120
+      },
       {
         type: 'datetime',
         name: 'updatedAt',
         header: 'updated at',
+        filter: {
+          operator: 'between',
+          value: [
+            { name: 'week', params: { relativeWeeks: -1 } },
+            { name: 'today', params: { relativeDays: +1 } }
+          ]
+        },
         width: 180
       },
       {
@@ -106,7 +150,8 @@ export default {
   title: 'default filters for ox-grist',
   component: 'ox-grist',
   argTypes: {
-    headerFilter: { control: 'boolean' }
+    headerFilter: { control: 'boolean' },
+    theme: { control: 'select', options: ['light', 'dark'] }
   }
 }
 
@@ -118,10 +163,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"
     />
@@ -133,41 +186,56 @@ const Template: Story<ArgTypes> = ({ headerFilter }: ArgTypes) =>
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
       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;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       .config=${buildConfig({ headerFilter })}
       mode="GRID"
       .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/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,29 @@ 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;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       .config=${buildConfig({ headerFilter })}
       mode="GRID"
@@ -227,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" />
+
+    <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" />
 
-const Template: Story<ArgTypes> = ({}: ArgTypes) =>
-  html` <link
+    <link
       href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
       rel="stylesheet"
     />
@@ -117,41 +129,55 @@ 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;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       .config=${config}
       mode="GRID"
       .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,29 @@ 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;
+      }
+
+      ox-filters-form {
+        flex: 1;
+      }
+    </style>
+
     <ox-grist
       .config=${config}
       mode="GRID"
@@ -138,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>`