design-system-next 1.2.25 → 1.3.2

package/src/components/sidepanel/sidepanel.vue

@@ -1,13 +1,13 @@
 <template>
-  <div 
+  <div
     v-if="isOpen && hasBackdrop"
-    class="w-screen h-screen bg-mushroom-700/60 fixed top-0 left-0 z-[30]" 
+    class="spr-w-screen spr-h-screen spr-bg-mushroom-700/60 spr-fixed spr-top-0 spr-left-0 spr-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]"
+  <Transition
+    name="sidepanel"
+    enter-active-class="spr-transition-transform spr-duration-[150ms] spr-ease-[ease-in-out]"
+    leave-active-class="spr-transition-transform spr-duration-[150ms] spr-ease-[ease-in-out]"
     :enter-from-class="sidepanelStartEndState"
     :leave-to-class="sidepanelStartEndState"
     :enter-to-class="sidepanelMidState"
@@ -19,42 +19,50 @@
       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'
+        'spr-h-[calc(100vh-32px)] spr-bg-white-50 spr-pr-rounded-border-radius-xl spr-fixed spr-right-4 spr-z-[30] spr-min-h-[200px] spr-flex spr-flex-col spr-top-1/2 spr-translate-y-[-50%] spr-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">
+        <div
+          v-if="!$slots.header"
+          class="spr-tw-min-h-12 spr-subheading-xs spr-text-color-strong spr-flex spr-justify-between spr-border-0 spr-border-b spr-border-solid spr-border-mushroom-200 spr-p-4"
+        >
           {{ headerTitle }}
-          <Icon 
-            class="cursor-pointer"
-            icon="ph:x"
-            @click="handleClose"
-          />
+          <Icon class="spr-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 :class="['spr-overflow-y-auto spr-p-4', { 'spr-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">
+      <div
+        v-if="$slots.footer"
+        class="spr-absolute spr-bottom-0 spr-left-0 spr-w-full spr-rounded-b-border-radius-xl spr-border-0 spr-border-t spr-border-solid spr-border-mushroom-200 spr-bg-white-50 spr-py-3"
+      >
         <slot name="footer"></slot>
       </div>
     </div>
   </Transition>
-  
 </template>
+
 <script lang="ts" setup>
+import { Icon } from '@iconify/vue';
+
 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);
+const {
+  sidepanelRef,
+  sidepanelSizesClasses,
+  sidepanelMidState,
+  sidepanelStartEndState,
+  handleClose,
+  handleBackdropClick,
+} = useSidepanel(props, emit);
 </script>

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

@@ -1,32 +1,34 @@
 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',
+      'spr-w-[360px]': size.value === 'sm',
+      'spr-w-[420px]': size.value === 'md',
+      'spr-w-[480px]': size.value === 'lg',
     });
   });
 
   const sidepanelStartEndState = computed(() => {
     return classNames({
-      'translate-x-full -translate-y-2/4': position.value === 'right'
-    })
-  })
+      'spr-translate-x-full -spr-translate-y-2/4': position.value === 'right',
+    });
+  });
 
   const sidepanelMidState = computed(() => {
     return classNames({
-      'translate-x-0 -translate-y-2/4': position.value === 'right'
-    })
-  })
+      'spr-translate-x-0 -spr-translate-y-2/4': position.value === 'right',
+    });
+  });
 
   const handleClose = () => {
     emit('close');
@@ -34,16 +36,16 @@ export const useSidepanel = (props: SidepanelPropTypes, emit: SetupContext<Sidep
 
   const handleBackdropClick = () => {
     if (props.closeOutside) {
-      emit('close')
+      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')
+      emit('close');
     }
   };
 
@@ -76,6 +78,6 @@ export const useSidepanel = (props: SidepanelPropTypes, emit: SetupContext<Sidep
     sidepanelStartEndState,
     handleClose,
     handleBackdropClick,
-    handleClickOutside
-  }
-}
+    handleClickOutside,
+  };
+};

package/src/components/snackbar/snack/snack.vue

