design-system-next 2.11.0 → 2.11.5

package/src/components/button/button-dropdown/button-dropdown.ts

@@ -1,7 +1,7 @@
-import type { ExtractPropTypes, PropType } from "vue";
-import { buttonPropTypes } from "../button";
-import type { MenuListType } from "@/components/list/list";
-import { PLACEMENTS_TYPES } from "@/components/dropdown/dropdown";
+import type { ExtractPropTypes, PropType } from 'vue';
+import { buttonPropTypes } from '../button';
+import type { MenuListType } from '@/components/list/list';
+import { PLACEMENTS_TYPES } from '@/components/dropdown/dropdown';
 
 const BUTTON_DROPDOWN_VARIANTS = ['primary', 'secondary'] as const;
 const BUTTON_DROPDOWN_TONES = ['neutral', 'success'] as const;
@@ -13,22 +13,20 @@ export const buttonDropdownProps = {
     default: [],
   },
   ...buttonPropTypes, // Inherit button properties
-  /**
-   * @description Button tone
-   */
   tone: {
     type: String as PropType<(typeof BUTTON_DROPDOWN_TONES)[number]>,
     validator: (value: (typeof BUTTON_DROPDOWN_TONES)[number]) => BUTTON_DROPDOWN_TONES.includes(value),
     default: 'neutral',
   },
-  /**
-   * @description Button Dropdown Variant
-   */
   variant: {
     type: String as PropType<(typeof BUTTON_DROPDOWN_VARIANTS)[number]>,
     validator: (value: (typeof BUTTON_DROPDOWN_VARIANTS)[number]) => BUTTON_DROPDOWN_VARIANTS.includes(value),
     default: 'primary',
   },
+  dropdownId: {
+    type: String,
+    required: true,
+  },
   menuList: {
     type: Array as PropType<MenuListType[] | string[] | Record<string, unknown>[]>,
     required: true,
@@ -47,10 +45,10 @@ export const buttonDropdownProps = {
     type: String,
     default: 'fit-content',
   },
-  dropdownId: {
+  popperInnerWidth: {
     type: String,
-    required: true,
-  }
+    default: 'unset',
+  },
 };
 
 export const buttonDropdownEmits = ['click', 'update:modelValue'];

package/src/components/button/button-dropdown/button-dropdown.vue

@@ -1,17 +1,28 @@
 <template>
-  <div class="spr-flex spr-flex-row spr-h-fit">
-    <spr-button v-bind="props" :class="buttonDropdownClasses.mainButtonClasses" @click="event => emits('click', event)">
+  <div class="spr-flex spr-h-fit spr-flex-row">
+    <spr-button
+      v-bind="props"
+      :class="buttonDropdownClasses.mainButtonClasses"
+      @click="(event) => emits('click', event)"
+    >
       <slot />
     </spr-button>
-    <spr-dropdown 
-      :id="props.dropdownId" 
-      v-model="selectedMenu" 
-      :menu-list="menuList" 
-      :width="props.width" 
+    <spr-dropdown
+      :id="props.dropdownId"
+      v-model="selectedMenu"
+      :menu-list="menuList"
+      :width="props.width"
       :popper-width="props.popperWidth"
+      :popper-inner-width="props.popperInnerWidth"
+      :placement="props.placement"
       no-check-in-list
     >
-      <spr-button v-bind="props" :fullwidth="false" :has-icon="true" :class="buttonDropdownClasses.dropdownButtonClasses">
+      <spr-button
+        v-bind="props"
+        :fullwidth="false"
+        :has-icon="true"
+        :class="buttonDropdownClasses.dropdownButtonClasses"
+      >
         <icon icon="ph:caret-down" />
       </spr-button>
     </spr-dropdown>
@@ -19,14 +30,16 @@
 </template>
 
 <script setup lang="ts">
-import SprButton from "@/components/button/button.vue";
-import SprDropdown from "@/components/dropdown/dropdown.vue";
-import { Icon } from "@iconify/vue";
-import { buttonDropdownEmits, buttonDropdownProps } from "./button-dropdown";
-import { useButtonDropdown } from "./use-button-dropdown";
+import { Icon } from '@iconify/vue';
+
+import { buttonDropdownEmits, buttonDropdownProps } from './button-dropdown';
+import { useButtonDropdown } from './use-button-dropdown';
+
+import SprButton from '@/components/button/button.vue';
+import SprDropdown from '@/components/dropdown/dropdown.vue';
 
 const props = defineProps(buttonDropdownProps);
