@operato/input 7.0.0-rc.8 → 7.0.0

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

@@ -9,8 +9,7 @@ export default {
   argTypes: {
     value: { control: 'text' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -24,10 +23,9 @@ interface ArgTypes {
   name?: string
   value?: string | number | object
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'code', value = '', disabled, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'code', 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" />
@@ -56,7 +54,6 @@ const Template: Story<ArgTypes> = ({ name = 'code', value = '', disabled, theme
       height: 500px;
       text-align: center;
       padding: 20px;
-
     }
 
     ox-input-data {
@@ -65,10 +62,6 @@ const Template: Story<ArgTypes> = ({ name = 'code', value = '', disabled, theme
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-data
       @change=${(e: Event) => {

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

@@ -9,8 +9,7 @@ export default {
   argTypes: {
     value: { control: 'object' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -24,10 +23,9 @@ interface ArgTypes {
   name?: string
   value?: object | string
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'options', value, disabled, theme = 'light' }: ArgTypes) => html`
+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" />
@@ -62,10 +60,6 @@ const Template: Story<ArgTypes> = ({ name = 'options', value, disabled, theme =
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container">
     <ox-input-direction
       @change=${(e: Event) => {

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

@@ -10,8 +10,7 @@ export default {
   argTypes: {
     value: { control: 'number' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -25,10 +24,9 @@ interface ArgTypes {
   name?: string
   value?: number
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'duration', value = 3601, disabled, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'duration', value = 3601, 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" />
@@ -63,10 +61,6 @@ const Template: Story<ArgTypes> = ({ name = 'duration', value = 3601, disabled,
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <locale-picker></locale-picker>
     <br /><br />

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

@@ -15,8 +15,7 @@ export default {
     description: { control: 'text' },
     hideFileList: { control: 'boolean' },
     attachFileList: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -36,7 +35,6 @@ interface ArgTypes {
   hideFileList?: boolean
   attachFileList?: boolean
   disabled?: boolean
-  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -48,8 +46,7 @@ const Template: Story<ArgTypes> = ({
   description,
   hideFileList = false,
   attachFileList = false,
-  disabled,
-  theme = 'light'
+  disabled
 }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
@@ -85,10 +82,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-file
       label=${label}

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

@@ -10,8 +10,7 @@ export default {
     placeholder: { control: 'text' },
     name: { control: 'text' },
     value: { control: 'array' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -26,16 +25,9 @@ interface ArgTypes {
   name?: string
   value?: string[]
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({
-  placeholder = 'hashtag',
-  name = 'hello',
-  value = [],
-  disabled,
-  theme = 'light'
-}: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ placeholder = 'hashtag', name = 'hello', 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" />
@@ -70,10 +62,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-hashtags
       @change=${(e: Event) => console.log('changed', (e.target as HTMLInputElement).value)}

package/stories/ox-input-i18n-label.stories.ts

@@ -9,8 +9,7 @@ export default {
   argTypes: {
     name: { control: 'text' },
     value: { control: 'object' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -24,10 +23,9 @@ interface ArgTypes {
   name?: string
   value?: object
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'values', value, disabled, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'values', 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" />
@@ -62,10 +60,6 @@ const Template: Story<ArgTypes> = ({ name = 'values', value, disabled, theme = '
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-i18n-label
       @change=${(e: Event) => {

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

@@ -10,8 +10,7 @@ export default {
     name: { control: 'text' },
     value: { control: 'object' },
     options: { control: 'object' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -26,16 +25,9 @@ interface ArgTypes {
   value?: object
   options?: object
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({
-  name = 'key-values',
-  value = {},
-  options = [],
-  disabled,
-  theme = 'light'
-}: ArgTypes) => html`
+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" />
@@ -70,10 +62,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-key-values
       @change=${(e: Event) => {

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

@@ -11,8 +11,7 @@ export default {
     value: { control: 'object' },
     defaultValue: { control: 'object' },
     composable: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -28,7 +27,6 @@ interface ArgTypes {
   defaultValue?: object
   composable?: boolean
   disabled?: boolean
-  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -36,8 +34,7 @@ const Template: Story<ArgTypes> = ({
   value = {},
   defaultValue = {},
   composable = true,
-  disabled,
-  theme = 'light'
+  disabled
 }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
@@ -73,10 +70,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-mass-fraction
       @change=${(e: Event) => {

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

@@ -8,8 +8,7 @@ export default {
   component: 'ox-input-multiple-colors',
   argTypes: {
     value: { control: 'array' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -21,10 +20,9 @@ interface Story<T> {
 
 interface ArgTypes {
   disabled: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ disabled, theme = 'light' }: ArgTypes) => html`
+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" />
@@ -59,10 +57,6 @@ const Template: Story<ArgTypes> = ({ disabled, theme = 'light' }: ArgTypes) => h
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-multiple-colors
       .value=${['red', 'yellow']}

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

@@ -9,8 +9,7 @@ export default {
   argTypes: {
     value: { control: 'object' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -24,10 +23,9 @@ interface ArgTypes {
   name?: string
   value?: object
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'options', value = {}, disabled, theme = 'light' }: ArgTypes) => html`
+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" />
@@ -62,10 +60,6 @@ const Template: Story<ArgTypes> = ({ name = 'options', value = {}, disabled, the
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-options
       @change=${(e: Event) => {

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

@@ -9,8 +9,7 @@ export default {
   argTypes: {
     value: { control: 'object' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -24,15 +23,9 @@ interface ArgTypes {
   name?: string
   value?: object
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({
-  name = 'partition-keys',
-  value = {},
-  disabled,
-  theme = 'light'
-}: ArgTypes) => html`
+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" />
@@ -67,10 +60,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-partition-keys
       @change=${(e: Event) => {

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

@@ -10,8 +10,7 @@ export default {
   argTypes: {
     value: { control: 'number' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -31,16 +30,9 @@ interface ArgTypes {
     super: boolean
   } | null
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({
-  name = 'privilege',
-  value = null,
-  privileges,
-  disabled,
-  theme = 'light'
-}: ArgTypes) => html`
+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" />
@@ -75,10 +67,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <locale-picker></locale-picker>
     <br /><br />

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

@@ -11,8 +11,7 @@ export default {
   argTypes: {
     name: { control: 'text' },
     value: { control: 'array' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -26,10 +25,9 @@ interface ArgTypes {
   name?: string
   value?: number[]
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'quantifier', value, disabled, theme = 'light' }: ArgTypes) => html`
+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" />
@@ -64,10 +62,6 @@ const Template: Story<ArgTypes> = ({ name = 'quantifier', value, disabled, theme
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-quantifier
       name=${name}

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

@@ -12,8 +12,7 @@ export default {
     step: { control: 'number' },
     min: { control: 'number' },
     max: { control: 'number' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -30,7 +29,6 @@ interface ArgTypes {
   min?: number
   max?: number
   disabled?: boolean
-  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -39,8 +37,7 @@ const Template: Story<ArgTypes> = ({
   step = 1,
   min = 0,
   max = 100,
-  disabled,
-  theme = 'light'
+  disabled
 }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
@@ -76,10 +73,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-range name=${name} value=${value} step=${step} min=${min} max=${max} ?disabled=${disabled}>
     </ox-input-range>

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

@@ -1,4 +1,5 @@
-import '../src/ox-input-search.js'
+/* 어디에서 임포트하는 지는 모르지만, 아래 코멘트를 풀면 중복 정의 오류가 발생한다. */
+// import '../src/ox-input-search.js'
 
 import { html, TemplateResult } from 'lit'
 import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
@@ -11,8 +12,7 @@ export default {
     name: { control: 'text' },
     value: { control: 'text' },
     selectAfterChange: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -28,7 +28,6 @@ interface ArgTypes {
   value?: string
   selectAfterChange?: boolean
   disabled?: boolean
-  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -36,8 +35,7 @@ const Template: Story<ArgTypes> = ({
   name = 'hello',
   value = '',
   selectAfterChange,
-  disabled,
-  theme = 'light'
+  disabled
 }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
@@ -73,10 +71,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-search
       @change=${(e: Event) => console.log('changed', (e.target as HTMLInputElement).value)}

package/stories/ox-input-select-buttons.stories.ts

@@ -11,8 +11,7 @@ export default {
     options: { control: 'object' },
     multiple: { control: 'boolean' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -28,7 +27,6 @@ interface ArgTypes {
   options: object
   multiple?: boolean
   disabled?: boolean
-  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -36,8 +34,7 @@ const Template: Story<ArgTypes> = ({
   value,
   multiple = false,
   options = [],
-  disabled,
-  theme = 'light'
+  disabled
 }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
@@ -73,10 +70,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container">
     <ox-input-select-buttons
       @change=${(e: Event) => {

package/stories/ox-input-table-column-config.stories.ts

@@ -9,8 +9,7 @@ export default {
   argTypes: {
     name: { control: 'text' },
     value: { control: 'object' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -24,15 +23,9 @@ interface ArgTypes {
   name?: string
   value?: object
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({
-  name = 'table-column-config',
-  value = {},
-  disabled,
-  theme = 'light'
-}: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'table-column-config', 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" />
@@ -67,10 +60,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-table-column-config
       @change=${(e: Event) => {

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

@@ -42,8 +42,7 @@ export default {
         'K'
       ]
     },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -60,7 +59,6 @@ interface ArgTypes {
   stdUnit: string
   userUnit: string
   disabled?: boolean
-  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -69,8 +67,7 @@ const Template: Story<ArgTypes> = ({
   value = 0,
   stdUnit = 'kg',
   userUnit,
-  disabled,
-  theme = 'light'
+  disabled
 }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
@@ -106,10 +103,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-unit-number
       name=${name}