design-system-next 2.9.6 → 2.9.7

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

@@ -1,164 +1,164 @@
-import { ref, toRefs, computed, watch } from 'vue';
-import { useVModel, useDebounceFn, onClickOutside } from '@vueuse/core';
-
-import type { SelectLadderizedPropTypes } from './select-ladderized';
-
-import type { MenuListType } from '@/components/list/list';
-
-export const useSelectLadderized = (
-  props: SelectLadderizedPropTypes,
-  emit: (event: string, ...args: unknown[]) => void,
-) => {
-  const { options, disabled } = toRefs(props);
-
-  const ladderizedClasses = computed(() => ({
-    baseClasses: 'spr-flex spr-flex-col spr-gap-size-spacing-4xs',
-    labelClasses: 'spr-body-sm-regular spr-text-color-strong spr-block',
-  }));
-
-  // Popper Variables
-  const ladderizedSelectPopperState = ref(false);
-  const ladderizedSelectRef = ref(null);
-  const isLadderizedSelectPopperDisabled = computed(() => disabled.value);
-
-  // Ladderized Select Model
-  const ladderizedSelectModel = useVModel(props, 'modelValue', emit);
-  const ladderizedSelectOptions = computed(() => options.value);
-
-  // Input Variables
-  const inputText = ref<string>('');
-  const isSearching = ref(false);
-  const wasCleared = ref(false);
-
-  const isLeafNode = (item: MenuListType): boolean => {
-    return !item.sublevel || item.sublevel.length === 0;
-  };
-
-  // Helper to find the path to a selected value in the menu tree
-  const findPathToValue = (items: MenuListType[], value: string | number, path: string[] = []): string[] | null => {
-    for (const item of items) {
-      const newPath = [...path, item.text];
-
-      if (item.value === value) {
-        return newPath;
-      }
-
-      if (item.sublevel) {
-        const result = findPathToValue(item.sublevel, value, newPath);
-
-        if (result) return result;
-      }
-    }
-
-    return null;
-  };
-
-  const handleSelectedLadderizedItem = (selectedItems: string[], selectedItem?: MenuListType) => {
-    wasCleared.value = false;
-    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;
-      };
-
-      itemToCheck = findItemByValue(ladderizedSelectOptions.value, selectedItems[selectedItems.length - 1]);
-    }
-
-    if (itemToCheck) {
-      const path = findPathToValue(ladderizedSelectOptions.value, itemToCheck.value);
-
-      inputText.value = path ? path.join(' > ') : itemToCheck.text || '';
-
-      if (isLeafNode(itemToCheck)) {
-        ladderizedSelectPopperState.value = false;
-      }
-    } else if (selectedItems.length === 0 && !wasCleared.value) {
-      inputText.value = '';
-    }
-  };
-
-  const handleSearch = () => {
-    isSearching.value = true;
-
-    debouncedEmitSearch();
-  };
-
-  const debouncedEmitSearch = useDebounceFn(() => {
-    // Optionally emit search event here if needed
-  }, 300);
-
-  const handleClear = () => {
-    wasCleared.value = true;
-
-    inputText.value = '';
-
-    emit('update:modelValue', []);
-  };
-
-  const handleOptionsToggle = () => {
-    ladderizedSelectPopperState.value = true;
-
-    isSearching.value = false;
-  };
-
-  // Watch for changes in modelValue to update inputText
-  watch(
-    () => ladderizedSelectModel.value,
-    (newVal) => {
-      if (wasCleared.value) {
-        inputText.value = '';
-        wasCleared.value = false;
-        return;
-      }
-
-      if (Array.isArray(newVal) && newVal.length > 0) {
-        // Treat the array as a single path for ladderized select
-        let currentLevel = ladderizedSelectOptions.value;
-
-        const pathTexts: string[] = [];
-
-        for (const value of newVal) {
-          const found = currentLevel.find((item) => item.value === value);
-          if (!found) break;
-          pathTexts.push(found.text);
-          currentLevel = found.sublevel || [];
-        }
-
-        inputText.value = pathTexts.join(' > ');
-      }
-    },
-    { immediate: true },
-  );
-
-  onClickOutside(ladderizedSelectRef, () => {
-    ladderizedSelectPopperState.value = false;
-  });
-
-  return {
-    ladderizedClasses,
-    ladderizedSelectPopperState,
-    ladderizedSelectRef,
-    ladderizedSelectOptions,
-    isLadderizedSelectPopperDisabled,
-    ladderizedSelectModel,
-    inputText,
-    handleSelectedLadderizedItem,
-    handleSearch,
-    handleClear,
-    handleOptionsToggle,
-  };
-};
+import { ref, toRefs, computed, watch } from 'vue';
+import { useVModel, useDebounceFn, onClickOutside } from '@vueuse/core';
+
+import type { SelectLadderizedPropTypes } from './select-ladderized';
+
+import type { MenuListType } from '@/components/list/list';
+
+export const useSelectLadderized = (
+  props: SelectLadderizedPropTypes,
+  emit: (event: string, ...args: unknown[]) => void,
+) => {
+  const { options, disabled } = toRefs(props);
+
+  const ladderizedClasses = computed(() => ({
+    baseClasses: 'spr-flex spr-flex-col spr-gap-size-spacing-4xs',
+    labelClasses: 'spr-body-sm-regular spr-text-color-strong spr-block',
+  }));
+
+  // Popper Variables
+  const ladderizedSelectPopperState = ref(false);
+  const ladderizedSelectRef = ref(null);
+  const isLadderizedSelectPopperDisabled = computed(() => disabled.value);
+
+  // Ladderized Select Model
+  const ladderizedSelectModel = useVModel(props, 'modelValue', emit);
+  const ladderizedSelectOptions = computed(() => options.value);
+
+  // Input Variables
+  const inputText = ref<string>('');
+  const isSearching = ref(false);
+  const wasCleared = ref(false);
+
+  const isLeafNode = (item: MenuListType): boolean => {
+    return !item.sublevel || item.sublevel.length === 0;
+  };
+
+  // Helper to find the path to a selected value in the menu tree
+  const findPathToValue = (items: MenuListType[], value: string | number, path: string[] = []): string[] | null => {
+    for (const item of items) {
+      const newPath = [...path, item.text];
+
+      if (item.value === value) {
+        return newPath;
+      }
+
+      if (item.sublevel) {
+        const result = findPathToValue(item.sublevel, value, newPath);
+
+        if (result) return result;
+      }
+    }
+
+    return null;
+  };
+
+  const handleSelectedLadderizedItem = (selectedItems: string[], selectedItem?: MenuListType) => {
+    wasCleared.value = false;
+    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;
+      };
+
+      itemToCheck = findItemByValue(ladderizedSelectOptions.value, selectedItems[selectedItems.length - 1]);
+    }
+
+    if (itemToCheck) {
+      const path = findPathToValue(ladderizedSelectOptions.value, itemToCheck.value);
+
+      inputText.value = path ? path.join(' > ') : itemToCheck.text || '';
+
+      if (isLeafNode(itemToCheck)) {
+        ladderizedSelectPopperState.value = false;
+      }
+    } else if (selectedItems.length === 0 && !wasCleared.value) {
+      inputText.value = '';
+    }
+  };
+
+  const handleSearch = () => {
+    isSearching.value = true;
+
+    debouncedEmitSearch();
+  };
+
+  const debouncedEmitSearch = useDebounceFn(() => {
+    // Optionally emit search event here if needed
+  }, 300);
+
+  const handleClear = () => {
+    wasCleared.value = true;
+
+    inputText.value = '';
+
+    emit('update:modelValue', []);
+  };
+
+  const handleOptionsToggle = () => {
+    ladderizedSelectPopperState.value = true;
+
+    isSearching.value = false;
+  };
+
+  // Watch for changes in modelValue to update inputText
+  watch(
+    () => ladderizedSelectModel.value,
+    (newVal) => {
+      if (wasCleared.value) {
+        inputText.value = '';
+        wasCleared.value = false;
+        return;
+      }
+
+      if (Array.isArray(newVal) && newVal.length > 0) {
+        // Treat the array as a single path for ladderized select
+        let currentLevel = ladderizedSelectOptions.value;
+
+        const pathTexts: string[] = [];
+
+        for (const value of newVal) {
+          const found = currentLevel.find((item) => item.value === value);
+          if (!found) break;
+          pathTexts.push(found.text);
+          currentLevel = found.sublevel || [];
+        }
+
+        inputText.value = pathTexts.join(' > ');
+      }
+    },
+    { immediate: true },
+  );
+
+  onClickOutside(ladderizedSelectRef, () => {
+    ladderizedSelectPopperState.value = false;
+  });
+
+  return {
+    ladderizedClasses,
+    ladderizedSelectPopperState,
+    ladderizedSelectRef,
+    ladderizedSelectOptions,
+    isLadderizedSelectPopperDisabled,
+    ladderizedSelectModel,
+    inputText,
+    handleSelectedLadderizedItem,
+    handleSearch,
+    handleClear,
+    handleOptionsToggle,
+  };
+};

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