@@ -1,48 +1,20 @@
 <template>
-  <div 
+  <div
     v-bind="snackProps"
-    ref="snackRef" 
-    class="
-      snackbar 
-      background-color-inverted
-      text-color-inverted-strong
-      font-size-200
-      line-height-400
-      h-fit
-      rounded-border-radius-lg
-      px-size-spacing-2xs
-      py-size-spacing-3xs
-      border
-      border-solid
-      border-color-strong
-      box-border
-      flex
-      flex-row
-      items-center
-    "
+    ref="snackRef"
+    class="snackbar spr-background-color-inverted spr-text-color-inverted-strong spr-font-size-200 spr-line-height-400 spr-h-fit spr-rounded-border-radius-lg spr-px-size-spacing-2xs spr-py-size-spacing-3xs spr-border spr-border-solid spr-border-color-strong spr-box-border spr-flex spr-flex-row spr-items-center"
     @click="handleClick"
   >
-    <label 
-      v-if="showIcon"
-      :class="[
-        snackToneCssClass,
-        'mr-size-spacing-3xs',
-      ]"
-    >
-      <Icon :icon="snackIcon" :width="iconSize" :height="iconSize"/>
+    <label v-if="showIcon" :class="[snackToneCssClass, 'spr-mr-size-spacing-3xs']">
+      <Icon :icon="snackIcon" :width="iconSize" :height="iconSize" />
     </label>
     <label class="flex-auto">{{ text }}</label>
     <div></div>
-    <label 
-      v-if="showAction" 
-      :class="[ 
+    <label
+      v-if="showAction"
+      :class="[
         snackToneCssClass,
-        'ml-size-spacing-3xs',
-        'cursor-pointer',
-        'uppercase',
-        'font-medium',
-        'font-size-100',
-        'line-height-100'
+        'spr-ml-size-spacing-3xs selection:spr-cursor-pointer spr-uppercase spr-font-medium spr-font-size-100 spr-line-height-100',
       ]"
       @click="() => action()"
     >
@@ -52,16 +24,17 @@
 </template>
 
 <script lang="ts" setup>
+import { Icon } from '@iconify/vue';
+
 import { snackEmitTypes, snackPropTypes } from './snack';
 import { useSnack } from './use-snack';
-import { Icon } from '@iconify/vue';
 
-const iconSize = "24px";
+const iconSize = '24px';
 
 const props = defineProps(snackPropTypes);
 const emit = defineEmits(snackEmitTypes);
-const { snackRef, snackProps, snackToneCssClass, snackIcon, handleClick } = useSnack(props, emit);
 
+const { snackRef, snackProps, snackToneCssClass, snackIcon, handleClick } = useSnack(props, emit);
 </script>
 
 <style lang="scss" scoped>

package/src/components/snackbar/snack/use-snack.ts

@@ -1,12 +1,13 @@
 import { computed, ref, ComputedRef } from 'vue';
-// import { useElementHover} from '@vueuse/core';
+
 import classNames from 'classnames';
