refactor!: Remove deprecated props

Author: Jasenkoo

index.d.ts

@@ -147,22 +147,6 @@ 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;
     clearable?: boolean;
@@ -196,10 +180,6 @@ export interface VueDatePickerProps {
     startDate?: string | Date;
     startTime?: PartialTimeObj | PartialTimeObj[];
     hideOffsetDates?: boolean;
-    /**
-     * @deprecated
-     */
-    autoRange?: number | string;
     noToday?: boolean;
     noHoursOverlay?: boolean;
     noMinutesOverlay?: boolean;
@@ -208,10 +188,6 @@ export interface VueDatePickerProps {
     disabledWeekDays?: number[] | string[];
     allowedDates?: string[] | Date[];
     nowButtonLabel?: string;
-    /**
-     * @deprecated
-     */
-    partialRange?: boolean;
     monthChangeOnScroll?: boolean | 'inverse';
     markers?: DatePickerMarker[];
     transitions?:
@@ -244,27 +220,7 @@ export interface VueDatePickerProps {
     flow?: ('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds')[];
     partialFlow?: boolean;
     preventMinMaxNavigation?: boolean;
-    /**
-     * @deprecated
-     */
-    minRange?: number | string;
-    /**
-     * @deprecated
-     */
-    maxRange?: number | string;
-    /**
-     * @deprecated
-     */
-    fixedStart?: boolean;
-    /**
-     * @deprecated
-     */
-    fixedEnd?: boolean;
     utc?: boolean | 'preserve';
-    /**
-     * @deprecated
-     */
-    multiDatesLimit?: number | string;
     reverseYears?: boolean;
     weekPicker?: boolean;
     vertical?: boolean;
@@ -291,10 +247,6 @@ export interface VueDatePickerProps {
     };
     arrowNavigation?: boolean;
     yearPicker?: boolean;
-    /**
-     * @deprecated
-     */
-    disableTimeRangeValidation?: boolean;
     dayNames?: ((lang: string, weekStart: number) => string[]) | string[];
     modelType?: 'timestamp' | 'iso' | 'format' | string;
     modelAuto?: boolean;
@@ -310,28 +262,16 @@ export interface VueDatePickerProps {
     ignoreTimeValidation?: boolean;
     dayClass?: (date: Date, internalModelValue: InternalTime) => string;
     hideNavigation?: ('month' | 'year' | 'calendar' | 'time' | 'minutes' | 'hours' | 'seconds')[];
-    /**
-     * @deprecated
-     */
-    noDisabledRange?: boolean;
     sixWeeks?: boolean | 'append' | 'prepend' | 'center' | 'fair';
     timezone?:
         | string
         | { timezone?: string; exactMatch?: boolean; dateInTz?: string; emitTimezone?: string; convertModel?: boolean };
-    /**
-     * @deprecated
-     */
-    emitTimezone?: string;
     disableYearSelect?: boolean;
     focusStartDate?: boolean;
     disabledTimes?:
         | ((time: TimeObj | TimeObj[] | (TimeObj | undefined)[]) => boolean)
         | DisabledTime[]
         | [DisabledTime[], DisabledTime[]];
-    /**
-     * @deprecated
-     */
-    showLastInRange?: boolean;
     timePickerInline?: boolean;
     calendar?: (weeks: CalendarWeek[]) => CalendarWeek[];
     config?: {

src/VueDatePicker/components/DatePicker/DpCalendar.vue

@@ -229,7 +229,6 @@
     // Class object for calendar wrapper
     const calendarWrapClass = computed(
         (): DynamicClass => ({
-            [props.calendarClassName]: !!props.calendarClassName,
             ...(defaultedUI.value.calendar ?? {}),
         }),
     );

src/VueDatePicker/components/DatepickerInput.vue

@@ -151,7 +151,6 @@
             dp__input_invalid: props.state === false,
             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

@@ -293,7 +293,6 @@
             dp__menu: true,
             dp__menu_index: !defaultedInline.value.enabled,
             dp__relative: defaultedInline.value.enabled,
-            [props.menuClassName]: !!props.menuClassName,
             ...(defaultedUI.value.menu ?? {}),
         }),
     );

src/VueDatePicker/components/TimePicker/TimePicker.vue

@@ -61,7 +61,7 @@
                                     seconds: tInput.seconds,
                                     closeTimePickerBtn,
                                     disabledTimesConfig,
-                                    disabled: index === 0 ? fixedStart : fixedEnd,
+                                    disabled: index === 0 ? defaultedRange.fixedStart : defaultedRange.fixedEnd,
                                 }"
                                 ref="timeInputRefs"
                                 :validate-time="

src/VueDatePicker/composables/calendar-class.ts

@@ -372,7 +372,6 @@ export const useCalendarClass = (modelValue: WritableComputedRef<InternalModuleV
             ...sharedClasses(day),
             ...getModeClasses(day),
             [props.dayClass ? props.dayClass(day.value, props.internalModelValue) : '']: true,
-            [props.calendarCellClassName]: !!props.calendarCellClassName,
             ...(defaultedUI.value.calendarCell ?? {}),
         };
     };

