@bethinkpl/design-system 26.1.0 → 26.1.2

package/lib/js/components/DatePickers/DatePicker/DatePicker.vue

@@ -1,5 +1,6 @@
 <template>
 	<div
+		ref="datePickerRef"
 		class="ds-datePicker"
 		:class="{ '-ds-box': triggerType === DATE_PICKER_TRIGGER_TYPES.BOX }"
 	>
@@ -22,8 +23,8 @@
 				class="ds-datePicker__tile"
 				:text="text"
 				:interactive="isInteractive"
-				:color="color"
-				:state="state"
+				:color="color as TileColors"
+				:state="state as TileStates"
 				:icon-right="tileIcon"
 				:is-icon-right-hidden-on-mobile="isIconHiddenOnMobile"
 				:eyebrow-text="eyebrowText"
@@ -34,18 +35,18 @@
 			v-else
 			:is-interactive="isInteractive"
 			:placeholder="placeholder"
-			:date="date"
-			:icon="icon"
-			:is-icon-hidden-on-mobile="isIconHiddenOnMobile"
+			:start-date="date"
+			:start-icon="icon"
+			:are-icons-hidden-on-mobile="isIconHiddenOnMobile"
 			:state="state"
 			:color="color"
-			:eyebrow-text="eyebrowText"
+			:start-date-eyebrow-text="eyebrowText"
 			:is-open="isOpen"
 			@click="toggle"
 		/>
 
 		<span v-if="errorMessage" class="ds-datePicker__errorMessage"> {{ errorMessage }} </span>
-		<input ref="flatpickrInput" class="ds-datePicker__hiddenInput" />
+		<input ref="flatpickrInputRef" class="ds-datePicker__hiddenInput" />
 	</div>
 </template>
 
@@ -117,10 +118,10 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType, toRaw } from 'vue';
+import { defineComponent, PropType, Ref, ref, toRaw, watch } from 'vue';
 
