@operato/data-grist 9.0.0-beta.56 → 9.0.0-beta.61

package/dist/stories/append-position.stories.js

@@ -1,183 +0,0 @@
-import '../src/data-grist.js';
-import { html } from 'lit';
-import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-export default {
-    title: 'Data-grist/append record position',
-    component: 'ox-grist',
-    argTypes: {}
-};
-const fetchHandler = async (param) => {
-    const { page = 1, limit = 10 } = param;
-    const total = 10;
-    const start = (page - 1) * limit;
-    await new Promise(resolve => setTimeout(resolve, 500));
-    return {
-        total,
-        records: Array(Math.min(limit, total - start))
-            .fill('')
-            .map((item, idx) => {
-            return {
-                id: String(start + idx + 1),
-                name: `Record ${start + idx + 1}`,
-                description: `Description for record ${start + idx + 1}`,
-                price: Math.round(Math.random() * 100000),
-                qty: Math.round(Math.random() * 10)
-            };
-        })
-    };
-};
-const config = {
-    list: {
-        fields: ['name', 'description']
-    },
-    pagination: {
-        infinite: false,
-        page: 1,
-        limit: 5
-    },
-    rows: {
-        selectable: {
-            multiple: true
-        },
-        appendable: false,
-        editable: true,
-        classifier: () => { },
-        handlers: {},
-        groups: [],
-        totals: []
-    },
-    columns: [
-        {
-            type: 'gutter',
-            gutterName: 'sequence'
-        },
-        {
-            type: 'gutter',
-            gutterName: 'row-selector',
-            multiple: true
-        },
-        {
-            type: 'string',
-            name: 'id',
-            hidden: true
-        },
-        {
-            type: 'string',
-            name: 'name',
-            header: '이름',
-            record: {
-                editable: true
-            },
-            sortable: true,
-            width: 180
-        },
-        {
-            type: 'string',
-            name: 'description',
-            header: '설명',
-            record: {
-                editable: true
-            },
-            sortable: true,
-            width: 200
-        },
-        {
-            type: 'number',
-            name: 'price',
-            header: '가격',
-            record: {
-                editable: true,
-                align: 'right'
-            },
-            sortable: true,
-            width: 100
-        },
-        {
-            type: 'number',
-            name: 'qty',
-            header: '수량',
-            record: {
-                editable: true,
-                align: 'right'
-            },
-            sortable: true,
-            width: 80
-        }
-    ]
-};
-export const AddRecordToTop = () => {
-    return 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>
-      .button-container {
-        margin-bottom: 16px;
-      }
-
-      button {
-        padding: 8px 16px;
-        background-color: var(--md-sys-color-primary);
-        color: var(--md-sys-color-on-primary);
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        font-weight: 500;
-      }
-
-      button:hover {
-        background-color: var(--md-sys-color-primary-container);
-        color: var(--md-sys-color-on-primary-container);
-      }
-    </style>
-
-    <style>
-      ${MDTypeScaleStyles.cssText}
-    </style>
-
-    <style>
-      ${CommonGristStyles.cssText}
-      ${CommonHeaderStyles.cssText}
-    </style>
-
-    <h2>addRecordToTop 메서드 사용 예시</h2>
-    <p>버튼을 클릭하면 새 레코드가 그리드 최상단에 추가됩니다.</p>
-
-    <ox-grist .mode=${'GRID'} .config=${config} .fetchHandler=${fetchHandler}>
-      <div class="button-container" slot="headroom">
-        <button
-          @click=${(e) => {
-        const grist = e.target.closest('ox-grist');
-        grist.addRecordToTop({
-            name: `신규 레코드 ${new Date().toLocaleTimeString()}`,
-            description: '상단에 추가된 레코드',
-            price: Math.round(Math.random() * 100000),
-            qty: Math.round(Math.random() * 10)
-        });
-    }}
-        >
-          상단에 행 추가
-        </button>
-      </div>
-    </ox-grist>
-  `;
-};
-//# sourceMappingURL=append-position.stories.js.map

package/dist/stories/append-position.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"append-position.stories.js","sourceRoot":"","sources":["../../stories/append-position.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/data-grist.js'\n\nimport { html } from 'lit'\nimport { FetchHandler, FetchOption, GristRecord } from '../src/types.js'\n\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\nimport { DataGrist } from '../src/data-grist.js'\n\nexport default {\n  title: 'Data-grist/append record position',\n  component: 'ox-grist',\n  argTypes: {}\n}\n\nconst fetchHandler: FetchHandler = async (param: FetchOption) => {\n  const { page = 1, limit = 10 } = param\n  const total = 10\n  const start = (page - 1) * limit\n\n  await new Promise(resolve => setTimeout(resolve, 500))\n\n  return {\n    total,\n    records: Array(Math.min(limit, total - start))\n      .fill('')\n      .map((item, idx) => {\n        return {\n          id: String(start + idx + 1),\n          name: `Record ${start + idx + 1}`,\n          description: `Description for record ${start + idx + 1}`,\n          price: Math.round(Math.random() * 100000),\n          qty: Math.round(Math.random() * 10)\n        } as GristRecord\n      })\n  }\n}\n\nconst config = {\n  list: {\n    fields: ['name', 'description']\n  },\n  pagination: {\n    infinite: false,\n    page: 1,\n    limit: 5\n  },\n  rows: {\n    selectable: {\n      multiple: true\n    },\n    appendable: false,\n    editable: true,\n    classifier: () => {},\n    handlers: {},\n    groups: [],\n    totals: []\n  },\n  columns: [\n    {\n      type: 'gutter',\n      gutterName: 'sequence'\n    },\n    {\n      type: 'gutter',\n      gutterName: 'row-selector',\n      multiple: true\n    },\n    {\n      type: 'string',\n      name: 'id',\n      hidden: true\n    },\n    {\n      type: 'string',\n      name: 'name',\n      header: '이름',\n      record: {\n        editable: true\n      },\n      sortable: true,\n      width: 180\n    },\n    {\n      type: 'string',\n      name: 'description',\n      header: '설명',\n      record: {\n        editable: true\n      },\n      sortable: true,\n      width: 200\n    },\n    {\n      type: 'number',\n      name: 'price',\n      header: '가격',\n      record: {\n        editable: true,\n        align: 'right'\n      },\n      sortable: true,\n      width: 100\n    },\n    {\n      type: 'number',\n      name: 'qty',\n      header: '수량',\n      record: {\n        editable: true,\n        align: 'right'\n      },\n      sortable: true,\n      width: 80\n    }\n  ]\n}\n\nexport const AddRecordToTop = () => {\n  return html`\n    <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      .button-container {\n        margin-bottom: 16px;\n      }\n\n      button {\n        padding: 8px 16px;\n        background-color: var(--md-sys-color-primary);\n        color: var(--md-sys-color-on-primary);\n        border: none;\n        border-radius: 4px;\n        cursor: pointer;\n        font-weight: 500;\n      }\n\n      button:hover {\n        background-color: var(--md-sys-color-primary-container);\n        color: var(--md-sys-color-on-primary-container);\n      }\n    </style>\n\n    <style>\n      ${MDTypeScaleStyles.cssText}\n    </style>\n\n    <style>\n      ${CommonGristStyles.cssText}\n      ${CommonHeaderStyles.cssText}\n    </style>\n\n    <h2>addRecordToTop 메서드 사용 예시</h2>\n    <p>버튼을 클릭하면 새 레코드가 그리드 최상단에 추가됩니다.</p>\n\n    <ox-grist .mode=${'GRID'} .config=${config} .fetchHandler=${fetchHandler}>\n      <div class=\"button-container\" slot=\"headroom\">\n        <button\n          @click=${(e: Event) => {\n            const grist = (e.target as HTMLElement).closest('ox-grist') as DataGrist\n            grist.addRecordToTop({\n              name: `신규 레코드 ${new Date().toLocaleTimeString()}`,\n              description: '상단에 추가된 레코드',\n              price: Math.round(Math.random() * 100000),\n              qty: Math.round(Math.random() * 10)\n            })\n          }}\n        >\n          상단에 행 추가\n        </button>\n      </div>\n    </ox-grist>\n  `\n}\n"]}

