design-system-next 2.7.43 → 2.7.44

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

@@ -0,0 +1,110 @@
+<template>
+  <div></div>
+</template>
+<!-- <template>
+  <Menu
+    :shown="selectPopperState"
+    aria-id="select-wrapper"
+    distance="4"
+    :placement="props.placement"
+    :triggers="[]"
+    :popper-hide-triggers="[]"
+    :auto-hide="false"
+    :disabled="isSelectPopperDisabled"
+    :container="`#${props.id}`"
+    :strategy="
+      props.popperStrategy === 'fixed' || props.popperStrategy === 'absolute' ? props.popperStrategy : 'absolute'
+    "
+    :delay="0"
+    :style="{
+      position: props.wrapperPosition,
+      width: props.width,
+    }"
+  >
+    <div @click="selectPopperState = true">
+      {{ selectedListItems }}
+
+      <spr-input
+        v-model="inputText"
+        label="Select Numbers"
+        :placeholder="props.placeholder"
+        :readonly="props.readonly"
+        :disabled="props.disabled"
+        autocomplete="off"
+      />
+    </div>
+
+    <div
+      :id="props.id"
+      :style="{
+        width: props.popperWidth,
+      }"
+    ></div>
+
+    <template #popper>
+      <div
+        ref="selectRef"
+        :class="[
+          (!props.ladderized || isLadderizedSearch) && 'spr-p-2',
+          'spr-grid spr-max-h-[300px] spr-gap-0.5 spr-overflow-y-auto spr-overflow-x-hidden',
+        ]"
+      >
+        <template v-if="selectMenuList.length > 0">
+          <spr-list
+            v-if="!props.ladderized || isLadderizedSearch"
+            v-model="selectedListItems"
+            :menu-list="selectMenuList"
+            :group-items-by="props.groupItemsBy"
+            :multi-select="props.multiSelect"
+            :pre-selected-items="selectValue"
+            @update:model-value="handleSelectedItem"
+          />
+          <spr-ladderized-list
+            v-else
+            v-model="selectValue"
+            :ladderized="props.ladderized"
+            :menu-list="selectMenuList"
+            :remove-current-level-in-back-label="removeCurrentLevelInBackLabel"
+            @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>
+</template>
+
+<script lang="ts" setup>
+import { Menu } from 'floating-vue';
+
+import 'floating-vue/dist/style.css';
+
+import SprInput from '../../input/input.vue';
+import SprList from '../../list/list.vue';
+import SprLadderizedList from '../../list/ladderized-list/ladderized-list.vue';
+
+import { selectPropTypes, selectEmitTypes } from './select-multiple';
+
+import { useSelect } from './use-select-multiple';
+
+const props = defineProps(selectPropTypes);
+const emit = defineEmits(selectEmitTypes);
+
+const {
+  selectPopperState,
+  selectRef,
+  selectMenuList,
+  isSelectPopperDisabled,
+  selectedListItems,
+  handleSelectedItem,
+  handleSelectedLadderizedItem,
+  selectValue,
+  removeCurrentLevelInBackLabel,
+  isLadderizedSearch,
+  inputText,
+} = useSelect(props, emit);
+</script> -->

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

