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/forms/CheckboxInput.vue

@@ -5,16 +5,16 @@
     </template>
 
     <div class="flex space-x-2 items-center">
-    <VCheckbox
-      :id="id ? id : name"
-      v-model="compVal"
-      :value="value"
-      :disabled="disabled ? true : null"
-      :name="name"
-      :color="color"
-      :theme="theme"
-    />
-    <div>
+      <VCheckbox
+        :id="id ? id : name"
+        v-model="compVal"
+        :value="value"
+        :disabled="disabled ? true : null"
+        :name="name"
+        :color="color"
+        :theme="theme"
+      />
+      <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>
-import {inputProps, useFormInput} from "./useFormInput.js"
-import InputWrapper from "./components/InputWrapper.vue"
-import RadioButtonIcon from "./components/RadioButtonIcon.vue"
-
-export default {
-  name: "MatrixInput",
-  components: {InputWrapper, RadioButtonIcon},
-
-  props: {
-    ...inputProps,
-    rows: {type: Array, required: true},
-    columns: {type: Array, required: true},
-  },
-  setup(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
+  <script>
+  import {inputProps, useFormInput} from "./useFormInput.js"
+  import InputWrapper from "./components/InputWrapper.vue"
+  import RadioButtonIcon from "./components/RadioButtonIcon.vue"
+  export default {
+    name: "MatrixInput",
+    components: {InputWrapper, RadioButtonIcon},
+    props: {
+      ...inputProps,
+      rows: {type: Array, required: true},
+      columns: {type: Array, required: true},
+    },
+    setup(props, context) {
+      return {
+        ...useFormInput(props, context),
       }
     },
-  },
-}
-</script>
+    data() {
+      return {
+      }
+    },
+    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"
-        :theme="theme"
+        :ui="{
+          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
-    :name="isChecked ? 'material-symbols:check-box' : 'material-symbols:check-box-outline-blank'"
-    :class="[
-      theme.FlatSelectInput.icon,
-      isChecked ? '' : theme.FlatSelectInput.unselectedIcon,
-    ]"
-    :color="isChecked ? color : undefined"
-  />
+  <div>
+    <Icon
+      v-show="isChecked"
+      name="i-material-symbols-check-box"
+      class="block"
+      :class="[
+        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
-    :name="isChecked ? 'ic:round-radio-button-checked' : 'ic:round-radio-button-unchecked'"
-    :class="[
-      theme.FlatSelectInput.icon,
-      isChecked ? '' : theme.FlatSelectInput.unselectedIcon,
-    ]"
-    :color="isChecked ? color : undefined"
-  />
+  <div>
+    <Icon
+      v-show="isChecked"
+      name="ic:round-radio-button-checked"
+      class="block"
+      :class="[
+        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>