add searchability and boolean values to SelectInput.vue and MultiselectInput.vue

packages/core/src/components/inputs/BaseSelect/BaseSelect.spec.ts

@@ -44,7 +44,8 @@ describe('BaseSelect.vue', () => {
       const expectedOptions = [
         new SelectOption('key1', 'label1'),
         new SelectOption('key2', 'label2'),
-        new SelectOption('key3', 'label3')
+        new SelectOption('key3', 'label3'),
+        new SelectOption(true, 'true')
       ]
       await wrapper.setProps({ options: expectedOptions })
 
@@ -55,6 +56,8 @@ describe('BaseSelect.vue', () => {
       expect(options.at(1).text()).toBe(expectedOptions[1].label)
       expect(options.at(2).attributes('value')).toBe(expectedOptions[2].key)
       expect(options.at(2).text()).toBe(expectedOptions[2].label)
+      expect(options.at(3).attributes('value')).toBe(expectedOptions[3].key?.toString())
+      expect(options.at(3).text()).toBe(expectedOptions[3].label)
     })
     it(':optionsLabel - options label not rendered if not set', async () => {
       const expectedOptionsLabel = ''

packages/core/src/components/inputs/BaseSelect/BaseSelect.vue

@@ -1,7 +1,17 @@
 <template>
   <BaseInputWrapper>
-    <select :name="name" :id="name" @change="handleChange" v-model="value">
-      <option v-if="optionsLabel" value="" disabled selected>
+    <select
+      :name="name"
+      :id="name"
+      @change="handleChange"
+      v-model="value"
+    >
+      <option
+        v-if="optionsLabel"
+        value=""
+        disabled
+        selected
+      >
         {{ optionsLabel }}
       </option>
       <option
@@ -13,7 +23,10 @@
       </option>
     </select>
     <label :for="name">{{ label }}</label>
-    <span class="error" v-if="errorMessage && meta.touched">
+    <span
+      class="error"
+      v-if="errorMessage && meta.touched"
+    >
       {{ errorMessage }}
     </span>
   </BaseInputWrapper>
@@ -25,7 +38,7 @@ import { toRef } from 'vue'
 import BaseInputWrapper from '@core/components/inputs/BaseInputWrapper/BaseInputWrapper.vue'
 import { SelectOption } from '@core/components/inputs/BaseSelect/selectOption'
 
-type InputValue = string | number | null
+type InputValue = string | number | boolean | null
 
 const props = withDefaults(
   defineProps<{
@@ -66,9 +79,9 @@ const getLabel = (option: string | SelectOption<LabelType>) => {
   return option
 }
 
-const getValue = (option: string | SelectOption<LabelType>) => {
+const getValue = (option: string | SelectOption<LabelType>): string | number | undefined => {
   if (option instanceof SelectOption) {
-    return option.key
+    return option.key as string | number | undefined
   }
   return option
 }

packages/core/src/components/inputs/BaseSelect/selectOption.ts

@@ -1,10 +1,15 @@
 export class SelectOption<LabelType> {
-  readonly key: string | number | null
+  readonly key: string | number | boolean | null
   readonly label: LabelType
   readonly img?: string
   readonly icon?: string
 
-  constructor(key: string | number | null, label: LabelType, img?: string, icon?: string) {
+  constructor(
+    key: string | number | boolean | null,
+    label: LabelType,
+    img?: string,
+    icon?: string
+  ) {
     this.key = key
     this.label = label
     this.img = img

packages/core/src/components/inputs/MultiselectInput/MultiselectInput.spec.ts

@@ -238,5 +238,30 @@ describe('MultiselectInput', () => {
       await multiselect.vm.$emit('remove', new SelectOption('2', 'option2'))
       expect(wrapper.emitted('update:modelValue')[2]).toStrictEqual([[]])
     })
+
+    it('selects a boolean option and checks modelValue', async () => {
+      const options = [
+        new SelectOption('1', 'One'),
+        new SelectOption('2', 'Two'),
+        new SelectOption(true, 'True Option')
+      ]
+      wrapper = mount(MultiselectInput, {
+        global: {
+          stubs: ['MultiselectInput']
+        },
+        props: {
+          id: 'test-select-input',
+          label: 'Merchants',
+          options,
+          entityName: 'Optionen'
+        }
+      })
+
+      const multiselect = wrapper.findComponent(Multiselect)
+
+      await multiselect.vm.$emit('select', new SelectOption(true, 'True Option'))
+
+      expect(wrapper.emitted('update:modelValue')[0]).toStrictEqual([[true]])
+    })
   })
 })

packages/core/src/components/inputs/MultiselectInput/MultiselectInput.stories.ts

@@ -23,6 +23,7 @@ Default.args = {
   label: 'Option',
   entityName: 'Optionen',
   options: [
+    new SelectOption(true, 'True options'),
     new SelectOption('option1', 'Option 1'),
     new SelectOption('option2', 'Option 2'),
     new SelectOption('option3', 'Option 3'),
@@ -58,3 +59,16 @@ Icons.args = {
     new SelectOption('option5', 'Option 5', '', 'bi-5-circle')
   ]
 }
+
+export const NotSearchable = Template.bind({})
+NotSearchable.args = {
+  id: 'select-input',
+  label: 'Option',
+  entityName: 'Optionen',
+  searchable: false,
+  options: [
+    new SelectOption(true, 'True Option'),
+    new SelectOption('option1', 'Option One'),
+    new SelectOption('option2', 'Option Two')
+  ]
+}

packages/core/src/components/inputs/MultiselectInput/MultiselectInput.vue

@@ -22,6 +22,8 @@
       @remove="removeOption"
       :open-direction="'bottom'"
       :class="{ 'has-content': selectedOptions.length > 0 }"
+      :searchable="searchable"
+      :placeholder="label"
     >
       <template
         v-for="(_, name) in $slots"
@@ -124,17 +126,22 @@ const props = withDefaults(
      * The name of the entity that is being selected.
      */
     entityName?: string
+    /**
+     * Search function is enabled
+     */
+    searchable?: boolean
   }>(),
   {
     error: '',
-    entityName: 'Optionen'
+    entityName: 'Optionen',
+    searchable: true
   }
 )
 
 /**
  * The currently selected value as a `string`, initially `undefined`.
  */
-const modelValue = defineModel<(string | number | null)[]>({
+const modelValue = defineModel<(string | number | boolean | null)[]>({
   default: []
 })
 const selectedOptions = ref<SelectOption<Ref<LabelType>>[]>([])
@@ -147,14 +154,14 @@ onMounted(() => {
         accumulator: { [key: string]: SelectOption<LabelType> },
         selectOption: SelectOption<LabelType>
       ) => {
-        accumulator[selectOption.key || ''] = selectOption
+        accumulator[String(selectOption.key) || ''] = selectOption
         return accumulator
       },
       {}
     )
     selectedOptions.value = modelValue.value.map((key) => {
       if (key == null) return
-      return optionsMap[key]
+      return optionsMap[String(key)]
     }) as SelectOption<LabelType>[]
   } else {
     selectedOptions.value = defaultOption || []
@@ -173,15 +180,15 @@ watch(
           accumulator: { [key: string]: SelectOption<LabelType> },
           selectOption: SelectOption<LabelType>
         ) => {
-          accumulator[selectOption.key || ''] = selectOption
+          accumulator[String(selectOption.key) || ''] = selectOption
           return accumulator
         },
         {}
       )
       selectedOptions.value = newValue
         .map((key) => {
           if (key === null) return ''
-          return optionsMap[key]
+          return optionsMap[String(key)]
         })
         .filter((option): option is SelectOption<LabelType> => option !== undefined)
     }

packages/core/src/components/inputs/SelectInput/SelectInput.spec.js

@@ -200,5 +200,30 @@ describe('SelectInput', () => {
       expect(option.exists()).toBe(true)
       expect(option.classes()).toContain('icon-class-1')
     })
+
+    it('selects a boolean option and checks modelValue', async () => {
+      const options = [
+        new SelectOption('1', 'One'),
+        new SelectOption('2', 'Two'),
+        new SelectOption(true, 'True Option')
+      ]
+      wrapper = mount(SelectInput, {
+        global: {
+          stubs: ['MultiselectInput']
+        },
+        props: {
+          id: 'test-select-input',
+          label: 'Merchants',
+          options,
+          entityName: 'Optionen'
+        }
+      })
+
+      const multiselect = wrapper.findComponent(Multiselect)
+
+      await multiselect.vm.$emit('select', new SelectOption(true, 'True Option'))
+
+      expect(wrapper.emitted('update:modelValue')[0]).toStrictEqual([true])
+    })
   })
 })

packages/core/src/components/inputs/SelectInput/SelectInput.stories.js

@@ -23,7 +23,11 @@ Default.args = {
   label: 'Option',
   entityName: 'Optionen',
   placeholder: 'Choose option',
-  options: [new SelectOption('option1', 'Option One'), new SelectOption('option2', 'Option Two')]
+  options: [
+    new SelectOption(true, 'All options'),
+    new SelectOption('option1', 'Option One'),
+    new SelectOption('option2', 'Option Two')
+  ]
 }
 
 export const Images = Template.bind({})
@@ -53,3 +57,24 @@ Icons.args = {
     new SelectOption('option5', 'Option 5', '', 'bi-5-circle')
   ]
 }
+
+export const Booleans = Template.bind({})
+Booleans.args = {
+  id: 'select-input',
+  label: 'Option',
+  entityName: 'Optionen',
+  options: [new SelectOption(true, 'Wahr', '', ''), new SelectOption(false, 'Falsch', '', '')]
+}
+
+export const NotSearchable = Template.bind({})
+NotSearchable.args = {
+  id: 'select-input',
+  label: 'Option',
+  entityName: 'Optionen',
+  searchable: false,
+  options: [
+    new SelectOption(true, 'All options'),
+    new SelectOption('option1', 'Option One'),
+    new SelectOption('option2', 'Option Two')
+  ]
+}