@@ -117,6 +117,10 @@ export const multiSelectPropTypes = {
     type: Boolean,
     default: false,
   },
+  chipped: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export const multiSelectEmitTypes = {

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

@@ -25,38 +25,81 @@
     >
       <div ref="multiSelectRef">
         <div @click="handleOptionsToggle">
-          <spr-input
-            :id="`input-${props.id}`"
-            v-model="inputText"
-            :class="{
-              'spr-cursor-pointer': true,
-            }"
-            :placeholder="props.placeholder"
-            autocomplete="off"
-            :helper-text="props.helperText"
-            :helper-icon="props.helperIcon"
-            :display-helper="props.displayHelper"
-            :active="props.active"
-            :readonly="true"
-            :disabled="props.disabled"
-            :error="props.error"
-          >
-            <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" />
+          <template v-if="props.chipped">
+            <div :class="multiSelectClasses.chippedInputTextBaseClasses">
+              <div ref="chippedInputTextRef" :class="multiSelectClasses.chippedInputTextClasses">
+                <div class="spr-h-auto spr-w-full">
+                  <template v-if="multiSelectedListItems.length > 0">
+                    <template v-for="item in multiSelectedListItems" :key="item.value">
+                      <spr-chips
+                        class="spr-m-1 spr-inline-block"
+                        :label="String(item.text)"
+                        closable
+                        visible
+                        @close="handleChippedRemoveItem(String(item.value))"
+                      />
+                    </template>
+                  </template>
+                  <template v-else>
+                    <span class="spr-placeholder spr-px-3 spr-text-gray-400">{{ props.placeholder }}</span>
+                  </template>
+                </div>
+                <div :class="multiSelectClasses.chippedIconClasses">
+                  <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>
+                </div>
               </div>
