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 <julien@nahum.net>
2025-01-03 20:45:47 +05:30
parent 80b7c1e773
commit 75f82b3bc7
9 changed files with 176 additions and 125 deletions
--- a/client/components/forms/DateInput.vue
+++ b/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(' ')
 })

--- a/client/components/forms/FileInput.vue
+++ b/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,
--- a/client/components/forms/MatrixInput.vue
+++ b/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"
--- a/client/components/forms/RichTextAreaInput.client.vue
+++ b/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;
--- a/client/components/forms/components/VSelect.vue
+++ b/client/components/forms/components/VSelect.vue
@@ -13,7 +13,7 @@
        { 
          '!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
+          'focus-within:ring-2 focus-within:ring-opacity-100 focus-within:border-transparent': !hasError && !disabled
        },
        inputClass
      ]"
@@ -78,9 +78,13 @@
          </transition>
        </div>
        <div
-          class="absolute inset-y-0 ltr:right-6 rtl:left-6 w-10 pointer-events-none bg-gradient-to-r from-transparent to-white dark:to-notion-dark-light"
+          class="absolute inset-y-0 ltr:right-6 rtl:left-6 w-10 pointer-events-none -z-[1]"
+          :class="[disabled ? 'bg-gradient-to-r from-transparent to-gray-200 dark:to-gray-800' : theme.SelectInput.chevronGradient]"
        />
-        <span class="absolute inset-y-0 ltr:right-0 rtl:left-0 rtl:!right-auto flex items-center ltr:pr-2 rtl:pl-2 rtl:!pr-0 pointer-events-none bg-white">
+        <span
+          class="absolute inset-y-0 ltr:right-0 rtl:left-0 rtl:!right-auto flex items-center ltr:pr-2 rtl:pl-2 rtl:!pr-0 pointer-events-none"
+          :class="[disabled ? 'bg-gray-200 dark:bg-gray-800' : theme.SelectInput.background]"
+        >
          <Icon
            name="heroicons:chevron-up-down-16-solid" 
            class="h-5 w-5 text-gray-500"
@@ -88,7 +92,7 @@
        </span>
      </button>
      <button
-        v-if="clearable && showClearButton && !isEmpty"
+        v-if="clearable && showClearButton && !disabled && !isEmpty"
        class="hover:bg-gray-50 dark:hover:bg-gray-900 ltr:border-l rtl:!border-l-0 rtl:border-r px-2 flex items-center"
        :class="[theme.SelectInput.spacing.vertical]"
        @click.prevent="clear()"
@@ -208,47 +212,47 @@

 <script>
 import Collapsible from '~/components/global/transitions/Collapsible.vue'
-import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
 import debounce from 'debounce'
 import Fuse from 'fuse.js'
+import CachedDefaultTheme from '~/lib/forms/themes/CachedDefaultTheme.js'

 export default {
  name: 'VSelect',
-  components: {Collapsible},
+  components: { Collapsible },
  directives: {},
  props: {
    data: Array,
-    modelValue: {default: null, type: [String, Number, Array, Object]},
-    inputClass: {type: String, default: null},
-    dropdownClass: {type: String, default: 'w-full'},
-    loading: {type: Boolean, default: false},
-    required: {type: Boolean, default: false},
-    multiple: {type: Boolean, default: false},
-    searchable: {type: Boolean, default: false},
-    clearable: {type: Boolean, default: false},
-    hasError: {type: Boolean, default: false},
-    remote: {type: Function, default: null},
-    searchKeys: {type: Array, default: () => ['name']},
-    optionKey: {type: String, default: 'id'},
-    emitKey: {type: String, default: null},
-    color: {type: String, default: '#3B82F6'},
-    placeholder: {type: String, default: null},
+    modelValue: { default: null, type: [String, Number, Array, Object, Boolean] },
+    inputClass: { type: String, default: null },
+    dropdownClass: { type: String, default: 'w-full' },
+    loading: { type: Boolean, default: false },
+    required: { type: Boolean, default: false },
+    multiple: { type: Boolean, default: false },
+    searchable: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: false },
+    hasError: { type: Boolean, default: false },
+    remote: { type: Function, default: null },
+    searchKeys: { type: Array, default: () => ['name'] },
+    optionKey: { type: String, default: 'id' },
+    emitKey: { type: String, default: null },
+    color: { type: String, default: '#3B82F6' },
+    placeholder: { type: String, default: null },
    uppercaseLabels: { type: Boolean, default: true },
    showClearButton: { type: Boolean, default: true },
    theme: {
      type: Object, default: () => {
-        const theme = inject("theme", null)
+        const theme = inject('theme', null)
        if (theme) {
          return theme.value
        }
        return CachedDefaultTheme.getInstance()
      }
    },
-    allowCreation: {type: Boolean, default: false},
-    disabled: {type: Boolean, default: false}
+    allowCreation: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false }
  },
  emits: ['update:modelValue', 'update-options', 'focus', 'blur'],
