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

package/dist/stories/tree-column-with-checkbox.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-column-with-checkbox.stories.js","sourceRoot":"","sources":["../../stories/tree-column-with-checkbox.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '../src/record-view/record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\nimport {\n  ColumnConfig,\n  FetchHandler,\n  GristClassifier,\n  GristEventHandlerSet,\n  GristRecord,\n  ValidationCallback\n} from '../src/types.js'\n\nconst fetchHandler: FetchHandler = async ({ page, limit }) => {\n  var total = 120993\n  var start = (page! - 1) * limit!\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  var records = Array(limit! * page! > total ? total % limit! : limit)\n    .fill('')\n    .map((item, idx) => {\n      return {\n        id: String(idx),\n        name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n        description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n        active: Math.round(Math.random() * 2) % 2 ? true : false,\n        accval: Math.random(),\n        createdAt: Date.now(),\n        updatedAt: Date.now(),\n        children: [\n          ...Array.from({ length: 3 }, (_, idx) => {\n            return {\n              id: `sub:${idx}`,\n              name: 'subitem' + idx,\n              description: 'sub items...',\n              active: Math.round(Math.random() * 2) % 2 ? true : false,\n              accval: Math.random(),\n              children: [\n                ...Array.from({ length: 3 }, (_, idx2) => {\n                  return {\n                    id: `sub-sub:${idx}:${idx2}`,\n                    name: 'sub-subitem:' + idx2,\n                    description: 'sub sub items...',\n                    active: Math.round(Math.random() * 2) % 2 ? true : false,\n                    accval: Math.random(),\n                    children: [],\n                    createdAt: Date.now(),\n                    updatedAt: Date.now()\n                  }\n                })\n              ],\n              createdAt: Date.now(),\n              updatedAt: Date.now()\n            }\n          })\n        ]\n      }\n    })\n\n  return {\n    total,\n    records\n  }\n}\n\nconst config = {\n  list: {\n    thumbnail: 'thumbnail',\n    fields: ['name', 'description'],\n    details: ['role', 'email']\n  },\n  columns: [\n    {\n      type: 'gutter',\n      gutterName: 'dirty',\n      fixed: true\n    },\n    // {\n    //   type: 'gutter',\n    //   gutterName: 'sequence',\n    //   fixed: true\n    // },\n    {\n      type: 'tree',\n      name: 'name',\n      label: true,\n      header: 'name',\n      record: {\n        editable: true,\n        options: {\n          selectable: true /* with checkbox */\n        }\n      },\n      filter: 'search',\n      sortable: true,\n      width: 200,\n      fixed: true,\n      handlers: {\n        contextmenu: 'contextmenu-tree-mutation'\n      }\n    },\n    {\n      type: 'gutter',\n      gutterName: 'row-selector',\n      multiple: true\n    },\n    {\n      type: 'string',\n      name: 'description',\n      header: 'description',\n      filter: 'search',\n      record: {\n        editable: true,\n        align: 'left'\n      },\n      width: 200\n    },\n    {\n      type: 'boolean',\n      name: 'active',\n      header: 'active',\n      record: {\n        editable: true\n      },\n      filter: true,\n      sortable: true,\n      width: 60\n    },\n    {\n      type: 'number',\n      name: 'accval',\n      label: true,\n      header: 'accval',\n      record: {\n        editable: true,\n        align: 'right'\n      },\n      accumulator: 'sum',\n      sortable: true,\n      width: 130\n    },\n    {\n      type: 'datetime',\n      name: 'updatedAt',\n      header: 'updated at',\n      record: {\n        editable: true,\n        defaultValue: {\n          name: 'now'\n        }\n      },\n      filter: 'between',\n      sortable: true,\n      width: 180\n    }\n  ],\n  rows: {\n    appendable: false,\n    selectable: {\n      multiple: true\n    },\n    handlers: {\n      // focus: 'select-row-toggle'\n    },\n    classifier: function (record, rowIndex) {\n      const rate = record['rate']\n      const emphasized =\n        rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined\n      return {\n        emphasized\n      }\n    } as GristClassifier,\n    accumulator: true\n  },\n  sorters: [\n    {\n      name: 'name',\n      desc: true\n    },\n    {\n      name: 'email'\n    }\n  ],\n  pagination: {\n    pages: [20, 30, 50, 100, 200]\n  },\n  tree: {\n    childrenProperty: 'children',\n    expanded: true\n  }\n}\n\nexport default {\n  title: 'tree column with checkbox',\n  component: 'ox-grist',\n  argTypes: {\n    config: { control: 'object' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  config: object\n}\n\nconst Template: Story<ArgTypes> = ({ config }: ArgTypes) =>\n  html` <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n\n    <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n    <style>\n      ${CommonGristStyles.cssText}\n      ${CommonHeaderStyles.cssText}\n    </style>\n\n    <style>\n      ox-grist {\n        height: 600px;\n      }\n\n      ox-filters-form {\n        flex: 1;\n      }\n    </style>\n\n    <ox-grist\n      mode=\"GRID\"\n      .config=${config}\n      .fetchHandler=${fetchHandler}\n      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n    >\n      <div slot=\"headroom\">\n        <div id=\"filters\">\n          <ox-filters-form autofocus></ox-filters-form>\n        </div>\n\n        <div id=\"sorters\">\n          Sort\n          <md-icon\n            @click=${(e: Event) => {\n              const target = e.currentTarget as HTMLElement\n              ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n                right: 0,\n                top: target.offsetTop + target.offsetHeight\n              })\n            }}\n            >expand_more</md-icon\n          >\n          <ox-popup id=\"sorter-control\">\n            <ox-sorters-control> </ox-sorters-control>\n          </ox-popup>\n        </div>\n\n        <ox-record-creator id=\"add\" light-popup>\n          <button><md-icon>add</md-icon></button>\n        </ox-record-creator>\n      </div>\n    </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  config\n}\n"]}
+{"version":3,"file":"tree-column-with-checkbox.stories.js","sourceRoot":"","sources":["../../stories/tree-column-with-checkbox.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '../src/record-view/record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\nimport {\n  ColumnConfig,\n  FetchHandler,\n  GristClassifier,\n  GristEventHandlerSet,\n  GristRecord,\n  ValidationCallback\n} from '../src/types.js'\n\nconst fetchHandler: FetchHandler = async ({ page, limit }) => {\n  var total = 120993\n  var start = (page! - 1) * limit!\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  var records = Array(limit! * page! > total ? total % limit! : limit)\n    .fill('')\n    .map((item, idx) => {\n      return {\n        id: String(idx),\n        name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n        description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n        active: Math.round(Math.random() * 2) % 2 ? true : false,\n        accval: Math.random(),\n        createdAt: Date.now(),\n        updatedAt: Date.now(),\n        children: [\n          ...Array.from({ length: 3 }, (_, idx) => {\n            return {\n              id: `sub:${idx}`,\n              name: 'subitem' + idx,\n              description: 'sub items...',\n              active: Math.round(Math.random() * 2) % 2 ? true : false,\n              accval: Math.random(),\n              children: [\n                ...Array.from({ length: 3 }, (_, idx2) => {\n                  return {\n                    id: `sub-sub:${idx}:${idx2}`,\n                    name: 'sub-subitem:' + idx2,\n                    description: 'sub sub items...',\n                    active: Math.round(Math.random() * 2) % 2 ? true : false,\n                    accval: Math.random(),\n                    children: [],\n                    createdAt: Date.now(),\n                    updatedAt: Date.now()\n                  }\n                })\n              ],\n              createdAt: Date.now(),\n              updatedAt: Date.now()\n            }\n          })\n        ]\n      }\n    })\n\n  return {\n    total,\n    records\n  }\n}\n\nconst config = {\n  list: {\n    thumbnail: 'thumbnail',\n    fields: ['name', 'description'],\n    details: ['role', 'email']\n  },\n  columns: [\n    {\n      type: 'gutter',\n      gutterName: 'dirty',\n      fixed: true\n    },\n    // {\n    //   type: 'gutter',\n    //   gutterName: 'sequence',\n    //   fixed: true\n    // },\n    {\n      type: 'tree',\n      name: 'name',\n      label: true,\n      header: 'name',\n      record: {\n        editable: true,\n        options: {\n          selectable: true /* with checkbox */\n        }\n      },\n      filter: 'search',\n      sortable: true,\n      width: 200,\n      fixed: true,\n      handlers: {\n        contextmenu: 'contextmenu-tree-mutation'\n      }\n    },\n    {\n      type: 'gutter',\n      gutterName: 'row-selector',\n      multiple: true\n    },\n    {\n      type: 'string',\n      name: 'description',\n      header: 'description',\n      filter: 'search',\n      record: {\n        editable: true,\n        align: 'left'\n      },\n      width: 200\n    },\n    {\n      type: 'boolean',\n      name: 'active',\n      header: 'active',\n      record: {\n        editable: true\n      },\n      filter: true,\n      sortable: true,\n      width: 60\n    },\n    {\n      type: 'number',\n      name: 'accval',\n      label: true,\n      header: 'accval',\n      record: {\n        editable: true,\n        align: 'right'\n      },\n      accumulator: 'sum',\n      sortable: true,\n      width: 130\n    },\n    {\n      type: 'datetime',\n      name: 'updatedAt',\n      header: 'updated at',\n      record: {\n        editable: true,\n        defaultValue: {\n          name: 'now'\n        }\n      },\n      filter: 'between',\n      sortable: true,\n      width: 180\n    }\n  ],\n  rows: {\n    appendable: false,\n    selectable: {\n      multiple: true\n    },\n    handlers: {\n      // focus: 'select-row-toggle'\n    },\n    classifier: function (record, rowIndex) {\n      const rate = record['rate']\n      const emphasized =\n        rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined\n      return {\n        emphasized\n      }\n    } as GristClassifier,\n    accumulator: true\n  },\n  sorters: [\n    {\n      name: 'name',\n      desc: true\n    },\n    {\n      name: 'email'\n    }\n  ],\n  pagination: {\n    pages: [20, 30, 50, 100, 200]\n  },\n  tree: {\n    childrenProperty: 'children',\n    expanded: true\n  }\n}\n\nexport default {\n  title: 'tree column with checkbox',\n  component: 'ox-grist',\n  argTypes: {\n    config: { control: 'object' },\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  config: object\n  theme: 'light' | 'dark'\n}\n\nconst Template: Story<ArgTypes> = ({ config, theme = 'light' }: ArgTypes) =>\n  html` <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n    <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      ${MDTypeScaleStyles.cssText}\n    </style>\n\n    <style>\n      ${CommonGristStyles.cssText}\n      ${CommonHeaderStyles.cssText}\n    </style>\n\n    <script>\n      document.body.classList.add('${theme}')\n    </script>\n\n    <style>\n      ox-grist {\n        height: 600px;\n      }\n\n      ox-filters-form {\n        flex: 1;\n      }\n    </style>\n\n    <ox-grist\n      mode=\"GRID\"\n      .config=${config}\n      .fetchHandler=${fetchHandler}\n      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n    >\n      <div slot=\"headroom\" class=\"header\">\n        <div class=\"filters\">\n          <ox-filters-form autofocus></ox-filters-form>\n\n          <div id=\"sorters\">\n            Sort\n            <md-icon\n              @click=${(e: Event) => {\n                const target = e.currentTarget as HTMLElement\n                ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n                  right: 0,\n                  top: target.offsetTop + target.offsetHeight\n                })\n              }}\n              >expand_more</md-icon\n            >\n            <ox-popup id=\"sorter-control\">\n              <ox-sorters-control> </ox-sorters-control>\n            </ox-popup>\n          </div>\n\n          <ox-record-creator id=\"add\" light-popup>\n            <button><md-icon>add</md-icon></button>\n          </ox-record-creator>\n        </div>\n      </div>\n    </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  config\n}\n"]}