-const emits = defineEmits(buttonDropdownEmits)
+const emits = defineEmits(buttonDropdownEmits);
 
 const { selectedMenu, buttonDropdownClasses } = useButtonDropdown(props, emits);
 </script>

package/src/components/button/button-dropdown/use-button-dropdown.ts

@@ -1,36 +1,35 @@
-import { computed, toRefs, type SetupContext } from "vue";
-import type { ButtonDropdownEmitTypes, ButtonDropdownPropTypes } from "./button-dropdown";
-import classNames from "classnames";
+import { computed, toRefs, type SetupContext } from 'vue';
 import { useVModel } from '@vueuse/core';
 
-export const useButtonDropdown = (props: ButtonDropdownPropTypes, emits: SetupContext<ButtonDropdownEmitTypes>['emit']) => {
+import classNames from 'classnames';
+
+import type { ButtonDropdownEmitTypes, ButtonDropdownPropTypes } from './button-dropdown';
+
+export const useButtonDropdown = (
+  props: ButtonDropdownPropTypes,
+  emits: SetupContext<ButtonDropdownEmitTypes>['emit'],
+) => {
   const { tone, variant, disabled } = toRefs(props);
 
-  const selectedMenu = useVModel(props, "modelValue", emits);
+  const selectedMenu = useVModel(props, 'modelValue', emits);
 
   const buttonDropdownClasses = computed(() => {
-    const mainButtonClasses = classNames(
-      'spr-rounded-r-none spr-border-r',
-      {
-        '!spr-border-solid spr-border-l-0 spr-border-t-0 spr-border-b-0': disabled.value && variant.value !== "secondary",
-        'spr-border-r-kangkong-800': tone.value === "success" && !disabled.value,
-        'spr-border-r-mushroom-200': tone.value !== "success" || (tone.value === "success" && disabled.value),
-      }
-    );
-
-    const dropdownButtonClasses = classNames(
-      'spr-rounded-l-none', {
-        'spr-border-solid spr-border-l-0': variant.value === "secondary",
-        'spr-border-l-transparent': variant.value !== "secondary",
-      }
-    );
-
-    return {mainButtonClasses, dropdownButtonClasses};
+    const mainButtonClasses = classNames('spr-rounded-r-none spr-border-r', {
+      '!spr-border-solid spr-border-l-0 spr-border-t-0 spr-border-b-0': disabled.value && variant.value !== 'secondary',
+      'spr-border-r-kangkong-800': tone.value === 'success' && !disabled.value,
+      'spr-border-r-mushroom-200': tone.value !== 'success' || (tone.value === 'success' && disabled.value),
+    });
+
+    const dropdownButtonClasses = classNames('spr-rounded-l-none', {
+      'spr-border-solid spr-border-l-0': variant.value === 'secondary',
+      'spr-border-l-transparent': variant.value !== 'secondary',
+    });
+
+    return { mainButtonClasses, dropdownButtonClasses };
   });
 
   return {
     selectedMenu,
-    buttonDropdownClasses
-  }
+    buttonDropdownClasses,
+  };
 };
-

package/src/components/dropdown/dropdown.ts

@@ -31,7 +31,9 @@ export const dropdownPropTypes = {
     required: true,
   },
   modelValue: {
-    type: [String, Number, Object, Array] as PropType<string | number | Record<string, unknown> | (string | number | Record<string, unknown>)[]>,
+    type: [String, Number, Object, Array] as PropType<
+      string | number | Record<string, unknown> | (string | number | Record<string, unknown>)[]
+    >,
     default: () => [],
   },
   menuList: {
@@ -80,6 +82,10 @@ export const dropdownPropTypes = {
     type: String,
     default: '100%',
   },
+  popperInnerWidth: {
+    type: String,
+    default: 'unset',
+  },
   popperStrategy: {
     type: String,
     validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),
@@ -100,7 +106,7 @@ export const dropdownPropTypes = {
   noCheckInList: {
     type: Boolean,
     default: false,
-  }
+  },
 };
 
 export const dropdownEmitTypes = {

package/src/components/dropdown/dropdown.vue

@@ -36,6 +36,9 @@
           (!props.ladderized || isLadderizedSearch) && 'spr-p-2',
           'spr-grid spr-max-h-[300px] spr-gap-0.5 spr-overflow-y-auto spr-overflow-x-hidden',
         ]"
