design-system-next 2.7.44 → 2.7.45

package/src/components/dropdown/__tests__/dropdown-fixes.spec.ts

@@ -0,0 +1,106 @@
+// Test script for dropdown component
+
+import { describe, it, expect } from 'vitest';
+import { ref } from 'vue';
+import { useDropdown } from '../use-dropdown';
+
+describe('Dropdown Component Fixes', () => {
+  describe('Value handling', () => {
+    it('should handle string value selection correctly', () => {
+      // Setup single-select dropdown with string value
+      const modelValue = ref('');
+      const menuList = [
+        { text: 'Apple', value: 'apple' },
+        { text: 'Banana', value: 'banana' }
+      ];
+      
+      const { handleSelectedItem } = useDropdown({
+        id: 'test',
+        modelValue,
+        menuList
+      });
+      
+      // Simulate selecting an item
+      handleSelectedItem([{ text: 'Apple', value: 'apple' }]);
+      
+      // Verify correct value is set
+      expect(modelValue.value).toBe('apple');
+    });
+    
+    it('should handle multiple selection correctly', () => {
+      // Setup multi-select dropdown
+      const modelValue = ref([]);
+      const menuList = [
+        { text: 'Apple', value: 'apple' },
+        { text: 'Banana', value: 'banana' }
+      ];
+      
+      const { handleSelectedItem } = useDropdown({
+        id: 'test',
+        modelValue,
+        menuList,
+        multiSelect: true
+      });
+      
+      // Simulate selecting multiple items
+      handleSelectedItem([
+        { text: 'Apple', value: 'apple' },
+        { text: 'Banana', value: 'banana' }
+      ]);
+      
+      // Verify correct values are set
+      expect(modelValue.value).toEqual(['apple', 'banana']);
+    });
+  });
+  
+  describe('Ladderized dropdown', () => {
+    it('should handle ladderized dropdown selection', () => {
+      // Setup ladderized dropdown
+      const modelValue = ref([]);
+      const menuList = [
+        {
+          text: 'Lion',
+          value: 'lion',
+          sublevel: [
+            { text: 'Cub', value: 'cub' }
+          ]
+        }
+      ];
+      
+      const { handleSelectedItem } = useDropdown({
+        id: 'test',
+        modelValue,
+        menuList,
+        ladderized: true
+      });
+      
+      // Simulate selecting an item
+      handleSelectedItem([{ text: 'Cub', value: 'cub', subvalue: 'lion' }]);
+      
+      // Verify correct values are set for ladderized dropdown
+      expect(modelValue.value).toEqual(['lion', 'cub']);
+    });
+  });
+  
+  describe('Edge cases', () => {
+    it('should handle empty selection', () => {
+      const modelValue = ref('apple');
+      const menuList = [
+        { text: 'Apple', value: 'apple' },
+        { text: 'Banana', value: 'banana' }
+      ];
+      
+      const { handleSelectedItem } = useDropdown({
+        id: 'test',
+        modelValue,
+        menuList
+      });
+      
+      // Simulate clearing selection
+      handleSelectedItem([]);
+      
+      // Verify value is cleared
+      expect(modelValue.value).toBeUndefined();
+    });
+  });
+});

package/src/components/dropdown/__tests__/dropdown-value-types.spec.ts

