@topvisor/ui 1.2.0 → 1.3.1-dev.2

package/src/components/forms/button/stories/README.md

@@ -1,9 +0,0 @@
-Основной компонент всех кнопок на сайте
-
-Расширяет стандартный button следующими возможностями:
-
-- выбор цвета кнопки
-- выбор стиля кнопки
-- вставка в кнопку компонента иконки
-- вставка в виде ссылки
-- вставка в виде submit

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

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { sizes } from '@/components/forms/helpers';
-import type { Props } from '../types';
-import { colors, styles } from '../types';
-import Button from '../button.vue';
-
-defineProps<Props>();
-</script>
-
-<template>
-	<div>
-		<template v-for="styling in styles">
-			<h2>Стиль: {{ styling || 'regular' }}</h2>
-
-			<template v-for="size in sizes">
-				<h3>Размер: {{ size || 's' }}</h3>
-
-				<template v-for="color in colors">
-					<Button
-						:="$props"
-						:color="color"
-						:size="size"
-						:styling="styling"
-					>
-						{{ color }}
-					</Button>
-					&nbsp;
-				</template>
-				<hr>
-			</template>
-		</template>
-	</div>
-</template>

package/src/components/forms/button/style/button.css

@@ -1,139 +0,0 @@
-.top-button {
-	cursor: pointer;
-	box-sizing: border-box;
-	box-shadow: var(--top-button-box-shadow);
-	border-radius: var(--top-forms-radius);
-	border: var(--top-forms-border-width) solid var(--top-forms-border-color);
-	background-color: var(--top-button-background-color);
-	height: var(--top-forms-base-height);
-	padding: 0 var(--top-forms-padding);
-	color: var(--top-button-color);
-	line-height: 1;
-	white-space: nowrap;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-
-	transition: background-color 150ms, border-color 150ms, box-shadow 150ms;
-}
-.top-button:hover {
-	box-shadow: var(--top-button-box-shadow-hover);
-	background-color: var(--top-button-background-color-hover);
-}
-.top-button:active {
-	box-shadow: var(--top-button-box-shadow-active);
-	background-color: var(--top-button-background-color-active);
-}
-.top-button.top-active {
-	box-shadow: var(--top-button-box-shadow-selected);
-	background-color: var(--top-button-background-color-selected);
-}
-
-.top-button.top-button-progress {
-	cursor: help;
-	box-shadow: inset rgba(0, 0, 0, 0.5) 0 0 64px;
-	background-image: linear-gradient(-45deg,
-	rgba(255, 255, 255, 0.2) 25%,
-	transparent 25%,
-	transparent 50%,
-	rgba(255, 255, 255, 0.2) 50%,
-	rgba(255, 255, 255, 0.2) 75%,
-	transparent 75%,
-	transparent);
-	background-size: 32px 32px;
-	animation: progress 1s linear infinite;
-}
-
-@keyframes progress {
-	0% {
-		background-position-x: 0px;
-	}
-	100% {
-		background-position-x: 32px;
-	}
-}
-
-a.top-button,
-button.top-button {
-	min-width: 100px;
-	text-decoration: none;
-}
-
-a.top-button,
-a.top-button:hover {
-	min-width: var(--top-forms-base-height);
-	text-decoration: none;
-}
-
-.top-button[data-top-icon]:not(:empty):not(.top-button-withoutText),
-.top-button[data-top-icon2]:not(:empty):not(.top-button-withoutText) {
-	justify-content: flex-start;
-	text-align: left;
-}
-
-.top-button[data-top-icon] {
-	padding-left: 0;
-}
-.top-button[data-top-icon2] {
-	padding-right: var(--top-select_arrow-width);
-}
-.top-button[data-top-icon2]:after {
-	margin-left: auto;
-}
-
-.top-button:empty,
-.top-button.top-button-withoutText {
-	min-width: var(--top-forms-base-height);
-}
-
-.top-button[data-top-icon]:empty,
-.top-button[data-top-icon2]:empty,
-.top-button[data-top-icon].top-button-withoutText,
-.top-button[data-top-icon2].top-button-withoutText {
-	padding: 0;
-}
-
-.top-button.top-color_blue {
-	--top-button-background-color: var(--color-bg-primary-1);
-}
-.top-button.top-color_green {
-	--top-button-background-color: var(--color-bg-positive-1);
-}
-.top-button.top-color_orange {
-	--top-button-background-color: var(--color-bg-warning-1);
-}
-.top-button.top-color_red {
-	--top-button-background-color: var(--color-bg-negative-1);
-}
-.top-button.top-color_pink {
-	--top-button-background-color: var(--color-bg-info-1);
-}
-
-.top-button.top-color_brand {
-	--top-button-color: var(--color-text-1-inverse);
-	--top-button-background-color: var(--color-brand-1);
-}
-
-.top-button.top-color_theme {
-	--top-button-box-shadow-hover: none;
-	--top-button-box-shadow-active: none;
-	--top-button-box-shadow-selected: none;
-
-	--top-icon-color: var(--color-text-2);
-	--top-icon2-color: var(--color-text-2);
-
-	--top-button-color: var(--color-text-1);
-	--top-button-background-color: transparent;
-	--top-button-background-color-hover: var(--color-layer-1);
-	--top-button-background-color-active: var(--color-layer-3);
-	--top-button-background-color-selected: var(--color-layer-2);
-}
-
-.top-button.top-color_theme:hover {
-	--top-icon-color: var(--color-text-1);
-	--top-icon2-color: var(--color-text-1);
-}
-
-.top-button.top-color_theme.top-active {
-	--top-icon-color: var(--color-text-2);
-}

