@webitel/ui-sdk 26.6.64 → 26.6.66

package/src/components/wt-datepicker/wt-datepicker.vue

@@ -1,43 +1,117 @@
 <template>
   <div
-:class="{
-    'wt-datepicker--disabled': disabled,
-    'wt-datepicker--invalid': invalid,
-  }" class="wt-datepicker">
-    <wt-label :disabled="disabled" v-bind="labelProps" :invalid="invalid">
+    class="wt-datepicker"
+  >
+    <wt-label :disabled="disabled" v-bind="labelProps" :for="datepickerId" :invalid="invalid">
       <!-- @slot Custom input label -->
       <slot name="label" v-bind="{ label }">
         {{ requiredLabel }}
       </slot>
     </wt-label>
-    <vue-datepicker
-ref="datepicker" :close-on-auto-apply="false"
-      :format="isDateTime ? 'dd/MM/yyyy HH:mm' : 'dd/MM/yyyy'" :locale="$i18n.locale" :model-value="+value"
-      :placeholder="placeholder || (isDateTime ? '00/00/00 00:00' : '00/00/0000')
-        " auto-apply class="wt-datepicker__datepicker" v-bind="{ ...$attrs, ...$props }" @closed="isOpened = false"
-      @open="isOpened = true" @update:model-value="emit('input', $event.getTime())">
-      <template #input-icon>
-        <wt-icon :color="disabled ? 'disabled' : 'default'" icon="calendar" />
-      </template>
-      <template #clear-icon>
-        <wt-icon-btn
-v-if="clearable && value" :color="disabled ? 'disabled' : 'default'" icon="close"
-          @click.stop="clearValue" />
-      </template>
-      <template #arrow-left>
-        <wt-icon-btn icon="arrow-left" />
-      </template>
-      <template #arrow-right>
-        <wt-icon-btn icon="arrow-right" />
-      </template>
-      <template v-if="isDateTime" #time-picker="{ time, updateTime }">
-        <div class="datepicker__timepicker">
-          <wt-time-input :model-value="time.hours" max-value="23" @update:model-value="updateTime" />
-          :
-          <wt-time-input :model-value="time.minutes" max-value="59" @update:model-value="updateTime($event, false)" />
-        </div>
-      </template>
-    </vue-datepicker>
+    <p-datepicker
+			ref="datepicker"
+			:id="datepickerId"
+			v-model="modelValue"
+			date-format="dd/mm/yy"
+			:required="required"
+			:disabled="disabled"
+			:show-time="showTime"
+			:min-date="minDate"
+			:max-date="maxDate"
+			:placeholder="placholder"
+			:show-clear="clearable && modelValue"
+			show-button-bar
+      fluid
+			:pt="{
+				selectMonth: {
+					class: 'typo-subtitle-1'
+				},
+				selectYear: {
+					class: 'typo-subtitle-1'
+				},
+				tableHeaderCell: {
+					class: 'typo-body-2-bold'
+				},
+				day: {
+					class: 'typo-body-2'
+				},
+				hour: {
+					class: 'typo-body-2'
+				},
+				minute: {
+					class: 'typo-body-2'
+				}
+			}"
+			@show="onPanelShow"
+    >
+			<template #buttonbar="{ todayCallback, clearCallback }">
+				<div class="wt-datepicker__button-bar">
+					<wt-button 
+						:color="ButtonColor.SECONDARY"
+						:variant="ButtonVariant.OUTLINED"
+						:size="ComponentSize.SM"
+						@click="todayCallback"
+					>
+						{{ t('reusable.today') }}
+					</wt-button>
+					<wt-button 
+						v-show="clearable && modelValue"
+						:color="ButtonColor.SECONDARY"
+						:variant="ButtonVariant.OUTLINED"
+						:size="ComponentSize.SM"
+						@click="clearCallback"
+					>
+						{{ t('reusable.clear') }}
+					</wt-button>
+				</div>
+			</template>
+
+			<template #prevbutton="{ actionCallback }">
+				<wt-icon-btn 
+					icon="arrow-left"
+					@click="actionCallback"
+				/>
+			</template>
+
+			<template #nextbutton="{ actionCallback }">
+				<wt-icon-btn 
+					icon="arrow-right"
+					@click="actionCallback"
+				/>
+			</template>
+
+			<template #clearicon="{ clearCallback }">
+				<wt-icon-btn
+					icon="close"
+					class="wt-datepicker__clear-icon"
+					@click="clearCallback"
+				/>
+			</template>
+
+			<template #hourincrementbutton="{ callbacks }">
+				<span @mousedown="callbacks.mousedown" @mouseup="callbacks.mouseup" @mouseleave="callbacks.mouseleave">
+					<wt-icon-btn icon="arrow-up" />
+				</span>
+			</template>
+
+			<template #hourdecrementbutton="{ callbacks }">
+				<span @mousedown="callbacks.mousedown" @mouseup="callbacks.mouseup" @mouseleave="callbacks.mouseleave">
+					<wt-icon-btn icon="arrow-down" />
+				</span>
+			</template>
+
+			<template #minuteincrementbutton="{ callbacks }">
+				<span @mousedown="callbacks.mousedown" @mouseup="callbacks.mouseup" @mouseleave="callbacks.mouseleave">
+					<wt-icon-btn icon="arrow-up" />
+				</span>
+			</template>
+
+			<template #minutedecrementbutton="{ callbacks }">
+				<span @mousedown="callbacks.mousedown" @mouseup="callbacks.mouseup" @mouseleave="callbacks.mouseleave">
+					<wt-icon-btn icon="arrow-down" />
+				</span>
+			</template>
+    </p-datepicker>
     <wt-message
       v-if="isValidation && validationText"
       :color="validationTextColor"
