Added select input, v-click-outside for vselect

resources/js/components/common/Dropdown.vue

@@ -21,6 +21,9 @@ import { vOnClickOutside } from '@vueuse/components'
 
 export default {
   name: 'Dropdown',
+  directives: {
+    onClickOutside: vOnClickOutside
+  },
   props: {
     dropdownClass: {
       type: String,

resources/js/components/forms/SelectInput.vue

@@ -1,5 +1,11 @@
 <template>
-  <div :class="wrapperClass">
+  <input-wrapper
+    v-bind="$props"
+  >
+    <template #label>
+      <slot name="label" />
+    </template>
+
     <v-select v-model="compVal"
               :dusk="name"
               :data="finalOptions"
@@ -15,7 +21,7 @@
               :uppercase-labels="uppercaseLabels"
               :theme="theme"
               :has-error="hasValidation && form.errors.has(name)"
-              :allowCreation="allowCreation"
+              :allow-creation="allowCreation"
               :disabled="disabled"
               :help="help"
               :help-position="helpPosition"
@@ -58,21 +64,29 @@
       </template>
     </v-select>
 
-    <has-error v-if="hasValidation" :form="form" :field="name" />
-  </div>
+    <template #help>
+      <slot name="help" />
+    </template>
+
+    <template #error>
+      <slot name="error" />
+    </template>
+  </input-wrapper>
 </template>
 
 <script>
-import inputMixin from '~/mixins/forms/input.js'
+import { inputProps, useFormInput } from './useFormInput.js'
+import InputWrapper from './components/InputWrapper.vue'
 
 /**
  * Options: {name,value} objects
  */
 export default {
   name: 'SelectInput',
-  mixins: [inputMixin],
+  components: { InputWrapper },
 
   props: {
+    ...inputProps,
     options: { type: Array, required: true },
     optionKey: { type: String, default: 'value' },
     emitKey: { type: String, default: 'value' },
@@ -82,11 +96,28 @@ export default {
     searchable: { type: Boolean, default: false },
     allowCreation: { type: Boolean, default: false }
   },
+
+  setup (props, context) {
+    const {
+      compVal,
+      inputStyle,
+      hasValidation,
+      hasError
+    } = useFormInput(props, context)
+
+    return {
+      compVal,
+      inputStyle,
+      hasValidation,
+      hasError
+    }
+  },
   data () {
     return {
       additionalOptions: []
     }
   },
+
   computed: {
     finalOptions () {
       return this.options.concat(this.additionalOptions)

resources/js/components/forms/components/VSelect.vue

@@ -1,31 +1,23 @@
 <template>
-  <div class="v-select">
-    <label v-if="label"
-           :class="[theme.SelectInput.label,{'uppercase text-xs': uppercaseLabels, 'text-sm': !uppercaseLabels}]"
-    >
-      {{ label }}
-      <span v-if="required" class="text-red-500 required-dot">*</span>
-    </label>
-    <small v-if="help && helpPosition=='above_input'" :class="theme.SelectInput.help" class="flex mb-1">
-      <slot name="help"><span class="field-help" v-html="help" /></slot>
-    </small>
-
-    <div class="relative">
+  <div v-on-click-outside="closeDropdown" class="v-select relative">
     <span class="inline-block w-full rounded-md">
-        <button type="button" :dusk="dusk" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"
+      <button type="button" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"
               class="cursor-pointer"
-                :style="inputStyle" :class="[theme.SelectInput.input,{'py-2': !multiple || loading,'py-1': multiple, '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200': disabled}, inputClass]"
+              :style="inputStyle"
+              :class="[theme.SelectInput.input,{'py-2': !multiple || loading,'py-1': multiple, '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200': disabled}, inputClass]"
               @click="openDropdown"
       >
         <div :class="{'h-6': !multiple, 'min-h-8': multiple && !loading}">
           <transition name="fade" mode="out-in">
             <loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
-              <div v-else-if="modelValue" key="modelValue" class="flex" :class="{'min-h-8': multiple}">
+            <div v-else-if="modelValue" key="value" class="flex" :class="{'min-h-8': multiple}">
               <slot name="selected" :option="modelValue" />
             </div>
             <div v-else key="placeholder">
               <slot name="placeholder">
-                  <div class="text-gray-400 dark:text-gray-500 w-full text-left" :class="{'py-1': multiple && !loading}">
+                <div class="text-gray-400 dark:text-gray-500 w-full text-left"
+                     :class="{'py-1': multiple && !loading}"
+                >
                   {{ placeholder }}
                 </div>
               </slot>
@@ -48,7 +40,7 @@
           :class="{'max-h-42 py-1': !isSearchable,'max-h-48 pb-1': isSearchable}"
       >
         <div v-if="isSearchable" class="px-2 pt-2 sticky top-0 bg-white dark-bg-notion-dark-light z-10">
-            <text-input v-model="searchTerm.value" name="search" :color="color" :theme="theme"
+          <text-input v-model="searchTerm" name="search" :color="color" :theme="theme"
                       placeholder="Search..."
           />
         </div>
@@ -77,33 +69,26 @@
       </ul>
     </div>
   </div>
-
-    <small v-if="help && helpPosition=='below_input'" :class="theme.SelectInput.help">
-      <slot name="help"><span class="field-help" v-html="help" /></slot>
-    </small>
-  </div>
 </template>
 
-<script setup>
-import { ref, watch, onMounted, defineProps, defineEmits, defineOptions, computed } from 'vue'
+<script>
 import { vOnClickOutside } from '@vueuse/components'
 import TextInput from '../TextInput.vue'
 import Fuse from 'fuse.js'
-import { themes } from '~/config/form-themes.js'
+import { themes } from '../../../config/form-themes'
 import debounce from 'debounce'
 
-
-defineOptions({
-  name: 'VSelect'
-})
-
-const props = defineProps({
+export default {
+  name: 'VSelect',
+  components: { TextInput },
+  directives: {
+    onClickOutside: vOnClickOutside
+  },
+  props: {
     data: Array,
     modelValue: { default: null },
     inputClass: { type: String, default: null },
     dropdownClass: { type: String, default: 'w-full' },
-  label: { type: String, default: null },
-  dusk: { type: String, default: null },
     loading: { type: Boolean, default: false },
     required: { type: Boolean, default: false },
     multiple: { type: Boolean, default: false },
@@ -118,132 +103,121 @@ const props = defineProps({
     uppercaseLabels: { type: Boolean, default: true },
     theme: { type: Object, default: () => themes.default },
     allowCreation: { type: Boolean, default: false },
-  disabled: { type: Boolean, default: false },
-  help: { type: String, default: null },
-  helpPosition: { type: String, default: 'below_input' }
-})
-
-const emit = defineEmits(['update:modelValue', 'update-options'])
-
-const defaultValue = ref(props.modelValue)
-let searchTerm = ref('')
-let isOpen = ref(false)
-
-const optionStyle = computed(() => {
+    disabled: { type: Boolean, default: false }
+  },
+  data () {
     return {
-    '--bg-form-color': props.color
+      isOpen: false,
+      searchTerm: '',
+      defaultValue: this.modelValue ?? null
     }
-})
-
-const inputStyle = computed(() => {
+  },
+  computed: {
+    optionStyle () {
       return {
-    '--tw-ring-color': props.color
+        '--bg-form-color': this.color
       }
-})
-
-const debouncedRemote = computed(() => {
-  if (props.remote) {
-    return debounce(props.remote, 300)
+    },
+    inputStyle () {
+      return {
+        '--tw-ring-color': this.color
+      }
+    },
+    debouncedRemote () {
+      if (this.remote) {
+        return debounce(this.remote, 300)
       }
       return null
-})
-
-const filteredOptions = computed(() => {
-  if (!props.data) return []
-  if (!props.searchable || props.remote || searchTerm.value === '') {
-    return props.data
+    },
+    filteredOptions () {
+      if (!this.data) return []
+      if (!this.searchable || this.remote || this.searchTerm === '') {
+        return this.data
       }
 
       // Fuse search
       const fuzeOptions = {
-    keys: props.searchKeys
+        keys: this.searchKeys
       }
-  const fuse = new Fuse(props.data, fuzeOptions)
-  return fuse.search(searchTerm.value).map((res) => {
+      const fuse = new Fuse(this.data, fuzeOptions)
+      return fuse.search(this.searchTerm).map((res) => {
         return res.item
       })
-})
-
-const isSearchable = computed(() => {
-  return props.searchable || props.remote !== null || props.allowCreation
-})
-
-watch(() => searchTerm, val => {
-  if (!props.debouncedRemote) return
-  if ((props.remote && val) || (val === '' && !props.modelValue) || (val === '' && isOpen)) {
-    return props.debouncedRemote(val)
+    },
+    isSearchable () {
+      return this.searchable || this.remote !== null || this.allowCreation
     }
-})
+  },
+  watch: {
+    searchTerm (val) {
+      if (!this.debouncedRemote) return
+      if ((this.remote && val) || (val === '' && !this.modelValue) || (val === '' && this.isOpen)) {
+        return this.debouncedRemote(val)
+      }
+    }
+  },
+  methods: {
+    isSelected (value) {
+      if (!this.modelValue) return false
 
-
-const isSelected = (value) => {
-  if (!props.modelValue) return false
-
-  if (props.emitKey && value[props.emitKey]) {
-    value = value[props.emitKey]
+      if (this.emitKey && value[this.emitKey]) {
+        value = value[this.emitKey]
       }
 
-  if (props.multiple) {
-    return props.modelValue.includes(value)
+      if (this.multiple) {
+        return this.modelValue.includes(value)
       }
-  return props.modelValue === value
+      return this.modelValue === value
+    },
+    closeDropdown () {
+      this.isOpen = false
+      this.searchTerm = ''
+    },
+    openDropdown () {
+      this.isOpen = this.disabled ? false : !this.isOpen
+    },
+    select (value) {
+      if (!this.multiple) {
+        this.closeDropdown()
       }
 
-const closeDropdown = () => {
-  isOpen.value = false
-  searchTerm.value = ''
-}
-const openDropdown = () => {
-  isOpen.value = props.disabled ? false : !isOpen.value
-}
-const select = (value) => {
-  if (!props.multiple) {
-    closeDropdown()
+      if (this.emitKey) {
+        value = value[this.emitKey]
       }
 
-  if (props.emitKey) {
-    value = value[props.emitKey]
-  }
+      if (this.multiple) {
+        const emitValue = Array.isArray(this.modelValue) ? [...this.modelValue] : []
 
-  if (props.multiple) {
-    const emitValue = Array.isArray(props.modelValue) ? [...props.modelValue] : []
-
-    if (isSelected(value)) {
-      emit('update:modelValue', emitValue.filter((item) => {
-        if (props.emitKey) {
+        if (this.isSelected(value)) {
+          this.$emit('update:modelValue', emitValue.filter((item) => {
+            if (this.emitKey) {
               return item !== value
             }
-        return item[props.optionKey] !== value && item[props.optionKey] !== value[props.optionKey]
+            return item[this.optionKey] !== value && item[this.optionKey] !== value[this.optionKey]
           }))
           return
         }
 
         emitValue.push(value)
-    emit('update:modelValue', emitValue)
+        this.$emit('update:modelValue', emitValue)
       } else {
-    if (props.modelValue === value) {
-      emit('update:modelValue', defaultValue ?? null)
+        if (this.modelValue === value) {
+          this.$emit('update:modelValue', this.defaultValue ?? null)
         } else {
-      emit('update:modelValue', value)
+          this.$emit('update:modelValue', value)
         }
       }
-}
-const createOption = (newOption) => {
+    },
+    createOption (newOption) {
       if (newOption) {
         const newItem = {
           name: newOption,
           value: newOption
         }
-    emit('update-options', newItem)
-    select(newItem)
+        this.$emit('update-options', newItem)
+        this.select(newItem)
+      }
+    }
   }
 }
-
-
-// export default {
-//   components: { TextInput },
-//   directives: {
-//     onClickaway: vOnClickOutside
-//   }
-// }
 </script>