@topvisor/ui 0.0.34 → 0.0.35

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

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Props } from './button';
+
+const props = withDefaults(defineProps<Props>(), {
+	color: 'blue',
+	styling: '',
+	size: 's',
+});
+
+const tagName = computed(() => props.href ? 'a' : 'button');
+
+const type = computed(() => props.isSubmit ? 'submit' : undefined);
+</script>
+
+<template>
+	<component
+		:is="tagName"
+		:class="{
+			['top-active']: isActive,
+			['top-disabled']: disabled,
+			['top-forms-focusable']: !disabled,
+			['top-button']: true,
+			['top-button-progress']: isProgress,
+			[`top-size_${size}`]: !!size,
+			[`top-color_${color}`]: true,
+			[`top-style_${styling}`]: !!styling,
+		}"
+		:name="name"
+		:title="title"
+		:href="href"
+		:type="type"
+		:data-top-icon="icon || undefined"
+		:data-top-icon2="icon2 || undefined"
+		:disabled="disabled || undefined"
+		:inProgress="isProgress"
+	>
+		<!-- @slot Текст или HTML в кнопке -->
+		<slot>
+			{{ !icon ? 'Button' : '' }}
+		</slot>
+	</component>
+</template>
+
+<style module>
+@import "./style/button.css";
+@import "./style/style-outline.css";
+@import "./style/style-soft.css";
+@import "./style/style-transparent.css";
+
+.top-button {
+	--top-button-color: var(--color-white);
+	--top-button-background-color: transparent;
+	--top-button-background-color-hover: var(--top-button-background-color);
+	--top-button-background-color-active: var(--top-button-background-color-hover);
+	--top-button-background-color-selected: var(--top-button-background-color-hover);
+	--top-button-box-shadow: none;
+	--top-button-box-shadow-hover: var(--top-shadow-darken-2);
+	--top-button-box-shadow-active: var(--top-shadow-darken-3);
+	--top-button-box-shadow-selected: var(--top-shadow-darken-3);
+	--top-forms-border-width: 0px;
+	--top-icon-width: calc(var(--top-icon-size) + var(--top-forms-padding));
+	--top-icon2-width: calc(var(--top-icon2-size) + var(--top-forms-padding));
+}
+
+.top-button.top-size_l {
+	--top-forms-padding: var(--top-forms-padding_l);
+	--top-forms-base-height: var(--top-forms-base-height_l);
+}
+
+.top-button.top-size_xl {
+	--top-forms-padding: var(--top-forms-padding_xl);
+	--top-forms-base-height: var(--top-forms-base-height_xl);
+}
+</style>

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

@@ -0,0 +1,35 @@
+Основной компонент всех кнопок на сайте
+
+Расширяет стандартный button следующими возможностями:
+
+- выбор цвета кнопки
+- выбор стиля кнопки
+- вставка в кнопку компонента иконки
+- вставка в виде ссылки
+- вставка в виде submit
+
+Модификаторы состояния:
+
+- .g‑active;
+- .top-button-progress.
+
+Модификаторы цвета:
+
+- .top-color_theme
+- .top-color_blue
+- .g‑color_green
+- .g‑color_orange
+- .g‑color_red
+- .g‑color_pink
+
+Модификаторы стиля:
+
+- .g‑style_soft ‑ серая кнопка с цветным текстом
+- .g‑style_outline ‑ кнопка с обводкой
+- .g‑style_transparent - кнопка без фона
+
+Модификаторы размера:
+
+- .top-size_s
+- .top-size_l
+- .g‑size_xl

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

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { sizes } from '@/components/forms/helpers';
+import type { Props } from '../button';
+import { colors, styles } from '../button';
+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

@@ -0,0 +1,124 @@
+.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),
+.top-button[data-top-icon2]:not(:empty) {
+	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 {
+	min-width: var(--top-forms-base-height);
+}
+.top-button[data-top-icon]:empty,
+.top-button[data-top-icon2]:empty {
+	padding: 0;
+}
+
+.top-button.top-color_blue {
+	--top-button-background-color: var(--color-blue-500);
+}
+.top-button.top-color_green {
+	--top-button-background-color: var(--color-green-500);
+}
+.top-button.top-color_orange {
+	--top-button-background-color: var(--color-orange-500);
+}
+.top-button.top-color_red {
+	--top-button-background-color: var(--color-red-500);
+}
+.top-button.top-color_pink {
+	--top-button-background-color: var(--color-pink-500);
+}
+
+.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-secondary-opacity);
+	--top-button-background-color-active: var(--color-secondary-2-opacity);
+	--top-button-background-color-selected: var(--color-secondary-2-opacity);
+}
+.top-button.top-color_theme.top-active {
+	--top-icon-color: var(--color-text-2);
+}

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

