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

package/stories/ox-input-key-values.stories.ts

@@ -1,97 +0,0 @@
-import '../src/ox-input-key-values.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-input-key-values',
-  component: 'ox-input-key-values',
-  argTypes: {
-    name: { control: 'text' },
-    value: { control: 'object' },
-    options: { control: 'object' },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  name?: string
-  value?: object
-  options?: object
-  disabled?: boolean
-}
-
-const Template: Story<ArgTypes> = ({ name = 'key-values', value = {}, options = [], disabled }: 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="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>
-    .container {
-      height: 500px;
-      text-align: center;
-      padding: 20px;
-
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  </style>
-
-  <div class="container md-typescale-body-large-prominent">
-    <ox-input-key-values
-      @change=${(e: Event) => {
-        console.log((e.target as HTMLInputElement).value)
-      }}
-      name=${name}
-      .value=${value}
-      .options=${options}
-      ?disabled=${disabled}
-    >
-    </ox-input-key-values>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  name: 'key-values',
-  value: {
-    A: 'A',
-    B: 'B',
-    C: 'C'
-  },
-  options: [
-    {
-      display: '초기값',
-      value: 'ABC'
-    },
-    {
-      display: '후기값',
-      value: 'XYZ'
-    }
-  ]
-}

package/stories/ox-input-mass-fraction.stories.ts

@@ -1,102 +0,0 @@
-import '../src/ox-input-mass-fraction.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-input-mass-fraction',
-  component: 'ox-input-mass-fraction',
-  argTypes: {
-    name: { control: 'text' },
-    value: { control: 'object' },
-    defaultValue: { control: 'object' },
-    composable: { control: 'boolean' },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  name?: string
-  value?: object
-  defaultValue?: object
-  composable?: boolean
-  disabled?: boolean
-}
-
-const Template: Story<ArgTypes> = ({
-  name = 'mass-fraction',
-  value = {},
-  defaultValue = {},
-  composable = true,
-  disabled
-}: 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="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>
-    .container {
-      height: 500px;
-      text-align: center;
-      padding: 20px;
-
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  </style>
-
-  <div class="container md-typescale-body-large-prominent">
-    <ox-input-mass-fraction
-      @change=${(e: Event) => {
-        console.log((e.target as HTMLInputElement).value)
-      }}
-      name=${name}
-      .value=${value}
-      .defaultValue=${defaultValue}
-      ?composable=${composable}
-      ?disabled=${disabled}
-    >
-    </ox-input-mass-fraction>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  name: 'mass-fraction',
-  value: {
-    H2O: 0.8,
-    N2O: 0.1,
-    CO2: 0.1
-  },
-  composable: true,
-  defaultValue: {
-    H2O: 0.8,
-    N2O: 0.1,
-    CO2: 0.1
-  }
-}

package/stories/ox-input-multiple-colors.stories.ts

@@ -1,72 +0,0 @@
-import '../src/ox-input-multiple-colors.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-input-multiple-colors',
-  component: 'ox-input-multiple-colors',
-  argTypes: {
-    value: { control: 'array' },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  disabled: boolean
-}
-
-const Template: Story<ArgTypes> = ({ disabled }: 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="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>
-    .container {
-      height: 500px;
-      text-align: center;
-      padding: 20px;
-
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  </style>
-
-  <div class="container md-typescale-body-large-prominent">
-    <ox-input-multiple-colors
-      .value=${['red', 'yellow']}
-      @change=${(e: Event) => {
-        console.log((e.target as HTMLInputElement).value)
-      }}
-      ?disabled=${disabled}
-    >
-    </ox-input-multiple-colors>
-  </div>
-`
-
-export const Regular = Template.bind({})

package/stories/ox-input-options.stories.ts

@@ -1,80 +0,0 @@
-import '../src/ox-input-options.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-input-options',
-  component: 'ox-input-options',
-  argTypes: {
-    value: { control: 'object' },
-    name: { control: 'text' },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  name?: string
-  value?: object
-  disabled?: boolean
-}
-
-const Template: Story<ArgTypes> = ({ name = 'options', value = {}, disabled }: 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="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>
-    .container {
-      height: 500px;
-      text-align: center;
-      padding: 20px;
-
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  </style>
-
-  <div class="container md-typescale-body-large-prominent">
-    <ox-input-options
-      @change=${(e: Event) => {
-        console.log((e.target as HTMLInputElement).value)
-      }}
-      name=${name}
-      .value=${value}
-      ?disabled=${disabled}
-    >
-    </ox-input-options>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  name: 'options',
-  value: [{ text: 'SHOOSE', value: 'Shoose' }]
-}

package/stories/ox-input-partition-keys.stories.ts

@@ -1,84 +0,0 @@
-import '../src/ox-input-partition-keys.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-input-partition-keys',
-  component: 'ox-input-partition-keys',
-  argTypes: {
-    value: { control: 'object' },
-    name: { control: 'text' },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  name?: string
-  value?: object
-  disabled?: boolean
-}
-
-const Template: Story<ArgTypes> = ({ name = 'partition-keys', value = {}, disabled }: 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="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>
-    .container {
-      height: 500px;
-      text-align: center;
-      padding: 20px;
-
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  </style>
-
-  <div class="container md-typescale-body-large-prominent">
-    <ox-input-partition-keys
-      @change=${(e: Event) => {
-        console.log((e.target as HTMLInputElement).value)
-      }}
-      name=${name}
-      .value=${value}
-      ?disabled=${disabled}
-    >
-    </ox-input-partition-keys>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  name: 'partition-keys',
-  value: {
-    A: 'A',
-    B: 'B',
-    C: 'C'
-  }
-}

package/stories/ox-input-privilege.stories.ts

@@ -1,108 +0,0 @@
-import '../src/ox-input-privilege.js'
-import '../src/locale/locale-picker.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-export default {
-  title: 'ox-input-privilege',
-  component: 'ox-input-privilege',
-  argTypes: {
-    value: { control: 'number' },
-    name: { control: 'text' },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  name?: string
-  privileges: { name: string; category: string; description: string }[]
-  value?: {
-    privilege: string
-    category: string
-    owner: boolean
-    super: boolean
-  } | null
-  disabled?: boolean
-}
-
-const Template: Story<ArgTypes> = ({ name = 'privilege', value = null, privileges, disabled }: 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="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>
-    .container {
-      height: 500px;
-      text-align: center;
-      padding: 20px;
-
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  </style>
-
-  <div class="container md-typescale-body-large-prominent">
-    <locale-picker></locale-picker>
-    <br /><br />
-
-    <ox-input-privilege
-      @change=${(e: Event) => {
-        console.log((e.target as HTMLInputElement).value)
-      }}
-      name=${name}
-      .value=${value}
-      .privileges=${privileges}
-      ?disabled=${disabled}
-    >
-    </ox-input-privilege>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  name: 'privilege',
-  privileges: [
-    {
-      name: 'query',
-      category: 'aaa',
-      description: 'readable aaa'
-    },
-    {
-      name: 'mutation',
-      category: 'aaa',
-      description: 'writable aaa'
-    }
-  ],
-  value: {
-    privilege: 'mutation',
-    category: 'aaa',
-    owner: true,
-    super: true
-  }
-}

package/stories/ox-input-quantifier.stories.ts

@@ -1,80 +0,0 @@
-import '../src/ox-input-quantifier.js'
-
-import { html, TemplateResult } from 'lit'
-import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
-
-import { OxInputQuantifier } from '../src/ox-input-quantifier.js'
-
-export default {
-  title: 'ox-input-quantifier',
-  component: 'ox-input-quantifier',
-  argTypes: {
-    name: { control: 'text' },
-    value: { control: 'array' },
-    disabled: { control: 'boolean' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  name?: string
-  value?: number[]
-  disabled?: boolean
-}
-
-const Template: Story<ArgTypes> = ({ name = 'quantifier', value, disabled }: 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="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>
-    .container {
-      height: 500px;
-      text-align: center;
-      padding: 20px;
-
-      background-color: var(--md-sys-color-primary-container);
-      color: var(--md-sys-color-on-primary-container);
-    }
-  </style>
-
-  <div class="container md-typescale-body-large-prominent">
-    <ox-input-quantifier
-      name=${name}
-      .value=${value}
-      @change=${(e: Event) => console.log((e.target as OxInputQuantifier).value)}
-      ?disabled=${disabled}
-    >
-    </ox-input-quantifier>
-  </div>
-`
-
-export const Regular = Template.bind({})
-Regular.args = {
-  name: 'quantifier',
-  value: [10, 100]
-}