@operato/form 2.0.0-alpha.8 → 2.0.0-alpha.86

package/src/filters/ox-filters-form-base.ts

@@ -7,20 +7,16 @@ import json5 from 'json5'
 import { css, html, LitElement, PropertyValues, TemplateResult } from 'lit'
 import { customElement, property, queryAsync } from 'lit/decorators.js'
 
+import { getDefaultValue } from '@operato/time-calculator'
+
 import { FilterStyles } from './filter-styles.js'
 import { getFilterRenderer } from './registry.js'
-import { FilterConfig, FilterOperator, FilterValue } from './types.js'
+import { FilterConfig, FilterOperator, FilterValue } from '../types.js'
 
 export type QueryFilterRangeValue = [from: number, to: number]
 
-export type QueryFilter = {
-  name: string
-  operator: FilterOperator
-  value: any
-}
-
 @customElement('ox-filters-form-base')
-export class FiltersFormBase extends LitElement {
+export class OxFiltersFormBase extends LitElement {
   static styles = [
     FilterStyles,
     css`
@@ -39,6 +35,7 @@ export class FiltersFormBase extends LitElement {
       form > * {
         display: flex;
         align-items: center;
+        gap: var(--input-intra-gap, 7px);
       }
 
       label span {
@@ -53,8 +50,8 @@ export class FiltersFormBase extends LitElement {
     `
   ]
 
-  @property({ type: Object }) value: FilterValue[] = []
-  @property({ type: Object }) filters: FilterConfig[] = []
+  @property({ type: Array }) value: FilterValue[] = []
+  @property({ type: Array }) filters: FilterConfig[] = []
   @property({ type: Boolean, attribute: 'url-params-sensitive' }) urlParamsSensitive?: boolean
   @property({ type: Boolean, attribute: 'autofocus' }) autofocus: boolean = true
 
@@ -67,19 +64,43 @@ export class FiltersFormBase extends LitElement {
     super.connectedCallback()
 
     this.renderRoot.addEventListener('change', async (e: Event) => {
-      this.dispatchEvent(
-        new CustomEvent('filters-change', {
-          bubbles: true,
-          composed: true,
-          detail: {
-            filters: await this.getQueryFilters(),
-            from: 'filters-form'
-          }
-        })
-      )
+      const { target, detail: value } = e as CustomEvent
+      const name = (target as HTMLInputElement).name
+      const {
+        label,
+        type,
+        operator,
+        value: defaultValue,
+        onchange
+      } = this.filters.find(filter => filter.name == name) || {}
+
+      const keepGoing = onchange ? onchange.call(null, value ?? (target as HTMLInputElement).value, this) : true
+
+      keepGoing &&
+        this.dispatchEvent(
+          new CustomEvent('filters-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+              filters: this.value,
+              from: 'filters-form'
+            }
+          })
+        )
     })
   }
 
+  buildDefaultValue(operator: string, defaultValue: any) {
+    if (defaultValue === undefined) {
+      return
+    }
+    if (operator == 'between') {
+      return (defaultValue as Array<any>).map(v => getDefaultValue(v, this))
+    } else {
+      return getDefaultValue(defaultValue, this)
+    }
+  }
+
   render(): TemplateResult {
     return html`
       <form
@@ -88,14 +109,16 @@ export class FiltersFormBase extends LitElement {
         }}
       >
         ${this.filters.map((filter: FilterConfig) => {
-          const { name, label, type, operator } = filter
+          const { name, label, type, operator, value: defaultValue } = filter
           const idx = operator === 'between' ? 1 : 0
           const renderer = getFilterRenderer(
             operator === 'like' || operator === 'i_like' || operator === 'i_nlike' || operator === 'nlike'
               ? 'text'
               : type
           )[idx]
-          const value = this.value?.find(filter => filter.name == name)?.value
+
+          const value =
+            this.value?.find(filter => filter.name == name)?.value ?? this.buildDefaultValue(operator!, defaultValue)
 
           if (!renderer) {
             return html``
@@ -103,58 +126,64 @@ export class FiltersFormBase extends LitElement {
 
           return type === 'search'
             ? html`<ox-input-search name="search" .value=${value} ?autofocus=${this.autofocus}></ox-input-search>`
-            : type !== 'select'
-            ? html`
-                <label filter-title ?between=${operator == 'between'}
-                  ><span>${label}</span> ${renderer(filter, value, this)}
-                </label>
-              `
-            : operator === 'in'
-            ? html`
-                <ox-select
-                  name=${name}
-                  placeholder=${label}
-                  .value=${value}
-                  @change=${(e: CustomEvent) =>
-                    e.target?.dispatchEvent(
-                      new CustomEvent('filter-change', {
-                        detail: {
-                          name,
-                          operator,
-                          value: e.detail
-                        }
-                      })
-                    )}
-                >
-                  <ox-popup-list multiple attr-selected="checked" with-search>
-                    ${renderer(filter, value, this)}
-                  </ox-popup-list>
-                </ox-select>
-              `
-            : html`
-                <ox-select
-                  name=${name}
-                  placeholder=${label}
-                  .value=${value}
-                  @change=${(e: CustomEvent) =>
-                    e.target?.dispatchEvent(
-                      new CustomEvent('filter-change', {
-                        detail: {
-                          name,
-                          operator,
-                          value: e.detail
-                        }
-                      })
-                    )}
-                >
-                  <ox-popup-list with-search> ${renderer(filter, value, this)} </ox-popup-list>
-                </ox-select>
-              `
+            : type === 'boolean'
+              ? renderer(filter, value, this)
+              : type !== 'select'
+                ? html`
+                    <label filter-title ?between=${operator == 'between'}
+                      ><span>${label}</span> ${renderer(filter, value, this)}
+                    </label>
+                  `
+                : operator === 'in'
+                  ? html`
+                      <ox-select
+                        name=${name}
+                        placeholder=${label}
+                        .value=${value}
+                        @change=${(e: CustomEvent) =>
+                          e.target?.dispatchEvent(
+                            new CustomEvent('filter-change', {
+                              detail: {
+                                name,
+                                operator,
+                                value: e.detail
+                              }
+                            })
+                          )}
+                      >
+                        <ox-popup-list multiple attr-selected="checked" with-search>
+                          ${renderer(filter, value, this)}
+                        </ox-popup-list>
+                      </ox-select>
+                    `
+                  : html`
+                      <ox-select
+                        name=${name}
+                        placeholder=${label}
+                        .value=${value}
+                        @change=${(e: CustomEvent) =>
+                          e.target?.dispatchEvent(
+                            new CustomEvent('filter-change', {
+                              detail: {
+                                name,
+                                operator,
+                                value: e.detail
+                              }
+                            })
+                          )}
+                      >
+                        <ox-popup-list with-search> ${renderer(filter, value, this)} </ox-popup-list>
+                      </ox-select>
+                    `
         })}
       </form>
     `
   }
 
