merge: #47 from ginger/autocomplete

src/components/inputs/Input.vue

@@ -315,7 +315,8 @@ defineExpose({
   }
 }
 
-.checkbox {
+.checkbox,
+.radio {
   &.rootWrapper {
     width: auto;
 
@@ -357,8 +358,9 @@ defineExpose({
     }
 
     &.rootWrapper--right {
-      grid-template-areas: 'input label .';
-      grid-template-columns: auto auto 1fr;
+      // extend the label to the right for dropdowns
+      grid-template-areas: 'input label';
+      grid-template-columns: auto 1fr;
 
       &.rootWrapper--help {
         grid-template-areas: 'input label help';

src/components/inputs/common.js

@@ -20,11 +20,16 @@ export function useChangeEmits(emit, props) {
     emit('change', newValue);
   }
 
+  function _updateModel(newValue) {
+    emit('update:modelValue', newValue);
+    internalModel.value = newValue;
+  }
+
   const emitChange = debounce(_emitChange, delay);
+  const updateModel = debounce(_updateModel, delay);
 
   function valueChanged(newValue) {
-    emit('update:modelValue', newValue);
-    internalModel.value = newValue;
+    updateModel(newValue);
     emitChange(newValue);
   }
 

src/components/inputs/dropdown/DropdownSearch.stories.js

@@ -0,0 +1,65 @@
+import ZoaDropdownSearch from './DropdownSearch.vue';
+import { ZoaInput } from '../../index.js';
+import { argTypes, renderSetup } from '../stories.js';
+
+const meta = {
+  component: ZoaDropdownSearch,
+  title: 'Components/Inputs/Select/DropdownSearch',
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A dropdown/select component allowing searching/filtering the list of potential options. Options can be passed in as a mixed list of strings or objects with `label` and `value` keys. Each option must have a unique value (or label, if not using values).',
+      },
+    },
+  },
+};
+
+export default meta;
+
+const Base = {
+  args: {
+    label: 'Searchable Dropdown',
+    labelPosition: 'above',
+    help: 'Some example help text.',
+    helpPosition: 'right',
+    disabled: false,
+    delay: 0,
+    placeholder: 'select option',
+    options: [
+      'Option 1',
+      {
+        label: 'Option 2',
+        value: 'opt2',
+      },
+      { label: 'Option 3', value: 'opt3' },
+      { label: 'Option 4' },
+      'Option 5',
+    ],
+    searchDelay: 200,
+    enableSearch: true,
+    itemHeight: 38,
+  },
+  render: (args) => ({
+    components: { ZoaInput },
+    setup() {
+      return renderSetup(args);
+    },
+    template: `
+      <zoa-input zoa-type="dropdown-search"
+                 :class="rootClass"
+                 :label="label"
+                 :label-position="labelPosition"
+                 :help="help"
+                 :help-position="helpPosition"
+                 :disabled="disabled"
+                 :options="{delay, placeholder, options, searchDelay, enableSearch, itemHeight}"
+      />
+    `,
+  }),
+};
+
+export const Default = {
+  ...Base,
+};