Started to refactor input components

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

@@ -10,7 +10,7 @@
       </p>
       <v-checkbox v-model="field.hidden" class="mb-3"
                   :name="field.id+'_hidden'"
-                  @input="onFieldHiddenChange"
+                  @update:model-value="onFieldHiddenChange"
       >
         Hidden
       </v-checkbox>

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

@@ -10,19 +10,19 @@
       </p>
       <v-checkbox v-model="field.hidden" class="mb-3"
                   :name="field.id+'_hidden'"
-                  @input="onFieldHiddenChange"
+                  @update:model-value="onFieldHiddenChange"
       >
         Hidden
       </v-checkbox>
       <v-checkbox v-model="field.required" class="mb-3"
                   :name="field.id+'_required'"
-                  @input="onFieldRequiredChange"
+                  @update:model-value="onFieldRequiredChange"
       >
         Required
       </v-checkbox>
       <v-checkbox v-model="field.disabled" class="mb-3"
                   :name="field.id+'_disabled'"
-                  @input="onFieldDisabledChange"
+                  @update:model-value="onFieldDisabledChange"
       >
         Disabled
       </v-checkbox>
@@ -68,7 +68,7 @@
         Number Options
       </h3>
       <v-checkbox v-model="field.is_rating" class="mt-3"
-                  :name="field.id+'_is_rating'" @input="initRating"
+                  :name="field.id+'_is_rating'" @update:model-value="initRating"
       >
         Rating
       </v-checkbox>
@@ -92,7 +92,7 @@
       </p>
       <v-checkbox v-model="field.multi_lines" class="mb-2"
                   :name="field.id+'_multi_lines'"
-                  @input="field.multi_lines = $event"
+                  @update:model-value="field.multi_lines = $event"
       >
         Multi-lines input
       </v-checkbox>
@@ -105,7 +105,7 @@
       </h3>
       <v-checkbox v-model="field.date_range" class="mt-3"
                   :name="field.id+'_date_range'"
-                  @input="onFieldDateRangeChange"
+                  @update:model-value="onFieldDateRangeChange"
       >
         Date Range
       </v-checkbox>
@@ -114,7 +114,7 @@
       </p>
       <v-checkbox v-model="field.with_time"
                   :name="field.id+'_with_time'"
-                  @input="onFieldWithTimeChange"
+                  @update:model-value="onFieldWithTimeChange"
       >
         Date with time
       </v-checkbox>
@@ -129,7 +129,7 @@
       />
       <v-checkbox v-model="field.prefill_today"
                   name="prefill_today"
-                  @input="onFieldPrefillTodayChange"
+                  @update:model-value="onFieldPrefillTodayChange"
       >
         Prefill with 'today'
       </v-checkbox>
@@ -139,14 +139,14 @@
 
       <v-checkbox v-model="field.disable_past_dates"
                   name="disable_past_dates" class="mb-3"
-                  @input="onFieldDisablePastDatesChange"
+                  @update:model-value="onFieldDisablePastDatesChange"
       >
         Disable past dates
       </v-checkbox>
 
       <v-checkbox v-model="field.disable_future_dates"
                   name="disable_future_dates" class="mb-3"
-                  @input="onFieldDisableFutureDatesChange"
+                  @update:model-value="onFieldDisableFutureDatesChange"
       >
         Disable future dates
       </v-checkbox>
@@ -166,12 +166,12 @@
                        @input="onFieldOptionsChange"
       />
       <v-checkbox v-model="field.allow_creation"
-                  name="allow_creation" help="" @input="onFieldAllowCreationChange"
+                  name="allow_creation" help="" @update:model-value="onFieldAllowCreationChange"
       >
         Allow respondent to create new options
       </v-checkbox>
       <v-checkbox v-model="field.without_dropdown" class="mt-3"
-                  name="without_dropdown" help="" @input="onFieldWithoutDropdownChange"
+                  name="without_dropdown" help="" @update:model-value="onFieldWithoutDropdownChange"
       >
         Always show all select options
       </v-checkbox>
@@ -243,7 +243,7 @@
       <!-- Pre-fill depends on type -->
       <v-checkbox v-if="field.type=='checkbox'" v-model="field.prefill" class="mt-3"
                   :name="field.id+'_prefill'"
-                  @input="field.prefill =$event"
+                  @update:model-value="field.prefill =$event"
       >
         Pre-filled value
       </v-checkbox>
@@ -270,7 +270,6 @@
       <text-input v-else-if="field.type!=='files'" name="prefill" class="mt-3"
                   :form="field"
                   label="Pre-filled value"
-                  :disabled="field.type==='date' && field.prefill_today===true"
       />
       <div v-if="['select','multi_select'].includes(field.type)" class="-mt-3 mb-3 text-gray-400 dark:text-gray-500">
         <small>
@@ -314,7 +313,7 @@
       />
 
       <template v-if="['text','number','url','email'].includes(field.type)">
-        <text-input v-model="field.max_char_limit" name="max_char_limit" native-type="number" :min="1" :max="2000"
+        <text-input name="max_char_limit" native-type="number" :min="1" :max="2000"
                     :form="field"
                     label="Max character limit"
                     help="Maximum character limit of 2000"
@@ -334,7 +333,7 @@
 
       <v-checkbox v-model="field.generates_uuid"
                   :name="field.id+'_generates_uuid'"
-                  @input="onFieldGenUIdChange"
+                  @update:model-value="onFieldGenUIdChange"
       >
         Generates a unique id
       </v-checkbox>
@@ -345,7 +344,7 @@
 
       <v-checkbox v-model="field.generates_auto_increment_id"
                   :name="field.id+'_generates_auto_increment_id'"
-                  @input="onFieldGenAutoIdChange"
+                  @update:model-value="onFieldGenAutoIdChange"
       >
         Generates an auto-incremented id
       </v-checkbox>