@operato/data-grist 2.0.0-alpha.13 → 2.0.0-alpha.131

package/dist/stories/bounded-select-record.stories.js

@@ -0,0 +1,267 @@
+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 { sleep } from '@operato/utils';
+import { CommonHeaderStyles, CommonGristStyles } from '@operato/styles';
+const fetchHandler = async ({ sorters = [], 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) => {
+            const warehouse = idx % 2 ? '01' : '02';
+            const zone = idx % 2 ? 'Z001' : 'Z002';
+            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}`,
+                warehouse,
+                zone,
+                location: `L${warehouse}-${zone}-0${(idx % 5) + 1}`,
+                createdAt: Date.now(),
+                updatedAt: Date.now()
+            };
+        })
+    };
+};
+function buildConfig({ 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: {
+                    operator: 'eq',
+                    value: 'shnam'
+                },
+                sortable: true,
+                width: 120
+            },
+            {
+                type: 'string',
+                name: 'description',
+                header: 'description',
+                record: {
+                    align: 'left'
+                },
+                width: 200
+            },
+            {
+                type: 'select',
+                name: 'warehouse',
+                header: 'warehouse',
+                filter: {
+                    operator: 'eq'
+                },
+                record: {
+                    align: 'left',
+                    editable: true,
+                    options: async (value, column, record, rowIndex, field) => {
+                        await sleep(1000); // 테스트를 위해서 강제로 1초 쉬기
+                        return [
+                            {
+                                display: '',
+                                value: ''
+                            }
+                        ].concat(WAREHOUSE.map(w => {
+                            return {
+                                display: w.name,
+                                value: w.id
+                            };
+                        }));
+                    }
+                },
+                width: 200
+            },
+            {
+                type: 'select',
+                name: 'zone',
+                header: 'zone',
+                filter: {
+                    operator: 'eq',
+                    boundTo: ['warehouse'],
+                    onchange: () => {
+                        console.log('warehousde filter value changed.');
+                    }
+                },
+                record: {
+                    align: 'left',
+                    editable: true,
+                    options: async (value, column, record, rowIndex, field) => {
+                        console.log('arguments', arguments);
+                        await sleep(1000); // 테스트를 위해서 강제로 1초 쉬기
+                        const warehouse = record.warehouse;
+                        console.log('warehouse', warehouse);
+                        const targetWH = warehouse && WAREHOUSE.find(w => w.id == warehouse);
+                        const zones = targetWH
+                            ? targetWH.zones
+                            : WAREHOUSE.reduce((sum, warehouse) => {
+                                sum = sum.concat(warehouse.zones);
+                                return sum;
+                            }, []);
+                        return [
+                            {
+                                display: '',
+                                value: ''
+                            }
+                        ].concat(zones.map((z) => {
+                            return {
+                                display: z.name,
+                                value: z.id
+                            };
+                        }));
+                    }
+                },
+                width: 200
+            },
+            {
+                type: 'select',
+                name: 'location',
+                header: 'location',
+                filter: {
+                    operator: 'eq',
+                    boundTo: ['warehouse', 'zone']
+                },
+                record: {
+                    align: 'left',
+                    editable: true,
+                    options: async (value, column, record, rowIndex, field) => {
+                        await sleep(1000); // 테스트를 위해서 강제로 1초 쉬기
+                        const warehouse = record.warehouse;
+                        const zone = record.zone;
+                        console.log('warehouse, zone', warehouse, zone);
+                        const targetWH = (warehouse && WAREHOUSE.find(w => w.id == warehouse)) || null;
+                        const targetZone = zone && (targetWH === null || targetWH === void 0 ? void 0 : targetWH.zones.find((z) => z.id == zone));
+                        return targetZone ? ['', ...targetZone.locations] : [];
+                    }
+                },
+                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]
+        }
+    };
+}
+const WAREHOUSE = [
+    {
+        id: '01',
+        name: '제 1 창고',
+        zones: [
+            {
+                id: 'Z001',
+                name: 'Zone 01-001',
+                locations: ['L01-001-01', 'L01-001-02', 'L01-001-03', 'L01-001-04', 'L01-001-05']
+            },
+            {
+                id: 'Z002',
+                name: 'Zone 01-002',
+                locations: ['L01-002-01', 'L01-002-02', 'L01-002-03', 'L01-002-04', 'L01-002-05']
+            }
+        ]
+    },
+    {
+        id: '02',
+        name: '제 2 창고',
+        zones: [
+            {
+                id: 'Z001',
+                name: 'Zone 02-001',
+                locations: ['L02-001-01', 'L02-001-02', 'L02-001-03', 'L02-001-04', 'L02-001-05']
+            },
+            {
+                id: 'Z002',
+                name: 'Zone 02-002',
+                locations: ['L02-002-01', 'L02-002-02', 'L02-002-03', 'L02-002-04', 'L02-002-05']
+            }
+        ]
+    }
+];
+export default {
+    title: 'bounded select record for ox-grist',
+    component: 'ox-grist',
+    argTypes: {
+        headerFilter: { control: 'boolean' }
+    }
+};
+const Template = ({ headerFilter }) => html ` <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"
+    />
+    <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>
+      ${CommonGristStyles.cssText}
+      ${CommonHeaderStyles.cssText}
+    </style>
+
+    <ox-grist
+      .config=${buildConfig({ headerFilter })}
+      mode="GRID"
+      .fetchHandler=${fetchHandler}
+      @filters-change=${(e) => console.log('filters', e.target.filters)}
+    >
+      <div slot="headroom">
+        <div id="filters">
+          <ox-filters-form></ox-filters-form>
+        </div>
+      </div>
+    </ox-grist>`;
+export const Regular = Template.bind({});
+Regular.args = {
+    headerFilter: true
+};
+//# sourceMappingURL=bounded-select-record.stories.js.map

package/dist/stories/bounded-select-record.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bounded-select-record.stories.js","sourceRoot":"","sources":["../../stories/bounded-select-record.stories.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAA;AACxB,OAAO,gCAAgC,CAAA;AACvC,OAAO,mCAAmC,CAAA;AAC1C,OAAO,iCAAiC,CAAA;AACxC,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAItC,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAGvE,MAAM,YAAY,GAAiB,KAAK,EAAE,EAAE,OAAO,GAAG,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;IAClF,IAAI,KAAK,GAAG,MAAM,CAAA;IAClB,IAAI,KAAK,GAAG,CAAC,IAAK,GAAG,CAAC,CAAC,GAAG,KAAM,CAAA;IAEhC,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAA;IAEtD,OAAO;QACL,KAAK;QACL,OAAO,EAAE,KAAK,CAAC,KAAM,GAAG,IAAK,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,KAAM,CAAC,CAAC,CAAC,KAAK,CAAC;aAC5D,IAAI,CAAC,EAAE,CAAC;aACR,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE;YACjB,MAAM,SAAS,GAAW,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;YAC/C,MAAM,IAAI,GAAW,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAA;YAE9C,OAAO;gBACL,EAAE,EAAE,MAAM,CAAC,GAAG,CAAC;gBACf,IAAI,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE;gBAC1E,WAAW,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,kBAAkB,KAAK,GAAG,GAAG,GAAG,CAAC,YAAY,CAAC,CAAC,CAAC,oBAAoB,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE;gBAC5G,SAAS;gBACT,IAAI;gBACJ,QAAQ,EAAE,IAAI,SAAS,IAAI,IAAI,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE;gBACnD,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;gBACrB,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;aACtB,CAAA;QACH,CAAC,CAAC;KACL,CAAA;AACH,CAAC,CAAA;AAED,SAAS,WAAW,CAAC,EAAE,YAAY,EAA6B;IAC9D,OAAO;QACL,IAAI,EAAE;YACJ,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC;YAC/B,OAAO,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC;SACpC;QACD,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,QAAQ;gBACd,UAAU,EAAE,UAAU;aACvB;YACD;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,IAAI;gBACV,MAAM,EAAE,IAAI;aACb;YACD;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,MAAM;gBACZ,KAAK,EAAE,IAAI;gBACX,MAAM,EAAE,MAAM;gBACd,MAAM,EAAE;oBACN,QAAQ,EAAE,IAAI;oBACd,KAAK,EAAE,OAAO;iBACf;gBACD,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,GAAG;aACX;YACD;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,aAAa;gBACnB,MAAM,EAAE,aAAa;gBACrB,MAAM,EAAE;oBACN,KAAK,EAAE,MAAM;iBACd;gBACD,KAAK,EAAE,GAAG;aACX;YACD;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,WAAW;gBACjB,MAAM,EAAE,WAAW;gBACnB,MAAM,EAAE;oBACN,QAAQ,EAAE,IAAI;iBACf;gBACD,MAAM,EAAE;oBACN,KAAK,EAAE,MAAM;oBACb,QAAQ,EAAE,IAAI;oBACd,OAAO,EAAE,KAAK,EACZ,KAAU,EACV,MAAoB,EACpB,MAAmB,EACnB,QAAgB,EAChB,KAAoB,EACK,EAAE;wBAC3B,MAAM,KAAK,CAAC,IAAI,CAAC,CAAA,CAAC,qBAAqB;wBACvC,OAAO;4BACL;gCACE,OAAO,EAAE,EAAE;gCACX,KAAK,EAAE,EAAE;6BACV;yBACF,CAAC,MAAM,CACN,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;4BAChB,OAAO;gCACL,OAAO,EAAE,CAAC,CAAC,IAAI;gCACf,KAAK,EAAE,CAAC,CAAC,EAAE;6BACZ,CAAA;wBACH,CAAC,CAAC,CACH,CAAA;oBACH,CAAC;iBACF;gBACD,KAAK,EAAE,GAAG;aACX;YACD;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,MAAM;gBACZ,MAAM,EAAE,MAAM;gBACd,MAAM,EAAE;oBACN,QAAQ,EAAE,IAAI;oBACd,OAAO,EAAE,CAAC,WAAW,CAAC;oBACtB,QAAQ,EAAE,GAAG,EAAE;wBACb,OAAO,CAAC,GAAG,CAAC,kCAAkC,CAAC,CAAA;oBACjD,CAAC;iBACF;gBACD,MAAM,EAAE;oBACN,KAAK,EAAE,MAAM;oBACb,QAAQ,EAAE,IAAI;oBACd,OAAO,EAAE,KAAK,EACZ,KAAU,EACV,MAAoB,EACpB,MAAmB,EACnB,QAAgB,EAChB,KAAoB,EACK,EAAE;wBAC3B,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;wBACnC,MAAM,KAAK,CAAC,IAAI,CAAC,CAAA,CAAC,qBAAqB;wBACvC,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAA;wBAClC,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;wBAEnC,MAAM,QAAQ,GAAG,SAAS,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,CAAC,CAAA;wBACpE,MAAM,KAAK,GAAG,QAAQ;4BACpB,CAAC,CAAC,QAAQ,CAAC,KAAK;4BAChB,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,SAAS,EAAE,EAAE;gCAClC,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;gCACjC,OAAO,GAAG,CAAA;4BACZ,CAAC,EAAE,EAAW,CAAC,CAAA;wBAEnB,OAAO;4BACL;gCACE,OAAO,EAAE,EAAE;gCACX,KAAK,EAAE,EAAE;6BACV;yBACF,CAAC,MAAM,CACN,KAAK,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,EAAE;4BACnB,OAAO;gCACL,OAAO,EAAE,CAAC,CAAC,IAAI;gCACf,KAAK,EAAE,CAAC,CAAC,EAAE;6BACZ,CAAA;wBACH,CAAC,CAAC,CACH,CAAA;oBACH,CAAC;iBACF;gBACD,KAAK,EAAE,GAAG;aACX;YACD;gBACE,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,UAAU;gBAChB,MAAM,EAAE,UAAU;gBAClB,MAAM,EAAE;oBACN,QAAQ,EAAE,IAAI;oBACd,OAAO,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC;iBAC/B;gBACD,MAAM,EAAE;oBACN,KAAK,EAAE,MAAM;oBACb,QAAQ,EAAE,IAAI;oBACd,OAAO,EAAE,KAAK,EACZ,KAAU,EACV,MAAoB,EACpB,MAAmB,EACnB,QAAgB,EAChB,KAAoB,EACK,EAAE;wBAC3B,MAAM,KAAK,CAAC,IAAI,CAAC,CAAA,CAAC,qBAAqB;wBACvC,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAA;wBAClC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;wBACxB,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,SAAS,EAAE,IAAI,CAAC,CAAA;wBAE/C,MAAM,QAAQ,GAAG,CAAC,SAAS,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,CAAC,CAAC,IAAI,IAAI,CAAA;wBAC9E,MAAM,UAAU,GAAG,IAAI,KAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,CAAA,CAAA;wBACzE,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;oBACxD,CAAC;iBACF;gBACD,KAAK,EAAE,GAAG;aACX;YACD;gBACE,IAAI,EAAE,UAAU;gBAChB,IAAI,EAAE,WAAW;gBACjB,MAAM,EAAE,YAAY;gBACpB,KAAK,EAAE,GAAG;aACX;YACD;gBACE,IAAI,EAAE,UAAU;gBAChB,IAAI,EAAE,WAAW;gBACjB,MAAM,EAAE,YAAY;gBACpB,KAAK,EAAE,GAAG;aACX;SACF;QACD,IAAI,EAAE,EAAE;QACR,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,IAAI;aACX;SACF;QACD,OAAO,EAAE;YACP,MAAM,EAAE,YAAY;SACrB;QACD,UAAU,EAAE;YACV,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC;SAC1B;KACF,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG;IAChB;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,MAAM;gBACV,IAAI,EAAE,aAAa;gBACnB,SAAS,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC;aAClF;YACD;gBACE,EAAE,EAAE,MAAM;gBACV,IAAI,EAAE,aAAa;gBACnB,SAAS,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC;aAClF;SACF;KACF;IACD;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,MAAM;gBACV,IAAI,EAAE,aAAa;gBACnB,SAAS,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC;aAClF;YACD;gBACE,EAAE,EAAE,MAAM;gBACV,IAAI,EAAE,aAAa;gBACnB,SAAS,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC;aAClF;SACF;KACF;CACF,CAAA;AAED,eAAe;IACb,KAAK,EAAE,oCAAoC;IAC3C,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACrC;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,YAAY,EAAY,EAAE,EAAE,CAC/D,IAAI,CAAA;;;;;;;;;;;;;;;;;QAiBE,iBAAiB,CAAC,OAAO;QACzB,kBAAkB,CAAC,OAAO;;;;gBAIlB,WAAW,CAAC,EAAE,YAAY,EAAE,CAAC;;sBAEvB,YAAY;wBACV,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,EAAG,CAAC,CAAC,MAAc,CAAC,OAAO,CAAC;;;;;;;gBAOvE,CAAA;AAEhB,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,YAAY,EAAE,IAAI;CACnB,CAAA","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 { sleep } from '@operato/utils'\n\nimport { ColumnConfig, FetchHandler, FieldEditor, GristRecord, SelectOption } from '../src/types.js'\n\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\nimport { DataGridField } from '../src/data-grid/data-grid-field.js'\n\nconst fetchHandler: FetchHandler = async ({ sorters = [], 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        const warehouse: string = idx % 2 ? '01' : '02'\n        const zone: string = idx % 2 ? 'Z001' : 'Z002'\n\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          warehouse,\n          zone,\n          location: `L${warehouse}-${zone}-0${(idx % 5) + 1}`,\n          createdAt: Date.now(),\n          updatedAt: Date.now()\n        }\n      })\n  }\n}\n\nfunction buildConfig({ headerFilter }: { headerFilter: boolean }) {\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          operator: 'eq',\n          value: 'shnam'\n        },\n        sortable: true,\n        width: 120\n      },\n      {\n        type: 'string',\n        name: 'description',\n        header: 'description',\n        record: {\n          align: 'left'\n        },\n        width: 200\n      },\n      {\n        type: 'select',\n        name: 'warehouse',\n        header: 'warehouse',\n        filter: {\n          operator: 'eq'\n        },\n        record: {\n          align: 'left',\n          editable: true,\n          options: async (\n            value: any,\n            column: ColumnConfig,\n            record: GristRecord,\n            rowIndex: number,\n            field: DataGridField\n          ): Promise<SelectOption[]> => {\n            await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n            return [\n              {\n                display: '',\n                value: ''\n              }\n            ].concat(\n              WAREHOUSE.map(w => {\n                return {\n                  display: w.name,\n                  value: w.id\n                }\n              })\n            )\n          }\n        },\n        width: 200\n      },\n      {\n        type: 'select',\n        name: 'zone',\n        header: 'zone',\n        filter: {\n          operator: 'eq',\n          boundTo: ['warehouse'],\n          onchange: () => {\n            console.log('warehousde filter value changed.')\n          }\n        },\n        record: {\n          align: 'left',\n          editable: true,\n          options: async (\n            value: any,\n            column: ColumnConfig,\n            record: GristRecord,\n            rowIndex: number,\n            field: DataGridField\n          ): Promise<SelectOption[]> => {\n            console.log('arguments', arguments)\n            await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n            const warehouse = record.warehouse\n            console.log('warehouse', warehouse)\n\n            const targetWH = warehouse && WAREHOUSE.find(w => w.id == warehouse)\n            const zones = targetWH\n              ? targetWH.zones\n              : WAREHOUSE.reduce((sum, warehouse) => {\n                  sum = sum.concat(warehouse.zones)\n                  return sum\n                }, [] as any[])\n\n            return [\n              {\n                display: '',\n                value: ''\n              }\n            ].concat(\n              zones.map((z: any) => {\n                return {\n                  display: z.name,\n                  value: z.id\n                }\n              })\n            )\n          }\n        },\n        width: 200\n      },\n      {\n        type: 'select',\n        name: 'location',\n        header: 'location',\n        filter: {\n          operator: 'eq',\n          boundTo: ['warehouse', 'zone']\n        },\n        record: {\n          align: 'left',\n          editable: true,\n          options: async (\n            value: any,\n            column: ColumnConfig,\n            record: GristRecord,\n            rowIndex: number,\n            field: DataGridField\n          ): Promise<SelectOption[]> => {\n            await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n            const warehouse = record.warehouse\n            const zone = record.zone\n            console.log('warehouse, zone', warehouse, zone)\n\n            const targetWH = (warehouse && WAREHOUSE.find(w => w.id == warehouse)) || null\n            const targetZone = zone && targetWH?.zones.find((z: any) => z.id == zone)\n            return targetZone ? ['', ...targetZone.locations] : []\n          }\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\nconst WAREHOUSE = [\n  {\n    id: '01',\n    name: '제 1 창고',\n    zones: [\n      {\n        id: 'Z001',\n        name: 'Zone 01-001',\n        locations: ['L01-001-01', 'L01-001-02', 'L01-001-03', 'L01-001-04', 'L01-001-05']\n      },\n      {\n        id: 'Z002',\n        name: 'Zone 01-002',\n        locations: ['L01-002-01', 'L01-002-02', 'L01-002-03', 'L01-002-04', 'L01-002-05']\n      }\n    ]\n  },\n  {\n    id: '02',\n    name: '제 2 창고',\n    zones: [\n      {\n        id: 'Z001',\n        name: 'Zone 02-001',\n        locations: ['L02-001-01', 'L02-001-02', 'L02-001-03', 'L02-001-04', 'L02-001-05']\n      },\n      {\n        id: 'Z002',\n        name: 'Zone 02-002',\n        locations: ['L02-002-01', 'L02-002-02', 'L02-002-03', 'L02-002-04', 'L02-002-05']\n      }\n    ]\n  }\n]\n\nexport default {\n  title: 'bounded select record for ox-grist',\n  component: 'ox-grist',\n  argTypes: {\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  headerFilter: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ headerFilter }: 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    <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    <ox-grist\n      .config=${buildConfig({ 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\">\n        <div id=\"filters\">\n          <ox-filters-form></ox-filters-form>\n        </div>\n      </div>\n    </ox-grist>`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  headerFilter: true\n}\n"]}