+
 import type { SetupContext } from 'vue';
 import type { SnackEmitTypes, SnackPropTypes } from './snack';
 
 export const useSnack = (props: SnackPropTypes, emit: SetupContext<SnackEmitTypes>['emit']) => {
   const snackRef = ref<HTMLButtonElement | null>(null);
-  // const isHovered = useElementHover(snackRef);
+
   const { text, actionText, tone, showAction, showIcon, duration } = props;
 
   const snackProps: ComputedRef<Record<string, unknown>> = computed(() => {
@@ -22,18 +23,18 @@ export const useSnack = (props: SnackPropTypes, emit: SetupContext<SnackEmitType
 
   const snackToneCssClass: ComputedRef<string> = computed(() => {
     return classNames({
-      'text-kangkong-500': tone === 'success',
-      'text-tomato-500': tone === 'caution',
-      'text-carrot-500': tone === 'danger',
-      'text-blueberry-500': tone === 'information',
+      'spr-text-kangkong-500': tone === 'success',
+      'spr-text-tomato-500': tone === 'caution',
+      'spr-text-carrot-500': tone === 'danger',
+      'spr-text-blueberry-500': tone === 'information',
     });
   });
 
   const snackIcon = computed(() => {
-    if (props.tone == "caution") return "ph:warning-fill";
-    else if (props.tone == "danger") return "ph:warning-circle-fill";
-    else if (props.tone == "success") return "ph:check-circle-fill";
-    return "ph:info-fill";
+    if (props.tone == 'caution') return 'ph:warning-fill';
+    else if (props.tone == 'danger') return 'ph:warning-circle-fill';
+    else if (props.tone == 'success') return 'ph:check-circle-fill';
+    return 'ph:info-fill';
   });
 
   const handleClick = (evt: MouseEvent) => {
@@ -45,6 +46,6 @@ export const useSnack = (props: SnackPropTypes, emit: SetupContext<SnackEmitType
     snackProps,
     snackToneCssClass,
     snackIcon,
-    handleClick
+    handleClick,
   };
 };

package/src/components/snackbar/snackbar.vue

@@ -3,12 +3,8 @@
     <Transition name="snackbar">
       <div v-if="snackbarStore.snacks.length > 0" class="snackbar-wrapper slide-in-element">
         <TransitionGroup name="snackbar" tag="ul">
-          <li
-            v-for="snack in snackbarStore.snacks"
-            :key="snack.id"
-            class="snackbar-snack mb-size-spacing-3xs"
-          >
-            <spr-snack 
+          <li v-for="snack in snackbarStore.snacks" :key="snack.id" class="snackbar-snack spr-mb-size-spacing-3xs">
+            <spr-snack
               :text="snack.text"
               :action-text="snack.actionText"
               :tone="snack.tone"
@@ -26,21 +22,23 @@
 
 <script lang="ts" setup>
 import { useSnackbarStore } from '@/stores/useSnackbarStore';
+
 import SprSnack from '@/components/snackbar/snack/snack.vue';
 import { useSnackbar } from '@/components/snackbar/use-snackbar';
+
 import { SnackPropTypes } from './snack/snack';
-import { createPinia } from 'pinia'
+import { createPinia } from 'pinia';
 
 const pinia = createPinia();
 const snackbarStore = useSnackbarStore(pinia);
 const { showSnackbar, showSuccess, showInformation, showDanger, showCaution } = useSnackbar();
 
-defineExpose({ 
-  showSnackbar: (payload: SnackPropTypes) => showSnackbar(payload), 
-  showSuccess: (payload: SnackPropTypes) => showSuccess(payload), 
-  showInformation: (payload: SnackPropTypes) => showInformation(payload), 
-  showDanger: (payload: SnackPropTypes) => showDanger(payload), 
-  showCaution: (payload: SnackPropTypes) => showCaution(payload)
+defineExpose({
+  showSnackbar: (payload: SnackPropTypes) => showSnackbar(payload),
+  showSuccess: (payload: SnackPropTypes) => showSuccess(payload),
+  showInformation: (payload: SnackPropTypes) => showInformation(payload),
+  showDanger: (payload: SnackPropTypes) => showDanger(payload),
+  showCaution: (payload: SnackPropTypes) => showCaution(payload),
 });
 </script>
 

package/src/components/switch/switch.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="switchProps" :class="['flex items-center gap-2', switchTextClass]">
+  <div v-bind="switchProps" :class="['spr-flex spr-items-center spr-gap-2', switchTextClass]">
     <label>
       <slot name="leftText">
         <slot></slot>
@@ -8,8 +8,8 @@
     <div
       ref="switchWrapperRef"
       :class="{
-        'relative flex items-center': true,
-        'cursor-pointer transition duration-300 ease-in-out active:scale-90': !props.disabled,
+        'spr-relative spr-flex spr-items-center': true,
+        'spr-cursor-pointer spr-transition spr-duration-300 spr-ease-in-out active:spr-scale-90': !props.disabled,
       }"
     >
       <input
@@ -17,11 +17,17 @@
         v-model="proxyValue"
         type="checkbox"
         name="checkbox"
-        :class="['input absolute left-0 top-0 z-10 m-0 h-6 w-12 opacity-0', switchInputClass]"
+        :class="[
+          'input spr-absolute spr-left-0 spr-top-0 spr-z-10 spr-m-0 spr-h-6 spr-w-12 spr-opacity-0',
+          switchInputClass,
+        ]"
         :disabled="props.disabled"
       />
       <span
-        :class="['switch-mark relative box-border inline-block h-6 w-12 rounded-[40px] p-1', switchMarkClass]"
+        :class="[
+          'switch-mark spr-relative spr-box-border spr-inline-block spr-h-6 spr-w-12 spr-rounded-[40px] spr-p-1',
+          switchMarkClass,
+        ]"
       ></span>
     </div>
     <label>
@@ -48,19 +54,19 @@ const { switchWrapperRef, switchRef, switchProps, switchMarkClass, switchTextCla
 <style lang="scss" scoped>
 .input {
   &:checked ~ .switch-mark:before {
-    @apply left-[1.7rem];
+    @apply spr-left-[1.7rem];
   }
 }
 
 .switch-mark {
   &:before,
   &:after {
-    @apply absolute;
+    @apply spr-absolute;
     content: '';
   }
 
   &:before {
-    @apply left-1 top-1 h-4 w-4 rounded-[50%] bg-white-50;
+    @apply spr-left-1 spr-top-1 spr-h-4 spr-w-4 spr-rounded-[50%] spr-bg-white-50;
   }
 }
 </style>

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

@@ -1,11 +1,14 @@
 import { computed, ref, ComputedRef, toRefs } from 'vue';
 import { useElementHover, useMousePressed } from '@vueuse/core';
+
 import classNames from 'classnames';
+
 import type { SwitchPropTypes } from './switch';
 
 export const useSwitch = (props: SwitchPropTypes) => {
   const switchWrapperRef = ref<HTMLDivElement | null>(null);
   const switchRef = ref<HTMLInputElement | null>(null);
+
   const isHovered = useElementHover(switchWrapperRef);
   const { pressed } = useMousePressed({ target: switchRef });
   const { disabled, state, modelValue } = toRefs(props);
@@ -37,43 +40,41 @@ export const useSwitch = (props: SwitchPropTypes) => {
   });
 
   function getDefaultBackground(): string {
-    return props.modelValue ? 'background-color-success-base' : 'switch-background-default';
+    return props.modelValue ? 'spr-background-color-success-base' : 'spr-switch-background-default';
   }
 
   function getHoveredBackground(): string {
-    return props.modelValue ? 'background-color-success-hover' : 'switch-background-hover';
+    return props.modelValue ? 'spr-background-color-success-hover' : 'spr-switch-background-hover';
   }
 
   function getPressedBackground(): string {
-    return props.modelValue ? 'background-color-success-pressed' : 'switch-background-pressed';
+    return props.modelValue ? 'spr-background-color-success-pressed' : 'spr-switch-background-pressed';
   }
 
   function getDisabledBackground(): string {
     return classNames(
       {
-        'background-color-success-base': props.modelValue,
-        'switch-background-default': !props.modelValue,
+        'spr-background-color-success-base': props.modelValue,
+        'spr-switch-background-default': !props.modelValue,
       },
-      'opacity-60',
+      'spr-opacity-60',
     );
   }
   // #endregion - Background CSS Class
 
   const switchTextClass: ComputedRef<string> = computed(() => {
     if (props.disabled) {
-      return 'text-color-disabled';
+      return 'spr-text-color-disabled';
     }
 
-    return 'text-color-strong';
+    return 'spr-text-color-strong';
   });
 
   const switchAnimationCssClass: ComputedRef<string> = computed(() => {
     return classNames(
-      'transition-colors',
-      'before:transition-all',
-      'before:duration-150',
-      'after:transition-all',
-      'after:duration-150',
+      'spr-transition-colors',
+      'before:spr-transition-all before:spr-duration-150',
+      'after:spr-transition-all after:spr-duration-150',
     );
   });
 
@@ -83,8 +84,8 @@ export const useSwitch = (props: SwitchPropTypes) => {
 
   const switchInputClass: ComputedRef<string> = computed(() => {
     return classNames({
-      'cursor-not-allowed': props.disabled,
-      'cursor-pointer': !props.disabled,
+      'spr-cursor-not-allowed': props.disabled,
+      'spr-cursor-pointer': !props.disabled,
     });
   });
 

package/src/components/table/table.ts

@@ -57,6 +57,11 @@ export const tablePropTypes = {
       size: 'large',
     }),
   },
+
+  loading: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
 };
 
 export type TablePropTypes = ExtractPropTypes<typeof tablePropTypes>;

package/src/components/table/table.vue

@@ -1,52 +1,67 @@
 <template>
-  <div class="border-color-weak w-full rounded-border-radius-lg border border-solid">
-    <div v-if="!!$slots.default" :class="[{ 'px-size-spacing-sm py-size-spacing-xs': !!$slots.default }]">
+  <div
+    class="spr-border-color-weak spr-w-full spr-rounded-border-radius-lg spr-border spr-border-solid spr-overflow-hidden"
+  >
+    <div v-if="!!$slots.default" :class="[{ 'spr-px-size-spacing-sm spr-py-size-spacing-xs': !!$slots.default }]">
       <slot />
     </div>
 
-    <div class="h-[400px] overflow-auto">
-      <table aria-describedby="describe" class="w-full table-fixed" cellspacing="0" cellpadding="0">
+    <div class="spr-h-[400px] spr-overflow-auto">
+      <table aria-describedby="describe" class="spr-w-full spr-table-fixed" cellspacing="0" cellpadding="0">
         <thead>
           <tr>
             <th
               v-for="(header, keyHeader) in headers"
               :key="keyHeader"
               :class="[
-                'background-color-surface text-color-strong font-size-100 font-line-height-100 font-letter-spacing-normal background-color-surface border-color-weak sticky top-0 z-10 min-h-12 border-x-0 border-y border-solid px-size-spacing-2xs py-size-spacing-3xs text-start font-medium uppercase',
+                'spr-sticky spr-top-0 spr-z-10',
+                'spr-background-color-surface spr-min-h-12 spr-py-size-spacing-3xs spr-px-size-spacing-2xs',
+                'spr-text-color-strong spr-font-size-100 spr-font-line-height-100 spr-font-letter-spacing-normal spr-text-start spr-font-medium spr-uppercase',
+                'spr-border-x-0 spr-border-y spr-border-solid spr-border-color-weak',
                 {
-                  'cursor-pointer': header.sort,
-                  'first:rounded-tl-border-radius-lg last:rounded-tr-border-radius-lg': !$slots.default,
+                  'spr-cursor-pointer': header.sort,
+                  'spr-border-t-0': !$slots.default,
                 },
               ]"
               @click="header.sort && sortData(header.field)"
             >
-              <div class="flex flex-row items-center gap-size-spacing-5xs">
+              <div class="spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-5xs">
                 <span>{{ header.name }}</span>
-                <span v-if="header.sort" class="flex flex-row items-center"
-                  ><Icon icon="ph:caret-up-down-light"
-                /></span>
+                <span v-if="header.sort" class="spr-flex spr-flex-row spr-items-center">
+                  <Icon icon="ph:caret-up-down-light" />
+                </span>
               </div>
             </th>
+
             <!-- 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 background-color-surface border-color-weak sticky top-0 z-10 min-h-12 border-x-0 border-y border-solid px-size-spacing-2xs py-size-spacing-3xs text-start font-medium uppercase"
+              :class="[
+                'spr-sticky spr-top-0 spr-z-10',
+                'spr-background-color-surface spr-min-h-12 spr-py-size-spacing-3xs',
+                'spr-text-color-strong spr-text-start spr-font-medium spr-uppercase spr-font-size-100 spr-font-line-height-100 spr-font-letter-spacing-normal',
+                'spr-border-y spr-border-solid spr-border-color-weak spr-border-x-0',
+              ]"
             >
               <slot
                 name="action-name"