+        :style="{
+          width: props.popperInnerWidth,
+        }"
       >
         <template v-if="dropdownMenuList.length > 0">
           <spr-list

package/src/components/list/list.ts

@@ -13,10 +13,10 @@ export type MenuListType = {
   group?: string;
   disabled?: boolean;
   _originalObject?: Record<string, unknown>; // Store original object reference when mapping complex objects
-  icon?: string, // String value for Iconify
-  iconColor?: string,
-  textColor?: string,
-  onClickFn?: () => void,
+  icon?: string; // String value for Iconify
+  iconColor?: string;
+  textColor?: string;
+  onClickFn?: () => void;
 };
 
 export type GroupedMenuListType = {
@@ -29,6 +29,10 @@ export const listPropTypes = {
     type: Array as PropType<MenuListType[]>,
     default: [],
   },
+  searchValue: {
+    type: String,
+    default: '',
+  },
   menuList: {
     type: Array as PropType<MenuListType[]>,
     required: true,
@@ -64,14 +68,23 @@ export const listPropTypes = {
     type: Boolean,
     default: false,
   },
+  disabledLocalSearch: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
   noCheck: {
     type: Boolean,
     default: false,
-  }
+  },
 };
 
 export const listEmitTypes = {
   'update:modelValue': (value: MenuListType[]) => value,
+  'update:search': (value: string) => typeof value === 'string',
 };
 
 export type ListPropTypes = ExtractPropTypes<typeof listPropTypes>;

package/src/components/list/list.vue

@@ -1,17 +1,12 @@
 <template>
   <div class="spr-font-main">
     <div v-if="props.searchableMenu" class="spr-mb-3 spr-grid spr-gap-3">
-      <spr-input
-        v-model="searchText"
-        :placeholder="props.searchableMenuPlaceholder"
-        autocomplete="off"
-        @keyup="handleSearch"
-      />
+      <spr-input-search v-model="searchText" :placeholder="props.searchableMenuPlaceholder" autocomplete="off" />
 
       <div v-if="isParentMenu" class="spr-background-color-surface spr-h-[1px]"></div>
     </div>
 
-    <template v-if="props.groupItemsBy">
+    <template v-if="props.groupItemsBy && groupedMenuList.length > 0">
       <div class="spr-grid spr-gap-2">
         <div v-for="(list, listIndex) in groupedMenuList" :key="listIndex" class="spr-grid spr-gap-0.5">
           <div
@@ -29,14 +24,11 @@
             @click="handleSelectedItem(item)"
           >
             <spr-checkbox v-if="props.multiSelect" :checked="isItemSelected(item)" />
-            <div :class="[item.textColor, 'spr-flex spr-flex-row spr-gap-size-spacing-3xs spr-items-center']">
-              <span v-if="item.icon" :class="[item.iconColor, 'spr-mt-[2px]']"><icon :icon="item.icon" width="20px" height="20px" /></span>
-              <div class="spr-flex spr-flex-auto spr-flex-col spr-justify-start">
-                <span class="spr-text-left spr-text-xs">{{ item.text }}</span>
-                <span v-if="item.subtext" class="spr-body-xs-regular spr-text-color-base spr-text-left">
-                  {{ item.subtext }}
-                </span>
-              </div>
+            <div class="spr-flex spr-flex-auto spr-flex-col spr-justify-start">
+              <span class="spr-text-left spr-text-xs">{{ item.text }}</span>
+              <span v-if="item.subtext" class="spr-body-xs-regular spr-text-color-base spr-text-left">{{
+                item.subtext
+              }}</span>
             </div>
             <Icon
               v-if="isItemSelected(item) && !props.multiSelect"
@@ -52,7 +44,7 @@
         </div>
       </div>
     </template>
-    <template v-else>
+    <template v-if="localizedMenuList.length > 0">
       <div
         v-for="(item, index) in localizedMenuList"
         :key="index"
@@ -60,27 +52,24 @@
         @click="handleSelectedItem(item)"
       >
         <spr-checkbox v-if="props.multiSelect" :disabled="item.disabled" :checked="isItemSelected(item)" />
