@bethinkpl/design-system 34.0.7 → 34.0.9

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

@@ -356,6 +356,7 @@ import {
 	localWeekdayName,
 } from '../../../../../tools/importers/helpers/dates';
 import { capitalizeFirstLetter } from '../../../../../tools/importers/helpers/modifiers';
+import { useLegacyI18n } from '../../../composables/useLegacyI18n';
 
 export default defineComponent({
 	name: 'DateBox',
@@ -369,7 +370,7 @@ export default defineComponent({
 		},
 		placeholder: {
 			type: String,
-			default: 'Ustaw',
+			default: null,
 		},
 		startDate: {
 			type: Date,
@@ -406,6 +407,10 @@ export default defineComponent({
 			default: false,
 		},
 	},
+	setup() {
+		const { locale, t } = useLegacyI18n();
+		return { locale, t };
+	},
 	data() {
 		return {
 			ICONS: Object.freeze(ICONS),
@@ -417,9 +422,9 @@ export default defineComponent({
 	computed: {
 		startDateText() {
 			if (this.startDate) {
-				return localMonthDayWithShortMonthDay(this.startDate);
+				return localMonthDayWithShortMonthDay(this.startDate, this.locale);
 			}
-			return this.placeholder;
+			return this.placeholder ?? this.t('ds.datePicker.set');
 		},
 		endDateIfDifferentThanStartDate() {
 			return this.startDate &&
@@ -429,19 +434,24 @@ export default defineComponent({
 				: null;
 		},
 		endDateText() {
-			return localMonthDayWithShortMonthDay(this.endDateIfDifferentThanStartDate);
+			return localMonthDayWithShortMonthDay(
+				this.endDateIfDifferentThanStartDate,
+				this.locale,
+			);
 		},
 		startDateEyebrowText() {
 			if (!this.startDate) {
 				return '';
 			}
-			return capitalizeFirstLetter(localWeekdayName(this.startDate));
+			return capitalizeFirstLetter(localWeekdayName(this.startDate, this.locale));
 		},
 		endDateEyebrowText() {
 			if (!this.endDateIfDifferentThanStartDate) {
 				return '';
 			}
-			return capitalizeFirstLetter(localWeekdayName(this.endDateIfDifferentThanStartDate));
+			return capitalizeFirstLetter(
+				localWeekdayName(this.endDateIfDifferentThanStartDate, this.locale),
+			);
 		},
 	},
 });

package/lib/js/components/DatePickers/DatePicker/DatePicker.composables.ts

@@ -3,9 +3,10 @@ import { FlatpickrFn, Instance as DatePickerInstance } from 'flatpickr/dist/type
 import { CustomLocale } from 'flatpickr/dist/types/locale';
 
 import { DatePickerCalendarPositions, FLATPICKR_POSITIONS } from './index';
+import { SUPPORTED_LOCALE, SupportedLocale } from '../../../i18n';
 
 let flatpickrFunction: FlatpickrFn | null = null;
-let locale: CustomLocale;
+const localeCache = new Map<string, CustomLocale>();
 
 export interface DatePickerComposablesProps {
 	disableDates: Array<Date>;
@@ -23,6 +24,7 @@ interface InitFlatpickrPrams {
 	onClose: () => void;
 	defaultDates: Date | Array<Date>;
 	mode: 'single' | 'range';
+	locale?: SupportedLocale;
 }
 
 interface InitFlatpickr {
@@ -44,6 +46,7 @@ export function initFlatpickr({
 	onClose,
 	defaultDates,
 	mode = 'single',
+	locale = SUPPORTED_LOCALE.pl,
 }: InitFlatpickrPrams): InitFlatpickr {
 	let datePicker: DatePickerInstance | null = null;
 	const isOpen = ref(false);
@@ -65,15 +68,29 @@ export function initFlatpickr({
 		if (!flatpickrFunction) {
 			try {
 				flatpickrFunction = (await import('flatpickr')).default;
-				locale = (await import('flatpickr/dist/l10n/pl')).Polish;
 			} catch (e) {
 				console.error('Failed to load flatpickr', e);
 				return;
 			}
 		}
+		let flatpickrLocale: CustomLocale | undefined;
+
+		if (locale === SUPPORTED_LOCALE.pl) {
+			if (!localeCache.has(SUPPORTED_LOCALE.pl)) {
+				try {
+					localeCache.set(
+						SUPPORTED_LOCALE.pl,
+						(await import('flatpickr/dist/l10n/pl')).Polish,
+					);
+				} catch (e) {
+					console.error('Failed to load flatpickr Polish locale', e);
+				}
+			}
+			flatpickrLocale = localeCache.get(SUPPORTED_LOCALE.pl);
+		}
 		datePicker = flatpickrFunction(flatpickrInputElement, {
 			mode,
-			locale,
+			locale: flatpickrLocale ?? SUPPORTED_LOCALE.en,
 			//disableMobile fixes mobile pickers on platform
 			disableMobile: true,
 			positionElement: datePickerElement,

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

@@ -42,7 +42,7 @@
 		<date-box
 			v-else
 			:is-interactive="isInteractive"
-			:placeholder="placeholder"
+			:placeholder="resolvedPlaceholder"
 			:start-date="date"
 			:start-icon="icon"
 			:are-icons-hidden-on-mobile="isIconHiddenOnMobile"
@@ -172,6 +172,7 @@ import {
 	DatePickerStates,
 	DatePickerTriggerTypes,
 } from './DatePicker.consts';
+import { useLegacyI18n } from '../../../composables/useLegacyI18n';
 
 export default defineComponent({
 	name: 'DatePicker',
@@ -190,7 +191,7 @@ export default defineComponent({
 		},
 		placeholder: {
 			type: String,
-			default: 'Wybierz datę',
+			default: null,
 		},
 		date: {
 			type: Date,
@@ -271,6 +272,8 @@ export default defineComponent({
 		const flatpickrInputRef = ref<HTMLInputElement>() as Ref<HTMLInputElement>;
 		const datePickerRef = ref<HTMLDivElement>() as Ref<HTMLDivElement>;
 
+		const { locale, t } = useLegacyI18n();
+
 		const onChange = (event: Array<Date>) => {
 			emit('update:date', event[0]);
 		};
@@ -292,6 +295,7 @@ export default defineComponent({
 			onClose,
 			defaultDates: props.date ?? new Date(),
 			mode: 'single',
+			locale: locale.value,
 		});
 
 		return {
@@ -302,6 +306,8 @@ export default defineComponent({
 			toggleDatePicker,
 			updateDatePicker,
 			createDatePicker,
+			locale,
+			t,
 			DATE_PICKER_CALENDAR_POSITIONS,
 			DATE_PICKER_COLORS,
 			DATE_PICKER_STATES,
@@ -327,17 +333,20 @@ export default defineComponent({
 					: TILE_BORDER_COLORS.WARNING_WEAK,
 			}[this.color];
 		},
+		resolvedPlaceholder() {
+			return this.placeholder ?? this.t('ds.datePicker.selectDate');
+		},
 		eyebrowText() {
 			if (!this.date) {
 				return '';
 			}
-			return capitalizeFirstLetter(localWeekdayName(this.date));
+			return capitalizeFirstLetter(localWeekdayName(this.date, this.locale));
 		},
 		text() {
 			if (!this.date) {
-				return this.placeholder;
+				return this.resolvedPlaceholder;
 			}
-			return localFullDateWithShortMonthName(this.date);
+			return localFullDateWithShortMonthName(this.date, this.locale);
 		},
 		tileIcon() {
 			if (this.additionalText) {

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

@@ -2,7 +2,7 @@
 	<div ref="dateRangePickerRef" class="ds-dateRangePicker">
 		<date-box
 			:is-interactive="isInteractive"
-			:placeholder="placeholder"
+			:placeholder="resolvedPlaceholder"
 			:start-date="startDate"
 			:end-date="endDate"
 			:start-icon="startIcon"
@@ -62,6 +62,7 @@ import {
 	DatePickerStates,
 } from '../DatePicker';
 import { DatePickerComposablesProps, initFlatpickr } from '../DatePicker/DatePicker.composables';
+import { useLegacyI18n } from '../../../composables/useLegacyI18n';
 
 export default defineComponent({
 	name: 'DateRangePicker',
@@ -75,7 +76,7 @@ export default defineComponent({
 		},
 		placeholder: {
 			type: String,
-			default: 'Wybierz datę',
+			default: null,
 		},
 		startDate: {
 			type: Date,
@@ -147,6 +148,8 @@ export default defineComponent({
 		},
 		{ emit },
 	) {
+		const { locale, t } = useLegacyI18n();
+
 		const flatpickrInstance = ref<DatePickerInstance | null>(null);
 		const dateRangePickerRef = ref() as Ref<HTMLDivElement>;
 		const flatpickrInputRef = ref() as Ref<HTMLInputElement>;
@@ -175,6 +178,7 @@ export default defineComponent({
 			onClose,
 			defaultDates: [props.startDate, props.endDate],
 			mode: 'range',
+			locale: locale.value,
 		});
 
 		return {
@@ -186,12 +190,19 @@ export default defineComponent({
 			createDatePicker,
 			destroyDatePicker,
 			updateDatePicker,
+			locale,
+			t,
 			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: {
+		resolvedPlaceholder() {
+			return this.placeholder ?? this.t('ds.datePicker.selectDate');
+		},
+	},
 	methods: {
 		async bindFlatpickrInstance() {
 			this.flatpickrInstance = await this.createDatePicker(

package/lib/js/composables/useLegacyI18n.ts

@@ -1,8 +1,9 @@
-import { getCurrentInstance } from 'vue';
-import { TranslateFunction } from '../i18n';
+import { computed, ComputedRef, getCurrentInstance } from 'vue';
+import { SupportedLocale, TranslateFunction } from '../i18n';
 
 interface IUseLegacyI18n {
 	t: TranslateFunction;
+	locale: ComputedRef<SupportedLocale>;
 }
 
 /**
@@ -18,7 +19,10 @@ export const useLegacyI18n = (): IUseLegacyI18n => {
 
 	const t = internalInstance.root.proxy.$t;
 
+	const locale = computed(() => internalInstance.root.proxy?.$i18n.locale as SupportedLocale);
+
 	return {
 		t,
+		locale,
 	};
 };

package/lib/js/i18n/en/datePicker.json

@@ -0,0 +1,4 @@
+{
+	"ds.datePicker.selectDate": "Select date",
+	"ds.datePicker.set": "Set"
+}

package/lib/js/i18n/en.ts

@@ -2,10 +2,12 @@ import globals from './en/globals.json';
 import accessStatus from './en/accessStatus.json';
 import pagination from './en/pagination.json';
 import statsLayout from './en/statsLayout.json';
+import datePicker from './en/datePicker.json';
 
 export default {
 	...globals,
 	...accessStatus,
 	...pagination,
 	...statsLayout,
+	...datePicker,
 };

package/lib/js/i18n/index.ts

@@ -9,6 +9,12 @@ export const messages = {
 	en,
 };
 
+export type SupportedLocale = keyof typeof messages;
+
+export const SUPPORTED_LOCALE = Object.fromEntries(
+	Object.keys(messages).map((key) => [key, key]),
+) as Record<SupportedLocale, SupportedLocale>;
+
 export type ValidI18nKey = keyof MessageSchema;
 
 export interface TranslateFunction {

package/lib/js/i18n/pl/datePicker.json

@@ -0,0 +1,4 @@
+{
+	"ds.datePicker.selectDate": "Wybierz datę",
+	"ds.datePicker.set": "Ustaw"
+}

package/lib/js/i18n/pl.ts

@@ -2,10 +2,12 @@ import globals from './pl/globals.json';
 import accessStatus from './pl/accessStatus.json';
 import pagination from './pl/pagination.json';
 import statsLayout from './pl/statsLayout.json';
+import datePicker from './pl/datePicker.json';
 
 export default {
 	...globals,
 	...accessStatus,
 	...pagination,
 	...statsLayout,
+	...datePicker,
 };

package/lib/js/icons/fontawesome.ts

@@ -108,6 +108,7 @@ import { faHourglassEnd } from '@fortawesome/pro-regular-svg-icons/faHourglassEn
 import { faHourglassStart } from '@fortawesome/pro-regular-svg-icons/faHourglassStart';
 import { faHouse } from '@fortawesome/pro-regular-svg-icons/faHouse';
 import { faImage } from '@fortawesome/pro-regular-svg-icons/faImage';
+import { faImageCircleXmark } from '@fortawesome/pro-regular-svg-icons/faImageCircleXmark';
 import { faImage as fasImage } from '@fortawesome/pro-solid-svg-icons/faImage';
 import { faImages } from '@fortawesome/pro-regular-svg-icons/faImages';
 import { faImages as fasImages } from '@fortawesome/pro-solid-svg-icons/faImages';
@@ -413,6 +414,7 @@ export const FONTAWESOME_ICONS = {
 	FA_HOURGLASS: faHourglass,
 	FA_HOUSE: faHouse,
 	FA_IMAGE: faImage,
+	FA_IMAGE_CIRCLE_XMARK: faImageCircleXmark,
 	FA_IMAGE_SOLID: fasImage,
 	FA_IMAGES_SOLID: fasImages,
 	FA_IMAGES: faImages,

package/lib/js/vue-custom.d.ts

@@ -1,7 +1,9 @@
-import { TranslateFunction, ValidI18nKey } from './i18n';
+import { SupportedLocale, TranslateFunction, ValidI18nKey } from './i18n';
+import { VueI18nInstance } from 'vue-i18n';
 
 declare module '@vue/runtime-core' {
 	interface ComponentCustomProperties {
 		$t: TranslateFunction<ValidI18nKey | string>;
+		$i18n: VueI18nInstance;
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "34.0.7",
+  "version": "34.0.9",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",