design-system-next 2.17.8 → 2.19.3

package/src/assets/styles/tailwind.css

@@ -587,7 +587,7 @@
   }
 
   .spr-text-color-supporting {
-    @apply spr-text-mushroom-400;
+    @apply spr-text-mushroom-500;
   }
 
   .spr-text-color-base {
@@ -595,15 +595,15 @@
   }
 
   .spr-text-color-weak {
-    @apply spr-text-mushroom-300;
+    @apply spr-text-mushroom-400;
   }
 
   .spr-text-color-disabled {
-    @apply spr-text-white-300;
+    @apply spr-text-white-400;
   }
 
   .spr-text-color-on-fill-disabled {
-    @apply spr-text-white-400;
+    @apply spr-text-white-500;
   }
 
   .spr-text-color-inverted-strong {
@@ -647,51 +647,51 @@
   }
 
   .spr-text-color-information-base {
-    @apply spr-text-blueberry-700;
+    @apply spr-text-blueberry-800;
   }
 
   .spr-text-color-information-hover {
-    @apply spr-text-blueberry-800;
+    @apply spr-text-blueberry-900;
   }
 
   .spr-text-color-information-pressed {
-    @apply spr-text-blueberry-900;
+    @apply spr-text-blueberry-950;
   }
 
   .spr-text-color-danger-base {
-    @apply spr-text-tomato-600;
+    @apply spr-text-tomato-700;
   }
 
   .spr-text-color-danger-hover {
-    @apply spr-text-tomato-700;
+    @apply spr-text-tomato-800;
   }
 
   .spr-text-color-danger-pressed {
-    @apply spr-text-tomato-800;
+    @apply spr-text-tomato-900;
   }
 
   .spr-text-color-pending-base {
-    @apply spr-text-mango-700;
+    @apply spr-text-mango-800;
   }
 
   .spr-text-color-pending-hover {
-    @apply spr-text-mango-800;
+    @apply spr-text-mango-900;
   }
 
   .spr-text-color-pending-pressed {
-    @apply spr-text-mango-900;
+    @apply spr-text-mango-950;
   }
 
   .spr-text-color-caution-base {
-    @apply spr-text-carrot-700;
+    @apply spr-text-carrot-800;
   }
 
   .spr-text-color-caution-hover {
-    @apply spr-text-carrot-800;
+    @apply spr-text-carrot-900;
   }
 
   .spr-text-color-caution-pressed {
-    @apply spr-text-carrot-900;
+    @apply spr-text-carrot-950;
   }
 
   .spr-text-color-accent-base {
@@ -713,6 +713,25 @@
   }
 
   .spr-background-color-surface {
+    @apply spr-bg-mushroom-50;
+  }
+  .spr-background-color-surface-adaptive {
+    @apply spr-bg-mushroom-950/[0.05];
+  }
+
+  .spr-background-color-base {
+    @apply spr-bg-mushroom-100;
+  }
+
+  .spr-background-color-hover {
+    @apply spr-bg-mushroom-950/[0.08];
+  }
+
+  .spr-background-color-pressed {
+    @apply spr-bg-mushroom-950/[0.12];
+  }
+
+  .spr-background-color-disabled {
     @apply spr-bg-white-100;
   }
 
@@ -728,10 +747,6 @@
     @apply spr-bg-mushroom-800;
   }
 
-  .spr-background-color-base {
-    @apply spr-bg-mushroom-50;
-  }
-
   .spr-background-color-single-active {
     @apply spr-bg-kangkong-100;
   }
@@ -740,18 +755,7 @@
     @apply spr-bg-kangkong-50;
   }
 
-  .spr-background-color-hover {
-    @apply spr-bg-mushroom-50;
-  }
-
-  .spr-background-color-pressed {
-    @apply spr-bg-mushroom-100;
-  }
-
-  .spr-background-color-disabled {
-    @apply spr-bg-white-100;
-  }
-
+  /* BRAND COLORS */
   .spr-background-color-brand-base {
     @apply spr-bg-kangkong-700;
   }
