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

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

@@ -0,0 +1,244 @@
+import { CommonHeaderStyles } from '@operato/styles'
+import { sleep } from '@operato/utils'
+import '../src/components/ox-search-form.js'
+
+import { html, TemplateResult } from 'lit'
+import { OxSearchForm, SearchFormField } from '../src/index.js'
+
+export default {
+  title: 'ox-search-form',
+  component: 'ox-search-form',
+  argTypes: {
+    value: { control: 'object' },
+    fields: { control: 'object' },
+    hideSearchButton: { control: 'boolean' },
+    autofocus: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  fields?: SearchFormField[]
+  hideSearchButton?: boolean
+  autofocus?: boolean
+}
+
+const Template: Story<ArgTypes> = ({ fields, hideSearchButton, autofocus }: ArgTypes) => html`
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="/themes/form-theme.css" rel="stylesheet" />
+  <link href="/themes/input-theme.css" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    body {
+      height: 500px;
+    }
+  </style>
+
+  <style>
+    ox-search-form {
+      --input-gap-vertical: 8px;
+      --input-gap-horizontal: 16px;
+
+      --ox-filters-input-placeholder-color: var(--primary-color);
+
+      --ox-filters-input-border: 1px solid rgba(0, 0, 0, 0.2);
+      --ox-filters-input-focus-border: 1px solid var(--primary-color);
+      --ox-filters-input-font: normal 14px var(--theme-font);
+      --ox-filters-input-color: var(--primary-text-color);
+      --ox-filters-input-focus-color: var(--primary-color);
+      --ox-filters-label-font: normal 14px var(--theme-font);
+      --ox-filters-label-color: var(--primary-text-color);
+
+      --ox-filters-form-gap: var(--input-gap-vertical, 8px) var(--input-gap-horizontal, 16px);
+      --ox-filters-input-padding: 6px 2px;
+    }
+
+    ${CommonHeaderStyles.cssText}
+  </style>
+
+  <div class="header">
+    <div class="filters">
+      <ox-search-form
+        .fields=${fields!}
+        ?autofocus=${autofocus}
+        ?hideSearchButton=${hideSearchButton}
+        @change=${(e: CustomEvent) => {
+          console.log('search form changed', e.detail)
+        }}
+      >
+      </ox-search-form>
+    </div>
+  </div>
+`
+
+const WAREHOUSE = [
+  {
+    id: '01',
+    name: '제 1 창고',
+    zones: [
+      {
+        id: 'Z001',
+        name: 'Zone 01-001',
+        locations: ['L01-001-01', 'L01-001-02', 'L01-001-03', 'L01-001-04', 'L01-001-05']
+      },
+      {
+        id: 'Z002',
+        name: 'Zone 01-002',
+        locations: ['L01-002-01', 'L01-002-02', 'L01-002-03', 'L01-002-04', 'L01-002-05']
+      }
+    ]
+  },
+  {
+    id: '02',
+    name: '제 2 창고',
+    zones: [
+      {
+        id: 'Z001',
+        name: 'Zone 02-001',
+        locations: ['L02-001-01', 'L02-001-02', 'L02-001-03', 'L02-001-04', 'L02-001-05']
+      },
+      {
+        id: 'Z002',
+        name: 'Zone 02-002',
+        locations: ['L02-002-01', 'L02-002-02', 'L02-002-03', 'L02-002-04', 'L02-002-05']
+      }
+    ]
+  }
+]
+
+export const Regular = Template.bind({})
+Regular.args = {
+  fields: [
+    {
+      type: 'select',
+      name: 'warehouse',
+      label: 'warehouse',
+      options: async (form: OxSearchForm) => {
+        await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기
+        return [
+          {
+            display: '',
+            value: ''
+          }
+        ].concat(
+          WAREHOUSE.map(w => {
+            return {
+              display: w.name,
+              value: w.id
+            }
+          })
+        )
+      }
+    },
+    {
+      type: 'select',
+      name: 'zone',
+      label: 'zone',
+      boundTo: ['warehouse'],
+      options: async (form: OxSearchForm) => {
+        await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기
+        const formData = new FormData(await form.form)
+        const warehouse = 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
+            }, [] as any[])
+
+        return [
+          {
+            display: '',
+            value: ''
+          }
+        ].concat(
+          zones.map((z: any) => {
+            return {
+              display: z.name,
+              value: z.id
+            }
+          })
+        )
+      }
+    },
+    {
+      name: 'location',
+      type: 'select',
+      label: 'location',
+      boundTo: ['warehouse', 'zone'],
+      options: async (form: OxSearchForm) => {
+        await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기
+        const formData = new FormData(await form.form)
+        const warehouse = formData?.get('warehouse')
+        const zone = formData?.get('zone')
+        console.log('warehouse, zone', warehouse, zone)
+
+        const targetWH = (warehouse && WAREHOUSE.find(w => w.id == warehouse)) || null
+        const targetZone = zone && targetWH?.zones.find(z => z.id == zone)
+        return targetZone ? ['', ...targetZone.locations] : []
+      }
+    }
+  ],
+  hideSearchButton: true,
+  autofocus: true
+}
+
+export const RegularContact = Template.bind({})
+RegularContact.args = {
+  fields: [
+    {
+      label: 'name',
+      name: 'name',
+      type: 'text',
+      placeholder: 'type your name.',
+      props: { searchOper: 'i_like' }
+    },
+    {
+      label: 'email',
+      name: 'email',
+      type: 'text',
+      props: { searchOper: 'i_like' }
+    },
+    {
+      label: 'fax',
+      name: 'fax',
+      type: 'text',
+      props: { searchOper: 'i_like' }
+    },
+    {
+      label: 'phone',
+      name: 'phone',
+      type: 'text',
+      props: { searchOper: 'i_like' }
+    },
+    {
+      label: 'description',
+      name: 'description',
+      type: 'text',
+      props: { searchOper: 'i_like' }
+    }
+  ],
+  hideSearchButton: true,
+  autofocus: true
+}

