design-system-next 1.2.21 → 1.2.23

package/src/components/avatar/avatar.vue

@@ -1,19 +1,19 @@
 <template>
   <div :class="avatarClassses">
     <template v-if="!initial">
-      <img v-if="!$slots.default" :src="src" :alt="alt" :class="avatarImageClassses" />
-      <div v-else :class="avatarImageClassses">
+      <img v-if="!$slots.default && src" :src="src" :alt="alt" :class="avatarImageClassses" />
+      <div v-else :class="[avatarImageClassses, 'avatar__slot border-color-weak border border-solid']">
         <slot />
       </div>
     </template>
     <div v-else :class="initialClassses">
       {{ initial }}
     </div>
-    <span v-if="badge" :class="avatarNotificationClassses">
+    <span v-if="notification" :class="avatarNotificationClassses">
       <spr-badge :text="badgeText" variant="danger" :size="getAvatarSize.notif" />
     </span>
-    <span v-if="online" :class="onlineNotificationClassses">
-      <spr-badge text="" variant="brand" :size="getAvatarSize.online" />
+    <span v-if="badge" :class="onlineNotificationClassses">
+      <spr-badge text="" :variant="status" :size="getAvatarSize.badge" />
     </span>
   </div>
 </template>

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

@@ -3,26 +3,29 @@ import type { AvatarPropTypes } from './avatar';
 
 import classNames from 'classnames';
 export const useAvatar = (props: AvatarPropTypes) => {
-  const { size } = toRefs(props);
+  const { size, color } = toRefs(props);
   const avatarClassses = computed(() => {
-    return classNames(' relative  inline-block');
+    return classNames(' relative  inline-block rounded-full', {
+      'background-color-surface': color.value === 'primary',
+      'background-color': color.value === 'secondary',
+    });
   });
 
   const avatarImageClassses = computed(() => {
-    return classNames('  rounded-full  object-cover ', {
-      ' h-20 min-w-20': size.value === '2xl',
-      ' h-14 min-w-14': size.value === 'xl',
-      ' h-10 min-w-10': size.value === 'lg',
-      ' h-9  min-w-9': size.value === 'md',
-      ' h-6  min-w-6': size.value === 'sm',
-      ' h-5  min-w-5': size.value === 'xs',
-      ' h-4  min-w-4': size.value === '2xs',
+    return classNames('rounded-full object-cover flex items-center justify-center overflow-hidden', {
+      'h-20 min-w-20': size.value === '2xl',
+      'h-14 min-w-14': size.value === 'xl',
+      'h-10 min-w-10': size.value === 'lg',
+      'h-9  min-w-9': size.value === 'md',
+      'h-6  min-w-6': size.value === 'sm',
+      'h-5  min-w-5': size.value === 'xs',
+      'h-4  min-w-4': size.value === '2xs',
     });
   });
 
   const initialClassses = computed(() => {
     return classNames(
-      '  rounded-full   background-color-surface  border-color-weak  border  border-solid  items-center  flex  justify-center  heading-xs  text-color-strong',
+      '  rounded-full  border-color-weak  border  border-solid  items-center  flex  justify-center  heading-xs  text-color-strong',
       {
         ' h-20 min-w-20': size.value === '2xl',
         ' h-14 min-w-14  body-lg-regular-medium': size.value === 'xl',
@@ -57,11 +60,11 @@ export const useAvatar = (props: AvatarPropTypes) => {
   });
 
   const getAvatarSize = computed(() => {
-    if (['2xl'].includes(size.value)) return { notif: 'big', online: 'big' };
-    if (['xl', 'lg'].includes(size.value)) return { notif: 'big', online: 'tiny' };
-    if (['md', 'sm'].includes(size.value)) return { notif: 'small', online: 'tiny' };
+    if (['2xl'].includes(size.value)) return { notif: 'big', badge: 'big' };
+    if (['xl', 'lg'].includes(size.value)) return { notif: 'big', badge: 'tiny' };
+    if (['md', 'sm'].includes(size.value)) return { notif: 'small', badge: 'tiny' };
 
-    return { notif: 'tiny', online: 'tiny' };
+    return { notif: 'tiny', badge: 'tiny' };
   });
 
   return {

package/src/components/table/table.ts

@@ -13,8 +13,8 @@ interface Header {
 interface TableData {
   [key: string]: {
     title: string;
-    subtext: string;
-    image: string;
+    subtext?: string;
+    image?: string;
   };
 }
 

package/src/components/table/table.vue

@@ -36,16 +36,21 @@
             <!-- for action Button -->
             <th
               v-if="action"
-              class="'background-color-surface text-color-strong font-size-100 font-line-height-100 font-letter-spacing-normal uppercase', sticky top-0 z-10 border-none px-size-spacing-2xs py-size-spacing-3xs text-start font-medium"
-            />
+              class="background-color-surface text-color-strong font-size-100 font-line-height-100 font-letter-spacing-normal sticky top-0 z-10 border-none px-size-spacing-2xs py-size-spacing-3xs text-start font-medium uppercase"
+            >
+              <slot
+                name="action-name"
+                class="background-color-surface text-color-strong font-size-100 font-line-height-100 font-letter-spacing-normal uppercase"
+              />
+            </th>
           </tr>
         </thead>
         <tbody v-if="sortedData.length > 0">
           <tr v-for="(item, keyIndex) in sortedData" :key="keyIndex" class="hover:background-color-hover min-h-[60px]">
             <td v-for="(column, headerKey) in headers" :key="headerKey" class="border-b px-6 py-3">
-              <div class="flex flex-row items-center gap-2">
+              <div v-if="sortedData[keyIndex][column.field]" class="flex flex-row items-center gap-2">
                 <spr-avatar
-                  v-if="column.hasAvatar"
+                  v-if="column.hasAvatar && sortedData[keyIndex][column.field].image"
                   size="lg"
                   :src="sortedData[keyIndex][column.field].image"
                   alt="User Avatar"

package/src/components/tooltip/tooltip.ts

@@ -23,7 +23,7 @@ export const tooltipPropTypes = {
    */
   text: {
     type: String,
-    default: 'Sample tooltip',
+    default: '',
   },
   /**
    * @description Tooltip Placement
@@ -33,6 +33,10 @@ export const tooltipPropTypes = {
     validator: (value: (typeof PLACEMENTS)[number]) => PLACEMENTS.includes(value),
     default: 'top',
   },
+  hasMaxWidth: {
+    type: Boolean,
+    default: true,
+  },
 };
 
 export type TooltipPropTypes = ExtractPropTypes<typeof tooltipPropTypes>;

package/src/components/tooltip/tooltip.vue

@@ -1,5 +1,9 @@
 <template>
-  <Tooltip class="w-fit" aria-id="tooltip-wrapper" :placement="placement">
+  <Tooltip
+    class="w-fit"
+    :aria-id="props.hasMaxWidth ? 'tooltip-full-width-wrapper' : 'tooltip-wrapper'"
+    :placement="placement"
+  >
     <template #popper>
       <p>{{ text }}</p>