design-system-next 2.11.11 → 2.11.17

package/src/components/lozenge/lozenge.ts

@@ -1,61 +1,61 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-export const LOZENGE_TONE = ['plain', 'pending', 'information', 'success', 'danger', 'neutral', 'caution'] as const;
-
-export const lozengePropTypes = {
-  /**
-   * @description Lozenge Label
-   */
-  label: {
-    type: String,
-    default: 'label',
-  },
-  /**
-   * @description Lozenge tone
-   */
-  tone: {
-    type: String as PropType<(typeof LOZENGE_TONE)[number]>,
-    validator: (value: (typeof LOZENGE_TONE)[number]) => LOZENGE_TONE.includes(value),
-    default: 'plain',
-  },
-  /**
-   * @description Lozenge type (fill or outline)
-   */
-  fill: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * @description Lozenge removable
-   */
-  removable: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * @description avatar image url
-   */
-  url: {
-    type: String,
-    default: '',
-  },
-  /**
-   * @description handler if the lozenge is visible
-   */
-  visible: {
-    type: Boolean,
-    default: true,
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-};
-
-export type LozengePropTypes = ExtractPropTypes<typeof lozengePropTypes>;
-export const removeEmitTypes = {
-  onRemove: (evt: MouseEvent): evt is MouseEvent => evt instanceof MouseEvent,
-};
-export type RemoveEmitTypes = typeof removeEmitTypes;
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+export const LOZENGE_TONE = ['plain', 'pending', 'information', 'success', 'danger', 'neutral', 'caution'] as const;
+
+export const lozengePropTypes = {
+  /**
+   * @description Lozenge Label
+   */
+  label: {
+    type: String,
+    default: 'label',
+  },
+  /**
+   * @description Lozenge tone
+   */
+  tone: {
+    type: String as PropType<(typeof LOZENGE_TONE)[number]>,
+    validator: (value: (typeof LOZENGE_TONE)[number]) => LOZENGE_TONE.includes(value),
+    default: 'plain',
+  },
+  /**
+   * @description Lozenge type (fill or outline)
+   */
+  fill: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * @description Lozenge removable
+   */
+  removable: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * @description avatar image url
+   */
+  url: {
+    type: String,
+    default: '',
+  },
+  /**
+   * @description handler if the lozenge is visible
+   */
+  visible: {
+    type: Boolean,
+    default: true,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export type LozengePropTypes = ExtractPropTypes<typeof lozengePropTypes>;
+export const removeEmitTypes = {
+  onRemove: (evt: MouseEvent): evt is MouseEvent => evt instanceof MouseEvent,
+};
+export type RemoveEmitTypes = typeof removeEmitTypes;

package/src/components/modal/modal.ts

@@ -1,45 +1,45 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-const MODAL_SIZE = ['sm', 'md', 'lg', 'xl'] as const;
-
-export const modalPropTypes = {
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-  title: {
-    type: String,
-    default: '',
-  },
-  closeButtonX: {
-    type: Boolean,
-    default: true,
-  },
-  contentPadding: {
-    type: Boolean,
-    default: true,
-  },
-  hasFooter: {
-    type: Boolean,
-    default: true,
-  },
-  size: {
-    type: String as PropType<(typeof MODAL_SIZE)[number]>,
-    validator: (value: (typeof MODAL_SIZE)[number]) => MODAL_SIZE.includes(value),
-    default: 'md',
-  },
-  staticBackdrop: {
-    type: Boolean,
-    default: false,
-  },
-};
-
-export type ModalPropTypes = ExtractPropTypes<typeof modalPropTypes>;
-
-export const modalEmitTypes = {
-  'update:modelValue': (value: boolean) => value,
-};
-
-export type ModalEmitTypes = typeof modalEmitTypes;
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+const MODAL_SIZE = ['sm', 'md', 'lg', 'xl'] as const;
+
+export const modalPropTypes = {
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  closeButtonX: {
+    type: Boolean,
+    default: true,
+  },
+  contentPadding: {
+    type: Boolean,
+    default: true,
+  },
+  hasFooter: {
+    type: Boolean,
+    default: true,
+  },
+  size: {
+    type: String as PropType<(typeof MODAL_SIZE)[number]>,
+    validator: (value: (typeof MODAL_SIZE)[number]) => MODAL_SIZE.includes(value),
+    default: 'md',
+  },
+  staticBackdrop: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export type ModalPropTypes = ExtractPropTypes<typeof modalPropTypes>;
+
+export const modalEmitTypes = {
+  'update:modelValue': (value: boolean) => value,
+};
+
+export type ModalEmitTypes = typeof modalEmitTypes;

package/src/components/progress-bar/progress-bar.ts

@@ -1,39 +1,39 @@
-import { PropType, ExtractPropTypes } from 'vue';
-
-const PROGRESS_BAR_SIZES = ['xs', 'sm', 'lg'] as const;
-
-export const progressBarPropTypes = {
-  size: {
-    type: String as PropType<(typeof PROGRESS_BAR_SIZES)[number]>,
-    validator: (value: (typeof PROGRESS_BAR_SIZES)[number]) => PROGRESS_BAR_SIZES.includes(value),
-    default: 'lg',
-  },
-  label: {
-    type: Boolean,
-    default: true,
-  },
-  value: {
-    type: Number,
-    default: 0,
-    validator(value: number, props: { max: number }) {
-      if (value < 0 || value > props.max) {
-        console.error(`Invalid prop: "value" (${value}) must be between 0 and ${props.max}.`);
-        return false;
-      }
-      return true;
-    },
-  },
-  max: {
-    type: Number,
-    default: 100,
-    validator(value: number) {
-      if (value <= 0 || value > 100) {
-        console.error('Invalid prop: "max" must be between 1 and 100.');
-        return false;
-      }
-      return true;
-    },
-  },
-};
-
-export type ProgressBarPropTypes = ExtractPropTypes<typeof progressBarPropTypes>;
+import { PropType, ExtractPropTypes } from 'vue';
+
+const PROGRESS_BAR_SIZES = ['xs', 'sm', 'lg'] as const;
+
+export const progressBarPropTypes = {
+  size: {
+    type: String as PropType<(typeof PROGRESS_BAR_SIZES)[number]>,
+    validator: (value: (typeof PROGRESS_BAR_SIZES)[number]) => PROGRESS_BAR_SIZES.includes(value),
+    default: 'lg',
+  },
+  label: {
+    type: Boolean,
+    default: true,
+  },
+  value: {
+    type: Number,
+    default: 0,
+    validator(value: number, props: { max: number }) {
+      if (value < 0 || value > props.max) {
+        console.error(`Invalid prop: "value" (${value}) must be between 0 and ${props.max}.`);
+        return false;
+      }
+      return true;
+    },
+  },
+  max: {
+    type: Number,
+    default: 100,
+    validator(value: number) {
+      if (value <= 0 || value > 100) {
+        console.error('Invalid prop: "max" must be between 1 and 100.');
+        return false;
+      }
+      return true;
+    },
+  },
+};
+
+export type ProgressBarPropTypes = ExtractPropTypes<typeof progressBarPropTypes>;

package/src/components/radio/radio.ts

@@ -1,42 +1,42 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-export const radioPropTypes = {
-  id: {
-    type: String,
-    required: true,
-  },
-  modelValue: {
-    type: [String, Number, Boolean],
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  value: {
-    type: [String, Number, Boolean],
-    required: true,
-  },
-  description: {
-    type: String,
-  },
-  bordered: {
-    type: Boolean,
-    default: false,
-  },
-  fullWidth: {
-    type: Boolean,
-    default: false,
-  }
-};
-
-export const radioEmitTypes = ['update:modelValue'];
-
-export type RadioPropTypes = ExtractPropTypes<typeof radioPropTypes>;
-
-export type RadioEmitTypes = typeof radioEmitTypes;
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+export const radioPropTypes = {
+  id: {
+    type: String,
+    required: true,
+  },
+  modelValue: {
+    type: [String, Number, Boolean],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  value: {
+    type: [String, Number, Boolean],
+    required: true,
+  },
+  description: {
+    type: String,
+  },
+  bordered: {
+    type: Boolean,
+    default: false,
+  },
+  fullWidth: {
+    type: Boolean,
+    default: false,
+  }
+};
+
+export const radioEmitTypes = ['update:modelValue'];
+
+export type RadioPropTypes = ExtractPropTypes<typeof radioPropTypes>;
+
+export type RadioEmitTypes = typeof radioEmitTypes;

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

@@ -105,5 +105,7 @@ export const selectLadderizedEmitTypes = {
   'update:modelValue': (_value: unknown) => true,
 };
 
+export type SelectLadderizedEmitFn = (event: string, ...args: unknown[]) => void;
+
 export type SelectLadderizedPropTypes = ExtractPropTypes<typeof selectLadderizedPropTypes>;
 export type SelectLadderizedEmitTypes = typeof selectLadderizedEmitTypes;

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

@@ -90,7 +90,7 @@ 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 { selectLadderizedPropTypes, selectLadderizedEmitTypes, SelectLadderizedEmitFn } from './select-ladderized';
 import { useSelectLadderized } from './use-select-ladderized';
 
 const props = defineProps(selectLadderizedPropTypes);
@@ -108,5 +108,5 @@ const {
   handleSearch,
   handleClear,
   handleOptionsToggle,
-} = useSelectLadderized(props, emit);
+} = useSelectLadderized(props, emit as SelectLadderizedEmitFn);
 </script>

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

@@ -55,23 +55,70 @@ export const useSelectLadderized = (
 
   const handleSelectedLadderizedItem = (selectedItems: string[], selectedItem?: MenuListType) => {
     wasCleared.value = false;
+
+    // If the selectedItems is a single value (leaf from search), reconstruct the full path
+    let fullPath: string[] | null = null;
+
+    if (selectedItems.length === 1) {
+      // Find the full path from root to leaf
+      fullPath = findPathToValue(ladderizedSelectOptions.value, selectedItems[0]);
+
+      if (fullPath) {
+        // Traverse the tree by path, always matching the next text in the sublevel
+        let currentLevel = ladderizedSelectOptions.value;
+        const valuePath: (string | number)[] = [];
+
+        for (const text of fullPath) {
+          const found = currentLevel.find((item) => item.text === text);
+
+          if (found) {
+            valuePath.push(found.value);
+            currentLevel = found.sublevel || [];
+          } else {
+            break;
+          }
+        }
+
+        ladderizedSelectModel.value = valuePath.map(String);
+        inputText.value = fullPath.join(' > ');
+
+        // Find the actual item object for the last value in the path
+        let leafItem: MenuListType | undefined = undefined;
+        let leafLevel = ladderizedSelectOptions.value;
+
+        for (const text of fullPath) {
+          const found = leafLevel.find((item) => item.text === text);
+
+          if (found) {
+            leafItem = found;
+            leafLevel = found.sublevel || [];
+          } else {
+            break;
+          }
+        }
+
+        if (leafItem && isLeafNode(leafItem)) {
+          ladderizedSelectPopperState.value = false;
+        }
+
+        return;
+      }
+    }
+
     ladderizedSelectModel.value = selectedItems;
 
     let itemToCheck = selectedItem;
 
-    // Fallback: if selectedItem is not provided, try to find it from the value
     if (!itemToCheck && selectedItems.length > 0) {
       const findItemByValue = (items: MenuListType[], value: string | number): MenuListType | undefined => {
         for (const item of items) {
           if (item.value === value) return item;
-
           if (item.sublevel) {
             const found = findItemByValue(item.sublevel, value);
 
             if (found) return found;
           }
         }
-
         return undefined;
       };
 
@@ -122,6 +169,7 @@ export const useSelectLadderized = (
       if (wasCleared.value) {
         inputText.value = '';
         wasCleared.value = false;
+
         return;
       }
 
@@ -133,7 +181,9 @@ export const useSelectLadderized = (
 
         for (const value of newVal) {
           const found = currentLevel.find((item) => item.value === value);
+
           if (!found) break;
+
           pathTexts.push(found.text);
           currentLevel = found.sublevel || [];
         }

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

@@ -142,7 +142,7 @@ export const multiSelectPropTypes = {
 export const multiSelectEmitTypes = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   'update:modelValue': (_value: unknown) => true,
-  'update:search': (value: string) => typeof value === 'string',
+  'update:searchValue': (value: string) => typeof value === 'string',
   'infinite-scroll-trigger': Boolean,
 };