design-system-next 2.7.45 → 2.8.0

package/src/components/list/list.vue

@@ -1,5 +1,16 @@
 <template>
   <div class="spr-font-main">
+    <div v-if="props.searchableMenu" class="spr-mb-3 spr-grid spr-gap-3">
+      <spr-input
+        v-model="searchText"
+        :placeholder="props.searchableMenuPlaceholder"
+        autocomplete="off"
+        @keyup="handleSearch"
+      />
+
+      <div v-if="isParentMenu" class="spr-background-color-surface spr-h-[1px]"></div>
+    </div>
+
     <template v-if="props.groupItemsBy">
       <div class="spr-grid spr-gap-2">
         <div v-for="(list, listIndex) in groupedMenuList" :key="listIndex" class="spr-grid spr-gap-0.5">
@@ -46,11 +57,21 @@
         @click="handleSelectedItem(item)"
       >
         <spr-checkbox v-if="props.multiSelect" :disabled="item.disabled" :checked="isItemSelected(item)" />
-        <div :class="['spr-flex spr-flex-auto spr-flex-col spr-justify-start', { 'spr-text-color-disabled': item.disabled }]">
+        <div
+          :class="[
+            'spr-flex spr-flex-auto spr-flex-col spr-justify-start',
+            { 'spr-text-color-disabled': item.disabled },
+          ]"
+        >
           <span class="spr-text-left spr-text-xs">{{ item.text }}</span>
-          <span v-if="item.subtext" :class="['spr-body-xs-regular spr-text-color-base spr-text-left', { 'spr-text-color-disabled': item.disabled }]">{{
-            item.subtext
-          }}</span>
+          <span
+            v-if="item.subtext"
+            :class="[
+              'spr-body-xs-regular spr-text-color-base spr-text-left',
+              { 'spr-text-color-disabled': item.disabled },
+            ]"
+            >{{ item.subtext }}</span
+          >
         </div>
         <Icon
           v-if="isItemSelected(item) && !props.multiSelect"
@@ -73,13 +94,20 @@ import { Icon } from '@iconify/vue';
 import { listPropTypes, listEmitTypes } from './list';
 import { useList } from './use-list';
 
-import SprCheckbox from '../checkbox/checkbox.vue';
+import SprCheckbox from '@/components/checkbox/checkbox.vue';
+import SprInput from '@/components/input/input.vue';
 
 const props = defineProps(listPropTypes);
 const emit = defineEmits(listEmitTypes);
 
-const { localizedMenuList, groupedMenuList, isItemSelected, getListItemClasses, handleSelectedItem } = useList(
-  props,
-  emit,
-);
+const {
+  searchText,
+  localizedMenuList,
+  groupedMenuList,
+  isParentMenu,
+  isItemSelected,
+  getListItemClasses,
+  handleSearch,
+  handleSelectedItem,
+} = useList(props, emit);
 </script>

package/src/components/list/use-list.ts

