@operato/data-grist 9.0.0-beta.7 → 9.0.0-beta.85

package/dist/stories/textarea.stories.js

@@ -1,229 +0,0 @@
-import '../src/index.js';
-import '../src/filters/filters-form.js';
-import '../src/sorters/sorters-control.js';
-import '../src/record-view/ox-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.js';
-import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles';
-const fetchHandler = async ({ page, limit }) => {
-    var total = 3;
-    var start = (page - 1) * limit;
-    await new Promise(resolve => setTimeout(resolve, 500));
-    return {
-        total,
-        records: Array(limit * page > total ? total % limit : limit)
-            .fill('')
-            .map((item, idx) => {
-            return {
-                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}`,
-                textarea: `
-long long long text
-long long long text
-long long long text
-long long long text
-long long long text white-space: pre-wrap;white-space: pre-wrap;white-space: pre-wrap;
-long long long text
-long long long text
-long long long text
-long long long text
-long long long text
-`,
-                createdAt: Date.now(),
-                updatedAt: Date.now()
-            };
-        })
-    };
-};
-const config = {
-    list: {
-        thumbnail: 'thumbnail',
-        fields: ['name', 'description'],
-        details: ['role', 'email']
-    },
-    columns: [
-        {
-            type: 'gutter',
-            gutterName: 'dirty'
-        },
-        {
-            type: 'gutter',
-            gutterName: 'sequence'
-        },
-        {
-            type: 'gutter',
-            gutterName: 'row-selector',
-            multiple: true
-        },
-        {
-            type: 'gutter',
-            gutterName: 'button',
-            icon: 'add',
-            title: 'add',
-            handlers: {
-                click: 'record-copy'
-            }
-        },
-        {
-            type: 'string',
-            name: 'id',
-            hidden: true
-        },
-        {
-            type: 'string',
-            name: 'name',
-            label: true,
-            header: 'name',
-            record: {
-                editable: true
-            },
-            filter: 'search',
-            sortable: true,
-            width: 120
-        },
-        {
-            type: 'string',
-            name: 'description',
-            header: 'description',
-            filter: 'search',
-            record: {
-                editable: true,
-                align: 'left'
-            },
-            width: 200
-        },
-        {
-            type: 'textarea',
-            name: 'textarea',
-            label: true,
-            header: 'textarea',
-            record: {
-                editable: true,
-                wide: true
-            },
-            filter: 'search',
-            sortable: true,
-            width: 130
-        },
-        {
-            type: 'datetime',
-            name: 'updatedAt',
-            header: 'updated at',
-            record: {
-                editable: true,
-                defaultValue: {
-                    name: 'now'
-                }
-            },
-            filter: 'between',
-            sortable: true,
-            width: 180
-        },
-        {
-            type: 'datetime',
-            name: 'createdAt',
-            header: 'created at',
-            record: {
-                editable: false
-            },
-            sortable: true,
-            width: 180
-        }
-    ],
-    rows: {
-        selectable: {
-            multiple: false
-        },
-        handlers: {
-            focus: 'select-row'
-        }
-    },
-    sorters: [
-        {
-            name: 'name',
-            desc: true
-        },
-        {
-            name: 'email'
-        }
-    ],
-    pagination: {
-        pages: [20, 30, 50, 100, 200]
-    }
-};
-export default {
-    title: 'textarea in ox-grist',
-    component: 'ox-grist',
-    argTypes: {
-        config: { control: 'object' },
-        mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },
-        urlParamsSensitive: { control: 'boolean' }
-    }
-};
-const Template = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }) => 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"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-
-    <style>
-      ${MDTypeScaleStyles.cssText}
-    </style>
-
-    <style>
-      ${CommonGristStyles.cssText} ${CommonHeaderStyles.cssText} #add {
-        margin-left: auto;
-      }
-    </style>
-
-    <style>
-      ox-grist {
-        height: 600px;
-      }
-
-      ox-filters-form {
-        flex: 1;
-      }
-    </style>
-
-    <ox-grist
-      .config=${config}
-      .mode=${mode}
-      .fetchHandler=${fetchHandler}
-      ?url-params-sensitive=${urlParamsSensitive}
-      @filters-change=${(e) => console.log('filters', e.target.filters)}
-    >
-      <div slot="headroom" class="header">
-        <div class="filters">
-          <ox-filters-form autofocus></ox-filters-form>
-
-          <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({});
-Regular.args = {
-    config,
-    fetchHandler,
-    mode: 'GRID'
-};
-//# sourceMappingURL=textarea.stories.js.map

package/dist/stories/textarea.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"textarea.stories.js","sourceRoot":"","sources":["../../stories/textarea.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/ox-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.js'\n\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\nimport {\n  ColumnConfig,\n  FetchHandler,\n  FetchOption,\n  GristClassifier,\n  GristEventHandlerSet,\n  GristRecord,\n  ValidationCallback\n} from '../src/types.js'\n\nconst fetchHandler: FetchHandler = async ({ page, limit }: FetchOption) => {\n  var total = 3\n  var start = (page! - 1) * limit!\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  return {\n    total,\n    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          textarea: `\nlong long long text\nlong long long text\nlong long long text\nlong long long text\nlong long long text white-space: pre-wrap;white-space: pre-wrap;white-space: pre-wrap;\nlong long long text\nlong long long text\nlong long long text\nlong long long text\nlong long long text\n`,\n          createdAt: Date.now(),\n          updatedAt: Date.now()\n        }\n      })\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    },\n    {\n      type: 'gutter',\n      gutterName: 'sequence'\n    },\n    {\n      type: 'gutter',\n      gutterName: 'row-selector',\n      multiple: true\n    },\n    {\n      type: 'gutter',\n      gutterName: 'button',\n      icon: 'add',\n      title: 'add',\n      handlers: {\n        click: 'record-copy'\n      }\n    },\n    {\n      type: 'string',\n      name: 'id',\n      hidden: true\n    },\n    {\n      type: 'string',\n      name: 'name',\n      label: true,\n      header: 'name',\n      record: {\n        editable: true\n      },\n      filter: 'search',\n      sortable: true,\n      width: 120\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: 'textarea',\n      name: 'textarea',\n      label: true,\n      header: 'textarea',\n      record: {\n        editable: true,\n        wide: true\n      },\n      filter: 'search',\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      type: 'datetime',\n      name: 'createdAt',\n      header: 'created at',\n      record: {\n        editable: false\n      },\n      sortable: true,\n      width: 180\n    }\n  ],\n  rows: {\n    selectable: {\n      multiple: false\n    },\n    handlers: {\n      focus: 'select-row'\n    }\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}\n\nexport default {\n  title: 'textarea in ox-grist',\n  component: 'ox-grist',\n  argTypes: {\n    config: { control: 'object' },\n    mode: { control: 'select', options: ['GRID', 'LIST', 'CARD'] },\n    urlParamsSensitive: { control: 'boolean' }\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  mode: 'GRID' | 'LIST' | 'CARD'\n  urlParamsSensitive: boolean\n  fetchHandler: FetchHandler\n}\n\nconst Template: Story<ArgTypes> = ({ config, mode = 'GRID', urlParamsSensitive = false, fetchHandler }: 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} ${CommonHeaderStyles.cssText} #add {\n        margin-left: auto;\n      }\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      .config=${config}\n      .mode=${mode}\n      .fetchHandler=${fetchHandler}\n      ?url-params-sensitive=${urlParamsSensitive}\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          <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  fetchHandler,\n  mode: 'GRID'\n}\n"]}

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

@@ -1,26 +0,0 @@
-import '../src/index.js';
-import '../src/filters/filters-form.js';
-import '../src/sorters/sorters-control.js';
-import '../src/record-view/ox-record-creator.js';
-import '@operato/popup/ox-popup-list.js';
-import '@material/web/icon/icon.js';
-import { TemplateResult } from 'lit';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        config: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    config: object;
-}
-export declare const Regular: Story<ArgTypes>;

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

@@ -1,267 +0,0 @@
-import '../src/index.js';
-import '../src/filters/filters-form.js';
-import '../src/sorters/sorters-control.js';
-import '../src/record-view/ox-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.js';
-import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles';
-const fetchHandler = async ({ page, limit }) => {
-    var total = 120993;
-    var start = (page - 1) * limit;
-    await new Promise(resolve => setTimeout(resolve, 500));
-    var records = Array(limit * page > total ? total % limit : limit)
-        .fill('')
-        .map((item, idx) => {
-        return {
-            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}`,
-            active: Math.round(Math.random() * 2) % 2 ? true : false,
-            accval: Math.random(),
-            createdAt: Date.now(),
-            updatedAt: Date.now(),
-            children: [
-                ...Array.from({ length: 3 }, (_, idx) => {
-                    return {
-                        id: `sub:${idx}`,
-                        name: 'subitem' + idx,
-                        description: 'sub items...',
-                        active: Math.round(Math.random() * 2) % 2 ? true : false,
-                        accval: Math.random(),
-                        children: [
-                            ...Array.from({ length: 3 }, (_, idx2) => {
-                                return {
-                                    id: `sub-sub:${idx}:${idx2}`,
-                                    name: 'sub-subitem:' + idx2,
-                                    description: 'sub sub items...',
-                                    active: Math.round(Math.random() * 2) % 2 ? true : false,
-                                    accval: Math.random(),
-                                    children: [],
-                                    createdAt: Date.now(),
-                                    updatedAt: Date.now()
-                                };
-                            })
-                        ],
-                        createdAt: Date.now(),
-                        updatedAt: Date.now()
-                    };
-                })
-            ]
-        };
-    });
-    return {
-        total,
-        records
-    };
-};
-const config = {
-    list: {
-        thumbnail: 'thumbnail',
-        fields: ['name', 'description'],
-        details: ['role', 'email']
-    },
-    columns: [
-        {
-            type: 'gutter',
-            gutterName: 'dirty',
-            fixed: true
-        },
-        // {
-        //   type: 'gutter',
-        //   gutterName: 'sequence',
-        //   fixed: true
-        // },
-        {
-            type: 'tree',
-            name: 'name',
-            label: true,
-            header: 'name',
-            record: {
-                editable: true,
-                options: {
-                    selectable: true /* with checkbox */
-                }
-            },
-            filter: 'search',
-            sortable: true,
-            width: 200,
-            fixed: true,
-            handlers: {
-                contextmenu: 'contextmenu-tree-mutation'
-            }
-        },
-        {
-            type: 'gutter',
-            gutterName: 'row-selector',
-            multiple: true
-        },
-        {
-            type: 'string',
-            name: 'description',
-            header: 'description',
-            filter: 'search',
-            record: {
-                editable: true,
-                align: 'left'
-            },
-            width: 200
-        },
-        {
-            type: 'boolean',
-            name: 'active',
-            header: 'active',
-            record: {
-                editable: true
-            },
-            filter: true,
-            sortable: true,
-            width: 60
-        },
-        {
-            type: 'number',
-            name: 'accval',
-            label: true,
-            header: 'accval',
-            record: {
-                editable: true,
-                align: 'right'
-            },
-            accumulator: 'sum',
-            sortable: true,
-            width: 130
-        },
-        {
-            type: 'datetime',
-            name: 'updatedAt',
-            header: 'updated at',
-            record: {
-                editable: true,
-                defaultValue: {
-                    name: 'now'
-                }
-            },
-            filter: 'between',
-            sortable: true,
-            width: 180
-        }
-    ],
-    rows: {
-        appendable: false,
-        selectable: {
-            multiple: true
-        },
-        handlers: {
-        // focus: 'select-row-toggle'
-        },
-        classifier: function (record, rowIndex) {
-            const rate = record['rate'];
-            const emphasized = rate < 10 ? ['black', 'white'] : rate < 25 ? ['yellow', 'blue'] : rate < 40 ? ['cyan', 'red'] : undefined;
-            return {
-                emphasized
-            };
-        },
-        accumulator: true
-    },
-    sorters: [
-        {
-            name: 'name',
-            desc: true
-        },
-        {
-            name: 'email'
-        }
-    ],
-    pagination: {
-        pages: [20, 30, 50, 100, 200]
-    },
-    tree: {
-        childrenProperty: 'children',
-        expanded: true
-    }
-};
-export default {
-    title: 'tree column with checkbox',
-    component: 'ox-grist',
-    argTypes: {
-        config: { control: 'object' }
-    }
-};
-const Template = ({ config }) => 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"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-
-    <style>
-      ${MDTypeScaleStyles.cssText}
-    </style>
-
-    <style>
-      ${CommonGristStyles.cssText}
-      ${CommonHeaderStyles.cssText}
-    </style>
-
-    <style>
-      ox-grist {
-        height: 600px;
-      }
-
-      ox-filters-form {
-        flex: 1;
-      }
-    </style>
-
-    <ox-grist
-      mode="GRID"
-      .config=${config}
-      .fetchHandler=${fetchHandler}
-      @filters-change=${(e) => console.log('filters', e.target.filters)}
-    >
-      <div slot="headroom" class="header">
-        <div class="filters">
-          <ox-filters-form autofocus></ox-filters-form>
-
-          <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>
-
-          <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({});
-Regular.args = {
-    config
-};
-//# sourceMappingURL=tree-column-with-checkbox.stories.js.map

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

@@ -1 +0,0 @@
-{"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/ox-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.js'\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 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    <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

@@ -1,26 +0,0 @@
-import '../src/index.js';
-import '../src/filters/filters-form.js';
-import '../src/sorters/sorters-control.js';
-import '../src/record-view/ox-record-creator.js';
-import '@operato/popup/ox-popup-list.js';
-import '@material/web/icon/icon.js';
-import { TemplateResult } from 'lit';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        config: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    config: object;
-}
-export declare const Regular: Story<ArgTypes>;