Work in progress

client/components/forms/components/InputHelp.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="flex mb-1 input-help">
+    <small :class="theme.default.help" class="grow flex">
+      <slot name="help"><span class="field-help" v-html="help" /></slot>
+    </small>
+    <slot name="after-help">
+      <small class="flex-grow"  />
+    </slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InputHelp',
+
+  props: {
+    theme: { type: Object, required: true },
+    help: { type: String, required: false }
+  }
+}
+</script>

client/components/forms/components/InputLabel.vue

@@ -0,0 +1,25 @@
+<template>
+  <label :for="nativeFor"
+         class="input-label"
+         :class="[theme.default.label,{'uppercase text-xs': uppercaseLabels, 'text-sm': !uppercaseLabels}]"
+  >
+    <slot>
+      {{ label }}
+      <span v-if="required" class="text-red-500 required-dot">*</span>
+    </slot>
+  </label>
+</template>
+
+<script>
+export default {
+  name: 'InputLabel',
+
+  props: {
+    nativeFor: { type: String, default: null },
+    theme: { type: Object, required: true },
+    uppercaseLabels: { type: Boolean, default: false },
+    required: { type: Boolean, default: false },
+    label: { type: String, required: true }
+  }
+}
+</script>

client/components/forms/components/InputWrapper.vue

@@ -0,0 +1,54 @@
+<template>
+  <div :class="wrapperClass" :style="inputStyle">
+    <slot name="label">
+      <input-label v-if="label && !hideFieldName"
+                   :label="label"
+                   :theme="theme"
+                   :required="required"
+                   :native-for="id?id:name"
+                   :uppercase-labels="uppercaseLabels"
+      />
+    </slot>
+    <slot v-if="help && helpPosition==='above_input'" name="help">
+      <input-help :help="help" :theme="theme" />
+    </slot>
+    <slot />
+
+    <slot v-if="(help && helpPosition==='below_input') || $slots.bottom_after_help" name="help">
+      <input-help :help="help" :theme="theme">
+        <template #after-help>
+          <slot name="bottom_after_help" />
+        </template>
+      </input-help>
+    </slot>
+    <slot name="error">
+      <has-error v-if="hasValidation && form" :form="form" :field="name" />
+    </slot>
+  </div>
+</template>
+
+<script>
+import InputLabel from './InputLabel.vue'
+import InputHelp from './InputHelp.vue'
+
+export default {
+  name: 'InputWrapper',
+  components: { InputLabel, InputHelp },
+
+  props: {
+    id: { type: String, required: false },
+    name: { type: String, required: false },
+    label: { type: String, required: false },
+    form: { type: Object, required: false },
+    theme: { type: Object, required: true },
+    wrapperClass: { type: String, required: false },
+    inputStyle: { type: Object, required: false },
+    help: { type: String, required: false },
+    helpPosition: { type: String, default: 'below_input' },
+    uppercaseLabels: { type: Boolean, default: true },
+    hideFieldName: { type: Boolean, default: true },
+    required: { type: Boolean, default: false },
+    hasValidation: { type: Boolean, default: true }
+  }
+}
+</script>

client/components/forms/components/UploadedFile.vue

@@ -0,0 +1,63 @@
+<template>
+  <div
+    :class="[theme.fileInput.uploadedFile, 'overflow-hidden']"
+    :title="file.file.name"
+  >
+    <div v-if="file.src && !isImageHide" class="h-20 overflow-hidden flex">
+      <img class="block object-cover object-center w-full" :src="file.src" @error="isImageHide=true">
+    </div>
+    <div v-else class="h-20 flex items-center justify-center">
+      <svg class="w-10 h-10 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+           stroke-width="0.8" stroke="currentColor"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round"
+              d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+        />
+      </svg>
+    </div>
+    <div class="flex gap-2 items-center border-t py-1 px-2">
+      <p class="flex-grow text-left truncate text-gray-500 text-xs">
+        {{ file.file.name }}
+      </p>
+      <a
+        href="javascript:void(0);"
+        class="flex text-gray-400 rounded hover:bg-neutral-50 hover:text-red-500 dark:text-gray-600 p-1"
+        role="button"
+        title="Remove"
+        @click.stop="$emit('remove')"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-4 w-4"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+          />
+        </svg>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UploadedFile',
+
+  props: {
+    file: { default: null },
+    theme: { type: Object }
+  },
+
+  data: () => ({
+    isImageHide: false
+  }),
+
+  computed: {}
+}
+</script>

