@operato/form 2.0.0-alpha.94 → 2.0.0-beta.1

package/dist/stories/ox-search-form-change-handler.stories.js

@@ -0,0 +1,227 @@
+import { CommonHeaderStyles } from '@operato/styles';
+import { sleep } from '@operato/utils';
+import '../src/components/ox-search-form.js';
+import { html } from 'lit';
+export default {
+    title: 'ox-search-form change handler',
+    component: 'ox-search-form',
+    argTypes: {
+        value: { control: 'object' },
+        fields: { control: 'object' },
+        hideSearchButton: { control: 'boolean' },
+        autofocus: { control: 'boolean' }
+    }
+};
+const Template = ({ fields, hideSearchButton, autofocus }) => html `
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/form-theme.css" rel="stylesheet" />
+  <link href="/themes/input-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>
+    body {
+      height: 500px;
+    }
+  </style>
+
+  <style>
+    ox-search-form {
+      --input-gap-vertical: 8px;
+      --input-gap-horizontal: 16px;
+
+      --ox-filters-input-placeholder-color: var(--primary-color);
+
+      --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);
+      --ox-filters-input-focus-border: 1px solid var(--primary-color);
+      --ox-filters-input-font: normal 14px var(--theme-font);
+      --ox-filters-input-color: var(--primary-text-color);
+      --ox-filters-input-focus-color: var(--primary-color);
+      --ox-filters-label-font: normal 14px var(--theme-font);
+      --ox-filters-label-color: var(--primary-text-color);
+
+      --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
+      --ox-filters-input-padding: 6px 2px;
+    }
+
+    ${CommonHeaderStyles.cssText}
+  </style>
+
+  <div class="header">
+    <div class="filters">
+      <ox-search-form
+        .fields=${fields}
+        ?autofocus=${autofocus}
+        ?hideSearchButton=${hideSearchButton}
+        @change=${(e) => {
+    console.log('search form changed', e.detail);
+}}
+      >
+      </ox-search-form>
+    </div>
+  </div>
+`;
+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 const Regular = Template.bind({});
+Regular.args = {
+    fields: [
+        {
+            type: 'select',
+            name: 'warehouse',
+            label: 'warehouse',
+            options: async (form) => {
+                await sleep(1000); // 테스트를 위해서 강제로 1초 쉬기
+                return [
+                    {
+                        display: '',
+                        value: ''
+                    }
+                ].concat(WAREHOUSE.map(w => {
+                    return {
+                        display: w.name,
+                        value: w.id
+                    };
+                }));
+            },
+            onchange: () => false
+        },
+        {
+            type: 'select',
+            name: 'zone',
+            label: 'zone',
+            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: () => false
+        },
+        {
+            name: 'location',
+            type: 'select',
+            label: 'location',
+            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] : [];
+            }
+        }
+    ],
+    hideSearchButton: true,
+    autofocus: true
+};
+export const RegularContact = Template.bind({});
+RegularContact.args = {
+    fields: [
+        {
+            label: 'name',
+            name: 'name',
+            type: 'text',
+            value: 'My Name',
+            placeholder: 'type your name.',
+            readonly: true,
+            props: { searchOper: 'i_like' },
+            onchange: value => {
+                console.log('changed', value);
+                return false;
+            }
+        },
+        {
+            label: 'email',
+            name: 'email',
+            type: 'text',
+            props: { searchOper: 'i_like' }
+        },
+        {
+            label: 'fax',
+            name: 'fax',
+            type: 'text',
+            props: { searchOper: 'i_like' }
+        },
+        {
+            label: 'phone',
+            name: 'phone',
+            type: 'text',
+            props: { searchOper: 'i_like' }
+        },
+        {
+            label: 'description',
+            name: 'description',
+            type: 'text',
+            props: { searchOper: 'i_like' }
+        }
+    ],
+    hideSearchButton: true,
+    autofocus: true
+};
+//# sourceMappingURL=ox-search-form-change-handler.stories.js.map

