@operato/data-grist 1.11.7 → 1.11.9

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

@@ -1,310 +0,0 @@
-import '../src/index.js';
-import '../src/filters/filters-form.js';
-import '../src/sorters/sorters-control.js';
-import '../src/record-view/record-creator.js';
-import '@operato/popup/ox-popup-list.js';
-import '@material/mwc-icon';
-import { html } from 'lit';
-function flattenTree(tree, __parent__ = null, __depth__ = 0) {
-    return tree.reduce((acc, node) => {
-        const newNode = { ...node, __parent__, __depth__ };
-        if (newNode.children && !node.__collapsed__) {
-            const children = flattenTree(newNode.children, newNode, __depth__ + 1);
-            console.log(children);
-            return acc.concat(newNode, ...((children === null || children === void 0 ? void 0 : children.length) > 0 ? children : []));
-        }
-        return acc.concat(newNode);
-    }, []);
-}
-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,
-            createdAt: Date.now(),
-            updatedAt: Date.now(),
-            children: [
-                ...Array.from({ length: 3 }, (_, idx) => {
-                    return {
-                        id: '1:' + String(idx),
-                        name: 'subitem' + idx,
-                        description: 'sub items...',
-                        active: Math.round(Math.random() * 2) % 2 ? true : false,
-                        children: [],
-                        createdAt: Date.now(),
-                        updatedAt: Date.now()
-                    };
-                })
-            ],
-            __collapsed__: false
-        };
-    });
-    return {
-        total,
-        records: flattenTree(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: false,
-                childrenProperty: 'children'
-            },
-            filter: 'search',
-            sortable: true,
-            width: 120,
-            fixed: true
-        },
-        {
-            type: 'string',
-            name: 'description',
-            header: 'description',
-            filter: 'search',
-            record: {
-                editable: true,
-                align: 'left'
-            },
-            width: 200,
-            handlers: {
-                click: (columns, data, column, record, rowIndex, target) => {
-                    alert(`${column.name} ${record[column.name]}, row : ${rowIndex}`);
-                }
-            }
-        },
-        {
-            type: 'boolean',
-            name: 'active',
-            header: 'active',
-            record: {
-                editable: true
-            },
-            filter: true,
-            handlers: {
-                dblclick: () => {
-                    const grist = document.querySelector('ox-grist');
-                    console.log(grist.dirtyRecords);
-                }
-            },
-            sortable: true,
-            width: 60
-        },
-        {
-            type: 'datetime',
-            name: 'updatedAt',
-            header: 'updated at',
-            record: {
-                editable: true,
-                defaultValue: {
-                    name: 'now'
-                }
-            },
-            filter: 'between',
-            sortable: true,
-            width: 180
-        }
-    ],
-    rows: {
-        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
-            };
-        }
-    },
-    sorters: [
-        {
-            name: 'name',
-            desc: true
-        },
-        {
-            name: 'email'
-        }
-    ],
-    pagination: {
-        pages: [20, 30, 50, 100, 200]
-    }
-};
-export default {
-    title: 'tree column',
-    component: 'ox-grist',
-    argTypes: {
-        config: { control: 'object' }
-    }
-};
-const Template = ({ config }) => html ` <link
-    href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
-    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>
-    [slot='headroom'] {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      padding: var(--padding-default) var(--padding-wide);
-      background-color: var(--theme-white-color);
-      box-shadow: var(--box-shadow);
-
-      --mdc-icon-size: 24px;
-    }
-    #sorters mwc-icon,
-    #modes mwc-icon {
-      --mdc-icon-size: 18px;
-    }
-    #sorters {
-      margin-left: auto;
-      margin-right: var(--margin-default);
-      padding-left: var(--padding-narrow);
-      border-bottom: var(--border-dark-color);
-      position: relative;
-      color: var(--secondary-color);
-      font-size: var(--fontsize-default);
-      user-select: none;
-    }
-
-    #sorters > * {
-      padding: var(--padding-narrow);
-      vertical-align: middle;
-    }
-
-    #modes > * {
-      padding: var(--padding-narrow);
-      opacity: 0.5;
-      color: var(--primary-text-color);
-      cursor: pointer;
-    }
-
-    #modes > mwc-icon[active] {
-      border-radius: 9px;
-      background-color: rgba(var(--primary-color-rgb), 0.05);
-      opacity: 1;
-      color: var(--secondary-text-color);
-      cursor: default;
-    }
-
-    #modes > mwc-icon:hover {
-      opacity: 1;
-      color: var(--secondary-text-color);
-    }
-
-    #add {
-      width: 50px;
-      text-align: right;
-    }
-
-    #add button {
-      background-color: var(--primary-color);
-      border: 0;
-      border-radius: 50%;
-      padding: 5px;
-      width: 36px;
-      height: 36px;
-      cursor: pointer;
-    }
-
-    #add button:hover {
-      background-color: var(--focus-background-color);
-      box-shadow: var(--box-shadow);
-    }
-
-    #add button mwc-icon {
-      font-size: 2em;
-      color: var(--theme-white-color);
-    }
-
-    #filters {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    #filters * {
-      margin-right: var(--margin-default);
-    }
-
-    @media only screen and (max-width: 460px) {
-      #filters {
-        flex-direction: column;
-      }
-
-      #modes {
-        display: none;
-      }
-    }
-  </style>
-
-  <ox-grist
-    mode="GRID"
-    .config=${config}
-    .fetchHandler=${fetchHandler}
-    @filters-change=${(e) => console.log('filters', e.target.filters)}
-  >
-    <div slot="headroom">
-      <div id="filters">
-        <ox-filters-form autofocus></ox-filters-form>
-      </div>
-
-      <div id="sorters">
-        Sort
-        <mwc-icon
-          @click=${(e) => {
-    const target = e.currentTarget;
-    target.closest('#sorters').querySelector('#sorter-control').open({
-        right: 0,
-        top: target.offsetTop + target.offsetHeight
-    });
-}}
-          >expand_more</mwc-icon
-        >
-        <ox-popup id="sorter-control">
-          <ox-sorters-control> </ox-sorters-control>
-        </ox-popup>
-      </div>
-
-      <ox-record-creator id="add" light-popup>
-        <button><mwc-icon>add</mwc-icon></button>
-      </ox-record-creator>
-    </div>
-  </ox-grist>`;
-export const Regular = Template.bind({});
-Regular.args = {
-    config
-};
-//# sourceMappingURL=tree-column.stories.js.map

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