client/components/forms/components/VCheckbox.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="flex items-center">
+    <input
+      :id="id || name"
+      :name="name"
+      :checked="internalValue"
+      type="checkbox"
+      :class="sizeClasses"
+      class="rounded border-gray-500 cursor-pointer"
+      :disabled="disabled?true:null"
+      @click="handleClick"
+    >
+    <label :for="id || name" class="text-gray-700 dark:text-gray-300 ml-2" :class="{'!cursor-not-allowed':disabled}">
+      <slot />
+    </label>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, defineProps, defineEmits, defineOptions } from 'vue'
+
+defineOptions({
+  name: 'VCheckbox'
+})
+
+const props = defineProps({
+  id: { type: String, default: null },
+  name: { type: String, default: 'checkbox' },
+  modelValue: { type: [Boolean, String], default: false },
+  checked: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  sizeClasses: { type: String, default: 'w-4 h-4' }
+})
+
+const emit = defineEmits(['update:modelValue', 'click'])
+
+const internalValue = ref(props.modelValue)
+
+watch(() => props.modelValue, val => {
+  internalValue.value = val
+})
+
+watch(() => props.checked, val => {
+  internalValue.value = val
+})
+
+watch(() => internalValue.value, (val, oldVal) => {
+  if (val === 0 || val === '0') val = false
+  if (val === 1 || val === '1') val = true
+
+  if (val !== oldVal) {
+    emit('update:modelValue', val)
+  }
+})
+
+if ('checked' in props) {
+  internalValue.value = props.checked
+}
+
+onMounted(() => {
+  emit('update:modelValue', internalValue.value)
+})
+
+const handleClick = (e) => {
+  emit('click', e)
+
+  if (!e.isPropagationStopped) {
+    internalValue.value = e.target.checked
+    emit('update:modelValue', internalValue.value)
+  }
+}
+</script>