@@ -768,10 +772,18 @@
     @apply spr-bg-kangkong-100;
   }
 
+  .spr-background-color-brand-weak-hover {
+    @apply spr-bg-kangkong-200;
+  }
+  .spr-background-color-brand-weak-pressed {
+    @apply spr-bg-kangkong-300;
+  }
+
   .spr-background-color-success-base {
     @apply spr-bg-kangkong-600;
   }
 
+  /* SUCCESS COLORS */
   .spr-background-color-success-hover {
     @apply spr-bg-kangkong-700;
   }
@@ -784,6 +796,14 @@
     @apply spr-bg-kangkong-100;
   }
 
+  .spr-background-color-success-weak-hover {
+    @apply spr-bg-kangkong-200;
+  }
+  .spr-background-color-success-weak-pressed {
+    @apply spr-bg-kangkong-300;
+  }
+
+  /* INFORMATION COLORS */
   .spr-background-color-information-base {
     @apply spr-bg-blueberry-600;
   }
@@ -799,7 +819,14 @@
   .spr-background-color-information-weak {
     @apply spr-bg-blueberry-100;
   }
+  .spr-background-color-information-weak-hover {
+    @apply spr-bg-blueberry-200;
+  }
+  .spr-background-color-information-weak-pressed {
+    @apply spr-bg-blueberry-300;
+  }
 
+  /* PENDING COLORS */
   .spr-background-color-pending-base {
     @apply spr-bg-mango-500;
   }
@@ -815,7 +842,14 @@
   .spr-background-color-pending-weak {
     @apply spr-bg-mango-100;
   }
+  .spr-background-color-pending-weak-hover {
+    @apply spr-bg-mango-200;
+  }
+  .spr-background-color-pending-weak-pressed {
+    @apply spr-bg-mango-300;
+  }
 
+  /* CAUTION COLORS */
   .spr-background-color-caution-base {
     @apply spr-bg-carrot-500;
   }
@@ -831,7 +865,14 @@
   .spr-background-color-caution-weak {
     @apply spr-bg-carrot-100;
   }
+  .spr-background-color-caution-weak-hover {
+    @apply spr-bg-carrot-200;
+  }
+  .spr-background-color-caution-weak-pressed {
+    @apply spr-bg-carrot-300;
+  }
 
+  /* ACCENT COLORS */
   .spr-background-color-accent-base {
     @apply spr-bg-wintermelon-600;
   }
@@ -847,7 +888,14 @@
   .spr-background-color-accent-weak {
     @apply spr-bg-wintermelon-100;
   }
+  .spr-background-color-accent-weak-hover {
+    @apply spr-bg-wintermelon-200;
+  }
+  .spr-background-color-accent-weak-pressed {
+    @apply spr-bg-wintermelon-300;
+  }
 
+  /* DANGER COLORS */
   .spr-background-color-danger-base {
     @apply spr-bg-tomato-600;
   }
@@ -863,6 +911,12 @@
   .spr-background-color-danger-weak {
     @apply spr-bg-tomato-100;
   }
+  .spr-background-color-danger-weak-hover {
+    @apply spr-bg-tomato-200;
+  }
+  .spr-background-color-danger-weak-pressed {
+    @apply spr-bg-tomato-300;
+  }
 
   .spr-switch-background-default {
     @apply spr-bg-mushroom-200;
@@ -910,6 +964,7 @@
     @apply spr-border-white-200;
   }
 
+  /* BRAND COLORS */
   .spr-border-color-brand-base {
     @apply spr-border-kangkong-700;
   }
@@ -922,6 +977,7 @@
     @apply spr-border-kangkong-900;
   }
 
+  /* SUCCESS COLORS */
   .spr-border-color-success-base {
     @apply spr-border-kangkong-700;
   }
@@ -934,54 +990,59 @@
     @apply spr-border-kangkong-900;
   }
 
+  /* INFORMATION COLORS */
   .spr-border-color-information-base {
-    @apply spr-border-blueberry-700;
+    @apply spr-border-blueberry-800;
   }
 
   .spr-border-color-information-hover {
-    @apply spr-border-blueberry-800;
+    @apply spr-border-blueberry-900;
   }
 
   .spr-border-color-information-pressed {
-    @apply spr-border-blueberry-900;
+    @apply spr-border-blueberry-950;
   }
 
