@topvisor/ui 1.0.41-dialog.1 → 1.1.0-date.0

package/src/components/forms/forms.ts

@@ -0,0 +1,44 @@
+/**
+ * Замечание для разработчиков
+ *
+ * При изменении библиотеки Forms не забудьте обновить ее подключение в плагине
+ *
+ * @see import('@/core/core/plugin')
+ */
+
+import type { ComponentCustomProps } from 'vue';
+
+import Avatar from './avatar/avatar.vue';
+import Button from './button/button.vue';
+import Caption from './caption/caption.vue';
+import Checkbox from './checkbox/checkbox.vue';
+import ControlLabel from './controlLabel/controlLabel.vue';
+import Hint from './hint/hint.vue';
+import Input from './input/input.vue';
+import InputDate from './inputDate/inputDate.vue';
+import InputRange from './inputRange/inputRange.vue';
+import Radio from './radio/radio.vue';
+import Switcher from './switcher/switcher.vue';
+import Textarea from './textarea/textarea.vue';
+import Select from './select/select.vue';
+import Loadbar from './loadbar/loadbar.vue';
+import Preloader from './preloader/preloader.vue';
+
+// Для не SFC, чтобы работало автозаполнение в template в ComponentOptions
+// Имена намеренно делаются разными, чтобы типы не конфликтовали: `Button` и `TopButton`
+
+export const TopAvatar = Avatar as typeof Avatar & ComponentCustomProps;
+export const TopButton = Button as typeof Button & ComponentCustomProps;
+export const TopCaption = Caption as typeof Caption & ComponentCustomProps;
+export const TopCheckbox = Checkbox as typeof Checkbox & ComponentCustomProps;
+export const TopControlLabel = ControlLabel as typeof ControlLabel & ComponentCustomProps;
+export const TopHint = Hint as typeof Hint & ComponentCustomProps;
+export const TopInput = Input as typeof Input & ComponentCustomProps;
+export const TopInputDate = InputDate as typeof InputDate & ComponentCustomProps;
+export const TopInputRange = InputRange as typeof InputRange & ComponentCustomProps;
+export const TopRadio = Radio as typeof Radio & ComponentCustomProps;
+export const TopSwitcher = Switcher as typeof Switcher & ComponentCustomProps;
+export const TopTextarea = Textarea as typeof Textarea & ComponentCustomProps;
+export const TopSelect = Select as typeof Select & ComponentCustomProps;
+export const TopLoadbar = Loadbar as typeof Loadbar & ComponentCustomProps;
+export const TopPreloader = Preloader as typeof Preloader & ComponentCustomProps;

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

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import { genArgsTypes } from '@/components/helpersStories';
+import Component from './hint.vue';
+
+const argTypes = genArgsTypes(Component);
+
+/**
+ * Компонент для вывода иконки с подсказкой
+ *
+ * Для настройки tooltip см. директиву v-top-tooltip
+ */
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	args: {
+		hint: 'Текст подсказки',
+	},
+	argTypes,
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {} satisfies Story;
+
+export const Tooltip = {
+	render: (args) => ({
+		components: {
+			Hint: Component,
+		},
+		setup() {
+			return { args };
+		},
+		template: `
+			<Hint :hint="args.hint" v-top-tooltip></Hint>
+		`,
+	}),
+} satisfies Story;
+
+export default meta;

package/src/components/forms/hint/hint.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { Props } from './types';
+
+defineProps<Props>();
+</script>
+
+<template>
+	<span
+		class="top-hint"
+		data-top-icon=""
+		:title="hint"
+	></span>
+</template>
+
+<style>
+.top-hint {
+	--top-icon-size: 16px;
+	--top-icon-width: var(--top-icon-size);
+
+	border-radius: 50%;
+	background: inherit;
+	padding: 1px;
+	color: var(--color-text-3);
+	line-height: 1;
+	z-index: 1;
+	pointer-events: all;
+}
+
+.top-hint:hover {
+	color: var(--color-text-2);
+}
+</style>

package/src/components/forms/hint/types.ts

@@ -0,0 +1,8 @@
+export interface Props {
+	/**
+	 * Текст подсказки, значение атрибута title
+	 *
+	 * Для подключения tooltip используйте директиву **v-top-tooltip**
+	 */
+	hint: string;
+}

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

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
+import Component from './input.vue';
+import OverviewComponent from './stories/overview.vue';
+
+const argTypes = genArgsTypes(Component);
+
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+	args: {
+		modelValue: '',
+	},
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = {} satisfies Story;
+
+export const Overview: Story = genOverviewStory({
+	args: {
+		title: 'Заголовок поля',
+		captionType: '',
+		isError: false,
+		styling: '',
+	},
+}, OverviewComponent);
+
+export default meta;

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