-        <div :class="[item.textColor, 'spr-flex spr-flex-row spr-gap-size-spacing-3xs spr-items-center']">
-          <span v-if="item.icon" :class="[item.iconColor, 'spr-mt-[2px]']"><icon :icon="item.icon" width="20px" height="20px" /></span>
-          <div
+        <div
+          :class="[
+            'spr-flex spr-flex-auto spr-flex-col spr-justify-start',
+            { 'spr-text-color-disabled': item.disabled },
+          ]"
+        >
+          <span class="spr-text-left spr-text-xs">{{ item.text }}</span>
+          <span
+            v-if="item.subtext"
             :class="[
-              'spr-flex spr-flex-auto spr-flex-col spr-justify-start',
+              'spr-body-xs-regular spr-text-color-base spr-text-left',
               { 'spr-text-color-disabled': item.disabled },
             ]"
+            >{{ item.subtext }}</span
           >
-            <span class="spr-text-left spr-text-xs">{{ item.text }}</span>
-            <span
-              v-if="item.subtext"
-              :class="[
-                'spr-body-xs-regular spr-text-color-base spr-text-left',
-                { 'spr-text-color-disabled': item.disabled },
-              ]"
-              >{{ item.subtext }}</span
-            >
-          </div>
         </div>
         <Icon
-          v-if="isItemSelected(item) && !props.multiSelect && !props.noCheck"
+          v-if="isItemSelected(item) && !props.multiSelect"
           class="spr-text-color-brand-base spr-w-[1.39em]"
           icon="ph:check"
         />
@@ -91,6 +80,13 @@
         />
       </div>
     </template>
+
+    <template v-else>
+      <div v-if="props.loading" class="spr-skeletal-loader spr-h-8 spr-w-full spr-rounded-md" />
+      <div v-else 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>
 
@@ -101,7 +97,7 @@ import { listPropTypes, listEmitTypes } from './list';
 import { useList } from './use-list';
 
 import SprCheckbox from '@/components/checkbox/checkbox.vue';
-import SprInput from '@/components/input/input.vue';
+import SprInputSearch from '@/components/input/input-search/input-search.vue';
 
 const props = defineProps(listPropTypes);
 const emit = defineEmits(listEmitTypes);
@@ -113,7 +109,6 @@ const {
   isParentMenu,
   isItemSelected,
   getListItemClasses,
-  handleSearch,
   handleSelectedItem,
 } = useList(props, emit);
 </script>

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

