feat: Extend week-numbers prop with option to hide number on offset…

… dates (resolves #648)
Vuepic · Nov 15, 2023 · e0a59c5 · e0a59c5
1 parent 7ff9f3b
commit e0a59c5
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 7 deletions.
diff --git a/src/VueDatePicker/components/DatePicker/DpCalendar.vue b/src/VueDatePicker/components/DatePicker/DpCalendar.vue
@@ -168,7 +168,13 @@
     });
 
     const { buildMultiLevelMatrix } = useArrowNavigation();
-    const { defaultedTransitions, defaultedConfig, defaultedAriaLabels, defaultedMultiCalendars } = useDefaults(props);
+    const {
+        defaultedTransitions,
+        defaultedConfig,
+        defaultedAriaLabels,
+        defaultedMultiCalendars,
+        defaultedWeekNumbers,
+    } = useDefaults(props);
 
     const showMakerTooltip = ref<Date | null>(null);
     const markerTooltipStyle = ref<{ bottom: string; left?: string; right?: string; transform: string }>({
@@ -341,14 +347,22 @@
         }
     };
 
+    const getWeekNumber = (firstCurrentDate: ICalendarDay) => {
+        if (defaultedWeekNumbers.value.type === 'local')
+            return getWeek(firstCurrentDate.value, { weekStartsOn: +props.weekStart as WeekStartNum });
+        if (defaultedWeekNumbers.value.type === 'iso') return getISOWeek(firstCurrentDate.value);
+        if (typeof defaultedWeekNumbers.value.type === 'function')
+            return defaultedWeekNumbers.value.type(firstCurrentDate.value);
+        return '';
+    };
+
     // Get week number if enabled
     const getWeekNum = (days: UnwrapRef<ICalendarDay[]>): string | number => {
         const firstCurrentDate = days[0];
-        if (props.weekNumbers === 'local')
-            return getWeek(firstCurrentDate.value, { weekStartsOn: +props.weekStart as WeekStartNum });
-        if (props.weekNumbers === 'iso') return getISOWeek(firstCurrentDate.value);
-        if (typeof props.weekNumbers === 'function') return props.weekNumbers(firstCurrentDate.value);
-        return '';
+        if (defaultedWeekNumbers.value.hideOnOffsetDates) {
+            return days.some((day) => day.current) ? getWeekNumber(firstCurrentDate) : '';
+        }
+        return getWeekNumber(firstCurrentDate);
     };
 
     const onDateSelect = (ev: Event, dayVal: ICalendarDay) => {

diff --git a/src/VueDatePicker/composables/defaults.ts b/src/VueDatePicker/composables/defaults.ts
@@ -11,6 +11,7 @@ import {
     getDefaultHighlight,
     getDefaultInlineOptions,
     getDefaultTextInputOptions,
+    getDefaultWeekNumbers,
 } from '@/utils/defaults';
 import { assignDefaultTime } from '@/utils/date-utils';
 
@@ -71,6 +72,8 @@ export const useDefaults = (props: AllPropsType | PickerBasePropsType) => {
         getDefaultHighlight(props.highlight, props.highlightWeekDays, props.highlightDisabledDays),
     );
 
+    const defaultedWeekNumbers = computed(() => getDefaultWeekNumbers(props.weekNumbers));
+
     return {
         defaultedTransitions,
         defaultedMultiCalendars,
@@ -83,6 +86,7 @@ export const useDefaults = (props: AllPropsType | PickerBasePropsType) => {
         defaultedInline,
         defaultedConfig,
         defaultedHighlight,
+        defaultedWeekNumbers,
         getDefaultPattern,
         getDefaultStartTime,
     };

diff --git a/src/VueDatePicker/interfaces.ts b/src/VueDatePicker/interfaces.ts
@@ -308,4 +308,12 @@ export type HighlightFn = (
     date: Date | MonthModel | number | { quarter: number; year: number },
     disabled?: boolean,
 ) => boolean;
+
 export type HighlightProp = Date[] | string[] | number[] | HighlightFn | Partial<Highlight>;
+
+export interface WeekNumbersOpts {
+    type: 'iso' | 'local' | ((date: Date) => string | number);
+    hideOnOffsetDates?: boolean;
+}
+
+export type WeekNumbersProp = 'iso' | 'local' | ((date: Date) => string | number) | WeekNumbersOpts;
diff --git a/src/VueDatePicker/props.ts b/src/VueDatePicker/props.ts
@@ -28,6 +28,7 @@ import type {
     DisabledTimeArrProp,
     Config,
     HighlightProp,
+    WeekNumbersProp,
 } from '@/interfaces';
 
 export const AllProps = {
@@ -100,7 +101,7 @@ export const AllProps = {
     weekNumName: { type: String as PropType<string>, default: 'W' },
     weekStart: { type: [Number, String] as PropType<WeekStartNum | WeekStartStr>, default: 1 },
     weekNumbers: {
-        type: [String, Function] as PropType<'iso' | 'local' | ((date: Date) => string | number)>,
+        type: [String, Function, Object] as PropType<WeekNumbersProp>,
         default: null,
     },
     calendarClassName: { type: String as PropType<string>, default: null },

diff --git a/src/VueDatePicker/utils/defaults.ts b/src/VueDatePicker/utils/defaults.ts
@@ -15,6 +15,8 @@ import type {
     HighlightProp,
     Highlight,
     HighlightFn,
+    WeekNumbersProp,
+    WeekNumbersOpts,
 } from '@/interfaces';
 import { getDate } from '@/utils/date-utils';
 
@@ -172,3 +174,16 @@ export const getDefaultHighlight = (
     if (typeof highlight === 'function') return highlight;
     return { ...defaultOptions, ...(highlight ?? {}) };
 };
+
+export const getDefaultWeekNumbers = (weekNumbers: WeekNumbersProp): WeekNumbersOpts => {
+    if (typeof weekNumbers === 'object') {
+        return {
+            type: weekNumbers.type,
+            hideOnOffsetDates: weekNumbers.hideOnOffsetDates ?? false,
+        };
+    }
+    return {
+        type: weekNumbers,
+        hideOnOffsetDates: false,
+    };
+};