finished changes on select input

README.md

@@ -77,6 +77,26 @@ export default {
 > you must call this plugin first.  
 
 
+Insert VueJS plugin
+
+```js
+import Vue from 'vue';
+import Laravuewind from 'laravuewind';
+
+createInertiaApp({
+    //...
+    setup({ el, App, props, plugin }) {
+        return createApp({ render: () => h(App, props) })
+            .use(plugin)
+            .use(Laravuewind) // <- this one
+            .use(ZiggyVue, Ziggy)
+            .mount(el);
+    },
+   //...
+});
+```
+
+
 ### Form components
 
 #### InputGroup

package.json

@@ -1,6 +1,6 @@
 {
   "name": "laravuewind",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.3",
   "description": "A Laravel VueJs Toolkit built with TailwindCSS",
   "main": "resources/js/index.ts",
   "directories": {

resources/js/Components/Form/SelectableInput/Options.vue

@@ -8,6 +8,11 @@
           v-if="searchable"
           v-model="search"
           :theme="theme"/>
+
+      <SearchNoResultsFound
+          v-if="searchable && search !== '' && filtered.length === 0"
+          :theme="theme"/>
+
       <ListboxOption
           v-slot="{ active, selected }"
           v-for="choice in filtered"
@@ -28,10 +33,12 @@ import {SelectChoice} from "../InputTypes";
 import {ListboxOptions, ListboxOption} from '@headlessui/vue'
 import Option from "./Option.vue";
 import SearchInput from "./SearchInput.vue";
+import SearchNoResultsFound from "./SearchNoResultsFound.vue";
 
 export default defineComponent({
   name: "Options",
   components: {
+    SearchNoResultsFound,
     SearchInput,
     Option,
     ListboxOption,
@@ -58,7 +65,7 @@ export default defineComponent({
   },
   methods: {
     resetSearch() {
-      if (this.open) {
+      if (this.searchable && this.open) {
         this.search = ''
         this.filtered = this.choices
       }

resources/js/Components/Form/SelectableInput/SearchInput.vue

@@ -2,10 +2,11 @@
   <div>
     <label for="email" class="sr-only">Search</label>
     <input
+        ref="searchInput"
         v-model="value"
         type="search"
         :class="['lvw-input', `lvw-${theme}`]"
-        :placeholder="$lvw.translate('form.select.searchPlaceholder', 'abc')" />
+        :placeholder="$lvw.translate('form.select.searchPlaceholder')" />
   </div>
 </template>
 
@@ -29,6 +30,16 @@ export default defineComponent({
       }
     }
   },
+  mounted() {
+    this.focus();
+  },
+  methods: {
+    focus() {
+      setTimeout(() => {
+        (this.$refs.searchInput as HTMLInputElement).focus();
+      }, 300);
+    }
+  }
 })
 </script>
 

resources/js/Components/Form/SelectableInput/SearchNoResultsFound.vue

@@ -0,0 +1,40 @@
+<template>
+  <div :class="['lvw-no-results-found', `lvw-${theme}`]">
+    <FacePensive class="w-5 h-5"/>
+    {{ $lvw.translate('form.select.searchNotFound') }}
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import FacePensive from "../../Icons/FacePensive.vue";
+
+export default defineComponent({
+  name: "SearchNoResultsFound",
+  components: {FacePensive},
+  props: {
+    theme: {type: String, required: true},
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.lvw-no-results-found {
+  @apply w-full flex justify-center items-center gap-x-2 py-2 font-medium text-sm;
+  &.lvw-gray {
+    @apply text-gray-700/70 fill-gray-700
+  }
+  &.lvw-green {
+    @apply text-green-700/70 fill-green-700
+  }
+  &.lvw-indigo {
+    @apply text-indigo-700/70 fill-indigo-700
+  }
+  &.lvw-primary {
+    @apply text-primary-700/70 fill-primary-700
+  }
+  &.lvw-slate {
+    @apply text-slate-700/70 fill-slate-700
+  }
+}
+</style>

resources/js/Components/Icons/FacePensive.vue

@@ -0,0 +1,9 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
+    <path class="fa-primary" d="M439.2 193.7c7.9 4 11.1 13.6 7.2 21.5s-13.6 11.1-21.5 7.2L402 210.9c-18.6-9.3-35-22.6-48.1-38.8l-14.4-18c-5.5-6.9-4.4-17 2.5-22.5s17-4.4 22.5 2.5l14.4 18c10.1 12.7 22.9 23 37.4 30.2l22.9 11.4zM65.7 215.2c-4-7.9-.7-17.5 7.2-21.5l22.9-11.4c14.5-7.2 27.2-17.6 37.4-30.2l14.4-18c5.5-6.9 15.6-8 22.5-2.5s8 15.6 2.5 22.5l-14.4 18c-13 16.3-29.4 29.5-48 38.8L87.2 222.3c-7.9 4-17.5 .7-21.5-7.2zm59.1 55.2c17.6 23.5 52.8 23.5 70.4 0c5.3-7.1 15.3-8.5 22.4-3.2s8.5 15.3 3.2 22.4c-30.4 40.5-91.2 40.5-121.6 0c-5.3-7.1-3.9-17.1 3.2-22.4s17.1-3.9 22.4 3.2zm192 0c17.6 23.5 52.8 23.5 70.4 0c5.3-7.1 15.3-8.5 22.4-3.2s8.5 15.3 3.2 22.4c-30.4 40.5-91.2 40.5-121.6 0c-5.3-7.1-3.9-17.1 3.2-22.4s17.1-3.9 22.4 3.2z"/><path class="fa-secondary" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM208 384h96c8.8 0 16 7.2 16 16s-7.2 16-16 16H208c-8.8 0-16-7.2-16-16s7.2-16 16-16zM387.2 270.4c5.3-7.1 15.3-8.5 22.4-3.2s8.5 15.3 3.2 22.4c-30.4 40.5-91.2 40.5-121.6 0c-5.3-7.1-3.9-17.1 3.2-22.4s17.1-3.9 22.4 3.2c17.6 23.5 52.8 23.5 70.4 0zm-262.4 0c17.6 23.5 52.8 23.5 70.4 0c5.3-7.1 15.3-8.5 22.4-3.2s8.5 15.3 3.2 22.4c-30.4 40.5-91.2 40.5-121.6 0c-5.3-7.1-3.9-17.1 3.2-22.4s17.1-3.9 22.4 3.2zM65.7 215.2c-4-7.9-.7-17.5 7.2-21.5l22.9-11.4c14.5-7.2 27.2-17.6 37.4-30.2l14.4-18c5.5-6.9 15.6-8 22.5-2.5s8 15.6 2.5 22.5l-14.4 18c-13 16.3-29.4 29.5-48 38.8L87.2 222.3c-7.9 4-17.5 .7-21.5-7.2zm373.5-21.5c7.9 4 11.1 13.6 7.2 21.5s-13.6 11.1-21.5 7.2L402 210.9c-18.6-9.3-35-22.6-48.1-38.8l-14.4-18c-5.5-6.9-4.4-17 2.5-22.5s17-4.4 22.5 2.5l14.4 18c10.1 12.7 22.9 23 37.4 30.2l22.9 11.4z"/>
+  </svg>
+</template>
+
+<style scoped>
+.fa-secondary{opacity:0.4;}
+</style>