design-system-next 2.8.1 → 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/select-ladderized.ts

@@ -30,7 +30,7 @@ export const selectLadderizedPropTypes = {
     type: Array as PropType<string[]>,
     default: () => [],
   },
-  menuList: {
+  options: {
     type: Array as PropType<MenuListType[]>,
     required: true,
     default: () => [],
@@ -59,11 +59,11 @@ export const selectLadderizedPropTypes = {
     type: Boolean,
     default: false,
   },
-  searchableMenu: {
+  searchableOptions: {
     type: Boolean,
     default: false,
   },
-  searchableMenuPlaceholder: {
+  searchableOptionsPlaceholder: {
     type: String,
     default: 'Search...',
   },

package/src/components/select/select-ladderized/select-ladderized.vue

@@ -23,7 +23,7 @@
         width: props.width,
       }"
     >
-      <div @click="handleMenuToggle">
+      <div @click="handleOptionsToggle">
         <spr-input
           v-model="inputText"
           class="spr-cursor-pointer"
@@ -57,15 +57,15 @@
           ref="ladderizedSelectRef"
           class="spr-grid spr-max-h-[300px] spr-gap-0.5 spr-overflow-y-auto spr-overflow-x-hidden"
         >
-          <template v-if="ladderizedSelectMenuList.length > 0">
+          <template v-if="ladderizedSelectOptions.length > 0">
             <spr-ladderized-list
               v-model="ladderizedSelectModel"
               :ladderized="true"
-              :menu-list="ladderizedSelectMenuList"
+              :menu-list="ladderizedSelectOptions"
               :menu-level="ladderizedSelectModel.length"
               :remove-current-level-in-back-label="props.removeCurrentLevelInBackLabel"
-              :searchable-menu="props.searchableMenu"
-              :searchable-menu-placeholder="props.searchableMenuPlaceholder"
+              :searchable-menu="props.searchableOptions"
+              :searchable-menu-placeholder="props.searchableOptionsPlaceholder"
               @update:model-value="handleSelectedLadderizedItem"
             />
           </template>
@@ -99,13 +99,13 @@ const {
   ladderizedClasses,
   ladderizedSelectPopperState,
   ladderizedSelectRef,
-  ladderizedSelectMenuList,
+  ladderizedSelectOptions,
   isLadderizedSelectPopperDisabled,
   ladderizedSelectModel,
   inputText,
   handleSelectedLadderizedItem,
   handleSearch,
   handleClear,
-  handleMenuToggle,
+  handleOptionsToggle,
 } = useSelectLadderized(props, emit);
 </script>

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

@@ -1,165 +1,164 @@
-import { ref, computed, watch } from 'vue';
-import { 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 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(() => props.disabled);
-
-  // Ladderized Select Model
-  const ladderizedSelectModel = computed({
-    get: () => props.modelValue,
-    set: (val) => emit('update:modelValue', val),
-  });
-  const ladderizedSelectMenuList = computed(() => props.menuList);
-
-  // 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(ladderizedSelectMenuList.value, selectedItems[selectedItems.length - 1]);
-    }
-
-    if (itemToCheck) {
-      const path = findPathToValue(ladderizedSelectMenuList.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 handleMenuToggle = () => {
-    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 = ladderizedSelectMenuList.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,
-    ladderizedSelectMenuList,
-    isLadderizedSelectPopperDisabled,
-    ladderizedSelectModel,
-    inputText,
-    handleSelectedLadderizedItem,
-    handleSearch,
-    handleClear,
-    handleMenuToggle,
-  };
-};
+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/select-multiple/select-multiple.ts

@@ -36,7 +36,7 @@ export const multiSelectPropTypes = {
     >,
     default: () => [],
   },
-  menuList: {
+  options: {
     type: Array as PropType<MenuListType[] | string[] | Record<string, unknown>[]>,
     required: true,
     default: [],
@@ -110,22 +110,11 @@ export const multiSelectPropTypes = {
     type: Boolean,
     default: false,
   },
-  searchable: {
-    type: Boolean,
-    default: false,
-  },
-  disabledLocalSearch: {
-    type: Boolean,
-    default: false,
-  },
 };
 
 export const multiSelectEmitTypes = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   'update:modelValue': (_value: unknown) => true,
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  'search-string': (_search: string | number) => true,
 };
 
 export type MultiSelectPropTypes = ExtractPropTypes<typeof multiSelectPropTypes>;