Select Design Changes (#409)

* Select Design Changes

* update theme file for SelectInput

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/forms/SelectInput.vue

@@ -3,14 +3,17 @@
     <template #label>
       <slot name="label" />
     </template>
+
     <v-select
       v-model="compVal"
+      :dusk="name"
       :data="finalOptions"
       :label="label"
       :option-key="optionKey"
       :emit-key="emitKey"
       :required="required"
       :multiple="multiple"
+      :clearable="clearable"
       :searchable="searchable"
       :loading="loading"
       :color="color"
@@ -19,57 +22,52 @@
       :theme="theme"
       :has-error="hasError"
       :allow-creation="allowCreation"
-      :disabled="disabled ? true : null"
+      :disabled="disabled"
       :help="help"
       :help-position="helpPosition"
+      :remote="remote"
+      :dropdown-class="dropdownClass"
       @update-options="updateOptions"
       @update:model-value="updateModelValue"
     >
       <template #selected="{ option }">
+        <template v-if="multiple">
+          <div class="flex items-center truncate mr-6">
+            <span class="truncate">
+              {{ getOptionNames(selectedValues).join(', ') }}
+            </span>
+          </div>
+        </template>
+        <template v-else>
           <slot
             name="selected"
             :option="option"
             :option-name="getOptionName(option)"
           >
-          <template v-if="multiple">
-            <div class="flex items-center truncate mr-6">
-              <span class="truncate">
-                {{ getOptionNames(selectedValues).join(", ") }}
-              </span>
-            </div>
-          </template>
-          <template v-else>
             <div class="flex items-center truncate mr-6">
               <div>{{ getOptionName(option) }}</div>
             </div>
-          </template>
           </slot>
         </template>
+      </template>
       <template #option="{ option, selected }">
         <slot
           name="option"
           :option="option"
           :selected="selected"
         >
-          <span class="flex group-hover:text-white">
-            <p class="flex-grow group-hover:text-white">
+          <span class="flex">
+            <p class="flex-grow">
               {{ option.name }}
             </p>
             <span
               v-if="selected"
               class="absolute inset-y-0 right-0 flex items-center pr-4 dark:text-white"
             >
-              <svg
-                class="h-5 w-5"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                  clip-rule="evenodd"
+              <Icon
+                name="heroicons:check-16-solid"
+                class="w-5 h-5"
               />
-              </svg>
             </span>
           </span>
         </slot>
@@ -87,45 +85,58 @@
 </template>
 
 <script>
-import { inputProps, useFormInput } from "./useFormInput.js"
-import InputWrapper from "./components/InputWrapper.vue"
+import { inputProps, useFormInput } from './useFormInput.js'
+import InputWrapper from './components/InputWrapper.vue'
 
 /**
  * Options: {name,value} objects
  */
 export default {
-  name: "SelectInput",
+  name: 'SelectInput',
   components: { InputWrapper },
 
   props: {
     ...inputProps,
     options: { type: Array, required: true },
-    optionKey: { type: String, default: "value" },
-    emitKey: { type: String, default: "value" },
-    displayKey: { type: String, default: "name" },
+    optionKey: { type: String, default: 'value' },
+    emitKey: { type: String, default: 'value' },
+    displayKey: { type: String, default: 'name' },
     loading: { type: Boolean, default: false },
     multiple: { type: Boolean, default: false },
     searchable: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: false },
     allowCreation: { type: Boolean, default: false },
+    dropdownClass: { type: String, default: 'w-full' },
+    remote: { type: Function, default: null }
   },
-
   setup (props, context) {
     return {
-      ...useFormInput(props, context),
+      ...useFormInput(props, context)
     }
   },
-
   data () {
     return {
       additionalOptions: [],
-      selectedValues: [],
+      selectedValues: []
     }
   },
-
   computed: {
     finalOptions () {
       return this.options.concat(this.additionalOptions)
+    }
   },
+  watch: {
+    compVal: {
+      handler (newVal, oldVal) {
+        if (!oldVal) {
+          this.handleCompValChanged()
+        }
+      },
+      immediate: false
+    }
+  },
+  mounted () {
+    this.handleCompValChanged()
   },
   methods: {
     getOptionName (val) {
@@ -136,7 +147,7 @@ export default {
       return null
     },
     getOptionNames (values) {
-      return values.map((val) => {
+      return values.map(val => {
         return this.getOptionName(val)
       })
     },
@@ -149,6 +160,11 @@ export default {
         this.additionalOptions.push(newItem)
       }
     },
-  },
+    handleCompValChanged () {
+      if (this.compVal) {
+        this.selectedValues = this.compVal
+      }
+    }
+  }
 }
 </script>

client/components/forms/components/VSelect.vue

@@ -4,24 +4,18 @@
     class="v-select relative"
     :class="[{ 'w-0': multiple, 'min-w-full': multiple }]"
   >
-    <span class="inline-block w-full rounded-md">
+    <div
+      class="inline-block w-full flex overflow-hidden"
+      :style="inputStyle"
+      :class="[theme.SelectInput.input, { '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200': disabled }, inputClass]"
+    >
       <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 !border-transparent': hasError,
-            '!cursor-not-allowed !bg-gray-200': disabled,
-          },
-          inputClass,
-        ]"
+        class="cursor-pointer w-full flex-grow relative"
+        :class="[{'py-2': !multiple || loading, 'py-1': multiple},theme.default.inputSpacing.horizontal]"
         @click="toggleDropdown"
       >
         <div :class="{ 'h-6': !multiple, 'min-h-8': multiple && !loading }">