src/VueDatePicker/composables/defaults.ts

@@ -78,9 +78,9 @@ export const useDefaults = (props: AllPropsType | PickerBasePropsType) => {
 
     const defaultedWeekNumbers = computed(() => getDefaultWeekNumbers(props.weekNumbers));
 
-    const defaultedTz = computed(() => getDefaultTimeZone(props.timezone, props.emitTimezone));
+    const defaultedTz = computed(() => getDefaultTimeZone(props.timezone));
 
-    const defaultedMultiDates = computed(() => getDefaultMultiDates(props.multiDates, props.multiDatesLimit));
+    const defaultedMultiDates = computed(() => getDefaultMultiDates(props.multiDates));
 
     const propDates = computed(() =>
         mapPropDates({
@@ -95,20 +95,7 @@ export const useDefaults = (props: AllPropsType | PickerBasePropsType) => {
         }),
     );
 
-    const defaultedRange = computed(() =>
-        getDefaultRangeOptions(props.range, {
-            minMaxRawRange: false,
-            maxRange: props.maxRange,
-            minRange: props.minRange,
-            noDisabledRange: props.noDisabledRange,
-            showLastInRange: props.showLastInRange,
-            partialRange: props.partialRange,
-            disableTimeRangeValidation: props.disableTimeRangeValidation,
-            autoRange: props.autoRange,
-            fixedStart: props.fixedStart,
-            fixedEnd: props.fixedEnd,
-        }),
-    );
+    const defaultedRange = computed(() => getDefaultRangeOptions(props.range));
 
     const defaultedUI = computed(() => getDefaultUI(props.ui));
 

src/VueDatePicker/props.ts

@@ -52,25 +52,21 @@ export const AllProps = {
     offset: { type: [Number, String] as PropType<number | string>, default: 10 },
     hideNavigation: { type: Array as PropType<Flow[]>, default: () => [] },
     timezone: { type: [String, Object] as PropType<TimeZoneProp>, default: null },
-    emitTimezone: { type: String as PropType<string>, default: null },
     vertical: { type: Boolean as PropType<boolean>, default: false },
     disableMonthYearSelect: { type: Boolean as PropType<boolean>, default: false },
     disableYearSelect: { type: Boolean as PropType<boolean>, default: false },
-    menuClassName: { type: String as PropType<string>, default: null },
     dayClass: {
         type: Function as PropType<(date: Date, internalModelValue: InternalModuleValue) => string>,
         default: null,
     },
     yearRange: { type: Array as PropType<number[]>, default: () => [1900, 2100] },
-    calendarCellClassName: { type: String as PropType<string>, default: null },
     enableTimePicker: { type: Boolean as PropType<boolean>, default: true },
     autoApply: { type: Boolean as PropType<boolean>, default: false },
     disabledDates: { type: [Array, Function] as PropType<DisabledDatesProp>, default: () => [] },
     monthNameFormat: { type: String as PropType<'long' | 'short'>, default: 'short' },
     startDate: { type: [Date, String] as PropType<string | Date>, default: null },
     startTime: { type: [Object, Array] as PropType<TimeModel | TimeModel[] | null>, default: null },
     hideOffsetDates: { type: Boolean as PropType<boolean>, default: false },
-    autoRange: { type: [Number, String] as PropType<number | string>, default: null },
     noToday: { type: Boolean as PropType<boolean>, default: false },
     disabledWeekDays: { type: Array as PropType<string[] | number[]>, default: () => [] },
     allowedDates: { type: Array as PropType<string[] | Date[]>, default: null },
@@ -83,14 +79,10 @@ export const AllProps = {
     flow: { type: Array as PropType<Flow[]>, default: () => [] },
     partialFlow: { type: Boolean as PropType<boolean>, default: false },
     preventMinMaxNavigation: { type: Boolean as PropType<boolean>, default: false },
-    minRange: { type: [Number, String] as PropType<number | string>, default: null },
-    maxRange: { type: [Number, String] as PropType<number | string>, default: null },
-    multiDatesLimit: { type: [Number, String] as PropType<number | string>, default: null },
     reverseYears: { type: Boolean as PropType<boolean>, default: false },
     weekPicker: { type: Boolean as PropType<boolean>, default: false },
     filters: { type: Object as PropType<Partial<DateFilter>>, default: () => ({}) },
     arrowNavigation: { type: Boolean as PropType<boolean>, default: false },
-    disableTimeRangeValidation: { type: Boolean as PropType<boolean>, default: false },
     highlight: {
         type: [Function, Object] as PropType<HighlightProp>,
         default: null,
@@ -104,7 +96,6 @@ export const AllProps = {
         type: [String, Function, Object] as PropType<WeekNumbersProp>,
         default: null,
     },
-    calendarClassName: { type: String as PropType<string>, default: null },
     monthChangeOnScroll: { type: [Boolean, String] as PropType<boolean | 'inverse'>, default: true },
     dayNames: {
         type: [Function, Array] as PropType<((lang: string, weekStart: number) => string[]) | string[]>,
@@ -121,7 +112,6 @@ export const AllProps = {
         default: () => '',
     },
     multiDates: { type: [Object, Boolean] as PropType<MultiDatesProp>, default: false },
-    partialRange: { type: Boolean as PropType<boolean>, default: true },
     ignoreTimeValidation: { type: Boolean as PropType<boolean>, default: false },
     minDate: { type: [Date, String] as PropType<Date | string>, default: null },
     maxDate: { type: [Date, String] as PropType<Date | string>, default: null },
@@ -134,9 +124,6 @@ export const AllProps = {
     state: { type: Boolean as PropType<boolean | null>, default: null },
     required: { type: Boolean as PropType<boolean>, default: false },
     autocomplete: { type: String as PropType<string>, default: 'off' },
-    inputClassName: { type: String as PropType<string>, default: null },
-    fixedStart: { type: Boolean as PropType<boolean>, default: false },
-    fixedEnd: { type: Boolean as PropType<boolean>, default: false },
     timePicker: { type: Boolean as PropType<boolean>, default: false },
     enableSeconds: { type: Boolean as PropType<boolean>, default: false },
     is24: { type: Boolean as PropType<boolean>, default: true },
@@ -155,12 +142,10 @@ export const AllProps = {
     readonly: { type: Boolean as PropType<boolean>, default: false },
     inline: { type: [Boolean, Object] as PropType<InlineProp>, default: false },
     textInput: { type: [Boolean, Object] as PropType<TextInputProp>, default: false },
-    noDisabledRange: { type: Boolean as PropType<boolean>, default: false },
     sixWeeks: { type: [Boolean, String] as PropType<boolean | SixWeekMode>, default: false },
     actionRow: { type: Object as PropType<Partial<ActionRowData>>, default: () => ({}) },
     focusStartDate: { type: Boolean as PropType<boolean>, default: false },
     disabledTimes: { type: [Function, Array] as PropType<DisabledTimeArrProp>, default: undefined },
-    showLastInRange: { type: Boolean as PropType<boolean>, default: true },
     timePickerInline: { type: Boolean as PropType<boolean>, default: false },
     calendar: { type: Function as PropType<(month: ICalendarDate[]) => ICalendarDate[]>, default: null },
     config: { type: Object as PropType<Partial<Config>>, default: undefined },

src/VueDatePicker/utils/defaults.ts

@@ -18,7 +18,6 @@ import type {
     WeekNumbersProp,
     WeekNumbersOpts,
     RangeProp,
-    RangeOpts,
     RangeConfig,
     TimeZoneProp,
     TimeZoneConfig,
@@ -207,7 +206,7 @@ export const getDefaultWeekNumbers = (weekNumbers: WeekNumbersProp): WeekNumbers
     };
 };
 
-export const getDefaultRangeOptions = (config: RangeProp, deprecatedOpts: RangeOpts): RangeConfig => {
+export const getDefaultRangeOptions = (config: RangeProp): RangeConfig => {
     const defaultOptions = {
         noDisabledRange: false,
         showLastInRange: true,
@@ -225,29 +224,26 @@ export const getDefaultRangeOptions = (config: RangeProp, deprecatedOpts: RangeO
     }
     return {
         enabled: config,
-        noDisabledRange: deprecatedOpts.noDisabledRange,
-        showLastInRange: deprecatedOpts.showLastInRange,
-        minMaxRawRange: deprecatedOpts.minMaxRawRange,
-        partialRange: deprecatedOpts.partialRange,
-        disableTimeRangeValidation: deprecatedOpts.disableTimeRangeValidation,
-        maxRange: deprecatedOpts.maxRange,
-        minRange: deprecatedOpts.minRange,
-        autoRange: deprecatedOpts.autoRange,
-        fixedStart: deprecatedOpts.fixedStart,
-        fixedEnd: deprecatedOpts.fixedEnd,
+        ...defaultOptions,
     };
 };
 
-export const getDefaultTimeZone = (timeZone: TimeZoneProp, emitTimezone?: string) => {
-    if (!timeZone) return { timezone: undefined, exactMatch: false, emitTimezone };
+export const getDefaultTimeZone = (timeZone: TimeZoneProp) => {
+    if (!timeZone) return { timezone: undefined, exactMatch: false, emitTimezone: undefined };
     if (typeof timeZone === 'string') {
-        return { timezone: timeZone, exactMatch: false, dateInTz: undefined, emitTimezone, convertModel: true };
+        return {
+            timezone: timeZone,
+            exactMatch: false,
+            dateInTz: undefined,
+            emitTimezone: undefined,
+            convertModel: true,
+        };
     }
     return {
         timezone: timeZone.timezone,
         exactMatch: timeZone.exactMatch ?? false,
         dateInTz: timeZone.dateInTz ?? undefined,
-        emitTimezone: emitTimezone ?? timeZone.emitTimezone,
+        emitTimezone: timeZone.emitTimezone ?? undefined,
         convertModel: timeZone.convertModel ?? true,
     };
 };
@@ -299,12 +295,9 @@ export const mapPropDates = (opts: MapPropDatesOpts): PropDates => {
     };
 };
 
-export const getDefaultMultiDates = (
-    multiDates: MultiDatesProp,
-    multiDatesLimit: number | string,
-): MultiDatesDefault => {
+export const getDefaultMultiDates = (multiDates: MultiDatesProp): MultiDatesDefault => {
     if (typeof multiDates === 'boolean') {
-        return { enabled: multiDates, dragSelect: true, limit: +multiDatesLimit };
+        return { enabled: multiDates, dragSelect: true, limit: null };
     }
     return {
         enabled: !!multiDates,

tests/unit/behaviour.spec.ts

@@ -122,7 +122,7 @@ describe('It should validate various picker scenarios', () => {
 
     it('Should emit regular and zoned date value', async () => {
         const timezone = 'UTC';
-        const dp = await openMenu({ emitTimezone: timezone });
+        const dp = await openMenu({ timezone: { emitTimezone: timezone } });
         const today = new Date();
         const value = set(today, { seconds: 0, milliseconds: 0 });