Merge remote-tracking branch 'origin/dev' into dev

Author: Wurielle

packages/ui/src/components/forms/Select/NvSelect.vue

@@ -1,43 +1,43 @@
 <template>
   <NvAutocomplete
-      :autoScrollIndex="autoScrollIndex"
-      :options="searchResults"
-      :valueKey="props.valueKey"
-      :visible="isAutocompleteVisible"
-      :width="props.autocompleteWidth"
-      @select="(item) => !item.children && handleValue(item.value)"
-      @positioner-change="
+    :autoScrollIndex="autoScrollIndex"
+    :options="searchResults"
+    :valueKey="props.valueKey"
+    :visible="isAutocompleteVisible"
+    :width="props.autocompleteWidth"
+    @select="(item) => !item.children && handleValue(item.value)"
+    @positioner-change="
       ($event) => {
         autocomplete = $event
       }
     "
-      @pointer-down-outside="blurInput"
-      @focus-outside="blurInput"
-      @interact-outside="blurInput"
+    @pointer-down-outside="blurInput"
+    @focus-outside="blurInput"
+    @interact-outside="blurInput"
   >
     <template #reference>
       <StSelect
-          ref="select"
-          :isFocused="hasFocus"
-          class="w-full"
-          v-bind="{ ...props, isFocused: hasFocus }"
-          @click="activate"
+        ref="select"
+        :isFocused="hasFocus"
+        class="w-full"
+        v-bind="{ ...props, isFocused: hasFocus }"
+        @click="activate"
       >
         <StSelectWrapper class="w-full" v-bind="props">
           <NvStack :spacing="2" class="w-full">
             <template v-if="props.multiple && selectedOptions.length > 0">
               <StSelectTagsWrapper>
                 <NvGroup :spacing="2" class="w-full">
                   <template
-                      v-for="option in selectedOptions"
-                      :key="get(option.value, props.valueKey) || option.value"
+                    v-for="option in selectedOptions"
+                    :key="get(option.value, props.valueKey) || option.value"
                   >
                     <NvTag
-                        :title="option.label"
-                        closable
-                        @close="handleValue(option.value)"
-                        @mousedown="blurInput()"
-                        @click.stop
+                      :title="option.label"
+                      closable
+                      @close="handleValue(option.value)"
+                      @mousedown="blurInput()"
+                      @click.stop
                     >
                       {{ option.label }}
                     </NvTag>
@@ -47,51 +47,51 @@
             </template>
             <div ref="inputWrapper" class="inline-flex">
               <StSelectInput
-                  ref="selectInput"
-                  :isFocused="hasFocus"
-                  :modelValue="inputValue"
-                  :placeholder="$attrs.placeholder"
-                  v-bind="omit(props, ['modelValue'])"
-                  @focus="activate"
-                  @update:modelValue="search = $event"
+                ref="selectInput"
+                :isFocused="hasFocus"
+                :modelValue="inputValue"
+                :placeholder="$attrs.placeholder"
+                v-bind="omit(props, ['modelValue'])"
+                @focus="activate"
+                @update:modelValue="search = $event"
               />
             </div>
           </NvStack>
         </StSelectWrapper>
         <StSelectIcon v-bind="props">
-          <NvIcon :size="iconSize" name="direction"/>
+          <NvIcon :size="iconSize" name="direction" />
         </StSelectIcon>
       </StSelect>
     </template>
     <template #default="{ active, item }">
       <NvOption
-          v-if="item"
-          :active="active"
-          :disabled="item.disabled"
-          :readonly="item.children"
-          :selected="
+        v-if="item"
+        :active="active"
+        :disabled="item.disabled"
+        :readonly="item.children"
+        :selected="
           selectedValues.find(
             (v) =>
               (get(item.value, props.valueKey) || item.value) ===
               (get(v, props.valueKey) || v),
           )
         "
-          :title="item.label"
-          v-bind="item.attrs || {}"
-          @mousedown="!item.children && handleValue(item.value)"
+        :title="item.label"
+        v-bind="item.attrs || {}"
+        @mousedown="!item.children && handleValue(item.value)"
       >
         <div class="w-full text-ellipsis overflow-hidden">
           {{ item.label }}
         </div>
         <template #after="props">
-          <slot :option="item" name="optionAfter" v-bind="props"/>
+          <slot :option="item" name="optionAfter" v-bind="props" />
         </template>
       </NvOption>
     </template>
     <template #fallback>
       <StSelectOption
-          v-if="searchResults.length === 0"
-          class="justify-center pointer-events-none"
+        v-if="searchResults.length === 0"
+        class="justify-center pointer-events-none"
       >
         No Data
       </StSelectOption>
