@operato/form 8.0.0-beta.0 → 8.0.0-beta.1

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

@@ -1,179 +0,0 @@
-import { CommonHeaderStyles } from '@operato/styles'
-import '../src/filters/ox-filters-form-base.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-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="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
-
-  <link href="/themes/light.css" rel="stylesheet" />
-  <link href="/themes/dark.css" rel="stylesheet" />
-  <link href="/themes/spacing.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>
-    ${MDTypeScaleStyles.cssText}
-  </style>
-
-  <style>
-    ${CommonHeaderStyles.cssText}
-  </style>
-
-  <style>
-    body {
-      width: 100%;
-      height: 500px;
-      text-align: center;
-
-      background-color: var(--md-sys-color-background);
-      color: var(--md-sys-color-on-background);
-    }
-
-    .header {
-      padding: var(--spacing-medium);
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  </style>
-
-  <script>
-    setInterval(() => {
-      const filters = document.body.querySelector('ox-filters-form-base')
-
-      filters.value = filters.value.map(filter => {
-        const { name, value } = filter
-        if (name == 'test') {
-          return {
-            ...filter,
-            value: value + 1
-          }
-        } else {
-          return filter
-        }
-      })
-    }, 10000)
-  </script>
-
-  <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 } }
-      ]
-    }
-  ]
-}

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

@@ -1,253 +0,0 @@
-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'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-search-form change handler',
-  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="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
-
-  <link href="/themes/light.css" rel="stylesheet" />
-  <link href="/themes/dark.css" rel="stylesheet" />
-  <link href="/themes/spacing.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>
-    ${MDTypeScaleStyles.cssText}
-  </style>
-
-  <style>
-    ${CommonHeaderStyles.cssText}
-  </style>
-
-  <style>
-    body {
-      width: 100%;
-      height: 500px;
-      text-align: center;
-
-      background-color: var(--md-sys-color-background);
-      color: var(--md-sys-color-on-background);
-    }
-
-    .header {
-      padding: var(--spacing-medium);
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  </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
-            }
-          })
-        )
-      },
-      onchange: () => false
-    },
-    {
-      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
-            }
-          })
-        )
-      },
-      onchange: () => false
-    },
-    {
-      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',
-      value: 'My Name',
-      placeholder: 'type your name.',
-      readonly: true,
-      props: { searchOper: 'i_like' },
-      onchange: value => {
-        console.log('changed', value)
-        return false
-      }
-    },
-    {
-      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/stories/ox-search-form.stories.ts

@@ -1,258 +0,0 @@
-import { CommonHeaderStyles } from '@operato/styles'
-import { sleep } from '@operato/utils'
-import '../src/components/ox-search-form.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-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' },
-    resetTarget: { control: 'object' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  fields?: SearchFormField[]
-  hideSearchButton?: boolean
-  autofocus?: boolean
-  resetTarget: string[] | { [field: string]: any }
-}
-
-const Template: Story<ArgTypes> = ({ fields, hideSearchButton, autofocus, resetTarget }: ArgTypes) => html`
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
-
-  <link href="/themes/light.css" rel="stylesheet" />
-  <link href="/themes/dark.css" rel="stylesheet" />
-  <link href="/themes/spacing.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>
-    ${MDTypeScaleStyles.cssText}
-  </style>
-
-  <style>
-    ${CommonHeaderStyles.cssText}
-  </style>
-
-  <style>
-    body {
-      width: 100%;
-      height: 500px;
-      text-align: center;
-
-      background-color: var(--md-sys-color-background);
-      color: var(--md-sys-color-on-background);
-    }
-
-    .header {
-      padding: var(--spacing-medium);
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  </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>
-
-  <button @click=${() => (document.querySelector('ox-search-form') as any)?.reset(resetTarget)}>Partial Reset</button>
-  <button @click=${() => (document.querySelector('ox-search-form') as any)?.reset()}>Full Reset</button>
-`
-
-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,
-  resetTarget: {
-    location: ''
-  },
-  autofocus: true
-}
-
-export const RegularContact = Template.bind({})
-RegularContact.args = {
-  fields: [
-    {
-      label: 'name',
-      name: 'name',
-      type: 'text',
-      readonly: true,
-      value: '남상혁',
-      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',
-      readonly: true,
-      props: { searchOper: 'i_like' }
-    },
-    {
-      label: 'description',
-      name: 'description',
-      type: 'text',
-      props: { searchOper: 'i_like' }
-    }
-  ],
-  hideSearchButton: true,
-  resetTarget: ['name', 'email'],
-  autofocus: true
-}

package/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true,
-    "incremental": true,
-    "skipLibCheck": true,
-    "types": ["node", "mocha"]
-  },
-  "include": ["**/*.ts"]
-}