package/dist/stories/ox-search-form-change-handler.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-search-form-change-handler.stories.js","sourceRoot":"","sources":["../../stories/ox-search-form-change-handler.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { CommonHeaderStyles } from '@operato/styles'\nimport { sleep } from '@operato/utils'\nimport '../src/components/ox-search-form.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { OxSearchForm, SearchFormField } from '../src/index.js'\n\nexport default {\n  title: 'ox-search-form change handler',\n  component: 'ox-search-form',\n  argTypes: {\n    value: { control: 'object' },\n    fields: { control: 'object' },\n    hideSearchButton: { control: 'boolean' },\n    autofocus: { 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  fields?: SearchFormField[]\n  hideSearchButton?: boolean\n  autofocus?: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ fields, hideSearchButton, autofocus }: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/form-theme.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/input-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    body {\n      height: 500px;\n    }\n  </style>\n\n  <style>\n    ox-search-form {\n      --input-gap-vertical: 8px;\n      --input-gap-horizontal: 16px;\n\n      --ox-filters-input-placeholder-color: var(--primary-color);\n\n      --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);\n      --ox-filters-input-focus-border: 1px solid var(--primary-color);\n      --ox-filters-input-font: normal 14px var(--theme-font);\n      --ox-filters-input-color: var(--primary-text-color);\n      --ox-filters-input-focus-color: var(--primary-color);\n      --ox-filters-label-font: normal 14px var(--theme-font);\n      --ox-filters-label-color: var(--primary-text-color);\n\n      --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);\n      --ox-filters-input-padding: 6px 2px;\n    }\n\n    ${CommonHeaderStyles.cssText}\n  </style>\n\n  <div class=\"header\">\n    <div class=\"filters\">\n      <ox-search-form\n        .fields=${fields!}\n        ?autofocus=${autofocus}\n        ?hideSearchButton=${hideSearchButton}\n        @change=${(e: CustomEvent) => {\n          console.log('search form changed', e.detail)\n        }}\n      >\n      </ox-search-form>\n    </div>\n  </div>\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 const Regular = Template.bind({})\nRegular.args = {\n  fields: [\n    {\n      type: 'select',\n      name: 'warehouse',\n      label: 'warehouse',\n      options: async (form: OxSearchForm) => {\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      onchange: () => false\n    },\n    {\n      type: 'select',\n      name: 'zone',\n      label: 'zone',\n      boundTo: ['warehouse'],\n      options: async (form: OxSearchForm) => {\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      onchange: () => false\n    },\n    {\n      name: 'location',\n      type: 'select',\n      label: 'location',\n      boundTo: ['warehouse', 'zone'],\n      options: async (form: OxSearchForm) => {\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  hideSearchButton: true,\n  autofocus: true\n}\n\nexport const RegularContact = Template.bind({})\nRegularContact.args = {\n  fields: [\n    {\n      label: 'name',\n      name: 'name',\n      type: 'text',\n      value: 'My Name',\n      placeholder: 'type your name.',\n      readonly: true,\n      props: { searchOper: 'i_like' },\n      onchange: value => {\n        console.log('changed', value)\n        return false\n      }\n    },\n    {\n      label: 'email',\n      name: 'email',\n      type: 'text',\n      props: { searchOper: 'i_like' }\n    },\n    {\n      label: 'fax',\n      name: 'fax',\n      type: 'text',\n      props: { searchOper: 'i_like' }\n    },\n    {\n      label: 'phone',\n      name: 'phone',\n      type: 'text',\n      props: { searchOper: 'i_like' }\n    },\n    {\n      label: 'description',\n      name: 'description',\n      type: 'text',\n      props: { searchOper: 'i_like' }\n    }\n  ],\n  hideSearchButton: true,\n  autofocus: true\n}\n"]}

package/dist/stories/ox-search-form.stories.d.ts

@@ -0,0 +1,45 @@
+import '../src/components/ox-search-form.js';
+import { TemplateResult } from 'lit';
+import { SearchFormField } from '../src/index.js';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        value: {
+            control: string;
+        };
+        fields: {
+            control: string;
+        };
+        hideSearchButton: {
+            control: string;
+        };
+        autofocus: {
+            control: string;
+        };
+        resetTarget: {
+            control: string;
+        };
+        theme: {
+            control: string;
+            options: string[];
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    fields?: SearchFormField[];
+    hideSearchButton?: boolean;
+    autofocus?: boolean;
+    resetTarget: string[] | {
+        [field: string]: any;
+    };
+    theme: 'light' | 'dark';
+}
+export declare const Regular: Story<ArgTypes>;
+export declare const RegularContact: Story<ArgTypes>;

package/dist/stories/ox-search-form.stories.js

