design-system-next 1.2.19 → 1.2.22

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/dropdown/use-dropdown.ts

@@ -1,6 +1,6 @@
 import { ref, onMounted, watch, computed } from 'vue';
-import classNames from 'classnames';
 import type { SetupContext } from 'vue';
+import classNames from 'classnames';
 
 import type { DropdownPropTypes, DropdownEmitTypes } from './dropdown';
 

package/src/components/sidenav/sidenav.vue

@@ -277,7 +277,7 @@
             <template v-else>
               <Tooltip
                 v-if="!parentLink.hidden"
-                aria-id="default-tooltip"
+                aria-id="sidenav-tooltip-wrapper"
                 placement="right"
                 distance="18"
                 :triggers="['hover']"
@@ -460,7 +460,7 @@
             <template v-else>
               <Tooltip
                 v-if="!parentLink.hidden"
-                aria-id="default-tooltip"
+                aria-id="sidenav-tooltip-wrapper"
                 placement="right"
                 distance="18"
                 :triggers="['hover']"

package/src/components/sidepanel/sidepanel.ts

@@ -0,0 +1,87 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+
+const SIDEPANEL_SIZE = ['sm', 'md', 'lg', 'xl'] as const;
+const SIDEPANEL_POSITION = ['right'] as const;
+
+export const sidepanelPropTypes = {
+  /**
+   * @description Controls whether the side panel is open. 
+   * Set to `true` to display the side panel or `false` to hide it.
+  */
+  isOpen: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * @description The title displayed in the side panel's header.
+   * If not provided, defaults to 'Sidepanel Header'.
+  */
+  headerTitle: {
+    type: String,
+    default: 'Sidepanel Header'
+  },
+  /**
+   * @description Specifies the size of the side panel.
+   * Acceptable values are: `'sm'`, `'md'`, `'lg'`, `'xl'`.
+   * Defaults to `'sm'`.
+  */
+  size: {
+    type: String as PropType<(typeof SIDEPANEL_SIZE)[number]>,
+    validator: (value: (typeof SIDEPANEL_SIZE)[number]) => SIDEPANEL_SIZE.includes(value),
+    default: 'sm',
+  },
+  /**
+   * @description Sets the height of the side panel.
+   * Accepts a string (e.g., `'500px'`, `'70vh'`) or a number (interpreted as pixels).
+   * Defaults to `'calc(100vh - 32px)'`.
+  */
+  height: {
+    type: [String, Number],
+    default: 'calc(100vh - 32px)',
+  },
+  /**
+   * @description Controls the visibility of the side panel header.
+   * Set to `true` to hide the header, or `false` to display it.
+   * Defaults to `false`.
+  */
+  hideHeader: {
+    type: Boolean,
+    default: false 
+  },
+  /**
+   * @description Specifies the position of the side panel.
+   * Currently, only `'right'` is supported.
+   * Defaults to `'right'`.
+  */
+  position: {
+    type: String as PropType<(typeof SIDEPANEL_POSITION)[number]>,
+    validator: (value: (typeof SIDEPANEL_POSITION)[number]) => SIDEPANEL_POSITION.includes(value),
+    default: 'right',
+  },
+  /**
+   * @description Determines whether a backdrop is displayed behind the side panel.
+   * Set to `true` to enable the backdrop, or `false` to disable it.
+   * Defaults to `true`.
+  */
+  hasBackdrop: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * @description Controls whether clicking outside the side panel should close it.
+   * Set to `true` to enable closing on outside click, or `false` to disable it.
+   * Defaults to `false`.
+  */
+  closeOutside: {
+    type: Boolean,
+    default: false,
+  }
+}
+
+export const sidepanelEmitTypes = {
+  close: Function,
+  onClose: Function,
+};
+
+export type SidepanelPropTypes = ExtractPropTypes<typeof sidepanelPropTypes>;
+export type SidepanelEmitTypes = typeof sidepanelEmitTypes;

package/src/components/sidepanel/sidepanel.vue

