design-system-next 2.7.23 → 2.7.28

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/filter/filter.ts

@@ -30,7 +30,7 @@ export const filterPropTypes = {
   },
   id: {
     type: String,
-    default: '',
+    default: 'spr-filter',
   },
   filterMenu: {
     type: Array as PropType<FilterPropsInterface['filterMenu']>,

package/src/components/filter/filter.vue

@@ -24,7 +24,7 @@
     >
       <slot>
         <spr-input
-          id="search"
+          :id="props.id"
           v-model="searchValue"
           type="text"
           :placeholder="placeholder"
@@ -105,10 +105,10 @@
 
                         <div class="spr-p-size-spacing-2xs">
                           <spr-input
-                            id="search"
+                            :id="`${props.id}-search`"
                             v-model="filterMenuSearchvalue"
                             type="text"
-                            placeholder="Select Employees"
+                            placeholder="Search"
                           >
                             <template #icon>
                               <Icon icon="ph:magnifying-glass" />

package/src/components/input/input.ts

@@ -32,7 +32,7 @@ export const INPUT_TYPES = [
 export const inputPropTypes = {
   id: {
     type: String,
-    default: '',
+    default: 'spr-input',
   },
   modelValue: {
     type: String,

package/src/components/input/input.vue

@@ -9,8 +9,9 @@
         <slot name="prefix" />
       </div>
       <input
-        ref="inputTextRef"
         v-bind="$attrs"
+        :id="props.id"
+        ref="inputTextRef"
         :class="[inputClasses.inputTextClasses, { 'number-input': props.type === 'number' }]"
         :placeholder="props.placeholder"
         :type="props.type"

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

@@ -117,13 +117,17 @@ 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
 
   watch(menuList, () => {

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,
     });
   });
 

package/src/vite-env.d.ts

@@ -1,6 +0,0 @@
-interface ImportMeta { readonly glob: ImportMetaGlob }
-
-interface ImportMetaGlob {
-  (pattern: string, options?: { eager?: boolean }): Record<string, () => Promise<unknown>>
-  (pattern: string, options?: { eager: true }): Record<string, unknown>
-}