design-system-next 2.8.0 → 2.8.3

package/src/components/select/select-ladderized/use-select-ladderized.ts

@@ -1,5 +1,5 @@
-import { ref, computed, watch } from 'vue';
-import { useDebounceFn, onClickOutside } from '@vueuse/core';
+import { ref, toRefs, computed, watch } from 'vue';
+import { useVModel, useDebounceFn, onClickOutside } from '@vueuse/core';
 
 import type { SelectLadderizedPropTypes } from './select-ladderized';
 
@@ -9,6 +9,8 @@ export const useSelectLadderized = (
   props: SelectLadderizedPropTypes,
   emit: (event: string, ...args: unknown[]) => void,
 ) => {
+  const { options, disabled } = toRefs(props);
+
   const ladderizedClasses = computed(() => ({
     baseClasses: 'spr-flex spr-flex-col spr-gap-size-spacing-4xs',
     labelClasses: 'spr-body-sm-regular spr-text-color-strong spr-block',
@@ -17,14 +19,11 @@ export const useSelectLadderized = (
   // Popper Variables
   const ladderizedSelectPopperState = ref(false);
   const ladderizedSelectRef = ref(null);
-  const isLadderizedSelectPopperDisabled = computed(() => props.disabled);
+  const isLadderizedSelectPopperDisabled = computed(() => disabled.value);
 
   // Ladderized Select Model
-  const ladderizedSelectModel = computed({
-    get: () => props.modelValue,
-    set: (val) => emit('update:modelValue', val),
-  });
-  const ladderizedSelectMenuList = computed(() => props.menuList);
+  const ladderizedSelectModel = useVModel(props, 'modelValue', emit);
+  const ladderizedSelectOptions = computed(() => options.value);
 
   // Input Variables
   const inputText = ref<string>('');
@@ -76,11 +75,11 @@ export const useSelectLadderized = (
         return undefined;
       };
 
-      itemToCheck = findItemByValue(ladderizedSelectMenuList.value, selectedItems[selectedItems.length - 1]);
+      itemToCheck = findItemByValue(ladderizedSelectOptions.value, selectedItems[selectedItems.length - 1]);
     }
 
     if (itemToCheck) {
-      const path = findPathToValue(ladderizedSelectMenuList.value, itemToCheck.value);
+      const path = findPathToValue(ladderizedSelectOptions.value, itemToCheck.value);
 
       inputText.value = path ? path.join(' > ') : itemToCheck.text || '';
 
@@ -110,7 +109,7 @@ export const useSelectLadderized = (
     emit('update:modelValue', []);
   };
 
-  const handleMenuToggle = () => {
+  const handleOptionsToggle = () => {
     ladderizedSelectPopperState.value = true;
 
     isSearching.value = false;
@@ -128,7 +127,7 @@ export const useSelectLadderized = (
 
       if (Array.isArray(newVal) && newVal.length > 0) {
         // Treat the array as a single path for ladderized select
-        let currentLevel = ladderizedSelectMenuList.value;
+        let currentLevel = ladderizedSelectOptions.value;
 
         const pathTexts: string[] = [];
 
@@ -153,13 +152,13 @@ export const useSelectLadderized = (
     ladderizedClasses,
     ladderizedSelectPopperState,
     ladderizedSelectRef,
-    ladderizedSelectMenuList,
+    ladderizedSelectOptions,
     isLadderizedSelectPopperDisabled,
     ladderizedSelectModel,
     inputText,
     handleSelectedLadderizedItem,
     handleSearch,
     handleClear,
-    handleMenuToggle,
+    handleOptionsToggle,
   };
 };

package/src/components/select/select-multiple/select-multiple.ts

@@ -36,7 +36,7 @@ export const multiSelectPropTypes = {
     >,
     default: () => [],
   },
-  menuList: {
+  options: {
     type: Array as PropType<MenuListType[] | string[] | Record<string, unknown>[]>,
     required: true,
     default: [],
@@ -110,25 +110,11 @@ export const multiSelectPropTypes = {
     type: Boolean,
     default: false,
   },
-  searchable: {
-    type: Boolean,
-    default: false,
-  },
-  disabledLocalSearch: {
-    type: Boolean,
-    default: false,
-  },
 };
 
 export const multiSelectEmitTypes = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   'update:modelValue': (_value: unknown) => true,
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  'infinite-scroll-trigger': (_triggered: boolean) => true,
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  'search-string': (_search: string | number) => true,
 };
 
 export type MultiSelectPropTypes = ExtractPropTypes<typeof multiSelectPropTypes>;

package/src/components/select/select-multiple/select-multiple.vue

@@ -23,20 +23,19 @@
         width: props.width,
       }"
     >
-      <div @click="handleMenuToggle">
+      <div @click="handleOptionsToggle">
         <spr-input
           v-model="inputText"
           :class="{
-            'spr-cursor-pointer': !props.searchable,
+            'spr-cursor-pointer': true,
           }"
           :placeholder="props.placeholder"
-          :readonly="!props.searchable"
+          :readonly="true"
           :disabled="props.disabled"
           autocomplete="off"
           :helper-text="props.helperText"
           :helper-icon="props.helperIcon"
           :display-helper="props.displayHelper"
-          @keyup="handleSearch"
         >
           <template #icon>
             <div class="spr-flex spr-items-center spr-gap-1">
@@ -59,76 +58,25 @@
         }"
       ></div>
 
-      <select
-        :id="`${props.id}-multiple-select`"
-        tabindex="-1"
-        aria-hidden="true"
-        data-qa="multi-select-hidden"
-        multiple
-        hidden
-      >
-        <option v-for="item in multiSelectedListItems" :key="item.value" :value="item.value" selected>
-          {{ item.text }}
-        </option>
-      </select>
-
       <template #popper>
         <div
           ref="multiSelectRef"
           class="spr-grid spr-max-h-[300px] spr-gap-0.5 spr-overflow-y-auto spr-overflow-x-hidden spr-p-2"
         >
-          <template v-if="isSearching">
-            <template v-if="!props.disabledLocalSearch">
-              <template v-if="filteredMultiSelectMenuList.length > 0">
-                <spr-list
-                  v-model="multiSelectedListItems"
-                  :menu-list="filteredMultiSelectMenuList"
-                  :group-items-by="props.groupItemsBy"
-                  :pre-selected-items="Array.isArray(multiSelectModel) ? multiSelectModel.flat() : [multiSelectModel]"
-                  multi-select
-                  @update:model-value="handleMultiSelectedItem"
-                />
-              </template>
-              <template v-else>
-                <div class="spr-flex spr-items-center spr-justify-center spr-p-2 spr-text-center">
-                  <span class="spr-body-sm-regular spr-m-0">No results found</span>
-                </div>
-              </template>
-            </template>
-            <template v-else>
-              <template v-if="multiSelectMenuList.length > 0">
-                <spr-list
-                  v-model="multiSelectedListItems"
-                  :menu-list="multiSelectMenuList"
-                  :group-items-by="props.groupItemsBy"
-                  :pre-selected-items="Array.isArray(multiSelectModel) ? multiSelectModel.flat() : [multiSelectModel]"
-                  multi-select
-                  @update:model-value="handleMultiSelectedItem"
-                />
-              </template>
-              <template v-else>
-                <div class="spr-flex spr-items-center spr-justify-center spr-p-2 spr-text-center">
-                  <span class="spr-body-sm-regular spr-m-0">No results found</span>
-                </div>
-              </template>
-            </template>
+          <template v-if="multiSelectOptions.length > 0">
+            <spr-list
+              v-model="multiSelectedListItems"
+              :menu-list="multiSelectOptions"
+              :group-items-by="props.groupItemsBy"
+              :pre-selected-items="Array.isArray(multiSelectModel) ? multiSelectModel.flat() : [multiSelectModel]"
+              multi-select
+              @update:model-value="handleMultiSelectedItem"
+            />
           </template>
           <template v-else>
-            <template v-if="multiSelectMenuList.length > 0">
-              <spr-list
-                v-model="multiSelectedListItems"
-                :menu-list="multiSelectMenuList"
-                :group-items-by="props.groupItemsBy"
-                :pre-selected-items="Array.isArray(multiSelectModel) ? multiSelectModel.flat() : [multiSelectModel]"
-                multi-select
-                @update:model-value="handleMultiSelectedItem"
-              />
-            </template>
-            <template v-else>
-              <div class="spr-flex spr-items-center spr-justify-center spr-p-2 spr-text-center">
-                <span class="spr-body-sm-regular spr-m-0">No results found</span>
-              </div>
-            </template>
+            <div class="spr-flex spr-items-center spr-justify-center spr-p-2 spr-text-center">
+              <span class="spr-body-sm-regular spr-m-0">No results found</span>
+            </div>
           </template>
         </div>
       </template>
@@ -157,15 +105,12 @@ const {
   multiSelectPopperState,
   multiSelectRef,
   multiSelectModel,
-  multiSelectMenuList,
-  filteredMultiSelectMenuList,
+  multiSelectOptions,
   multiSelectedListItems,
   inputText,
   isMultiSelectPopperDisabled,
-  isSearching,
   handleMultiSelectedItem,
-  handleSearch,
   handleClear,
-  handleMenuToggle,
+  handleOptionsToggle,
 } = useMultiSelect(props, emit);
 </script>