design-system-next 2.26.6 → 2.26.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "design-system-next",
   "private": false,
-  "version": "2.26.6",
+  "version": "2.26.8",
   "main": "./dist/design-system-next.umd.js",
   "module": "./dist/design-system-next.es.js",
   "types": "./dist/design-system-next.es.d.ts",

package/src/components/avatar/avatar.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="spr-h-fit spr-w-fit">
     <div v-if="!props.loading && !imageError" :class="avatarClasses.baseClasses">
-      <template v-if="['image', 'client', 'user', 'user-group'].includes(props.variant) || $slots.default">
-        <div :class="avatarClasses.imageContainerClasses">
+      <template v-if="props.variant === 'count' || props.variant === 'initial'">
+        <div :class="avatarClasses.initialsContainerClasses">
+          {{ props.variant === 'count' ? `+${props.count}` : getInitials }}
+        </div>
+      </template>
+      <template v-else>
+        <div v-if="props.variant || $slots.default" :class="avatarClasses.imageContainerClasses">
           <slot>
             <img v-if="src" :src="src" :alt="alt" @error="handleImageError" />
             <Icon v-else :icon="getIconVariant" />
           </slot>
         </div>
       </template>
-      <template v-else>
-        <div :class="avatarClasses.initialsContainerClasses">
-          {{ props.variant === 'count' ? `+${props.count}` : getInitials }}
-        </div>
-      </template>
 
       <span v-if="props.notification" :class="avatarClasses.notificationClasses">
         <spr-badge :text="props.notificationText" variant="danger" :size="getAvatarSize.notif" />

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

@@ -109,7 +109,7 @@ export const useAvatar = (props: AvatarPropTypes, emit: SetupContext<AvatarEmitT
       case 'guest':
         return 'ph:user-circle';
       default:
-        return '';
+        return `ph:${variant.value}`;
     }
   });
 

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

@@ -1,6 +1,5 @@
 import type { PropType, ExtractPropTypes } from 'vue';
 import type { MenuListType } from '../list';
-
 export const listItemPropTypes = {
   item: {
     type: Object as PropType<MenuListType>,
@@ -50,6 +49,14 @@ export const listItemPropTypes = {
     type: Boolean,
     default: false,
   },
+  avatarVariant: {
+    type: String,
+    default: '',
+  },
+  avatarSource: {
+    type: String,
+    default: '',
+  },
 };
 
 export const listItemEmitTypes = {

package/src/components/list/list-item/list-item.vue

@@ -46,6 +46,16 @@
           >
             <Icon class="spr-text-xl" :icon="iconName" />
           </span>
+
+          <span v-if="hasAvatar">
+            <spr-avatar
+              size="sm"
+              :initial="props.avatarSource || listItem.text"
+              :variant="props.avatarVariant"
+              :src="props.avatarSource"
+            />
+          </span>
+
           <div
             :class="[
               'spr-flex spr-flex-auto spr-flex-col spr-justify-start',
@@ -106,6 +116,7 @@ import { Icon } from '@iconify/vue';
 import SprCheckbox from '@/components/checkbox/checkbox.vue';
 import SprRadio from '@/components/radio/radio.vue';
 import SprLozenge from '@/components/lozenge/lozenge.vue';
+import SprAvatar from '@/components/avatar/avatar.vue';
 
 import { LOZENGE_TONE } from '@/components/lozenge/lozenge';
 
@@ -115,5 +126,5 @@ import { useListItem } from './use-list-item';
 const props = defineProps(listItemPropTypes);
 const emit = defineEmits(listItemEmitTypes);
 
-const { listItem, hasIcon, iconName, iconClasses, hasSublevels, showLozengeMode } = useListItem(props, emit);
+const { listItem, hasIcon, iconName, iconClasses, hasSublevels, showLozengeMode, hasAvatar } = useListItem(props, emit);
 </script>

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

@@ -14,13 +14,16 @@ export function useListItem(
   iconClasses: ComputedRef<string>;
   hasSublevels: ComputedRef<boolean>;
   showLozengeMode: ComputedRef<boolean>;
+  hasAvatar: ComputedRef<boolean>;
 } {
-  const { item, itemIcon, itemIconTone, itemIconFill, lozenge } = toRefs(props);
+  const { item, itemIcon, itemIconTone, itemIconFill, lozenge, avatarVariant } = toRefs(props);
 
   const listItem = computed(() => item?.value);
 
   const hasIcon = computed(() => !!(itemIcon.value || item?.value!.icon));
 
+  const hasAvatar = computed(() => !!(avatarVariant.value && !hasIcon.value));
+
   const iconName = computed(() => itemIcon.value || item?.value!.icon || '');
 
   const iconClasses = computed(() => {
@@ -64,6 +67,7 @@ export function useListItem(
   return {
     listItem,
     hasIcon,
+    hasAvatar,
     iconName,
     iconClasses,
     hasSublevels,

package/src/components/list/list.ts

@@ -131,6 +131,14 @@ export const listPropTypes = {
     type: Boolean,
     default: false,
   },
+  avatarVariant: {
+    type: String,
+    default: '',
+  },
+  avatarSource: {
+    type: String,
+    default: '',
+  },
 };
 
 export const listEmitTypes = {

package/src/components/list/list.vue

@@ -70,6 +70,8 @@
                 :item-icon-fill="props.itemIconFill"
                 :disabled-unselected-items="props.disabledUnselectedItems"
                 :radio-list="props.radioList"
+                :avatar-variant="props.avatarVariant"
+                :avatar-source="props.avatarSource"
                 @select="handleSelectedItem(item)"
               />
               <div v-if="props.infiniteScrollLoader" class="spr-flex spr-items-center spr-justify-center spr-p-2">
@@ -98,6 +100,8 @@
             :item-icon-fill="props.itemIconFill"
             :disabled-unselected-items="props.disabledUnselectedItems"
             :radio-list="props.radioList"
+            :avatar-variant="props.avatarVariant"
+            :avatar-source="props.avatarSource"
             @select="handleSelectedItem(item)"
           />
           <div v-if="props.infiniteScrollLoader" class="spr-flex spr-items-center spr-justify-center spr-p-2">

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

@@ -213,6 +213,14 @@ export const multiSelectPropTypes = {
     type: Boolean,
     default: false,
   },
+  avatarVariant: {
+    type: String,
+    default: '',
+  },
+  avatarSource: {
+    type: String,
+    default: '',
+  },
 };
 
 export const multiSelectEmitTypes = {

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

@@ -166,6 +166,8 @@
             :disabled-local-search="props.disabledLocalSearch"
             :disabled-unselected-items="props.disabledUnselectedItems"
             :allow-select-all="props.allowSelectAll"
+            :avatar-variant="props.avatarVariant"
+            :avatar-source="props.avatarSource"
             multi-select
             @update:model-value="handleMultiSelectedItem"
             @get-single-selected-item="emit('get-single-selected-item', $event)"