design-system-next 2.16.2 → 2.17.4

package/src/assets/styles/tailwind.css

@@ -269,6 +269,26 @@
     @apply spr-min-w-[328px] spr-drop-shadow-md;
   }
   /* #endregion - Filter, time-picker */
+
+  /* #region - Popper */
+  #popper-wrapper {
+    @apply spr-border-color-weak spr-border-color-weak spr-z-[1000] spr-w-[inherit] spr-min-w-[240px] spr-rounded-border-radius-xl spr-border spr-border-solid spr-shadow-drop;
+
+    .v-popper__wrapper {
+      .v-popper__inner {
+        @apply spr-w-full spr-rounded-border-radius-xl spr-border-none spr-font-main spr-shadow-none;
+
+        &::-webkit-scrollbar-track {
+          @apply spr-rounded-br-xl spr-rounded-tr-xl;
+        }
+      }
+
+      .v-popper__arrow-container {
+        @apply spr-hidden;
+      }
+    }
+  }
+  /* #endregion - Popper */
 }
 
 @layer utilities {

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

@@ -103,10 +103,14 @@ export const attributeFilterPropTypes = {
     type: Boolean,
     default: false,
   },
-  showBadge: {
+  showSelectedFilterCount: {
     type: Boolean,
     default: true,
   },
+  selectedFilterCount: {
+    type: String,
+    default: undefined,
+  },
   badgeVariant: {
     type: String,
     default: 'danger',

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

@@ -26,10 +26,10 @@
           :label="props.filterLabel"
           :active="isFilterActive"
           icon="ph:funnel-simple"
-          :badge="props.showBadge && savedFilters.length > 0"
-          :badge-text="savedFilters.length.toString()"
+          :badge="props.showSelectedFilterCount"
+          :badge-text="props.selectedFilterCount ?? savedFilters.length.toString()"
           :badge-variant="props.badgeVariant"
-          :closable="props.clearable && savedFilters.length > 0"
+          :closable="props.clearable"
           :disabled="props.disabled"
           @close="handleClear"
         />

package/src/components/calendar/calendar.ts

@@ -67,7 +67,7 @@ export const calendarPropTypes = {
     type: String,
     default: '',
   },
-  hideAddButton: {
+  hideCopyButton: {
     type: Boolean,
     default: false,
   },

package/src/components/calendar/calendar.vue

@@ -124,7 +124,7 @@
                         class="spr-w-full"
                       >
                         <div
-                          v-if="schedule.type === 'restday'"
+                          v-if="schedule.type === 'restday' || schedule.type === 'exempted'"
                           class="spr-flex spr-flex-col spr-items-center spr-justify-start"
                           @click="
                             onCellClick({
@@ -134,7 +134,7 @@
                             })
                           "
                         >
-                          <spr-calendar-cell type="restday" fullwidth />
+                          <spr-calendar-cell :type="schedule.type === 'restday' ? 'restday' : 'exempt'" fullwidth />
                         </div>
                         <div
                           v-else
@@ -159,21 +159,41 @@
                       </div>
                     </section>
 
-                    <section v-if="showAddShift(index, employee.id)">
-                      <spr-calendar-cell
-                        status="pending"
-                        type="exempt"
-                        :view-only="false"
-                        fullwidth
-                        @on-click="
-                          onCellClick({ employeeId: employee.id, date: formatDate(date, dateFormat), shift: null })
-                        "
+                    <section v-if="showCustomSlot(index, employee.id)">
+                      <slot
+                        name="cell"
+                        :details="{
+                          employeeId: employee.id,
+                          date: formatDate(date, dateFormat),
+                          shift: employee.schedule[formatDate(date, dateFormat)],
+                        }"
+                      />
+                    </section>
+
+                    <section v-if="showCopyShift(index, employee.id)">
+                      <slot
+                        name="copy"
+                        :copy="{
+                          employeeId: employee.id,
+                          date: formatDate(date, dateFormat),
+                          shift: employee.schedule[formatDate(date, dateFormat)],
+                        }"
                       >
-                        <template #prefix>
-                          <Icon icon="ph:plus" />
-                        </template>
-                        <div class="spr-label-xs-medium">Add New Shift</div>
-                      </spr-calendar-cell>
+                        <spr-calendar-cell
+                          :view-only="false"
+                          custom-border-size="1"
+                          custom-color="#FFFFFF"
+                          fullwidth
+                          @on-click="
+                            onCellClick({ employeeId: details.employeeId, date: details.date, shift: details.shift })
+                          "
+                        >
+                          <div class="spr-flex spr-w-full spr-items-center spr-justify-center spr-gap-size-spacing-3xs">
+                            <Icon icon="ph:copy-light" />
+                            <div class="spr-label-xs-medium">Copy</div>
+                          </div>
+                        </spr-calendar-cell>
+                      </slot>
                     </section>
                   </td>
                 </tr>
@@ -257,6 +277,7 @@
 </template>
 
 <script setup lang="ts">
+import { useSlots } from 'vue';
 import { Icon } from '@iconify/vue';
 import SprButton from '@/components/button/button.vue';
 import SprAvatar from '@/components/avatar/avatar.vue';
@@ -269,6 +290,7 @@ import { calendarPropTypes, calendarEmitTypes } from './calendar';
 const props = defineProps(calendarPropTypes);
 import { useCalendar } from './use-calendar';
 const emit = defineEmits(calendarEmitTypes);
+const slots = useSlots();
 
 const {
   // State
@@ -287,7 +309,8 @@ const {
   goToToday,
   onCellClick,
   handleHover,
-  showAddShift,
+  showCopyShift,
   handleSorting,
-} = useCalendar(props, emit);
+  showCustomSlot,
+} = useCalendar(props, emit, slots);
 </script>

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

@@ -1,4 +1,4 @@
-import { computed, SetupContext, toRefs, ref, watch } from 'vue';
+import { computed, SetupContext, toRefs, ref, watch, Slots } from 'vue';
 import dayjs from 'dayjs';
 import isBetween from 'dayjs/plugin/isBetween';
 import classNames from 'classnames';
@@ -9,8 +9,8 @@ dayjs.extend(isBetween);
 
 import type { CalendarPropTypes, CalendarEmitTypes, SelectedShift } from './calendar';
 
-export const useCalendar = (props: CalendarPropTypes, emit: SetupContext<CalendarEmitTypes>['emit']) => {
-  const { initialDate, hideAddButton } = toRefs(props);
+export const useCalendar = (props: CalendarPropTypes, emit: SetupContext<CalendarEmitTypes>['emit'], slots: Slots) => {
+  const { initialDate, hideCopyButton } = toRefs(props);
 
   const state = {
     dateFormat: ref('YYYY-MM-DD'),
@@ -108,12 +108,18 @@ export const useCalendar = (props: CalendarPropTypes, emit: SetupContext<Calenda
     state.employeeId.value = employeeId;
   };
 
-  const showAddShift = (index: number, employeeId: number) => {
+  const showCopyShift = (index: number, employeeId: number) => {
     return (
       state.hoveredCell.value === index &&
       state.isHover.value &&
       state.employeeId.value === employeeId &&
-      !hideAddButton.value
+      !hideCopyButton.value
+    );
+  };
+
+  const showCustomSlot = (index: number, employeeId: number) => {
+    return (
+      state.hoveredCell.value === index && state.isHover.value && state.employeeId.value === employeeId && slots.cell
     );
   };
 
@@ -191,8 +197,9 @@ export const useCalendar = (props: CalendarPropTypes, emit: SetupContext<Calenda
     goToToday,
     onCellClick,
     handleHover,
-    showAddShift,
+    showCopyShift,
     handleSorting,
+    showCustomSlot,
 
     ...state,
   };

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

@@ -55,6 +55,10 @@ export const calendarCellPropTypes = {
     type: String,
     default: '',
   },
+  customBorderSize: {
+    type: String,
+    default: null,
+  },
 };
 
 export type CalendarCellPropTypes = ExtractPropTypes<typeof calendarCellPropTypes>;

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

@@ -4,8 +4,19 @@ import classNames from 'classnames';
 import type { CalendarCellPropTypes, CalendarCellEmitTypes } from './calendar-cell';
 
 export const useCalendarCell = (props: CalendarCellPropTypes, emit: SetupContext<CalendarCellEmitTypes>['emit']) => {
-  const { title, description, type, status, subDescription, icon, fullwidth, viewOnly, loading, customColor } =
-    toRefs(props);
+  const {
+    title,
+    description,
+    type,
+    status,
+    subDescription,
+    icon,
+    fullwidth,
+    viewOnly,
+    loading,
+    customColor,
+    customBorderSize,
+  } = toRefs(props);
   const offlineStatus = ['restday', 'vacation', 'holiday', 'exempt', 'sick', 'emergency'];
   const shiftLabels: Record<string, string> = {
     standard: 'Standard Day Shift',
@@ -68,6 +79,12 @@ export const useCalendarCell = (props: CalendarCellPropTypes, emit: SetupContext
 
   const getCustomColorStyles = computed(() => {
     if (!customColor.value || !customColor.value.startsWith('#')) return {};
+    if (customColor.value === '#FFFFFF') {
+      return {
+        borderColor: '#B8C1C0',
+        backgroundColor: customColor.value,
+      };
+    }
 
     const opacity = '20'; // 20 in hex = 12.5% opacity
 
@@ -80,11 +97,13 @@ export const useCalendarCell = (props: CalendarCellPropTypes, emit: SetupContext
   const getCalendarCellClassess = computed(() => {
     const calendarCellWrapper = classNames(
       'spr-flex spr-items-center spr-p-size-spacing-3xs spr-gap-size-spacing-3xs spr-relative spr-rounded-lg spr-border-2 spr-transition-all sm:spr-flex-col spr-overflow-hidden',
+
       {
         'spr-w-full': fullwidth.value,
         'spr-max-w-[217px]': !fullwidth.value,
         'hover:spr-drop-shadow-sm spr-cursor-pointer': !viewOnly.value,
         'spr-h-[80px] spr-skeletal-loader': loading.value,
+        [`spr-border-[${customBorderSize.value}px]`]: customBorderSize.value,
       },
     );
 

package/src/components/card/card.ts

@@ -12,6 +12,7 @@ export const cardPropTypes = {
   tone: {
     type: String as PropType<(typeof TONES)[number] | undefined>,
     validator: (val: string | undefined) => !val || TONES.includes(val as (typeof TONES)[number]),
+    default: 'plain',
   },
   title: {
     type: String,
@@ -59,6 +60,10 @@ export const cardPropTypes = {
     type: Boolean,
     default: false,
   },
+  customBorderSize: {
+    type: String,
+    default: null,
+  },
 };
 
 export type CardPropTypes = ExtractPropTypes<typeof cardPropTypes>;

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

@@ -12,8 +12,17 @@ interface CardClasses {
 }
 
 export const useCard = (props: CardPropTypes, slots: Slots) => {
-  const { tone, title, headerIcon, borderRadiusSize, hasCollapsible, isCollapsibleOpen, hasContentPadding, flexbox } =
-    toRefs(props);
+  const {
+    tone,
+    title,
+    headerIcon,
+    borderRadiusSize,
+    hasCollapsible,
+    isCollapsibleOpen,
+    hasContentPadding,
+    flexbox,
+    customBorderSize,
+  } = toRefs(props);
 
   const cardClasses: ComputedRef<CardClasses> = computed(() => {
     const toneValue = tone?.value;
@@ -21,7 +30,7 @@ export const useCard = (props: CardPropTypes, slots: Slots) => {
     const baseClasses = classNames(`spr-border-solid`, {
       // Tones
       'spr-background-color-base': !toneValue,
-      'spr-bg-white': toneValue === 'plain',
+      'spr-background-color': toneValue === 'plain',
       'spr-background-color-surface': toneValue === 'neutral',
       'spr-background-color-success-weak': toneValue === 'success',
       'spr-background-color-information-weak': toneValue === 'information',
@@ -47,6 +56,9 @@ export const useCard = (props: CardPropTypes, slots: Slots) => {
       'spr-rounded-border-radius-md': borderRadiusSize.value === 'xs',
       'spr-rounded-border-radius-lg': borderRadiusSize.value === 'lg',
       'spr-rounded-border-radius-xl': borderRadiusSize.value === 'xl' || !borderRadiusSize.value,
+
+      [`spr-border-[${customBorderSize.value}px]`]: customBorderSize.value,
+      'spr-border-none': customBorderSize.value === '0',
     });
 
     const headerClasses = classNames(`spr-flex spr-items-center transition-all duration-300 ease-in-out`, {

package/src/components/date-picker/date-picker.ts

@@ -90,11 +90,6 @@ export const datePickerPropTypes = {
     type: String,
     default: '100%',
   },
-  popperStrategy: {
-    type: String,
-    validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),
-    default: 'absolute',
-  },
   placement: {
     type: String as PropType<(typeof PLACEMENTS_TYPES)[number]>,
     validator: (value: (typeof PLACEMENTS_TYPES)[number]) => PLACEMENTS_TYPES.includes(value),
@@ -105,6 +100,19 @@ export const datePickerPropTypes = {
     default: 'MM-DD-YYYY',
     description: 'Format for the selected date. For example: MM/DD/YYYY, YYYY-MM-DD, etc.',
   },
+  wrapperPosition: {
+    type: String,
+    default: 'relative',
+  },
+  popperStrategy: {
+    type: String,
+    validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),
+    default: 'absolute',
+  },
+  popperContainer: {
+    type: String,
+    default: '',
+  },
 };
 
 export type RestDayType = (typeof REST_DAYS_TYPES)[number];
@@ -154,3 +162,26 @@ export const datePickerEmitTypes = {
 
 export type DatePickerPropTypes = ExtractPropTypes<typeof datePickerPropTypes>;
 export type DatePickerEmitTypes = typeof datePickerEmitTypes;
+
+// Tab component interfaces
+export interface TabComponentProps {
+  selectedMonth?: number;
+  selectedYear?: number;
+  selectedDay?: number;
+  minMaxYear: MinMaxYearType;
+}
+
+export interface CalendarTabEmits {
+  'update:date': (day: { date: Date; inactive: boolean }) => void;
+  'update:month': (month: number) => void;
+  'update:year': (year: number) => void;
+}
+
+export interface MonthTabEmits {
+  'update:month': (month: number) => void;
+}
+
+export interface YearTabEmits {
+  'update:year': (year: number) => void;
+  'update:currentPage': (page: number) => void;
+}

package/src/components/date-picker/date-picker.vue

@@ -9,12 +9,13 @@
       :popper-hide-triggers="[]"
       :auto-hide="false"
       :disabled="isDatePickerPopperDisabled"
-      :container="`#${props.id}`"
+      :container="props.popperContainer ? props.popperContainer : `#${props.id}`"
       :strategy="
         props.popperStrategy === 'fixed' || props.popperStrategy === 'absolute' ? props.popperStrategy : 'absolute'
       "
       :delay="0"
       :style="{
+        position: props.wrapperPosition,
         width: props.width,
       }"
     >

package/src/components/date-picker/date-range-picker/date-range-picker.ts

@@ -94,11 +94,6 @@ export const dateRangePickerPropTypes = {
     type: String,
     default: '100%',
   },
-  popperStrategy: {
-    type: String,
-    validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),
-    default: 'absolute',
-  },
   placement: {
     type: String as PropType<(typeof PLACEMENTS_TYPES)[number]>,
     validator: (value: (typeof PLACEMENTS_TYPES)[number]) => PLACEMENTS_TYPES.includes(value),
@@ -128,6 +123,19 @@ export const dateRangePickerPropTypes = {
     default: 1,
     description: 'Minimum number of days required in the range',
   },
+  wrapperPosition: {
+    type: String,
+    default: 'relative',
+  },
+  popperStrategy: {
+    type: String,
+    validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),
+    default: 'absolute',
+  },
+  popperContainer: {
+    type: String,
+    default: '',
+  },
 };
 
 export type RestDayType = (typeof REST_DAYS_TYPES)[number];
@@ -190,4 +198,4 @@ export const dateRangePickerEmitTypes = {
 };
 
 export type DateRangePickerPropTypes = ExtractPropTypes<typeof dateRangePickerPropTypes>;
-export type DateRangePickerEmitTypes = typeof dateRangePickerEmitTypes; 
+export type DateRangePickerEmitTypes = typeof dateRangePickerEmitTypes;

package/src/components/date-picker/date-range-picker/date-range-picker.vue

@@ -9,7 +9,7 @@
       :popper-hide-triggers="[]"
       :auto-hide="false"
       :disabled="isDateRangePickerPopperDisabled"
-      :container="`#${props.id}`"
+      :container="props.popperContainer ? props.popperContainer : `#${props.id}`"
       :reference="activeInputRef"
       :strategy="
         props.popperStrategy === 'fixed' || props.popperStrategy === 'absolute' ? props.popperStrategy : 'absolute'
@@ -17,6 +17,7 @@
       :delay="0"
       :auto-placement="!isUsingCustomSlot"
       :style="{
+        position: props.wrapperPosition,
         width: props.width,
       }"
     >

package/src/components/date-picker/reusable-calendar/reusable-calendar.ts

@@ -0,0 +1,121 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+
+// Helper function for prop types
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+// Define constants for prop validation
+export const DATE_PICKER_MODES = ['full', 'month-year', 'year-only'] as const;
+
+// Define types
+export interface MinMaxYearType {
+  min: number;
+  max: number;
+}
+
+export interface DisabledDatesType {
+  to: string;
+  from: string;
+  pastDates: boolean | string;
+  futureDates: boolean | string;
+  selectedDates: Array<string>;
+  weekends: boolean;
+  weekdays: boolean;
+  selectedDays: Array<string>;
+}
+
+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 = {
+  /**
+   * @description The selected date value (v-model)
+   */
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  /**
+   * @description Pre-selected month (0-indexed)
+   */
+  selectedMonth: {
+    type: Number,
+    default: undefined,
+  },
+  /**
+   * @description Pre-selected year
+   */
+  selectedYear: {
+    type: Number,
+    default: undefined,
+  },
+  /**
+   * @description Pre-selected day
+   */
+  selectedDay: {
+    type: Number,
+    default: undefined,
+  },
+  /**
+   * @description Year range constraints
+   */
+  minMaxYear: {
+    type: Object as PropType<MinMaxYearType>,
+    default: () => ({ min: 1900, max: new Date().getFullYear() }),
+  },
+  /**
+   * @description Days to mark as rest days
+   */
+  restDays: {
+    type: Array as PropType<RestDayType[]>,
+    default: () => [],
+  },
+  /**
+   * @description Date restrictions
+   */
+  disabledDates: {
+    type: Object as PropType<DisabledDatesType>,
+    default: undefined,
+  },
+  /**
+   * @description Disable the calendar
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * @description Make the calendar read-only
+   */
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * @description Calendar mode: 'full', 'month-year', 'year-only'
+   */
+  mode: {
+    type: String as PropType<DatePickerMode>,
+    validator: (value: DatePickerMode) => DATE_PICKER_MODES.includes(value),
+    default: 'full',
+  },
+  /**
+   * @description Date format for v-model
+   */
+  format: {
+    type: String,
+    default: 'MM-DD-YYYY',
+  },
+};
+
+// Define emits with type validation
+export const reusableCalendarEmitTypes = {
+  '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',
+  'update:day': (day: number): day is number => typeof day === 'number',
+};
+
+// Export types for use in other files
+export type ReusableCalendarPropTypes = ExtractPropTypes<typeof reusableCalendarPropTypes>;
+export type ReusableCalendarEmitTypes = typeof reusableCalendarEmitTypes;