package/dist/stories/barcode-input-filter.stories.d.ts

@@ -1,33 +0,0 @@
-import '../src/index.js';
-import '../src/filters/filters-form.js';
-import '../src/sorters/sorters-control.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: {
-        englishOnly: {
-            control: string;
-        };
-        selectAfterChange: {
-            control: string;
-        };
-        headerFilter: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    englishOnly: boolean;
-    selectAfterChange: boolean;
-    headerFilter: boolean;
-}
-export declare const Regular: Story<ArgTypes>;

package/dist/stories/barcode-input-filter.stories.js

@@ -1,185 +0,0 @@
-import '../src/index.js';
-import '../src/filters/filters-form.js';
-import '../src/sorters/sorters-control.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 ({ filters, page, limit }) => {
-    var total = 120993;
-    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}`,
-                createdAt: Date.now(),
-                updatedAt: Date.now()
-            };
-        })
-    };
-};
-function buildConfig({ englishOnly, selectAfterChange, headerFilter }) {
-    return {
-        list: {
-            fields: ['name', 'description'],
-            details: ['updatedAt', 'createdAt']
-        },
-        columns: [
-            {
-                type: 'gutter',
-                gutterName: 'sequence'
-            },
-            {
-                type: 'string',
-                name: 'id',
-                hidden: true
-            },
-            {
-                type: 'string',
-                name: 'name',
-                label: true,
-                header: 'name',
-                filter: {
-                    type: 'barcode',
-                    operator: 'eq',
-                    value: 'shnam',
-                    options: {
-                        englishOnly,
-                        selectAfterChange
-                    }
-                },
-                sortable: true,
-                width: 120
-            },
-            {
-                type: 'string',
-                name: 'description',
-                header: 'description',
-                filter: {
-                    operator: 'like',
-                    value: 'hahaha'
-                },
-                record: {
-                    align: 'left'
-                },
-                width: 200
-            },
-            {
-                type: 'datetime',
-                name: 'updatedAt',
-                header: 'updated at',
-                width: 180
-            },
-            {
-                type: 'datetime',
-                name: 'createdAt',
-                header: 'created at',
-                width: 180
-            }
-        ],
-        rows: {},
-        sorters: [
-            {
-                name: 'name',
-                desc: true
-            }
-        ],
-        filters: {
-            header: headerFilter
-        },
-        pagination: {
-            pages: [30, 50, 100, 200]
-        }
-    };
-}
-export default {
-    title: 'Data-grist/barcode input filter for ox-grist',
-    component: 'ox-grist',
-    argTypes: {
-        englishOnly: { control: 'boolean' },
-        selectAfterChange: { control: 'boolean' },
-        headerFilter: { control: 'boolean' }
-    }
-};
-const Template = ({ englishOnly, selectAfterChange, headerFilter }) => 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
-      .config=${buildConfig({ englishOnly, selectAfterChange, headerFilter })}
-      mode="GRID"
-      .fetchHandler=${fetchHandler}
-      @filters-change=${(e) => console.log('filters', e.target.filters)}
-    >
-      <div slot="headroom" class="header">
-        <div class="filters">
-          <ox-filters-form></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>
-        </div>
-      </div>
-    </ox-grist>`;
-export const Regular = Template.bind({});
-Regular.args = {
-    englishOnly: true,
-    selectAfterChange: true,
-    headerFilter: true
-};
-//# sourceMappingURL=barcode-input-filter.stories.js.map

