feat(SelectMenu): handle multiple prop

Resolves #102

test/components/Input.spec.ts

@@ -14,7 +14,7 @@ describe('Input', () => {
     ['with id', { props: { id: 'id' } }],
     ['with name', { props: { name: 'name' } }],
     ['with type', { props: { type: 'password' } }],
-    ['with placeholder', { props: { placeholder: 'Enter your username' } }],
+    ['with placeholder', { props: { placeholder: 'Search...' } }],
     ['with disabled', { props: { disabled: true } }],
     ['with required', { props: { required: true } }],
     ['with icon', { props: { icon: 'i-heroicons-magnifying-glass' } }],

test/components/Select.spec.ts

@@ -39,7 +39,7 @@ describe('Select', () => {
     ['with defaultValue', { props: { ...props, defaultValue: items[0] } }],
     ['with id', { props: { ...props, id: 'id' } }],
     ['with name', { props: { ...props, name: 'name' } }],
-    ['with placeholder', { props: { ...props, placeholder: 'Enter your username' } }],
+    ['with placeholder', { props: { ...props, placeholder: 'Search...' } }],
     ['with disabled', { props: { ...props, disabled: true } }],
     ['with required', { props: { ...props, required: true } }],
     ['with icon', { props: { ...props, icon: 'i-heroicons-magnifying-glass' } }],

test/components/SelectMenu.spec.ts

@@ -37,9 +37,12 @@ describe('SelectMenu', () => {
     ['with items', { props }],
     ['with modelValue', { props: { ...props, modelValue: items[0] } }],
     ['with defaultValue', { props: { ...props, defaultValue: items[0] } }],
+    ['with multiple', { props: { ...props, multiple: true } }],
+    ['with multiple and modelValue', { props: { ...props, multiple: true, modelValue: [items[0], items[1]] } }],
     ['with id', { props: { ...props, id: 'id' } }],
     ['with name', { props: { ...props, name: 'name' } }],
-    ['with placeholder', { props: { ...props, placeholder: 'Enter your username' } }],
+    ['with placeholder', { props: { ...props, placeholder: 'Search...' } }],
+    ['with searchPlaceholder', { props: { ...props, searchPlaceholder: 'Filter items...' } }],
     ['with disabled', { props: { ...props, disabled: true } }],
     ['with required', { props: { ...props, required: true } }],
     ['with icon', { props: { ...props, icon: 'i-heroicons-magnifying-glass' } }],

test/components/__snapshots__/Input.spec.ts.snap

@@ -107,7 +107,7 @@ exports[`Input > renders with name correctly 1`] = `
 `;
 
 exports[`Input > renders with placeholder correctly 1`] = `
-"<div class="relative inline-flex items-center"><input type="text" placeholder="Enter your username" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
+"<div class="relative inline-flex items-center"><input type="text" placeholder="Search..." class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
   <!--v-if-->
   <!--v-if-->
 </div>"

test/components/__snapshots__/Select.spec.ts.snap

@@ -1287,7 +1287,7 @@ exports[`Select > renders with name correctly 1`] = `
 
 exports[`Select > renders with placeholder correctly 1`] = `
 "<button role="combobox" type="button" aria-controls="radix-vue-select-content-36" aria-expanded="true" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="open" data-placeholder="" class="relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 pr-9">
-  <!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50">Enter your username</span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
+  <!--v-if--><span style="pointer-events: none;" class="truncate group-data-placeholder:text-current/50">Search...</span><span class="absolute inset-y-0 end-0 flex items-center pr-2.5"><span class="iconify i-heroicons:chevron-down-20-solid shrink-0 text-gray-400 dark:text-gray-500 size-5" aria-hidden="true"></span></span>
 </button>
 <!--teleport start-->