@operato/form 2.0.0-alpha.0 → 2.0.0-alpha.103

package/dist/src/styles/search-form-styles.js

@@ -83,7 +83,7 @@ export const SearchFormStyles = css `
       grid-gap: 10px 5px;
       background-color: var(--search-form-narrow-background-color);
 
-      max-height: 54px;
+      max-height: 100%;
       overflow-y: auto;
     }
     .search-form label {

package/dist/src/styles/search-form-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-form-styles.js","sourceRoot":"","sources":["../../../src/styles/search-form-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyJlC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const SearchFormStyles = css`\n  :host {\n    overflow: auto;\n    background-color: var(--search-form-background-color);\n  }\n\n  .search-form {\n    position: relative;\n    display: grid;\n    grid-template-columns: repeat(24, 1fr);\n    grid-gap: var(--form-grid-gap);\n    grid-auto-rows: minmax(24px, auto);\n    padding: var(--search-form-box-padding);\n    border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  }\n  .search-form label {\n    grid-column: span 3;\n    text-align: right;\n    align-self: center;\n    text-transform: capitalize;\n\n    color: var(--label-color);\n    font: var(--label-font);\n  }\n\n  .search-form input,\n  .search-form select {\n    grid-column: span 9;\n\n    border: var(--input-field-border);\n    border-radius: var(--input-field-border-radius);\n    padding: var(--input-field-padding);\n    font: var(--input-field-font);\n    max-width: 85%;\n    color: var(--input-field-color);\n    background-color: var(--input-field-background-color);\n  }\n\n  .search-form select {\n    min-height: 25px;\n    max-width: calc(85% + 18px);\n  }\n\n  .search-form input[type='checkbox'],\n  .search-form input[type='radio'] {\n    justify-self: end;\n    align-self: center;\n    grid-column: span 3 / auto;\n    position: relative;\n    left: 17px;\n  }\n\n  .search-form input[type='checkbox'] + label,\n  .search-form input[type='radio'] + label {\n    padding-left: 17px;\n    text-align: left;\n    align-self: center;\n    grid-column: span 9 / auto;\n\n    font: var(--form-sublabel-font);\n    color: var(--form-sublabel-color);\n  }\n\n  input:focus {\n    outline: none;\n    border: 1px solid var(--focus-background-color);\n  }\n  input[type='checkbox'] {\n    margin: 0;\n  }\n\n  [search] {\n    position: absolute;\n    right: 1%;\n    bottom: 15px;\n    color: var(--search-form-icon-color);\n  }\n\n  @media screen and (max-width: 460px) {\n    .search-form {\n      grid-template-columns: repeat(12, 1fr);\n      grid-gap: 10px 5px;\n      background-color: var(--search-form-narrow-background-color);\n\n      max-height: 54px;\n      overflow-y: auto;\n    }\n    .search-form label {\n      grid-column: span 3;\n      padding-right: 5px;\n      align-self: center;\n      color: var(--search-form-narrow-text-color);\n    }\n    .search-form input,\n    .search-form select {\n      grid-column: span 8;\n      max-width: 100%;\n      color: var(--theme-white-color);\n    }\n    .search-form input[type='checkbox'],\n    .search-form input[type='radio'] {\n      justify-self: end;\n      align-self: center;\n      grid-column: span 3 / auto;\n    }\n\n    .search-form input[type='checkbox'] + label,\n    .search-form input[type='radio'] + label {\n      grid-column: span 8 / auto;\n      align-self: center;\n      position: relative;\n      left: 5px;\n      color: var(--search-form-narrow-text-color);\n    }\n\n    [search] {\n      right: 3%;\n      color: var(--search-form-narrow-text-color);\n    }\n  }\n  @media (min-width: 461px) and (max-width: 1024px) {\n    .search-form select {\n      max-width: calc(85% + 10px);\n    }\n  }\n  @media screen and (min-width: 1201px) and (max-width: 2000px) {\n    .search-form {\n      grid-template-columns: repeat(36, 1fr);\n    }\n    .search-form input,\n    .search-form select {\n      max-width: 90%;\n    }\n    .search-form select {\n      max-width: calc(90% + 18px);\n    }\n  }\n\n  @media screen and (min-width: 2001px) {\n    .search-form {\n      grid-template-columns: repeat(48, 1fr);\n    }\n    .search-form input,\n    .search-form select {\n      max-width: 90%;\n    }\n    .search-form select {\n      max-width: calc(90% + 18px);\n    }\n    [search] {\n      right: 0.8%;\n    }\n  }\n`\n"]}
+{"version":3,"file":"search-form-styles.js","sourceRoot":"","sources":["../../../src/styles/search-form-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyJlC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const SearchFormStyles = css`\n  :host {\n    overflow: auto;\n    background-color: var(--search-form-background-color);\n  }\n\n  .search-form {\n    position: relative;\n    display: grid;\n    grid-template-columns: repeat(24, 1fr);\n    grid-gap: var(--form-grid-gap);\n    grid-auto-rows: minmax(24px, auto);\n    padding: var(--search-form-box-padding);\n    border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  }\n  .search-form label {\n    grid-column: span 3;\n    text-align: right;\n    align-self: center;\n    text-transform: capitalize;\n\n    color: var(--label-color);\n    font: var(--label-font);\n  }\n\n  .search-form input,\n  .search-form select {\n    grid-column: span 9;\n\n    border: var(--input-field-border);\n    border-radius: var(--input-field-border-radius);\n    padding: var(--input-field-padding);\n    font: var(--input-field-font);\n    max-width: 85%;\n    color: var(--input-field-color);\n    background-color: var(--input-field-background-color);\n  }\n\n  .search-form select {\n    min-height: 25px;\n    max-width: calc(85% + 18px);\n  }\n\n  .search-form input[type='checkbox'],\n  .search-form input[type='radio'] {\n    justify-self: end;\n    align-self: center;\n    grid-column: span 3 / auto;\n    position: relative;\n    left: 17px;\n  }\n\n  .search-form input[type='checkbox'] + label,\n  .search-form input[type='radio'] + label {\n    padding-left: 17px;\n    text-align: left;\n    align-self: center;\n    grid-column: span 9 / auto;\n\n    font: var(--form-sublabel-font);\n    color: var(--form-sublabel-color);\n  }\n\n  input:focus {\n    outline: none;\n    border: 1px solid var(--focus-background-color);\n  }\n  input[type='checkbox'] {\n    margin: 0;\n  }\n\n  [search] {\n    position: absolute;\n    right: 1%;\n    bottom: 15px;\n    color: var(--search-form-icon-color);\n  }\n\n  @media screen and (max-width: 460px) {\n    .search-form {\n      grid-template-columns: repeat(12, 1fr);\n      grid-gap: 10px 5px;\n      background-color: var(--search-form-narrow-background-color);\n\n      max-height: 100%;\n      overflow-y: auto;\n    }\n    .search-form label {\n      grid-column: span 3;\n      padding-right: 5px;\n      align-self: center;\n      color: var(--search-form-narrow-text-color);\n    }\n    .search-form input,\n    .search-form select {\n      grid-column: span 8;\n      max-width: 100%;\n      color: var(--theme-white-color);\n    }\n    .search-form input[type='checkbox'],\n    .search-form input[type='radio'] {\n      justify-self: end;\n      align-self: center;\n      grid-column: span 3 / auto;\n    }\n\n    .search-form input[type='checkbox'] + label,\n    .search-form input[type='radio'] + label {\n      grid-column: span 8 / auto;\n      align-self: center;\n      position: relative;\n      left: 5px;\n      color: var(--search-form-narrow-text-color);\n    }\n\n    [search] {\n      right: 3%;\n      color: var(--search-form-narrow-text-color);\n    }\n  }\n  @media (min-width: 461px) and (max-width: 1024px) {\n    .search-form select {\n      max-width: calc(85% + 10px);\n    }\n  }\n  @media screen and (min-width: 1201px) and (max-width: 2000px) {\n    .search-form {\n      grid-template-columns: repeat(36, 1fr);\n    }\n    .search-form input,\n    .search-form select {\n      max-width: 90%;\n    }\n    .search-form select {\n      max-width: calc(90% + 18px);\n    }\n  }\n\n  @media screen and (min-width: 2001px) {\n    .search-form {\n      grid-template-columns: repeat(48, 1fr);\n    }\n    .search-form input,\n    .search-form select {\n      max-width: 90%;\n    }\n    .search-form select {\n      max-width: calc(90% + 18px);\n    }\n    [search] {\n      right: 0.8%;\n    }\n  }\n`\n"]}

package/dist/src/types.d.ts

@@ -0,0 +1,59 @@
+import { TemplateResult } from 'lit-html';
+import { OxFiltersFormBase } from './filters/ox-filters-form-base';
+import { OxSearchForm } from './components/ox-search-form';
+export type FilterOperator = 'search' | 'eq' | 'between' | 'gte' | 'lte' | 'is_not_true' | 'in' | 'like' | 'i_like' | 'noteq' | 'is_empty_num_id' | 'is_blank' | 'is_present' | 'is_not_false' | 'is_true' | 'is_false' | 'is_not_null' | 'is_null' | 'notin_with_null' | 'notin' | 'gt' | 'lt' | 'i_nlike' | 'nlike';
+export type SelectOptionObject = {
+    name: string;
+    display?: never;
+    value: string;
+} | {
+    display: string;
+    name?: never;
+    value: string;
+};
+export type SelectOption = SelectOptionObject | string;
+export type FilterChangedCallback = (value: any, form: OxFiltersFormBase) => boolean | Promise<boolean>;
+export type FilterConfig = {
+    name: string;
+    label: string;
+    type: string;
+    operator?: FilterOperator;
+    options?: {
+        [key: string]: any;
+    } | SelectOption[] | ((form: OxFiltersFormBase) => SelectOption[] | Promise<SelectOption[]>);
+    value?: string | number | boolean | {
+        name: string;
+        [params: string]: any;
+    } | string[] | number[] | {
+        name: string;
+        [params: string]: any;
+    }[] | undefined;
+    boundTo?: string[];
+    onchange?: FilterChangedCallback;
+};
+export type FilterValue = {
+    name: string;
+    operator: FilterOperator;
+    value: string | number | boolean | string[] | number[] | undefined;
+};
+export type FilterSelectRenderer = (filter: FilterConfig, value: string | number | boolean | string[] | number[] | any | undefined, owner: Element) => TemplateResult | string | void;
+export type SearchFormField = {
+    type: string;
+    hidden?: boolean;
+    name?: string;
+    id?: string;
+    label?: string;
+    placeholder?: string;
+    value?: any;
+    field?: string;
+    queryName?: string;
+    props?: {
+        [prop: string]: string;
+    };
+    attrs?: string[];
+    options?: SelectOption[] | ((form: OxSearchForm) => SelectOption[] | Promise<SelectOption[]>);
+    boundTo?: string[];
+    handlers?: {
+        [event: string]: EventListener;
+    };
+};

package/dist/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from 'lit-html'\nimport { OxFiltersFormBase } from './filters/ox-filters-form-base'\nimport { OxSearchForm } from './components/ox-search-form'\n\nexport type FilterOperator =\n  | 'search'\n  | 'eq'\n  | 'between'\n  | 'gte'\n  | 'lte'\n  | 'is_not_true'\n  | 'in'\n  | 'like'\n  | 'i_like'\n  | 'noteq'\n  | 'is_empty_num_id'\n  | 'is_blank'\n  | 'is_present'\n  | 'is_not_false'\n  | 'is_true'\n  | 'is_false'\n  | 'is_not_null'\n  | 'is_null'\n  | 'notin_with_null'\n  | 'notin'\n  | 'gt'\n  | 'lt'\n  | 'i_nlike'\n  | 'nlike'\n\nexport type SelectOptionObject =\n  | {\n      name: string\n      display?: never\n      value: string\n    }\n  | {\n      display: string\n      name?: never\n      value: string\n    }\n\nexport type SelectOption = SelectOptionObject | string\n\nexport type FilterChangedCallback = (value: any, form: OxFiltersFormBase) => boolean | Promise<boolean>\n\nexport type FilterConfig = {\n  name: string\n  label: string\n  type: string\n  operator?: FilterOperator\n  options?:\n    | { [key: string]: any }\n    | SelectOption[]\n    | ((form: OxFiltersFormBase) => SelectOption[] | Promise<SelectOption[]>)\n  value?:\n    | string\n    | number\n    | boolean\n    | { name: string; [params: string]: any }\n    | string[]\n    | number[]\n    | { name: string; [params: string]: any }[]\n    | undefined\n  boundTo?: string[]\n  onchange?: FilterChangedCallback\n}\n\nexport type FilterValue = {\n  name: string\n  operator: FilterOperator\n  value: string | number | boolean | string[] | number[] | undefined\n}\n\nexport type FilterSelectRenderer = (\n  filter: FilterConfig,\n  value: string | number | boolean | string[] | number[] | any | undefined,\n  owner: Element\n) => TemplateResult | string | void\n\nexport type SearchFormField = {\n  type: string\n  hidden?: boolean\n  name?: string\n  id?: string\n  label?: string\n  placeholder?: string\n  value?: any\n  field?: string\n  queryName?: string\n  props?: { [prop: string]: string }\n  attrs?: string[]\n  options?: SelectOption[] | ((form: OxSearchForm) => SelectOption[] | Promise<SelectOption[]>)\n  boundTo?: string[]\n  handlers?: { [event: string]: EventListener }\n}\n"]}

package/dist/stories/{ox-filter-form-barcode.stories.js → ox-filters-form-barcode.stories.js}

@@ -1,8 +1,9 @@
+import { CommonHeaderStyles } from '@operato/styles';
 import '../src/filters/ox-filters-form-base.js';
 import { html } from 'lit';
 export default {
     title: 'ox-filters-form-barcode',
-    component: 'ox-filters-form-barcode',
+    component: 'ox-filters-form-base',
     argTypes: {
         value: { control: 'object' },
         filters: { control: 'object' },
@@ -12,21 +13,37 @@ export default {
 const Template = ({ value, filters, urlParamsSensitive }) => html `
   <link href="/themes/app-theme.css" rel="stylesheet" />
   <link href="/themes/form-theme.css" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" 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 {