package/dist/stories/barcode-input-filter.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"barcode-input-filter.stories.js","sourceRoot":"","sources":["../../stories/barcode-input-filter.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 '@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 { FetchHandler } from '../src/types.js'\n\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\nconst fetchHandler: FetchHandler = async ({ filters, page, limit }) => {\n  var total = 120993\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          createdAt: Date.now(),\n          updatedAt: Date.now()\n        }\n      })\n  }\n}\n\nfunction buildConfig({\n  englishOnly,\n  selectAfterChange,\n  headerFilter\n}: {\n  englishOnly: boolean\n  selectAfterChange: boolean\n  headerFilter: boolean\n}) {\n  return {\n    list: {\n      fields: ['name', 'description'],\n      details: ['updatedAt', 'createdAt']\n    },\n    columns: [\n      {\n        type: 'gutter',\n        gutterName: 'sequence'\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        filter: {\n          type: 'barcode',\n          operator: 'eq',\n          value: 'shnam',\n          options: {\n            englishOnly,\n            selectAfterChange\n          }\n        },\n        sortable: true,\n        width: 120\n      },\n      {\n        type: 'string',\n        name: 'description',\n        header: 'description',\n        filter: {\n          operator: 'like',\n          value: 'hahaha'\n        },\n        record: {\n          align: 'left'\n        },\n        width: 200\n      },\n      {\n        type: 'datetime',\n        name: 'updatedAt',\n        header: 'updated at',\n        width: 180\n      },\n      {\n        type: 'datetime',\n        name: 'createdAt',\n        header: 'created at',\n        width: 180\n      }\n    ],\n    rows: {},\n    sorters: [\n      {\n        name: 'name',\n        desc: true\n      }\n    ],\n    filters: {\n      header: headerFilter\n    },\n    pagination: {\n      pages: [30, 50, 100, 200]\n    }\n  }\n}\n\nexport default {\n  title: 'Data-grist/barcode input filter for ox-grist',\n  component: 'ox-grist',\n  argTypes: {\n    englishOnly: { control: 'boolean' },\n    selectAfterChange: { control: 'boolean' },\n    headerFilter: { 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  englishOnly: boolean\n  selectAfterChange: boolean\n  headerFilter: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ englishOnly, selectAfterChange, headerFilter }: 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      .config=${buildConfig({ englishOnly, selectAfterChange, headerFilter })}\n      mode=\"GRID\"\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></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        </div>\n      </div>\n    </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  englishOnly: true,\n  selectAfterChange: true,\n  headerFilter: true\n}\n"]}

package/dist/stories/bounded-select-filters.stories.d.ts

@@ -1,25 +0,0 @@
-import '../src/index.js';
-import '../src/filters/filters-form.js';
-import '../src/sorters/sorters-control.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: {
-        headerFilter: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    headerFilter: boolean;
-}
-export declare const Regular: Story<ArgTypes>;