@@ -0,0 +1,213 @@
+import { describe, it, expect } from 'vitest';
+import { ref } from 'vue';
+import { useDropdown } from '../use-dropdown';
+
+describe('Dropdown Value Types', () => {
+  describe('Single primitive values', () => {
+    it('should handle string values', () => {
+      const modelValue = 'apple';
+      const menuList = ['apple', 'banana', 'cherry'];
+      
+      const { dropdownMenuList, normalizedValue } = useDropdown({
+        id: 'test',
+        modelValue,
+        menuList
+      });
+      
+      expect(normalizedValue.value).toEqual(['apple']);
+      expect(dropdownMenuList.value).toEqual([
+        { text: 'apple', value: 'apple' },
+        { text: 'banana', value: 'banana' },
+        { text: 'cherry', value: 'cherry' }
+      ]);
+    });
+    
+    it('should handle number values', () => {
+      const modelValue = 42;
+      const menuList = [42, 55, 67];
+      
+      const { dropdownMenuList, normalizedValue } = useDropdown({
+        id: 'test',
+        modelValue,
+        menuList
+      });
+      
+      expect(normalizedValue.value).toEqual([42]);
+      expect(dropdownMenuList.value).toEqual([
+        { text: '42', value: '42' },
+        { text: '55', value: '55' },
+        { text: '67', value: '67' }
+      ]);
+    });
+  });
+  
+  describe('Single object values', () => {
+    it('should handle object values', () => {
+      const employee = { systemId: 1, firstName: 'John', lastName: 'Doe' };
+      const modelValue = employee;
+      const menuList = [
+        { systemId: 1, firstName: 'John', lastName: 'Doe' },
+        { systemId: 2, firstName: 'Jane', lastName: 'Smith' }
+      ];
+      
+      const { dropdownMenuList, normalizedValue } = useDropdown({
+        id: 'test',
+        modelValue,
+        menuList,
+        textField: 'firstName',
+        valueField: 'systemId'
+      });
+      
+      expect(normalizedValue.value).toEqual([employee]);
+      expect(dropdownMenuList.value[0].text).toBe('John');
+      expect(dropdownMenuList.value[1].text).toBe('Jane');
+      expect(dropdownMenuList.value[0].value).toBe('1');
+      expect(dropdownMenuList.value[0]._originalObject).toEqual(menuList[0]);
+    });
+  });
+  
+  describe('Multiple primitive values', () => {
+    it('should handle string arrays', () => {
+      const modelValue = ['apple', 'banana'];
+      const menuList = ['apple', 'banana', 'cherry'];
+      
+      const { dropdownMenuList, normalizedValue } = useDropdown({
+        id: 'test',
+        modelValue,
+        menuList,
+        multiSelect: true
+      });
+      
+      expect(normalizedValue.value).toEqual(['apple', 'banana']);
+      expect(dropdownMenuList.value).toEqual([
+        { text: 'apple', value: 'apple' },
+        { text: 'banana', value: 'banana' },
+        { text: 'cherry', value: 'cherry' }
+      ]);
+    });
+    
+    it('should handle number arrays', () => {
+      const modelValue = [42, 55];
+      const menuList = [42, 55, 67];
+      
+      const { dropdownMenuList, normalizedValue } = useDropdown({
+        id: 'test',
+        modelValue,
+        menuList,
+        multiSelect: true
+      });
+      
+      expect(normalizedValue.value).toEqual([42, 55]);
+      expect(dropdownMenuList.value).toEqual([
+        { text: '42', value: '42' },
+        { text: '55', value: '55' },
+        { text: '67', value: '67' }
+      ]);
+    });
+  });
+  
+  describe('Multiple object values', () => {
+    it('should handle object arrays', () => {
+      const employees = [
+        { systemId: 1, firstName: 'John', lastName: 'Doe' },
+        { systemId: 2, firstName: 'Jane', lastName: 'Smith' }
+      ];
+      const modelValue = employees;
+      const menuList = [
+        { systemId: 1, firstName: 'John', lastName: 'Doe' },
+        { systemId: 2, firstName: 'Jane', lastName: 'Smith' },
+        { systemId: 3, firstName: 'Mike', lastName: 'Johnson' }
+      ];
+      
+      const { dropdownMenuList, normalizedValue } = useDropdown({
+        id: 'test',
+        modelValue,
+        menuList,
+        textField: 'firstName',
+        valueField: 'systemId',
+        multiSelect: true
+      });
+      
+      expect(normalizedValue.value).toEqual(employees);
+      expect(dropdownMenuList.value[0].text).toBe('John');
+      expect(dropdownMenuList.value[1].text).toBe('Jane');
+      expect(dropdownMenuList.value[0].value).toBe('1');
+      expect(dropdownMenuList.value[0]._originalObject).toEqual(menuList[0]);
+    });
+  });
+  
+  describe('Handle selected items', () => {
+    it('should output string for string selection', () => {
+      const modelValue = ref(undefined);
+      const menuList = ['apple', 'banana', 'cherry'];
+      
+      const { handleSelectedItem } = useDropdown({
+        id: 'test',
+        modelValue,
+        menuList,
+      });
+      
+      handleSelectedItem([{ text: 'apple', value: 'apple' }]);
+      expect(modelValue.value).toBe('apple');
+    });
+    
+    it('should output number for number selection', () => {
+      const modelValue = ref(undefined);
+      const menuList = [42, 55, 67];
+      
+      const { handleSelectedItem } = useDropdown({
+        id: 'test',
+        modelValue,
+        menuList,
+      });
+      
+      handleSelectedItem([{ text: '42', value: '42' }]);
+      expect(modelValue.value).toBe(42);
+    });
+    
+    it('should output original object for object selection', () => {
+      const modelValue = ref(undefined);
+      const employeeObj = { systemId: 1, firstName: 'John', lastName: 'Doe' };
+      const menuList = [
+        employeeObj,
+        { systemId: 2, firstName: 'Jane', lastName: 'Smith' }
+      ];
+      
+      const { handleSelectedItem, dropdownMenuList } = useDropdown({
+        id: 'test',
+        modelValue,
+        menuList,
+        textField: 'firstName',
+        valueField: 'systemId'
+      });
+      
+      // Process menu list first to get _originalObject
+      dropdownMenuList.value.forEach(item => {
+        if (item.value === '1') {
+          handleSelectedItem([item]);
+        }
+      });
+      
+      expect(modelValue.value).toEqual(employeeObj);
+    });
+    
+    it('should output array for multi-select', () => {
+      const modelValue = ref([]);
+      const menuList = ['apple', 'banana', 'cherry'];
+      
+      const { handleSelectedItem } = useDropdown({
+        id: 'test',
+        modelValue,
+        menuList,
+        multiSelect: true
+      });
+      
+      handleSelectedItem([
+        { text: 'apple', value: 'apple' },
+        { text: 'banana', value: 'banana' }
+      ]);
+      
+      expect(modelValue.value).toEqual(['apple', 'banana']);
+    });
+  });
+});

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

@@ -1,122 +0,0 @@
-// 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: [],
-//   },
-//   multiSelect: {
-//     type: Boolean,
-//     default: false,
-//   },
-//   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,
-//   },
-//   ladderized: {
-//     type: Boolean,
-//     default: false,
-//   },
-//   removeCurrentLevelInBackLabel: {
-//     type: Boolean,
-//     default: false,
-//   },
-//   disabled: {
-//     type: Boolean,
-//     default: false,
-//   },
-// };
-
-// export const selectEmitTypes = {
-//   'infinite-scroll-trigger': Boolean,
-//   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-//   '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-laderrized/select-laderrized.vue

@@ -1,110 +0,0 @@
-<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-laderrized';
-
-import { useSelect } from './use-select-laderrized';
-
-const props = defineProps(selectPropTypes);
-const emit = defineEmits(selectEmitTypes);
-
-const {
-  selectPopperState,
-  selectRef,
-  selectMenuList,
-  isSelectPopperDisabled,
-  selectedListItems,
-  handleSelectedItem,
-  handleSelectedLadderizedItem,
-  selectValue,
-  removeCurrentLevelInBackLabel,
-  isLadderizedSearch,
-  inputText,
-} = useSelect(props, emit);
-</script> -->