design-system-next 2.16.3 → 2.17.5

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

@@ -21,6 +21,7 @@ export const useBadge = (props: BadgePropTypes) => {
     });
 
     const variantClasses = classNames({
+      'spr-background-color-surface spr-text-color-base': variant.value === 'neutral',
       'spr-background-color-danger-base spr-text-color-inverted-strong': variant.value === 'danger',
       'spr-background-color-disabled spr-text-color-on-fill-disabled': variant.value === 'disabled',
       'spr-background-color-information-base spr-text-color-inverted-strong': variant.value === 'information',

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

@@ -162,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/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;

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

@@ -0,0 +1,192 @@
+<template>
+  <div 
+    ref="reusableCalendarRef"
+    :class="reusableCalendarClasses"
+  >
+    <div
+      :class="[
+        'spr-flex spr-justify-between spr-gap-2 spr-px-4 spr-py-3',
+        'spr-border spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid spr-border-mushroom-200',
+      ]"
+    >
+      <!-- Tabs -->
+      <div class="spr-flex spr-gap-1">
+        <spr-button
+          v-if="showMonthInput"
+          :class="getTabClasses('tab-months')"
+          variant="secondary"
+          size="small"
+          @click="handleTabClick('tab-months')"
+        >
+          {{ getMonthObject('monthValue', calendarTabPageData.selectedMonth)?.fullText }}
+        </spr-button>
+        <spr-button
+          v-if="showYearInput"
+          :class="getTabClasses('tab-years')"
+          variant="secondary"
+          size="small"
+          @click="handleTabClick('tab-years')"
+        >
+          {{ calendarTabPageData.selectedYear }}
+        </spr-button>
+      </div>
+
+      <!-- Next & Previous Buttons  -->
+      <div v-if="currentTab === 'tab-calendar'" class="spr-flex spr-gap-1">
+        <spr-button
+          class="spr-cursor-pointer"
+          variant="secondary"
+          size="small"
+          :disabled="calendarTabIsMinMonth"
+          @click="calendarTabPrevMonth"
+        >
+          <Icon icon="ph:caret-left" />
+        </spr-button>
+        <spr-button
+          class="spr-cursor-pointer"
+          variant="secondary"
+          size="small"
+          :disabled="calendarTabIsMaxMonth"
+          @click="calendarTabNextMonth"
+        >
+          <Icon icon="ph:caret-right" />
+        </spr-button>
+      </div>
+
+      <div v-if="currentTab === 'tab-years'" class="spr-flex spr-gap-1">
+        <spr-button
+          class="spr-cursor-pointer"
+          variant="secondary"
+          size="small"
+          :disabled="yearTabIsPreviousButtonDisabled"
+          @click="yearTabGoToPreviousPage"
+        >
+          <Icon icon="ph:caret-left" />
+        </spr-button>
+        <spr-button
+          class="spr-cursor-pointer"
+          variant="secondary"
+          size="small"
+          :disabled="yearTabIsNextButtonDisabled"
+          @click="yearTabGoToNextPage"
+        >
+          <Icon icon="ph:caret-right" />
+        </spr-button>
+      </div>
+    </div>
+    
+    <div class="spr-px-4 spr-pb-4 spr-pt-2">
+      <!-- Calendar Tab  -->
+      <DatePickerCalendarTab
+        v-if="currentTab === 'tab-calendar' && showDateInput"
+        :calendar-days="calendarDays"
+        :selected-month="selectedMonthComputed"
+        :selected-year="selectedYearComputed"
+        :selected-day="selectedDayComputed"
+        :min-max-year="minMaxYear"
+        :rest-days="restDays"
+        :disabled-dates="disabledDates"
+        :disabled="disabled"
+        :readonly="readonly"
+        @update:date="handleCalendarDateUpdateWrapper as any"
+        @update:month="handleCalendarMonthUpdateWrapper as any"
+        @update:year="handleCalendarYearUpdateWrapper as any"
+      />
+
+      <!-- Months Tab  -->
+      <DatePickerMonthTab
+        v-if="currentTab === 'tab-months' && showMonthInput"
+        :selected-month="selectedMonthComputed"
+        :selected-year="selectedYearComputed"
+        :min-max-year="minMaxYear"
+        :disabled="disabled"
+        :readonly="readonly"
+        @update:month="handleMonthTabMonthUpdateWrapper as any"
+      />
+
+      <!-- Years Tab  -->
+      <DatePickerYearTab
+        v-if="currentTab === 'tab-years' && showYearInput"
+        :selected-month="selectedMonthComputed"
+        :selected-year="selectedYearComputed"
+        :min-max-year="minMaxYear"
+        :years-array="yearTabPageData.yearsArray"
+        :current-page="yearTabPageData.currentPage"
+        :items-per-page="yearTabPageData.itemsPerPage"
+        :disabled="disabled"
+        :readonly="readonly"
+        @update:year="handleYearTabYearUpdateWrapper as any"
+        @update:current-page="handleYearTabCurrentPageUpdateWrapper as any"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { Icon } from '@iconify/vue';
+import classNames from 'classnames';
+
+import SprButton from '@/components/button/button.vue';
+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';
+
+const props = defineProps(reusableCalendarPropTypes);
+const emit = defineEmits(reusableCalendarEmitTypes);
+
+const reusableCalendarRef = ref<HTMLElement | null>(null);
+
+// Use the composable for all logic
+const {
+  // State
+  currentTab,
+  calendarTabPageData,
+  yearTabPageData,
+  
+  // Computed properties
+  showMonthInput,
+  showDateInput,
+  showYearInput,
+  calendarDays,
+  selectedMonthComputed,
+  selectedYearComputed,
+  selectedDayComputed,
+  calendarTabIsMinMonth,
+  calendarTabIsMaxMonth,
+  yearTabIsPreviousButtonDisabled,
+  yearTabIsNextButtonDisabled,
+  
+  // Functions
+  getTabClasses,
+  handleTabClick,
+  getMonthObject,
+  calendarTabPrevMonth,
+  calendarTabNextMonth,
+  yearTabGoToPreviousPage,
+  yearTabGoToNextPage,
+  
+  // Event handlers
+  handleCalendarDateUpdateWrapper,
+  handleCalendarMonthUpdateWrapper,
+  handleCalendarYearUpdateWrapper,
+  handleMonthTabMonthUpdateWrapper,
+  handleYearTabYearUpdateWrapper,
+  handleYearTabCurrentPageUpdateWrapper,
+} = useReusableCalendar(props, emit);
+
+// Compute CSS classes using classNames utility
+const reusableCalendarClasses = 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]',
+    {
+      'spr-disabled': props.disabled,
+      'spr-readonly': props.readonly,
+    }
+  );
+});
+</script>
+