@@ -13,7 +13,7 @@ interface ListClasses {
 export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>['emit']) => {
   const selectedItems = useVModel(props, 'modelValue', emit);
 
-  const { menuList, groupItemsBy, multiSelect, preSelectedItems } = toRefs(props);
+  const { menuList, menuLevel, groupItemsBy, multiSelect, preSelectedItems } = toRefs(props);
 
   const listClasses: ComputedRef<ListClasses> = computed(() => {
     const listItemClasses = classNames(
@@ -26,6 +26,8 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
     return { listItemClasses };
   });
 
+  const searchText = ref<string>('');
+
   const localizedMenuList = ref<MenuListType[]>([]);
   const groupedMenuList = ref<GroupedMenuListType[]>([
     {
@@ -35,66 +37,72 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
   ]);
 
   // #region - Helper Methods
+  const isParentMenu = computed(() => menuLevel.value === 0);
+
   const isItemSelected = (item: MenuListType) => {
     // First check standard selection via the selectedItems array
     const directSelected = selectedItems.value.some((selectedItem) => {
       // Compare both text and value properties to handle different value types
       if (selectedItem.text === item.text) return true;
-      
+
       // Ensure comparison works for both string and number values
       const selectedItemValue = selectedItem.value;
       const itemValue = item.value;
-      
+
       // For primitives, use string comparison to handle number-string comparison properly
       if (typeof selectedItemValue !== 'object' && typeof itemValue !== 'object') {
         return String(selectedItemValue) === String(itemValue);
       }
-      
+
       // For objects, use JSON.stringify for comparison (will match for equality)
-      if (typeof selectedItemValue === 'object' && selectedItemValue !== null &&
-          typeof itemValue === 'object' && itemValue !== null) {
+      if (
+        typeof selectedItemValue === 'object' &&
+        selectedItemValue !== null &&
+        typeof itemValue === 'object' &&
+        itemValue !== null
+      ) {
         return JSON.stringify(selectedItemValue) === JSON.stringify(itemValue);
       }
-      
+
       return false;
     });
-    
+
     if (directSelected) return true;
-    
+
     // Additional check for objects stored in _originalObject property
     if ('_originalObject' in item && item._originalObject && preSelectedItems.value?.length) {
-      return preSelectedItems.value.some(preSelectedValue => {
+      return preSelectedItems.value.some((preSelectedValue) => {
         // Direct reference comparison (most accurate)
         if (preSelectedValue === item._originalObject) {
           return true;
         }
-        
+
         // If both are objects, compare their serialized forms
         if (typeof preSelectedValue === 'object' && preSelectedValue !== null) {
           const originalObj = item._originalObject as Record<string, unknown>;
-          
+
           if (typeof originalObj === 'object') {
             // First try comparing by ID for more reliable object comparison
             if ('id' in preSelectedValue && 'id' in originalObj) {
               return preSelectedValue.id === originalObj.id;
             }
-            
+
             // Fallback to full object comparison
             const valString = JSON.stringify(preSelectedValue);
             const itemString = JSON.stringify(originalObj);
             return valString === itemString;
           }
-          
+
           // If object has an id field, check if it matches with the item value
           if ('id' in preSelectedValue) {
             return String(item.value).includes(String(preSelectedValue.id));
           }
         }
-        
+
         return false;
       });
     }
-    
+
     return false;
   };
 
@@ -159,52 +167,48 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
         // For objects, check for matching _originalObject properties
         if (typeof preSelectedItem === 'object' && preSelectedItem !== null) {
           // Try to find an item with a matching _originalObject
-          const objectMatch = localizedMenuList.value.find(menuItem => {
+          const objectMatch = localizedMenuList.value.find((menuItem) => {
             if (!menuItem._originalObject) return false;
-            
+
             // Compare serialized versions for deep equality
             return JSON.stringify(menuItem._originalObject) === JSON.stringify(preSelectedItem);
           });
-          
+
           if (objectMatch) return objectMatch;
-          
+
           // If no direct object match, try matching on ID if both have it
           if ('id' in preSelectedItem) {
-            const idMatch = localizedMenuList.value.find(menuItem => {
+            const idMatch = localizedMenuList.value.find((menuItem) => {
               if (menuItem._originalObject && 'id' in menuItem._originalObject) {
                 return menuItem._originalObject.id === preSelectedItem.id;
               }
               // Also check if the value field contains a stringified version that includes the id
               return String(menuItem.value).includes(String(preSelectedItem.id));
             });
-            
+
             if (idMatch) return idMatch;
           }
         }
-        
+
         // First try direct value comparison (for exact matches)
-        const directMatch = localizedMenuList.value.find(
-          (menuItem) => menuItem.value === preSelectedItem
-        );
+        const directMatch = localizedMenuList.value.find((menuItem) => menuItem.value === preSelectedItem);
         if (directMatch) return directMatch;
-        
+
         // Special handling for number values in the preSelectedItems array
         if (typeof preSelectedItem === 'number') {
           // Find items that match the number value either directly or as a string
           const numericMatch = localizedMenuList.value.find(
-            (menuItem) => 
+            (menuItem) =>
               // Match if menuItem.value is the same number
               (typeof menuItem.value === 'number' && menuItem.value === preSelectedItem) ||
               // Match if menuItem.value is a string representation of the number
-              (typeof menuItem.value === 'string' && menuItem.value === String(preSelectedItem))
+              (typeof menuItem.value === 'string' && menuItem.value === String(preSelectedItem)),
           );
           if (numericMatch) return numericMatch;
         }
-        
+
         // Then try string comparison for cases where types differ (string vs number)
-        return localizedMenuList.value.find(
-          (menuItem) => String(menuItem.value) === String(preSelectedItem)
-        );
+        return localizedMenuList.value.find((menuItem) => String(menuItem.value) === String(preSelectedItem));
       })
       .filter(Boolean) as MenuListType[];
 
@@ -229,50 +233,112 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
   const getListItemClasses = (item: MenuListType) => ({
     [listClasses.value.listItemClasses]: !item.disabled,
     'spr-background-color-single-active': isItemSelected(item) && !item.disabled,
-    'hover:spr-cursor-not-allowed spr-flex spr-cursor-pointer spr-items-center spr-gap-1.5 spr-rounded-lg spr-p-2': item.disabled,
+    'hover:spr-cursor-not-allowed spr-flex spr-cursor-pointer spr-items-center spr-gap-1.5 spr-rounded-lg spr-p-2':
+      item.disabled,
   });
 
+  const handleSearch = () => {
+    const search = searchText.value.trim().toLowerCase();
+
+    if (!search) {
+      setMenuList();
+
+      return;
+    }
+
+    // Filter items by text or subtext
+    const filtered = props.menuList.filter((item) => {
+      const textMatch = item.text.toLowerCase().includes(search);
+      const subtextMatch = item.subtext ? item.subtext.toLowerCase().includes(search) : false;
+
+      return textMatch || subtextMatch;
+    });
+
+    localizedMenuList.value = filtered;
+
+    // If grouping is enabled, regroup the filtered list
+    if (groupItemsBy?.value) {
+      groupedMenuList.value = [{ groupLabel: 'no-group', items: [] }];
+      if (groupItemsBy.value === 'default') {
+        filtered.forEach((item) => {
+          const groupKey = item.group || 'no-group';
+
+          if (groupedMenuList.value.some((g) => g.groupLabel === groupKey)) {
+            groupedMenuList.value.find((g) => g.groupLabel === groupKey)?.items.push(item);
+          } else {
+            groupedMenuList.value.push({ groupLabel: groupKey, items: [item] });
+          }
+        });
+      } else {
+        filtered
+          .sort((a, b) => {
+            if (groupItemsBy.value === 'A-Z') return a.text.localeCompare(b.text);
+            if (groupItemsBy.value === 'Z-A') return b.text.localeCompare(a.text);
+
+            return 0;
+          })
+          .forEach((item) => {
+            const firstCharacter = item.text.charAt(0);
+            const groupKey = /^\d/.test(firstCharacter) ? 'no-group' : firstCharacter.toUpperCase();
+
+            if (groupedMenuList.value.some((g) => g.groupLabel === groupKey)) {
+              groupedMenuList.value.find((g) => g.groupLabel === groupKey)?.items.push(item);
+            } else {
+              groupedMenuList.value.push({ groupLabel: groupKey, items: [item] });
+            }
+          });
+      }
+    }
+  };
+
   const handleSelectedItem = (item: MenuListType) => {
-    if(item.disabled) return;
+    if (item.disabled) return;
 
     if (multiSelect.value) {
       // For multi-select, check if item is already selected
       const index = selectedItems.value.findIndex((selectedItem: MenuListType) => {
         // Compare text values first for simple match
         if (selectedItem.text === item.text) return true;
-        
+
         // Compare primitive values with string conversion for compatibility
         if (typeof selectedItem.value !== 'object' && typeof item.value !== 'object') {
           return String(selectedItem.value) === String(item.value);
         }
-        
+
         // For objects, compare their JSON string representations
-        if (typeof selectedItem.value === 'object' && selectedItem.value !== null &&
-            typeof item.value === 'object' && item.value !== null) {
+        if (
+          typeof selectedItem.value === 'object' &&
+          selectedItem.value !== null &&
+          typeof item.value === 'object' &&
+          item.value !== null
+        ) {
           return JSON.stringify(selectedItem.value) === JSON.stringify(item.value);
         }
-        
+
         // Compare _originalObject if available (most reliable for complex objects)
-        if ('_originalObject' in selectedItem && selectedItem._originalObject && 
-            '_originalObject' in item && item._originalObject) {
-          
+        if (
+          '_originalObject' in selectedItem &&
+          selectedItem._originalObject &&
+          '_originalObject' in item &&
+          item._originalObject
+        ) {
           // Direct reference equality check (fastest)
           if (selectedItem._originalObject === item._originalObject) {
             return true;
           }
-          
+
           // ID-based comparison (reliable for objects with IDs)
           const selectedObj = selectedItem._originalObject as Record<string, unknown>;
           const itemObj = item._originalObject as Record<string, unknown>;
-          
+
           if ('id' in selectedObj && 'id' in itemObj) {
             return selectedObj.id === itemObj.id;
           }
-          
+
           // Full JSON comparison (most comprehensive but slower)
           return JSON.stringify(selectedItem._originalObject) === JSON.stringify(item._originalObject);
         }
-        
+
         return false;
       });
 
@@ -306,11 +372,14 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
   });
 
   return {
+    searchText,
     listClasses,
     localizedMenuList,
     groupedMenuList,
+    isParentMenu,
     isItemSelected,
     getListItemClasses,
+    handleSearch,
     handleSelectedItem,
   };
 };

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

@@ -0,0 +1,108 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { MenuListType } from '@/components/list/list';
+
+const PLACEMENTS_TYPES = [
+  'auto',
+  'auto-start',
+  'auto-end',
+  'top',
+  'top-start',
+  'top-end',
+  'right',
+  'right-start',
+  'right-end',
+  'bottom',
+  'bottom-start',
+  'bottom-end',
+  'left',
+  'left-start',
+  'left-end',
+] as const;
+
+const POPPER_STRATEGY_TYPES = ['fixed', 'absolute'] as const;
+
+export const selectLadderizedPropTypes = {
+  id: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  menuList: {
+    type: Array as PropType<MenuListType[]>,
+    required: true,
+    default: () => [],
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  helperText: {
+    type: String,
+    default: '',
+  },
+  helperIcon: {
+    type: String,
+    default: null,
+  },
+  displayHelper: {
+    type: Boolean,
+    default: false,
+  },
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
+  searchableMenu: {
+    type: Boolean,
+    default: false,
+  },
+  searchableMenuPlaceholder: {
+    type: String,
+    default: 'Search...',
+  },
+  placement: {
+    type: String as PropType<(typeof PLACEMENTS_TYPES)[number]>,
+    validator: (value: (typeof PLACEMENTS_TYPES)[number]) => PLACEMENTS_TYPES.includes(value),
+    default: 'bottom',
+  },
+  wrapperPosition: {
+    type: String,
+    default: 'relative',
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+  popperWidth: {
+    type: String,
+    default: '100%',
+  },
+  popperStrategy: {
+    type: String,
+    validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),
+    default: 'absolute',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  removeCurrentLevelInBackLabel: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const selectLadderizedEmitTypes = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  'update:modelValue': (_value: unknown) => true,
+};
+
+export type SelectLadderizedPropTypes = ExtractPropTypes<typeof selectLadderizedPropTypes>;
+export type SelectLadderizedEmitTypes = typeof selectLadderizedEmitTypes;

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

@@ -0,0 +1,111 @@
+<template>
+  <div :class="ladderizedClasses.baseClasses">
+    <label v-if="props.label" :for="props.id" :class="ladderizedClasses.labelClasses">
+      {{ props.label }}
+    </label>
+
+    <Menu
+      :shown="ladderizedSelectPopperState"
+      aria-id="ladderized-select-wrapper"
+      distance="4"
+      :placement="props.placement"
+      :triggers="[]"
+      :popper-hide-triggers="[]"
+      :auto-hide="false"
+      :disabled="isLadderizedSelectPopperDisabled"
+      :container="'#ladderized-select-wrapper'"
+      :strategy="
+        props.popperStrategy === 'fixed' || props.popperStrategy === 'absolute' ? props.popperStrategy : 'absolute'
+      "
+      :delay="0"
+      :style="{
+        position: props.wrapperPosition,
+        width: props.width,
+      }"
+    >
+      <div @click="handleMenuToggle">
+        <spr-input
+          v-model="inputText"
+          class="spr-cursor-pointer"
+          :placeholder="props.placeholder"
+          autocomplete="off"
+          :helper-text="props.helperText"
+          :helper-icon="props.helperIcon"
+          :display-helper="props.displayHelper"
+          readonly
+          :disabled="props.disabled"
+          @keyup="handleSearch"
+        >
+          <template #icon>
+            <div class="spr-flex spr-items-center spr-gap-1">
+              <Icon
+                v-if="props.clearable && inputText"
+                class="spr-cursor-pointer"
+                icon="ph:x"
+                @click.stop="handleClear"
+              />
+              <Icon icon="ph:caret-down" />
+            </div>
+          </template>
+        </spr-input>
+      </div>
+
+      <div id="ladderized-select-wrapper" :style="{ width: props.popperWidth }"></div>
+
+      <template #popper>
+        <div
+          ref="ladderizedSelectRef"
+          class="spr-grid spr-max-h-[300px] spr-gap-0.5 spr-overflow-y-auto spr-overflow-x-hidden"
+        >
+          <template v-if="ladderizedSelectMenuList.length > 0">
+            <spr-ladderized-list
+              v-model="ladderizedSelectModel"
+              :ladderized="true"
+              :menu-list="ladderizedSelectMenuList"
+              :menu-level="ladderizedSelectModel.length"
+              :remove-current-level-in-back-label="props.removeCurrentLevelInBackLabel"
+              :searchable-menu="props.searchableMenu"
+              :searchable-menu-placeholder="props.searchableMenuPlaceholder"
+              @update:model-value="handleSelectedLadderizedItem"
+            />
+          </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>
+      </template>
+    </Menu>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Menu } from 'floating-vue';
+import { Icon } from '@iconify/vue';
+
+import 'floating-vue/dist/style.css';
+
+import SprInput from '@/components/input/input.vue';
+import SprLadderizedList from '@/components/list/ladderized-list/ladderized-list.vue';
+
+import { selectLadderizedPropTypes, selectLadderizedEmitTypes } from './select-ladderized';
+import { useSelectLadderized } from './use-select-ladderized';
+
+const props = defineProps(selectLadderizedPropTypes);
+const emit = defineEmits(selectLadderizedEmitTypes);
+
+const {
+  ladderizedClasses,
+  ladderizedSelectPopperState,
+  ladderizedSelectRef,
+  ladderizedSelectMenuList,
+  isLadderizedSelectPopperDisabled,
+  ladderizedSelectModel,
+  inputText,
+  handleSelectedLadderizedItem,
+  handleSearch,
+  handleClear,
+  handleMenuToggle,
+} = useSelectLadderized(props, emit);
+</script>