@@ -49,99 +123,92 @@ v-if="clearable && value" :color="disabled ? 'disabled' : 'default'" icon="close
   </div>
 </template>
 
-<script setup>
-import '@vuepic/vue-datepicker/dist/main.css';
-
-import VueDatepicker from '@vuepic/vue-datepicker';
-import { useWindowFocus } from '@vueuse/core';
-import { computed, ref, toRefs, watch } from 'vue';
-import { ComponentSize, MessageVariant } from '../../enums';
+<script setup lang="ts">
+import { fromZonedTime, toZonedTime } from 'date-fns-tz';
+import PDatepicker, {
+	DatePickerEmitsOptions,
+	DatePickerProps,
+} from 'primevue/datepicker';
+import {
+	computed,
+	defineModel,
+	defineProps,
+	nextTick,
+	toRefs,
+	useTemplateRef,
+} from 'vue';
+import { useI18n } from 'vue-i18n';
+import {
+	ButtonColor,
+	ButtonVariant,
+	ComponentSize,
+	MessageVariant,
+} from '../../enums';
 import { useValidation } from '../../mixins/validationMixin/useValidation';
 
-const props = defineProps({
-	/**
-	 * [`'date'`, `'datetime'`]
-	 * */
-
-	mode: {
-		type: String,
-		default: 'date',
-		options: [
-			'date',
-			'datetime',
-		],
-	},
-	value: {
-		type: [
-			String,
-			Number,
-		],
-		default: 'Date.now()',
-	},
-	/**
-	 * label above calendar input
-	 */
-	label: {
-		type: String,
-		default: '',
-	},
-	placeholder: {
-		type: String,
-		default: '',
-	},
-	disabled: {
-		type: Boolean,
-		default: false,
-	},
-	disabledDates: {
-		type: Object,
-	},
-	lang: {
-		type: String,
-		default: 'en',
-	},
-
-	/**
-	 * Object with props, passed down to wt-label as props
-	 */
+interface Props extends DatePickerProps {
+	showTime?: boolean;
+	minDate?: Date;
+	maxDate?: Date;
+	label?: string;
+	labelProps?: Record<string, unknown>;
+	placholder?: string;
+	disabled?: boolean;
+	required?: boolean;
+	clearable?: boolean;
+	timezone?: string;
+	v?: Record<string, unknown>;
+	customValidators?: unknown[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	labelProps: () => ({}),
+	customValidators: () => [],
+});
 
-	labelProps: {
-		type: Object,
-	},
+const emit = defineEmits<DatePickerEmitsOptions>();
 
-	/**
-	 * Native input required attribute
-	 */
+const model = defineModel<number | null>({
+	default: null,
+});
 
-	required: {
-		type: Boolean,
-		default: false,
-	},
+const { t } = useI18n();
 
-	// validation rules
-	// TODO: move to separate file to make it reusable
-	v: {
-		type: Object,
+const modelValue = computed({
+	get() {
+		if (!model.value) return null;
+		const date = new Date(+model.value);
+		return props.timezone ? toZonedTime(date, props.timezone) : date;
 	},
-	customValidators: {
-		type: Array,
-		default: () => [],
-	},
-	clearable: {
-		type: Boolean,
-		default: false,
+	set(value) {
+		if (!value) {
+			model.value = null;
+			return;
+		}
+		const utc = props.timezone ? fromZonedTime(value, props.timezone) : value;
+		model.value = utc.getTime();
 	},
 });
-const emit = defineEmits([
-	'input',
-]);
 
-const isOpened = ref(false);
-const datepicker = ref(null); // template ref
+const datepicker = useTemplateRef<HTMLDivElement>('datepicker');
+
+const datepickerId = `datepicker-${Math.random().toString(36).slice(2, 11)}`;
 
-const winFocused = useWindowFocus();
+// PrimeVue initializes its internal currentHour/currentMinute from new Date() when the
+// overlay opens, ignoring the model value. Re-assigning the same value forces a re-sync.
+const onPanelShow = () => {
+	if (props.showTime && modelValue.value) {
+		const currentDate = modelValue.value as Date;
+		nextTick(() => {
+			modelValue.value = new Date(currentDate.getTime());
+		});
+	}
 
-const isDateTime = props.mode === 'datetime';
+	// align overlay, because on first render it is not aligned correctly
+	setTimeout(() => {
+		datepicker.value?.alignOverlay();
+	}, 0);
+};
 
 const requiredLabel = computed(() => {
 	return props.required ? `${props.label}*` : props.label;
@@ -155,147 +222,20 @@ const { isValidation, invalid, validationText, validationTextColor } =
 		v,
 		customValidators,
 	});
-
-const clearValue = () => {
-	emit('input', null);
-
-	closePicker();
-};
-
-const closePicker = () => {
-	if (isOpened.value) {
-		datepicker?.value.closeMenu();
-	}
-
-	isOpened.value = false;
-};
-
-// close picker when window loses focus(when clicking to iframe)
-// https://webitel.atlassian.net/browse/WTEL-5794
-watch(winFocused, (focused) => {
-	if (!focused && isOpened.value) closePicker();
-});
 </script>
 
 <style scoped>
-.wt-datepicker :deep(.dp__main) .dp__input_icon {
-  left: var(--spacing-xs);
-  line-height: 0;
-}
-
-.wt-datepicker :deep(.dp__main) .dp__clear_icon {
-  right: var(--spacing-xs);
-  line-height: 0;
-}
-
-.wt-datepicker :deep(.dp__main) .dp__input {
-  /* Typography: typo-body-1 (14px/400/24px) - cannot add utility class to third-party component */
-  font-family: 'Montserrat', monospace;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 24px;
-  text-transform: none;
-}
-
-.wt-datepicker :deep(.dp__main) .dp__arrow_top {
-  display: none;
-}
-
-/* don't know why but month or year selection doesn't work
-   suppose its related to compatibility build */
-.wt-datepicker :deep(.dp__main) .dp__month_year_wrap {
-  pointer-events: none;
-}
-
-.wt-datepicker :deep(.dp__main) .dp__month_year_select,
-.wt-datepicker :deep(.dp__main) .dp__cell_inner {
-  /* Typography: typo-body-2 (12px/400/16px) - cannot add utility class to third-party component */
-  font-family: 'Montserrat', monospace;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  text-transform: none;
-}
-
-/* reset right/left arrow hover */
-.wt-datepicker :deep(.dp__main) .dp__inner_nav:hover {
-  background: inherit;
-}
-
-.wt-datepicker :deep(.dp__main) .dp__menu {
-  box-sizing: border-box;
-  box-shadow: var(--elevation-10);
-  border-radius: var(--border-radius);
-  padding: var(--spacing-xs);
-  width: 196px;
-  min-width: 196px;
-}
-
-.wt-datepicker :deep(.dp__main) .dp__calendar_wrap {
-  gap: var(--spacing-2xs);
-}
-
-.wt-datepicker :deep(.dp__main) .dp__calendar_header_item {
-  /* Typography: typo-subtitle-2 (12px/500/20px) - cannot add utility class to third-party component */
-  font-family: 'Montserrat', monospace;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 20px;
-  text-transform: none;
-}
-
-.wt-datepicker :deep(.dp__main) .dp__calendar_header_separator {
-  background: var(--secondary-color);
-}
-
-.wt-datepicker :deep(.dp__main) .dp__calendar_header,
-.wt-datepicker :deep(.dp__main) .dp__calendar_row {
-  gap: var(--spacing-3xs);
-}
-
-/* switch to time view */
-.wt-datepicker :deep(.dp__main) .dp__button {
-  display: none;
-}
-
-.wt-datepicker :deep(.dp__main) .dp__action_row {
-  flex-direction: column;
-  gap: var(--spacing-xs);
-}
-
-.wt-datepicker :deep(.dp__main) .dp__selection_preview,
-.wt-datepicker :deep(.dp__main) .dp__action_buttons {
-  width: 100%;
-}
-
-.wt-datepicker :deep(.dp__main) .dp__selection_preview {
-  text-align: center;
-}
-
-.wt-datepicker :deep(.dp__main) .dp__action_buttons {
-  display: flex;
-  gap: var(--spacing-xs);
-}
-
-.wt-datepicker--invalid :deep(.dp__main) .dp__input {
-  /* prevent outline overlapping false color */
-  outline: none;
-  border-color: var(--wt-text-field-input-border-error-color);
-  color: var(--wt-text-field-error-text-color);
-}
-
-.wt-datepicker--invalid :deep(.dp__main) .dp__input_icon {
-  --icon-color: var(--wt-text-field-input-border-error-color);
-}
-
-.datepicker__timepicker {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  margin-top: var(--spacing-xs);
-}
-
-.datepicker__timepicker .wt-time-input {
-  flex-grow: 1;
+.wt-datepicker__clear-icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  inset-inline-end: var(--p-form-field-padding-x);
+  cursor: pointer;
+}
+
+.wt-datepicker__button-bar {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
 }
 </style>

package/src/locale/en/en.js

@@ -67,6 +67,8 @@ export default deepmerge(
 			generate: 'Generate',
 			from: 'From',
 			to: 'To',
+			today: 'Today',
+			clear: 'Clear',
 			tts: 'Text-to-Speech',
 			state: 'State',
 			status: 'Status',

package/src/locale/es/es.js

@@ -63,6 +63,8 @@ export default {
 		generate: 'Generar',
 		from: 'Desde',
 		to: 'Hasta',
+		today: 'Hoy',
+		clear: 'Borrar',
 		tts: 'Texto a Voz',
 		state: 'Estado',
 		status: 'Estado',

package/src/locale/kz/kz.js

@@ -64,6 +64,8 @@ export default {
 		generate: 'Жасау',
 		from: 'Бастап',
 		to: 'Дейін',
+		today: 'Бүгін',
+		clear: 'Тазарту',
 		tts: 'Мәтін-дауыс',
 		state: 'Күй',
 		status: 'Күй',

package/src/locale/pl/pl.js

@@ -64,6 +64,8 @@ export default {
 		generate: 'Generuj',
 		from: 'Od',
 		to: 'Do',
+		today: 'Dzisiaj',
+		clear: 'Wyczyść',
 		tts: 'Tekst na mowę',
 		state: 'Stan',
 		status: 'Status',

package/src/locale/ro/ro.js

@@ -64,6 +64,8 @@ export default {
 		generate: 'Generează',
 		from: 'De la',
 		to: 'Până la',
+		today: 'Astăzi',
+		clear: 'Șterge',
 		tts: 'Text-to-Speech',
 		state: 'Stare',
 		status: 'Status',

package/src/locale/ru/ru.js

@@ -60,6 +60,8 @@ export default {
 		generate: 'Сгенерировать',
 		from: 'От',
 		to: 'До',
+		today: 'Сегодня',
+		clear: 'Очистить',
 		tts: 'Text-to-Speech',
 		state: 'Состояние',
 		status: 'Статус',

package/src/locale/uk/uk.js

@@ -60,6 +60,8 @@ export default {
 		generate: 'Згенерувати',
 		from: 'Від',
 		to: 'До',
+		today: 'Сьогодні',
+		clear: 'Очистити',
 		tts: 'Text-to-Speech',
 		state: 'Стан',
 		status: 'Статус',

package/src/locale/uz/uz.js

@@ -64,6 +64,8 @@ export default {
 		generate: 'Generatsiya',
 		from: 'Dan',
 		to: 'Gacha',
+		today: 'Bugun',
+		clear: 'Tozalash',
 		tts: 'Matnni ovozga aylantirish',
 		state: 'Holat',
 		status: 'Holat',

package/src/locale/vi/vi.js

@@ -64,6 +64,8 @@ export default {
 		generate: 'Tạo',
 		from: 'Từ',
 		to: 'Đến',
+		today: 'Hôm nay',
+		clear: 'Xóa',
 		tts: 'Chuyển văn bản thành giọng nói',
 		state: 'Trạng thái',
 		status: 'Trạng thái',

package/src/modules/Filters/components/filter-datetime.vue

@@ -1,9 +1,9 @@
 <template>
   <wt-datepicker
     :label="filterSchema.label"
-    :value="value"
-    mode="datetime"
-    @input="setValue"
+    :model-value="value"
+    show-time
+    @update:model-value="setValue"
   />
 </template>
 

package/src/modules/QueryFilters/components/filter-datetime.vue

@@ -1,9 +1,9 @@
 <template>
   <wt-datepicker
     :label="label"
-    :value="filterSchema.value"
-    mode="datetime"
-    @input="handleChange"
+    :model-value="filterSchema.value"
+    show-time
+    @update:model-value="handleChange"
   />
 </template>
 

package/src/plugins/primevue/primevue.plugin.js

@@ -1,3 +1,5 @@
+import { all } from 'primelocale';
+
 import PAutoComplete from 'primevue/autocomplete';
 import PAvatar from 'primevue/avatar';
 import PBadge from 'primevue/badge';
@@ -8,6 +10,7 @@ import PChip from 'primevue/chip';
 import PColumn from 'primevue/column';
 import PrimeVue from 'primevue/config';
 import PTable from 'primevue/datatable';
+import PDatepicker from 'primevue/datepicker';
 import PDivider from 'primevue/divider';
 import PGalleria from 'primevue/galleria';
 import PImage from 'primevue/image';
@@ -29,11 +32,16 @@ import ToastService from 'primevue/toastservice';
 import PToggleSwitch from 'primevue/toggleswitch';
 import PToolbar from 'primevue/toolbar';
 import Tooltip from 'primevue/tooltip';
-
+import { computed } from 'vue';
 import WebitelTheme from './theme/webitel-theme.js';
 
 import './primevue.css';
 
+const currentLocale = computed(() => {
+	const locale = localStorage.getItem('lang');
+	return locale === 'kz' ? 'kk' : locale;
+});
+
 const changeComponentCompatMode = (component) => {
 	component.compatConfig = {
 		MODE: 3,
@@ -55,6 +63,7 @@ const initPrimevue = (app) => {
 				},
 			},
 		},
+		locale: all[currentLocale.value] || all.en,
 	});
 
 	app.component('PButton', changeComponentCompatMode(PButton));
@@ -85,6 +94,7 @@ const initPrimevue = (app) => {
 		changeComponentCompatMode(PInputGroupAddon),
 	);
 	app.component('PMessage', changeComponentCompatMode(PMessage));
+	app.component('PDatepicker', changeComponentCompatMode(PDatepicker));
 	app.component('PToast', changeComponentCompatMode(PToast));
 	app.component('PMultiSelect', changeComponentCompatMode(PMultiSelect));
 	app.component('PSelect', changeComponentCompatMode(PSelect));

package/src/plugins/primevue/theme/components/button/button.js

@@ -145,7 +145,7 @@ const button = {
         .p-button {
             ${generateWtTypographyCustomCss({
 							dt,
-							typo: WtTypography.Button,
+							typo: WtTypography.ButtonMD,
 						})}
         }
         .p-button:disabled {

package/src/plugins/primevue/theme/components/components.js

@@ -5,6 +5,7 @@ import breadcrumb from './breadcrumb/breadcrumb.js';
 import button from './button/button.js';
 import checkbox from './checkbox/checkbox.js';
 import chip from './chip/chip.js';
+import datepicker from './datepicker/datepicker.js';
 import divider from './divider/divider.js';
 import galleria from './galleria/galleria.js';
 import image from './image/image.js';
@@ -34,6 +35,7 @@ const components = {
 	badge,
 	chip,
 	checkbox,
+	datepicker,
 	textarea,
 	toast,
 	toggleswitch: switcher,