-    }
+    ${CommonHeaderStyles.cssText}
   </style>
 
-  <ox-filters-form-base
-    .value=${value}
-    .filters=${filters}
-    ?url-params-sensitive=${urlParamsSensitive}
-    @filters-change=${(e) => {
+  <div class="header">
+    <div class="filters">
+      <ox-filters-form-base
+        .value=${value}
+        .filters=${filters}
+        ?url-params-sensitive=${urlParamsSensitive}
+        @filters-change=${(e) => {
     console.log('filters changed', e.detail);
 }}
-  >
-  </ox-filters-form-base>
+      >
+      </ox-filters-form-base>
+    </div>
+  </div>
 `;
 export const Regular = Template.bind({});
 Regular.args = {
@@ -79,4 +96,4 @@ Regular.args = {
         }
     ]
 };
-//# sourceMappingURL=ox-filter-form-barcode.stories.js.map
+//# sourceMappingURL=ox-filters-form-barcode.stories.js.map

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

@@ -0,0 +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;AAE1C,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,sBAAsB;IACjC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;MAkBtF,kBAAkB,CAAC,OAAO;;;;;;iBAMf,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'\n\nexport default {\n  title: 'ox-filters-form-barcode',\n  component: 'ox-filters-form-base',\n  argTypes: {\n    value: { control: 'object' },\n    filters: { control: 'object' },\n    urlParamsSensitive: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  value?: object\n  filters?: object\n  urlParamsSensitive: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: ArgTypes) => html`\n  <link href=\"/themes/app-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    ${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        @filters-change=${(e: CustomEvent) => {\n          console.log('filters changed', e.detail)\n        }}\n      >\n      </ox-filters-form-base>\n    </div>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  filters: [\n    {\n      name: 'test',\n      type: 'barcode',\n      label: 'name',\n      operator: 'eq'\n    },\n    {\n      name: 'active',\n      type: 'boolean',\n      label: 'active',\n      operator: 'eq'\n    },\n    {\n      name: 'sss',\n      type: 'select',\n      label: 'sss',\n      operator: 'eq',\n      options: () => {\n        return [\n          {\n            display: '',\n            value: ''\n          },\n          {\n            display: 'ABC',\n            value: 'ABC'\n          },\n          {\n            display: 'DEF',\n            value: 'DEF'\n          }\n        ]\n      }\n    },\n    {\n      name: 'range',\n      type: 'number',\n      label: 'range',\n      operator: 'between'\n    },\n    {\n      name: 'date-range',\n      type: 'datetime',\n      label: 'date',\n      operator: 'between'\n    }\n  ]\n}\n"]}