package/src/components/forms/button/style/style-outline.css

@@ -1,129 +0,0 @@
-.top-button.top-style_outline {
-	--top-button-box-shadow: none;
-	--top-button-box-shadow-hover: none;
-	--top-button-box-shadow-active: none;
-	--top-button-box-shadow-selected: none;
-
-	--top-button-background-color: var(--color-layout-front-1);
-
-	--top-forms-border-width: 1px;
-}
-
-.top-button.top-style_outline.top-color_theme {
-	--top-button-color: var(--color-text-2);
-
-	--top-icon-color: var(--color-text-2);
-	--top-icon2-color: var(--color-text-2);
-
-	--top-button-background-color-hover: var(--color-layer-1);
-	--top-button-background-color-active: var(--color-layer-2);
-	--top-button-background-color-selected: var(--color-layer-3);
-
-	--top-forms-border-color: var(--color-line-3);
-}
-
-.top-button.top-style_outline.top-color_theme:hover {
-	--top-forms-border-color: var(--color-line-4);
-}
-
-.top-button.top-style_outline.top-color_blue {
-	--top-button-color: var(--color-text-primary);
-
-	--top-icon-color: var(--color-text-primary);
-	--top-icon2-color: var(--color-text-primary);
-
-	--top-button-background-color-hover: var(--color-layer-primary-1);
-	--top-button-background-color-active: var(--color-layer-primary-2);
-	--top-button-background-color-selected: var(--color-layer-primary-3);
-
-	--top-forms-border-color: var(--color-line-primary-1);
-}
-
-.top-button.top-style_outline.top-color_blue:hover {
-	--top-forms-border-color: var(--color-line-primary-2);
-}
-
-.top-button.top-style_outline.top-color_green {
-	--top-button-color: var(--color-text-positive);
-
-	--top-icon-color: var(--color-text-positive);
-	--top-icon2-color: var(--color-text-positive);
-
-	--top-button-background-color-hover: var(--color-layer-positive-1);
-	--top-button-background-color-active: var(--color-layer-positive-2);
-	--top-button-background-color-selected: var(--color-layer-positive-3);
-
-	--top-forms-border-color: var(--color-line-positive-1);
-}
-
-.top-button.top-style_outline.top-color_green:hover {
-	--top-forms-border-color: var(--color-line-positive-2);
-}
-
-.top-button.top-style_outline.top-color_orange {
-	--top-button-color: var(--color-text-warning);
-
-	--top-icon-color: var(--color-text-warning);
-	--top-icon2-color: var(--color-text-warning);
-
-	--top-button-background-color-hover: var(--color-layer-warning-1);
-	--top-button-background-color-active: var(--color-layer-warning-2);
-	--top-button-background-color-selected: var(--color-layer-warning-3);
-
-	--top-forms-border-color: var(--color-line-warning-1);
-}
-
-.top-button.top-style_outline.top-color_orange:hover {
-	--top-forms-border-color: var(--color-line-warning-2);
-}
-
-.top-button.top-style_outline.top-color_red {
-	--top-button-color: var(--color-text-negative);
-
-	--top-icon-color: var(--color-text-negative);
-	--top-icon2-color: var(--color-text-negative);
-
-	--top-button-background-color-hover: var(--color-layer-negative-1);
-	--top-button-background-color-active: var(--color-layer-negative-2);
-	--top-button-background-color-selected: var(--color-layer-negative-3);
-
-	--top-forms-border-color: var(--color-line-negative-1);
-}
-
-.top-button.top-style_outline.top-color_red:hover {
-	--top-forms-border-color: var(--color-line-negative-2);
-}
-
-.top-button.top-style_outline.top-color_pink {
-	--top-button-color: var(--color-text-info);
-
-	--top-icon-color: var(--color-text-info);
-	--top-icon2-color: var(--color-text-info);
-
-	--top-button-background-color-hover: var(--color-layer-info-1);
-	--top-button-background-color-active: var(--color-layer-info-2);
-	--top-button-background-color-selected: var(--color-layer-info-3);
-
-	--top-forms-border-color: var(--color-line-info-1);
-}
-
-.top-button.top-style_outline.top-color_pink:hover {
-	--top-forms-border-color: var(--color-line-info-2);
-}
-
-.top-button.top-style_outline.top-color_brand {
-	--top-button-color: var(--color-brand-1);
-
-	--top-icon-color: var(--color-brand-1);
-	--top-icon2-color: var(--color-brand-1);
-
-	--top-button-background-color-hover: var(--color-layer-1);
-	--top-button-background-color-active: var(--color-layer-2);
-	--top-button-background-color-selected: var(--color-layer-3);
-
-	--top-forms-border-color: var(--color-brand-1);
-}
-
-.top-button.top-style_outline.top-color_brand:hover {
-	--top-forms-border-color: var(--color-brand-2);
-}

