@operato/form 7.0.0-rc.7 → 7.0.0-rc.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/dist/stories/ox-filters-form-barcode.stories.js +1 -0
- package/dist/stories/ox-filters-form-barcode.stories.js.map +1 -1
- package/dist/stories/ox-filters-form-base-bounded.stories.js +1 -0
- package/dist/stories/ox-filters-form-base-bounded.stories.js.map +1 -1
- package/dist/stories/ox-filters-form-base-change-handler.stories.js +1 -0
- package/dist/stories/ox-filters-form-base-change-handler.stories.js.map +1 -1
- package/dist/stories/ox-filters-form-base-page-preference.stories.js +3 -0
- package/dist/stories/ox-filters-form-base-page-preference.stories.js.map +1 -1
- package/dist/stories/ox-filters-form-base.stories.js +1 -0
- package/dist/stories/ox-filters-form-base.stories.js.map +1 -1
- package/dist/stories/ox-search-form-change-handler.stories.d.ts +5 -0
- package/dist/stories/ox-search-form-change-handler.stories.js +28 -22
- package/dist/stories/ox-search-form-change-handler.stories.js.map +1 -1
- package/dist/stories/ox-search-form.stories.js +1 -0
- package/dist/stories/ox-search-form.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +6 -6
- package/stories/ox-filters-form-barcode.stories.ts +1 -0
- package/stories/ox-filters-form-base-bounded.stories.ts +1 -0
- package/stories/ox-filters-form-base-change-handler.stories.ts +1 -0
- package/stories/ox-filters-form-base-page-preference.stories.ts +3 -0
- package/stories/ox-filters-form-base.stories.ts +1 -0
- package/stories/ox-search-form-change-handler.stories.ts +31 -24
- package/stories/ox-search-form.stories.ts +1 -0
- package/themes/form-theme.css +71 -0
- package/themes/grist-theme.css +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,24 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [7.0.0-rc.9](https://github.com/hatiolab/operato/compare/v7.0.0-rc.8...v7.0.0-rc.9) (2024-06-29)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* ox-input-barcode style ([5f803bb](https://github.com/hatiolab/operato/commit/5f803bba90167c3a214998df3f860934b116d770))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## [7.0.0-rc.8](https://github.com/hatiolab/operato/compare/v7.0.0-rc.7...v7.0.0-rc.8) (2024-06-28)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### :bug: Bug Fix
|
|
19
|
+
|
|
20
|
+
* vertical aligning of data-grid header icon ([8f7f031](https://github.com/hatiolab/operato/commit/8f7f031278ba1190510ea385ade2eb253607b564))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
6
24
|
## [7.0.0-rc.7](https://github.com/hatiolab/operato/compare/v7.0.0-rc.6...v7.0.0-rc.7) (2024-06-28)
|
|
7
25
|
|
|
8
26
|
**Note:** Version bump only for package @operato/form
|
|
@@ -18,6 +18,7 @@ const Template = ({ value, filters, urlParamsSensitive, theme = 'light' }) => ht
|
|
|
18
18
|
<link href="/themes/light.css" rel="stylesheet" />
|
|
19
19
|
<link href="/themes/dark.css" rel="stylesheet" />
|
|
20
20
|
<link href="/themes/spacing.css" rel="stylesheet" />
|
|
21
|
+
<link href="/themes/form-theme.css" rel="stylesheet" />
|
|
21
22
|
|
|
22
23
|
<link
|
|
23
24
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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,8CAA8C,CAAA;AAE1F,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;QAC1C,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA
|
|
1
|
+
{"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,8CAA8C,CAAA;AAE1F,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;QAC1C,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;MAsBvG,iBAAiB,CAAC,OAAO;;;;MAIzB,kBAAkB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;mCAqBG,KAAK;;;;;;iBAMvB,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'\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 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 value?: object\n filters?: object\n urlParamsSensitive: boolean\n theme: 'light' | 'dark'\n}\n\nconst Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive, theme = 'light' }: 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 <script>\n document.body.classList.add('${theme}')\n </script>\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"]}
|
|
@@ -19,6 +19,7 @@ const Template = ({ value, filters, urlParamsSensitive, theme = 'light' }) => ht
|
|
|
19
19
|
<link href="/themes/light.css" rel="stylesheet" />
|
|
20
20
|
<link href="/themes/dark.css" rel="stylesheet" />
|
|
21
21
|
<link href="/themes/spacing.css" rel="stylesheet" />
|
|
22
|
+
<link href="/themes/form-theme.css" rel="stylesheet" />
|
|
22
23
|
|
|
23
24
|
<link
|
|
24
25
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-filters-form-base-bounded.stories.js","sourceRoot":"","sources":["../../stories/ox-filters-form-base-bounded.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,wCAAwC,CAAA;AAE/C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAI1F,eAAe;IACb,KAAK,EAAE,8BAA8B;IACrC,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;QAC1C,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBvG,iBAAiB,CAAC,OAAO;;;;MAIzB,kBAAkB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;mCAqBG,KAAK;;;;;;iBAMvB,KAAM;mBACJ,OAAQ;gCACK,kBAAkB;0BACxB,CAAC,CAAc,EAAE,EAAE,GAAE,CAAC;;;;;CAK/C,CAAA;AAED,MAAM,SAAS,GAAG;IAChB;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,QAAQ;gBACZ,IAAI,EAAE,aAAa;gBACnB,SAAS,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC;aAClF;YACD;gBACE,EAAE,EAAE,QAAQ;gBACZ,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,QAAQ;gBACZ,IAAI,EAAE,aAAa;gBACnB,SAAS,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC;aAClF;YACD;gBACE,EAAE,EAAE,QAAQ;gBACZ,IAAI,EAAE,aAAa;gBACnB,SAAS,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC;aAClF;SACF;KACF;CACF,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,WAAW;YACjB,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,WAAW;YAClB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,IAAI;YACX,OAAO,EAAE,KAAK,EAAE,IAAuB,EAAE,EAAE;gBACzC,MAAM,KAAK,CAAC,IAAI,CAAC,CAAA,CAAC,qBAAqB;gBACvC,OAAO;oBACL;wBACE,OAAO,EAAE,EAAE;wBACX,KAAK,EAAE,EAAE;qBACV;iBACF,CAAC,MAAM,CACN,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;oBAChB,OAAO;wBACL,OAAO,EAAE,CAAC,CAAC,IAAI;wBACf,KAAK,EAAE,CAAC,CAAC,EAAE;qBACZ,CAAA;gBACH,CAAC,CAAC,CACH,CAAA;YACH,CAAC;SACF;QACD;YACE,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,QAAQ;YACf,OAAO,EAAE,CAAC,WAAW,CAAC;YACtB,OAAO,EAAE,KAAK,EAAE,IAAuB,EAAE,EAAE;gBACzC,MAAM,KAAK,CAAC,IAAI,CAAC,CAAA,CAAC,qBAAqB;gBACvC,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,CAAA;gBAC9C,MAAM,SAAS,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,GAAG,CAAC,WAAW,CAAC,CAAA;gBAC5C,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;gBAEnC,MAAM,QAAQ,GAAG,SAAS,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,CAAC,CAAA;gBACpE,MAAM,KAAK,GAAG,QAAQ;oBACpB,CAAC,CAAC,QAAQ,CAAC,KAAK;oBAChB,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,SAAS,EAAE,EAAE;wBAClC,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;wBACjC,OAAO,GAAG,CAAA;oBACZ,CAAC,EAAE,EAAW,CAAC,CAAA;gBAEnB,OAAO;oBACL;wBACE,OAAO,EAAE,EAAE;wBACX,KAAK,EAAE,EAAE;qBACV;iBACF,CAAC,MAAM,CACN,KAAK,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,EAAE;oBACnB,OAAO;wBACL,OAAO,EAAE,CAAC,CAAC,IAAI;wBACf,KAAK,EAAE,CAAC,CAAC,EAAE;qBACZ,CAAA;gBACH,CAAC,CAAC,CACH,CAAA;YACH,CAAC;SACF;QACD;YACE,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,UAAU;YACjB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,EAAE;YACT,OAAO,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC;YAC9B,OAAO,EAAE,KAAK,EAAE,IAAuB,EAAE,EAAE;gBACzC,MAAM,KAAK,CAAC,IAAI,CAAC,CAAA,CAAC,qBAAqB;gBACvC,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,CAAA;gBAC9C,MAAM,SAAS,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,GAAG,CAAC,WAAW,CAAC,CAAA;gBAC5C,MAAM,IAAI,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,GAAG,CAAC,MAAM,CAAC,CAAA;gBAClC,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,SAAS,EAAE,IAAI,CAAC,CAAA;gBAE/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;gBAC9E,MAAM,UAAU,GAAG,IAAI,KAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,CAAA,CAAA;gBAClE,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;YACxD,CAAC;SACF;KACF;CACF,CAAA","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'\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 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 value?: FilterValue[]\n filters?: FilterConfig[]\n urlParamsSensitive: boolean\n theme: 'light' | 'dark'\n}\n\nconst Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive, theme = 'light' }: 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-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"]}
|
|
1
|
+
{"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'\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 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 value?: FilterValue[]\n filters?: FilterConfig[]\n urlParamsSensitive: boolean\n theme: 'light' | 'dark'\n}\n\nconst Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive, theme = 'light' }: 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 <script>\n document.body.classList.add('${theme}')\n </script>\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"]}
|
|
@@ -19,6 +19,7 @@ const Template = ({ value, filters, urlParamsSensitive, theme = 'light' }) => ht
|
|
|
19
19
|
<link href="/themes/light.css" rel="stylesheet" />
|
|
20
20
|
<link href="/themes/dark.css" rel="stylesheet" />
|
|
21
21
|
<link href="/themes/spacing.css" rel="stylesheet" />
|
|
22
|
+
<link href="/themes/form-theme.css" rel="stylesheet" />
|
|
22
23
|
|
|
23
24
|
<link
|
|
24
25
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-filters-form-base-change-handler.stories.js","sourceRoot":"","sources":["../../stories/ox-filters-form-base-change-handler.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'\n\nimport { OxFiltersFormBase, FilterConfig, FilterValue } from '../src/index.js'\n\nexport default {\n title: 'ox-filters-form-base change-handler',\n component: 'ox-filters-form-base',\n argTypes: {\n value: { control: 'object' },\n filters: { control: 'object' },\n urlParamsSensitive: { control: 'boolean' },\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 value?: FilterValue[]\n filters?: FilterConfig[]\n urlParamsSensitive: boolean\n theme: 'light' | 'dark'\n}\n\nconst Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive, theme = 'light' }: 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-filters-form-base\n .value=${value!}\n .filters=${filters!}\n ?url-params-sensitive=${urlParamsSensitive}\n @filters-change=${(e: CustomEvent) => {\n const { filters } = e.detail\n const { value } = e.currentTarget as any\n console.log('filters-change event fired', filters, value, e.currentTarget)\n }}\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 onchange: async (value: any, form: OxFiltersFormBase) => {\n await sleep(1000)\n console.log(\"won't submit..\")\n return false\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 onchange: () => {\n return false\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"]}
|
|
1
|
+
{"version":3,"file":"ox-filters-form-base-change-handler.stories.js","sourceRoot":"","sources":["../../stories/ox-filters-form-base-change-handler.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'\n\nimport { OxFiltersFormBase, FilterConfig, FilterValue } from '../src/index.js'\n\nexport default {\n title: 'ox-filters-form-base change-handler',\n component: 'ox-filters-form-base',\n argTypes: {\n value: { control: 'object' },\n filters: { control: 'object' },\n urlParamsSensitive: { control: 'boolean' },\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 value?: FilterValue[]\n filters?: FilterConfig[]\n urlParamsSensitive: boolean\n theme: 'light' | 'dark'\n}\n\nconst Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive, theme = 'light' }: 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 <script>\n document.body.classList.add('${theme}')\n </script>\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 const { filters } = e.detail\n const { value } = e.currentTarget as any\n console.log('filters-change event fired', filters, value, e.currentTarget)\n }}\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 onchange: async (value: any, form: OxFiltersFormBase) => {\n await sleep(1000)\n console.log(\"won't submit..\")\n return false\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 onchange: () => {\n return false\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"]}
|
|
@@ -13,9 +13,12 @@ export default {
|
|
|
13
13
|
}
|
|
14
14
|
};
|
|
15
15
|
const Template = ({ value, filters, urlParamsSensitive }) => html `
|
|
16
|
+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
|
|
17
|
+
|
|
16
18
|
<link href="/themes/app-theme.css" rel="stylesheet" />
|
|
17
19
|
<link href="/themes/form-theme.css" rel="stylesheet" />
|
|
18
20
|
<link href="/themes/input-theme.css" rel="stylesheet" />
|
|
21
|
+
<link href="/themes/form-theme.css" rel="stylesheet" />
|
|
19
22
|
|
|
20
23
|
<link
|
|
21
24
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-filters-form-base-page-preference.stories.js","sourceRoot":"","sources":["../../stories/ox-filters-form-base-page-preference.stories.ts"],"names":[],"mappings":"AAAA,OAAO,wCAAwC,CAAA;AAC/C,OAAO,0CAA0C,CAAA;AAEjD,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAKpD,eAAe;IACb,KAAK,EAAE,sCAAsC;IAC7C,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
|
|
1
|
+
{"version":3,"file":"ox-filters-form-base-page-preference.stories.js","sourceRoot":"","sources":["../../stories/ox-filters-form-base-page-preference.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/filters/ox-filters-form-base.js'\nimport '../src/filters/ox-filter-personalizer.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { sleep } from '@operato/utils'\nimport { CommonHeaderStyles } from '@operato/styles'\n\nimport { OxFiltersFormBase, FilterConfig, FilterValue } from '../src/index.js'\nimport { PersonalFilterPreference } from '../src/types.js'\n\nexport default {\n title: 'ox-filters-form-base page-preference',\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/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/form-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/input-theme.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 body {\n height: 500px;\n }\n </style>\n\n <style>\n ox-filters-form-base {\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 div.filters {\n position: relative;\n }\n\n ox-filter-personalizer {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n ${CommonHeaderStyles.cssText}\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 .personalConfigProvider=${{\n async load() {\n await sleep(1000)\n return {\n filters: [\n { name: 'name', hidden: false, value: 'abc' },\n { name: 'description', hidden: true }\n ]\n }\n },\n async save(preference: PersonalFilterPreference) {\n await sleep(1000)\n console.log('saving preference', preference)\n return preference\n },\n async reset() {\n await sleep(1000)\n }\n }}\n @filters-change=${(e: CustomEvent) => {\n console.log('filters changed', e.detail)\n }}\n >\n <ox-filter-personalizer slot=\"setting\"></ox-filter-personalizer>\n </ox-filters-form-base>\n </div>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n filters: [\n {\n name: 'search',\n type: 'search',\n label: 'search',\n operator: 'eq'\n },\n {\n name: 'test',\n type: 'string',\n label: 'name',\n operator: 'eq',\n value: 'No Name'\n },\n {\n name: 'active',\n type: 'boolean',\n label: 'active',\n operator: 'eq',\n value: true,\n onchange: (value, formBase: OxFiltersFormBase) => {\n const sss = formBase.getFieldByName('sss') as HTMLInputElement\n sss.value = value ? 'DEF' : 'ABC'\n\n return false\n }\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: 'date',\n label: 'date',\n operator: 'between',\n value: [\n { name: 'week', params: { relativeWeeks: -1 } },\n { name: 'today', params: { relativeDays: +1 } }\n ]\n }\n ]\n}\n"]}
|
|
@@ -18,6 +18,7 @@ const Template = ({ value, filters, urlParamsSensitive, theme = 'light' }) => ht
|
|
|
18
18
|
<link href="/themes/light.css" rel="stylesheet" />
|
|
19
19
|
<link href="/themes/dark.css" rel="stylesheet" />
|
|
20
20
|
<link href="/themes/spacing.css" rel="stylesheet" />
|
|
21
|
+
<link href="/themes/form-theme.css" rel="stylesheet" />
|
|
21
22
|
|
|
22
23
|
<link
|
|
23
24
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-filters-form-base.stories.js","sourceRoot":"","sources":["../../stories/ox-filters-form-base.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,8CAA8C,CAAA;AAI1F,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,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;QAC1C,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAE,KAAK,GAAG,OAAO,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA
|
|
1
|
+
{"version":3,"file":"ox-filters-form-base.stories.js","sourceRoot":"","sources":["../../stories/ox-filters-form-base.stories.ts"],"names":[],"mappings":"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","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'\n\nimport { OxFiltersFormBase, FilterConfig, FilterValue } from '../src/index.js'\n\nexport default {\n title: 'ox-filters-form-base',\n component: 'ox-filters-form-base',\n argTypes: {\n value: { control: 'object' },\n filters: { control: 'object' },\n urlParamsSensitive: { control: 'boolean' },\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 value?: FilterValue[]\n filters?: FilterConfig[]\n urlParamsSensitive: boolean\n theme: 'light' | 'dark'\n}\n\nconst Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive, theme = 'light' }: 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 <script>\n document.body.classList.add('${theme}')\n\n setInterval(() => {\n const filters = document.body.querySelector('ox-filters-form-base')\n\n filters.value = filters.value.map(filter => {\n const { name, value } = filter\n if (name == 'test') {\n return {\n ...filter,\n value: value + 1\n }\n } else {\n return filter\n }\n })\n }, 10000)\n </script>\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: 'search',\n type: 'search',\n label: 'search',\n operator: 'eq',\n value: ''\n },\n {\n name: 'test',\n type: 'string',\n label: 'name',\n operator: 'eq',\n value: 'No Name'\n },\n {\n name: 'active',\n type: 'boolean',\n label: 'active',\n operator: 'eq',\n value: true,\n onchange: (value, formBase: OxFiltersFormBase) => {\n const sss = formBase.getFieldByName('sss') as HTMLInputElement\n sss.value = value ? 'DEF' : 'ABC'\n\n return false\n }\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: 'date',\n label: 'date',\n operator: 'between',\n value: [\n { name: 'week', params: { relativeWeeks: -1 } },\n { name: 'today', params: { relativeDays: +1 } }\n ]\n }\n ]\n}\n"]}
|
|
@@ -17,6 +17,10 @@ declare const _default: {
|
|
|
17
17
|
autofocus: {
|
|
18
18
|
control: string;
|
|
19
19
|
};
|
|
20
|
+
theme: {
|
|
21
|
+
control: string;
|
|
22
|
+
options: string[];
|
|
23
|
+
};
|
|
20
24
|
};
|
|
21
25
|
};
|
|
22
26
|
export default _default;
|
|
@@ -29,6 +33,7 @@ interface ArgTypes {
|
|
|
29
33
|
fields?: SearchFormField[];
|
|
30
34
|
hideSearchButton?: boolean;
|
|
31
35
|
autofocus?: boolean;
|
|
36
|
+
theme: 'light' | 'dark';
|
|
32
37
|
}
|
|
33
38
|
export declare const Regular: Story<ArgTypes>;
|
|
34
39
|
export declare const RegularContact: Story<ArgTypes>;
|
|
@@ -2,6 +2,7 @@ import { CommonHeaderStyles } from '@operato/styles';
|
|
|
2
2
|
import { sleep } from '@operato/utils';
|
|
3
3
|
import '../src/components/ox-search-form.js';
|
|
4
4
|
import { html } from 'lit';
|
|
5
|
+
import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
|
|
5
6
|
export default {
|
|
6
7
|
title: 'ox-search-form change handler',
|
|
7
8
|
component: 'ox-search-form',
|
|
@@ -9,13 +10,17 @@ export default {
|
|
|
9
10
|
value: { control: 'object' },
|
|
10
11
|
fields: { control: 'object' },
|
|
11
12
|
hideSearchButton: { control: 'boolean' },
|
|
12
|
-
autofocus: { control: 'boolean' }
|
|
13
|
+
autofocus: { control: 'boolean' },
|
|
14
|
+
theme: { control: 'select', options: ['light', 'dark'] }
|
|
13
15
|
}
|
|
14
16
|
};
|
|
15
|
-
const Template = ({ fields, hideSearchButton, autofocus }) => html `
|
|
16
|
-
<link href="/
|
|
17
|
+
const Template = ({ fields, hideSearchButton, autofocus, theme }) => html `
|
|
18
|
+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
|
|
19
|
+
|
|
20
|
+
<link href="/themes/light.css" rel="stylesheet" />
|
|
21
|
+
<link href="/themes/dark.css" rel="stylesheet" />
|
|
22
|
+
<link href="/themes/spacing.css" rel="stylesheet" />
|
|
17
23
|
<link href="/themes/form-theme.css" rel="stylesheet" />
|
|
18
|
-
<link href="/themes/input-theme.css" rel="stylesheet" />
|
|
19
24
|
|
|
20
25
|
<link
|
|
21
26
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
@@ -31,33 +36,34 @@ const Template = ({ fields, hideSearchButton, autofocus }) => html `
|
|
|
31
36
|
/>
|
|
32
37
|
|
|
33
38
|
<style>
|
|
34
|
-
|
|
35
|
-
height: 500px;
|
|
36
|
-
}
|
|
39
|
+
${MDTypeScaleStyles.cssText}
|
|
37
40
|
</style>
|
|
38
41
|
|
|
39
42
|
<style>
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
--input-gap-horizontal: 16px;
|
|
43
|
-
|
|
44
|
-
--ox-filters-input-placeholder-color: var(--primary-color);
|
|
43
|
+
${CommonHeaderStyles.cssText}
|
|
44
|
+
</style>
|
|
45
45
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
--ox-filters-label-font: normal 14px var(--theme-font);
|
|
52
|
-
--ox-filters-label-color: var(--primary-text-color);
|
|
46
|
+
<style>
|
|
47
|
+
body {
|
|
48
|
+
width: 100%;
|
|
49
|
+
height: 500px;
|
|
50
|
+
text-align: center;
|
|
53
51
|
|
|
54
|
-
|
|
55
|
-
--
|
|
52
|
+
background-color: var(--md-sys-color-background);
|
|
53
|
+
color: var(--md-sys-color-on-background);
|
|
56
54
|
}
|
|
57
55
|
|
|
58
|
-
|
|
56
|
+
.header {
|
|
57
|
+
padding: var(--spacing-medium);
|
|
58
|
+
background-color: var(--md-sys-color-primary-container);
|
|
59
|
+
color: var(--md-sys-color-on-primary-container);
|
|
60
|
+
}
|
|
59
61
|
</style>
|
|
60
62
|
|
|
63
|
+
<script>
|
|
64
|
+
document.body.classList.add('${theme}')
|
|
65
|
+
</script>
|
|
66
|
+
|
|
61
67
|
<div class="header">
|
|
62
68
|
<div class="filters">
|
|
63
69
|
<ox-search-form
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-search-form-change-handler.stories.js","sourceRoot":"","sources":["../../stories/ox-search-form-change-handler.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,qCAAqC,CAAA;AAE5C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAG1C,eAAe;IACb,KAAK,EAAE,+BAA+B;IACtC,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,MAAM,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC7B,gBAAgB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACxC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAClC;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,MAAM,EAAE,gBAAgB,EAAE,SAAS,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2CvF,kBAAkB,CAAC,OAAO;;;;;;kBAMd,MAAO;qBACJ,SAAS;4BACF,gBAAgB;kBAC1B,CAAC,CAAc,EAAE,EAAE;IAC3B,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;AAC9C,CAAC;;;;;CAKR,CAAA;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,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,MAAM,EAAE;QACN;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,WAAW;YACjB,KAAK,EAAE,WAAW;YAClB,OAAO,EAAE,KAAK,EAAE,IAAkB,EAAE,EAAE;gBACpC,MAAM,KAAK,CAAC,IAAI,CAAC,CAAA,CAAC,qBAAqB;gBACvC,OAAO;oBACL;wBACE,OAAO,EAAE,EAAE;wBACX,KAAK,EAAE,EAAE;qBACV;iBACF,CAAC,MAAM,CACN,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;oBAChB,OAAO;wBACL,OAAO,EAAE,CAAC,CAAC,IAAI;wBACf,KAAK,EAAE,CAAC,CAAC,EAAE;qBACZ,CAAA;gBACH,CAAC,CAAC,CACH,CAAA;YACH,CAAC;YACD,QAAQ,EAAE,GAAG,EAAE,CAAC,KAAK;SACtB;QACD;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,CAAC,WAAW,CAAC;YACtB,OAAO,EAAE,KAAK,EAAE,IAAkB,EAAE,EAAE;gBACpC,MAAM,KAAK,CAAC,IAAI,CAAC,CAAA,CAAC,qBAAqB;gBACvC,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,CAAA;gBAC9C,MAAM,SAAS,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,GAAG,CAAC,WAAW,CAAC,CAAA;gBAC5C,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;gBAEnC,MAAM,QAAQ,GAAG,SAAS,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,CAAC,CAAA;gBACpE,MAAM,KAAK,GAAG,QAAQ;oBACpB,CAAC,CAAC,QAAQ,CAAC,KAAK;oBAChB,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,SAAS,EAAE,EAAE;wBAClC,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;wBACjC,OAAO,GAAG,CAAA;oBACZ,CAAC,EAAE,EAAW,CAAC,CAAA;gBAEnB,OAAO;oBACL;wBACE,OAAO,EAAE,EAAE;wBACX,KAAK,EAAE,EAAE;qBACV;iBACF,CAAC,MAAM,CACN,KAAK,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,EAAE;oBACnB,OAAO;wBACL,OAAO,EAAE,CAAC,CAAC,IAAI;wBACf,KAAK,EAAE,CAAC,CAAC,EAAE;qBACZ,CAAA;gBACH,CAAC,CAAC,CACH,CAAA;YACH,CAAC;YACD,QAAQ,EAAE,GAAG,EAAE,CAAC,KAAK;SACtB;QACD;YACE,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,UAAU;YACjB,OAAO,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC;YAC9B,OAAO,EAAE,KAAK,EAAE,IAAkB,EAAE,EAAE;gBACpC,MAAM,KAAK,CAAC,IAAI,CAAC,CAAA,CAAC,qBAAqB;gBACvC,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,CAAA;gBAC9C,MAAM,SAAS,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,GAAG,CAAC,WAAW,CAAC,CAAA;gBAC5C,MAAM,IAAI,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,GAAG,CAAC,MAAM,CAAC,CAAA;gBAClC,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,SAAS,EAAE,IAAI,CAAC,CAAA;gBAE/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;gBAC9E,MAAM,UAAU,GAAG,IAAI,KAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,CAAA,CAAA;gBAClE,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;YACxD,CAAC;SACF;KACF;IACD,gBAAgB,EAAE,IAAI;IACtB,SAAS,EAAE,IAAI;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC/C,cAAc,CAAC,IAAI,GAAG;IACpB,MAAM,EAAE;QACN;YACE,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,SAAS;YAChB,WAAW,EAAE,iBAAiB;YAC9B,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE;YAC/B,QAAQ,EAAE,KAAK,CAAC,EAAE;gBAChB,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;gBAC7B,OAAO,KAAK,CAAA;YACd,CAAC;SACF;QACD;YACE,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE;SAChC;QACD;YACE,KAAK,EAAE,KAAK;YACZ,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE;SAChC;QACD;YACE,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE;SAChC;QACD;YACE,KAAK,EAAE,aAAa;YACpB,IAAI,EAAE,aAAa;YACnB,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE;SAChC;KACF;IACD,gBAAgB,EAAE,IAAI;IACtB,SAAS,EAAE,IAAI;CAChB,CAAA","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"]}
|
|
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'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\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 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 theme: 'light' | 'dark'\n}\n\nconst Template: Story<ArgTypes> = ({ fields, hideSearchButton, autofocus, theme }: 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 <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\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"]}
|
|
@@ -21,6 +21,7 @@ const Template = ({ fields, hideSearchButton, autofocus, resetTarget, theme = 'l
|
|
|
21
21
|
<link href="/themes/light.css" rel="stylesheet" />
|
|
22
22
|
<link href="/themes/dark.css" rel="stylesheet" />
|
|
23
23
|
<link href="/themes/spacing.css" rel="stylesheet" />
|
|
24
|
+
<link href="/themes/form-theme.css" rel="stylesheet" />
|
|
24
25
|
|
|
25
26
|
<link
|
|
26
27
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
@@ -1 +1 @@
|
|
|
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"]}
|
|
1
|
+
{"version":3,"file":"ox-search-form.stories.js","sourceRoot":"","sources":["../../stories/ox-search-form.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,qCAAqC,CAAA;AAE5C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAI1F,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,MAAM,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC7B,gBAAgB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACxC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACjC,WAAW,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAClC,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAgBD,MAAM,QAAQ,GAAoB,CAAC,EACjC,MAAM,EACN,gBAAgB,EAChB,SAAS,EACT,WAAW,EACX,KAAK,GAAG,OAAO,EACN,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;MAsBd,iBAAiB,CAAC,OAAO;;;;MAIzB,kBAAkB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;mCAqBG,KAAK;;;;;;kBAMtB,MAAO;qBACJ,SAAS;4BACF,gBAAgB;kBAC1B,CAAC,CAAc,EAAE,EAAE;IAC3B,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;AAC9C,CAAC;;;;;;mBAMU,GAAG,EAAE,WAAC,OAAA,MAAC,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAS,0CAAE,KAAK,CAAC,WAAW,CAAC,CAAA,EAAA;mBAC3E,GAAG,EAAE,WAAC,OAAA,MAAC,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAS,0CAAE,KAAK,EAAE,CAAA,EAAA;CAClF,CAAA;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,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,MAAM,EAAE;QACN;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,WAAW;YACjB,KAAK,EAAE,WAAW;YAClB,OAAO,EAAE,KAAK,EAAE,IAAkB,EAAE,EAAE;gBACpC,MAAM,KAAK,CAAC,IAAI,CAAC,CAAA,CAAC,qBAAqB;gBACvC,OAAO;oBACL;wBACE,OAAO,EAAE,EAAE;wBACX,KAAK,EAAE,EAAE;qBACV;iBACF,CAAC,MAAM,CACN,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;oBAChB,OAAO;wBACL,OAAO,EAAE,CAAC,CAAC,IAAI;wBACf,KAAK,EAAE,CAAC,CAAC,EAAE;qBACZ,CAAA;gBACH,CAAC,CAAC,CACH,CAAA;YACH,CAAC;SACF;QACD;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,CAAC,WAAW,CAAC;YACtB,OAAO,EAAE,KAAK,EAAE,IAAkB,EAAE,EAAE;gBACpC,MAAM,KAAK,CAAC,IAAI,CAAC,CAAA,CAAC,qBAAqB;gBACvC,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,CAAA;gBAC9C,MAAM,SAAS,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,GAAG,CAAC,WAAW,CAAC,CAAA;gBAC5C,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;gBAEnC,MAAM,QAAQ,GAAG,SAAS,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,CAAC,CAAA;gBACpE,MAAM,KAAK,GAAG,QAAQ;oBACpB,CAAC,CAAC,QAAQ,CAAC,KAAK;oBAChB,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,SAAS,EAAE,EAAE;wBAClC,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;wBACjC,OAAO,GAAG,CAAA;oBACZ,CAAC,EAAE,EAAW,CAAC,CAAA;gBAEnB,OAAO;oBACL;wBACE,OAAO,EAAE,EAAE;wBACX,KAAK,EAAE,EAAE;qBACV;iBACF,CAAC,MAAM,CACN,KAAK,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,EAAE;oBACnB,OAAO;wBACL,OAAO,EAAE,CAAC,CAAC,IAAI;wBACf,KAAK,EAAE,CAAC,CAAC,EAAE;qBACZ,CAAA;gBACH,CAAC,CAAC,CACH,CAAA;YACH,CAAC;SACF;QACD;YACE,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,UAAU;YACjB,OAAO,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC;YAC9B,OAAO,EAAE,KAAK,EAAE,IAAkB,EAAE,EAAE;gBACpC,MAAM,KAAK,CAAC,IAAI,CAAC,CAAA,CAAC,qBAAqB;gBACvC,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,CAAA;gBAC9C,MAAM,SAAS,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,GAAG,CAAC,WAAW,CAAC,CAAA;gBAC5C,MAAM,IAAI,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,GAAG,CAAC,MAAM,CAAC,CAAA;gBAClC,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,SAAS,EAAE,IAAI,CAAC,CAAA;gBAE/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;gBAC9E,MAAM,UAAU,GAAG,IAAI,KAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,CAAA,CAAA;gBAClE,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;YACxD,CAAC;SACF;KACF;IACD,gBAAgB,EAAE,IAAI;IACtB,WAAW,EAAE;QACX,QAAQ,EAAE,EAAE;KACb;IACD,SAAS,EAAE,IAAI;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC/C,cAAc,CAAC,IAAI,GAAG;IACpB,MAAM,EAAE;QACN;YACE,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,KAAK;YACZ,WAAW,EAAE,iBAAiB;YAC9B,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE;SAChC;QACD;YACE,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE;SAChC;QACD;YACE,KAAK,EAAE,KAAK;YACZ,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE;SAChC;QACD;YACE,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE;SAChC;QACD;YACE,KAAK,EAAE,aAAa;YACpB,IAAI,EAAE,aAAa;YACnB,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE;SAChC;KACF;IACD,gBAAgB,EAAE,IAAI;IACtB,WAAW,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;IAC9B,SAAS,EAAE,IAAI;CAChB,CAAA","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 <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 <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"]}
|