Started to refactor input components

2023-10-28 11:17:50 +01:00
parent 7eb546703f
commit 8e8bad3754
17 changed files with 271 additions and 209 deletions
--- a/resources/js/components/open/forms/fields/FormBlockOptionsModal.vue
+++ b/resources/js/components/open/forms/fields/FormBlockOptionsModal.vue
@@ -36,7 +36,7 @@
          </p>
          <v-checkbox v-model="field.hidden" class="mb-3"
                      :name="field.id+'_hidden'"
-                      @input="onFieldHiddenChange"
+                      @update:model-value="onFieldHiddenChange"
          >
            Hidden
          </v-checkbox>
--- a/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
+++ b/resources/js/components/open/forms/fields/FormFieldOptionsModal.vue
@@ -47,19 +47,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>
@@ -105,7 +105,7 @@
          Number Options
        </h3>
        <v-checkbox v-model="field.is_rating" class="mt-4"
-                    :name="field.id+'_is_rating'" @input="initRating"
+                    :name="field.id+'_is_rating'" @update:model-value="initRating"
        >
          Rating
        </v-checkbox>
@@ -142,7 +142,7 @@
        </h3>
        <v-checkbox v-model="field.date_range" class="mt-4"
                    :name="field.id+'_date_range'"
-                    @input="onFieldDateRangeChange"
+                    @update:model-value="onFieldDateRangeChange"
        >
          Date Range
        </v-checkbox>
@@ -151,7 +151,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>
@@ -166,7 +166,7 @@
        />
        <v-checkbox v-model="field.prefill_today"
                    name="prefill_today"
-                    @input="onFieldPrefillTodayChange"
+                    @update:model-value="onFieldPrefillTodayChange"
        >
          Prefill with 'today'
        </v-checkbox>
@@ -176,14 +176,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>
@@ -203,12 +203,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-4"
-                    name="without_dropdown" help="" @input="onFieldWithoutDropdownChange"
+                    name="without_dropdown" help="" @update:model-value="onFieldWithoutDropdownChange"
        >
          Always show all select options
        </v-checkbox>
@@ -241,7 +241,7 @@
        <!-- Pre-fill depends on type -->
        <v-checkbox v-if="field.type=='checkbox'" v-model="field.prefill" class="mt-4"
                    :name="field.id+'_prefill'"
-                    @input="field.prefill = $event"
+                    @update:model-value="field.prefill = $event"
        >
          Pre-filled value
        </v-checkbox>
@@ -327,7 +327,7 @@

        <v-checkbox v-model="field.generates_uuid"
                    :name="field.id+'_generates_uuid'"
-                    @input="onFieldGenUIdChange"
+                    @update:model-value="onFieldGenUIdChange"
        >
          Generates a unique id on submission
        </v-checkbox>
@@ -337,7 +337,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 on submission
        </v-checkbox>
--- a/resources/js/components/open/forms/fields/components/BlockOptions.vue
+++ b/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>
--- a/resources/js/components/open/forms/fields/components/FieldOptions.vue
+++ b/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>