-  data() {
+  data () {
    return {
      isOpen: false,
      searchTerm: '',
@@ -257,46 +261,46 @@ export default {
    }
  },
  computed: {
-    optionStyle() {
+    optionStyle () {
      return {
        '--bg-form-color': this.color
      }
    },
-    inputStyle() {
+    inputStyle () {
      return {
        '--tw-ring-color': this.color
      }
    },
-    debouncedRemote() {
+    debouncedRemote () {
      if (this.remote) {
        return debounce(this.remote, 300)
      }
      return null
    },
-    filteredOptions() {
+    filteredOptions () {
      if (!this.data) return []
      if (!this.searchable || this.remote || this.searchTerm === '') {
        return this.data
      }

      // Fuse search
-      const fuse = new Fuse(this.data, {
-        keys: this.searchKeys,
-        includeScore: true
-      })
-      return fuse.search(this.searchTerm).filter((res) => res.score < 0.5).map((res) => {
+      const fuzeOptions = {
+        keys: this.searchKeys
+      }
+      const fuse = new Fuse(this.data, fuzeOptions)
+      return fuse.search(this.searchTerm).map((res) => {
        return res.item
      })
    },
-    isSearchable() {
+    isSearchable () {
      return this.searchable || this.remote !== null || this.allowCreation
    },
-    isEmpty() {
+    isEmpty () {
      return this.multiple ? !this.modelValue || this.modelValue.length === 0 : !this.modelValue
    }
  },
  watch: {
-    searchTerm(val) {
+    searchTerm (val) {
      if (!this.debouncedRemote) return
      if ((this.remote && val) || (val === '' && !this.modelValue) || (val === '' && this.isOpen)) {
        return this.debouncedRemote(val)
@@ -304,13 +308,13 @@ export default {
    }
  },
  methods: {
-    onClickAway(event) {
+    onClickAway (event) {
      // Check that event target isn't children of dropdown
      if (this.$refs.select && !this.$refs.select.contains(event.target)) {
        this.isOpen = false
      }
    },
-    isSelected(value) {
+    isSelected (value) {
      if (!this.modelValue) return false

      if (this.emitKey && value[this.emitKey]) {
@@ -323,16 +327,18 @@ export default {
      return this.modelValue === value
    },
    onFocus(event) {
+      if (this.disabled) return
      this.isFocused = true
      this.$emit('focus', event)
    },

    onBlur(event) {
+      if (this.disabled) return
      this.isFocused = false
      this.$emit('blur', event)
    },

-    toggleDropdown() {
+    toggleDropdown () {
      if (this.disabled) {
        this.isOpen = false
      } else {
@@ -347,7 +353,7 @@ export default {
        this.searchTerm = ''
      }
    },
-    select(value) {
+    select (value) {
      if (!this.multiple) {
        // Close after select
        this.toggleDropdown()
@@ -382,10 +388,10 @@ export default {
        }
      }
    },
-    clear() {
+    clear () {
      this.$emit('update:modelValue', this.multiple ? [] : null)
    },
-    createOption(newOption) {
+    createOption (newOption) {
      if (newOption) {
        const newItem = {
          name: newOption,
@@ -400,3 +406,4 @@ export default {
  }
 }
 </script>
+
--- a/client/components/open/forms/components/form-components/FormCustomization.vue
+++ b/client/components/open/forms/components/form-components/FormCustomization.vue
@@ -11,8 +11,8 @@
      class="mt-4"
      :options="[
        { name: 'Default', value: 'default' },
-        { name: 'Simple', value: 'simple' },
        { name: 'Notion', value: 'notion' },
+        { name: 'Simple (no shadows)', value: 'simple' },
      ]"
      :form="form"
      label="Form Theme"
--- a/client/components/open/forms/fields/components/FieldOptions.vue
+++ b/client/components/open/forms/fields/components/FieldOptions.vue
@@ -231,7 +231,7 @@
        :form="field"
        class="mt-3"
        name="date_range"
-        label="End date"
+        label="Include end date"
        @update:model-value="onFieldDateRangeChange"
      />
      <toggle-switch-input