package/src/components/forms/button/style/style-soft.css

@@ -1,89 +0,0 @@
-.top-button.top-style_soft {
-	--top-shadow-darken-1: none;
-	--top-shadow-darken-2: none;
-	--top-shadow-darken-3: none;
-}
-
-.top-button.top-style_soft.top-color_theme {
-	--top-button-color: var(--color-text-1);
-
-	--top-icon-color: var(--color-text-1);
-	--top-icon2-color: var(--color-text-1);
-
-	--top-button-background-color: var(--color-layer-1);
-	--top-button-background-color-hover: var(--color-layer-2);
-	--top-button-background-color-active: var(--color-layer-3);
-	--top-button-background-color-selected: var(--color-layer-3);
-}
-
-.top-button.top-style_soft.top-color_blue {
-	--top-button-color: var(--color-text-primary);
-
-	--top-icon-color: var(--color-text-primary);
-	--top-icon2-color: var(--color-text-primary);
-
-	--top-button-background-color: var(--color-layer-primary-1);
-	--top-button-background-color-hover: var(--color-layer-primary-2);
-	--top-button-background-color-active: var(--color-layer-primary-3);
-	--top-button-background-color-selected: var(--color-layer-primary-3);
-}
-
-.top-button.top-style_soft.top-color_green {
-	--top-button-color: var(--color-text-positive);
-
-	--top-icon-color: var(--color-text-positive);
-	--top-icon2-color: var(--color-text-positive);
-
-	--top-button-background-color: var(--color-layer-positive-1);
-	--top-button-background-color-hover: var(--color-layer-positive-2);
-	--top-button-background-color-active: var(--color-layer-positive-3);
-	--top-button-background-color-selected: var(--color-layer-positive-3);
-}
-
-.top-button.top-style_soft.top-color_orange {
-	--top-button-color: var(--color-text-warning);
-
-	--top-icon-color: var(--color-text-warning);
-	--top-icon2-color: var(--color-text-warning);
-
-	--top-button-background-color: var(--color-layer-warning-1);
-	--top-button-background-color-hover: var(--color-layer-warning-2);
-	--top-button-background-color-active: var(--color-layer-warning-3);
-	--top-button-background-color-selected: var(--color-layer-warning-3);
-}
-
-.top-button.top-style_soft.top-color_red {
-	--top-button-color: var(--color-text-negative);
-
-	--top-icon-color: var(--color-text-negative);
-	--top-icon2-color: var(--color-text-negative);
-
-	--top-button-background-color: var(--color-layer-negative-1);
-	--top-button-background-color-hover: var(--color-layer-negative-2);
-	--top-button-background-color-active: var(--color-layer-negative-3);
-	--top-button-background-color-selected: var(--color-layer-negative-3);
-}
-
-.top-button.top-style_soft.top-color_pink {
-	--top-button-color: var(--color-text-info);
-
-	--top-icon-color: var(--color-text-info);
-	--top-icon2-color: var(--color-text-info);
-
-	--top-button-background-color: var(--color-layer-info-1);
-	--top-button-background-color-hover: var(--color-layer-info-2);
-	--top-button-background-color-active: var(--color-layer-info-3);
-	--top-button-background-color-selected: var(--color-layer-info-3);
-}
-
-.top-button.top-style_soft.top-color_brand {
-	--top-button-color: var(--color-brand-1);
-
-	--top-icon-color: var(--color-brand-1);
-	--top-icon2-color: var(--color-brand-1);
-
-	--top-button-background-color: var(--color-layer-1);
-	--top-button-background-color-hover: var(--color-layer-2);
-	--top-button-background-color-active: var(--color-layer-3);
-	--top-button-background-color-selected: var(--color-layer-3);
-}