@@ -0,0 +1,42 @@
+.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-forms-border-color: var(--top-style_outline-color);
+
+	--top-style_outline-color: var(--color-steel-400);
+
+	--top-button-color: var(--top-style_outline-color);
+	--top-button-background-color: var(--content-background-color);
+	--top-button-background-color-hover: var(--color-theme-100);
+	--top-button-background-color-active: var(--color-theme-150);
+	--top-button-background-color-selected: var(--color-theme-125);
+
+	--top-forms-border-width: 1px;
+}
+
+.top-button.top-style_outline.top-color_theme {
+	--top-button-color: var(--color-text);
+}
+
+.top-button.top-style_outline.top-color_blue {
+	--top-style_outline-color: var(--color-blue-500);
+}
+
+.top-button.top-style_outline.top-color_green {
+	--top-style_outline-color: var(--color-green-500);
+}
+
+.top-button.top-style_outline.top-color_orange {
+	--top-style_outline-color: var(--color-orange-500);
+}
+
+.top-button.top-style_outline.top-color_red {
+	--top-style_outline-color: var(--color-red-500);
+}
+
+.top-button.top-style_outline.top-color_pink {
+	--top-style_outline-color: var(--color-pink-500);
+}

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

@@ -0,0 +1,31 @@
+.top-button.top-style_soft {
+	--top-shadow-darken: none;
+	--top-shadow-darken-2: none;
+	--top-shadow-darken-3: none;
+
+	--top-button-color: var(--color-text);
+	--top-button-background-color: var(--color-secondary-opacity);
+	--top-button-background-color-hover: var(--color-secondary-2-opacity);
+	--top-button-background-color-active: var(--color-secondary-3-opacity);
+	--top-button-background-color-selected: var(--color-secondary-3-opacity);
+}
+
+.top-button.top-style_soft.top-color_blue {
+	--top-button-color: var(--color-blue-500);
+}
+
+.top-button.top-style_soft.top-color_orange {
+	--top-button-color: var(--color-orange-500);
+}
+
+.top-button.top-style_soft.top-color_green {
+	--top-button-color: var(--color-green-500);
+}
+
+.top-button.top-style_soft.top-color_red {
+	--top-button-color: var(--color-red-500);
+}
+
+.top-button.top-style_soft.top-color_pink {
+	--top-button-color: var(--color-pink-500);
+}

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

@@ -0,0 +1,35 @@
+.top-button.top-style_transparent {
+	--top-shadow-darken: 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-blue-450);
+}
+
+.top-button.top-style_transparent.top-color_green {
+	--top-button-color: var(--color-green-450);
+}
+
+.top-button.top-style_transparent.top-color_orange {
+	--top-button-color: var(--color-orange-450);
+}
+
+.top-button.top-style_transparent.top-color_red {
+	--top-button-color: var(--color-red-450);
+}
+
+.top-button.top-style_transparent.top-color_pink {
+	--top-button-color: var(--color-pink-450);
+}

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

@@ -0,0 +1,33 @@
+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, true);
+
+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

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

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

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Props, Emits } from './checkbox';
+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-checkbox']: true,
+			['top-checkbox_' + name]: name !== '',
+			['top-disabled']: disabled,
+			['top-error']: isError && !disabled,
+		}"
+	>
+		<input
+			type="checkbox"
+			:class="{
+				['top-forms-focusable']: !disabled,
+				['top-forms-option']: true,
+				['top-checkbox_input']: true,
+				['top-error']: isError && !disabled,
+			}"
+			:name="name"
+			v-model="localValue"
+			:value="value"
+			:indeterminate="indeterminate"
+			:disabled="disabled"
+		>
+
+		<ControlLabel
+			v-if="$slots.default"
+			:description="description"
+			:disabled="disabled"
+		>
+			<!-- @slot Слот с заголовком -->
+			<slot></slot>
+		</ControlLabel>
+	</label>
+</template>
+
+<style module>
+.top-checkbox {
+	cursor: pointer;
+	display: inline-flex;
+}
+
+.top-checkbox_input {
+	cursor: inherit;
+	border-radius: 4px;
+	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-checkbox_input:before {
+	content: ' ';
+	color: #FFF;
+	font-family: 'Topvisor-2';
+	font-size: 16px;
+}
+
+.top-checkbox_input:hover {
+	border-color: var(--top-forms-option-color);
+	background: var(--color-theme-50)
+}
+
+/* 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);
+}
+
+/* disabled selected */
+.top-checkbox_input:disabled {
+	border-color: var(--color-line-1-opacity);
+	background: var(--color-theme-50);
+}
+
+.top-checkbox_input:checked:disabled,
+.top-checkbox_input:indeterminate:disabled {
+	border-color: transparent;
+	background: var(--color-theme-400);
+}
+
+/* isError */
+.top-checkbox_input.top-error {
+	border-color: var(--color-negative);
+}
+
+.top-checkbox_input.top-error:hover {
+	border-color: var(--color-negative-2);
+}
+
+/* isError selected */
+.top-checkbox_input:checked.top-error,
+.top-checkbox_input:indeterminate.top-error {
+	background: var(--color-negative);
+}
+
+.top-checkbox_input:checked.top-error:hover,
+.top-checkbox_input:indeterminate.top-error:hover {
+	background: var(--color-negative-2);
+}
+</style>