+  getFieldByName(name: string) {
+    return this.renderRoot.querySelector(`[name=${name}]`)
+  }
+
   async updated(changes: PropertyValues<this>) {
     if (changes.has('urlParamsSensitive')) {
       if (this.urlParamsSensitive) {
@@ -218,7 +247,7 @@ export class FiltersFormBase extends LitElement {
     }
   }
 
-  async getQueryFilters(): Promise<QueryFilter[]> {
+  async getQueryFilters(): Promise<FilterValue[]> {
     const formData = new FormData(await this.form)
 
     var filters = this.filters
@@ -257,7 +286,7 @@ export class FiltersFormBase extends LitElement {
           value: filterValue.length === 1 ? filterValue[0] : filterValue
         }
       })
-      .filter(result => result !== undefined) as QueryFilter[]
+      .filter(result => result !== undefined) as FilterValue[]
 
     return filters
   }

package/src/filters/registry.ts

@@ -4,7 +4,7 @@ import { FilterInput } from './filter-input.js'
 import { FilterRangeDate } from './filter-range-date.js'
 import { FilterRangeNumber } from './filter-range-number.js'
 import { FilterSelect } from './filter-select.js'
-import { FilterSelectRenderer } from './types.js'
+import { FilterSelectRenderer } from '../types.js'
 
 var RENDERERS: {
   [name: string]: FilterSelectRenderer[]

package/src/{filters/types.ts → types.ts}

@@ -1,4 +1,5 @@
 import { TemplateResult } from 'lit-html'
+import { OxFiltersFormBase } from './filters/ox-filters-form-base'
 
 export type FilterOperator =
   | 'search'
@@ -32,6 +33,16 @@ export type FilterConfig = {
   type: string
   operator?: FilterOperator
   options?: { [key: string]: any }
+  value?:
+    | string
+    | number
+    | boolean
+    | { name: string; [params: string]: any }
+    | string[]
+    | number[]
+    | { name: string; [params: string]: any }[]
+    | undefined
+  onchange?: FilterChangedCallback
 }
 
 export type FilterValue = {
@@ -45,3 +56,5 @@ export type FilterSelectRenderer = (
   value: string | number | boolean | string[] | number[] | any | undefined,
   owner: Element
 ) => TemplateResult | string | void
+
+export type FilterChangedCallback = (value: any, form: OxFiltersFormBase) => boolean

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

@@ -27,11 +27,19 @@ interface ArgTypes {
 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>
+
+  <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"
+  />
 
   <ox-filters-form-base
     .value=${value}

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

@@ -0,0 +1,150 @@
+import '../src/filters/ox-filters-form-base.js'
+
+import { html, TemplateResult } from 'lit'
+import { OxFiltersFormBase, FilterConfig, FilterValue } from '../src/index.js'
+
+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?: FilterValue[]
+  filters?: FilterConfig[]
+  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/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;
+    }
+  </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: 'search',
+      type: 'search',
+      label: 'search',
+      operator: 'eq',
+      value: ''
+    },
+    {
+      name: 'test',
+      type: 'string',
+      label: 'name',
+      operator: 'eq',
+      value: 'No Name'
+    },
+    {
+      name: 'active',
+      type: 'boolean',
+      label: 'active',
+      operator: 'eq',
+      value: true,
+      onchange: (value, formBase: OxFiltersFormBase) => {
+        const sss = formBase.getFieldByName('sss') as HTMLInputElement
+        sss.value = value ? 'DEF' : 'ABC'
+
+        return false
+      }
+    },
+    {
+      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: 'date',
+      label: 'date',
+      operator: 'between',
+      value: [
+        { name: 'week', params: { relativeWeeks: -1 } },
+        { name: 'today', params: { relativeDays: +1 } }
+      ]
+    }
+  ]
+}

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/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/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'
-    }
-  ]
-}