design-system-next 2.8.3 → 2.9.1

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

@@ -1,12 +1,16 @@
 import { computed, SetupContext, toRefs, ref, watch } from 'vue';
 import dayjs from 'dayjs';
+import isBetween from 'dayjs/plugin/isBetween';
 import classNames from 'classnames';
+import { useInfiniteScroll } from '@vueuse/core';
 import { useVModel } from '@vueuse/core';
 
+dayjs.extend(isBetween);
+
 import type { CalendarPropTypes, CalendarEmitTypes, SelectedShift } from './calendar';
 
 export const useCalendar = (props: CalendarPropTypes, emit: SetupContext<CalendarEmitTypes>['emit']) => {
-  const { initialDate, companyOptions, departmentOptions, branchOptions } = toRefs(props);
+  const { initialDate, hideAddButton } = toRefs(props);
 
   const state = {
     dateFormat: ref('YYYY-MM-DD'),
@@ -21,13 +25,20 @@ export const useCalendar = (props: CalendarPropTypes, emit: SetupContext<Calenda
     isHover: ref<boolean>(false),
     hoveredCell: ref<number>(),
     employeeId: ref<number>(),
+    sort: ref<string>(''),
+    tableBodyRef: ref<HTMLElement | null>(null),
   };
 
   const searchEmployee = useVModel(props, 'search', emit);
   const selectedCell = useVModel(props, 'selectedCell', emit);
-  const selectedCompany = useVModel(props, 'selectedCompany', emit);
-  const selectedDepartment = useVModel(props, 'selectedDepartment', emit);
-  const selectedBranch = useVModel(props, 'selectedBranch', emit);
+
+  const getSortIcon = computed(() => {
+    if (!state.sort.value) {
+      return 'ph:caret-up-down-light';
+    }
+
+    return state.sort.value === 'asc' ? 'ph:arrow-up' : 'ph:arrow-down';
+  });
 
   const startDate = computed(() => state.currentDate.value.startOf('week'));
 
@@ -63,64 +74,81 @@ export const useCalendar = (props: CalendarPropTypes, emit: SetupContext<Calenda
     state.currentDate.value = state.currentDate.value.add(1, 'week');
   };
 
+  const getFirstAndLastDayOfWeek = () => {
+    if (!state.currentDate.value) return;
+
+    const firstDayOfWeek = state.currentDate.value.startOf('week');
+    const lastDayOfWeek = state.currentDate.value.endOf('week');
+
+    emit('update:firstLastDayOfWeek', {
+      firstDay: firstDayOfWeek.format(state.dateFormat.value),
+      lastDay: lastDayOfWeek.format(state.dateFormat.value),
+    });
+  };
+
   const goToToday = () => {
-    state.currentDate.value = dayjs();
+    const today = dayjs();
+    const currentWeekStart = state.currentDate.value.startOf('week');
+    const currentWeekEnd = state.currentDate.value.endOf('week');
+
+    // Only update if today is not within the current week
+    if (!today.isBetween(currentWeekStart, currentWeekEnd, 'day', '[]')) {
+      state.currentDate.value = today;
+    }
   };
 
-  const onShiftClick = (selected: SelectedShift) => {
+  const onCellClick = (selected: SelectedShift) => {
     selectedCell.value = selected;
+    emit('onCellClick', selected);
   };
 
   const handleHover = (isHover: boolean, index: number, employeeId: number) => {
     state.isHover.value = isHover;
-    state.hoveredCell.value = isHover ? index : null;
+    state.hoveredCell.value = isHover ? index : undefined;
     state.employeeId.value = employeeId;
   };
 
   const showAddShift = (index: number, employeeId: number) => {
-    return state.hoveredCell.value === index && state.isHover.value && state.employeeId.value === employeeId;
+    return (
+      state.hoveredCell.value === index &&
+      state.isHover.value &&
+      state.employeeId.value === employeeId &&
+      !hideAddButton.value
+    );
   };
 
-  const handleFilter = (filter: string, selected: string) => {
-    if (filter === 'company') {
-      const foundCompany = companyOptions.value.find((item) => item.value === selected);
-      state.selectedCompany.value = foundCompany?.text ?? '';
-      selectedCompany.value = selected;
-    }
-
-    if (filter === 'department') {
-      const foundCompany = departmentOptions.value.find((item) => item.value === selected);
-      state.selectedDepartment.value = foundCompany?.text ?? '';
-      selectedDepartment.value = selected;
-    }
-
-    if (filter === 'branch') {
-      const foundCompany = branchOptions.value.find((item) => item.value === selected);
-      state.selectedBranch.value = foundCompany?.text ?? '';
-      selectedBranch.value = selected;
-    }
+  const handleSorting = () => {
+    state.sort.value = state.sort.value === 'desc' ? 'asc' : 'desc';
+    emit('update:sort', state.sort.value);
   };
 
-  watch(state.searchTerm, (value, oldValue) => {
-    if (value === oldValue) return; // Prevent unnecessary updates
-    searchEmployee.value = value;
-  });
+  useInfiniteScroll(
+    state.tableBodyRef,
+    () => {
+      emit('loadMore');
+    },
+    {
+      distance: 50,
+      direction: 'bottom',
+    },
+  );
 
   const getCalendarClasses = computed(() => {
     const borderClasses = classNames(' spr-border spr-border-color-weak spr-border-solid');
     const headerWrapper = classNames(
-      'spr-bg-color-weak spr-flex spr-w-full spr-items-center spr-justify-between spr-border-x-0 spr-border-b spr-border-t-0 spr-p-size-spacing-sm',
+      'spr-bg-color-weak spr-flex spr-w-full spr-items-center spr-justify-between spr-p-size-spacing-sm',
     );
 
     const contentWrapper = classNames('spr-divide-color-weak spr-divide-x-0 spr-divide-y spr-divide-solid');
-    const calendarFilter = classNames('spr-grid spr-grid-cols-4 spr-gap-size-spacing-2xs spr-p-size-spacing-xs');
     const calendarTable = classNames(
-      'spr-table spr-w-full spr-table-fixed spr-border-collapse spr-border-spacing-0 spr-overflow-hidden spr-rounded-border',
+      ' spr-overflow-y-auto spr-h-full spr-table spr-w-full spr-table-fixed spr-border-collapse spr-border-spacing-0 spr-rounded-border',
     );
     const tableHeaderEmployeeName = classNames(
-      'spr-body-xs-regular-medium spr-border-x spr-border-y spr-p-size-spacing-xs spr-text-left first:spr-border-l-0 spr-overflow-hidden',
+      'spr-sticky spr-left-0 spr-z-20 spr-background-color spr-body-xs-regular-medium spr-p-size-spacing-xs spr-text-left spr-overflow-hidden spr-h-full',
+    );
+    const tableHeader = classNames(
+      'spr-background-color spr-border-x-0 spr-border-y-0 spr-border-l  spr-p-size-spacing-sm spr-text-center',
     );
-    const tableHeader = classNames('spr-border-x-0 spr-border-y spr-border-l spr-p-size-spacing-sm spr-text-center');
     const headerContent = classNames(
       'spr-flex  spr-flex-row spr-w-full spr-items-center spr-gap-size-spacing-3xs lg:spr-flex-col spr-overflow-hidden',
     );
@@ -128,11 +156,16 @@ export const useCalendar = (props: CalendarPropTypes, emit: SetupContext<Calenda
       'spr-font-size-400 spr-line-height-500 spr-letter-spacing-dense spr-flex spr-h-size-spacing-md spr-w-size-spacing-md spr-items-center spr-justify-center spr-rounded-full spr-font-main spr-font-normal',
     );
 
+    getFirstAndLastDayOfWeek();
+
+    watch(state.searchTerm, (value, oldValue) => {
+      if (value === oldValue) return; // Prevent unnecessary updates
+      searchEmployee.value = value;
+    });
     return {
       borderClasses,
       headerWrapper,
       contentWrapper,
-      calendarFilter,
       calendarTable,
       tableHeaderEmployeeName,
       tableHeader,
@@ -145,16 +178,17 @@ export const useCalendar = (props: CalendarPropTypes, emit: SetupContext<Calenda
     weekDates,
     weekRangeDisplay,
     getCalendarClasses,
+    getSortIcon,
 
     formatDate,
     isToday,
     prevWeek,
     nextWeek,
     goToToday,
-    onShiftClick,
+    onCellClick,
     handleHover,
     showAddShift,
-    handleFilter,
+    handleSorting,
 
     ...state,
   };

package/src/components/calendar-cell/use-calendar-cell.ts

@@ -110,7 +110,6 @@ export const useCalendarCell = (props: CalendarCellPropTypes, emit: SetupContext
 
       return;
     }
-
     emit('onClick', evt);
   };
 

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

@@ -358,13 +358,17 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
   };
   // #endregion - Helper Methods
 
-  watch(menuList, () => {
-    localizedMenuList.value = [];
-    groupedMenuList.value = [];
+  watch(
+    menuList,
+    () => {
+      localizedMenuList.value = [];
+      groupedMenuList.value = [];
 
-    setMenuList();
-    setPreSelectedItems();
-  });
+      setMenuList();
+      setPreSelectedItems();
+    },
+    { deep: true },
+  );
 
   onMounted(() => {
     setMenuList();

package/src/components/select/select-ladderized/use-select-ladderized.ts

@@ -1,164 +1,164 @@
-import { ref, toRefs, computed, watch } from 'vue';
-import { useVModel, useDebounceFn, onClickOutside } from '@vueuse/core';
-
-import type { SelectLadderizedPropTypes } from './select-ladderized';
-
-import type { MenuListType } from '@/components/list/list';
-
-export const useSelectLadderized = (
-  props: SelectLadderizedPropTypes,
-  emit: (event: string, ...args: unknown[]) => void,
-) => {
-  const { options, disabled } = toRefs(props);
-
-  const ladderizedClasses = computed(() => ({
-    baseClasses: 'spr-flex spr-flex-col spr-gap-size-spacing-4xs',
-    labelClasses: 'spr-body-sm-regular spr-text-color-strong spr-block',
-  }));
-
-  // Popper Variables
-  const ladderizedSelectPopperState = ref(false);
-  const ladderizedSelectRef = ref(null);
-  const isLadderizedSelectPopperDisabled = computed(() => disabled.value);
-
-  // Ladderized Select Model
-  const ladderizedSelectModel = useVModel(props, 'modelValue', emit);
-  const ladderizedSelectOptions = computed(() => options.value);
-
-  // Input Variables
-  const inputText = ref<string>('');
-  const isSearching = ref(false);
-  const wasCleared = ref(false);
-
-  const isLeafNode = (item: MenuListType): boolean => {
-    return !item.sublevel || item.sublevel.length === 0;
-  };
-
-  // Helper to find the path to a selected value in the menu tree
-  const findPathToValue = (items: MenuListType[], value: string | number, path: string[] = []): string[] | null => {
-    for (const item of items) {
-      const newPath = [...path, item.text];
-
-      if (item.value === value) {
-        return newPath;
-      }
-
-      if (item.sublevel) {
-        const result = findPathToValue(item.sublevel, value, newPath);
-
-        if (result) return result;
-      }
-    }
-
-    return null;
-  };
-
-  const handleSelectedLadderizedItem = (selectedItems: string[], selectedItem?: MenuListType) => {
-    wasCleared.value = false;
-    ladderizedSelectModel.value = selectedItems;
-
-    let itemToCheck = selectedItem;
-
-    // Fallback: if selectedItem is not provided, try to find it from the value
-    if (!itemToCheck && selectedItems.length > 0) {
-      const findItemByValue = (items: MenuListType[], value: string | number): MenuListType | undefined => {
-        for (const item of items) {
-          if (item.value === value) return item;
-
-          if (item.sublevel) {
-            const found = findItemByValue(item.sublevel, value);
-
-            if (found) return found;
-          }
-        }
-
-        return undefined;
-      };
-
-      itemToCheck = findItemByValue(ladderizedSelectOptions.value, selectedItems[selectedItems.length - 1]);
-    }
-
-    if (itemToCheck) {
-      const path = findPathToValue(ladderizedSelectOptions.value, itemToCheck.value);
-
-      inputText.value = path ? path.join(' > ') : itemToCheck.text || '';
-
-      if (isLeafNode(itemToCheck)) {
-        ladderizedSelectPopperState.value = false;
-      }
-    } else if (selectedItems.length === 0 && !wasCleared.value) {
-      inputText.value = '';
-    }
-  };
-
-  const handleSearch = () => {
-    isSearching.value = true;
-
-    debouncedEmitSearch();
-  };
-
-  const debouncedEmitSearch = useDebounceFn(() => {
-    // Optionally emit search event here if needed
-  }, 300);
-
-  const handleClear = () => {
-    wasCleared.value = true;
-
-    inputText.value = '';
-
-    emit('update:modelValue', []);
-  };
-
-  const handleOptionsToggle = () => {
-    ladderizedSelectPopperState.value = true;
-
-    isSearching.value = false;
-  };
-
-  // Watch for changes in modelValue to update inputText
-  watch(
-    () => ladderizedSelectModel.value,
-    (newVal) => {
-      if (wasCleared.value) {
-        inputText.value = '';
-        wasCleared.value = false;
-        return;
-      }
-
-      if (Array.isArray(newVal) && newVal.length > 0) {
-        // Treat the array as a single path for ladderized select
-        let currentLevel = ladderizedSelectOptions.value;
-
-        const pathTexts: string[] = [];
-
-        for (const value of newVal) {
-          const found = currentLevel.find((item) => item.value === value);
-          if (!found) break;
-          pathTexts.push(found.text);
-          currentLevel = found.sublevel || [];
-        }
-
-        inputText.value = pathTexts.join(' > ');
-      }
-    },
-    { immediate: true },
-  );
-
-  onClickOutside(ladderizedSelectRef, () => {
-    ladderizedSelectPopperState.value = false;
-  });
-
-  return {
-    ladderizedClasses,
-    ladderizedSelectPopperState,
-    ladderizedSelectRef,
-    ladderizedSelectOptions,
-    isLadderizedSelectPopperDisabled,
-    ladderizedSelectModel,
-    inputText,
-    handleSelectedLadderizedItem,
-    handleSearch,
-    handleClear,
-    handleOptionsToggle,
-  };
-};
+import { ref, toRefs, computed, watch } from 'vue';
+import { useVModel, useDebounceFn, onClickOutside } from '@vueuse/core';
+
+import type { SelectLadderizedPropTypes } from './select-ladderized';
+
+import type { MenuListType } from '@/components/list/list';
+
+export const useSelectLadderized = (
+  props: SelectLadderizedPropTypes,
+  emit: (event: string, ...args: unknown[]) => void,
+) => {
+  const { options, disabled } = toRefs(props);
+
+  const ladderizedClasses = computed(() => ({
+    baseClasses: 'spr-flex spr-flex-col spr-gap-size-spacing-4xs',
+    labelClasses: 'spr-body-sm-regular spr-text-color-strong spr-block',
+  }));
+
+  // Popper Variables
+  const ladderizedSelectPopperState = ref(false);
+  const ladderizedSelectRef = ref(null);
+  const isLadderizedSelectPopperDisabled = computed(() => disabled.value);
+
+  // Ladderized Select Model
+  const ladderizedSelectModel = useVModel(props, 'modelValue', emit);
+  const ladderizedSelectOptions = computed(() => options.value);
+
+  // Input Variables
+  const inputText = ref<string>('');
+  const isSearching = ref(false);
+  const wasCleared = ref(false);
+
+  const isLeafNode = (item: MenuListType): boolean => {
+    return !item.sublevel || item.sublevel.length === 0;
+  };
+
+  // Helper to find the path to a selected value in the menu tree
+  const findPathToValue = (items: MenuListType[], value: string | number, path: string[] = []): string[] | null => {
+    for (const item of items) {
+      const newPath = [...path, item.text];
+
+      if (item.value === value) {
+        return newPath;
+      }
+
+      if (item.sublevel) {
+        const result = findPathToValue(item.sublevel, value, newPath);
+
+        if (result) return result;
+      }
+    }
+
+    return null;
+  };
+
+  const handleSelectedLadderizedItem = (selectedItems: string[], selectedItem?: MenuListType) => {
+    wasCleared.value = false;
+    ladderizedSelectModel.value = selectedItems;
+
+    let itemToCheck = selectedItem;
+
+    // Fallback: if selectedItem is not provided, try to find it from the value
+    if (!itemToCheck && selectedItems.length > 0) {
+      const findItemByValue = (items: MenuListType[], value: string | number): MenuListType | undefined => {
+        for (const item of items) {
+          if (item.value === value) return item;
+
+          if (item.sublevel) {
+            const found = findItemByValue(item.sublevel, value);
+
+            if (found) return found;
+          }
+        }
+
+        return undefined;
+      };
+
+      itemToCheck = findItemByValue(ladderizedSelectOptions.value, selectedItems[selectedItems.length - 1]);
+    }
+
+    if (itemToCheck) {
+      const path = findPathToValue(ladderizedSelectOptions.value, itemToCheck.value);
+
+      inputText.value = path ? path.join(' > ') : itemToCheck.text || '';
+
+      if (isLeafNode(itemToCheck)) {
+        ladderizedSelectPopperState.value = false;
+      }
+    } else if (selectedItems.length === 0 && !wasCleared.value) {
+      inputText.value = '';
+    }
+  };
+
+  const handleSearch = () => {
+    isSearching.value = true;
+
+    debouncedEmitSearch();
+  };
+
+  const debouncedEmitSearch = useDebounceFn(() => {
+    // Optionally emit search event here if needed
+  }, 300);
+
+  const handleClear = () => {
+    wasCleared.value = true;
+
+    inputText.value = '';
+
+    emit('update:modelValue', []);
+  };
+
+  const handleOptionsToggle = () => {
+    ladderizedSelectPopperState.value = true;
+
+    isSearching.value = false;
+  };
+
+  // Watch for changes in modelValue to update inputText
+  watch(
+    () => ladderizedSelectModel.value,
+    (newVal) => {
+      if (wasCleared.value) {
+        inputText.value = '';
+        wasCleared.value = false;
+        return;
+      }
+
+      if (Array.isArray(newVal) && newVal.length > 0) {
+        // Treat the array as a single path for ladderized select
+        let currentLevel = ladderizedSelectOptions.value;
+
+        const pathTexts: string[] = [];
+
+        for (const value of newVal) {
+          const found = currentLevel.find((item) => item.value === value);
+          if (!found) break;
+          pathTexts.push(found.text);
+          currentLevel = found.sublevel || [];
+        }
+
+        inputText.value = pathTexts.join(' > ');
+      }
+    },
+    { immediate: true },
+  );
+
+  onClickOutside(ladderizedSelectRef, () => {
+    ladderizedSelectPopperState.value = false;
+  });
+
+  return {
+    ladderizedClasses,
+    ladderizedSelectPopperState,
+    ladderizedSelectRef,
+    ladderizedSelectOptions,
+    isLadderizedSelectPopperDisabled,
+    ladderizedSelectModel,
+    inputText,
+    handleSelectedLadderizedItem,
+    handleSearch,
+    handleClear,
+    handleOptionsToggle,
+  };
+};

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

@@ -147,9 +147,13 @@ export const useSelect = (props: SelectPropTypes, emit: SetupContext<SelectEmitT
     return selectOptions.value.filter((item) => item.text?.toString().toLowerCase().includes(query));
   });
 
-  watch(options, () => {
-    processOptions();
-  });
+  watch(
+    options,
+    () => {
+      processOptions();
+    },
+    { deep: true },
+  );
 
   // Search handler: always emit search-string, but only filter locally if local search is enabled
   const handleSearch = () => {

package/src/components/stepper/step/step.ts

@@ -1,4 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue';
+import { STEPPER_TYPE } from '../stepper';
 
 export const STEP_STATES = ['pending', 'active', 'completed'] as const;
 
@@ -29,6 +30,13 @@ export const stepPropTypes = {
     validator: (value: (typeof STEP_STATES)[number]) => STEP_STATES.includes(value),
     default: 'pending',
   },
+  /**
+     * @description Display type of stepper if displayed as compact (no solid bg color) or solid
+     */
+  type: {
+    type: String as PropType<(typeof STEPPER_TYPE)[number]>,
+    validator: (value: (typeof STEPPER_TYPE)[number]) => STEPPER_TYPE.includes(value),
+  }
 };
 
 export const stepEmitTypes = {

package/src/components/stepper/step/step.vue

@@ -2,7 +2,8 @@
   <div :class="stepClasses.baseClass">
     <!-- STEP NUMBER -->
     <div :class="stepClasses.badgeClass">
-      <span :class="stepClasses.numberClass">
+      <icon v-if="props.status === 'completed' && props.type === 'solid'" icon="ph:check-bold" width="14px" height="14px" class="spr-text-color-inverted-strong"/>
+      <span v-else :class="stepClasses.numberClass">
         {{ props.number }}
       </span>
     </div>
@@ -23,6 +24,7 @@
 <script setup lang="ts">
 import { stepEmitTypes, stepPropTypes } from '@/components/stepper/step/step';
 import { useStep } from '@/components/stepper/step/use-step';
+import { Icon } from '@iconify/vue'; 
 
 const props = defineProps(stepPropTypes);
 const emit = defineEmits(stepEmitTypes);

package/src/components/stepper/step/use-step.ts

@@ -16,19 +16,29 @@ interface StepClasses {
 export const useStep = (props: StepPropTypes, emit: SetupContext<StepEmitTypes>['emit']) => {
 
   const stepClasses: ComputedRef<StepClasses> = computed(() => {
-    const baseClass = classNames('spr-flex spr-gap-2 spr-items-center');
+    const baseClass = classNames(
+      'spr-flex spr-gap-2 spr-items-top', 
+      {
+        'spr-p-size-spacing-3xs spr-rounded-border-radius-lg': props.type === 'solid',
+        'spr-background-color-brand-weak': props.status === 'active' && props.type === 'solid',
+        'spr-opacity-60': props.status === 'completed' && props.type === 'solid'
+      }
+    );
     
     // Usage of prop.status ensures reactivity instead of destructuring props
     const badgeClass = classNames(
-      'spr-flex spr-items-center spr-justify-center spr-rounded-border-radius-full spr-h-6 spr-w-6 spr-border spr-border-solid spr-border-2',
+      'spr-flex spr-items-center spr-justify-center spr-rounded-border-radius-full spr-h-6 spr-w-6 spr-border spr-border-solid',
       {
-        'spr-bg-kangkong-700 spr-border-kangkong-700': props.status === 'active',
+        'spr-border-2': props.type !== 'solid',
+        'spr-border-1': props.type === 'solid',
+        'spr-background-color-brand-base spr-border-color-brand-base': props.status === 'active',
         'spr-border-mushroom-300': props.status === 'pending',
         'spr-border-kangkong-700': props.status === 'completed',
+        'spr-background-color-brand-base': props.status === 'completed' && props.type === 'solid'
       }
     );
     
-    const numberClass = classNames('spr-text-sm spr-font-medium', 
+    const numberClass = classNames('spr-body-md-regular-medium', 
       {
         'spr-text-white-50': props.status === 'active',
         'spr-text-mushroom-600': props.status === 'pending',
@@ -36,18 +46,20 @@ export const useStep = (props: StepPropTypes, emit: SetupContext<StepEmitTypes>[
       }
     );
 
-    const textContainerClass = classNames('spr-flex spr-flex-col spr-relative');
+    const textContainerClass = classNames('spr-flex spr-flex-col spr-mt-[2px]');
 
-    const labelClass = classNames('spr-text-sm spr-whitespace-nowrap', 
+    const labelClass = classNames('spr-body-md-regular spr-whitespace-nowrap', 
       {
-      'spr-text-kangkong-700 spr-font-semibold': props.status === 'active',
-      'spr-text-mushroom-600': props.status === 'pending',
-      'spr-text-mushroom-950': props.status === 'completed',
+        'spr-text-kangkong-700 !spr-body-md-regular-medium': props.status === 'active' && props.type === 'compact',
+        'spr-text-mushroom-600': props.status === 'pending',
+        'spr-text-mushroom-950': props.status === 'completed',
       }
     );
 
     // Absolute since the sample in the figma is a hanging text for description
-    const descriptionClass = classNames('spr-text-xs spr-text-mushroom-400 spr-absolute spr-mt-size-spacing-sm spr-whitespace-nowrap');
+    const descriptionClass = classNames(
+      'spr-body-sm-regular spr-text-color-supporting spr-whitespace-nowrap',
+    );
 
     return {
       baseClass,