client/components/forms/components/VSelect.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="v-select relative">
+    <span class="inline-block w-full rounded-md">
+      <button type="button" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"
+              class="cursor-pointer"
+              :style="inputStyle"
+              :class="[theme.SelectInput.input,{'py-2': !multiple || loading,'py-1': multiple, '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200': disabled}, inputClass]"
+              @click.stop="toggleDropdown"
+      >
+        <div :class="{'h-6': !multiple, 'min-h-8': multiple && !loading}">
+          <transition name="fade" mode="out-in">
+            <loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
+            <div v-else-if="modelValue" key="value" class="flex" :class="{'min-h-8': multiple}">
+              <slot name="selected" :option="modelValue" />
+            </div>
+            <div v-else key="placeholder">
+              <slot name="placeholder">
+                <div class="text-gray-400 dark:text-gray-500 w-full text-left truncate pr-3"
+                     :class="{'py-1': multiple && !loading}"
+                >
+                  {{ placeholder }}
+                </div>
+              </slot>
+            </div>
+          </transition>
+        </div>
+        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+          <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="none" stroke="currentColor">
+            <path d="M7 7l3-3 3 3m0 6l-3 3-3-3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </span>
+      </button>
+    </span>
+    <collapsible v-model="isOpen"
+                 class="absolute mt-1 rounded-md bg-white dark:bg-notion-dark-light shadow-xl z-10"
+                 :class="dropdownClass"
+    >
+      <ul tabindex="-1" role="listbox"
+          class="rounded-md text-base leading-6 shadow-xs overflow-auto focus:outline-none sm:text-sm sm:leading-5 relative"
+          :class="{'max-h-42 py-1': !isSearchable,'max-h-48 pb-1': isSearchable}"
+      >
+        <div v-if="isSearchable" class="px-2 pt-2 sticky top-0 bg-white dark-bg-notion-dark-light z-10">
+          <text-input v-model="searchTerm" name="search" :color="color" :theme="theme"
+                      placeholder="Search..."
+          />
+        </div>
+        <div v-if="loading" class="w-full py-2 flex justify-center">
+          <loader class="h-6 w-6 text-nt-blue mx-auto" />
+        </div>
+        <template v-if="filteredOptions.length > 0">
+          <li v-for="item in filteredOptions" :key="item[optionKey]" role="option" :style="optionStyle"
+              :class="{'px-3 pr-9': multiple, 'px-3': !multiple}"
+              class="text-gray-900 cursor-default select-none relative py-2 cursor-pointer group hover:text-white hover:bg-form-color focus:outline-none focus-text-white focus-nt-blue"
+              @click="select(item)"
+          >
+            <slot name="option" :option="item" :selected="isSelected(item)" />
+          </li>
+        </template>
+        <p v-else-if="!loading && !(allowCreation && searchTerm)" class="w-full text-gray-500 text-center py-2">
+          {{ (allowCreation ? 'Type something to add an option' : 'No option available') }}.
+        </p>
+        <li v-if="allowCreation && searchTerm" role="option" :style="optionStyle"
+            :class="{'px-3 pr-9': multiple, 'px-3': !multiple}"
+            class="text-gray-900 cursor-default select-none relative py-2 cursor-pointer group hover:text-white hover:bg-form-color focus:outline-none focus-text-white focus-nt-blue"
+            @click="createOption(searchTerm)"
+        >
+          Create <b class="px-1 bg-gray-300 rounded group-hover-text-black">{{ searchTerm }}</b>
+        </li>
+      </ul>
+    </collapsible>
+  </div>
+</template>
+
+<script>
+import Collapsible from '~/components/global/transitions/Collapsible.vue'
+import { themes } from '../../../config/form-themes'
+import TextInput from '../TextInput.vue'
+import debounce from 'debounce'
+import Fuse from 'fuse.js'
+
+export default {
+  name: 'VSelect',
+  components: { Collapsible, TextInput },
+  directives: {},
+  props: {
+    data: Array,
+    modelValue: { default: null },
+    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 },
+    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 },
+    theme: { type: Object, default: () => themes.default },
+    allowCreation: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false }
+  },
+  data () {
+    return {
+      isOpen: false,
+      searchTerm: '',
+      defaultValue: this.modelValue ?? null
+    }
+  },
+  computed: {
+    optionStyle () {
+      return {
+        '--bg-form-color': this.color
+      }
+    },
+    inputStyle () {
+      return {
+        '--tw-ring-color': this.color
+      }
+    },
+    debouncedRemote () {
+      if (this.remote) {
+        return debounce(this.remote, 300)
+      }
+      return null
+    },
+    filteredOptions () {
+      if (!this.data) return []
+      if (!this.searchable || this.remote || this.searchTerm === '') {
+        return this.data
+      }
+
+      // Fuse search
+      const fuzeOptions = {
+        keys: this.searchKeys
+      }
+      const fuse = new Fuse(this.data, fuzeOptions)
+      return fuse.search(this.searchTerm).map((res) => {
+        return res.item
+      })
+    },
+    isSearchable () {
+      return this.searchable || this.remote !== null || this.allowCreation
+    }
+  },
+  watch: {
+    searchTerm (val) {
+      if (!this.debouncedRemote) return
+      if ((this.remote && val) || (val === '' && !this.modelValue) || (val === '' && this.isOpen)) {
+        return this.debouncedRemote(val)
+      }
+    }
+  },
+  methods: {
+    isSelected (value) {
+      if (!this.modelValue) return false
+
+      if (this.emitKey && value[this.emitKey]) {
+        value = value[this.emitKey]
+      }
+
+      if (this.multiple) {
+        return this.modelValue.includes(value)
+      }
+      return this.modelValue === value
+    },
+    toggleDropdown () {
+      if (this.disabled) {
+        this.isOpen = false
+      }
+      this.isOpen = !this.isOpen
+      if (!this.isOpen) {
+        this.searchTerm = ''
+      }
+    },
+    select (value) {
+      if (!this.multiple) {
+        // Close after select
+        this.toggleDropdown()
+      }
+
+      if (this.emitKey) {
+        value = value[this.emitKey]
+      }
+
+      if (this.multiple) {
+        const emitValue = Array.isArray(this.modelValue) ? [...this.modelValue] : []
+
+        if (this.isSelected(value)) {
+          this.$emit('update:modelValue', emitValue.filter((item) => {
+            if (this.emitKey) {
+              return item !== value
+            }
+            return item[this.optionKey] !== value && item[this.optionKey] !== value[this.optionKey]
+          }))
+          return
+        }
+
+        emitValue.push(value)
+        this.$emit('update:modelValue', emitValue)
+      } else {
+        if (this.modelValue === value) {
+          this.$emit('update:modelValue', this.defaultValue ?? null)
+        } else {
+          this.$emit('update:modelValue', value)
+        }
+      }
+    },
+    createOption (newOption) {
+      if (newOption) {
+        const newItem = {
+          name: newOption,
+          value: newOption
+        }
+        this.$emit('update-options', newItem)
+        this.select(newItem)
+      }
+    }
+  }
+}
+</script>

client/components/forms/components/VSwitch.vue

@@ -0,0 +1,22 @@
+<template>
+  <div role="button" @click="onClick">
+    <div class="inline-flex items-center h-6 w-12 p-1 bg-gray-300 border rounded-full cursor-pointer focus:outline-none transition-all transform ease-in-out duration-100" :class="{'bg-nt-blue': modelValue}">
+      <div class="inline-block h-4 w-4 rounded-full bg-white shadow transition-all transform ease-in-out duration-150 rounded-2xl scale-100" :class="{'translate-x-5.5': modelValue}" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue'
+
+const { modelValue, disabled } = defineProps({
+  modelValue: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false }
+})
+const emit = defineEmits(['update:modelValue'])
+
+const onClick = () => {
+  if (disabled) return
+  emit('update:modelValue', !modelValue)
+}
+</script>