@@ -0,0 +1,499 @@
+// import { ref, toRefs, computed, onMounted, watch } from 'vue';
+// import { onClickOutside, useInfiniteScroll, useVModel } from '@vueuse/core';
+
+// import type { SetupContext } from 'vue';
+// import type { SelectPropTypes, SelectEmitTypes } from './select-multiple';
+// import type { MenuListType } from '../list/list';
+
+// export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitTypes>['emit']) => {
+//   const {
+//     menuList,
+//     searchString,
+//     disabled,
+//     multiSelect,
+//     removeCurrentLevelInBackLabel,
+//     ladderized,
+//     textField,
+//     valueField,
+//   } = toRefs(props);
+
+//   // Select component ref variables
+//   const selectValue = useVModel(props, 'modelValue', emit); // v-model value of Select component
+//   const selectRef = ref<HTMLDivElement | null>(null);
+//   const inputText = ref(''); // v-model value of Input component
+
+//   // List component ref variables
+//   const selectedListItems = ref<MenuListType[]>([]); // v-model value of the list component
+//   const selectMenuList = ref<MenuListType[]>([]); // menu list for the list component
+
+//   // Normalized value for internal use - always an array
+//   const normalizedValue = computed(() => {
+//     // If already an array, use it
+//     if (Array.isArray(selectValue.value)) {
+//       return selectValue.value;
+//     }
+//     // If not an array but has a value, make it a single-item array
+//     if (selectValue.value !== undefined && selectValue.value !== null) {
+//       return [selectValue.value];
+//     }
+//     // Default empty array
+//     return [];
+//   });
+
+//   // Compatibility layer for pre-selected items (List component expects string[] format)
+//   const compatPreSelectedItems = computed(() => {
+//     // For ladderized Select with search, handle the special format
+//     if (props.ladderized && Array.isArray(selectValue.value) && selectValue.value.length === 2) {
+//       // We return only the second value from the [subvalue, value] format which is the actual selected value
+//       return [selectValue.value[1]?.toString() || ''];
+//     }
+
+//     // For regular arrays (multi-select)
+//     if (Array.isArray(selectValue.value)) {
+//       return selectValue.value.map((item) => {
+//         if (item === undefined || item === null) return '';
+
+//         // For numbers, preserve the original number value instead of converting to string
+//         if (typeof item === 'number') return item;
+
+//         // For objects, pass the original object reference
+//         // This is key for proper multi-select of objects
+//         if (typeof item === 'object') return item;
+
+//         // For strings, pass as is
+//         return item.toString();
+//       });
+//     }
+
+//     // For single values (single-select)
+//     return selectValue.value !== undefined && selectValue.value !== null
+//       ? [
+//           typeof selectValue.value === 'object'
+//             ? // Pass object reference directly instead of stringifying
+//               selectValue.value
+//             : // For numbers, preserve the original number value
+//               typeof selectValue.value === 'number'
+//               ? selectValue.value
+//               : selectValue.value.toString(),
+//         ]
+//       : [];
+//   });
+
+//   // Popper state
+//   const selectPopperState = ref<boolean>(false);
+//   const isSelectPopperDisabled = computed(() => disabled.value);
+
+//   const isLadderizedSearch = computed(
+//     () => ladderized.value && searchString.value !== '' && normalizedValue.value.length === 0,
+//   );
+
+//   const processMenuList = () => {
+//     // Handle empty array or non-array values
+//     if (!menuList.value || !Array.isArray(menuList.value) || menuList.value.length === 0) {
+//       selectMenuList.value = [];
+//       return;
+//     }
+
+//     // If ladderized is true and menu list items already conform to MenuListType, don't transform
+//     if (ladderized.value) {
+//       // Verify the items have the required structure for ladderized lists
+//       const allValid = menuList.value.every(
+//         (item) => typeof item === 'object' && item !== null && 'text' in item && 'value' in item,
+//       );
+
+//       if (allValid) {
+//         selectMenuList.value = menuList.value as MenuListType[];
+//       } else {
+//         console.warn('Ladderized Select requires menu items in {text, value} format');
+//         selectMenuList.value = [];
+//       }
+//       return;
+//     }
+
+//     const firstItem = menuList.value[0];
+
+//     // Handle array of strings
+//     if (typeof firstItem === 'string') {
+//       selectMenuList.value = (menuList.value as string[]).map((item) => ({
+//         text: item,
+//         value: item,
+//       }));
+//       return;
+//     }
+
+//     // Handle array of numbers
+//     if (typeof firstItem === 'number') {
+//       selectMenuList.value = (menuList.value as number[]).map((item) => ({
+//         text: item.toString(),
+//         value: item, // Keep the value as a number instead of converting to string
+//       }));
+//       return;
+//     }
+
+//     // Handle array of objects with dynamic attributes
+//     if (typeof firstItem === 'object' && firstItem !== null) {
+//       // Check if it's already in MenuListType format
+//       if ('text' in firstItem && 'value' in firstItem) {
+//         selectMenuList.value = menuList.value as MenuListType[];
+//         return;
+//       }
+
+//       // Transform to MenuListType format using textField and valueField
+//       selectMenuList.value = (menuList.value as Record<string, unknown>[]).map((item) => {
+//         const displayText = item[textField.value] || 'Unnamed';
+//         // Use the specified value field if available, otherwise use the entire object
+//         const itemValue = valueField.value && item[valueField.value] !== undefined ? item[valueField.value] : item;
+
+//         return {
+//           text: displayText,
+//           value: typeof itemValue === 'object' ? JSON.stringify(itemValue) : itemValue.toString(),
+//           _originalObject: item, // Store the original object for reference
+//         };
+//       });
+//       return;
+//     }
+
+//     // Default fallback
+//     selectMenuList.value = menuList.value as MenuListType[];
+//   };
+
+//   watch(menuList, () => {
+//     processMenuList();
+//   });
+
+//   const handleSearch = () => {
+//     if (menuList.value && menuList.value.length === 0) {
+//       return;
+//     }
+
+//     if (!multiSelect.value) {
+//       singleSelectSearch();
+//     } else {
+//       // Process menu list for searching
+//       processMenuList();
+
+//       // Handle multi-select search - filter based on search string
+//       if (searchString.value.trim() !== '') {
+//         selectMenuList.value = getFilteredMenuList(selectMenuList.value);
+//       }
+//     }
+//   };
+
+//   const singleSelectSearch = () => {
+//     if (props.ladderized) {
+//       ladderizedSearch();
+//     } else {
+//       basicSearch();
+//     }
+//   };
+
+//   const basicSearch = () => {
+//     // Process menu list first
+//     processMenuList();
+
+//     // Then filter based on search string
+//     if (searchString.value.trim() !== '') {
+//       selectMenuList.value = getFilteredMenuList(selectMenuList.value);
+//     }
+//   };
+
+//   const ladderizedSearch = () => {
+//     //revert to initial list if search string is empty or selectValue is not empty
+//     if (searchString.value === '' || normalizedValue.value.length > 0) {
+//       selectMenuList.value = [...menuList.value] as MenuListType[];
+//       return;
+//     }
+
+//     const menuListSubLevels = getAllSublevelItems(menuList.value as MenuListType[]);
+
+//     const filteredMenuList = getFilteredMenuList(menuList.value as MenuListType[]);
+//     const filteredMenuListSubLevels = getFilteredMenuList(menuListSubLevels);
+
+//     if (filteredMenuList.length > 0) {
+//       //if there is a match at the top level of the menuList
+//       selectMenuList.value = getAllSublevelItems(filteredMenuList);
+//     } else if (filteredMenuListSubLevels.length > 0) {
+//       //if there is a match at the 2nd level (sublevel of a menuList item) of the menuList
+//       selectMenuList.value = filteredMenuListSubLevels;
+//     } else {
+//       selectMenuList.value = [];
+//     }
+//   };
+
+//   // compile sublevel items from menuList to a single array
+//   // and add text and value of the parent item to all sublevel items as subtext and subvalue
+//   const getAllSublevelItems = (menuList: MenuListType[]) => {
+//     return menuList.reduce<MenuListType[]>((currentValue, currentItem) => {
+//       if (currentItem.sublevel) {
+//         const mappedSublevel = currentItem.sublevel.map((sublevelItem: MenuListType) => ({
+//           ...sublevelItem, //text and value of a sublevel item
+//           subtext: currentItem.text, // text of parent of a sublevel item
+//           subvalue: typeof currentItem.value === 'string' ? currentItem.value : String(currentItem.value), // value of parent of a sublevel item as string
+//         }));
+
+//         return [...currentValue, ...mappedSublevel];
+//       }
+
+//       return currentValue;
+//     }, [] as MenuListType[]);
+//   };
+
+//   // filter list based on search string and menuList/sublevel texts
+//   const getFilteredMenuList = (list: MenuListType[]) => {
+//     return list.filter((item: MenuListType) => {
+//       const searchTerm = searchString.value.toLowerCase().trim();
+//       return item.text.toLowerCase().includes(searchTerm);
+//     });
+//   };
+
+//   watch(searchString, () => {
+//     handleSearch();
+//   });
+
+//   onClickOutside(selectRef, () => {
+//     selectPopperState.value = false;
+//   });
+
+//   useInfiniteScroll(
+//     selectRef,
+//     () => {
+//       emit('infinite-scroll-trigger', true);
+//     },
+//     { distance: 10 },
+//   );
+
+//   // Handle selected item for simple list component
+//   const handleSelectedItem = (selectedItems: MenuListType[]) => {
+//     if (!props.ladderized) {
+//       // Determine the type of value to emit based on the original data type and multiSelect
+//       if (multiSelect.value) {
+//         // For multi-select, always return an array
+//         const values = selectedItems.map((item) => {
+//           // If we stored the original object, use it
+//           if ('_originalObject' in item) {
+//             return item._originalObject;
+//           }
+
+//           // For simple types, handle value type conversion properly
+//           const val = item.value;
+
+//           // If it's already a number, keep it as a number
+//           if (typeof val === 'number') {
+//             return val;
+//           }
+
+//           // For strings that look like numbers, convert them
+//           if (typeof val === 'string' && !isNaN(Number(val)) && val.trim() !== '') {
+//             // Only convert if it looks like a proper number format
+//             if (/^-?\d+(\.\d+)?$/.test(val)) {
+//               return Number(val);
+//             }
+//           }
+
+//           // Return the original value for all other cases
+//           return val;
+//         });
+
+//         selectValue.value = values as (string | number | Record<string, unknown>)[];
+//       } else {
+//         // For single-select
+//         if (selectedItems.length === 0) {
+//           selectValue.value = props.multiSelect ? [] : '';
+//           return;
+//         }
+
+//         const item = selectedItems[0];
+
+//         // If we stored the original object, use it
+//         if ('_originalObject' in item) {
+//           selectValue.value = item._originalObject as Record<string, unknown>;
+//         } else {
+//           // For simple types, return the value (try to convert number strings to numbers)
+//           const val = item.value;
+//           if (typeof val === 'string' && !isNaN(Number(val)) && val.trim() !== '') {
+//             selectValue.value = Number(val);
+//           } else {
+//             selectValue.value = val;
+//           }
+//         }
+//       }
+//     } else if (props.ladderized) {
+//       if (props.searchString !== '') {
+//         // generate select value if ladderized with search string
+//         const subvalue = selectedItems[0]?.subvalue;
+//         const value = selectedItems[0]?.value;
+//         if (subvalue !== undefined && value !== undefined) {
+//           selectValue.value = [subvalue, value] as [string, string | number];
+//         }
+//       } else {
+//         // For regular ladderized select selection without search
+//         if (selectedItems.length > 0) {
+//           const item = selectedItems[0];
+//           // Use the value directly for ladderized items
+//           if (item && item.value) {
+//             selectValue.value = item.value;
+//           }
+//         }
+//       }
+//     }
+
+//     // Always close select for single selection, regardless of value type
+//     if (!multiSelect.value) {
+//       setTimeout(() => {
+//         selectPopperState.value = false;
+//       }, 10);
+//     }
+//   };
+
+//   // Handle selected item for ladderized list component
+//   const handleSelectedLadderizedItem = (selectedItems: string[]) => {
+//     // Update the model value with the selected ladderized items
+//     if (selectedItems.length > 0) {
+//       selectValue.value = selectedItems;
+//     }
+
+//     // If item is from last sublevel, close the select
+//     if (checkIfItemFromLastSublevel(selectedItems)) {
+//       selectPopperState.value = false;
+//     }
+//   };
+
+//   const checkIfItemFromLastSublevel = (selectedItems: string[]) => {
+//     let selectedItemsObject = selectMenuList.value;
+
+//     // Traverse to the last item in the selectedItems array
+//     selectedItems.forEach((selectedItem) => {
+//       selectedItemsObject = selectedItemsObject.find((item) => selectedItem === item.value)?.sublevel ?? [];
+//     });
+
+//     // If there is a sublevel, return false
+//     if (selectedItemsObject.length > 0) {
+//       return false;
+//     }
+
+//     return true;
+//   };
+
+//   // Update selected items when model value changes externally
+//   const updateSelectedItemsFromValue = () => {
+//     if (!selectMenuList.value.length) return;
+
+//     const values = normalizedValue.value;
+//     if (!values || !values.length) {
+//       selectedListItems.value = [];
+//       return;
+//     }
+
+//     // Store both original values and string versions for flexible matching
+//     const valueData = values.map((val) => {
+//       if (val === undefined || val === null) return { original: '', string: '' };
+
+//       // For objects, use JSON string representation
+//       if (typeof val === 'object') {
+//         return {
+//           original: val,
+//           string: JSON.stringify(val),
+//           isObject: true,
+//           id: 'id' in val ? val.id : undefined,
+//         };
+//       }
+
+//       // For numbers and strings, keep original and string versions
+//       return {
+//         original: val,
+//         string: val.toString(),
+//         isObject: false,
+//       };
+//     });
+
+//     // Extract just string values for comparison
+//     const valueStrings = valueData.map((v) => v.string);
+
+//     if (props.ladderized) {
+//       // Special handling for ladderized selects
+//       if (Array.isArray(selectValue.value) && selectValue.value.length === 2) {
+//         // Handle [subvalue, value] format used in ladderized selects with search
+//         const subvalue = selectValue.value[0]?.toString() || '';
+//         const value = selectValue.value[1]?.toString() || '';
+
+//         selectedListItems.value = selectMenuList.value.filter((item) => {
+//           return item.value === value && (!item.subvalue || item.subvalue === subvalue);
+//         });
+//       } else {
+//         // Regular ladderized select value
+//         selectedListItems.value = selectMenuList.value.filter((item) => {
+//           // Convert both to strings for comparison or check direct equality for numbers
+//           if (typeof item.value === 'number') {
+//             return valueData.some((v) => v.original === item.value || v.string === String(item.value));
+//           } else {
+//             return valueStrings.includes(String(item.value));
+//           }
+//         });
+//       }
+//     } else {
+//       // Regular Select value
+//       selectedListItems.value = selectMenuList.value.filter((item) => {
+//         // Handle objects with _originalObject property
+//         if ('_originalObject' in item && item._originalObject) {
+//           return valueData.some((v) => {
+//             // If both are objects, compare by JSON string or by ID
+//             if (v.isObject && typeof v.original === 'object') {
+//               const originalObj = item._originalObject as Record<string, unknown>;
+
+//               // First try direct equality comparison
+//               if (v.original === originalObj) return true;
+
+//               // Try JSON string comparison
+//               const itemJson = JSON.stringify(originalObj);
+//               if (v.string === itemJson) return true;
+
+//               // Try ID-based comparison if both have ID fields
+//               if (v.id !== undefined && 'id' in originalObj) {
+//                 return v.id === originalObj.id;
+//               }
+//             }
+//             return false;
+//           });
+//         }
+
+//         // Handle both numeric and string values correctly
+//         if (typeof item.value === 'number') {
+//           return valueData.some((v) => v.original === item.value || v.string === String(item.value));
+//         } else {
+//           return valueStrings.includes(String(item.value));
+//         }
+//       });
+//     }
+//   };
+
+//   watch(selectValue, () => {
+//     updateSelectedItemsFromValue();
+//   });
+
+//   watch(selectMenuList, () => {
+//     updateSelectedItemsFromValue();
+//   });
+
+//   onMounted(() => {
+//     processMenuList();
+
+//     // Set initial selected items based on model value
+//     if (normalizedValue.value.length > 0) {
+//       updateSelectedItemsFromValue();
+//     }
+//   });
+
+//   return {
+//     selectPopperState,
+//     selectRef,
+//     inputText,
+//     selectMenuList,
+//     isSelectPopperDisabled,
+//     selectedListItems,
+//     handleSelectedItem,
+//     handleSelectedLadderizedItem,
+//     selectValue: compatPreSelectedItems, // Use compatible format for lists
+//     removeCurrentLevelInBackLabel,
+//     isLadderizedSearch,
+//   };
+// };