+  /* DANGER COLORS */
   .spr-border-color-danger-base {
-    @apply spr-border-tomato-600;
+    @apply spr-border-tomato-700;
   }
 
   .spr-border-color-danger-hover {
-    @apply spr-border-tomato-700;
+    @apply spr-border-tomato-800;
   }
 
   .spr-border-color-danger-pressed {
-    @apply spr-border-tomato-800;
+    @apply spr-border-tomato-900;
   }
 
+  /* PENDING COLORS */
   .spr-border-color-pending-base {
-    @apply spr-border-mango-700;
+    @apply spr-border-mango-800;
   }
 
   .spr-border-color-pending-hover {
-    @apply spr-border-mango-800;
+    @apply spr-border-mango-900;
   }
 
   .spr-border-color-pending-pressed {
-    @apply spr-border-mango-900;
+    @apply spr-border-mango-950;
   }
 
+  /* CAUTION COLORS */
   .spr-border-color-caution-base {
-    @apply spr-border-carrot-700;
+    @apply spr-border-carrot-800;
   }
 
   .spr-border-color-caution-hover {
-    @apply spr-border-carrot-800;
+    @apply spr-border-carrot-900;
   }
 
   .spr-border-color-caution-pressed {
-    @apply spr-border-carrot-900;
+    @apply spr-border-carrot-950;
   }
 
+  /* ACCENT COLORS */
   .spr-border-color-accent-base {
     @apply spr-border-wintermelon-700;
   }

package/src/components/attribute-filter/attribute-filter.vue

@@ -82,8 +82,8 @@
         <slot name="body">
           <div
             v-if="!noList"
-            ref="filterDropdownRef"
             id="attribute_filter_body"
+            ref="filterDropdownRef"
             class="spr-max-h-[250px] spr-overflow-y-auto"
           >
             <spr-list

package/src/components/audit-trail/audit-trail.ts

@@ -0,0 +1,28 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+export interface AuditTrailLog {
+  userName: string;
+  avatarUrl?: string;
+  title: string;
+  logs: LogEntry[];
+}
+
+export interface LogEntry {
+  label: string[];
+  oldValue: string;
+  newValue: string;
+}
+
+export const auditTrailPropTypes = {
+  auditTrailLogs: {
+    type: Array as PropType<AuditTrailLog[]>,
+    default: () => [],
+  },
+  alwaysOpen: {
+    type: Boolean,
+    default: true,
+  }
+};
+
+export type AuditTrailPropTypes = ExtractPropTypes<typeof auditTrailPropTypes>;

package/src/components/audit-trail/audit-trail.vue