-            </template>
+            </div>
+            <div v-if="props.displayHelper" :class="multiSelectClasses.chippedHelperContainerClasses">
+              <div v-if="props.displayHelper" :class="multiSelectClasses.chippedHelperClasses">
+                <slot name="helperMessage">
+                  <Icon v-if="props.helperIcon" :icon="props.helperIcon" width="20px" height="20px" />
+                  <span>{{ props.helperText }}</span>
+                </slot>
+              </div>
+            </div>
+          </template>
+          <template v-else>
+            <spr-input
+              :id="`input-${props.id}`"
+              v-model="inputText"
+              :class="{
+                'spr-cursor-pointer': true,
+              }"
+              :placeholder="props.placeholder"
+              autocomplete="off"
+              :helper-text="props.helperText"
+              :helper-icon="props.helperIcon"
+              :display-helper="props.displayHelper"
+              :active="props.active"
+              :readonly="true"
+              :disabled="props.disabled"
+              :error="props.error"
+            >
+              <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>
 
-            <template #helperMessage>
-              <slot name="helperMessage" />
-            </template>
-          </spr-input>
+              <template #helperMessage>
+                <slot name="helperMessage" />
+              </template>
+            </spr-input>
+          </template>
 
           <!-- Hidden Select for QA automation -->
           <select v-if="multiSelectOptions && multiSelectOptions.length" v-model="multiSelectModel" multiple hidden>
@@ -106,6 +149,7 @@ import 'floating-vue/dist/style.css';
 
 import SprInput from '../../input/input.vue';
 import SprList from '../../list/list.vue';
+import SprChips from '../../chips/chips.vue';
 
 import { multiSelectPropTypes, multiSelectEmitTypes } from './select-multiple';
 
@@ -124,6 +168,7 @@ const {
   inputText,
   isMultiSelectPopperDisabled,
   handleMultiSelectedItem,
+  handleChippedRemoveItem,
   handleClear,
   handleOptionsToggle,
 } = useMultiSelect(props, emit);

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

@@ -1,5 +1,5 @@
 import { ref, toRefs, computed, ComputedRef, onMounted, watch } from 'vue';
-import { onClickOutside, useVModel } from '@vueuse/core';
+import { onClickOutside, useVModel, useFocus } from '@vueuse/core';
 
 import classNames from 'classnames';
 
