update vselect & phone input

resources/js/components/forms/PhoneInput.vue

@@ -1,18 +1,11 @@
 <template>
-  <div :class="wrapperClass" :style="inputStyle">
+  <input-wrapper
-    <slot name="label">
+    v-bind="$props"
-      <label v-if="label" :for="id ? id : name"
+  >
-             :class="[theme.default.label, { 'uppercase text-xs': uppercaseLabels, 'text-sm': !uppercaseLabels }]"
+    <template #label>
-      >
+      <slot name="label" />
-        {{ label }}
+    </template>
-        <span v-if="required" class="text-red-500 required-dot">*</span>
+
-      </label>
-    </slot>
-    <div v-if="help && helpPosition == 'above_input'" class="flex mb-1">
-      <small :class="theme.default.help" class="grow">
-        <slot name="help"><span class="field-help" v-html="help" /></slot>
-      </small>
-    </div>
     <div :id="id ? id : name" :name="name" :style="inputStyle" class="flex items-center">
       <v-select v-model="selectedCountryCode" class="w-[130px]" dropdown-class="w-[300px]" input-class="rounded-r-none"
                 :data="countries"
@@ -35,34 +28,54 @@
         </template>
       </v-select>
       <input v-model="inputVal" type="text" class="inline-flex-grow !border-l-0 !rounded-l-none" :disabled="disabled"
-             :class="[theme.default.input, { '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200': disabled }]"
+            :class="[theme.default.input, { '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200': disabled }]"
-             :placeholder="placeholder" :style="inputStyle" @input="onInput"
+            :placeholder="placeholder" :style="inputStyle" @input="onInput"
       >
     </div>
-    <div v-if="help && helpPosition=='below_input'" class="flex">
+
-      <small :class="theme.default.help" class="grow">
+    <template #help>
-        <slot name="help"><span class="field-help" v-html="help" /></slot>
+      <slot name="help" />
-      </small>
+    </template>
-    </div>
+
-    <has-error v-if="hasValidation" :form="form" :field="name" />
+    <template #error>
-  </div>
+      <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'
 import countryCodes from '../../../data/country_codes.json'
 import CountryFlag from 'vue-country-flag-next'
 import parsePhoneNumber from 'libphonenumber-js'
 
 export default {
   phone: 'PhoneInput',
-  components: { CountryFlag },
+  components: { InputWrapper, CountryFlag },
-  mixins: [inputMixin],
   props: {
+    ...inputProps,
     canOnlyCountry: { type: Boolean, default: false },
     unavailableCountries: { type: Array, default: () => [] }
   },
 
+  setup (props, context) {
+    const {
+      compVal,
+      inputStyle,
+      hasValidation,
+      hasError
+    } = useFormInput(props, context)
+
+    return {
+      compVal,
+      inputStyle,
+      hasValidation,
+      hasError
+    }
+  },
+
   data () {
     return {
       selectedCountryCode: null,

resources/js/components/forms/SelectInput.vue

@@ -7,7 +7,6 @@
     </template>
 
     <v-select v-model="compVal"
-              :dusk="name"
               :data="finalOptions"
               :label="label"
               :option-key="optionKey"
@@ -29,21 +28,21 @@
               @update-options="updateOptions"
     >
       <template #selected="{option}">
-        <template v-if="multiple">
+        <slot name="selected" :option="option" :optionName="getOptionName(option)">
-          <div class="flex items-center truncate mr-6">
+          <template v-if="multiple">
-            <span v-for="(item,index) in option" :key="item" class="truncate">
+            <div class="flex items-center truncate mr-6">
-              <span v-if="index!==0">, </span>
+              <span v-for="(item,index) in option" :key="item" class="truncate">
-              {{ getOptionName(item) }}
+                <span v-if="index!==0">, </span>
-            </span>
+                {{ getOptionName(item) }}
-          </div>
+              </span>
-        </template>
+            </div>
-        <template v-else>
+          </template>
-          <slot name="selected" :option="option" :optionName="getOptionName(option)">
+          <template v-else>
             <div class="flex items-center truncate mr-6">
               <div>{{ getOptionName(option) }}</div>
             </div>
-          </slot>
+          </template>
-        </template>
+        </slot>
       </template>
       <template #option="{option, selected}">
         <slot name="option" :option="option" :selected="selected">

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

@@ -31,7 +31,7 @@
         </span>
       </button>
     </span>
-    <div v-show="isOpen" :dusk="dusk+'_dropdown' "
+    <div v-show="isOpen"
          class="absolute mt-1 rounded-md bg-white dark:bg-notion-dark-light shadow-lg z-10"
          :class="dropdownClass"
     >
@@ -51,7 +51,7 @@
           <li v-for="item in filteredOptions" :key="item[optionKey]" role="option" :style="optionStyle"
               :class="{'px-3 pr-9': multiple, 'px-3': !multiple}"
               class="text-gray-900 cursor-default select-none relative py-2 cursor-pointer group hover:text-white hover-bg-form-color focus:outline-none focus-text-white focus-nt-blue"
-              :dusk="dusk+'_option'" @click="select(item)"
+              @click="select(item)"
           >
             <slot name="option" :option="item" :selected="isSelected(item)" />
           </li>

resources/js/components/open/forms/fields/components/FieldOptions.vue

@@ -207,8 +207,8 @@
         Use simple text input
       </v-checkbox>
       <template v-if="field.type === 'phone_number' && !field.use_simple_text_input">
-        <v-select v-model="field.unavailable_countries" class="mt-4"
+        <select-input v-model="field.unavailable_countries" class="mt-4" wrapper-class="relative"
-                  :data="allCountries" :multiple="true"
+                  :options="allCountries" :multiple="true"
                   :searchable="true" :search-keys="['name']" :option-key="'code'" :emit-key="'code'"
                   label="Disabled countries" :placeholder="'Select a country'"
                   help="Remove countries from the phone input"
@@ -233,8 +233,8 @@
               </svg>
             </span>
           </template>
-        </v-select>
+        </select-input>
-        <small class="flex">
+        <small class="flex -mt-2">
           <a href="#" class="grow" @click.prevent="selectAllCountries">Select All</a>
           <a href="#" @click.prevent="field.unavailable_countries=null">Un-select All</a>
         </small>