@@ -0,0 +1,104 @@
+<template>
+  <div id="audit_trail_wrapper" ref="auditTrailWrapperRef" class="spr-flex spr-flex-col spr-gap-size-spacing-2xs">
+    <div v-for="(entry, index) in auditTrailLogs" id="audit_trail_entry" :key="index" class="spr-relative spr-h-fit">
+      <div class="spr-absolute spr-h-full spr-py-[6px]">
+        <div
+          :class="[
+            'spr-h-[6px] spr-w-[6px] spr-rounded-full',
+            index === 0 ? 'spr-bg-kangkong-600' : 'spr-bg-mushroom-200',
+          ]"
+        />
+        <div
+          :class="[
+            'spr-relative spr-left-1/2 spr-mt-size-spacing-5xs spr-h-[calc(100%-18px)] spr-w-[1px] spr-translate-x-[-50%]',
+            index === 0 ? 'spr-bg-kangkong-600' : 'spr-bg-mushroom-200',
+            collapsedState[index] ? 'spr-h-[calc(100%-12px)]' : 'spr-h-[calc(100%-22px)]',
+          ]"
+        />
+      </div>
+      <div
+        id="audit_trail_header"
+        class="hover:spr-background-color-hover spr-ml-[10px] spr-flex spr-w-full spr-items-center spr-justify-between spr-gap-size-spacing-3xs spr-self-start spr-px-2 spr-py-[6px] hover:spr-cursor-pointer hover:spr-rounded-lg"
+        @click="toggleCollapse(index)"
+      >
+        <div id="audit_trail_avatar" :class="[{ 'spr-self-start': isMultiLine[index] }]">
+          <SprAvatar v-if="!!entry.avatarUrl" variant="image" :src="entry.avatarUrl" size="sm" />
+          <SprAvatar v-else :initial="entry.userName" size="sm" />
+        </div>
+        <span
+          id="audit_trail_title"
+          :ref="(el) => setTitleRef(el, index)"
+          class="spr-text-color-strong spr-text-200 spr-font-normal"
+        >
+          {{ entry.title }}
+        </span>
+        <div :class="['spr-h-4 spr-w-4', { 'spr-self-start': isMultiLine[index] }]">
+          <Icon
+            :icon="collapsedState[index] ? 'ph:caret-up' : 'ph:caret-down'"
+            width="16px"
+            height="16px"
+            class="spr-text-color-strong"
+          />
+        </div>
+      </div>
+      <div id="audit_trail_logs_wrapper" class="spr-pl-[18px]">
+        <SprCollapsible v-model="collapsedState[index]">
+          <div
+            v-for="(log, logIndex) in entry.logs"
+            id="audit_trail_log_entries"
+            :key="logIndex"
+            :class="[
+              'spr-flex spr-flex-col spr-gap-size-spacing-3xs',
+              { 'spr-pb-size-spacing-3xs': logIndex !== entry.logs.length - 1 },
+            ]"
+          >
+            <div id="log_label">
+              <SprTooltip
+                :text="log.label.join(' > ')"
+                placement="bottom"
+                :show-triggers="log.label.length > 2 ? 'hover' : []"
+              >
+                <div id="entry_label" class="spr-text-color-strong spr-text-200 spr-font-normal">
+                  <template v-if="log.label.length === 1">
+                    {{ log.label[0] }}
+                  </template>
+                  <template v-else-if="log.label.length === 2">
+                    {{ log.label.join(' > ') }}
+                  </template>
+                  <template v-else> {{ log.label[0] }} > ... > {{ log.label[log.label.length - 1] }} </template>
+                </div>
+              </SprTooltip>
+            </div>
+            <div id="log_values" class="spr-flex spr-items-center spr-gap-size-spacing-3xs">
+              <div
+                id="old_value"
+                class="spr-border-color-weak spr-text-color-supporting spr-rounded-border-radius-xs spr-border spr-border-solid spr-px-size-spacing-5xs spr-py-size-spacing-6xs spr-text-200 spr-font-normal"
+              >
+                {{ log.oldValue }}
+              </div>
+              <span class="spr-text-200 spr-font-medium"> → </span>
+              <div
+                id="new_value"
+                class="spr-border-color-weak spr-text-color-strong spr-rounded-border-radius-xs spr-border spr-border-solid spr-px-size-spacing-5xs spr-py-size-spacing-6xs spr-text-200 spr-font-normal"
+              >
+                {{ log.newValue }}
+              </div>
+            </div>
+          </div>
+        </SprCollapsible>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import SprAvatar from '../avatar/avatar.vue';
+import { useAuditTrail } from './use-audit-trail';
+import { auditTrailPropTypes } from './audit-trail';
+import { Icon } from '@iconify/vue';
+import SprCollapsible from '../collapsible/collapsible.vue';
+import SprTooltip from '../tooltip/tooltip.vue';
+
+const props = defineProps(auditTrailPropTypes);
+const { auditTrailLogs, collapsedState, toggleCollapse, setTitleRef, isMultiLine, auditTrailWrapperRef } =
+  useAuditTrail(props);
+</script>

package/src/components/audit-trail/use-audit-trail.ts

