@topvisor/ui 1.0.22-test-ci-cd-10 → 1.2.0

package/src/components/forms/input/stories/overview.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { sizes } from '@/components/forms/helpers';
+import type { Props } from '../input';
+import { TopInput } from '../../forms';
+import { reactive } from 'vue';
+
+defineProps<Props>();
+
+/**
+ * Варианты props для вывода компонента в различных состояних
+ */
+const genVariantProps = () => [
+	{
+		modelValue: '',
+	},
+	{
+		modelValue: 'Текст введен',
+	},
+	{
+		modelValue: '',
+		title: 'С иконкой поиска',
+		icon: '',
+	},
+	{
+		modelValue: '',
+		title: 'С кнопкой очистки',
+		addCleaner: true,
+	},
+	{
+		modelValue: '',
+		title: 'Не активное',
+		disabled: true,
+	},
+	{
+		modelValue: '',
+		title: 'Только чтение',
+		readonly: true,
+	},
+] satisfies Props[];
+
+const variantPropsBySize: Record<string, Props[]> = {};
+Object.values(sizes).forEach(keySize => variantPropsBySize[keySize] = reactive(genVariantProps()));
+</script>
+
+<template>
+	<div>
+		<template v-for="size in sizes">
+			<h2>Размер: {{ size }}</h2>
+
+			<template v-for="props in variantPropsBySize[size]">
+				<TopInput
+					:="{ ...$props, ...props }"
+					v-model="props.modelValue"
+					:size="size"
+				/>
+				&nbsp;
+			</template>
+			<hr>
+		</template>
+	</div>
+</template>

package/src/components/forms/inputDate/datepicker.css

