@operato/form 9.0.0-beta.7 → 9.0.0-beta.85

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/form",
   "description": "WebApplication form supporting components following open-wc recommendations",
   "author": "heartyoh",
-  "version": "9.0.0-beta.7",
+  "version": "9.0.0-beta.85",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -63,11 +63,11 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/graphql": "^9.0.0-beta.6",
-    "@operato/input": "^9.0.0-beta.7",
-    "@operato/p13n": "^9.0.0-beta.6",
-    "@operato/time-calculator": "^9.0.0-beta.4",
-    "@operato/utils": "^9.0.0-beta.6",
+    "@operato/graphql": "^9.0.0-beta.38",
+    "@operato/input": "^9.0.0-beta.85",
+    "@operato/p13n": "^9.0.0-beta.52",
+    "@operato/time-calculator": "^9.0.0-beta.37",
+    "@operato/utils": "^9.0.0-beta.38",
     "lit": "^3.1.2"
   },
   "devDependencies": {
@@ -103,5 +103,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "5651545395e34a4ffa3e915d09fc2d2b9c433df3"
+  "gitHead": "eee693c95a8d12322e12fa13282e6646eff9f124"
 }

package/dist/stories/ox-filters-form-barcode.stories.d.ts

@@ -1,29 +0,0 @@
-import '../src/filters/ox-filters-form-base.js';
-import { TemplateResult } from 'lit';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        value: {
-            control: string;
-        };
-        filters: {
-            control: string;
-        };
-        urlParamsSensitive: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    value?: object;
-    filters?: object;
-    urlParamsSensitive: boolean;
-}
-export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-filters-form-barcode.stories.js

