Select field selection handling (#158)

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

@@ -122,7 +122,8 @@ export default {
   data () {
     return {
       isOpen: false,
-      searchTerm: ''
+      searchTerm: '',
+      defaultValue: this.value ?? null
     }
   },
   computed: {
@@ -212,7 +213,7 @@ export default {
         this.$emit('input', emitValue)
       } else {
         if (this.value === value) {
-          this.$emit('input', null)
+          this.$emit('input', this.defaultValue ?? null)
         } else {
           this.$emit('input', value)
         }

resources/js/components/open/forms/components/form-logic-components/FormBlockLogicEditor.vue

@@ -4,7 +4,7 @@
       Logic
       <pro-tag/>
     </h3>
-    <p class="text-gray-400 mb-5">
+    <p class="text-gray-400 text-xs mb-5">
       Add some logic to this block. Start by adding some conditions, and then add some actions.
     </p>
     <div class="relative flex">
@@ -47,7 +47,7 @@
         <h3 class="font-semibold block text-lg">
           Copy logic from another field
         </h3>
-        <p class="text-gray-400 mb-5">
+        <p class="text-gray-400 text-xs mb-5">
           Select another field/block to copy its logic and apply it to "{{ field.name }}".
         </p>
         <select-input v-model="copyFrom" name="copy_from" emit-key="value"

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

@@ -31,7 +31,7 @@
           <h3 class="font-semibold block text-lg">
             General
           </h3>
-          <p class="text-gray-400 mb-5">
+          <p class="text-gray-400 mb-5 text-xs">
             Exclude this field or make it required.
           </p>
           <v-checkbox v-model="field.hidden" class="mb-3"
@@ -153,7 +153,24 @@ export default {
 
   computed: {},
 
-  watch: {},
+  watch: {
+    'field.width': {
+      handler (val) {
+        if (val === undefined || val === null) {
+          this.$set(this.field, 'width', 'full')
+        }
+      },
+      immediate: true
+    },
+    'field.align': {
+      handler (val) {
+        if (val === undefined || val === null) {
+          this.$set(this.field, 'align', 'left')
+        }
+      },
+      immediate: true
+    }
+  },
 
   mounted() {
 

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

@@ -38,7 +38,7 @@
         <h3 class="font-semibold block text-lg">
           General
         </h3>
-        <p class="text-gray-400 mb-5">
+        <p class="text-gray-400 mb-5 text-xs">
           Exclude this field or make it required.
         </p>
         <v-checkbox v-model="field.hidden" class="mb-3"
@@ -66,7 +66,7 @@
         <h3 class="font-semibold block text-lg">
           Checkbox
         </h3>
-        <p class="text-gray-400 mb-5">
+        <p class="text-gray-400 mb-5 text-xs">
           Advanced options for checkbox.
         </p>
         <v-checkbox v-model="field.use_toggle_switch" class="mt-4"
@@ -74,7 +74,7 @@
         >
           Use toggle switch
         </v-checkbox>
-        <p class="text-gray-400 mb-5">
+        <p class="text-gray-400 mb-5 text-xs">
           If enabled, checkbox will be replaced with a toggle switch
         </p>
       </div>
@@ -106,7 +106,7 @@
         >
           Rating
         </v-checkbox>
-        <p class="text-gray-400 mb-5">
+        <p class="text-gray-400 mb-5 text-xs">
           If enabled then this field will be star rating input.
         </p>
 
@@ -121,7 +121,7 @@
         <h3 class="font-semibold block text-lg">
           Text Options
         </h3>
-        <p class="text-gray-400 mb-5">
+        <p class="text-gray-400 mb-5 text-xs">
           Keep it simple or make it a multi-lines input.
         </p>
         <v-checkbox v-model="field.multi_lines"
@@ -144,7 +144,7 @@
         >
           Date Range
         </v-checkbox>
-        <p class="text-gray-400 mb-5">
+        <p class="text-gray-400 mb-5 text-xs">
           Adds an end date. This cannot be used with the time option yet.
         </p>
         <v-checkbox v-model="field.with_time"
@@ -153,7 +153,7 @@
         >
           Date with time
         </v-checkbox>
-        <p class="text-gray-400 mb-5">
+        <p class="text-gray-400 mb-5 text-xs">
           Include time. Or not. This cannot be used with the date range option yet.
         </p>
 
@@ -168,7 +168,7 @@
         >
           Prefill with 'today'
         </v-checkbox>
-        <p class="text-gray-400 mb-5">
+        <p class="text-gray-400 mb-5 text-xs">
           if enabled we will pre-fill this field with the current date
         </p>
 
@@ -193,7 +193,7 @@
           Select Options
           <pro-tag/>
         </h3>
-        <p class="text-gray-400 mb-5">
+        <p class="text-gray-400 mb-5 text-xs">
           Advanced options for your select/multiselect fields.
         </p>
         <text-area-input v-model="optionsText" :name="field.id+'_options_text'" class="mt-4"
@@ -211,7 +211,7 @@
         >
           Always show all select options
         </v-checkbox>
-        <p class="text-gray-400 mb-5">Options won't be in a dropdown anymore, but will all be visible</p>
+        <p class="text-gray-400 mb-5 text-xs">Options won't be in a dropdown anymore, but will all be visible</p>
       </div>
 
       <!-- Customization - Placeholder, Prefill, Relabel, Field Help    -->
@@ -221,7 +221,7 @@
           <pro-tag/>
         </h3>
 
-        <p class="text-gray-400 mb-5">
+        <p class="text-gray-400 mb-5 text-xs">
           Change your form field name, pre-fill a value, add hints, etc.
         </p>
 
@@ -331,7 +331,7 @@
         >
           Generates a unique id on submission
         </v-checkbox>
-        <p class="text-gray-400 mb-5">
+        <p class="text-gray-400 mb-5 text-xs">
           If you enable this, we will hide this field and fill it a unique id (UUID format) on each new form submission
         </p>
 
@@ -341,7 +341,7 @@
         >
           Generates an auto-incremented id on submission
         </v-checkbox>
-        <p class="text-gray-400 mb-5">
+        <p class="text-gray-400 mb-5 text-xs">
           If you enable this, we will hide this field and fill it a unique number on each new form submission
         </p>
       </div>
@@ -431,7 +431,22 @@ export default {
     },
   },
 
-  watch: {},
+  watch: {
+    'field.width': {
+      handler (val) {
+        if (val === undefined || val === null) {
+          this.$set(this.field, 'width', 'full')
+        }
+      },
+      immediate: true
+    }
+  },
+
+  created () {
+    if (this.field.width === undefined || this.field.width === null) {
+      this.$set(this.field, 'width', 'full')
+    }
+  },
 
   mounted() {
     if (['text', 'number', 'url', 'email', 'phone_number'].includes(this.field.type) && !this.field.max_char_limit) {