@@ -12,8 +12,10 @@ interface ListClasses {
 
 export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>['emit']) => {
   const selectedItems = useVModel(props, 'modelValue', emit);
+  const searchString = useVModel(props, 'searchValue', emit);
 
-  const { menuList, menuLevel, groupItemsBy, multiSelect, preSelectedItems, noCheck } = toRefs(props);
+  const { menuList, menuLevel, groupItemsBy, multiSelect, preSelectedItems, disabledLocalSearch, noCheck } =
+    toRefs(props);
 
   const listClasses: ComputedRef<ListClasses> = computed(() => {
     const listItemClasses = classNames(
@@ -29,6 +31,7 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
   const searchText = ref<string>('');
 
   const localizedMenuList = ref<MenuListType[]>([]);
+  const apiSelectedList = ref<MenuListType[]>([]);
   const groupedMenuList = ref<GroupedMenuListType[]>([
     {
       groupLabel: 'no-group',
@@ -103,6 +106,15 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
       });
     }
 
+    const previousSelected = apiSelectedList.value.some((selectedItem) => {
+      return selectedItem.value === item.value;
+    });
+
+    if (previousSelected) {
+      handleSelectedItem(item);
+      return true;
+    }
+
     return false;
   };
 
@@ -344,12 +356,14 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
 
       if (index === -1) {
         // Add item if not already selected
-        selectedItems.value = [...selectedItems.value, item];
+        selectedItems.value = disabledLocalSearch.value
+          ? trackNewlySelectedItems(item, false)
+          : [...selectedItems.value, item];
       } else {
         // Remove item if already selected
         const updatedItems = [...selectedItems.value];
         updatedItems.splice(index, 1);
-        selectedItems.value = updatedItems;
+        selectedItems.value = disabledLocalSearch.value ? trackNewlySelectedItems(item, true) : updatedItems;
       }
     } else {
       // For single-select, simply replace the selection
@@ -359,6 +373,25 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
   };
   // #endregion - Helper Methods
 
+  const trackNewlySelectedItems = (selectedItem: MenuListType, isDeselected: boolean) => {
+    const exists = apiSelectedList.value.some((existing) => {
+      return existing.value === selectedItem.value;
+    });
+
+    if (!exists) {
+      apiSelectedList.value.push(selectedItem);
+    } else {
+      const index = apiSelectedList.value.findIndex((existing) => {
+        return existing.value === selectedItem.value;
+      });
+
+      if (index !== -1 && isDeselected) {
+        apiSelectedList.value.splice(index, 1);
+      }
+    }
+    return apiSelectedList.value;
+  };
+
   watch(
     menuList,
     () => {
@@ -371,6 +404,30 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
     { deep: true },
   );
 
+  watch(searchText, () => {
+    if (disabledLocalSearch.value) {
+      searchString.value = searchText.value;
+      return;
+    }
+    handleSearch();
+  });
+
+  watch(
+    apiSelectedList,
+    () => {
+      apiSelectedList.value.forEach((prevSelected) => {
+        const selected = selectedItems.value.some((item) => {
+          return item.value === prevSelected.value;
+        });
+
+        if (!selected) {
+          selectedItems.value.push(prevSelected);
+        }
+      });
+    },
+    { deep: true },
+  );
+
   onMounted(() => {
     setMenuList();
     setPreSelectedItems();
@@ -381,10 +438,12 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
     listClasses,
     localizedMenuList,
     groupedMenuList,
+    apiSelectedList,
     isParentMenu,
     isItemSelected,
     getListItemClasses,
     handleSearch,
     handleSelectedItem,
+    trackNewlySelectedItems,
   };
 };

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

@@ -35,6 +35,10 @@ export const multiSelectPropTypes = {
     type: Array as PropType<(string | number | Record<string, unknown>)[]>,
     default: () => [],
   },
+  searchValue: {
+    type: String,
+    default: '',
+  },
   options: {
     type: Array as PropType<MenuListType[] | string[] | Record<string, unknown>[]>,
     required: true,
@@ -121,11 +125,25 @@ export const multiSelectPropTypes = {
     type: Boolean,
     default: false,
   },
+  searchable: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  disabledLocalSearch: {
+    type: Boolean,
+    default: false,
+  },
 };
 
 export const multiSelectEmitTypes = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   'update:modelValue': (_value: unknown) => true,
+  'update:search': (value: string) => typeof value === 'string',
+  'infinite-scroll-trigger': Boolean,
 };
 
 export type MultiSelectPropTypes = ExtractPropTypes<typeof multiSelectPropTypes>;

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

@@ -119,22 +119,23 @@
       </div>
 
       <template #popper>
-        <div 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="multiSelectOptions.length > 0">
-            <spr-list
-              v-model="multiSelectedListItems"
-              :menu-list="multiSelectOptions"
-              :group-items-by="props.groupItemsBy"
-              :pre-selected-items="Array.isArray(multiSelectModel) ? multiSelectModel.flat() : [multiSelectModel]"
-              multi-select
-              @update:model-value="handleMultiSelectedItem"
-            />
-          </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
+          ref="multipleSelectPopperRef"
+          class="spr-grid spr-max-h-[300px] spr-gap-0.5 spr-overflow-y-auto spr-overflow-x-hidden spr-p-2"
+        >
+          <spr-list
+            v-model="multiSelectedListItems"
+            v-model:search-value="searchInput"
+            :searchable-menu="props.searchable"
+            searchable-menu-placeholder="Search"
+            :menu-list="multiSelectOptions"
+            :group-items-by="props.groupItemsBy"
+            :pre-selected-items="Array.isArray(multiSelectModel) ? multiSelectModel.flat() : [multiSelectModel]"
+            :loading="props.loading"
+            multi-select
+            :disabled-local-search="props.disabledLocalSearch"
+            @update:model-value="handleMultiSelectedItem"
+          />
         </div>
       </template>
     </Menu>
@@ -167,6 +168,8 @@ const {
   multiSelectedListItems,
   inputText,
   isMultiSelectPopperDisabled,
+  searchInput,
+  multipleSelectPopperRef,
   handleMultiSelectedItem,
   handleChippedRemoveItem,
   handleClear,