-import DsTile from '../../Tile';
-import { ICONS } from '../../Icons/Icon';
+import DsTile, { TileColors, TileStates } from '../../Tile';
+import { IconItem, ICONS } from '../../Icons/Icon';
 import DatePickerBox from '../DatePickerBox';
 
 import {
@@ -134,23 +135,17 @@ import {
 	DatePickerTriggerTypes,
 } from './DatePicker.consts';
 import { capitalizeFirstLetter } from '../../../../../tools/importers/helpers/modifiers';
-
-let flatpickr: Function | null = null;
-
-const FLATPICKR_POSITIONS = {
-	[DATE_PICKER_CALENDAR_POSITIONS.BOTTOM_LEFT]: 'below left',
-	[DATE_PICKER_CALENDAR_POSITIONS.BOTTOM_RIGHT]: 'below right',
-	[DATE_PICKER_CALENDAR_POSITIONS.BOTTOM]: 'below',
-	[DATE_PICKER_CALENDAR_POSITIONS.TOP_LEFT]: 'above left',
-	[DATE_PICKER_CALENDAR_POSITIONS.TOP_RIGHT]: 'above right',
-	[DATE_PICKER_CALENDAR_POSITIONS.TOP]: 'above',
-};
+import { DatePickerComposablesProps, initFlatpickr } from './DatePicker.composables';
+import {
+	localFullDateWithShortMonthName,
+	localWeekdayName,
+} from '../../../../../tools/importers/helpers/dates';
 
 export default defineComponent({
 	name: 'DatePicker',
 	components: {
-		DatePickerBox,
 		DsTile,
+		DatePickerBox,
 	},
 	props: {
 		triggerType: {
@@ -178,32 +173,34 @@ export default defineComponent({
 			default: false,
 		},
 		icon: {
-			type: [Object, null],
+			type: [Object, null] as PropType<IconItem | null>,
 			default: ICONS.FA_CALENDAR_DAY,
-			validate: (icon) => icon === null || Object.values(ICONS).includes(toRaw(icon)),
+			validator(icon) {
+				return icon === null || Object.values(ICONS).includes(toRaw(icon));
+			},
 		},
 		isIconHiddenOnMobile: {
 			type: Boolean,
 			default: false,
 		},
-		calendarPosition: {
-			type: String as PropType<DatePickerCalendarPositions>,
-			default: DATE_PICKER_CALENDAR_POSITIONS.BOTTOM_LEFT,
-		},
 		errorMessage: {
 			type: String,
 			default: '',
 		},
 		state: {
-			type: (String as PropType<DatePickerStates>) || null,
+			type: String as PropType<DatePickerStates>,
 			default: DATE_PICKER_STATES.DEFAULT,
 		},
 		color: {
 			type: String as PropType<DatePickerColors>,
 			default: DATE_PICKER_COLORS.NEUTRAL,
 		},
+		calendarPosition: {
+			type: String as PropType<DatePickerCalendarPositions>,
+			default: DATE_PICKER_CALENDAR_POSITIONS.BOTTOM_LEFT,
+		},
 		disableDates: {
-			type: Array,
+			type: Array as PropType<Array<Date>>,
 			default: () => [],
 		},
 		minDate: {
@@ -215,117 +212,81 @@ export default defineComponent({
 			default: null,
 		},
 	},
-	emits: { 'update:date': () => true },
-	data() {
+	emits: {
+		'update:date': (date: Date) => true,
+	},
+	setup(
+		props: DatePickerComposablesProps & {
+			date: Date;
+			isInteractive: boolean;
+			state: DatePickerStates;
+		},
+		{ emit },
+	) {
+		const flatpickrInputRef = ref<HTMLInputElement>() as Ref<HTMLInputElement>;
+		const datePickerRef = ref<HTMLDivElement>() as Ref<HTMLDivElement>;
+
+		const onChange = (event: Array<Date>) => {
+			emit('update:date', event[0]);
+		};
+
+		const {
+			isOpen,
+			toggle: toggleDatePicker,
+			createDatePicker,
+		} = initFlatpickr({
+			props,
+			onChange,
+			defaultDates: props.date,
+			mode: 'single',
+		});
+		watch([() => props.isInteractive, () => props.state], async () => {
+			if (props.isInteractive && props.state === DATE_PICKER_STATES.DEFAULT) {
+				await createDatePicker(flatpickrInputRef.value, datePickerRef.value);
+			}
+		});
+
 		return {
-			datePicker: null,
-			isOpen: false,
+			flatpickrInputRef,
+			datePickerRef,
+			isOpen,
+			toggleDatePicker,
+			createDatePicker,
+			DATE_PICKER_CALENDAR_POSITIONS: Object.freeze(DATE_PICKER_CALENDAR_POSITIONS),
+			DATE_PICKER_COLORS: Object.freeze(DATE_PICKER_COLORS),
 			DATE_PICKER_STATES: Object.freeze(DATE_PICKER_STATES),
 			DATE_PICKER_TRIGGER_TYPES: Object.freeze(DATE_PICKER_TRIGGER_TYPES),
 		};
 	},
 	computed: {
-		isDatePickerEnabled() {
-			return this.isInteractive && this.state === DATE_PICKER_STATES.DEFAULT;
-		},
 		eyebrowText() {
 			if (!this.date || this.state === DATE_PICKER_STATES.LOADING) {
 				return '';
 			}
-
-			return capitalizeFirstLetter(
-				this.date.toLocaleDateString(undefined, {
-					dateStyle: undefined,
-					timeStyle: undefined,
-					weekday: 'long',
-				}),
-			);
+			return capitalizeFirstLetter(localWeekdayName(this.date));
 		},
 		text() {
 			if (this.state === DATE_PICKER_STATES.LOADING || !this.date) {
 				return this.placeholder;
 			}
-
-			return this.date.toLocaleDateString(undefined, {
-				dateStyle: 'medium',
-				timeStyle: undefined,
-			});
+			return localFullDateWithShortMonthName(this.date);
 		},
 		tileIcon() {
 			if (!this.icon) {
 				return null;
 			}
-
-			return this.isOpen ? ICONS.FA_CHEVRON_UP : this.icon;
-		},
-		flatpickrConfigString() {
-			return [
-				this.maxDate,
-				this.minDate,
-				this.calendarPosition,
-				this.date,
-				...this.disableDates,
-			].concat('|');
-		},
-	},
-	watch: {
-		flatpickrConfigString: {
-			handler() {
-				this.datePicker?.set({
-					position: FLATPICKR_POSITIONS[this.calendarPosition],
-					defaultDate: this.date,
-					disable: this.disableDates.filter((date) => date instanceof Date),
-					minDate: this.minDate,
-					maxDate: this.maxDate,
-				});
-			},
-			flush: 'post' as const,
+			return this.isOpen.value ? ICONS.FA_CHEVRON_UP : this.icon;
 		},
 	},
 	async mounted() {
-		if (this.isDatePickerEnabled && !this.datePicker) {
-			if (!flatpickr) {
-				const { default: flatpickrFunction } = await import('flatpickr');
-
-				flatpickr = flatpickrFunction;
-			}
-
-			const { Polish } = await import('flatpickr/dist/l10n/pl.js');
-
-			this.datePicker = flatpickr(this.$refs.flatpickrInput, {
-				locale: Polish,
-				positionElement: this.$el,
-				ignoredFocusElements: [this.$el],
-				appendTo: this.$el,
-				position: FLATPICKR_POSITIONS[this.calendarPosition],
-				defaultDate: this.date,
-				disable: this.disableDates.filter((date) => date instanceof Date),
-				minDate: this.minDate,
-				maxDate: this.maxDate,
-				onClose: [
-					() => {
-						this.isOpen = false;
-					},
-				],
-				onOpen: [
-					() => {
-						this.isOpen = true;
-					},
-				],
-				onChange: (event) => {
-					this.$emit('update:date', event[0]);
-				},
-			});
+		if (this.isInteractive && this.state === DATE_PICKER_STATES.DEFAULT) {
+			await this.createDatePicker(this.flatpickrInputRef, this.datePickerRef);
 		}
 	},
-	unmounted() {
-		this.datePicker?.destroy();
-		this.datePicker = null;
-	},
 	methods: {
 		toggle() {
-			if (this.isDatePickerEnabled && this.datePicker) {
-				this.datePicker.toggle();
+			if (this.isInteractive && this.state === DATE_PICKER_STATES.DEFAULT) {
+				this.toggleDatePicker();
 			}
 		},
 	},

package/lib/js/components/DatePickers/DatePickerBox/DatePickerBox.vue

@@ -10,17 +10,52 @@
 			'-ds-isOpen': isOpen,
 		}"
 	>
-		<span v-if="eyebrowText" class="ds-datePickerBox__eyebrow">{{ eyebrowText }}</span>
-		<div class="ds-datePickerBox__dateWrapper">
-			<ds-icon
-				v-if="icon"
-				class="ds-datePickerBox__icon"
-				:class="{ '-ds-hiddenOnMobile': isIconHiddenOnMobile }"
-				:icon="icon"
-				:size="ICON_SIZES.XX_SMALL"
-			></ds-icon>
-			<span class="ds-datePickerBox__date">{{ text }}</span>
+		<div
+			class="ds-datePickerBox__widthWrapper"
+			:class="{ '-ds-has-icon': startIcon, '-ds-iconHiddenOnMobile': areIconsHiddenOnMobile }"
+		>
+			<div class="ds-datePickerBox__dateWrapper">
+				<span v-if="startDateEyebrowText" class="ds-datePickerBox__eyebrow">{{
+					startDateEyebrowText
+				}}</span>
+				<div class="ds-datePickerBox__date">
+					<ds-icon
+						v-if="startIcon"
+						class="ds-datePickerBox__icon"
+						:class="{ '-ds-hiddenOnMobile': areIconsHiddenOnMobile }"
+						:icon="startIcon"
+						:size="ICON_SIZES.XX_SMALL"
+					></ds-icon>
+					<span class="ds-datePickerBox__dateText">{{ startDateText }}</span>
+				</div>
+			</div>
 		</div>
+		<template v-if="startDate && endDate">
+			<span class="ds-datePickerBox__separator">–</span>
+			<div
+				class="ds-datePickerBox__widthWrapper -ds-justify-to-end"
+				:class="{
+					'-ds-has-icon': endIcon,
+					'-ds-iconHiddenOnMobile': areIconsHiddenOnMobile,
+				}"
+			>
+				<div class="ds-datePickerBox__dateWrapper">
+					<span v-if="endDateEyebrowText" class="ds-datePickerBox__eyebrow">{{
+						endDateEyebrowText
+					}}</span>
+					<div class="ds-datePickerBox__date">
+						<ds-icon
+							v-if="endIcon"
+							class="ds-datePickerBox__icon"
+							:class="{ '-ds-hiddenOnMobile': areIconsHiddenOnMobile }"
+							:icon="endIcon"
+							:size="ICON_SIZES.XX_SMALL"
+						></ds-icon>
+						<span class="ds-datePickerBox__dateText">{{ endDateText }}</span>
+					</div>
+				</div>
+			</div>
+		</template>
 
 		<div v-if="state === DATE_PICKER_STATES.LOADING" class="ds-datePickerBox__loader">
 			<ds-icon :icon="ICONS.FAD_SPINNER_THIRD" :size="ICON_SIZES.X_SMALL" spinning />
@@ -53,7 +88,7 @@
 				color: $color-icon-hovered;
 			}
 
-			#{$self}__date {
+			#{$self}__dateWrapper {
 				color: $color-date-hovered;
 			}
 		}
@@ -64,7 +99,7 @@
 			color: $color-eyebrow-disabled;
 		}
 
-		#{$self}__date {
+		#{$self}__dateWrapper {
 			color: $color-date-disabled;
 		}
 
@@ -79,7 +114,7 @@
 				color: $color-icon;
 			}
 
-			#{$self}__date {
+			#{$self}__dateWrapper {
 				color: $color-date;
 			}
 		}