@@ -0,0 +1,82 @@
+import type { AuditTrailPropTypes } from './audit-trail';
+import { toRefs, reactive, nextTick, onMounted, onUnmounted, ref } from 'vue';
+export const useAuditTrail = (props: AuditTrailPropTypes) => {
+  const { auditTrailLogs, alwaysOpen } = toRefs(props);
+
+  const collapsedState = reactive(auditTrailLogs.value.map((_, index) => index === 0));
+
+  const toggleCollapse = (index: number) => {
+    if (index < 0 || index >= collapsedState.length) return;
+
+    collapsedState[index] = !collapsedState[index];
+    if (!alwaysOpen.value) {
+      collapsedState.forEach((_, i) => {
+        if (i !== index) {
+          collapsedState[i] = false;
+        }
+      });
+    }
+  };
+  const auditTrailWrapperRef = ref<HTMLElement | null>(null);
+  const titleRefs = reactive<{ [key: number]: HTMLElement | null }>({});
+  const isMultiLine = reactive<{ [key: number]: boolean }>({});
+  const resizeObserver = ref<ResizeObserver | null>(null);
+
+  const setTitleRef = (el: unknown, index: number) => {
+    const element = el as HTMLElement;
+    titleRefs[index] = element;
+    if (element) {
+      checkIfMultiLine(element, index);
+    }
+  };
+
+  const checkIfMultiLine = (element: HTMLElement, index: number) => {
+    nextTick(() => {
+      const computedStyle = getComputedStyle(element);
+      const lineHeight = parseFloat(computedStyle.lineHeight);
+      const elementHeight = element.offsetHeight;
+
+      // If lineHeight is 'normal', calculate it based on font size
+      const actualLineHeight = isNaN(lineHeight) ? parseFloat(computedStyle.fontSize) * 1.2 : lineHeight;
+
+      isMultiLine[index] = elementHeight > actualLineHeight * 1.1;
+    });
+  };
+
+  const checkAllMultiLine = (): void => {
+    Object.entries(titleRefs).forEach(([indexStr, el]) => {
+      if (el) {
+        const index = parseInt(indexStr, 10);
+        checkIfMultiLine(el, index);
+      }
+    });
+  };
+
+  onMounted(() => {
+    nextTick(() => {
+      if (!auditTrailWrapperRef.value) return;
+      resizeObserver.value = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          if (entry.target.id === auditTrailWrapperRef.value?.id) {
+            checkAllMultiLine();
+          }
+        }
+      });
+
+      resizeObserver.value.observe(auditTrailWrapperRef.value);
+    });
+  });
+
+  onUnmounted(() => {
+    resizeObserver.value?.disconnect();
+  });
+
+  return {
+    auditTrailLogs,
+    collapsedState,
+    toggleCollapse,
+    setTitleRef,
+    isMultiLine,
+    auditTrailWrapperRef,
+  };
+};

package/src/components/chips/chips.vue

@@ -8,7 +8,10 @@
     @click="handleClick"
     @keyup.enter="handleClick"
   >
-    <template v-if="variant === 'tag'">
+    <template v-if="slots.default">
+      <slot />
+    </template>
+    <template v-else-if="variant === 'tag'">
       <span v-if="hasIcon" class="chips-icon spr-inline-flex spr-items-center spr-leading-[0]">
         <slot name="icon">
           <Icon :icon="getIcon" class="spr-font-size-300" />

package/src/components/date-picker/{reusable-calendar/reusable-calendar.ts → date-calendar-picker/date-calendar-picker.ts}

@@ -27,7 +27,7 @@ export type RestDayType = 'su' | 'mo' | 'tu' | 'we' | 'th' | 'fr' | 'sa';
 export type DatePickerMode = typeof DATE_PICKER_MODES[number];
 
 // Define props with JSDoc comments for documentation
