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>

api/app/Http/Requests/UserFormRequest.php

@@ -91,7 +91,7 @@ abstract class UserFormRequest extends \Illuminate\Foundation\Http\FormRequest
 
             // Text field
             'properties.*.multi_lines' => 'boolean|nullable',
-            'properties.*.max_char_limit' => 'integer|nullable|min:1|max:2000',
+            'properties.*.max_char_limit' => 'integer|nullable|min:1',
             'properties.*.show_char_limit ' => 'boolean|nullable',
             'properties.*.secret_input' => 'boolean|nullable',
 
@@ -134,8 +134,7 @@ abstract class UserFormRequest extends \Illuminate\Foundation\Http\FormRequest
         return [
             'properties.*.name.required' => 'The form block number :position is missing a name.',
             'properties.*.type.required' => 'The form block number :position is missing a type.',
-            'properties.*.max_char_limit.min' => 'The form block number :position max character limit must be at least 1 OR Empty',
+            'properties.*.max_char_limit.min' => 'The form block number :position max character limit must be at least 1 OR Empty'
-            'properties.*.max_char_limit.max' => 'The form block number :position max character limit may not be greater than 2000.',
         ];
     }
 }

client/components/forms/CheckboxInput.vue

@@ -5,16 +5,16 @@
     </template>
 
     <div class="flex space-x-2 items-center">
-    <VCheckbox
+      <VCheckbox
-      :id="id ? id : name"
+        :id="id ? id : name"
-      v-model="compVal"
+        v-model="compVal"
-      :value="value"
+        :value="value"
-      :disabled="disabled ? true : null"
+        :disabled="disabled ? true : null"
-      :name="name"
+        :name="name"
-      :color="color"
+        :color="color"
-      :theme="theme"
+        :theme="theme"
-    />
+      />
-    <div>
+      <div>
         <slot name="label">
           <label
             :aria-label="id ? id : name"

client/components/forms/MatrixInput.vue

@@ -9,7 +9,6 @@
         theme.default.borderRadius,
         {
           '!ring-red-500 !ring-2 !border-transparent': hasError,
-          '!cursor-not-allowed !bg-gray-300': disabled,
         },
       ]"
     >
@@ -28,7 +27,6 @@
             </td>
           </tr>
         </thead>
-
         <tbody>
           <tr
             v-for="row, rowIndex in rows"
@@ -44,6 +42,9 @@
               v-for="column in columns"
               :key="row + column"
               class="border-l border-gray-300 hover:!bg-gray-100 dark:hover:!bg-gray-800"
+              :class="{
+                '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800 hover:!bg-gray-200 dark:hover:!bg-gray-800': disabled,
+              }"
             >
               <div
                 v-if="compVal"
@@ -54,6 +55,9 @@
                   theme.FlatSelectInput.spacing.vertical,
                   theme.FlatSelectInput.fontSize,
                   theme.FlatSelectInput.option,
+                  {
+                    '!cursor-not-allowed !bg-transparent hover:!bg-transparent dark:hover:!bg-transparent': disabled,
+                  }
                 ]"
                 @click="onSelect(row, column)"
               >
@@ -77,43 +81,44 @@
     </template>
   </input-wrapper>
 </template>