@@ -88,7 +123,7 @@
 		color: $color-eyebrow;
 	}
 
-	#{$self}__date {
+	#{$self}__dateWrapper {
 		color: $color-date;
 	}
 
@@ -104,16 +139,57 @@
 .ds-datePickerBox {
 	$self: &;
 
+	align-items: center;
 	border: $border-xs solid transparent;
+	column-gap: $space-2xs;
 	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	min-height: 44px;
+	justify-content: space-between;
+	min-height: 46px;
 	min-width: 76px;
 	padding: $space-2xs $space-xs;
 	pointer-events: none;
 	position: relative;
 
+	&__dateWrapper {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	/**
+	 * setting a width for a component solves a problem with unaligned separators for many boxes in a column
+	 * 46px comes from the minimum component width, not minimum content width
+	 * 52px comes from the maximum content width with an icon
+	 */
+	&__widthWrapper {
+		display: inline-flex;
+		min-width: 46px;
+
+		&.-ds-has-icon {
+			min-width: 52px;
+		}
+
+		&.-ds-justify-to-end {
+			justify-content: flex-end;
+		}
+
+		&.-ds-iconHiddenOnMobile {
+			&.-ds-has-icon {
+				min-width: 46px;
+
+				@media (#{breakpoint-s()}) {
+					min-width: 52px;
+				}
+			}
+		}
+	}
+
+	&__separator {
+		@include text-s-default-regular;
+
+		color: $color-neutral-text-heavy;
+	}
+
 	&.-ds-loading,
 	&.-ds-interactive {
 		background-color: $color-neutral-background-weak;
@@ -121,11 +197,6 @@
 		border-radius: $radius-s;
 	}
 
-	&.-ds-disabled {
-		background-color: $color-neutral-background-weak-disabled;
-		pointer-events: none;
-	}
-
 	&.-ds-isOpen {
 		background-color: $color-neutral-background-medium;
 
@@ -138,7 +209,7 @@
 		@include info-xs-default-regular;
 	}
 
-	&__dateWrapper {
+	&__date {
 		column-gap: $space-4xs;
 		display: inline-flex;
 
@@ -147,7 +218,7 @@
 		user-select: none;
 	}
 
-	&__date {
+	&__dateText {
 		@include text-s-default-regular;
 	}
 
@@ -179,21 +250,23 @@
 			$color-neutral-text-heavy,
 			$color-neutral-icon,
 			$color-neutral-icon-hovered,
-			$color-neutral-text-heavy,
+			$color-neutral-text-heavy-hovered,
 			$color-neutral-icon-disabled,
-			$color-neutral-text-disabled,
+			$color-neutral-text-weak-disabled,
 			$color-neutral-text-heavy-disabled,
 			$self
 		);
 	}
 
 	&:not(.-ds-loading) {
-		&.-ds-interactive {
-			cursor: pointer;
-			pointer-events: all;
+		&:not(.-ds-disabled) {
+			&.-ds-interactive {
+				cursor: pointer;
+				pointer-events: all;
 
-			&:hover:not(.-ds-isOpen) {
-				background-color: $color-neutral-background-weak-hovered;
+				&:hover:not(.-ds-isOpen) {
+					background-color: $color-neutral-background-weak-hovered;
+				}
 			}
 		}
 
@@ -223,6 +296,7 @@ import {
 	DatePickerStates,
 } from '../DatePicker/DatePicker.consts';
 import { defineComponent, PropType, toRaw } from 'vue';
+import { localMonthDayWithShortMonthDay } from '../../../../../tools/importers/helpers/dates';
 
 export default defineComponent({
 	name: 'DatePickerBox',
@@ -238,16 +312,25 @@ export default defineComponent({
 			type: String,
 			default: 'Ustaw',
 		},
-		date: {
+		startDate: {
 			type: Date,
 			default: null,
 		},
-		icon: {
+		endDate: {
+			type: Date,
+			default: null,
+		},
+		startIcon: {
+			type: Object,
+			default: null,
+			validate: (icon) => icon === null || Object.values(ICONS).includes(toRaw(icon)),
+		},
+		endIcon: {
 			type: Object,
 			default: null,
 			validate: (icon) => icon === null || Object.values(ICONS).includes(toRaw(icon)),
 		},
-		isIconHiddenOnMobile: {
+		areIconsHiddenOnMobile: {
 			type: Boolean,
 			default: false,
 		},
@@ -259,7 +342,11 @@ export default defineComponent({
 			type: String as PropType<DatePickerColors>,
 			default: DATE_PICKER_COLORS.NEUTRAL,
 		},
-		eyebrowText: {
+		startDateEyebrowText: {
+			type: String,
+			default: '',
+		},
+		endDateEyebrowText: {
 			type: String,
 			default: '',
 		},
@@ -277,15 +364,15 @@ export default defineComponent({
 		};
 	},
 	computed: {
-		text() {
-			if (this.date) {
-				return this.date.toLocaleDateString(undefined, {
-					month: 'short',
-					day: '2-digit',
-				});
+		startDateText() {
+			if (this.startDate) {
+				return localMonthDayWithShortMonthDay(this.startDate);
 			}
 			return this.placeholder;
 		},
+		endDateText() {
+			return localMonthDayWithShortMonthDay(this.endDate);
+		},
 	},
 });
 </script>