feat(components): add SearchableSelect

Author: hobbitronics

components/custom/SearchableSelect/SearchableSelect.svelte

@@ -0,0 +1,86 @@
+<script>
+import { generateRandomID } from '../../../random'
+import { createEventDispatcher } from 'svelte'
+
+export let options = {}
+export let choice = ''
+export let placeholder = ''
+export let padding = '12px'
+export let width = '232px'
+export let maxlength = 255
+export let disabled = false
+
+let randomId = generateRandomID('dataList-')
+
+$: internalChoice = choice
+
+const dispatch = createEventDispatcher()
+
+const onChange = () => options[internalChoice] && dispatch('chosen', options[internalChoice])
+</script>
+
+<style>
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+.custom-field {
+  font-size: 14px;
+  position: relative;
+  border-top: 20px solid transparent;
+}
+
+.custom-field input {
+  border-radius: 8px;
+  border: 1px solid gray;
+  padding: var(--field-padding) 0 var(--field-padding) var(--field-padding);
+}
+
+.custom-field .placeholder {
+  position: absolute;
+  bottom: -52px;
+  top: 23px;
+  transform: translateY(-50%);
+  color: #aaa;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  left: var(--field-padding);
+  width: calc(100% - (var(--field-padding) * 2));
+  transition: top 0.3s ease, color 0.3s ease, font-size 0.3s ease;
+}
+
+.custom-field input:not(:placeholder-shown) + .placeholder,
+.custom-field input:focus + .placeholder {
+  top: 3px;
+  font-size: 10px;
+  color: #222;
+}
+</style>
+
+<label class="custom-field" style="--field-padding: {padding}; {$$props.class}">
+  <input
+    {disabled}
+    {maxlength}
+    class="fs-14 {$$props.class}"
+    style="width: {width}"
+    list={randomId}
+    placeholder="&nbsp;"
+    bind:value={internalChoice}
+    on:change={onChange}
+    on:blur={() => {
+      dispatch('check', internalChoice)
+      internalChoice = choice
+    }}
+    on:focus={() => (internalChoice = '')}
+  />
+  <span class="placeholder">{placeholder}</span>
+</label>
+
+<datalist id={randomId}>
+  {#each Object.keys(options) as option}
+    <option value={option} />
+  {/each}
+</datalist>

components/custom/SearchableSelect/index.js

@@ -0,0 +1,3 @@
+import SearchableSelect from './SearchableSelect.svelte'
+
+export default SearchableSelect

components/custom/index.js

@@ -1,5 +1,6 @@
 import Badge from './Badge'
 import Form from './Form'
 import StaticChip from './StaticChip'
+import SearchableSelect from './SearchableSelect'
 
-export { Badge, Form, StaticChip }
+export { Badge, Form, SearchableSelect, StaticChip }

index.mjs

@@ -27,7 +27,7 @@ import {
   setNotice,
 } from './components/mdc/index.js'
 
-import { Badge, Form, StaticChip } from './components/custom/index.js'
+import { Badge, Form, SearchableSelect, StaticChip } from './components/custom/index.js'
 
 export {
   actions,
@@ -47,6 +47,7 @@ export {
   MoneyInput,
   Progress,
   Select,
+  SearchableSelect,
   Snackbar,
   TabBar,
   TextArea,

stories/SearchableSelect.stories.svelte

@@ -0,0 +1,39 @@
+<script>
+import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
+import { SearchableSelect } from '../components/custom'
+import { copyAndModifyArgs } from './helpers.js'
+
+const args = {
+  options: {
+    'choice 1': '0',
+    'choice 2': '1',
+    'choice 3': '2',
+    'choice 4': '3',
+    'choice 5': '4',
+    'choice 6': '5',
+  },
+  placeholder: 'choice 1',
+  padding: '12px',
+  choice: '',
+  width: '232px',
+  maxlength: 255,
+  'on:chosen': (e) => alert(e.detail + ' chosen'),
+  'on:check': (e) => {
+    !args.options[e.detail] && alert(e.detail + ' not available')
+  },
+  class: '', //only works for global classes
+}
+</script>
+
+<Meta title="Atoms/SearchableSelect" component={SearchableSelect} />
+
+<Template let:args>
+  <SearchableSelect {...args} on:chosen={args['on:chosen']} on:check={args['on:check']} />
+</Template>
+
+<Story name="Default" {args} />
+<Story name="placeholder" args={copyAndModifyArgs(args, { label: 'Label' })} />
+<Story name="Width" args={copyAndModifyArgs(args, { width: '560px' })} />
+<Story name="Disabled" args={copyAndModifyArgs(args, { disabled: true })} />
+<Story name="Maxlength" args={copyAndModifyArgs(args, { maxlength: 25 })} />
+<Story name="padding" args={copyAndModifyArgs(args, { padding: '20px' })} />