@@ -1,125 +0,0 @@
-import { CommonHeaderStyles } from '@operato/styles';
-import '../src/filters/ox-filters-form-base.js';
-import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-export default {
-    title: 'ox-filters-form-barcode',
-    component: 'ox-filters-form-base',
-    argTypes: {
-        value: { control: 'object' },
-        filters: { control: 'object' },
-        urlParamsSensitive: { control: 'boolean' }
-    }
-};
-const Template = ({ value, filters, urlParamsSensitive }) => 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/form-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>
-    ${CommonHeaderStyles.cssText}
-  </style>
-
-  <style>
-    body {
-      width: 100%;
-      height: 500px;
-      text-align: center;
-
-      background-color: var(--md-sys-color-background);
-      color: var(--md-sys-color-on-background);
-    }
-
-    .header {
-      padding: var(--spacing-small) var(--spacing-medium);
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  </style>
-
-  <div class="header">
-    <div class="filters">
-      <ox-filters-form-base
-        .value=${value}
-        .filters=${filters}
-        ?url-params-sensitive=${urlParamsSensitive}
-        @filters-change=${(e) => {
-    console.log('filters changed', e.detail);
-}}
-      >
-      </ox-filters-form-base>
-    </div>
-  </div>
-`;
-export const Regular = Template.bind({});
-Regular.args = {
-    filters: [
-        {
-            name: 'test',
-            type: 'barcode',
-            label: 'name',
-            operator: 'eq'
-        },
-        {
-            name: 'active',
-            type: 'boolean',
-            label: 'active',
-            operator: 'eq'
-        },
-        {
-            name: 'sss',
-            type: 'select',
-            label: 'sss',
-            operator: 'eq',
-            options: () => {
-                return [
-                    {
-                        display: '',
-                        value: ''
-                    },
-                    {
-                        display: 'ABC',
-                        value: 'ABC'
-                    },
-                    {
-                        display: 'DEF',
-                        value: 'DEF'
-                    }
-                ];
-            }
-        },
-        {
-            name: 'range',
-            type: 'number',
-            label: 'range',
-            operator: 'between'
-        },
-        {
-            name: 'date-range',
-            type: 'datetime',
-            label: 'date',
-            operator: 'between'
-        }
-    ]
-};
-//# sourceMappingURL=ox-filters-form-barcode.stories.js.map

package/dist/stories/ox-filters-form-barcode.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-filters-form-barcode.stories.js","sourceRoot":"","sources":["../../stories/ox-filters-form-barcode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,wCAAwC,CAAA;AAE/C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,sBAAsB;IACjC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;MAsBtF,iBAAiB,CAAC,OAAO;;;;MAIzB,kBAAkB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;iBAuBf,KAAK;mBACH,OAAO;gCACM,kBAAkB;0BACxB,CAAC,CAAc,EAAE,EAAE;IACnC,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;AAC1C,CAAC;;;;;CAKR,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE;QACP;YACE,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,IAAI;SACf;QACD;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,IAAI;SACf;QACD;YACE,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE,GAAG,EAAE;gBACZ,OAAO;oBACL;wBACE,OAAO,EAAE,EAAE;wBACX,KAAK,EAAE,EAAE;qBACV;oBACD;wBACE,OAAO,EAAE,KAAK;wBACd,KAAK,EAAE,KAAK;qBACb;oBACD;wBACE,OAAO,EAAE,KAAK;wBACd,KAAK,EAAE,KAAK;qBACb;iBACF,CAAA;YACH,CAAC;SACF;QACD;YACE,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,OAAO;YACd,QAAQ,EAAE,SAAS;SACpB;QACD;YACE,IAAI,EAAE,YAAY;YAClB,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,SAAS;SACpB;KACF;CACF,CAAA","sourcesContent":["import { CommonHeaderStyles } from '@operato/styles'\nimport '../src/filters/ox-filters-form-base.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'ox-filters-form-barcode',\n  component: 'ox-filters-form-base',\n  argTypes: {\n    value: { control: 'object' },\n    filters: { control: 'object' },\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  value?: object\n  filters?: object\n  urlParamsSensitive: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: ArgTypes) => 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/form-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    ${CommonHeaderStyles.cssText}\n  </style>\n\n  <style>\n    body {\n      width: 100%;\n      height: 500px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-background);\n      color: var(--md-sys-color-on-background);\n    }\n\n    .header {\n      padding: var(--spacing-small) var(--spacing-medium);\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <div class=\"header\">\n    <div class=\"filters\">\n      <ox-filters-form-base\n        .value=${value}\n        .filters=${filters}\n        ?url-params-sensitive=${urlParamsSensitive}\n        @filters-change=${(e: CustomEvent) => {\n          console.log('filters changed', e.detail)\n        }}\n      >\n      </ox-filters-form-base>\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  filters: [\n    {\n      name: 'test',\n      type: 'barcode',\n      label: 'name',\n      operator: 'eq'\n    },\n    {\n      name: 'active',\n      type: 'boolean',\n      label: 'active',\n      operator: 'eq'\n    },\n    {\n      name: 'sss',\n      type: 'select',\n      label: 'sss',\n      operator: 'eq',\n      options: () => {\n        return [\n          {\n            display: '',\n            value: ''\n          },\n          {\n            display: 'ABC',\n            value: 'ABC'\n          },\n          {\n            display: 'DEF',\n            value: 'DEF'\n          }\n        ]\n      }\n    },\n    {\n      name: 'range',\n      type: 'number',\n      label: 'range',\n      operator: 'between'\n    },\n    {\n      name: 'date-range',\n      type: 'datetime',\n      label: 'date',\n      operator: 'between'\n    }\n  ]\n}\n"]}

package/dist/stories/ox-filters-form-base-bounded.stories.d.ts

@@ -1,30 +0,0 @@
-import '../src/filters/ox-filters-form-base.js';
-import { TemplateResult } from 'lit';
-import { FilterConfig, FilterValue } from '../src/index.js';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        value: {
-            control: string;
-        };
-        filters: {
-            control: string;
-        };
-        urlParamsSensitive: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    value?: FilterValue[];
-    filters?: FilterConfig[];
-    urlParamsSensitive: boolean;
-}
-export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-filters-form-base-bounded.stories.js

@@ -1,183 +0,0 @@
-import { CommonHeaderStyles } from '@operato/styles';
-import { sleep } from '@operato/utils';
-import '../src/filters/ox-filters-form-base.js';
-import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-export default {
-    title: 'ox-filters-form-base bounded',
-    component: 'ox-filters-form-base',
-    argTypes: {
-        value: { control: 'object' },
-        filters: { control: 'object' },
-        urlParamsSensitive: { control: 'boolean' }
-    }
-};
-const Template = ({ value, filters, urlParamsSensitive }) => 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/form-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>
-    ${CommonHeaderStyles.cssText}
-  </style>
-
-  <style>
-    body {
-      width: 100%;
-      height: 500px;
-      text-align: center;
-
-      background-color: var(--md-sys-color-background);
-      color: var(--md-sys-color-on-background);
-    }
-
-    .header {
-      padding: var(--spacing-medium);
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  </style>
-
-  <div class="header">
-    <div class="filters">
-      <ox-filters-form-base
-        .value=${value}
-        .filters=${filters}
-        ?url-params-sensitive=${urlParamsSensitive}
-        @filters-change=${(e) => { }}
-      >
-      </ox-filters-form-base>
-    </div>
-  </div>
-`;
-const WAREHOUSE = [
-    {
-        id: '01',
-        name: '제 1 창고',
-        zones: [
-            {
-                id: 'W1Z001',
-                name: 'Zone 01-001',
-                locations: ['L01-001-01', 'L01-001-02', 'L01-001-03', 'L01-001-04', 'L01-001-05']
-            },
-            {
-                id: 'W1Z002',
-                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: 'W2Z001',
-                name: 'Zone 02-001',
-                locations: ['L02-001-01', 'L02-001-02', 'L02-001-03', 'L02-001-04', 'L02-001-05']
-            },
-            {
-                id: 'W2Z002',
-                name: 'Zone 02-002',
-                locations: ['L02-002-01', 'L02-002-02', 'L02-002-03', 'L02-002-04', 'L02-002-05']
-            }
-        ]
-    }
-];
-export const Regular = Template.bind({});
-Regular.args = {
-    filters: [
-        {
-            name: 'warehouse',
-            type: 'select',
-            label: 'warehouse',
-            operator: 'eq',
-            value: '01',
-            options: async (form) => {
-                await sleep(1000); // 테스트를 위해서 강제로 1초 쉬기
-                return [
-                    {
-                        display: '',
-                        value: ''
-                    }
-                ].concat(WAREHOUSE.map(w => {
-                    return {
-                        display: w.name,
-                        value: w.id
-                    };
-                }));
-            }
-        },
-        {
-            name: 'zone',
-            type: 'select',
-            label: 'zone',
-            operator: 'eq',
-            value: 'W1Z001',
-            boundTo: ['warehouse'],
-            options: async (form) => {
-                await sleep(1000); // 테스트를 위해서 강제로 1초 쉬기
-                const formData = new FormData(await form.form);
-                const warehouse = formData === null || formData === void 0 ? void 0 : formData.get('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
-                    };
-                }));
-            }
-        },
-        {
-            name: 'location',
-            type: 'select',
-            label: 'location',
-            operator: 'eq',
-            value: '',
-            boundTo: ['warehouse', 'zone'],
-            options: async (form) => {
-                await sleep(1000); // 테스트를 위해서 강제로 1초 쉬기
-                const formData = new FormData(await form.form);
-                const warehouse = formData === null || formData === void 0 ? void 0 : formData.get('warehouse');
-                const zone = formData === null || formData === void 0 ? void 0 : formData.get('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] : [];
-            }
-        }
-    ]
-};
-//# sourceMappingURL=ox-filters-form-base-bounded.stories.js.map

