feat: Add custom classes support for next and previous buttons (resolves #883)

- refactor: Deprecate custom class props in favor of `ui` prop

Author: Jasenkoo

index.d.ts

@@ -107,6 +107,17 @@ export interface RangeConfig {
     autoRange?: string | number;
 }
 
+export type CustomClass = string | string[];
+
+export interface UIOptions {
+    navBtnNext: CustomClass;
+    navBtnPrev: CustomClass;
+    calendar: CustomClass;
+    calendarCell: CustomClass;
+    menu: CustomClass;
+    input: CustomClass;
+}
+
 export interface VueDatePickerProps {
     uid?: string;
     name?: string;
@@ -136,9 +147,21 @@ export interface VueDatePickerProps {
     required?: boolean;
     format?: string | ((date: Date) => string) | ((dates: Date[]) => string);
     previewFormat?: string | ((date: Date) => string) | ((dates: Date[]) => string);
+    /**
+     * @deprecated
+     */
     inputClassName?: string;
+    /**
+     * @deprecated
+     */
     menuClassName?: string;
+    /**
+     * @deprecated
+     */
     calendarClassName?: string;
+    /**
+     * @deprecated
+     */
     calendarCellClassName?: string;
     hideInputIcon?: boolean;
     state?: boolean;
@@ -331,6 +354,7 @@ export interface VueDatePickerProps {
     loading?: boolean;
     onInternalModelChange?: (...args: any[]) => void;
     enableMinutes?: boolean;
+    ui?: Partial<UIOptions>;
 }
 
 export type DatePickerInstance = ComponentPublicInstance<PublicMethods> | null;

src/VueDatePicker/components/DatePicker/DpCalendar.vue

@@ -175,6 +175,7 @@
         defaultedMultiCalendars,
         defaultedWeekNumbers,
         defaultedMultiDates,
+        defaultedUI,
     } = useDefaults(props);
 
     const showMakerTooltip = ref<Date | null>(null);
@@ -240,6 +241,7 @@
     const calendarWrapClass = computed(
         (): DynamicClass => ({
             [props.calendarClassName]: !!props.calendarClassName,
+            ...(defaultedUI.value.calendar ?? {}),
         }),
     );
 

src/VueDatePicker/components/DatePicker/DpHeader.vue

@@ -17,6 +17,7 @@
                     v-if="showLeftIcon(defaultedMultiCalendars, instance) && !vertical"
                     :aria-label="defaultedAriaLabels?.prevMonth"
                     :disabled="isDisabled(false)"
+                    :class="defaultedUI?.navBtnPrev"
                     @activate="handleMonthYearChange(false, true)"
                     @set-ref="setElRefs($event, 0)"
                 >
@@ -87,6 +88,7 @@
                     v-if="showLeftIcon(defaultedMultiCalendars, instance) && vertical"
                     :aria-label="defaultedAriaLabels?.prevMonth"
                     :disabled="isDisabled(false)"
+                    :class="defaultedUI?.navBtnPrev"
                     @activate="handleMonthYearChange(false, true)"
                 >
                     <slot v-if="$slots['arrow-up']" name="arrow-up" />
@@ -97,6 +99,7 @@
                     ref="rightIcon"
                     :disabled="isDisabled(true)"
                     :aria-label="defaultedAriaLabels?.nextMonth"
+                    :class="defaultedUI?.navBtnNext"
                     @activate="handleMonthYearChange(true, true)"
                     @set-ref="setElRefs($event, disableYearSelect ? 2 : 3)"
                 >
@@ -167,6 +170,7 @@
         defaultedConfig,
         defaultedHighlight,
         propDates,
+        defaultedUI,
     } = useDefaults(props);
     const { transitionName, showTransition } = useTransitions(defaultedTransitions);
     const { buildMatrix } = useArrowNavigation();

src/VueDatePicker/components/DatepickerInput.vue

@@ -120,6 +120,7 @@
         defaultedConfig,
         defaultedRange,
         defaultedMultiDates,
+        defaultedUI,
         getDefaultPattern,
         getDefaultStartTime,
     } = useDefaults(props);
@@ -143,6 +144,7 @@
             dp__input_focus: isFocused.value || props.isMenuOpen,
             dp__input_reg: !defaultedTextInput.value.enabled,
             [props.inputClassName]: !!props.inputClassName,
+            ...(defaultedUI.value.input ?? {}),
         }),
     );
 

src/VueDatePicker/components/DatepickerMenu.vue

@@ -190,7 +190,7 @@
 
     const { setMenuFocused, setShiftKey, control } = useState();
     const slots = useSlots();
-    const { defaultedTextInput, defaultedInline, defaultedConfig } = useDefaults(props);
+    const { defaultedTextInput, defaultedInline, defaultedConfig, defaultedUI } = useDefaults(props);
 
     const calendarWrapperRef = ref(null);
     const calendarWidth = ref(0);
@@ -291,6 +291,7 @@
             dp__menu_index: !defaultedInline.value.enabled,
             dp__relative: defaultedInline.value.enabled,
             [props.menuClassName]: !!props.menuClassName,
+            ...(defaultedUI.value.menu ?? {}),
         }),
     );
 

src/VueDatePicker/components/shared/YearModePicker.vue

@@ -5,6 +5,7 @@
             ref="mpPrevIconRef"
             :aria-label="defaultedAriaLabels?.prevYear"
             :disabled="isDisabled(false)"
+            :class="defaultedUI?.navBtnPrev"
             @activate="handleYear(false)"
         >
             <slot v-if="$slots['arrow-left']" name="arrow-left" />
