Refactor form components (#659)

* Add Barcode Input Component and Integrate Quagga for Scanning

- Introduced a new BarcodeInput component for scanning barcodes using the Quagga library.
- Updated package.json and package-lock.json to include Quagga as a dependency.
- Enhanced form themes to accommodate the new BarcodeInput component.
- Added localization support for barcode scanning actions in English.
- Updated blocks_types.json to register the new barcode input type.

These changes improve the application's functionality by allowing users to scan barcodes directly within forms, enhancing user experience and data input efficiency.

* Update Barcode scanner UI

* Barcode decoder as user selection

* improve barcode

* Refactor form components and update Tailwind configuration

- Removed unused box shadow styles from tailwind.config.js.
- Enhanced DateInput, FileInput, MatrixInput, RichTextAreaInput, and VSelect components with improved styling and error handling.
- Updated theme settings in form-themes.js to include new styles for MatrixInput and other form elements.
- Adjusted labels in FieldOptions.vue for clarity.
- Improved overall UI consistency and responsiveness across form components.

---------

Co-authored-by: Julien Nahum <[email protected]>

client/components/forms/DateInput.vue

@@ -59,7 +59,7 @@
         </div>
       </button>
 
-      <template #panel="{ close }">
+      <template #panel>
         <DatePicker
           v-if="props.dateRange"
           v-model.range="modeledValue"
@@ -157,9 +157,11 @@ const inputClasses = computed(() => {
     classes.push('!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800')
   }
   if (input.hasError.value) {
-
     classes.push('!ring-red-500 !ring-2 !border-transparent')
   }
+  if (!props.disabled && !input.hasError.value && pickerOpen.value) {
+    classes.push('ring-2 ring-opacity-100 border-transparent')
+  }
   return classes.join(' ')
 })
 

client/components/forms/FileInput.vue

@@ -23,6 +23,7 @@
       class="flex flex-col w-full items-center justify-center transition-colors duration-40"
       :class="[
         {'!cursor-not-allowed':disabled, 'cursor-pointer':!disabled,
+         '!bg-gray-200 dark:!bg-gray-800': disabled,
          [theme.fileInput.inputHover.light + ' dark:'+theme.fileInput.inputHover.dark]: uploadDragoverEvent,
          ['hover:'+theme.fileInput.inputHover.light +' dark:hover:'+theme.fileInput.inputHover.dark]: !loading},
         theme.fileInput.input,

client/components/forms/MatrixInput.vue

@@ -4,9 +4,11 @@
       <slot name="label" />
     </template>
     <div
-      class="border border-gray-300 overflow-x-auto"
+      class="border overflow-x-auto"
       :class="[
         theme.default.borderRadius,
+        theme.MatrixInput.cell,
+        theme.MatrixInput.table,
         {
           '!ring-red-500 !ring-2 !border-transparent': hasError,
         },
@@ -19,7 +21,8 @@
             <td
               v-for="column in columns"
               :key="column"
-              class="ltr:border-l rtl:border-r rtl:!border-l-0 border-gray-300 max-w-24 overflow-hidden"
+              class="ltr:border-l rtl:border-r rtl:!border-l-0 max-w-24 overflow-hidden"
+              :class="theme.MatrixInput.cell"
             >
               <div class="p-2 w-full flex items-center justify-center text-sm">
                 {{ column }}
@@ -41,10 +44,14 @@
             <td
               v-for="column in columns"
               :key="row + column"
-              class="ltr:border-l rtl:border-r rtl:!border-l-0 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,
-              }"
+              class="ltr:border-l rtl:border-r rtl:!border-l-0"
+              :class="[
+                theme.MatrixInput.cell,
+                theme.MatrixInput.cellHover,
+                {
+                  '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800 hover:!bg-gray-200 dark:hover:!bg-gray-800': disabled,
+                },
+              ]"
             >
               <div
                 v-if="compVal"

client/components/forms/RichTextAreaInput.client.vue

@@ -1,5 +1,8 @@
 <template>
-  <InputWrapper v-bind="inputWrapperProps">
+  <InputWrapper
+    v-bind="inputWrapperProps"
+    wrapper-class="not-draggable"
+  >
     <template #label>
       <slot name="label" />
     </template>
@@ -10,19 +13,20 @@
         {
           '!ring-red-500 !ring-2 !border-transparent': hasError,
           '!cursor-not-allowed !bg-gray-200 dark:!bg-gray-800': disabled,
+          'focus-within:ring-2 focus-within:ring-opacity-100 focus-within:border-transparent': !hasError && !disabled
         },
         theme.RichTextAreaInput.input,
         theme.RichTextAreaInput.borderRadius,
         theme.default.fontSize,
       ]"
       :style="{
-        '--font-size': theme.default.fontSize
+        '--font-size': theme.default.fontSize,
+        ...inputStyle
       }"
     >
       <QuillyEditor
         :id="id ? id : name"
         ref="editor"
-        :key="id+placeholder"
         v-model="compVal"
         :options="quillOptions"
         :disabled="disabled"
@@ -37,7 +41,6 @@
     <template #error>
       <slot name="error" />
     </template>
-
     <MentionDropdown
       v-if="enableMentions && mentionState"
       :state="mentionState"
@@ -53,6 +56,7 @@ import InputWrapper from './components/InputWrapper.vue'
 import QuillyEditor from './components/QuillyEditor.vue'
 import MentionDropdown from './components/MentionDropdown.vue'
 import registerMentionExtension from '~/lib/quill/quillMentionExtension.js'
+
 const props = defineProps({
   ...inputProps,
   editorOptions: {
@@ -68,7 +72,9 @@ const props = defineProps({
     default: () => []
   }
 })
+
 const emit = defineEmits(['update:modelValue'])
+
 const { compVal, inputStyle, hasError, inputWrapperProps } = useFormInput(props, { emit })
 const editor = ref(null)
 const mentionState = ref(null)
@@ -91,6 +97,7 @@ const quillOptions = computed(() => {
       ]
     }
   }
+
   const mergedOptions = { ...defaultOptions, ...props.editorOptions, modules: { ...defaultOptions.modules, ...props.editorOptions.modules } }
   
   if (props.enableMentions) {
@@ -112,21 +119,26 @@ const quillOptions = computed(() => {
     border-right: 0px !important;
     border-left: 0px !important;
     font-size: var(--font-size);
+
     .ql-editor {
       min-height: 100px !important;
     }
   }
+
   .ql-toolbar {
     border-top: 0px !important;
     border-right: 0px !important;
     border-left: 0px !important;
   }
+
   .ql-header {
     @apply rounded-md;
   }
+
   .ql-editor.ql-blank:before {
     @apply text-gray-400 dark:text-gray-500 not-italic;
   }
+
   .ql-snow .ql-toolbar .ql-picker-item.ql-selected,
   .ql-snow .ql-toolbar .ql-picker-item:hover,
   .ql-snow .ql-toolbar .ql-picker-label.ql-active,
@@ -144,14 +156,16 @@ const quillOptions = computed(() => {
     @apply text-nt-blue;
   }
 }
+
 .ql-mention {
   padding-top: 0px !important;
-  margin-top: -5px !important;
 }
 .ql-mention::after {
   content: '@';
   font-size: 16px;
 }
+
+
 .rich-editor, .mention-input {
   span[mention] {
     @apply inline-flex items-center align-baseline leading-tight text-sm relative bg-blue-100 text-blue-800 border border-blue-200 rounded-md px-1 py-0.5 mx-0.5;