design-system-next 2.7.43 → 2.7.44

package/src/components/select/select.ts

@@ -0,0 +1,105 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { MenuListType } from '../list/list';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+const GROUPED_ITEMS_BY_TYPES = ['A-Z', 'Z-A'] as const;
+
+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 selectPropTypes = {
+  id: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: [String, Number, Object, Array] as PropType<
+      string | number | Record<string, unknown> | (string | number | Record<string, unknown>)[]
+    >,
+    default: () => [],
+  },
+  menuList: {
+    type: Array as PropType<MenuListType[] | string[] | Record<string, unknown>[]>,
+    required: true,
+    default: [],
+  },
+  groupItemsBy: {
+    type: String as PropType<(typeof GROUPED_ITEMS_BY_TYPES)[number]>,
+    validator: (value: (typeof GROUPED_ITEMS_BY_TYPES)[number] | undefined) => {
+      return value === undefined || GROUPED_ITEMS_BY_TYPES.includes(value);
+    },
+  },
+  textField: {
+    type: String,
+    default: 'text',
+    description: 'Field name to use for display text when using dynamic object arrays',
+  },
+  valueField: {
+    type: String,
+    default: 'value',
+    description: 'Field name to use for value when using dynamic object arrays',
+  },
+  placeholder: {
+    type: String,
+  },
+  searchString: {
+    type: String,
+    default: '',
+  },
+  placement: {
+    type: String as PropType<(typeof PLACEMENTS_TYPES)[number]>,
+    validator: (value: (typeof PLACEMENTS_TYPES)[number]) => PLACEMENTS_TYPES.includes(value),
+    default: 'bottom',
+  },
+  popperStrategy: {
+    type: String,
+    validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),
+    default: 'absolute',
+  },
+  popperWidth: {
+    type: String,
+    default: '100%',
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+  wrapperPosition: {
+    type: String,
+    default: 'relative',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const selectEmitTypes = {
+  'infinite-scroll-trigger': Boolean,
+  'update:modelValue': (_value: unknown) => true, // Accept any type of value
+};
+
+export type SelectPropTypes = ExtractPropTypes<typeof selectPropTypes>;
+export type SelectEmitTypes = typeof selectEmitTypes;

package/src/components/select/select.vue

@@ -0,0 +1,90 @@
+<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="spr-grid spr-max-h-[300px] spr-gap-0.5 spr-overflow-y-auto spr-overflow-x-hidden spr-p-2"
+      >
+        <template v-if="selectMenuList.length > 0">
+          <spr-list
+            v-model="selectedListItems"
+            :menu-list="selectMenuList"
+            :group-items-by="props.groupItemsBy"
+            :pre-selected-items="selectValue"
+            @update:model-value="handleSelectedItem"
+          />
+        </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 { selectPropTypes, selectEmitTypes } from './select';
+
+import { useSelect } from './use-select';
+
+const props = defineProps(selectPropTypes);
+const emit = defineEmits(selectEmitTypes);
+
+const {
+  selectPopperState,
+  selectRef,
+  selectMenuList,
+  isSelectPopperDisabled,
+  selectedListItems,
+  handleSelectedItem,
+  selectValue,
+  inputText,
+} = useSelect(props, emit);
+</script>

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

@@ -0,0 +1,445 @@
+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';
+import type { MenuListType } from '../list/list';
+
+export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitTypes>['emit']) => {
+  const { menuList, searchString, disabled, textField, valueField } = toRefs(props);
+
+  const selectRef = ref<HTMLDivElement | null>(null);
+  const selectPopperState = ref<boolean>(false);
+  const isSelectPopperDisabled = computed(() => disabled.value);
+
+  const selectModel = useVModel(props, 'modelValue', emit);
+  const inputText = ref('');
+  const selectedListItems = ref<MenuListType[]>([]);
+  const selectMenuList = ref<MenuListType[]>([]);
+
+  // Normalized value for internal use - always an array
+  const normalizedValue = computed(() => {
+    // If already an array, use it
+    if (Array.isArray(selectModel.value)) {
+      return selectModel.value;
+    }
+
+    // If not an array but has a value, make it a single-item array
+    if (selectModel.value !== undefined && selectModel.value !== null) {
+      return [selectModel.value];
+    }
+
+    // Default empty array
+    return [];
+  });
+
+  // Compatibility layer for pre-selected items (List component expects string[] format)
+  const compatPreSelectedItems = computed(() => {
+    return selectModel.value !== undefined && selectModel.value !== null
+      ? [
+          typeof selectModel.value === 'object'
+            ? selectModel.value
+            : typeof selectModel.value === 'number'
+              ? selectModel.value
+              : selectModel.value.toString(),
+        ]
+      : [];
+  });
+
+  const processMenuList = () => {
+    // Handle empty array or non-array values
+    if (!menuList.value || !Array.isArray(menuList.value) || menuList.value.length === 0) {
+      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 selectModel 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;
+        });
+
+        selectModel.value = values as (string | number | Record<string, unknown>)[];
+      } else {
+        // For single-select
+        if (selectedItems.length === 0) {
+          selectModel.value = props.multiSelect ? [] : '';
+          return;
+        }
+
+        const item = selectedItems[0];
+
+        // If we stored the original object, use it
+        if ('_originalObject' in item) {
+          selectModel.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() !== '') {
+            selectModel.value = Number(val);
+          } else {
+            selectModel.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) {
+          selectModel.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) {
+            selectModel.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) {
+      selectModel.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(selectModel.value) && selectModel.value.length === 2) {
+        // Handle [subvalue, value] format used in ladderized selects with search
+        const subvalue = selectModel.value[0]?.toString() || '';
+        const value = selectModel.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(selectModel, () => {
+    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,
+    selectModel: compatPreSelectedItems, // Use compatible format for lists
+    removeCurrentLevelInBackLabel,
+    isLadderizedSearch,
+  };
+};

package/src/examples/select-number-multi-select.vue

@@ -0,0 +1,71 @@
+// Example usage of select with primitive number values in multi-select mode
+
+<template>
+  <div>
+    <h2>Multiple Number Values Demo</h2>
+    <p>Selected values: {{ displaySelection }}</p>
+
+    <div class="select-container">
+      <spr-select
+        id="number-multi-select"
+        v-model="selectedNumbers"
+        :menu-list="numberOptions"
+        multi-select
+        @update:model-value="handleSelectedItems"
+      >
+        <spr-input v-model="displayText" label="Select Numbers" readonly placeholder="Select numbers..." />
+      </spr-select>
+    </div>
+
+    <div class="mt-4">
+      <h3>Current selection type:</h3>
+      <pre>{{ typeof selectedNumbers[0] }}</pre>
+
+      <h3>Current selection:</h3>
+      {{ selectedNumbers }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import SprInput from '@/components/input/input.vue';
+import SprSelect from '@/components/select/select.vue';
+
+// Define number options - raw number values
+const numberOptions = [
+  { text: 'One', value: 1 },
+  { text: 'Two', value: 2 },
+  { text: 'Three', value: 3 },
+  { text: 'Four', value: 4 },
+  { text: 'Five', value: 5 },
+];
+
+// Track selected numbers
+const selectedNumbers = ref([]);
+const displayText = ref('');
+
+// Display the selection summary
+const displaySelection = computed(() => {
+  if (selectedNumbers.value.length === 0) {
+    return 'None';
+  }
+  return selectedNumbers.value.join(', ');
+});
+
+// Handle selected items and update display text
+const handleSelectedItems = (items) => {
+  // For multi-select, update display text to show selected items
+  const selectedTexts = items.map((itemValue) => {
+    // Find corresponding text for each selected value
+    const option = numberOptions.find((opt) => opt.value === itemValue);
+    return option ? option.text : itemValue;
+  });
+
+  // Update the input display text
+  displayText.value = selectedTexts.join(', ');
+
+  console.log('Selected values:', items);
+  console.log('Type of first value:', typeof items[0]);
+};
+</script>