package/dist/stories/{ox-filter-form-base.stories.d.ts → ox-filters-form-base-bounded.stories.d.ts}

@@ -1,5 +1,6 @@
 import '../src/filters/ox-filters-form-base.js';
 import { TemplateResult } from 'lit';
+import { FilterConfig, FilterValue } from '../src/index.js';
 declare const _default: {
     title: string;
     component: string;
@@ -22,8 +23,8 @@ interface Story<T> {
     argTypes?: Record<string, unknown>;
 }
 interface ArgTypes {
-    value?: object;
-    filters?: object;
+    value?: FilterValue[];
+    filters?: FilterConfig[];
     urlParamsSensitive: boolean;
 }
 export declare const Regular: Story<ArgTypes>;

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

@@ -0,0 +1,182 @@
+import { CommonHeaderStyles } from '@operato/styles';
+import { sleep } from '@operato/utils';
+import '../src/filters/ox-filters-form-base.js';
+import { html } from 'lit';
+export default {
+    title: 'ox-filters-form-base bounded',
+    component: 'ox-filters-form-base',
+    argTypes: {
+        value: { control: 'object' },
+        filters: { control: 'object' },
+        urlParamsSensitive: { control: 'boolean' }
+    }
+};
+const Template = ({ value, filters, urlParamsSensitive }) => html `
+  <link href="/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-filters-form-base {
+      --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-filters-form-base
+        .value=${value}
+        .filters=${filters}
+        ?url-params-sensitive=${urlParamsSensitive}
+        @filters-change=${(e) => { }}
+      >
+      </ox-filters-form-base>
+    </div>
+  </div>
+`;
+const WAREHOUSE = [
+    {
+        id: '01',
+        name: '제 1 창고',
+        zones: [
+            {
+                id: 'W1Z001',
+                name: 'Zone 01-001',
+                locations: ['L01-001-01', 'L01-001-02', 'L01-001-03', 'L01-001-04', 'L01-001-05']
+            },
+            {
+                id: 'W1Z002',
+                name: 'Zone 01-002',
+                locations: ['L01-002-01', 'L01-002-02', 'L01-002-03', 'L01-002-04', 'L01-002-05']
+            }
+        ]
+    },
+    {
+        id: '02',
+        name: '제 2 창고',
+        zones: [
+            {
+                id: 'W2Z001',
+                name: 'Zone 02-001',
+                locations: ['L02-001-01', 'L02-001-02', 'L02-001-03', 'L02-001-04', 'L02-001-05']
+            },
+            {
+                id: 'W2Z002',
+                name: 'Zone 02-002',
+                locations: ['L02-002-01', 'L02-002-02', 'L02-002-03', 'L02-002-04', 'L02-002-05']
+            }
+        ]
+    }
+];
+export const Regular = Template.bind({});
+Regular.args = {
+    filters: [
+        {
+            name: 'warehouse',
+            type: 'select',
+            label: 'warehouse',
+            operator: 'eq',
+            value: '01',
+            options: async (form) => {
+                await sleep(1000); // 테스트를 위해서 강제로 1초 쉬기
+                return [
+                    {
+                        display: '',
+                        value: ''
+                    }
+                ].concat(WAREHOUSE.map(w => {
+                    return {
+                        display: w.name,
+                        value: w.id
+                    };
+                }));
+            }
+        },
+        {
+            name: 'zone',
+            type: 'select',
+            label: 'zone',
+            operator: 'eq',
+            value: 'W1Z001',
+            boundTo: ['warehouse'],
+            options: async (form) => {
+                await sleep(1000); // 테스트를 위해서 강제로 1초 쉬기
+                const formData = new FormData(await form.form);
+                const warehouse = formData === null || formData === void 0 ? void 0 : formData.get('warehouse');
+                console.log('warehouse', warehouse);
+                const targetWH = warehouse && WAREHOUSE.find(w => w.id == warehouse);
+                const zones = targetWH
+                    ? targetWH.zones
+                    : WAREHOUSE.reduce((sum, warehouse) => {
+                        sum = sum.concat(warehouse.zones);
+                        return sum;
+                    }, []);
+                return [
+                    {
+                        display: '',
+                        value: ''
+                    }
+                ].concat(zones.map((z) => {
+                    return {
+                        display: z.name,
+                        value: z.id
+                    };
+                }));
+            }
+        },
+        {
+            name: 'location',
+            type: 'select',
+            label: 'location',
+            operator: 'eq',
+            value: '',
+            boundTo: ['warehouse', 'zone'],
+            options: async (form) => {
+                await sleep(1000); // 테스트를 위해서 강제로 1초 쉬기
+                const formData = new FormData(await form.form);
+                const warehouse = formData === null || formData === void 0 ? void 0 : formData.get('warehouse');
+                const zone = formData === null || formData === void 0 ? void 0 : formData.get('zone');
+                console.log('warehouse, zone', warehouse, zone);
+                const targetWH = (warehouse && WAREHOUSE.find(w => w.id == warehouse)) || null;
+                const targetZone = zone && (targetWH === null || targetWH === void 0 ? void 0 : targetWH.zones.find(z => z.id == zone));
+                return targetZone ? ['', ...targetZone.locations] : [];
+            }
+        }
+    ]
+};
+//# sourceMappingURL=ox-filters-form-base-bounded.stories.js.map

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

@@ -0,0 +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 { OxFiltersFormBase, FilterConfig, FilterValue } from '../src/index.js'\n\nexport default {\n  title: 'ox-filters-form-base bounded',\n  component: 'ox-filters-form-base',\n  argTypes: {\n    value: { control: 'object' },\n    filters: { control: 'object' },\n    urlParamsSensitive: { control: 'boolean' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  value?: FilterValue[]\n  filters?: FilterConfig[]\n  urlParamsSensitive: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: ArgTypes) => html`\n  <link href=\"/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-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    ${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        @filters-change=${(e: CustomEvent) => {}}\n      >\n      </ox-filters-form-base>\n    </div>\n  </div>\n`\n\nconst WAREHOUSE = [\n  {\n    id: '01',\n    name: '제 1 창고',\n    zones: [\n      {\n        id: 'W1Z001',\n        name: 'Zone 01-001',\n        locations: ['L01-001-01', 'L01-001-02', 'L01-001-03', 'L01-001-04', 'L01-001-05']\n      },\n      {\n        id: 'W1Z002',\n        name: 'Zone 01-002',\n        locations: ['L01-002-01', 'L01-002-02', 'L01-002-03', 'L01-002-04', 'L01-002-05']\n      }\n    ]\n  },\n  {\n    id: '02',\n    name: '제 2 창고',\n    zones: [\n      {\n        id: 'W2Z001',\n        name: 'Zone 02-001',\n        locations: ['L02-001-01', 'L02-001-02', 'L02-001-03', 'L02-001-04', 'L02-001-05']\n      },\n      {\n        id: 'W2Z002',\n        name: 'Zone 02-002',\n        locations: ['L02-002-01', 'L02-002-02', 'L02-002-03', 'L02-002-04', 'L02-002-05']\n      }\n    ]\n  }\n]\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  filters: [\n    {\n      name: 'warehouse',\n      type: 'select',\n      label: 'warehouse',\n      operator: 'eq',\n      value: '01',\n      options: async (form: OxFiltersFormBase) => {\n        await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n        return [\n          {\n            display: '',\n            value: ''\n          }\n        ].concat(\n          WAREHOUSE.map(w => {\n            return {\n              display: w.name,\n              value: w.id\n            }\n          })\n        )\n      }\n    },\n    {\n      name: 'zone',\n      type: 'select',\n      label: 'zone',\n      operator: 'eq',\n      value: 'W1Z001',\n      boundTo: ['warehouse'],\n      options: async (form: OxFiltersFormBase) => {\n        await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n        const formData = new FormData(await form.form)\n        const warehouse = formData?.get('warehouse')\n        console.log('warehouse', warehouse)\n\n        const targetWH = warehouse && WAREHOUSE.find(w => w.id == warehouse)\n        const zones = targetWH\n          ? targetWH.zones\n          : WAREHOUSE.reduce((sum, warehouse) => {\n              sum = sum.concat(warehouse.zones)\n              return sum\n            }, [] as any[])\n\n        return [\n          {\n            display: '',\n            value: ''\n          }\n        ].concat(\n          zones.map((z: any) => {\n            return {\n              display: z.name,\n              value: z.id\n            }\n          })\n        )\n      }\n    },\n    {\n      name: 'location',\n      type: 'select',\n      label: 'location',\n      operator: 'eq',\n      value: '',\n      boundTo: ['warehouse', 'zone'],\n      options: async (form: OxFiltersFormBase) => {\n        await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기\n        const formData = new FormData(await form.form)\n        const warehouse = formData?.get('warehouse')\n        const zone = formData?.get('zone')\n        console.log('warehouse, zone', warehouse, zone)\n\n        const targetWH = (warehouse && WAREHOUSE.find(w => w.id == warehouse)) || null\n        const targetZone = zone && targetWH?.zones.find(z => z.id == zone)\n        return targetZone ? ['', ...targetZone.locations] : []\n      }\n    }\n  ]\n}\n"]}

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

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

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

@@ -0,0 +1,194 @@
+import { CommonHeaderStyles } from '@operato/styles';
+import { sleep } from '@operato/utils';
+import '../src/filters/ox-filters-form-base.js';
+import { html } from 'lit';
+export default {
+    title: 'ox-filters-form-base change-handler',
+    component: 'ox-filters-form-base',
+    argTypes: {
+        value: { control: 'object' },
+        filters: { control: 'object' },
+        urlParamsSensitive: { control: 'boolean' }
+    }
+};
+const Template = ({ value, filters, urlParamsSensitive }) => html `
+  <link href="/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-filters-form-base {
+      --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-filters-form-base
+        .value=${value}
+        .filters=${filters}
+        ?url-params-sensitive=${urlParamsSensitive}
+        @filters-change=${(e) => {
+    const { filters } = e.detail;
+    const { value } = e.currentTarget;
+    console.log('filters-change event fired', filters, value, e.currentTarget);
+}}
+      >
+      </ox-filters-form-base>
+    </div>
+  </div>
+`;
+const WAREHOUSE = [
+    {
+        id: '01',
+        name: '제 1 창고',
+        zones: [
+            {
+                id: 'W1Z001',
+                name: 'Zone 01-001',
+                locations: ['L01-001-01', 'L01-001-02', 'L01-001-03', 'L01-001-04', 'L01-001-05']
+            },
+            {
+                id: 'W1Z002',
+                name: 'Zone 01-002',
+                locations: ['L01-002-01', 'L01-002-02', 'L01-002-03', 'L01-002-04', 'L01-002-05']
+            }
+        ]
+    },
+    {
+        id: '02',
+        name: '제 2 창고',
+        zones: [
+            {
+                id: 'W2Z001',
+                name: 'Zone 02-001',
+                locations: ['L02-001-01', 'L02-001-02', 'L02-001-03', 'L02-001-04', 'L02-001-05']
+            },
+            {
+                id: 'W2Z002',
+                name: 'Zone 02-002',
+                locations: ['L02-002-01', 'L02-002-02', 'L02-002-03', 'L02-002-04', 'L02-002-05']
+            }
+        ]
+    }
+];
+export const Regular = Template.bind({});
+Regular.args = {
+    filters: [
+        {
+            name: 'warehouse',
+            type: 'select',
+            label: 'warehouse',
+            operator: 'eq',
+            value: '01',
+            options: async (form) => {
+                await sleep(1000); // 테스트를 위해서 강제로 1초 쉬기
+                return [
+                    {
+                        display: '',
+                        value: ''
+                    }
+                ].concat(WAREHOUSE.map(w => {
+                    return {
+                        display: w.name,
+                        value: w.id
+                    };
+                }));
+            },
+            onchange: async (value, form) => {
+                await sleep(1000);
+                console.log("won't submit..");
+                return false;
+            }
+        },
+        {
+            name: 'zone',
+            type: 'select',
+            label: 'zone',
+            operator: 'eq',
+            value: 'W1Z001',
+            boundTo: ['warehouse'],
+            options: async (form) => {
+                await sleep(1000); // 테스트를 위해서 강제로 1초 쉬기
+                const formData = new FormData(await form.form);
+                const warehouse = formData === null || formData === void 0 ? void 0 : formData.get('warehouse');
+                console.log('warehouse', warehouse);
+                const targetWH = warehouse && WAREHOUSE.find(w => w.id == warehouse);
+                const zones = targetWH
+                    ? targetWH.zones
+                    : WAREHOUSE.reduce((sum, warehouse) => {
+                        sum = sum.concat(warehouse.zones);
+                        return sum;
+                    }, []);
+                return [
+                    {
+                        display: '',
+                        value: ''
+                    }
+                ].concat(zones.map((z) => {
+                    return {
+                        display: z.name,
+                        value: z.id
+                    };
+                }));
+            },
+            onchange: () => {
+                return false;
+            }
+        },
+        {
+            name: 'location',
+            type: 'select',
+            label: 'location',
+            operator: 'eq',
+            value: '',
+            boundTo: ['warehouse', 'zone'],
+            options: async (form) => {
+                await sleep(1000); // 테스트를 위해서 강제로 1초 쉬기
+                const formData = new FormData(await form.form);
+                const warehouse = formData === null || formData === void 0 ? void 0 : formData.get('warehouse');
+                const zone = formData === null || formData === void 0 ? void 0 : formData.get('zone');
+                console.log('warehouse, zone', warehouse, zone);
+                const targetWH = (warehouse && WAREHOUSE.find(w => w.id == warehouse)) || null;
+                const targetZone = zone && (targetWH === null || targetWH === void 0 ? void 0 : targetWH.zones.find(z => z.id == zone));
+                return targetZone ? ['', ...targetZone.locations] : [];
+            }
+        }
+    ]
+};
+//# sourceMappingURL=ox-filters-form-base-change-handler.stories.js.map

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

@@ -0,0 +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 { 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  }\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=\"/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-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    ${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        @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"]}