@@ -0,0 +1,246 @@
+/* ui-datepicker */
+.ui-datepicker {
+	--datepicker-day-color: var(--color-layout-front-1);
+	--datepicker-day-color-hover: var(--color-layer-1);
+	--datepicker-selected-color: var(--color-bg-primary-1);
+	--datepicker-selected-color-hover: var(--color-bg-primary-2);
+	--datepicker-range-color: var(--color-layer-primary-1);
+	--datepicker-range-color-hover: var(--color-layer-primary-2);
+
+	user-select: none;
+	width: auto;
+	padding: 0;
+}
+
+.ui-datepicker:before,
+.ui-datepicker:after {
+	display: none;
+}
+
+/* на странице */
+.ui-datepicker-inline {
+	display: inline-block !important;
+}
+
+/* в popup */
+.ui-datepicker:not(.ui-datepicker-inline) {
+	border-radius: 8px;
+	background: var(--color-layout-front-1);
+	box-shadow: var(--top-shadow);
+	z-index: 10000000 !important;
+	padding: 8px;
+}
+
+.ui-datepicker a {
+	text-decoration: none !important;
+}
+
+.ui-datepicker option {
+	color: var(--color-text-1);
+	font-size: 14px;
+}
+
+.ui-datepicker-header {
+	padding: 0 !important;
+	margin: 0 0 18px 0;
+	display: flex;
+	align-items: center;
+}
+
+.ui-datepicker-header > * {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.ui-datepicker-title {
+	width: 100% !important;
+	height: 24px;
+	margin: 0 !important;
+}
+
+.ui-datepicker-month,
+.ui-datepicker-year {
+	outline: none !important;
+	width: auto !important;
+	border: none;
+	padding: 0;
+	margin: 0 6px !important;
+	text-align: center;
+	font-size: 16px !important;
+}
+
+.ui-datepicker-month {
+	color: var(--color-text-1);
+}
+
+.ui-datepicker-year {
+	color: var(--color-text-2);
+}
+
+/*	select.ui-datepicker-month,
+select.ui-datepicker-year{ cursor: pointer; color: var(--color-blue-500); }*/
+select.ui-datepicker-month,
+select.ui-datepicker-year {
+	cursor: pointer;
+}
+
+.ui-datepicker-prev,
+.ui-datepicker-next {
+	cursor: pointer;
+	width: 24px !important;
+	height: 24px !important;
+	font-size: 24px;
+	font-family: "Topvisor-2";
+	position: static !important;
+}
+
+.ui-datepicker-prev:before {
+	color: var(--color-text-3);
+	content: "";
+}
+
+.ui-datepicker-prev-hover:before {
+	color: var(--color-text-1);
+	content: "";
+}
+
+.ui-datepicker-next {
+	color: var(--color-text-3);
+	order: 1;
+}
+
+.ui-datepicker-next-hover {
+	color: var(--color-text-1);
+	order: 1;
+}
+
+.ui-datepicker-next:before {
+	content: "";
+}
+
+.ui-datepicker-prev > *,
+.ui-datepicker-next > * {
+	display: none !important;
+}
+
+.ui-datepicker thead th {
+	width: auto !important;
+	padding: 0 !important;
+	color: var(--color-text-3);
+	font-size: 14px;
+	font-weight: 400 !important;
+}
+
+.ui-datepicker table {
+	margin: 0 !important;
+	font-size: 14px;
+}
+
+.ui-datepicker td {
+	color: var(--color-text-1);
+	background: none;
+	padding: 0 !important;
+}
+
+.ui-datepicker td span,
+.ui-datepicker td a {
+	border-radius: 8px;
+	border: none;
+	min-width: 32px;
+	height: 32px;
+	padding: 0;
+	margin: 1px;
+	color: var(--color-text-1) !important;
+	line-height: 32px;
+	text-align: center;
+	position: relative;
+	display: block;
+}
+
+/* обычные даты */
+.ui-datepicker td a {
+	background: var(--datepicker-day-color);
+}
+
+.ui-datepicker td a:hover {
+	background: var(--datepicker-day-color-hover);
+}
+
+/* текущий день */
+td.ui-datepicker-today span,
+td.ui-datepicker-today a {
+	background: none;
+	position: relative;
+}
+
+/* выбранные даты */
+.ui-datepicker td.selected a {
+	background: var(--datepicker-range-color);
+	padding-right: 0;
+	padding-left: 1px;
+	margin-right: 1px;
+	margin-left: 0;
+}
+
+.ui-datepicker td.selected a:hover {
+	background: var(--datepicker-range-color-hover);
+}
+
+.ui-datepicker td.selected:not(.selected-start):not(:first-child):not(.first-of-month) a {
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+	padding-left: 1px;
+	margin-left: 0;
+}
+
+.ui-datepicker td.selected:not(.selected-end):not(:last-child):not(.last-of-month) a {
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+	padding-right: 1px;
+	margin-right: 0;
+}
+
+.ui-datepicker td.selected-start a,
+.ui-datepicker td.selected-end a,
+.ui-datepicker td.ui-datepicker-current-day a {
+	background: var(--datepicker-selected-color);
+	color: #FFF !important;
+}
+
+.ui-datepicker td.selected-start a:hover,
+.ui-datepicker td.selected-end a:hover,
+.ui-datepicker td.ui-datepicker-current-day a:hover {
+	background: var(--datepicker-selected-color-hover);
+}
+
+.ui-datepicker-day-marks {
+	line-height: normal;
+	position: absolute;
+	right: 0;
+	bottom: 3px;
+	left: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.ui-datepicker-day-marks > i {
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	width: 4px;
+	height: 4px;
+	margin: 0 2px;
+}
+
+.ui-datepicker-day-marks-exists {
+	background: var(--color-text-primary);
+}
+
+.ui-datepicker-day-marks-update {
+	background: var(--color-text-negative);
+}
+
+.ui-datepicker-row-break {
+	display: none;
+}

package/src/components/forms/inputDate/datepicker.ts

@@ -0,0 +1,101 @@
+import { toRef, watch } from 'vue';
+import Core from '@/core/core/core';
+import { dateFormat } from '@/core/utils/date';
+
+import css from '@/components/forms/inputDate/datepicker.css?inline';
+
+Core.insertStyleToPage(css);
+
+const $ = (el: HTMLInputElement) => {
+	if (!Core.$?.ui?.datepicker) {
+		console.info('Для работы datepicker требуется глобальная загрузка jQuery UI Datepicker');
+
+		return;
+	}
+
+	Core.$.datepicker.setDefaults({
+		dateFormat: Core.state.dateFormat.toLowerCase().replace('m', 'mm').replace('y', 'yy').replace('d', 'dd'),
+	});
+
+	return Core.$(el);
+};
+
+export function connectDatepicker(el: HTMLInputElement, options: any) {
+	return $(el)?.datepicker(options);
+}
+
+let dateFormatted;
+let delimiter: string;
+let dateNumbersCount: number;
+let delimitersIndexes: number[];
+
+watch(toRef(Core.state.dateFormat), () => {
+	// генерация отформатированной даты, извлечение из нее разделителей и их индексов
+	dateFormatted = dateFormat('2000-01-01');
+	delimiter = dateFormatted.match(/\D/)?.[0] ?? '-';
+	dateNumbersCount = dateFormatted.replace(/\D+/g, '').length;
+	delimitersIndexes = [];
+
+	for (let i = 0; i < dateFormatted.length; i++) {
+		if (dateFormatted[i] === delimiter) {
+			delimitersIndexes.push(i);
+		}
+	}
+}, { immediate: true });
+
+/**
+ * Автоформат при вводе в поле с датой
+ */
+export function oninput(e: any) {
+	let selectionPos = e.target.selectionEnd;
+	let value = e.target.value;
+
+	// разбить занчение на две половины - до и после каретки
+	// удалить все символы, кроме цифр
+	let valueChunkLeft = value.substring(0, selectionPos).replace(/\D+/g, '');
+	let valueChunkRight = value.substring(selectionPos).replace(/\D+/g, '');
+
+	let extraNumbersCount = valueChunkLeft.length + valueChunkRight.length - dateNumbersCount;
+	if (extraNumbersCount > 0) {
+		// // количество цифр больше требуемого - удалить лишние
+		valueChunkLeft = valueChunkLeft.substring(0, dateNumbersCount);
+
+		const valueChunkRightMaxLength = dateNumbersCount - valueChunkLeft.length;
+		valueChunkRight = valueChunkRight.substring(valueChunkRight.length - valueChunkRightMaxLength);
+	} else if (extraNumbersCount < 0) {
+		// количество цифр меньше требуемого - добавить 0
+		if (e.inputType === 'deleteContentForward') {
+			// нажатие на delete - добавить к левой части для правильного позиционирования каретки
+			valueChunkLeft += '0'.repeat(-extraNumbersCount);
+		} else {
+			valueChunkRight = '0'.repeat(-extraNumbersCount) + valueChunkRight;
+		}
+	}
+
+	selectionPos = valueChunkLeft.length;
+	value = valueChunkLeft + valueChunkRight;
+
+	// вставить разделители
+	for (let i = 0; i < delimitersIndexes.length; i++) {
+		const delimiterIndex = delimitersIndexes[i];
+
+		value = value.substring(0, delimiterIndex) + delimiter + value.substring(delimiterIndex);
+
+		// сдвинуть каретку, если разделитель вставлен левее ее
+		if (selectionPos >= delimiterIndex) {
+			selectionPos++;
+		}
+	}
+
+	// нажатие на backspace - если слева символ разделителя, перенести каретку за него
+	if (e.inputType === 'deleteContentBackward' && value[selectionPos - 1] === delimiter) {
+		selectionPos--;
+	}
+
+	// если значение изменилось - вставить его и переместить каретку
+	if (value !== e.target.value) {
+		e.target.value = value;
+		e.target.selectionStart = selectionPos;
+		e.target.selectionEnd = selectionPos;
+	}
+}

package/src/components/forms/inputDate/inputDate.stories.ts

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+import Component from './inputDate.vue';
+import * as ComponentsConst from './inputDate';
+import OverviewComponent from './stories/overview.vue';
+
+const argTypes = genArgsTypes(Component, ComponentsConst, ['default']);
+
+/**
+ * Поле ввода с выбором даты.
+ *
+ * В современных браузерах для тач устройств выводится нативный выбор даты, в остальных устройствах подклчюается jQuery Datepicker
+ * с автоформатом вводимой даты.
+ *
+ * Для формата дат используются функции utils/date.
+ *
+ * Формат определяется настройкой dateFormat, которую можно указать при подклчюении UI к приложению Vue или через Core.defineOptions().
+ */
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+	args: {
+		modelValue: '2000-01-01',
+	},
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {} satisfies Story;
+
+export const Overview: Story = genOverviewStory({
+	args: {
+		title: 'Заголовок поля',
+		captionType: '',
+		isError: false,
+	},
+}, OverviewComponent);
+
+export default meta;

package/src/components/forms/inputDate/inputDate.ts

@@ -0,0 +1,5 @@
+import type { Emits, Props } from '@/components/forms/input/input';
+
+export * from '../../forms/input/input';
+
+export type{ Props, Emits };

package/src/components/forms/inputDate/inputDate.vue

@@ -0,0 +1,133 @@
+<script lang="ts">
+const useNativeDatepicker = !!document.documentElement.ontouchstart && !!document.createElement('input').showPicker;
+
+let onInputLazy = (_e: any) => { };
+</script>
+
+<script setup lang="ts">
+import { ref, computed, onUnmounted } from 'vue';
+import { dateFormat, dateUnformat } from '@/core/utils/date';
+import type { Props, Emits } from './inputDate';
+import TopInput from '@/components/forms/input/input.vue';
+import { useI18n } from '@/core/plugins/i18n';
+
+const i18n = useI18n();
+const props = withDefaults(defineProps<Props>(), {
+	icon2: '',
+});
+
+const emit = defineEmits<Emits>();
+
+onUnmounted(() => {
+	if ($el) {
+		$el.datepicker('destroy');
+	}
+});
+
+const el = ref();
+let $el: any;
+
+const localValue = computed({
+	get() {
+		return dateFormat(props.modelValue, 2, undefined, '0000-00-00');
+	},
+
+	set(value) {
+		value = dateUnformat(value, '0000-00-00');
+
+		emit('update:modelValue', value);
+	},
+});
+
+let oninput = (e: any) => {
+	onInputLazy(e);
+};
+
+let onchange = (e: any) => {
+	const date = dateUnformat(e.target.value);
+	const dateFormatted = dateFormat(date);
+
+	if (!dateFormatted || dateFormatted === i18n.Common.Not_date || e.target.value !== dateFormatted) {
+		e.target.value = localValue.value;
+
+		return;
+	}
+
+	localValue.value = e.target.value;
+};
+
+/**
+ * Инициализпация функций выбора дат
+ *
+ * Для не нативного datepicker
+ */
+async function init(e: any) {
+	const datepicker = await import('./datepicker');
+
+	// формат ввода
+	onInputLazy = datepicker.oninput;
+
+	// datepicker
+	$el = datepicker.connectDatepicker(e.target, {
+		onSelect: () => onchange(e),
+	});
+
+	if ($el) {
+		$el.datepicker('show');
+	}
+}
+</script>
+
+<template>
+	<TopInput
+		v-if="useNativeDatepicker"
+		:="$props"
+		:modelValue="localValue"
+		readonly
+		@click="el.showPicker()"
+	>
+		<input
+			ref="el"
+			type="date"
+			class="top-input_input-date"
+			:modelValue="modelValue"
+			@change="(e: any) => localValue = e.target.value"
+			tabindex="-1"
+		/>
+	</TopInput>
+
+	<TopInput
+		v-else
+		:="$props"
+		:modelValue="localValue"
+		@update:modelValue="(newValue) => (newValue === '') ? localValue = '' : ''"
+		@input.date="oninput"
+		@focus.once.date="init"
+		@change.date="onchange"
+		modificator="datepicker"
+	/>
+</template>
+
+<style>
+.top-input-datepicker {
+	width: calc(105px + var(--top-icon-width) + var(--top-icon2-width));
+}
+
+.top-input_input-date {
+	opacity: 0;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: -1;
+}
+
+.top-input_input-date::-webkit-inner-spin-button {
+	display: none;
+}
+
+.top-input_input-date::-webkit-calendar-picker-indicator {
+	opacity: 0;
+}
+</style>

package/src/components/forms/inputDate/stories/overview.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { Props } from '../inputDate';
+import InputDate from '../inputDate.vue';
+import { reactive } from 'vue';
+
+defineProps<Props>();
+
+const modelValues = reactive([
+	'2000-01-01',
+	'2000-01-01',
+]);
+</script>
+
+<template>
+	<div>
+		<h2>Выбор даты</h2>
+
+		<InputDate
+			:="$props"
+			v-model="modelValues[0]"
+		/>
+
+		Выбранная дата: {{ modelValues[0] }}
+
+		<h2>Выбор даты с очисткой</h2>
+
+		<InputDate
+			:="$props"
+			v-model="modelValues[1]"
+			:addCleaner="true"
+		/>
+
+		Выбранная дата: {{ modelValues[1] }}
+	</div>
+</template>

package/src/components/forms/inputRange/inputRange.stories.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+import Component from './inputRange.vue';
+import * as ComponentsConst from './inputRange';
+import OverviewComponent from './stories/overview.vue';
+
+import TopInput from '@/components/forms/input/input.vue';
+
+const argTypes = genArgsTypes(Component, ComponentsConst);
+
+/**
+ * В компоненте используется 2 именованых слота:
+ * - **#from**: поле ввода "от"
+ * - **#to**: поле ввода "до"
+ */
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {
+	render: (_args) => ({
+		components: {
+			InputRange: Component,
+			TopInput,
+		},
+		template: `
+			<InputRange>
+				<template #from>
+					<TopInput
+						title="от"
+						model-value=""
+					/>
+				</template>
+
+				<template #to>
+					<TopInput
+						title="до"
+						model-value=""
+					/>
+				</template>
+			</InputRange>
+		`,
+	}),
+} satisfies Story;
+
+export const Overview: Story = genOverviewStory({}, OverviewComponent);
+
+export default meta;

package/src/components/forms/inputRange/inputRange.ts

@@ -0,0 +1,3 @@
+export interface Props {
+
+}