@@ -0,0 +1,60 @@
+<template>
+  <div 
+    v-if="isOpen && hasBackdrop"
+    class="w-screen h-screen bg-mushroom-700/60 fixed top-0 left-0 z-[30]" 
+    @click="handleBackdropClick"
+  ></div>
+  <Transition 
+    :name="`sidepanel`"
+    enter-active-class="transition-transform duration-[0.3s] ease-[ease-out]"
+    leave-active-class="transition-transform duration-[0.3s] ease-[ease-out]"
+    :enter-from-class="sidepanelStartEndState"
+    :leave-to-class="sidepanelStartEndState"
+    :enter-to-class="sidepanelMidState"
+    :leave-from-class="sidepanelMidState"
+    appear
+  >
+    <div
+      v-if="isOpen"
+      ref="sidepanelRef"
+      :class="[
+        sidepanelSizesClasses,
+        'h-[calc(100vh_-_32px)] bg-white-50 rounded-border-radius-xl fixed right-4 z-[30] min-h-[200px] flex flex-col top-1/2 translate-y-[-50%] drop-shadow'
+      ]"
+      :style="{ height: typeof height === 'number' ? `${height}px` : height }"
+    >
+      <template v-if="!hideHeader">
+        <div v-if="!$slots.header" class="flex justify-between tw-min-h-12 p-4 border-mushroom-200 border-b border-solid border-0 subheading-xs text-color-strong">
+          {{ headerTitle }}
+          <Icon 
+            class="cursor-pointer"
+            icon="ph:x"
+            @click="handleClose"
+          />
+        </div>
+        <div v-else>
+          <slot name="header"></slot>
+        </div>
+      </template>
+      <div :class="['overflow-y-auto p-4', {'mb-[52px]': $slots.footer}]">
+        <slot>
+          Sidepanel Content
+        </slot>
+      </div>
+      <div v-if="$slots.footer" class="absolute bottom-0 left-0 w-full border-0 border-t border-mushroom-200 bg-white-50 border-solid py-3 rounded-b-border-radius-xl">
+        <slot name="footer"></slot>
+      </div>
+    </div>
+  </Transition>
+  
+</template>
+<script lang="ts" setup>
+import { useSidepanel } from './use-sidepanel';
+import { sidepanelPropTypes, sidepanelEmitTypes } from './sidepanel';
+import { Icon } from '@iconify/vue';
+
+const props = defineProps(sidepanelPropTypes);
+const emit = defineEmits(sidepanelEmitTypes);
+
+const { sidepanelRef, sidepanelSizesClasses, sidepanelMidState, sidepanelStartEndState, handleClose, handleBackdropClick } = useSidepanel(props, emit);
+</script>

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

@@ -0,0 +1,81 @@
+import { ref, computed, toRefs, watch, onMounted, onUnmounted } from 'vue';
+
+import classNames from 'classnames';
+import type { SetupContext } from 'vue';
+import type { SidepanelPropTypes, SidepanelEmitTypes } from './sidepanel';
+
+export const useSidepanel = (props: SidepanelPropTypes, emit: SetupContext<SidepanelEmitTypes>['emit']) => {
+  const sidepanelRef = ref<HTMLDivElement | null>(null);
+  const { size, position } = toRefs(props);
+
+  const sidepanelSizesClasses = computed(() => {
+    return classNames({
+      'w-[360px]': size.value === 'sm',
+      'w-[420px]': size.value === 'md',
+      'w-[480px]': size.value === 'lg',
+    });
+  });
+
+  const sidepanelStartEndState = computed(() => {
+    return classNames({
+      'translate-x-full -translate-y-2/4': position.value === 'right'
+    })
+  })
+
+  const sidepanelMidState = computed(() => {
+    return classNames({
+      'translate-x-0 -translate-y-2/4': position.value === 'right'
+    })
+  })
+
+  const handleClose = () => {
+    emit('close');
+  };
+
+  const handleBackdropClick = () => {
+    if (props.closeOutside) {
+      emit('close')
+    }
+  }
+
+  let ignoreClick = false;
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (ignoreClick) return;
+    if (sidepanelRef.value && !sidepanelRef.value.contains(event.target as Node) && props.closeOutside) {
+      emit('close')
+    }
+  };
+
+  watch(
+    () => props.isOpen,
+    (value) => {
+      if (value) {
+        ignoreClick = true;
+        setTimeout(() => {
+          ignoreClick = false;
+        });
+      } else {
+        emit('onClose');
+      }
+    },
+  );
+
+  onMounted(() => {
+    document.addEventListener('click', handleClickOutside);
+  });
+
+  onUnmounted(() => {
+    document.removeEventListener('click', handleClickOutside);
+  });
+
+  return {
+    sidepanelRef,
+    sidepanelSizesClasses,
+    sidepanelMidState,
+    sidepanelStartEndState,
+    handleClose,
+    handleBackdropClick,
+    handleClickOutside
+  }
+}

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