@@ -27,6 +28,7 @@
             ref="mpNextIconRef"
             :aria-label="defaultedAriaLabels?.nextYear"
             :disabled="isDisabled(true)"
+            :class="defaultedUI?.navBtnNext"
             @activate="handleYear(true)"
         >
             <slot v-if="$slots['arrow-right']" name="arrow-right" />
@@ -80,7 +82,8 @@
     });
 
     const { showRightIcon, showLeftIcon } = useCommon();
-    const { defaultedConfig, defaultedMultiCalendars, defaultedAriaLabels, defaultedTransitions } = useDefaults(props);
+    const { defaultedConfig, defaultedMultiCalendars, defaultedAriaLabels, defaultedTransitions, defaultedUI } =
+        useDefaults(props);
     const { showTransition, transitionName } = useTransitions(defaultedTransitions);
 
     const toggleYearPicker = (flow = false, show?: boolean) => {

src/VueDatePicker/composables/calendar-class.ts

@@ -11,8 +11,15 @@ import type { ICalendarDay, InternalModuleValue } from '@/interfaces';
 import type { PickerBasePropsType } from '@/props';
 
 export const useCalendarClass = (modelValue: WritableComputedRef<InternalModuleValue>, props: PickerBasePropsType) => {
-    const { defaultedMultiCalendars, defaultedMultiDates, defaultedHighlight, defaultedTz, propDates, defaultedRange } =
-        useDefaults(props);
+    const {
+        defaultedMultiCalendars,
+        defaultedMultiDates,
+        defaultedUI,
+        defaultedHighlight,
+        defaultedTz,
+        propDates,
+        defaultedRange,
+    } = useDefaults(props);
     const { isDisabled } = useValidation(props);
     // Track hovered date
     const hoveredDate = ref<Date | null>(null);
@@ -366,6 +373,7 @@ export const useCalendarClass = (modelValue: WritableComputedRef<InternalModuleV
             ...getModeClasses(day),
             [props.dayClass ? props.dayClass(day.value, props.internalModelValue) : '']: true,
             [props.calendarCellClassName]: !!props.calendarCellClassName,
+            ...(defaultedUI.value.calendarCell ?? {}),
         };
     };
 

src/VueDatePicker/composables/defaults.ts

@@ -14,6 +14,7 @@ import {
     getDefaultRangeOptions,
     getDefaultTextInputOptions,
     getDefaultTimeZone,
+    getDefaultUI,
     getDefaultWeekNumbers,
     mapPropDates,
 } from '@/utils/defaults';
@@ -109,6 +110,8 @@ export const useDefaults = (props: AllPropsType | PickerBasePropsType) => {
         }),
     );
 
+    const defaultedUI = computed(() => getDefaultUI(props.ui));
+
     return {
         defaultedTransitions,
         defaultedMultiCalendars,
@@ -126,6 +129,7 @@ export const useDefaults = (props: AllPropsType | PickerBasePropsType) => {
         propDates,
         defaultedTz,
         defaultedMultiDates,
+        defaultedUI,
         getDefaultPattern,
         getDefaultStartTime,
     };

src/VueDatePicker/interfaces.ts

@@ -380,3 +380,20 @@ export interface MapPropDatesOpts {
     timezone: TimeZoneConfig | undefined;
     isSpecific?: boolean;
 }
+
+export type CustomClass = string | string[];
+
+export interface UIOpts {
+    navBtnNext: CustomClass;
+    navBtnPrev: CustomClass;
+    calendar: CustomClass;
+    calendarCell: CustomClass;
+    menu: CustomClass;
+    input: CustomClass;
+}
+
+export type UIKey = keyof UIOpts;
+
+export type UIParsed = {
+    [K in keyof UIOpts]: Record<string, boolean>;
+};

src/VueDatePicker/props.ts

@@ -30,6 +30,7 @@ import type {
     TimeZoneProp,
     DisabledDatesProp,
     MultiDatesProp,
+    UIOpts,
 } from '@/interfaces';
 
 export const AllProps = {
@@ -168,6 +169,7 @@ export const AllProps = {
     loading: { type: Boolean as PropType<boolean>, default: false },
     onInternalModelChange: { type: [Function, Object] as PropType<(...args: any[]) => void>, default: null },
     enableMinutes: { type: Boolean as PropType<boolean>, default: true },
+    ui: { type: Object as PropType<Partial<UIOpts>>, default: () => ({}) },
 };
 
 export const PickerBaseProps = {

src/VueDatePicker/utils/defaults.ts

@@ -27,6 +27,9 @@ import type {
     MultiDatesProp,
     MultiDatesDefault,
     MapPropDatesOpts,
+    UIOpts,
+    UIKey,
+    UIParsed,
 } from '@/interfaces';
 import { getDate } from '@/utils/date-utils';
 import { dateToTimezoneSafe, sanitizeDateToLocal } from '@/utils/timezone';
@@ -306,3 +309,22 @@ export const getDefaultMultiDates = (
         dragSelect: multiDates.dragSelect ?? true,
     };
 };
+
+export const getDefaultUI = (ui: Partial<UIOpts>): UIParsed => {
+    const defaulted = {
+        ...Object.fromEntries(
+            Object.keys(ui).map((item) => {
+                const key = item as keyof UIOpts;
+                const value = ui[key];
+                const val = (
+                    typeof ui[key] === 'string'
+                        ? { [value as string]: true }
+                        : Object.fromEntries((value as string[]).map((k) => [k, true]))
+                ) as Record<string, boolean>;
+                return [item, val];
+            }),
+        ),
+    };
+
+    return defaulted as UIParsed;
+};