-<script>
+  <script>
-import {inputProps, useFormInput} from "./useFormInput.js"
+  import {inputProps, useFormInput} from "./useFormInput.js"
-import InputWrapper from "./components/InputWrapper.vue"
+  import InputWrapper from "./components/InputWrapper.vue"
-import RadioButtonIcon from "./components/RadioButtonIcon.vue"
+  import RadioButtonIcon from "./components/RadioButtonIcon.vue"
-
+  export default {
-export default {
+    name: "MatrixInput",
-  name: "MatrixInput",
+    components: {InputWrapper, RadioButtonIcon},
-  components: {InputWrapper, RadioButtonIcon},
+    props: {
-
+      ...inputProps,
-  props: {
+      rows: {type: Array, required: true},
-    ...inputProps,
+      columns: {type: Array, required: true},
-    rows: {type: Array, required: true},
+    },
-    columns: {type: Array, required: true},
+    setup(props, context) {
-  },
+      return {
-  setup(props, context) {
+        ...useFormInput(props, context),
-    return {
-      ...useFormInput(props, context),
-    }
-  },
-  data() {
-    return {
-    }
-  },
-  computed: {},
-  mounted() {
-    if (!this.compVal || typeof this.compVal !== 'object') {
-      this.compVal = {}
-    }
-  },
-  methods: {
-    onSelect(row, column) {
-      if (this.compVal[row] === column && !this.required) {
-        this.compVal[row] = null
-      } else {
-        this.compVal[row] = column
       }
     },
-  },
+    data() {
-}
+      return {
-</script>
+      }
+    },
+    computed: {},
+    mounted() {
+      if (!this.compVal || typeof this.compVal !== 'object') {
+        this.compVal = {}
+      }
+    },
+    methods: {
+        onSelect(row, column) {
+          if (this.disabled) {
+            return
+          }
+          if (this.compVal[row] === column && !this.required) {
+              this.compVal[row] = null
+          } else {
+              this.compVal[row] = column
+          }
+      },
+    },
+  }
+  </script>

client/components/forms/ToggleSwitchInput.vue

@@ -5,13 +5,16 @@
     </template>
 
     <div class="flex space-x-2 items-center">
-      <v-switch
+      <UToggle
         :id="id ? id : name"
         v-model="compVal"
         :disabled="disabled ? true : null"
-        :color="color"
+        :ui="{
-        :theme="theme"
+          active: 'bg-[var(--form-color,#3B82F6)]',
+          ring: 'focus:ring-[var(--form-color,#3B82F6)]/50'
+        }"
       />
+  
       <div>
         <slot name="label">
           <label
@@ -51,14 +54,13 @@
 
 <script>
 import {inputProps, useFormInput} from "./useFormInput.js"
-import VSwitch from "./components/VSwitch.vue"
 import InputWrapper from "./components/InputWrapper.vue"
 import InputHelp from "~/components/forms/components/InputHelp.vue"
 
 export default {
   name: "ToggleSwitchInput",
 
-  components: {InputHelp, InputWrapper, VSwitch},
+  components: {InputHelp, InputWrapper},
   props: {
     ...inputProps,
   },
@@ -73,4 +75,4 @@ export default {
     this.compVal = !!this.compVal
   },
 }
-</script>
+</script>

client/components/forms/components/CheckboxIcon.vue

@@ -1,12 +1,24 @@
 <template>
-  <Icon
+  <div>
-    :name="isChecked ? 'material-symbols:check-box' : 'material-symbols:check-box-outline-blank'"
+    <Icon
-    :class="[
+      v-show="isChecked"
-      theme.FlatSelectInput.icon,
+      name="i-material-symbols-check-box"
-      isChecked ? '' : theme.FlatSelectInput.unselectedIcon,
+      class="block"
-    ]"
+      :class="[
-    :color="isChecked ? color : undefined"
+        theme.FlatSelectInput.icon,
-  />
+        'bg-[var(--form-color,#3B82F6)]'
+      ]"
+    />
+    <Icon
+      v-show="!isChecked"
+      name="i-material-symbols-check-box-outline-blank"
+      class="block"
+      :class="[
+        theme.FlatSelectInput.icon,
+        theme.FlatSelectInput.unselectedIcon,
+      ]"
+    />
+  </div>
 </template>
 
 <script setup>

client/components/forms/components/RadioButtonIcon.vue

@@ -1,17 +1,27 @@
 <template>
-  <Icon
+  <div>
-    :name="isChecked ? 'ic:round-radio-button-checked' : 'ic:round-radio-button-unchecked'"
+    <Icon
-    :class="[
+      v-show="isChecked"
-      theme.FlatSelectInput.icon,
+      name="ic:round-radio-button-checked"
-      isChecked ? '' : theme.FlatSelectInput.unselectedIcon,
+      class="block"
-    ]"
+      :class="[
-    :color="isChecked ? color : undefined"
+        theme.FlatSelectInput.icon,
-  />
+        'bg-[var(--form-color,#3B82F6)]'
+      ]"
+    />
+    <Icon
+      v-show="!isChecked"
+      name="ic:round-radio-button-unchecked"
+      class="block"
+      :class="[
+        theme.FlatSelectInput.icon,
+        theme.FlatSelectInput.unselectedIcon,
+      ]"
+    />
+  </div>
 </template>
 
 <script setup>
-import { computed } from 'vue'
-
 const props = defineProps({
   isChecked: {
     type: Boolean,

client/components/forms/components/VSwitch.vue

@@ -1,54 +0,0 @@
-<template>
-  <div
-    :id="id || name"
-    :aria-labelledby="id || name"
-    role="checkbox"
-    :aria-checked="props.modelValue"
-    class="flex"
-    @click.stop="onClick"
-  >
-    <div
-      class="inline-flex items-center bg-gray-300 rounded-full cursor-pointer focus:outline-none transition-all transform ease-in-out duration-100"
-      :class="[{ 'toggle-switch': props.modelValue }, theme.SwitchInput.containerSize]"
-      :style="{ '--accent-color': props.color }"
-    >
-      <div
-        class="inline-block h-4 w-4 rounded-full bg-white transition-all transform ease-in-out duration-150 scale-100"
-        :class="{ [theme.SwitchInput.translatedClass]: props.modelValue}"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { defineEmits, defineProps } from "vue"
-import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
-
-const props = defineProps({
-  id: { type: String, default: null },
-  name: { type: String, default: "checkbox" },
-  modelValue: { type: Boolean, default: false },
-  disabled: { type: Boolean, default: false },
-  color: { type: String, default: '#3B82F6' },
-  theme: {
-    type: Object, default: () => {
-      const theme = inject("theme", null)
-      if (theme) {
-        return theme.value
-      }
-      return CachedDefaultTheme.getInstance()
-    }
-  },
-})
-const emit = defineEmits(["update:modelValue"])
-
-function onClick() {
-  if (props.disabled) return
-  emit("update:modelValue", !props.modelValue)
-}
-</script>
-<style>
-  .toggle-switch {
-    background-color: var(--accent-color);
-  }
-</style>

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
+      }
     }
   }
 }