-export const reusableCalendarPropTypes = {
+export const dateCalendarPickerPropTypes = {
   /**
    * @description The selected date value (v-model)
    */
@@ -109,7 +109,7 @@ export const reusableCalendarPropTypes = {
 };
 
 // Define emits with type validation
-export const reusableCalendarEmitTypes = {
+export const dateCalendarPickerEmitTypes = {
   'update:modelValue': (value: string): value is string => typeof value === 'string',
   'update:month': (month: number): month is number => typeof month === 'number',
   'update:year': (year: number): year is number => typeof year === 'number',
@@ -117,5 +117,5 @@ export const reusableCalendarEmitTypes = {
 };
 
 // Export types for use in other files
-export type ReusableCalendarPropTypes = ExtractPropTypes<typeof reusableCalendarPropTypes>;
-export type ReusableCalendarEmitTypes = typeof reusableCalendarEmitTypes;
+export type DateCalendarPickerPropTypes = ExtractPropTypes<typeof dateCalendarPickerPropTypes>;
+export type DateCalendarPickerEmitTypes = typeof dateCalendarPickerEmitTypes;

package/src/components/date-picker/{reusable-calendar/reusable-calendar.vue → date-calendar-picker/date-calendar-picker.vue}

@@ -1,7 +1,7 @@
 <template>
   <div 
-    ref="reusableCalendarRef"
-    :class="reusableCalendarClasses"
+    ref="dateCalendarPickerRef"
+    :class="dateCalendarPickerClasses"
   >
     <div
       :class="[
@@ -132,13 +132,13 @@ import DatePickerCalendarTab from '../tabs/DatePickerCalendarTab.vue';
 import DatePickerMonthTab from '../tabs/DatePickerMonthTab.vue';
 import DatePickerYearTab from '../tabs/DatePickerYearTab.vue';
 
-import { useReusableCalendar } from './use-reusable-calendar';
-import { reusableCalendarEmitTypes, reusableCalendarPropTypes } from './reusable-calendar';
+import { useDateCalendarPicker } from './use-date-calendar-picker';
+import { dateCalendarPickerEmitTypes, dateCalendarPickerPropTypes } from './date-calendar-picker';
 
-const props = defineProps(reusableCalendarPropTypes);
-const emit = defineEmits(reusableCalendarEmitTypes);
+const props = defineProps(dateCalendarPickerPropTypes);
+const emit = defineEmits(dateCalendarPickerEmitTypes);
 
-const reusableCalendarRef = ref<HTMLElement | null>(null);
+const dateCalendarPickerRef = ref<HTMLElement | null>(null);
 
 // Use the composable for all logic
 const {
@@ -176,12 +176,12 @@ const {
   handleMonthTabMonthUpdateWrapper,
   handleYearTabYearUpdateWrapper,
   handleYearTabCurrentPageUpdateWrapper,
-} = useReusableCalendar(props, emit);
+} = useDateCalendarPicker(props, emit);
 
 // Compute CSS classes using classNames utility
-const reusableCalendarClasses = computed(() => {
+const dateCalendarPickerClasses = computed(() => {
   return classNames(
-    'reusable-calendar-container spr-bg-white spr-rounded-lg spr-shadow-lg spr-border spr-border-solid spr-border-mushroom-200 min-w-[320px]',
+    'date-calendar-picker-container spr-bg-white spr-rounded-lg spr-shadow-lg spr-border spr-border-solid spr-border-mushroom-200 min-w-[320px]',
     {
       'spr-disabled': props.disabled,
       'spr-readonly': props.readonly,

package/src/components/date-picker/{reusable-calendar/use-reusable-calendar.ts → date-calendar-picker/use-date-calendar-picker.ts}

@@ -3,11 +3,11 @@ import { toRefs } from 'vue';
 import dayjs from 'dayjs';
 
 import type { SetupContext } from 'vue';
-import type { ReusableCalendarEmitTypes, ReusableCalendarPropTypes } from './reusable-calendar';
+import type { DateCalendarPickerEmitTypes, DateCalendarPickerPropTypes } from './date-calendar-picker';
 
-export const useReusableCalendar = (
-  props: ReusableCalendarPropTypes, 
-  emit: SetupContext<ReusableCalendarEmitTypes>['emit']
+export const useDateCalendarPicker = (
+  props: DateCalendarPickerPropTypes, 
+  emit: SetupContext<DateCalendarPickerEmitTypes>['emit']
 ) => {
   // Extract reactive props
   const {