package/themes/app-theme.css

@@ -1,19 +1,19 @@
 body {
   /* theme color */
-  --primary-color-rgb: 130, 105, 96;
+  --primary-color-rgb: 56, 162, 91;
   --primary-color: rgb(var(--primary-color-rgb));
-  --secondary-color-rgb: 78, 78, 90;
+  --secondary-color-rgb: 71, 97, 114;
   --secondary-color: rgb(var(--secondary-color-rgb));
   --focus-color: var(--theme-white-color);
   --primary-background-color: var(--secondary-color);
-  --secondary-background-color: #283644;
-  --main-section-background-color: #f5f2ee;
+  --secondary-background-color: #183936;
+  --main-section-background-color: #f7f6f4;
   --theme-white-color: #fff;
   --theme-black-color: rgba(0, 0, 0, 0.9);
 
   --focus-background-color: var(--primary-color);
-  --primary-text-color: #3c3938;
-  --secondary-text-color: var(--primary-color);
+  --primary-text-color: var(--theme-black-color);
+  --secondary-text-color: #218f62;
 
   --opacity-dark-color: rgba(0, 0, 0, 0.4);
   --opacity-light-color: rgba(255, 255, 255, 0.8);
@@ -124,7 +124,7 @@ body {
   --label-color: var(--secondary-color);
   --label-text-transform: capitalize;
   --input-margin: var(--margin-narrow) 0;
-  --input-padding: var(--padding-default);
+  --input-padding: 6px 2px;
   --input-min-width: 200px;
   --input-font: normal var(--fontsize-default) var(--theme-font);
   --input-hint-font: normal var(--fontsize-small) var(--theme-font);

package/themes/form-theme.css

@@ -1,4 +1,5 @@
 body {
+  /*  */
   --form-border: none;
   --form-margin: var(--margin-wide);
   --form-max-width: 700px;
@@ -12,7 +13,6 @@ body {
   --legend-text-color: var(--secondary-text-color);
   --legend-border-bottom: 1px solid var(--primary-color);
 
-  --label-padding: 3px 0;
   --label-font: normal 14px var(--theme-font);
   --label-color: var(--secondary-color);
 

package/themes/input-theme.css

@@ -0,0 +1,32 @@
+body {
+  --input-intra-gap: 7px;
+  --input-border: 1px solid rgba(0, 0, 0, 0.1);
+  --input-border-radius: var(--border-radius);
+  --input-font: normal 15px var(--theme-font);
+  --input-color: var(--secondary-color);
+
+  --ox-checkbox-disabled-opacity: 0.5;
+  --ox-checkbox-border-radius: 4px;
+  --ox-checkbox-border: 1px solid rgba(0, 0, 0, 0.3);
+  --ox-checkbox-background-color: #fff;
+  --ox-checkbox-size: 15px;
+  --ox-checkbox-checked-border: 1px solid var(--primary-color);
+  --ox-checkbox-unchecked-border: 1px solid rgba(0, 0, 0, 0.3);
+  --ox-checkbox-checked-background-color: #fff;
+  --ox-checkbox-unchecked-background-color: #fff;
+  --ox-checkbox-fill-color: rgba(0, 0, 0, 0.1);
+  --ox-checkbox-checked-color: var(--primary-color);
+  --ox-checkbox-label-color: var(--label-color);
+  --ox-checkbox-checked-font-weight: bold;
+}
+
+@media screen and (max-width: 480px) {
+  body {
+  }
+}
+
+@media (min-width: 481px) and (max-width: 1024px) {
+  body {
+    --input-font: normal 16px var(--theme-font);
+  }
+}

package/dist/src/filters/types.d.ts

@@ -1,17 +0,0 @@
-import { TemplateResult } from 'lit-html';
-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 FilterConfig = {
-    name: string;
-    label: string;
-    type: string;
-    operator?: FilterOperator;
-    options?: {
-        [key: string]: any;
-    };
-};
-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;

package/dist/src/filters/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/filters/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from 'lit-html'\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 FilterConfig = {\n  name: string\n  label: string\n  type: string\n  operator?: FilterOperator\n  options?: { [key: string]: any }\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"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"ox-filter-form-barcode.stories.js","sourceRoot":"","sources":["../../stories/ox-filter-form-barcode.stories.ts"],"names":[],"mappings":"AAAA,OAAO,wCAAwC,CAAA;AAE/C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,yBAAyB;IACpC,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;;;;;;;;;;aAU/E,KAAK;eACH,OAAO;4BACM,kBAAkB;sBACxB,CAAC,CAAc,EAAE,EAAE;IACnC,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;AAC1C,CAAC;;;CAGJ,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 '../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-barcode',\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  <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n  <style>\n    body {\n    }\n  </style>\n\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`\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.js

@@ -1,82 +0,0 @@
-import '../src/filters/ox-filters-form-base.js';
-import { html } from 'lit';
-export default {
-    title: 'ox-filters-form-base',
-    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="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
-  <style>
-    body {
-    }
-  </style>
-
-  <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>
-`;
-export const Regular = Template.bind({});
-Regular.args = {
-    filters: [
-        {
-            name: 'test',
-            type: 'string',
-            label: 'name',
-            operator: 'eq'
-        },
-        {
-            name: 'active',
-            type: 'boolean',
-            label: 'active',
-            operator: 'eq'
-        },
-        {
-            name: 'sss',
-            type: 'select',
-            label: 'sss',
-            operator: 'eq',
-            options: () => {
-                return [
-                    {
-                        display: '',
-                        value: ''
-                    },
-                    {
-                        display: 'ABC',
-                        value: 'ABC'
-                    },
-                    {
-                        display: 'DEF',
-                        value: 'DEF'
-                    }
-                ];
-            }
-        },
-        {
-            name: 'range',
-            type: 'number',
-            label: 'range',
-            operator: 'between'
-        },
-        {
-            name: 'date-range',
-            type: 'datetime',
-            label: 'date',
-            operator: 'between'
-        }
-    ]
-};
-//# sourceMappingURL=ox-filter-form-base.stories.js.map

package/dist/stories/ox-filter-form-base.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-filter-form-base.stories.js","sourceRoot":"","sources":["../../stories/ox-filter-form-base.stories.ts"],"names":[],"mappings":"AAAA,OAAO,wCAAwC,CAAA;AAE/C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,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;KAC3C;CACF,CAAA;AAcD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;aAU/E,KAAK;eACH,OAAO;4BACM,kBAAkB;sBACxB,CAAC,CAAc,EAAE,EAAE;IACnC,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC,CAAC,MAAM,CAAC,CAAA;AAC1C,CAAC;;;CAGJ,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,QAAQ;YACd,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 '../src/filters/ox-filters-form-base.js'\n\nimport { html, TemplateResult } from 'lit'\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  }\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  <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n  <style>\n    body {\n    }\n  </style>\n\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`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  filters: [\n    {\n      name: 'test',\n      type: 'string',\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/src/filters/types.ts

@@ -1,47 +0,0 @@
-import { TemplateResult } from 'lit-html'
-
-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 FilterConfig = {
-  name: string
-  label: string
-  type: string
-  operator?: FilterOperator
-  options?: { [key: string]: any }
-}
-
-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

package/stories/ox-filter-form-base.stories.ts

@@ -1,97 +0,0 @@
-import '../src/filters/ox-filters-form-base.js'
-
-import { html, TemplateResult } from 'lit'
-
-export default {
-  title: 'ox-filters-form-base',
-  component: 'ox-filters-form-base',
-  argTypes: {
-    value: { control: 'object' },
-    filters: { control: 'object' },
-    urlParamsSensitive: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  value?: object
-  filters?: object
-  urlParamsSensitive: boolean
-}
-
-const Template: Story<ArgTypes> = ({ value, filters, urlParamsSensitive }: ArgTypes) => 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" />
-  <style>
-    body {
-    }
-  </style>
-
-  <ox-filters-form-base
-    .value=${value}
-    .filters=${filters}
-    ?url-params-sensitive=${urlParamsSensitive}
-    @filters-change=${(e: CustomEvent) => {
-      console.log('filters changed', e.detail)
-    }}
-  >
-  </ox-filters-form-base>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  filters: [
-    {
-      name: 'test',
-      type: 'string',
-      label: 'name',
-      operator: 'eq'
-    },
-    {
-      name: 'active',
-      type: 'boolean',
-      label: 'active',
-      operator: 'eq'
-    },
-    {
-      name: 'sss',
-      type: 'select',
-      label: 'sss',
-      operator: 'eq',
-      options: () => {
-        return [
-          {
-            display: '',
-            value: ''
-          },
-          {
-            display: 'ABC',
-            value: 'ABC'
-          },
-          {
-            display: 'DEF',
-            value: 'DEF'
-          }
-        ]
-      }
-    },
-    {
-      name: 'range',
-      type: 'number',
-      label: 'range',
-      operator: 'between'
-    },
-    {
-      name: 'date-range',
-      type: 'datetime',
-      label: 'date',
-      operator: 'between'
-    }
-  ]
-}