@@ -43,6 +37,7 @@
               <slot
                 name="selected"
                 :option="modelValue"
+                :toggle="select"
               />
             </div>
             <div
@@ -60,66 +55,73 @@
             </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"
+        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+          <Icon
+            name="heroicons:chevron-up-down-16-solid"
+            class="h-5 w-5 text-gray-500"
           />
-          </svg>
         </span>
       </button>
-    </span>
+      <button
+        v-if="clearable && !isEmpty"
+        class="hover:bg-gray-50 dark:hover:bg-gray-900 border-l px-2"
+        :class="[theme.default.inputSpacing.vertical]"
+        @click.prevent="clear()"
+      >
+        <Icon
+          name="heroicons:x-mark-20-solid"
+          class="w-5 h-5 text-gray-500"
+          width="2em"
+          dynamic
+        />
+      </button>
+    </div>
     <collapsible
       v-model="isOpen"
-      class="absolute mt-1 rounded-md bg-white dark:bg-notion-dark-light shadow-xl z-10"
-      :class="dropdownClass"
+      class="absolute mt-1 bg-white overflow-auto dark:bg-notion-dark-light shadow-xl z-10"
+      :class="[dropdownClass,theme.SelectInput.dropdown]"
       @click-away="onClickAway"
     >
       <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,
-        }"
+        class="text-base leading-6 shadow-xs overflow-auto focus:outline-none sm:text-sm sm:leading-5 relative"
+        :class="{ 'max-h-42': !isSearchable, 'max-h-48': isSearchable }"
       >
         <div
           v-if="isSearchable"
-          class="px-2 pt-2 sticky top-0 bg-white dark-bg-notion-dark-light z-10"
+          class="sticky top-0 z-10 flex border-b border-gray-300"
         >
-          <text-input
+          <input
             v-model="searchTerm"
-            name="search"
-            :color="color"
-            :theme="theme"
-            placeholder="Search..."
+            type="text"
+            class="flex-grow pl-3 pr-7 py-3 w-full focus:outline-none dark:text-white"
+            placeholder="Search"
+          >
+          <div class="flex absolute right-0 inset-y-0 items-center px-2 justify-center pointer-events-none">
+            <Icon
+              name="heroicons:magnifying-glass-solid"
+              class="h-5 w-5 text-gray-500 dark:text-gray-400"
             />
           </div>
+        </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">
+        <div
+          v-if="filteredOptions.length > 0"
+          class="p-1"
+        >
           <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"
+            :class="[{ 'px-3 pr-9': multiple, 'px-3': !multiple },dropdownClass,theme.SelectInput.option]"
+            class="text-gray-900 cursor-default select-none relative py-2 cursor-pointer group hover:bg-gray-100 dark:hover:bg-gray-900 rounded focus:outline-none"
             @click="select(item)"
           >
             <slot
@@ -128,84 +130,82 @@
               :selected="isSelected(item)"
             />
           </li>
-        </template>
+        </div>
         <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"