-                class="background-color-surface text-color-strong font-size-100 font-line-height-100 font-letter-spacing-normal uppercase"
+                class="spr-background-color-surface spr-text-color-strong spr-font-size-100 spr-font-line-height-100 spr-font-letter-spacing-normal spr-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]">
+        <tbody v-if="sortedData.length > 0 && !loading">
+          <tr
+            v-for="(item, keyIndex) in sortedData"
+            :key="keyIndex"
+            class="hover:spr-background-color-hover spr-min-h-[60px]"
+          >
             <td
               v-for="(column, headerKey) in headers"
               :key="headerKey"
-              class="border-color-weak overflow-hidden border-x-0 border-b border-t-0 border-solid px-6 py-3"
+              class="spr-border-color-weak spr-overflow-hidden spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid spr-p-3"
             >
-              <div v-if="sortedData[keyIndex][column.field]" class="flex flex-row items-center gap-2">
+              <div v-if="sortedData[keyIndex][column.field]" class="spr-flex spr-flex-row spr-items-center spr-gap-2">
                 <spr-avatar
                   v-if="column.hasAvatar && sortedData[keyIndex][column.field].image"
                   size="lg"
@@ -56,31 +71,40 @@
                 <div>
                   <div
                     :class="[
-                      'text-color-strong font-size-200 font-normal',
-                      { 'text-color-strong body-sm-regular-medium': column.hasSubtext },
+                      'spr-text-color-strong spr-font-size-200 spr-font-normal',
+                      { 'spr-text-color-strong spr-body-sm-regular-medium': column.hasSubtext },
                     ]"
                   >
                     {{ sortedData[keyIndex][column.field].title }}
                   </div>
