@operato/input 2.0.0-alpha.145 → 2.0.0-alpha.146

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "2.0.0-alpha.145",
+  "version": "2.0.0-alpha.146",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -243,5 +243,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c56054ea85315ee52caa16387b54ce73fa4bb2bf"
+  "gitHead": "12ce58704cf117ec80208e44b58e9ae68aebb3cc"
 }

package/src/ox-select.ts

@@ -4,9 +4,10 @@
 
 import '@material/web/icon/icon.js'
 import '@operato/popup/ox-popup-list.js'
+import './ox-checkbox.js'
 
-import { css, html, PropertyValues } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { css, html, render, PropertyValues, nothing } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { OxPopupList } from '@operato/popup'
 import { TooltipStyles } from '@operato/styles'
@@ -27,7 +28,7 @@ function onmouseout(e: Event) {
 }
 
 @customElement('ox-select')
-export class Select extends OxFormField {
+export class OxSelect extends OxFormField {
   static styles = [
     TooltipStyles,
     css`
@@ -137,14 +138,60 @@ export class Select extends OxFormField {
   async updated(changes: PropertyValues<this>) {
     if (changes.has('value')) {
       const popupList = this.querySelector('ox-popup-list') as OxPopupList
-      popupList.value = this.value
+      if (popupList) {
+        popupList.value = this.value
+        await this.requestUpdate()
 
-      await this.requestUpdate()
-
-      this.label = popupList.getSelectedLabels()
+        this.label = popupList.getSelectedLabels()
+      }
     }
   }
 
+  setOptions(
+    options: string[] | { display: string; value: string }[],
+    opt: { multiple?: boolean; withSearch?: boolean } = {}
+  ) {
+    const objOptions = options.map(option => {
+      return typeof option == 'string' ? { display: option, value: option } : option
+    })
+
+    const { multiple, withSearch } = opt || {}
+
+    const template = html`
+      <ox-popup-list
+        align-left
+        nowrap
+        ?multiple=${multiple}
+        attr-selected=${multiple ? 'checked' : ''}
+        ?with-search=${withSearch}
+      >
+        ${multiple
+          ? html`<ox-checkbox
+                @change=${(e: Event) => {
+                  const target = e.target as HTMLInputElement
+                  const options = Array.from(target.parentElement!.querySelectorAll('[option]')).filter(
+                    option => !option.hasAttribute('hidden')
+                  )
+                  options.forEach(option => ((option as HTMLInputElement).checked = target.checked))
+
+                  this.value = options
+                    .map(option =>
+                      (option as HTMLInputElement).checked ? (option as HTMLInputElement).value : undefined
+                    )
+                    .filter(Boolean)
+                }}
+                >set all</ox-checkbox
+              >
+              ${objOptions.map(
+                option => html` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `
+              )} `
+          : html`${objOptions.map(option => html` <div option value=${option.value}>${option.display}</div> `)}`}
+      </ox-popup-list>
+    `
+
+    render(template, this)
+  }
+
   expand() {
     if (this.disabled) {
       return

package/stories/ox-select-set-options.stories.ts

@@ -0,0 +1,188 @@
+import '../src/ox-select.js'
+import '../src/ox-checkbox.js'
+
+import { OxSelect } from '../src/ox-select.js'
+import { html, TemplateResult } from 'lit'
+
+export default {
+  title: 'ox-select-set-options',
+  component: 'ox-select',
+  argTypes: {
+    placeholder: { control: 'text' },
+    name: { control: 'text' },
+    options: { control: 'object' },
+    multiple: { control: 'boolean' },
+    withSearch: { control: 'boolean' },
+    disabled: { control: 'boolean' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  placeholder?: string
+  name?: string
+  value?: object | string
+  options?: string[] | { display: string; value: string }[]
+  multiple?: boolean
+  withSearch?: boolean
+  disabled?: boolean
+}
+
+const Template: Story<ArgTypes> = ({
+  placeholder = 'Checkbox',
+  name = 'hello',
+  value = '',
+  options = [],
+  multiple,
+  withSearch,
+  disabled
+}: ArgTypes) => html`
+  <link href="/themes/app-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"
+  />
+
+  <div style="height: 300px">
+    <ox-select
+      name=${name}
+      @change=${(e: Event) => {
+        console.log((e.target as HTMLInputElement).value)
+      }}
+      placeholder=${placeholder}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+    </ox-select>
+
+    <input
+      type="button"
+      value="set options"
+      @click=${() => {
+        const select = document.querySelector('ox-select') as OxSelect
+        select.setOptions(options, { multiple, withSearch })
+        select.value = JSON.parse(JSON.stringify(value))
+      }}
+    />
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  placeholder: 'single select',
+  name: 'label',
+  value: '',
+  multiple: false,
+  options: [
+    {
+      value: 'A',
+      display: 'LABEL-A'
+    },
+    {
+      value: 'B',
+      display: 'LABEL-B'
+    },
+    {
+      value: 'C',
+      display: 'LABEL-C'
+    },
+    {
+      value: 'TOO LONG VALUE',
+      display: 'LABEL-TOO LONG VALUE'
+    }
+  ]
+}
+
+export const MultipleSelect = Template.bind({})
+MultipleSelect.args = {
+  placeholder: 'multiple select',
+  name: 'multiple',
+  multiple: true,
+  withSearch: true,
+  value: ['B', 'TOO LONG VALUE'],
+  options: [
+    'A',
+    'B',
+    'C',
+    'D',
+    'E',
+    'F',
+    'G',
+    'H',
+    'I',
+    'J',
+    'K',
+    'L',
+    'M',
+    'O',
+    'P',
+    'Q',
+    'R',
+    'S',
+    'T',
+    'U',
+    'V',
+    'W',
+    'X',
+    'Y',
+    'Z',
+    'TOO LONG VALUE'
+  ]
+}
+
+export const MultipleWithCheckbox = Template.bind({})
+MultipleWithCheckbox.args = {
+  placeholder: 'multiple with checkbox',
+  name: 'multiple',
+  multiple: true,
+  withSearch: true,
+  value: ['B', 'C', 'F'],
+  options: [
+    {
+      value: 'A',
+      display: 'A'
+    },
+    {
+      value: 'B',
+      display: 'B'
+    },
+    {
+      value: 'C',
+      display: 'C'
+    },
+    {
+      value: 'D',
+      display: 'D'
+    },
+    {
+      value: 'E',
+      display: 'E'
+    },
+    {
+      value: 'F',
+      display: 'F'
+    },
+    {
+      value: 'G',
+      display: 'G'
+    },
+    {
+      value: 'TOO LONG VALUE',
+      display: 'TOO LONG VALUE'
+    }
+  ]
+}

package/stories/ox-select.stories.ts

@@ -127,9 +127,13 @@ MultipleWithCheckbox.args = {
         option
         @change=${(e: Event) => {
           const target = e.target as HTMLInputElement
-          const options = target.parentElement!.querySelectorAll('[option]')
-          console.log(options)
+          const options = Array.from(target.parentElement!.querySelectorAll('[option]')).filter(
+            option => !option.hasAttribute('hidden')
+          )
           options.forEach(option => ((option as HTMLInputElement).checked = target.checked))
+          ;(target.closest('ox-select') as any)!.value = options
+            .map(option => ((option as HTMLInputElement).checked ? (option as HTMLInputElement).value : undefined))
+            .filter(Boolean)
         }}
         >set all</ox-checkbox
       >