@topvisor/ui 0.0.35 → 0.0.36

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

@@ -1,170 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { Props, Emits } from './input';
-
-defineOptions({
-	inheritAttrs: false,
-});
-
-const props = withDefaults(defineProps<Props>(), {
-	size: 's',
-	captionType: '',
-});
-
-const emit = defineEmits<Emits>();
-
-const localValue = computed({
-	get() {
-		return props.modelValue;
-	},
-	set(value) {
-		emit('update:modelValue', value);
-	},
-});
-
-const placeholder = computed(() => {
-	if (props.addCleaner && !props.title) {
-		return '';
-	}
-	if (props.captionType !== '') {
-		return '';
-	}
-
-	return props.title;
-});
-
-const clean = () => {
-	emit('update:modelValue', '');
-};
-</script>
-
-<template>
-	<label
-		:class="{
-			['top-input']: true,
-			['top-size_' + size]: true,
-			['top-disabled']: disabled,
-			['top-input-' + modificator]: !!modificator,
-			['top-input-withCleaner']: addCleaner && localValue && localValue !== '0000-00-00',
-			['top-formsCaptionWrapper']: captionType !== '',
-			['top-formsCaptionWrapper-always']: captionType === 'top',
-		}"
-		:data-top-icon="icon"
-		:data-top-icon2="icon2"
-	>
-		<input
-			type="text"
-			:class="{
-				['top-input_input']: true,
-				['top-input_input-' + modificator]: !!modificator,
-				['top-forms-focusable']: !disabled,
-				['top-error']: isError,
-			}"
-			autocomplete="off_always"
-			:name="name"
-			v-model="localValue"
-			:title="title"
-			:placeholder="placeholder"
-			:disabled="disabled"
-			:readonly="readonly"
-			@keydown.esc.stop="() => (addCleaner || !!$slots.btn) && clean()"
-			:="$attrs"
-		>
-
-		<span
-			v-if="addCleaner && localValue && localValue !== '0000-00-00'"
-			class="top-input_cleaner"
-			data-top-icon=""
-			@click.prevent="clean"
-		></span>
-
-		<span
-			v-if="captionType !== ''"
-			class="top-formsCaption"
-		>
-			{{ title }}
-		</span>
-
-		<!-- @slot Слот для вставки произвольного кода в label -->
-		<slot></slot>
-	</label>
-</template>
-
-<style module>
-.top-input {
-	--top-forms_clear-width: 0px;
-
-	width: 180px;
-	position: relative;
-	display: inline-flex;
-	align-items: center;
-	gap: var(--top-gap-1);
-}
-
-.top-input_input {
-	background: var(--top-forms-background-color);
-	height: var(--top-forms-base-height);
-	padding: 0;
-	padding-right: calc(max(var(--top-forms-padding), calc(var(--top-icon2-width) + var(--top-forms_clear-width))));
-	padding-left: calc(max(var(--top-forms-padding), var(--top-icon-width)));
-}
-
-.top-input_input:hover {
-	background: var(--top-forms-background-color-hover);
-}
-
-.top-input_input:focus {
-	outline-color: var(--color-theme-75);
-	outline-offset: 0;
-}
-
-/* значки */
-.top-input[data-top-icon]:before,
-.top-input[data-top-icon2]:after {
-	--top-icon-color: var(--color-text-secondary);
-	--top-icon2-color: var(--color-text-secondary);
-
-	position: absolute;
-	z-index: 3;
-}
-
-.top-input[data-top-icon]:before {
-	left: 0;
-}
-
-.top-input[data-top-icon2]:after {
-	right: 0;
-}
-
-/* cleaner */
-.top-input-withCleaner {
-	--top-forms_clear-width: 24px;
-}
-
-.top-input_cleaner {
-	--top-icon-size: 20px;
-	--top-icon-width: 20px;
-	--top-icon-color: var(--color-text-3);
-
-	cursor: pointer;
-	border-radius: 50%;
-	width: 24px;
-	height: 24px;
-	position: absolute;
-	right: calc(var(--top-forms-border-width) + max(var(--top-icon2-width), var(--top-forms-padding) / 2));
-	z-index: 1;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.top-input_cleaner:hover {
-	--top-icon-color: var(--color-text-2);
-}
-
-/* TODO: перенести в inputsRange */
-.top-input_input {
-	width: 50%;
-	flex-grow: 1;
-}
-</style>

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 { Input, Button } 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]">
-				<Input
-					:="{ ...$props, ...props }"
-					v-model="props.modelValue"
-					:size="size"
-				/>
-				&nbsp;
-			</template>
-			<hr>
-		</template>
-	</div>
-</template>

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>