@topvisor/ui 1.2.0 → 1.3.1-dev.2

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

@@ -1,61 +0,0 @@
-<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

@@ -1,246 +0,0 @@
-/* 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

@@ -1,101 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,133 +0,0 @@
-<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

@@ -1,35 +0,0 @@
-<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

@@ -1,53 +0,0 @@
-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

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