@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Emits, Props } from './types';
+import TopLoadbar from '@/components/forms/loadbar/loadbar.vue';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<Props>(), {
+	size: 's',
+	captionType: '',
+	styling: '',
+});
+
+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 = (event: Event) => {
+	if (props.modelValue) {
+		event.stopPropagation();
+	}
+
+	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"
+	>
+		<TopLoadbar v-if="isLoading"/>
+
+		<input
+			v-top-focus.onupdate="isError"
+			type="text"
+			:class="{
+				['top-input_input']: true,
+				['top-input_input-' + modificator]: !!modificator,
+				['top-forms-focusable']: !disabled,
+				['top-error']: isError,
+				[`top-style_${styling}`]: !!styling,
+			}"
+			autocomplete="off_always"
+			:name="name"
+			v-model="localValue"
+			:title="title"
+			:placeholder="placeholder"
+			:disabled="disabled"
+			:readonly="readonly"
+			@keydown.esc="(event) => addCleaner && clean(event)"
+			:data-1p-ignore="$attrs.type !== 'email' && $attrs.type !== 'password'"
+			:="$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>
+.top-input {
+	--top-forms_clear-width: 0px;
+
+	border-radius: var(--top-forms-radius);
+	width: 180px;
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	gap: var(--top-gap-1);
+}
+
+.top-input_input {
+	color: var(--color-text-2);
+	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 {
+	color: var(--color-text-1);
+	border-color: var(--top-forms-border-color-hover);
+	outline: none;
+}
+
+/* значки */
+.top-input[data-top-icon]:before,
+.top-input[data-top-icon2]:after {
+	--top-icon-color: var(--color-text-4);
+	--top-icon2-color: var(--color-text-4);
+
+	position: absolute;
+	z-index: 3;
+	font-size: 20px;
+}
+
+.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[data-top-icon] {
+	--top-icon-size: 16px;
+	--top-icon-width: 20px;
+	--top-icon-color: var(--color-text-3);
+
+	cursor: pointer;
+	border-radius: 50%;
+	width: 20px;
+	height: 16px;
+	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[data-top-icon]:hover {
+	--top-icon-color: var(--color-text-2);
+}
+
+/* TODO: перенести в inputsRange */
+.top-input_input {
+	width: 50%;
+	flex-grow: 1;
+}
+
+/* top-loadbar */
+.top-input .top-loadbar {
+	border-radius: var(--top-forms-radius) 0 0 0;
+}
+</style>

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

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { Props, Size } from '../types';
+import { TopInput } from '../../forms';
+import { reactive } from 'vue';
+import { genPropMetaType } from '../../../helpersStories';
+
+defineProps<Props>();
+
+const sizes = genPropMetaType(TopInput, 'size').schema.schema as Size[];
+
+/**
+ * Варианты props для вывода компонента в различных состояних
+ */
+const genVariantProps = (): Props[] => [
+	{
+		modelValue: '',
+	},
+	{
+		modelValue: 'Текст введен',
+	},
+	{
+		modelValue: '',
+		title: 'С иконкой поиска',
+		icon: '',
+	},
+	{
+		modelValue: '',
+		title: 'С кнопкой очистки',
+		addCleaner: true,
+	},
+	{
+		modelValue: '',
+		title: 'Не активное',
+		disabled: true,
+	},
+	{
+		modelValue: '',
+		title: 'Только чтение',
+		readonly: true,
+	},
+];
+
+const variantPropsBySize = {} as Record<Size, Props[]>;
+sizes.forEach(size => variantPropsBySize[size] = 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
+				/>
+				&nbsp;
+			</template>
+			<hr>
+		</template>
+	</div>
+</template>

package/src/components/forms/input/types.ts

@@ -0,0 +1,31 @@
+import type { Size } from '@/components/forms/helpers';
+
+export interface Props {
+	modelValue: string;
+
+	name?: string;
+	disabled?: boolean;
+	readonly?: boolean;
+	modificator?: string;
+	size?: Size;
+	styling?: Styling;
+
+	isError?: boolean;
+	isLoading?: boolean;
+
+	icon?: string;
+	icon2?: string;
+
+	addCleaner?: boolean;
+
+	title?: string;
+	captionType?: CaptionType;
+}
+
+export interface Emits {
+	(e: 'update:modelValue', value: string): void;
+}
+
+export type Styling = '' | 'light' | 'soft' | 'transparent';
+export type CaptionType = '' | 'slide' | 'top';
+export type { Size };

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;
+}