-                  <div v-if="column.hasSubtext" class="text-color-base text-xs font-normal">
+                  <div v-if="column.hasSubtext" class="spr-text-color-base spr-text-xs spr-font-normal">
                     {{ sortedData[keyIndex][column.field].subtext }}
                   </div>
                 </div>
               </div>
             </td>
-            <td v-if="action" class="border-color-weak overflow-hidden border-x-0 border-b border-t-0 border-solid">
-              <div class="flex items-center space-x-1 px-6 py-3">
+            <td
+              v-if="action"
+              class="spr-border-color-weak spr-overflow-hidden spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid"
+            >
+              <div class="spr-flex spr-items-center">
                 <slot name="action" :row="item" />
               </div>
             </td>
           </tr>
         </tbody>
         <tbody v-else>
-          <tr>
-            <td :colspan="getHeaderCount" class="overflow-hidden">
+          <tr v-if="!loading">
+            <td :colspan="getHeaderCount" class="spr-overflow-hidden">
               <SprEmptyState />
             </td>
           </tr>
+          <tr v-else>
+            <td :colspan="getHeaderCount" class="spr-overflow-hidden">
+              <div v-if="!$slots.loading" class="spr-flex spr-justify-center spr-items-center">Loading...</div>
+              <slot name="loading" class="" />
+            </td>
+          </tr>
         </tbody>
       </table>
     </div>
@@ -89,11 +113,14 @@
 
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
+
 import SprAvatar from '@/components/avatar/avatar.vue';
 import SprEmptyState from '@/components/empty-state/empty-state.vue';
+
 import { tablePropTypes } from './table';
 import { useTable } from './use-table';
 
 const props = defineProps(tablePropTypes);
+
 const { sortedData, sortData, getHeaderCount } = useTable(props);
 </script>

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

@@ -1,4 +1,5 @@
 import { ref, computed, toRefs } from 'vue';
+
 import type { TablePropTypes } from './table';
 
 export const useTable = (props: TablePropTypes) => {