package/dist/stories/ox-filters-form-base-bounded.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-filters-form-base-bounded.stories.js","sourceRoot":"","sources":["../../stories/ox-filters-form-base-bounded.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { CommonHeaderStyles } from '@operato/styles'\nimport { sleep } from '@operato/utils'\nimport '../src/filters/ox-filters-form-base.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nimport { OxFiltersFormBase, FilterConfig, FilterValue } from '../src/index.js'\n\nexport default {\n  title: 'ox-filters-form-base bounded',\n  component: 'ox-filters-form-base',\n  argTypes: {\n    value: { control: 'object' },\n    filters: { control: 'object' },\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  value?: FilterValue[]\n  filters?: FilterConfig[]\n  urlParamsSensitive: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: ArgTypes) => 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/form-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    ${CommonHeaderStyles.cssText}\n  </style>\n\n  <style>\n    body {\n      width: 100%;\n      height: 500px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-background);\n      color: var(--md-sys-color-on-background);\n    }\n\n    .header {\n      padding: var(--spacing-medium);\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <div class=\"header\">\n    <div class=\"filters\">\n      <ox-filters-form-base\n        .value=${value!}\n        .filters=${filters!}\n        ?url-params-sensitive=${urlParamsSensitive}\n        @filters-change=${(e: CustomEvent) => {}}\n      >\n      </ox-filters-form-base>\n    </div>\n  </div>\n`\n\nconst WAREHOUSE = [\n  {\n    id: '01',\n    name: '제 1 창고',\n    zones: [\n      {\n        id: 'W1Z001',\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: 'W1Z002',\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: 'W2Z001',\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: 'W2Z002',\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 const Regular = Template.bind({})\nRegular.args = {\n  filters: [\n    {\n      name: 'warehouse',\n      type: 'select',\n      label: 'warehouse',\n      operator: 'eq',\n      value: '01',\n      options: async (form: OxFiltersFormBase) => {\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    {\n      name: 'zone',\n      type: 'select',\n      label: 'zone',\n      operator: 'eq',\n      value: 'W1Z001',\n      boundTo: ['warehouse'],\n      options: async (form: OxFiltersFormBase) => {\n        await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n        const formData = new FormData(await form.form)\n        const warehouse = formData?.get('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    {\n      name: 'location',\n      type: 'select',\n      label: 'location',\n      operator: 'eq',\n      value: '',\n      boundTo: ['warehouse', 'zone'],\n      options: async (form: OxFiltersFormBase) => {\n        await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n        const formData = new FormData(await form.form)\n        const warehouse = formData?.get('warehouse')\n        const zone = formData?.get('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 => z.id == zone)\n        return targetZone ? ['', ...targetZone.locations] : []\n      }\n    }\n  ]\n}\n"]}

package/dist/stories/ox-filters-form-base-change-handler.stories.d.ts

@@ -1,30 +0,0 @@
-import '../src/filters/ox-filters-form-base.js';
-import { TemplateResult } from 'lit';
-import { FilterConfig, FilterValue } from '../src/index.js';
-declare const _default: {
-    title: string;
-    component: string;
-    argTypes: {
-        value: {
-            control: string;
-        };
-        filters: {
-            control: string;
-        };
-        urlParamsSensitive: {
-            control: string;
-        };
-    };
-};
-export default _default;
-interface Story<T> {
-    (args: T): TemplateResult;
-    args?: Partial<T>;
-    argTypes?: Record<string, unknown>;
-}
-interface ArgTypes {
-    value?: FilterValue[];
-    filters?: FilterConfig[];
-    urlParamsSensitive: boolean;
-}
-export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-filters-form-base-change-handler.stories.js

@@ -1,195 +0,0 @@
-import { CommonHeaderStyles } from '@operato/styles';
-import { sleep } from '@operato/utils';
-import '../src/filters/ox-filters-form-base.js';
-import { html } from 'lit';
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
-export default {
-    title: 'ox-filters-form-base change-handler',
-    component: 'ox-filters-form-base',
-    argTypes: {
-        value: { control: 'object' },
-        filters: { control: 'object' },
-        urlParamsSensitive: { control: 'boolean' }
-    }
-};
-const Template = ({ value, filters, urlParamsSensitive }) => 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/form-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>
-    ${CommonHeaderStyles.cssText}
-  </style>
-
-  <style>
-    body {
-      width: 100%;
-      height: 500px;
-      text-align: center;
-
-      background-color: var(--md-sys-color-background);
-      color: var(--md-sys-color-on-background);
-    }
-
-    .header {
-      padding: var(--spacing-medium);
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  </style>
-
-  <div class="header">
-    <div class="filters">
-      <ox-filters-form-base
-        .value=${value}
-        .filters=${filters}
-        ?url-params-sensitive=${urlParamsSensitive}
-        @filters-change=${(e) => {
-    const { filters } = e.detail;
-    const { value } = e.currentTarget;
-    console.log('filters-change event fired', filters, value, e.currentTarget);
-}}
-      >
-      </ox-filters-form-base>
-    </div>
-  </div>
-`;
-const WAREHOUSE = [
-    {
-        id: '01',
-        name: '제 1 창고',
-        zones: [
-            {
-                id: 'W1Z001',
-                name: 'Zone 01-001',
-                locations: ['L01-001-01', 'L01-001-02', 'L01-001-03', 'L01-001-04', 'L01-001-05']
-            },
-            {
-                id: 'W1Z002',
-                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: 'W2Z001',
-                name: 'Zone 02-001',
-                locations: ['L02-001-01', 'L02-001-02', 'L02-001-03', 'L02-001-04', 'L02-001-05']
-            },
-            {
-                id: 'W2Z002',
-                name: 'Zone 02-002',
-                locations: ['L02-002-01', 'L02-002-02', 'L02-002-03', 'L02-002-04', 'L02-002-05']
-            }
-        ]
-    }
-];
-export const Regular = Template.bind({});
-Regular.args = {
-    filters: [
-        {
-            name: 'warehouse',
-            type: 'select',
-            label: 'warehouse',
-            operator: 'eq',
-            value: '01',
-            options: async (form) => {
-                await sleep(1000); // 테스트를 위해서 강제로 1초 쉬기
-                return [
-                    {
-                        display: '',
-                        value: ''
-                    }
-                ].concat(WAREHOUSE.map(w => {
-                    return {
-                        display: w.name,
-                        value: w.id
-                    };
-                }));
-            },
-            onchange: async (value, form) => {
-                await sleep(1000);
-                console.log("won't submit..");
-                return false;
-            }
-        },
-        {
-            name: 'zone',
-            type: 'select',
-            label: 'zone',
-            operator: 'eq',
-            value: 'W1Z001',
-            boundTo: ['warehouse'],
-            options: async (form) => {
-                await sleep(1000); // 테스트를 위해서 강제로 1초 쉬기
-                const formData = new FormData(await form.form);
-                const warehouse = formData === null || formData === void 0 ? void 0 : formData.get('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
-                    };
-                }));
-            },
-            onchange: () => {
-                return false;
-            }
-        },
-        {
-            name: 'location',
-            type: 'select',
-            label: 'location',
-            operator: 'eq',
-            value: '',
-            boundTo: ['warehouse', 'zone'],
-            options: async (form) => {
-                await sleep(1000); // 테스트를 위해서 강제로 1초 쉬기
-                const formData = new FormData(await form.form);
-                const warehouse = formData === null || formData === void 0 ? void 0 : formData.get('warehouse');
-                const zone = formData === null || formData === void 0 ? void 0 : formData.get('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] : [];
-            }
-        }
-    ]
-};
-//# sourceMappingURL=ox-filters-form-base-change-handler.stories.js.map