package/src/components/forms/button/style/style-transparent.css

@@ -1,39 +0,0 @@
-.top-button.top-style_transparent {
-	--top-shadow-darken-1: none;
-	--top-shadow-darken-2: none;
-	--top-shadow-darken-3: none;
-
-	--top-button-color: var(--color-text);
-	--top-button-background-color: transparent;
-	--top-button-background-color-hover: transparent;
-	--top-button-background-color-active: transparent;
-	--top-button-background-color-selected: var(--color-steel-200);
-}
-
-.top-button.top-style_transparent:hover {
-	opacity: 0.8;
-}
-
-.top-button.top-style_transparent.top-color_blue {
-	--top-button-color: var(--color-text-primary);
-}
-
-.top-button.top-style_transparent.top-color_green {
-	--top-button-color: var(--color-text-positive);
-}
-
-.top-button.top-style_transparent.top-color_orange {
-	--top-button-color: var(--color-text-warning);
-}
-
-.top-button.top-style_transparent.top-color_red {
-	--top-button-color: var(--color-text-negative);
-}
-
-.top-button.top-style_transparent.top-color_pink {
-	--top-button-color: var(--color-text-info);
-}
-
-.top-button.top-style_transparent.top-color_brand {
-	--top-button-color: var(--color-brand-1);
-}

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

@@ -1,66 +0,0 @@
-import type { Size } from '@/components/forms/helpers';
-import { sizes } from '@/components/forms/helpers';
-
-/**
- * Определение параметров
- */
-export interface Props {
-	color?: Color;
-	styling?: Style;
-	size?: Size;
-
-	name?: string;
-	title?: string;
-	icon?: string;
-	icon2?: string;
-
-	/**
-	 * Ссылка
-	 *
-	 * Если указана ссылка, isSubmit не может быть true
-	 */
-	href?: string;
-	// value?: string
-
-	/**
-	 * Добавить на кнопку бейдж с числом
-	 */
-	badgeNumber?: number;
-
-	/**
-	 * Расположить badge после текста
-	 */
-	badgePosAfterText?: boolean;
-
-	disabled?: boolean;
-	isSubmit?: boolean;
-	isActive?: boolean;
-	isProgress?: boolean;
-}
-
-/**
- * Определение событий
- */
-export interface Emits {}
-
-export const colors = {
-	theme: 'theme',
-	blue: 'blue',
-	green: 'green',
-	orange: 'orange',
-	red: 'red',
-	pink: 'pink',
-	brand: 'brand',
-} as const;
-
-export type Color = typeof colors[keyof typeof colors];
-
-export const styles = {
-	Regular: '',
-	Soft: 'soft',
-	Outline: 'outline',
-} as const;
-
-export type Style = typeof styles[keyof typeof styles];
-
-export { sizes };

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

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