@@ -2,7 +2,7 @@ import type { PropType, ExtractPropTypes } from 'vue';
 
 export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
 
-const TOOLTIP_POSITION = [
+const PLACEMENTS = [
   'top',
   'top-start',
   'top-end',
@@ -14,7 +14,7 @@ const TOOLTIP_POSITION = [
   'left-end',
   'right',
   'right-start',
-  'right-end'
+  'right-end',
 ] as const;
 
 export const tooltipPropTypes = {
@@ -26,12 +26,12 @@ export const tooltipPropTypes = {
     default: 'Sample tooltip',
   },
   /**
-   * @description Tooltip Position
+   * @description Tooltip Placement
    */
-  position: {
+  placement: {
     type: String,
-    validator: (value: (typeof TOOLTIP_POSITION)[number]) => TOOLTIP_POSITION.includes(value),
-    default: 'top-start',
+    validator: (value: (typeof PLACEMENTS)[number]) => PLACEMENTS.includes(value),
+    default: 'top',
   },
 };
 

package/src/components/tooltip/tooltip.vue

@@ -1,23 +1,23 @@
 <template>
-  <div v-if="$slots.default" ref="componentRef" class="relative h-min w-min whitespace-nowrap">
+  <Tooltip class="w-fit" aria-id="tooltip-wrapper" :placement="placement">
+    <template #popper>
+      <p>{{ text }}</p>
+
+      <slot name="popper-content" />
+    </template>
+
     <slot />
-    <div
-      :class="[
-        tooltipClasses,
-        'background-color-inverted absolute z-50 w-max min-w-10 max-w-72 text-wrap rounded-md px-size-spacing-4xs py-size-spacing-3xs',
-      ]"
-    >
-      <div class="text-color-inverted-strong body-xs-regular">
-        {{ text }}
-      </div>
-    </div>
-  </div>
+  </Tooltip>
 </template>
 
 <script lang="ts" setup>
+import { Tooltip } from 'floating-vue';
+import 'floating-vue/dist/style.css';
+
 import { tooltipPropTypes } from './tooltip';
 import { useTooltip } from './use-tooltip';
 
 const props = defineProps(tooltipPropTypes);
-const { componentRef, tooltipClasses, text } = useTooltip(props);
+
+const { placement } = useTooltip(props);
 </script>

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

@@ -1,37 +1,13 @@
-import { computed, ref, toRefs } from 'vue';
-import { useElementHover } from '@vueuse/core';
-import { TooltipPropTypes } from './tooltip';
-
-import classNames from 'classnames';
+import { ref } from 'vue';
 
-export const useTooltip = (props: TooltipPropTypes) => {
-  const { position, text } = toRefs(props);
+import { Placement } from 'floating-vue';
 
-  const componentRef = ref<HTMLDivElement | null>(null);
-  const isHovered = useElementHover(componentRef);
+import { TooltipPropTypes } from './tooltip';
 
-  const tooltipClasses = computed(() => {
-    // Tooltip Gap: 6px
-    return classNames({
-      hidden: !isHovered.value,
-      'bottom-[calc(100%+6px)] left-[50%] translate-x-[-50%]': position.value === 'top',
-      'bottom-[calc(100%+6px)] left-0': position.value === 'top-start',
-      'bottom-[calc(100%+6px)] right-0': position.value === 'top-end',
-      'top-[calc(100%+6px)] left-[50%] translate-x-[-50%]': position.value === 'bottom',
-      'top-[calc(100%+6px)] left-0': position.value === 'bottom-start',
-      'top-[calc(100%+6px)] right-0': position.value === 'bottom-end',
-      'left-[calc(100%+6px)] top-[50%] translate-y-[-50%]': position.value === 'right',
-      'left-[calc(100%+6px)] top-0': position.value === 'right-start',
-      'left-[calc(100%+6px)] bottom-0': position.value === 'right-end',
-      'right-[calc(100%+6px)] top-[50%] translate-y-[-50%]': position.value === 'left',
-      'right-[calc(100%+6px)] top-0': position.value === 'left-start',
-      'right-[calc(100%+6px)] bottom-0': position.value === 'left-end',
-    });
-  });
+export const useTooltip = (props: TooltipPropTypes) => {
+  const placement = ref(props.placement as Placement);
 
   return {
-    componentRef,
-    tooltipClasses,
-    text,
+    placement,
   };
 };