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

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

@@ -0,0 +1,206 @@
+import { CommonHeaderStyles } from '@operato/styles'
+import { sleep } from '@operato/utils'
+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 bounded',
+  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="/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: CustomEvent) => {}}
+      >
+      </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: OxFiltersFormBase) => {
+        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: OxFiltersFormBase) => {
+        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',
+      operator: 'eq',
+      value: '',
+      boundTo: ['warehouse', 'zone'],
+      options: async (form: OxFiltersFormBase) => {
+        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] : []
+      }
+    }
+  ]
+}

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

@@ -0,0 +1,218 @@
+import { CommonHeaderStyles } from '@operato/styles'
+import { sleep } from '@operato/utils'
+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 change-handler',
+  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="/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: CustomEvent) => {
+          const { filters } = e.detail
+          const { value } = e.currentTarget as any
+          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: OxFiltersFormBase) => {
+        await sleep(1000) // 테스트를 위해서 강제로 1초 쉬기
+        return [
+          {
+            display: '',
+            value: ''
+          }
+        ].concat(
+          WAREHOUSE.map(w => {
+            return {
+              display: w.name,
+              value: w.id
+            }
+          })
+        )
+      },
+      onchange: async (value: any, form: OxFiltersFormBase) => {
+        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: OxFiltersFormBase) => {
+        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
+            }
+          })
+        )
+      },
+      onchange: () => {
+        return false
+      }
+    },
+    {
+      name: 'location',
+      type: 'select',
+      label: 'location',
+      operator: 'eq',
+      value: '',
+      boundTo: ['warehouse', 'zone'],
+      options: async (form: OxFiltersFormBase) => {
+        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] : []
+      }
+    }
+  ]
+}

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

@@ -0,0 +1,159 @@
+import { CommonHeaderStyles } from '@operato/styles'
+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="/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: CustomEvent) => {
+          console.log('filters changed', e.detail)
+        }}
+      >
+      </ox-filters-form-base>
+    </div>
+  </div>
+`
+
+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 } }
+      ]
+    }
+  ]
+}