@topvisor/ui 0.0.34 → 0.0.35

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

@@ -0,0 +1,233 @@
+/* ui-datepicker */
+.ui-datepicker {
+	--datepicker-day-color: #FFF;
+	--datepicker-day-color-hover: var(--color-blue-150);
+	--datepicker-selected-color: var(--color-blue-500);
+	--datepicker-selected-color-hover: var(--color-blue-550);
+	--datepicker-range-color: var(--color-blue-100);
+	--datepicker-range-color-hover: var(--color-blue-150);
+
+	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(--content-background-color);
+	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);
+	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);
+}
+
+.ui-datepicker-year {
+	color: var(--color-gray-300);
+}
+
+/*	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 {
+	content: '';
+}
+
+.ui-datepicker-next {
+	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: #B3BEBF;
+	font-size: 14px;
+	font-weight: 400 !important;
+}
+
+.ui-datepicker table {
+	margin: 0 !important;
+	font-size: 14px;
+}
+
+.ui-datepicker td {
+	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) !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-blue-500);
+}
+
+.ui-datepicker-day-marks-update {
+	background: var(--color-red-500);
+}
+
+.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 UtilsDate from '@/core/utils/date';
+
+import css from '@/components/forms/inputDate/datepicker.css?raw';
+
+Core.appendStyle(css);
+
+const _window: any = window;
+
+const $ = (el: HTMLInputElement) => {
+	if (!_window?.jQuery?.ui?.datepicker) {
+		console.info('Для работы datepicker требуется глобальная загрузка jQuery UI Datepicker');
+
+		return;
+	}
+
+	_window.jQuery.datepicker._defaults.dateFormat = Core.state.dateFormat.toLowerCase().replace('m', 'mm').replace('y', 'yy').replace('d', 'dd');
+
+	return _window.jQuery(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 = UtilsDate.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, true);
+
+/**
+ * Поле ввода с выбором даты.
+ *
+ * В современных браузерах для тач устройств выводится нативный выбор даты, в остальных устройствах подклчюается 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,4 @@
+import type { Props, Emits } from '@/components/forms/input/input';
+export * from '@/components/forms/input/input';
+
+export type{ Props, Emits };

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

@@ -0,0 +1,127 @@
+<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 UtilsDate from '@/core/utils/date';
+import type { Props, Emits } from './inputDate';
+import { Input } from '@/components/forms/forms';
+import Core from '@/core/core/core';
+
+const props = withDefaults(defineProps<Props>(), {
+	icon2: '',
+});
+
+const emit = defineEmits<Emits>();
+
+const el = ref();
+
+const localValue = computed({
+	get() {
+		return UtilsDate.dateFormat(props.modelValue, 2, '0000-00-00');
+	},
+
+	set(value) {
+		value = UtilsDate.dateUnformat(value, '0000-00-00');
+
+		emit('update:modelValue', value);
+	},
+});
+
+let oninput = (e: any) => {
+	onInputLazy(e);
+};
+
+let onchange = (e: any) => {
+	const dateUnformat = UtilsDate.dateUnformat(e.target.value);
+	const dateFormat = UtilsDate.dateFormat(dateUnformat);
+
+	if (!dateFormat || dateFormat === Core.L.Not_date || e.target.value !== dateFormat) {
+		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
+	const $el = datepicker.connectDatepicker(e.target, {
+		onSelect: () => onchange(e),
+	});
+
+	if ($el) {
+		$el.datepicker('show');
+
+		onUnmounted(() => $el.datepicker('destroy'));
+	}
+}
+</script>
+
+<template>
+	<Input
+		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"
+		/>
+	</Input>
+
+	<Input
+		v-else
+		:="$props"
+		:modelValue="localValue"
+		@update:modelValue="(newValue) => (newValue === '') ? localValue = '' : ''"
+		@input.date="oninput"
+		@focus.once.date="init"
+		@change.date="onchange"
+		modificator="datepicker"
+	/>
+</template>
+
+<style module>
+.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/radio/radio.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+import Component from './radio.vue';
+import * as ComponentsConst from './radio';
+import OverviewComponent from './stories/overview.vue';
+
+const argTypes = genArgsTypes(Component, ComponentsConst, true);
+
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+	args: {
+		value: 'default value',
+		modelValue: '',
+	},
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {
+	args: {
+		default: 'radio',
+	},
+} satisfies Story;
+
+export const Overview: Story = genOverviewStory({
+	args: {
+		isError: false,
+	},
+}, OverviewComponent);
+
+export default meta;

package/src/components/forms/radio/radio.ts

@@ -0,0 +1,15 @@
+export interface Props {
+	/**
+	 * [подробнее](https://vuejs.org/guide/essentials/forms.html#radio)
+	 */
+	modelValue: string | object;
+	value: Props['modelValue'];
+	name?: string;
+	description?: string;
+	disabled?: boolean;
+	isError?: boolean;
+}
+
+export interface Emits {
+	(e: 'update:modelValue', value: Props['modelValue']): void;
+}

package/src/components/forms/radio/radio.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Props, Emits } from './radio';
+import ControlLabel from '../controlLabel/controlLabel.vue';
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const localValue = computed({
+	get() {
+		return props.modelValue;
+	},
+	set(value) {
+		emit('update:modelValue', value);
+	},
+});
+
+</script>
+
+<template>
+	<label
+		:class="{
+			['top-forms-optionWrapper']: true,
+			['top-radio']: true,
+			['top-radio_' + name]: name !== '',
+			['top-disabled']: disabled,
+			['top-error']: isError && !disabled,
+		}"
+	>
+		<input
+			type="radio"
+			:class="{
+				['top-forms-focusable']: !disabled,
+				['top-forms-option']: true,
+				['top-radio_input']: true,
+				['top-error']: isError && !disabled,
+			}"
+			v-model="localValue"
+			:name="name"
+			:value="value"
+			:disabled="disabled"
+		>
+
+		<ControlLabel
+			v-if="$slots.default"
+			:description="description"
+			:disabled="disabled"
+		>
+			<!-- @slot Слот с заголовком -->
+			<slot></slot>
+		</ControlLabel>
+	</label>
+</template>
+
+<style module>
+:root {
+	--top-radio-background-color: var(--content-background-color);
+	--top-radio-background-color-hover: var(--top-radio-background-color);
+	--top-radio-background-color-active: var(--top-radio-background-color);
+}
+
+.top-radio {
+	cursor: pointer;
+}
+
+.top-radio_input {
+	border-radius: 50%;
+	background: var(--content-background-color);
+	border: 1px solid var(--top-forms-border-color);
+	width: calc(var(--top-forms-option-height) - 3px * 2);
+	height: calc(var(--top-forms-option-height) - 3px * 2);
+}
+
+.top-radio_input:hover {
+	border-color: var(--top-forms-option-color);
+	background: var(--color-theme-50)
+}
+
+.top-radio_input:checked {
+	border-color: var(--top-forms-option-color);
+	border-width: 5px;
+}
+
+.top-radio_input:checked:hover {
+	border-color: var(--top-forms-option-color-hover);
+}
+
+/* disabled */
+.top-radio_input:disabled {
+	border-color: var(--color-line-1-opacity);
+	background: var(--color-theme-50);
+}
+
+/* disabled selected */
+.top-radio_input:checked:disabled {
+	border-color: var(--color-theme-400);
+}
+
+/* isError */
+.top-radio_input.top-error {
+	border-color: var(--color-negative);
+}
+
+.top-radio_input.top-error:hover {
+	border-color: var(--color-negative-2);
+}
+</style>