design-system-next 2.7.24 → 2.7.29

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

@@ -6,8 +6,8 @@ import type { AvatarPropTypes } from './avatar';
 
 interface AvatarClasses {
   baseClasses: string;
-  imageClasses: string;
-  nameInitialsClasses: string;
+  imageContainerClasses: string;
+  initialsContainerClasses: string;
   notificationClasses: string;
   onlineNotificationClasses: string;
 }
@@ -22,20 +22,32 @@ export const useAvatar = (props: AvatarPropTypes) => {
       'spr-background-color spr-border-color-success-base spr-border spr-border-solid': color.value === 'tertiary',
     });
 
-    const imageClasses = classNames(
+    const imageContainerClasses = classNames(
+      'avatar__slot spr-border-color-weak spr-border spr-border-solid',
       'spr-rounded-full spr-object-cover spr-flex spr-items-center spr-justify-center spr-overflow-hidden',
       {
         'spr-h-20 spr-min-w-20 spr-text-[36px]': size.value === '2xl',
         'spr-h-14 spr-min-w-14 spr-font-size-600': size.value === 'xl',
         'spr-h-10 spr-min-w-10 spr-font-size-400': size.value === 'lg',
-        'spr-h-9  spr-min-w-9 spr-font-size-300': size.value === 'md',
-        'spr-h-6  spr-min-w-6 spr-font-size-200': size.value === 'sm',
-        'spr-h-5  spr-min-w-5 spr-text-[10px]': size.value === 'xs',
-        'spr-h-4  spr-min-w-4 spr-text-[10px]': size.value === '2xs',
+        'spr-h-9 spr-min-w-9 spr-font-size-300': size.value === 'md',
+        'spr-h-6 spr-min-w-6 spr-font-size-200': size.value === 'sm',
+        'spr-h-5 spr-min-w-5 spr-text-[10px]': size.value === 'xs',
+        'spr-h-4 spr-min-w-4 spr-text-[10px]': size.value === '2xs',
+      },
+
+      // Image Size
+      {
+        '[&>img]:spr-h-20 [&>img]:spr-w-20 [&>img]:spr-min-h-20 [&>img]:spr-min-w-20': size.value === '2xl',
+        '[&>img]:spr-h-14 [&>img]:spr-w-14 [&>img]:spr-min-h-14 [&>img]:spr-min-w-14': size.value === 'xl',
+        '[&>img]:spr-h-10 [&>img]:spr-w-10 [&>img]:spr-min-h-10 [&>img]:spr-min-w-10': size.value === 'lg',
+        '[&>img]:spr-h-9 [&>img]:spr-w-9 [&>img]:spr-min-h-9 [&>img]:spr-min-w-9': size.value === 'md',
+        '[&>img]:spr-h-6 [&>img]:spr-w-6 [&>img]:spr-min-h-6 [&>img]:spr-min-w-6': size.value === 'sm',
+        '[&>img]:spr-h-5 [&>img]:spr-w-5 [&>img]:spr-min-h-5 [&>img]:spr-min-w-5': size.value === 'xs',
+        '[&>img]:spr-h-4 [&>img]:spr-w-4 [&>img]:spr-min-h-4 [&>img]:spr-min-w-4': size.value === '2xs',
       },
     );
 
-    const nameInitialsClasses = classNames(
+    const initialsContainerClasses = classNames(
       'spr-rounded-full spr-border-color-weak spr-border spr-border-solid spr-items-center spr-flex spr-justify-center spr-heading-xs spr-text-color-strong',
       {
         'spr-h-20 spr-min-w-20': size.value === '2xl',
@@ -67,8 +79,8 @@ export const useAvatar = (props: AvatarPropTypes) => {
 
     return {
       baseClasses,
-      imageClasses,
-      nameInitialsClasses,
+      imageContainerClasses,
+      initialsContainerClasses,
       notificationClasses,
       onlineNotificationClasses,
     };

package/src/components/dropdown/dropdown.vue

@@ -68,11 +68,16 @@
 
 <script lang="ts" setup>
 import { Menu } from 'floating-vue';
+
 import 'floating-vue/dist/style.css';
-import { dropdownPropTypes, dropdownEmitTypes } from './dropdown';
-import { useDropdown } from './use-dropdown';
+
 import SprList from '../list/list.vue';
 import SprLadderizedList from '../list/ladderized-list/ladderized-list.vue';
+
+import { dropdownPropTypes, dropdownEmitTypes } from './dropdown';
+
+import { useDropdown } from './use-dropdown';
+
 const props = defineProps(dropdownPropTypes);
 const emit = defineEmits(dropdownEmitTypes);
 

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

@@ -20,7 +20,9 @@ export const useDropdown = (props: DropdownPropTypes, emit: SetupContext<Dropdow
   const dropdownPopperState = ref<boolean>(false);
   const isDropdownPopperDisabled = computed(() => disabled.value);
 
-  const isLadderizedSearch = computed(() => (ladderized.value && searchString.value !== '' && dropdownValue.value.length === 0))
+  const isLadderizedSearch = computed(
+    () => ladderized.value && searchString.value !== '' && dropdownValue.value.length === 0,
+  );
 
   const initializeMenuList = () => {
     dropdownMenuList.value = [...menuList.value];
@@ -131,6 +133,7 @@ export const useDropdown = (props: DropdownPropTypes, emit: SetupContext<Dropdow
         // generate dropdown value if ladderized with search string
         dropdownValue.value = [selectedItems[0].subvalue ?? '', selectedItems[0].value];
       }
+
       setTimeout(() => {
         dropdownPopperState.value = false;
       }, 10);
@@ -175,6 +178,6 @@ export const useDropdown = (props: DropdownPropTypes, emit: SetupContext<Dropdow
     handleSelectedLadderizedItem,
     dropdownValue,
     removeCurrentLevelInBackLabel,
-    isLadderizedSearch
+    isLadderizedSearch,
   };
 };

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

@@ -93,13 +93,16 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
   const setPreSelectedItems = () => {
     if (preSelectedItems.value && preSelectedItems.value.length > 0) {
       preSelectedItems.value.forEach((preSelectedItem: string) => {
-        // If single select, only select the first item and skip the for loop
-        if (!multiSelect.value && selectedItems.value.length > 0) return;
+        const alreadySelected = selectedItems.value.some(
+          (selectedItem) => String(selectedItem.value) === String(preSelectedItem),
+        );
+
+        if (alreadySelected) return;
 
         const item = localizedMenuList.value.find((menuItem) => String(menuItem.value) === String(preSelectedItem));
 
         if (item) {
-          selectedItems.value.push(item);
+          selectedItems.value = [...selectedItems.value, item];
         }
       });
     }
@@ -117,11 +120,13 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
       const index = selectedItems.value.findIndex((selectedItem: MenuListType) => selectedItem.value === item.value);
 
       if (index === -1) {
-        selectedItems.value.push(item);
+        selectedItems.value = [...selectedItems.value, item];
       } else {
-        selectedItems.value.splice(index, 1);
+        const updatedItems = [...selectedItems.value];
+
+        updatedItems.splice(index, 1);
+        selectedItems.value = updatedItems;
       }
-      emit('update:modelValue', selectedItems.value);
     }
   };
   // #endregion - Helper Methods

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

@@ -7,10 +7,10 @@ import type { TabsPropTypes, TabsEmitTypes } from './tabs';
 export const useTabs = (props: TabsPropTypes, emit: SetupContext<TabsEmitTypes>['emit']) => {
   const tabsClasses = computed(() => {
     return classNames({
-      'spr-relative spr-px-size-spacing-xs spr-py-size-spacing-3xs spr-body-sm spr-text-color-strong spr-group': true,
+      'spr-relative spr-px-size-spacing-xs spr-body-sm spr-text-color-strong spr-group': true,
       'spr-transition-left spr-duration-150 spr-ease-in-out': true,
-      capitalize: !props.underlined,
-      'spr-uppercase spr-border-x-0 spr-border-t-0': props.underlined,
+      'capitalize spr-py-size-spacing-3xs': !props.underlined,
+      'spr-uppercase spr-border-x-0 spr-border-t-0 spr-py-size-spacing-xs': props.underlined,
     });
   });