-          }}.
+          {{ (allowCreation ? 'Type something to add an option' : 'No option available') }}.
         </p>
-        <li
+        <div
           v-if="allowCreation && searchTerm"
+          class="border-t border-gray-300 p-1"
+        >
+          <li
             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 dark:text-white hover:bg-form-color focus:outline-none focus-text-white focus-nt-blue"
+            :class="[{ 'px-3 pr-9': multiple, 'px-3': !multiple },dropdownClass,theme.SelectInput.option]"
+            class="text-gray-900 cursor-default select-none relative py-2 cursor-pointer group hover:bg-gray-100 dark:hover:bg-gray-900 rounded focus:outline-none"
             @click="createOption(searchTerm)"
           >
-          Create
-          <b class="px-1 bg-gray-300 rounded group-hover-text-black">{{
-            searchTerm
-          }}</b>
+            Create <span class="px-2 bg-gray-100 border border-gray-300 rounded group-hover-text-black">{{ searchTerm
+            }}</span>
           </li>
+        </div>
       </ul>
     </collapsible>
   </div>
 </template>
 
 <script>
-import Collapsible from "~/components/global/transitions/Collapsible.vue"
-import { themes } from "~/lib/forms/form-themes.js"
-import TextInput from "../TextInput.vue"
-import debounce from "lodash/debounce"
-import Fuse from "fuse.js"
+import Collapsible from '~/components/global/transitions/Collapsible.vue'
+import { themes } from '../../../lib/forms/form-themes.js'
+import debounce from 'debounce'
+import Fuse from 'fuse.js'
 
 export default {
-  name: "VSelect",
-  components: { Collapsible, TextInput },
+  name: 'VSelect',
+  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" },
+    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" },
+    searchKeys: { type: Array, default: () => ['name'] },
+    optionKey: { type: String, default: 'id' },
     emitKey: { type: String, default: null },
-    color: { type: String, default: "#3B82F6" },
+    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 },
+    disabled: { type: Boolean, default: false }
   },