@@ -141,44 +141,44 @@ const iconSize = computed(() => {
 })
 
 const selectedValues = computed(() =>
-    props.multiple ? (props.modelValue as Value[]) : [props.modelValue],
+  props.multiple ? (props.modelValue as Value[]) : [props.modelValue],
 )
 
 const options = computed(() =>
-    flatten(
-        props.options.map((option) => {
-          if (option.children) {
-            const mappedChildren = option.children.map((o) => ({
-              id: get(o.value, props.valueKey) || o.value || uuid(),
-              ...o,
-            }))
-            return [
-              {
-                id: get(option.value, props.valueKey) || option.value || uuid(),
-                ...option,
-                children: mappedChildren,
-              },
-              ...mappedChildren,
-            ]
-          }
-          return {
+  flatten(
+    props.options.map((option) => {
+      if (option.children) {
+        const mappedChildren = option.children.map((o) => ({
+          id: get(o.value, props.valueKey) || o.value || uuid(),
+          ...o,
+        }))
+        return [
+          {
             id: get(option.value, props.valueKey) || option.value || uuid(),
             ...option,
-          }
-        }),
-    ),
+            children: mappedChildren,
+          },
+          ...mappedChildren,
+        ]
+      }
+      return {
+        id: get(option.value, props.valueKey) || option.value || uuid(),
+        ...option,
+      }
+    }),
+  ),
 )
 
 const selectedOptions = computed(() =>
-    selectedValues.value
-        .map((value) =>
-            options.value.find(
-                (option) =>
-                    get(option.value, props.valueKey, option.value) ===
-                    get(value, props.valueKey, value),
-            ),
-        )
-        .filter((option) => option !== undefined),
+  selectedValues.value
+    .map((value) =>
+      options.value.find(
+        (option) =>
+          get(option.value, props.valueKey, option.value) ===
+          get(value, props.valueKey, value),
+      ),
+    )
+    .filter((option) => option !== undefined),
 )
 
 const search = ref('')
@@ -199,22 +199,22 @@ const { hasFocus, activate, deactivate } = useFocusTrap(inputWrapper, {
 const isAutocompleteVisible = ref(false)
 
 watch(
-    () => hasFocus.value,
-    (value) => {
-      if (value) {
-        isAutocompleteVisible.value = true
-      }
-    },
+  () => hasFocus.value,
+  (value) => {
+    if (value) {
+      isAutocompleteVisible.value = true
+    }
+  },
 )
 
 const fuseOptions = computed<UseFuseOptions<(typeof options.value)[number]>>(
-    () => ({
-      fuseOptions: {
-        keys: ['label', 'category', 'searchValue'],
-        threshold: 0.3,
-        shouldSort: false,
-      },
-    }),
+  () => ({
+    fuseOptions: {
+      keys: ['label', 'category', 'searchValue'],
+      threshold: 0.3,
+      shouldSort: false,
+    },
+  }),
 )
 const { results } = useFuse(search, options, fuseOptions)
 const searchResults = computed(() => {
@@ -223,7 +223,7 @@ const searchResults = computed(() => {
     return options.value.filter((option) => {
       if ('children' in option) {
         return filteredOptions.some((o) =>
-            (option.children as Option[]).find((c) => c.id === o.id),
+          (option.children as Option[]).find((c) => c.id === o.id),
         )
       }
       return filteredOptions.some((o) => o.id === option.id)
@@ -232,34 +232,34 @@ const searchResults = computed(() => {
   return options.value || []
 })
 const inputValue = computed(
-    () =>
-        (!hasFocus.value && !props.multiple && selectedOptions.value[0]?.label) ||
-        search.value,
+  () =>
+    (!hasFocus.value && !props.multiple && selectedOptions.value[0]?.label) ||
+    search.value,
 )
 
 const autoScrollIndex = computed(() => {
   return (
-      selectedValues.value.length > 0 &&
-      Math.min(
-          ...selectedValues.value
-              .map((v) =>
-                  options.value.findIndex(
-                      (o) =>
-                          get(o.value, props.valueKey, o.value) ===
-                          get(v, props.valueKey, v),
-                  ),
-              )
-              .filter((i) => i !== undefined),
-      )
+    selectedValues.value.length > 0 &&
+    Math.min(
+      ...selectedValues.value
+        .map((v) =>
+          options.value.findIndex(
+            (o) =>
+              get(o.value, props.valueKey, o.value) ===
+              get(v, props.valueKey, v),
+          ),
+        )
+        .filter((i) => i !== undefined),
+    )
   )
 })
 
 const handleValue = (value: Value) => {
   if (props.multiple) {
     const newValue = [...selectedValues.value]
     const index = newValue.findIndex(
-        (item) =>
-            get(item, props.valueKey, item) === get(value, props.valueKey, value),
+      (item) =>
+        get(item, props.valueKey, item) === get(value, props.valueKey, value),
     )
     if (index > -1) {
       newValue.splice(index, 1)