Matrix Improvements (#606)

* Support disable on matrix

* fix checkbox and radio icon

* Use Nuxt UI toggle

* Can set max_char_limit null

* fix action icon design

* Support for URL prefill for Matrix

* Apply theme color on toggle

* Set --form-color as style variable and use it

* Set default value for form-color

* fix formatting

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/open/forms/OpenForm.vue

@@ -310,7 +310,8 @@ export default {
     },
     computedStyle() {
       return {
-        ...this.minHeight ? {minHeight: this.minHeight + 'px'} : {}
+        ...this.minHeight ? {minHeight: this.minHeight + 'px'} : {},
+        '--form-color': this.form.color
       }
     }
   },
@@ -488,10 +489,19 @@ export default {
     handleUrlPrefill(field, formData, urlPrefill) {
       if (!urlPrefill) return
 
-      const prefillValue = urlPrefill.get(field.id)
+      const prefillValue = (() => {
+        const val = urlPrefill.get(field.id)
+        try {
+          return typeof val === 'string' && val.startsWith('{') ? JSON.parse(val) : val
+        } catch (e) {
+          return val
+        }
+      })()
       const arrayPrefillValue = urlPrefill.getAll(field.id + '[]')
 
-      if (prefillValue !== null) {
+      if (typeof prefillValue === 'object' && prefillValue !== null) {
+        formData[field.id] = { ...prefillValue }
+      } else if (prefillValue !== null) {
         formData[field.id] = field.type === 'checkbox' ? this.parseBooleanValue(prefillValue) : prefillValue
       } else if (arrayPrefillValue.length > 0) {
         formData[field.id] = arrayPrefillValue
@@ -503,7 +513,7 @@ export default {
     handleDefaultPrefill(field, formData) {
       if (field.type === 'date' && field.prefill_today) {
         formData[field.id] = new Date().toISOString()
-      } else if (field.type === 'matrix') {
+      } else if (field.type === 'matrix' && !formData[field.id]) {
         formData[field.id] = {...field.prefill}
       } else if (!(field.id in formData)) {
         formData[field.id] = field.prefill

client/components/open/forms/OpenFormField.vue

@@ -25,7 +25,7 @@
           class="flex lg:flex-col bg-gray-100 dark:bg-gray-800 border rounded-md"
         >
           <div
-            class="p-1 lg:pt-0 hover:text-blue-500 cursor-pointer text-gray-400 dark:text-gray-500 dark:border-gray-500"
+            class="p-1 lg:pt-0 -mb-2 hover:text-blue-500 cursor-pointer text-gray-400 dark:text-gray-500 dark:border-gray-500"
             role="button"
             @click.prevent="openAddFieldSidebar"
           >
@@ -326,7 +326,7 @@ export default {
         helpPosition: (field.help_position) ? field.help_position : 'below_input',
         uppercaseLabels: this.form.uppercase_labels == 1 || this.form.uppercase_labels == true,
         theme: this.theme,
-        maxCharLimit: (field.max_char_limit) ? parseInt(field.max_char_limit) : 2000,
+        maxCharLimit: (field.max_char_limit) ? parseInt(field.max_char_limit) : null,
         showCharLimit: field.show_char_limit || false,
         isDark: this.darkMode
       }

client/components/open/forms/components/FormUrlPrefill.vue

@@ -65,6 +65,8 @@ const preFillUrl = computed(() => {
         props.formData[property.id].forEach((value) => {
           uriComponents.append(property.id + "[]", value)
         })
+      } else if (typeof props.formData[property.id] === 'object') {
+        uriComponents.append(property.id, JSON.stringify(props.formData[property.id]))
       } else {
         uriComponents.append(property.id, props.formData[property.id])
       }

client/components/open/forms/fields/components/FieldOptions.vue

@@ -529,13 +529,13 @@
           name="max_char_limit"
           native-type="number"
           :min="1"
-          :max="2000"
           :form="field"
           label="Max character limit"
-          help="Maximum character limit of 2000"
           :required="false"
+          @update:model-value="onFieldMaxCharLimitChange"
         />
         <toggle-switch-input
+          v-if="field.max_char_limit"
           name="show_char_limit"
           :form="field"
           class="mt-3"
@@ -833,6 +833,12 @@ export default {
     },
     updateMatrixField(newField) {
       this.field = newField
+    },
+    onFieldMaxCharLimitChange(val) {
+      this.field.max_char_limit = val
+      if(!this.field.max_char_limit) {
+        this.field.show_char_limit = false
+      }
     }
   }
 }