package/src/components/forms/checkbox/checkbox.ts

@@ -1,21 +0,0 @@
-type ModelValue = boolean | number[] | string[] | Set<number> | Set<string> | undefined;
-
-export interface Props {
-	/**
-	 * Может быть одного из типов:
-	 * - boolean
-	 * - number[]
-	 * - string[]
-	 * - Set<number>
-	 * - Set<string>
-	 *
-	 * [подробнее](https://vuejs.org/guide/essentials/forms.html#checkbox)
-	 */
-	modelValue: ModelValue;
-	name?: string;
-	value?: string;
-	description?: string;
-	disabled?: boolean;
-	indeterminate?: boolean;
-	isError?: boolean;
-}

package/src/components/forms/checkbox/checkbox.vue

@@ -1,114 +0,0 @@
-<script setup lang="ts">
-import type { Props } from './checkbox';
-import ControlLabel from '../controlLabel/controlLabel.vue';
-
-defineProps<Props>();
-
-const model = defineModel<Props['modelValue']>();
-</script>
-
-<template>
-	<label
-		:class="{
-			['top-forms-optionWrapper']: true,
-			['top-checkbox']: true,
-			['top-checkbox_' + name]: !!name,
-			['top-disabled']: disabled,
-			['top-error']: isError && !disabled,
-		}"
-	>
-		<input
-			v-top-focus.onupdate="isError"
-			type="checkbox"
-			:class="{
-				['top-forms-focusable']: !disabled,
-				['top-forms-option']: true,
-				['top-checkbox_input']: true,
-				['top-error']: isError && !disabled,
-			}"
-			:name="name"
-			v-model="model"
-			:value="value"
-			:indeterminate="indeterminate"
-			:disabled="disabled"
-		>
-
-		<ControlLabel
-			v-if="$slots.default"
-			:description
-			:disabled
-		>
-			<!-- @slot Слот с заголовком -->
-			<slot></slot>
-		</ControlLabel>
-	</label>
-</template>
-
-<style>
-.top-checkbox {
-	cursor: pointer;
-	display: inline-flex;
-}
-
-.top-checkbox_input {
-	cursor: inherit;
-	border-radius: 4px;
-	background: var(--color-layout-front-1);
-	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-checkbox_input:before {
-	content: " ";
-	color: #FFF;
-	font-family: "Topvisor-2";
-	font-size: 16px;
-}
-
-.top-checkbox_input:hover {
-	border-color: var(--top-forms-border-color-hover);
-	background: var(--color-layer-primary-1);
-}
-
-/* checked / indeterminate */
-.top-checkbox_input:checked,
-.top-checkbox_input:indeterminate {
-	border-color: var(--top-forms-option-color);
-	background: var(--top-forms-option-color);
-}
-
-.top-checkbox_input:checked:before {
-	content: "";
-}
-
-.top-checkbox_input:indeterminate:before {
-	content: "";
-}
-
-.top-checkbox_input:checked:hover,
-.top-checkbox_input:indeterminate:hover {
-	border-color: var(--top-forms-option-color-hover);
-	background: var(--top-forms-option-color-hover);
-}
-
-/* isError */
-.top-checkbox_input.top-error {
-	border-color: var(--color-bg-negative-1);
-}
-
-.top-checkbox_input.top-error:hover {
-	border-color: var(--color-bg-negative-2);
-}
-
-/* isError selected */
-.top-checkbox_input:checked.top-error,
-.top-checkbox_input:indeterminate.top-error {
-	background: var(--color-bg-negative-1);
-}
-
-.top-checkbox_input:checked.top-error:hover,
-.top-checkbox_input:indeterminate.top-error:hover {
-	background: var(--color-bg-negative-2);
-}
-</style>