package/dist/stories/creatable-only-column.stories.d.ts

@@ -0,0 +1,25 @@
+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>;

package/dist/stories/creatable-only-column.stories.js

@@ -0,0 +1,211 @@
+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 { CommonHeaderStyles, CommonGristStyles } from '@operato/styles';
+const fetchHandler = async ({ sorters = [], filters, page, limit }) => {
+    var total = 5;
+    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}`,
+                number: idx,
+                float: 1.3,
+                date: '2023-09-20',
+                updatedAt: Date.now()
+            };
+        })
+    };
+};
+function buildConfig({ headerFilter }) {
+    return {
+        list: {
+            fields: ['name', 'description'],
+            details: ['updatedAt', 'createdAt']
+        },
+        columns: [
+            {
+                type: 'gutter',
+                gutterName: 'sequence'
+            },
+            {
+                type: 'string',
+                name: 'id',
+                hidden: true
+            },
+            {
+                type: 'gutter',
+                gutterName: 'button',
+                icon: 'add',
+                title: 'add',
+                handlers: {
+                    click: 'record-copy'
+                }
+            },
+            {
+                type: 'string',
+                name: 'name',
+                label: true,
+                header: 'name',
+                filter: 'search',
+                record: {
+                    editable: (value, column, record, rowIndex, field) => {
+                        return !record.id;
+                    }
+                },
+                sortable: true,
+                width: 120
+            },
+            {
+                type: 'string',
+                name: 'description',
+                header: 'description',
+                filter: 'search',
+                record: {
+                    align: 'left',
+                    editable: true
+                },
+                width: 200
+            },
+            {
+                type: 'checkbox',
+                name: 'chk',
+                header: 'chk',
+                record: {
+                    editable: true
+                },
+                width: 40
+            },
+            {
+                type: 'number',
+                name: 'number',
+                header: 'number',
+                record: {
+                    editable: true
+                },
+                width: 80
+            },
+            {
+                type: 'float',
+                name: 'float',
+                header: 'float',
+                record: {
+                    editable: true
+                },
+                width: 80
+            },
+            {
+                type: 'date',
+                name: 'date',
+                header: 'date',
+                width: 120
+            },
+            {
+                type: 'datetime',
+                name: 'updatedAt',
+                header: 'updated at',
+                width: 180
+            }
+        ],
+        rows: {
+            selectable: {
+                multiple: false
+            },
+            handlers: {
+                click: 'select-row'
+            },
+            appendable: true
+        },
+        sorters: [
+            {
+                name: 'name',
+                desc: true
+            }
+        ],
+        filters: {
+            header: headerFilter
+        },
+        pagination: {
+            pages: [30, 50, 100, 200]
+        }
+    };
+}
+/* Make the 'name' column editable only at the time of creation. */
+export default {
+    title: 'creatable only column for ox-grist',
+    component: 'ox-grist',
+    argTypes: {
+        headerFilter: { control: 'boolean' }
+    }
+};
+const Template = ({ headerFilter }) => html ` <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"
+    />
+
+    <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>
+      ${CommonGristStyles.cssText}
+      ${CommonHeaderStyles.cssText}
+    </style>
+
+    <ox-grist
+      .config=${buildConfig({ headerFilter })}
+      mode="GRID"
+      .fetchHandler=${fetchHandler}
+      @filters-change=${(e) => console.log('filters', e.target.filters)}
+      @field-change=${(e) => {
+    const { name, number, chk } = e.detail.record;
+    console.log(name, number, chk);
+}}
+    >
+      <div slot="headroom">
+        <div id="filters">
+          <ox-filters-form></ox-filters-form>
+        </div>
+
+        <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>
+    </ox-grist>`;
+export const Regular = Template.bind({});
+Regular.args = {};
+//# sourceMappingURL=creatable-only-column.stories.js.map

package/dist/stories/creatable-only-column.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"creatable-only-column.stories.js","sourceRoot":"","sources":["../../stories/creatable-only-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 '@operato/popup/ox-popup-list.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nimport { FetchHandler } from '../src/types.js'\nimport { CommonHeaderStyles, CommonGristStyles } from '@operato/styles'\n\nconst fetchHandler: FetchHandler = async ({ sorters = [], filters, page, limit }) => {\n  var total = 5\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          number: idx,\n          float: 1.3,\n          date: '2023-09-20',\n          updatedAt: Date.now()\n        }\n      })\n  }\n}\n\nfunction buildConfig({ headerFilter }: { headerFilter: boolean }) {\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: 'gutter',\n        gutterName: 'button',\n        icon: 'add',\n        title: 'add',\n        handlers: {\n          click: 'record-copy'\n        }\n      },\n      {\n        type: 'string',\n        name: 'name',\n        label: true,\n        header: 'name',\n        filter: 'search',\n        record: {\n          editable: (value: any, column: any, record: any, rowIndex: any, field: any) => {\n            return !record.id\n          }\n        },\n        sortable: true,\n        width: 120\n      },\n      {\n        type: 'string',\n        name: 'description',\n        header: 'description',\n        filter: 'search',\n        record: {\n          align: 'left',\n          editable: true\n        },\n        width: 200\n      },\n      {\n        type: 'checkbox',\n        name: 'chk',\n        header: 'chk',\n        record: {\n          editable: true\n        },\n        width: 40\n      },\n      {\n        type: 'number',\n        name: 'number',\n        header: 'number',\n        record: {\n          editable: true\n        },\n        width: 80\n      },\n      {\n        type: 'float',\n        name: 'float',\n        header: 'float',\n        record: {\n          editable: true\n        },\n        width: 80\n      },\n      {\n        type: 'date',\n        name: 'date',\n        header: 'date',\n        width: 120\n      },\n      {\n        type: 'datetime',\n        name: 'updatedAt',\n        header: 'updated at',\n        width: 180\n      }\n    ],\n    rows: {\n      selectable: {\n        multiple: false\n      },\n      handlers: {\n        click: 'select-row'\n      },\n      appendable: true\n    },\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\n/* Make the 'name' column editable only at the time of creation. */\nexport default {\n  title: 'creatable only column for ox-grist',\n  component: 'ox-grist',\n  argTypes: {\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  headerFilter: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ headerFilter }: 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    <ox-grist\n      .config=${buildConfig({ headerFilter })}\n      mode=\"GRID\"\n      .fetchHandler=${fetchHandler}\n      @filters-change=${(e: Event) => console.log('filters', (e.target as any).filters)}\n      @field-change=${(e: any) => {\n        const { name, number, chk } = e.detail.record\n        console.log(name, number, chk)\n      }}\n    >\n      <div slot=\"headroom\">\n        <div id=\"filters\">\n          <ox-filters-form></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"]}

package/dist/stories/default-filters.stories.d.ts

@@ -2,7 +2,7 @@ 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/mwc-icon';
+import '@material/web/icon/icon.js';
 import { TemplateResult } from 'lit';
 declare const _default: {
     title: string;