@@ -10,10 +10,15 @@ import type { MenuListType } from '../../list/list';
 interface MultiSelectClasses {
   baseClasses: string;
   labelClasses: string;
+  chippedInputTextBaseClasses: string;
+  chippedInputTextClasses: string;
+  chippedIconClasses: string;
+  chippedHelperContainerClasses: string;
+  chippedHelperClasses: string;
 }
 
 export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<MultiSelectEmitTypes>['emit']) => {
-  const { displayText, options, disabled, textField, valueField } = toRefs(props);
+  const { displayText, options, textField, valueField, active, disabled, error } = toRefs(props);
 
   const multiSelectClasses: ComputedRef<MultiSelectClasses> = computed(() => {
     const baseClasses = classNames('spr-flex spr-flex-col spr-gap-size-spacing-4xs');
@@ -22,9 +27,66 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
       'spr-text-color-on-fill-disabled': disabled.value,
     });
 
+    const chippedInputTextBaseClasses = classNames(
+      'spr-relative spr-flex spr-items-center spr-min-h-9 spr-rounded-border-radius-md spr-border-[1.5px] spr-border-solid',
+      {
+        'spr-cursor-pointer': !disabled.value,
+
+        // Border State
+        'spr-border-color-weak': !focused.value && !error.value && !disabled.value && !active.value,
+        'spr-border-color-brand-base': !focused.value && active.value,
+        'spr-border-color-danger-base': !focused.value && error.value,
+
+        // Border State Focused
+        'focus: spr-border-kangkong-700': focused.value && !error.value && !disabled.value && !active.value,
+        'focus: spr-border-tomato-600': focused.value && error.value,
+        'focus: spr-border-white-100': focused.value && disabled.value,
+
+        // Disabled State
+        'spr-background-color-disabled spr-cursor-not-allowed spr-border-mushroom-100': disabled.value,
+      },
+    );
+
+    const chippedInputTextClasses = classNames(
+      'spr-flex spr-gap-1 spr-justify-between spr-w-full spr-outline-none spr-ring-0 spr-border-none spr-rounded-border-radius-md spr-font-size-200',
+      'spr-font-size-200 [font-weight:inherit]',
+      'placeholder:spr-text-mushroom-300',
+      {
+        'spr-text-color-strong': !disabled.value,
+
+        // Disabled State
+        'spr-text-color-on-fill-disabled !spr-cursor-not-allowed': disabled.value,
+      },
+    );
+
+    const chippedIconClasses = classNames(
+      'spr-flex spr-items-center spr-justify-center spr-h-inherit spr-px-2 [&>svg]:spr-min-h-4 [&>svg]:spr-min-w-4',
+      {
+        'spr-text-mushroom-300': !error.value,
+        'spr-text-tomato-600': error.value,
+      },
+    );
+
+    const chippedHelperContainerClasses = classNames(
+      'spr-flex spr-flex-row spr-items-start spr-justify-between spr-w-full',
+    );
+
+    const chippedHelperClasses = classNames(
+      'spr-body-sm-regular spr-flex spr-items-center spr-gap-size-spacing-5xs spr-flex-1',
+      {
+        'spr-text-color-danger-base': error.value,
+        'spr-text-color-supporting': !error.value,
+      },
+    );
+
     return {
       baseClasses,
       labelClasses,
+      chippedInputTextBaseClasses,
+      chippedInputTextClasses,
+      chippedIconClasses,
+      chippedHelperContainerClasses,
+      chippedHelperClasses,
     };
   });
 
@@ -39,7 +101,9 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
 
   const inputText = ref<string | number>('');
   const inputTextBackup = ref<string | number>('');
+  const chippedInputTextRef = ref(null);
 
+  const { focused } = useFocus(chippedInputTextRef);
   /**
    * Returns the normalized value of the model as an array for internal use.
    */
@@ -148,6 +212,42 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
     updateMultiSelectedItemsFromValue();
   };
 
+  /**
+   * Removes an item from the multi-select model by its value.
+   * Handles stringified objects and emits the updated model value.
+   */
+  const handleChippedRemoveItem = (itemValue: string) => {
+    let currentValues = Array.isArray(multiSelectModel.value) ? [...multiSelectModel.value] : [multiSelectModel.value];
+
+    currentValues = currentValues.filter((val) => {
+      let valToCompare = val;
+
+      if (typeof valToCompare === 'string' && valToCompare.startsWith('{') && valToCompare.endsWith('}')) {
+        try {
+          valToCompare = JSON.parse(valToCompare);
+        } catch {
+          // ignore
+        }
+      }
+
+      if (typeof itemValue === 'string' && itemValue.startsWith('{') && itemValue.endsWith('}')) {
+        try {
+          itemValue = JSON.parse(itemValue);
+        } catch {
+          // ignore
+        }
+      }
+
+      if (typeof valToCompare === 'object' && typeof itemValue === 'object') {
+        return JSON.stringify(valToCompare) !== JSON.stringify(itemValue);
+      }
+
+      return valToCompare != itemValue;
+    });
+
+    emit('update:modelValue', currentValues);
+  };
+
   /**
    * Updates the selected items in the multi-select based on the current model value.
    * Handles stringified objects and updates the input text accordingly.
@@ -271,6 +371,7 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
     inputText,
     isMultiSelectPopperDisabled,
     handleMultiSelectedItem,
+    handleChippedRemoveItem,
     handleClear,
     handleOptionsToggle,
   };