@@ -0,0 +1,235 @@
+import { CommonHeaderStyles } from '@operato/styles';
+import { sleep } from '@operato/utils';
+import '../src/components/ox-search-form.js';
+import { html } from 'lit';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+export default {
+    title: 'ox-search-form',
+    component: 'ox-search-form',
+    argTypes: {
+        value: { control: 'object' },
+        fields: { control: 'object' },
+        hideSearchButton: { control: 'boolean' },
+        autofocus: { control: 'boolean' },
+        resetTarget: { control: 'object' },
+        theme: { control: 'select', options: ['light', 'dark'] }
+    }
+};
+const Template = ({ fields, hideSearchButton, autofocus, resetTarget, theme = 'light' }) => 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="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>
+
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="header">
+    <div class="filters">
+      <ox-search-form
+        .fields=${fields}
+        ?autofocus=${autofocus}
+        ?hideSearchButton=${hideSearchButton}
+        @change=${(e) => {
+    console.log('search form changed', e.detail);
+}}
+      >
+      </ox-search-form>
+    </div>
+  </div>
+
+  <button @click=${() => { var _a; return (_a = document.querySelector('ox-search-form')) === null || _a === void 0 ? void 0 : _a.reset(resetTarget); }}>Partial Reset</button>
+  <button @click=${() => { var _a; return (_a = document.querySelector('ox-search-form')) === null || _a === void 0 ? void 0 : _a.reset(); }}>Full Reset</button>
+`;
+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 const Regular = Template.bind({});
+Regular.args = {
+    fields: [
+        {
+            type: 'select',
+            name: 'warehouse',
+            label: 'warehouse',
+            options: async (form) => {
+                await sleep(1000); // 테스트를 위해서 강제로 1초 쉬기
+                return [
+                    {
+                        display: '',
+                        value: ''
+                    }
+                ].concat(WAREHOUSE.map(w => {
+                    return {
+                        display: w.name,
+                        value: w.id
+                    };
+                }));
+            }
+        },
+        {
+            type: 'select',
+            name: 'zone',
+            label: 'zone',
+            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',
+            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] : [];
+            }
+        }
+    ],
+    hideSearchButton: true,
+    resetTarget: {
+        location: ''
+    },
+    autofocus: true
+};
+export const RegularContact = Template.bind({});
+RegularContact.args = {
+    fields: [
+        {
+            label: 'name',
+            name: 'name',
+            type: 'text',
+            readonly: true,
+            value: '남상혁',
+            placeholder: 'type your name.',
+            props: { searchOper: 'i_like' }
+        },
+        {
+            label: 'email',
+            name: 'email',
+            type: 'text',
+            props: { searchOper: 'i_like' }
+        },
+        {
+            label: 'fax',
+            name: 'fax',
+            type: 'text',
+            props: { searchOper: 'i_like' }
+        },
+        {
+            label: 'phone',
+            name: 'phone',
+            type: 'text',
+            readonly: true,
+            props: { searchOper: 'i_like' }
+        },
+        {
+            label: 'description',
+            name: 'description',
+            type: 'text',
+            props: { searchOper: 'i_like' }
+        }
+    ],
+    hideSearchButton: true,
+    resetTarget: ['name', 'email'],
+    autofocus: true
+};
+//# sourceMappingURL=ox-search-form.stories.js.map

package/dist/stories/ox-search-form.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-search-form.stories.js","sourceRoot":"","sources":["../../stories/ox-search-form.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { CommonHeaderStyles } from '@operato/styles'\nimport { sleep } from '@operato/utils'\nimport '../src/components/ox-search-form.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nimport { OxSearchForm, SearchFormField } from '../src/index.js'\n\nexport default {\n  title: 'ox-search-form',\n  component: 'ox-search-form',\n  argTypes: {\n    value: { control: 'object' },\n    fields: { control: 'object' },\n    hideSearchButton: { control: 'boolean' },\n    autofocus: { control: 'boolean' },\n    resetTarget: { control: 'object' },\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  fields?: SearchFormField[]\n  hideSearchButton?: boolean\n  autofocus?: boolean\n  resetTarget: string[] | { [field: string]: any }\n  theme: 'light' | 'dark'\n}\n\nconst Template: Story<ArgTypes> = ({\n  fields,\n  hideSearchButton,\n  autofocus,\n  resetTarget,\n  theme = 'light'\n}: 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\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  <script>\n    document.body.classList.add('${theme}')\n  </script>\n\n  <div class=\"header\">\n    <div class=\"filters\">\n      <ox-search-form\n        .fields=${fields!}\n        ?autofocus=${autofocus}\n        ?hideSearchButton=${hideSearchButton}\n        @change=${(e: CustomEvent) => {\n          console.log('search form changed', e.detail)\n        }}\n      >\n      </ox-search-form>\n    </div>\n  </div>\n\n  <button @click=${() => (document.querySelector('ox-search-form') as any)?.reset(resetTarget)}>Partial Reset</button>\n  <button @click=${() => (document.querySelector('ox-search-form') as any)?.reset()}>Full Reset</button>\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 const Regular = Template.bind({})\nRegular.args = {\n  fields: [\n    {\n      type: 'select',\n      name: 'warehouse',\n      label: 'warehouse',\n      options: async (form: OxSearchForm) => {\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      type: 'select',\n      name: 'zone',\n      label: 'zone',\n      boundTo: ['warehouse'],\n      options: async (form: OxSearchForm) => {\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      boundTo: ['warehouse', 'zone'],\n      options: async (form: OxSearchForm) => {\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  hideSearchButton: true,\n  resetTarget: {\n    location: ''\n  },\n  autofocus: true\n}\n\nexport const RegularContact = Template.bind({})\nRegularContact.args = {\n  fields: [\n    {\n      label: 'name',\n      name: 'name',\n      type: 'text',\n      readonly: true,\n      value: '남상혁',\n      placeholder: 'type your name.',\n      props: { searchOper: 'i_like' }\n    },\n    {\n      label: 'email',\n      name: 'email',\n      type: 'text',\n      props: { searchOper: 'i_like' }\n    },\n    {\n      label: 'fax',\n      name: 'fax',\n      type: 'text',\n      props: { searchOper: 'i_like' }\n    },\n    {\n      label: 'phone',\n      name: 'phone',\n      type: 'text',\n      readonly: true,\n      props: { searchOper: 'i_like' }\n    },\n    {\n      label: 'description',\n      name: 'description',\n      type: 'text',\n      props: { searchOper: 'i_like' }\n    }\n  ],\n  hideSearchButton: true,\n  resetTarget: ['name', 'email'],\n  autofocus: true\n}\n"]}