package/dist/stories/tree-column.stories.d.ts

@@ -12,6 +12,10 @@ declare const _default: {
         config: {
             control: string;
         };
+        theme: {
+            control: string;
+            options: string[];
+        };
     };
 };
 export default _default;
@@ -22,5 +26,6 @@ interface Story<T> {
 }
 interface ArgTypes {
     config: object;
+    theme: 'light' | 'dark';
 }
 export declare const Regular: Story<ArgTypes>;

package/dist/stories/tree-column.stories.js

@@ -5,6 +5,7 @@ import '../src/record-view/record-creator.js';
 import '@operato/popup/ox-popup-list.js';
 import '@material/web/icon/icon.js';
 import { html } from 'lit';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
 import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles';
 const fetchHandler = async ({ page, limit }) => {
     var total = 120993;
@@ -183,10 +184,18 @@ export default {
     title: 'tree column',
     component: 'ox-grist',
     argTypes: {
-        config: { control: 'object' }
+        config: { control: 'object' },
+        theme: { control: 'select', options: ['light', 'dark'] }
     }
 };
-const Template = ({ config }) => html ` <link
+const Template = ({ config, theme = 'light' }) => 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"
     />
@@ -199,15 +208,19 @@ const Template = ({ config }) => html ` <link
       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;
@@ -224,31 +237,31 @@ const Template = ({ config }) => html ` <link
       .fetchHandler=${fetchHandler}
       @filters-change=${(e) => console.log('filters', e.target.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) => {
+          <div id="sorters">
+            Sort
+            <md-icon
+              @click=${(e) => {
     const target = e.currentTarget;
     target.closest('#sorters').querySelector('#sorter-control').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>
+              >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>`;
 export const Regular = Template.bind({});

package/dist/stories/tree-column.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-column.stories.js","sourceRoot":"","sources":["../../stories/tree-column.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '../src/record-view/record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\nimport {\n  ColumnConfig,\n  FetchHandler,\n  GristClassifier,\n  GristEventHandlerSet,\n  GristRecord,\n  ValidationCallback\n} from '../src/types.js'\n\nconst fetchHandler: FetchHandler = async ({ page, limit }) => {\n  var total = 120993\n  var start = (page! - 1) * limit!\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  var records = Array(limit! * page! > total ? total % limit! : limit)\n    .fill('')\n    .map((item, idx) => {\n      return {\n        id: String(idx),\n        name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n        description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n        active: Math.round(Math.random() * 2) % 2 ? true : false,\n        accval: Math.random(),\n        createdAt: Date.now(),\n        updatedAt: Date.now(),\n        children: [\n          ...Array.from({ length: 3 }, (_, idx) => {\n            return {\n              id: `sub:${idx}`,\n              name: 'subitem' + idx,\n              description: 'sub items...',\n              active: Math.round(Math.random() * 2) % 2 ? true : false,\n              accval: Math.random(),\n              children: [\n                ...Array.from({ length: 3 }, (_, idx2) => {\n                  return {\n                    id: `sub-sub:${idx}:${idx2}`,\n                    name: 'sub-subitem:' + idx2,\n                    description: 'sub sub items...',\n                    active: Math.round(Math.random() * 2) % 2 ? true : false,\n                    accval: Math.random(),\n                    children: [],\n                    createdAt: Date.now(),\n                    updatedAt: Date.now()\n                  }\n                })\n              ],\n              createdAt: Date.now(),\n              updatedAt: Date.now()\n            }\n          })\n        ]\n      }\n    })\n\n  return {\n    total,\n    records\n  }\n}\n\nconst config = {\n  list: {\n    thumbnail: 'thumbnail',\n    fields: ['name', 'description'],\n    details: ['role', 'email']\n  },\n  columns: [\n    {\n      type: 'gutter',\n      gutterName: 'dirty',\n      fixed: true\n    },\n    // {\n    //   type: 'gutter',\n    //   gutterName: 'sequence',\n    //   fixed: true\n    // },\n    {\n      type: 'tree',\n      name: 'name',\n      label: true,\n      header: 'name',\n      record: {\n        editable: true,\n        options: {\n          selectable: false\n        }\n      },\n      filter: 'search',\n      sortable: true,\n      width: 200,\n      fixed: true,\n      handlers: {\n        contextmenu: 'contextmenu-tree-mutation'\n      }\n    },\n    {\n      type: 'gutter',\n      gutterName: 'row-selector',\n      multiple: true\n    },\n    {\n      type: 'string',\n      name: 'description',\n      header: 'description',\n      filter: 'search',\n      record: {\n        editable: true,\n        align: 'left'\n      },\n      width: 200\n    },\n    {\n      type: 'boolean',\n      name: 'active',\n      header: 'active',\n      record: {\n        editable: true\n      },\n      filter: true,\n      sortable: true,\n      width: 60\n    },\n    {\n      type: 'number',\n      name: 'accval',\n      label: true,\n      header: 'accval',\n      record: {\n        editable: true,\n        align: 'right'\n      },\n      accumulator: 'sum',\n      sortable: true,\n      width: 130\n    },\n    {\n      type: 'datetime',\n      name: 'updatedAt',\n      header: 'updated at',\n      record: {\n        editable: true,\n        defaultValue: {\n          name: 'now'\n        }\n      },\n      filter: 'between',\n      sortable: true,\n      width: 180\n    }\n  ],\n  rows: {\n    appendable: false,\n    selectable: {\n      multiple: true\n    },\n    handlers: {\n      // focus: 'select-row-toggle'\n    },\n    classifier: function (record, rowIndex) {\n      const rate = record['rate']\n      const emphasized =\n        rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined\n      return {\n        emphasized\n      }\n    } as GristClassifier,\n    accumulator: true\n  },\n  sorters: [\n    {\n      name: 'name',\n      desc: true\n    },\n    {\n      name: 'email'\n    }\n  ],\n  pagination: {\n    pages: [20, 30, 50, 100, 200]\n  },\n  tree: {\n    childrenProperty: 'children'\n  }\n}\n\nexport default {\n  title: 'tree column',\n  component: 'ox-grist',\n  argTypes: {\n    config: { control: 'object' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  config: object\n}\n\nconst Template: Story<ArgTypes> = ({ config }: ArgTypes) =>\n  html` <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n\n    <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/oops-theme.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n    <style>\n      ${CommonGristStyles.cssText}\n      ${CommonHeaderStyles.cssText}\n    </style>\n\n    <style>\n      ox-grist {\n        height: 600px;\n      }\n\n      ox-filters-form {\n        flex: 1;\n      }\n    </style>\n\n    <ox-grist\n      mode=\"GRID\"\n      .config=${config}\n      .fetchHandler=${fetchHandler}\n      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n    >\n      <div slot=\"headroom\">\n        <div id=\"filters\">\n          <ox-filters-form autofocus></ox-filters-form>\n        </div>\n\n        <div id=\"sorters\">\n          Sort\n          <md-icon\n            @click=${(e: Event) => {\n              const target = e.currentTarget as HTMLElement\n              ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n                right: 0,\n                top: target.offsetTop + target.offsetHeight\n              })\n            }}\n            >expand_more</md-icon\n          >\n          <ox-popup id=\"sorter-control\">\n            <ox-sorters-control> </ox-sorters-control>\n          </ox-popup>\n        </div>\n\n        <ox-record-creator id=\"add\" light-popup>\n          <button><md-icon>add</md-icon></button>\n        </ox-record-creator>\n      </div>\n    </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  config\n}\n"]}
+{"version":3,"file":"tree-column.stories.js","sourceRoot":"","sources":["../../stories/tree-column.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/index.js'\nimport '../src/filters/filters-form.js'\nimport '../src/sorters/sorters-control.js'\nimport '../src/record-view/record-creator.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\nimport {\n  ColumnConfig,\n  FetchHandler,\n  GristClassifier,\n  GristEventHandlerSet,\n  GristRecord,\n  ValidationCallback\n} from '../src/types.js'\n\nconst fetchHandler: FetchHandler = async ({ page, limit }) => {\n  var total = 120993\n  var start = (page! - 1) * limit!\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  var records = Array(limit! * page! > total ? total % limit! : limit)\n    .fill('')\n    .map((item, idx) => {\n      return {\n        id: String(idx),\n        name: idx % 2 ? `shnam-${start + idx + 1}` : `heartyoh-${start + idx + 1}`,\n        description: idx % 2 ? `hatiolabmanager${start + idx + 1}1234567890` : `hatiosea manager-${start + idx + 1}`,\n        active: Math.round(Math.random() * 2) % 2 ? true : false,\n        accval: Math.random(),\n        createdAt: Date.now(),\n        updatedAt: Date.now(),\n        children: [\n          ...Array.from({ length: 3 }, (_, idx) => {\n            return {\n              id: `sub:${idx}`,\n              name: 'subitem' + idx,\n              description: 'sub items...',\n              active: Math.round(Math.random() * 2) % 2 ? true : false,\n              accval: Math.random(),\n              children: [\n                ...Array.from({ length: 3 }, (_, idx2) => {\n                  return {\n                    id: `sub-sub:${idx}:${idx2}`,\n                    name: 'sub-subitem:' + idx2,\n                    description: 'sub sub items...',\n                    active: Math.round(Math.random() * 2) % 2 ? true : false,\n                    accval: Math.random(),\n                    children: [],\n                    createdAt: Date.now(),\n                    updatedAt: Date.now()\n                  }\n                })\n              ],\n              createdAt: Date.now(),\n              updatedAt: Date.now()\n            }\n          })\n        ]\n      }\n    })\n\n  return {\n    total,\n    records\n  }\n}\n\nconst config = {\n  list: {\n    thumbnail: 'thumbnail',\n    fields: ['name', 'description'],\n    details: ['role', 'email']\n  },\n  columns: [\n    {\n      type: 'gutter',\n      gutterName: 'dirty',\n      fixed: true\n    },\n    // {\n    //   type: 'gutter',\n    //   gutterName: 'sequence',\n    //   fixed: true\n    // },\n    {\n      type: 'tree',\n      name: 'name',\n      label: true,\n      header: 'name',\n      record: {\n        editable: true,\n        options: {\n          selectable: false\n        }\n      },\n      filter: 'search',\n      sortable: true,\n      width: 200,\n      fixed: true,\n      handlers: {\n        contextmenu: 'contextmenu-tree-mutation'\n      }\n    },\n    {\n      type: 'gutter',\n      gutterName: 'row-selector',\n      multiple: true\n    },\n    {\n      type: 'string',\n      name: 'description',\n      header: 'description',\n      filter: 'search',\n      record: {\n        editable: true,\n        align: 'left'\n      },\n      width: 200\n    },\n    {\n      type: 'boolean',\n      name: 'active',\n      header: 'active',\n      record: {\n        editable: true\n      },\n      filter: true,\n      sortable: true,\n      width: 60\n    },\n    {\n      type: 'number',\n      name: 'accval',\n      label: true,\n      header: 'accval',\n      record: {\n        editable: true,\n        align: 'right'\n      },\n      accumulator: 'sum',\n      sortable: true,\n      width: 130\n    },\n    {\n      type: 'datetime',\n      name: 'updatedAt',\n      header: 'updated at',\n      record: {\n        editable: true,\n        defaultValue: {\n          name: 'now'\n        }\n      },\n      filter: 'between',\n      sortable: true,\n      width: 180\n    }\n  ],\n  rows: {\n    appendable: false,\n    selectable: {\n      multiple: true\n    },\n    handlers: {\n      // focus: 'select-row-toggle'\n    },\n    classifier: function (record, rowIndex) {\n      const rate = record['rate']\n      const emphasized =\n        rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined\n      return {\n        emphasized\n      }\n    } as GristClassifier,\n    accumulator: true\n  },\n  sorters: [\n    {\n      name: 'name',\n      desc: true\n    },\n    {\n      name: 'email'\n    }\n  ],\n  pagination: {\n    pages: [20, 30, 50, 100, 200]\n  },\n  tree: {\n    childrenProperty: 'children'\n  }\n}\n\nexport default {\n  title: 'tree column',\n  component: 'ox-grist',\n  argTypes: {\n    config: { control: 'object' },\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  config: object\n  theme: 'light' | 'dark'\n}\n\nconst Template: Story<ArgTypes> = ({ config, theme = 'light' }: ArgTypes) =>\n  html` <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n    <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n    <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n      rel=\"stylesheet\"\n    />\n\n    <style>\n      ${MDTypeScaleStyles.cssText}\n    </style>\n\n    <style>\n      ${CommonGristStyles.cssText}\n      ${CommonHeaderStyles.cssText}\n    </style>\n\n    <script>\n      document.body.classList.add('${theme}')\n    </script>\n\n    <style>\n      ox-grist {\n        height: 600px;\n      }\n\n      ox-filters-form {\n        flex: 1;\n      }\n    </style>\n\n    <ox-grist\n      mode=\"GRID\"\n      .config=${config}\n      .fetchHandler=${fetchHandler}\n      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n    >\n      <div slot=\"headroom\" class=\"header\">\n        <div class=\"filters\">\n          <ox-filters-form autofocus></ox-filters-form>\n\n          <div id=\"sorters\">\n            Sort\n            <md-icon\n              @click=${(e: Event) => {\n                const target = e.currentTarget as HTMLElement\n                ;(target.closest('#sorters')!.querySelector('#sorter-control') as any).open({\n                  right: 0,\n                  top: target.offsetTop + target.offsetHeight\n                })\n              }}\n              >expand_more</md-icon\n            >\n            <ox-popup id=\"sorter-control\">\n              <ox-sorters-control> </ox-sorters-control>\n            </ox-popup>\n          </div>\n\n          <ox-record-creator id=\"add\" light-popup>\n            <button><md-icon>add</md-icon></button>\n          </ox-record-creator>\n        </div>\n      </div>\n    </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  config\n}\n"]}