@@ -1 +0,0 @@
-{"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/mwc-icon'\n\nimport { html, TemplateResult } from 'lit'\n\nimport {\n  ColumnConfig,\n  FetchHandler,\n  GristClassifier,\n  GristEventHandlerSet,\n  GristRecord,\n  ValidationCallback\n} from '../src/types.js'\n\nfunction flattenTree(tree: any[], __parent__ = null, __depth__ = 0): any[] {\n  return tree.reduce((acc, node) => {\n    const newNode = { ...node, __parent__, __depth__ }\n\n    if ((newNode.children as any[]) && !node.__collapsed__) {\n      const children = flattenTree(newNode.children, newNode, __depth__ + 1)\n      console.log(children)\n      return acc.concat(newNode, ...(children?.length > 0 ? children : []))\n    }\n\n    return acc.concat(newNode)\n  }, [])\n}\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        createdAt: Date.now(),\n        updatedAt: Date.now(),\n        children: [\n          ...Array.from({ length: 3 }, (_, idx) => {\n            return {\n              id: '1:' + String(idx),\n              name: 'subitem' + idx,\n              description: 'sub items...',\n              active: Math.round(Math.random() * 2) % 2 ? true : false,\n              children: [],\n              createdAt: Date.now(),\n              updatedAt: Date.now()\n            }\n          })\n        ],\n        __collapsed__: false\n      }\n    })\n\n  return {\n    total,\n    records: flattenTree(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: false,\n        childrenProperty: 'children'\n      },\n      filter: 'search',\n      sortable: true,\n      width: 120,\n      fixed: 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      handlers: {\n        click: (columns, data, column, record, rowIndex, target) => {\n          alert(`${column!.name} ${record![column!.name]}, row : ${rowIndex}`)\n        }\n      } as GristEventHandlerSet\n    },\n    {\n      type: 'boolean',\n      name: 'active',\n      header: 'active',\n      record: {\n        editable: true\n      },\n      filter: true,\n      handlers: {\n        dblclick: () => {\n          const grist = document.querySelector('ox-grist') as any\n          console.log(grist!.dirtyRecords)\n        }\n      },\n      sortable: true,\n      width: 60\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    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  },\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: '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) => html` <link\n    href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\"\n    rel=\"stylesheet\"\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    [slot='headroom'] {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: var(--padding-default) var(--padding-wide);\n      background-color: var(--theme-white-color);\n      box-shadow: var(--box-shadow);\n\n      --mdc-icon-size: 24px;\n    }\n    #sorters mwc-icon,\n    #modes mwc-icon {\n      --mdc-icon-size: 18px;\n    }\n    #sorters {\n      margin-left: auto;\n      margin-right: var(--margin-default);\n      padding-left: var(--padding-narrow);\n      border-bottom: var(--border-dark-color);\n      position: relative;\n      color: var(--secondary-color);\n      font-size: var(--fontsize-default);\n      user-select: none;\n    }\n\n    #sorters > * {\n      padding: var(--padding-narrow);\n      vertical-align: middle;\n    }\n\n    #modes > * {\n      padding: var(--padding-narrow);\n      opacity: 0.5;\n      color: var(--primary-text-color);\n      cursor: pointer;\n    }\n\n    #modes > mwc-icon[active] {\n      border-radius: 9px;\n      background-color: rgba(var(--primary-color-rgb), 0.05);\n      opacity: 1;\n      color: var(--secondary-text-color);\n      cursor: default;\n    }\n\n    #modes > mwc-icon:hover {\n      opacity: 1;\n      color: var(--secondary-text-color);\n    }\n\n    #add {\n      width: 50px;\n      text-align: right;\n    }\n\n    #add button {\n      background-color: var(--primary-color);\n      border: 0;\n      border-radius: 50%;\n      padding: 5px;\n      width: 36px;\n      height: 36px;\n      cursor: pointer;\n    }\n\n    #add button:hover {\n      background-color: var(--focus-background-color);\n      box-shadow: var(--box-shadow);\n    }\n\n    #add button mwc-icon {\n      font-size: 2em;\n      color: var(--theme-white-color);\n    }\n\n    #filters {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n\n    #filters * {\n      margin-right: var(--margin-default);\n    }\n\n    @media only screen and (max-width: 460px) {\n      #filters {\n        flex-direction: column;\n      }\n\n      #modes {\n        display: none;\n      }\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        <mwc-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</mwc-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><mwc-icon>add</mwc-icon></button>\n      </ox-record-creator>\n    </div>\n  </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  config\n}\n"]}