-  emits: ["update:modelValue", "update-options"],
+  emits: ['update:modelValue', 'update-options'],
   data () {
     return {
       isOpen: false,
-      searchTerm: "",
-      defaultValue: this.modelValue ?? null,
+      searchTerm: '',
+      defaultValue: this.modelValue ?? null
     }
   },
   computed: {
     optionStyle () {
       return {
-        "--bg-form-color": this.color,
+        '--bg-form-color': this.color
       }
     },
     inputStyle () {
       return {
-        "--tw-ring-color": this.color,
+        '--tw-ring-color': this.color
       }
     },
     debouncedRemote () {
@@ -216,13 +216,13 @@ export default {
     },
     filteredOptions () {
       if (!this.data) return []
-      if (!this.searchable || this.remote || this.searchTerm === "") {
+      if (!this.searchable || this.remote || this.searchTerm === '') {
         return this.data
       }
 
       // Fuse search
       const fuzeOptions = {
-        keys: this.searchKeys,
+        keys: this.searchKeys
       }
       const fuse = new Fuse(this.data, fuzeOptions)
       return fuse.search(this.searchTerm).map((res) => {
@@ -232,18 +232,17 @@ export default {
     isSearchable () {
       return this.searchable || this.remote !== null || this.allowCreation
     },
+    isEmpty () {
+      return this.multiple ? !this.modelValue || this.modelValue.length === 0 : !this.modelValue
+    }
   },
   watch: {
     searchTerm (val) {
       if (!this.debouncedRemote) return
-      if (
-        (this.remote && val) ||
-        (val === "" && !this.modelValue) ||
-        (val === "" && this.isOpen)
-      ) {
+      if ((this.remote && val) || (val === '' && !this.modelValue) || (val === '' && this.isOpen)) {
         return this.debouncedRemote(val)
       }
-    },
+    }
   },
   methods: {
     onClickAway (event) {
@@ -271,7 +270,7 @@ export default {
         this.isOpen = !this.isOpen
       }
       if (!this.isOpen) {
-        this.searchTerm = ""
+        this.searchTerm = ''
       }
     },
     select (value) {
@@ -285,48 +284,43 @@ export default {
       }
 
       if (this.multiple) {
-        const emitValue = Array.isArray(this.modelValue)
-          ? [...this.modelValue]
-          : []
+        const emitValue = Array.isArray(this.modelValue) ? [...this.modelValue] : []
 
         if (this.isSelected(value)) {
-          this.$emit(
-            "update:modelValue",
-            emitValue.filter((item) => {
+          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 item[this.optionKey] !== value && item[this.optionKey] !== value[this.optionKey]
+          }))
           return
         }
 
         emitValue.push(value)
-        this.$emit("update:modelValue", emitValue)
+        this.$emit('update:modelValue', emitValue)
       } else {
         if (this.modelValue === value) {
-          this.$emit("update:modelValue", this.defaultValue ?? null)
+          this.$emit('update:modelValue', this.defaultValue ?? null)
         } else {
-          this.$emit("update:modelValue", value)
+          this.$emit('update:modelValue', value)
         }
       }
     },
+    clear () {
+      this.$emit('update:modelValue', this.multiple ? [] : null)
+    },
     createOption (newOption) {
       if (newOption) {
         const newItem = {
           name: newOption,
           value: newOption,
-          id: newOption,
+          id: newOption
         }
-        this.$emit("update-options", newItem)
+        this.$emit('update-options', newItem)
         this.select(newItem)
-        this.searchTerm = ""
+        this.searchTerm = ''
+      }
+    }
   }
-    },
-  },
 }
 </script>

client/lib/forms/form-themes.js

@@ -32,8 +32,10 @@ export const themes = {
     },
     SelectInput: {
       label: 'text-gray-700 dark:text-gray-300 font-semibold',
-      input: 'relative w-full rounded-lg border-gray-300 flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full px-4 bg-white text-gray-700 placeholder-gray-400 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-600 shadow-sm text-base focus:outline-none focus:ring-2 focus:border-transparent',
-      help: 'text-gray-400 dark:text-gray-500'
+      input: 'relative w-full rounded-lg border-gray-300 flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full bg-white text-gray-700 placeholder-gray-400 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-600 shadow-sm text-base focus:outline-none focus:ring-2 focus:border-transparent',
+      help: 'text-gray-400 dark:text-gray-500',
+      dropdown: 'rounded-lg border border-gray-300 dark:border-gray-600',
+      option: 'rounded-md'
     },
     ScaleInput: {
       label: 'text-gray-700 dark:text-gray-300 font-semibold',
@@ -76,8 +78,10 @@ export const themes = {
     },
     SelectInput: {
       label: 'text-gray-700 dark:text-gray-300 font-semibold',
-      input: 'relative w-full flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full px-2 bg-white text-gray-700 placeholder-gray-400 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-600 text-base focus:outline-none focus:ring-2 focus:border-transparent',
-      help: 'text-gray-400 dark:text-gray-500'
+      input: 'relative w-full flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full bg-white text-gray-700 placeholder-gray-400 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-600 text-base focus:outline-none focus:ring-2 focus:border-transparent',
+      help: 'text-gray-400 dark:text-gray-500',
+      dropdown: 'border border-gray-300 dark:border-gray-600',
+      option: ''
     },
     CodeInput: {
       label: 'text-gray-700 dark:text-gray-300 font-semibold',
@@ -131,7 +135,9 @@ export const themes = {
     SelectInput: {
       label: 'text-gray-900 dark:text-gray-100 mb-2 block mt-4',
       input: 'rounded relative w-full border-transparent flex-1 appearance-none bg-notion-input-background shadow-inner-notion w-full px-2 text-gray-900 placeholder-gray-400 dark:bg-notion-dark-light dark:placeholder-gray-500 text-base focus:outline-none focus:ring-0 focus:border-transparent focus:shadow-focus-notion',
-      help: 'text-notion-input-help dark:text-gray-500'
+      help: 'text-notion-input-help dark:text-gray-500',
+      dropdown: 'rounded border border-gray-300 dark:border-gray-600',
+      option: 'rounded'
     },
     CodeInput: {
       label: 'text-gray-900 dark:text-gray-100 mb-2 block mt-4',

client/package.json

@@ -46,6 +46,7 @@
     "codemirror": "^6.0.1",
     "crisp-sdk-web": "^1.0.21",
     "date-fns": "^2.30.0",
+    "debounce": "^1.2.1",
     "fuse.js": "^6.4.6",
     "js-sha256": "^0.10.0",
     "libphonenumber-js": "^1.10.44",