@topvisor/ui 0.0.35 → 0.0.37

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

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

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

@@ -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, 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

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

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

@@ -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/radio/radio.stories.ts

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

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

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