@topvisor/ui 0.0.35 → 0.0.36

package/src/components/component.ts

@@ -1,133 +0,0 @@
-import DOM from '@/core/utils/dom';
-
-/**
- * Базовый компонент для js компонентов, не имеет отношения к Vue
- */
-class Component {
-
-	static componentName = 'Top';
-
-	componentName: string | undefined; // имя класса компонента
-	className: string | undefined; // имя css класса компонента
-	uid: string | undefined; // уникальный id компонента
-	el: Element | undefined; // элемент, связанный с компонентом
-	options = {}; // параметры компонента
-
-	unmountEls: Element[] = [];
-	unmountEvents: any[] = [];
-
-	// переопредлять нельзя
-	// если компонент инициирован, необходимо сразу его вернуть и выполнить reInit() вместо mount()
-	// используется init вместо constructor, так как super constructor выполняется до Object.defineProperty() параметров класса
-	init (componentName: string, el: Element, options: object): Component | void {
-		if (!el) {
-			throw componentName + ': el is undefined';
-		}
-
-		const component = Component.getComponent(el, componentName);
-
-		if (component) {
-			component.reInit(options);
-
-			return component;
-		}
-
-		this.componentName = componentName;
-		this.className = 'top' + componentName[0].toUpperCase() + componentName.substring(1);
-		this.uid = this.componentName + (Math.random() + '').replace('.', '');
-
-		this._setComponent(el);
-		this.el = el;
-		this.el.classList.add(this.className);
-		this.options = Object.assign(this.options, options);
-
-		this.mount();
-	}
-
-	// получить инициированный компонент
-	static getComponent (el: Element, componentName: string): any {
-		return DOM.storage(el, '#' + componentName);
-	}
-
-	// устанвоить компонент
-	_setComponent (el: Element) {
-		DOM.storage(el, '#' + this.componentName, this);
-	}
-
-	// функция подключения компонента
-	mount (): void {
-		throw 'Please, add method mount() to component: ' + this.componentName;
-	}
-
-	// функция отключения компонента
-	unmount (): void {
-		DOM.storage(this.el, '#' + this.componentName, null);
-
-		this.unmountEls.forEach((el) => {
-			el.remove();
-		});
-
-		this.unmountEls = [];
-
-		this.unmountEvents.forEach((eventData) => {
-			eventData.el.removeEventListener(eventData.type, eventData.listener, eventData.options);
-		});
-
-		this.unmountEvents = [];
-	}
-
-	// указание новые элементы, которые должны будут удалиться после unmount
-	registerElForUnmount (el: Element): void {
-		this.unmountEls.push(el);
-	}
-
-	// указание новые события, которые должны будут удалиться после unmount
-	addEventListenerWithUnmount (
-		el: Element | Document,
-		type: keyof GlobalEventHandlersEventMap,
-		listener: (this: Element, e: Event) => any,
-		options?: any,
-	): void {
-		el.addEventListener(type, listener, options);
-
-		this.registerEventForUnmount(el, type, listener, options);
-	}
-
-	// указание новые события, которые должны будут удалиться после unmount
-	registerEventForUnmount (
-		el: Element | Document,
-		type: keyof GlobalEventHandlersEventMap,
-		listener: (this: Element, e: Event) => any,
-		options?: any
-	): void {
-		const eventData = {
-			el: el,
-			type: type,
-			listener: listener,
-			options: options,
-		};
-
-		this.unmountEvents.push(eventData);
-	}
-
-	// функция перенастройки уже подключенного компонента
-	reInit (_options: object): void {
-		throw 'Please, add method reInit() to component: ' + this.componentName;
-	}
-
-	static detach (nodes: Node[]): void
-	static detach (nodes: Element): void
-
-	// удалить элементы из DOM, но не из памяти
-	static detach (nodes: any): void {
-		if (nodes.forEach) {
-			nodes.forEach((node: Node) => node.parentElement?.removeChild(node));
-		} else {
-			const el = nodes;
-			el.parentElement?.removeChild(el);
-		}
-	}
-
-}
-
-export default Component;

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

@@ -1,112 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import { genArgsTypes, genOverviewStory } from '@/components/helpersStories';
-import Component from './button.vue';
-import * as ComponentsConst from './button';
-import ReadMe from './stories/README.md?raw';
-import OverviewComponent from './stories/overview.vue';
-
-const argTypes = genArgsTypes(Component, ComponentsConst, true);
-
-const meta = {
-	component: Component,
-	tags: ['autodocs'],
-	argTypes,
-	parameters: {
-		docs: {
-			description: {
-				component: ReadMe,
-			},
-		},
-		design: {
-			type: 'figma',
-			url: 'https://www.figma.com/file/M7y5HgfqK3JK3Nyy7XnCJx/Princip-Design-components?type=design&node-id=2505%3A69049&mode=design&t=J7nDcOXsvdJ3b4wE-1',
-		},
-	},
-} satisfies Meta<typeof Component>;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground = {} satisfies Story;
-
-export const Overview: Story = genOverviewStory({
-	args: {
-		disabled: false,
-		isSubmit: false,
-		isActive: false,
-		isProgress: false,
-		href: '',
-		icon: '😊',
-		icon2: '😁',
-	},
-}, OverviewComponent);
-
-export const Regular = {
-	args: {
-		default: 'Первостепенная цветная',
-		title: 'Стандартня кнопка первостепенного значения, цвет настраивается через props color',
-		color: 'blue',
-	},
-} satisfies Story;
-
-export const RegularTheme = {
-	args: {
-		default: 'Второстепенная Theme',
-		title: 'Стандартня кнопка второстепенного значения, цвет Theme',
-		color: 'theme',
-	},
-} satisfies Story;
-
-export const Soft = {
-	args: {
-		default: 'Мягкая цветная',
-		title: 'Для выраженных второстепенных кнопок',
-		color: 'blue',
-		styling: 'soft',
-	},
-} satisfies Story;
-
-export const SoftTheme = {
-	args: {
-		default: 'Мягкая Theme',
-		title: 'Для выраженных второстепенных кнопок',
-		color: 'theme',
-		styling: 'soft',
-	},
-} satisfies Story;
-
-export const Outline = {
-	args: {
-		default: 'Без фона цветная',
-		title: 'Для кнопок дополнительного функционала',
-		color: 'blue',
-		styling: 'outline',
-	},
-} satisfies Story;
-
-export const OutlineTheme = {
-	args: {
-		default: 'Без фона Theme',
-		title: 'Для кнопок дополнительного функционала',
-		color: 'theme',
-		styling: 'outline',
-	},
-} satisfies Story;
-
-export const Icons = {
-	args: {
-		default: 'Кнопка с иконками',
-		title: 'В качестве иконок можно вставлять emoji или символы шрифта с иконками. Меняйте props icon и icon2',
-		icon: '😊',
-		icon2: '😁',
-	},
-} satisfies Story;
-
-export const OnlyOneIcons = {
-	args: {
-		title: 'Кнопка с иконкой без текста',
-		icon: '😊',
-	},
-} satisfies Story;
-
-export default meta;

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

@@ -1,51 +0,0 @@
-import type { Size } from '@/components/forms/helpers';
-import { sizes } from '@/components/forms/helpers';
-
-/**
- * Определение параметров
- */
-export interface Props {
-	color?: Color;
-	styling?: Style; // bug: name = style init with object type
-	size?: Size;
-
-	name?: string;
-	title?: string;
-	icon?: string;
-	icon2?: string;
-
-	href?: string; // если установлена ссылка, isSubmit не может быть true
-	// value?: string
-
-	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',
-} as const;
-
-export type Color = typeof colors[keyof typeof colors];
-
-export const styles = {
-	Regular: '',
-	Outline: 'outline',
-	Soft: 'soft',
-	Transparent: 'transparent',
-} as const;
-
-export type Style = typeof styles[keyof typeof styles];
-
-export { sizes };

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

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

@@ -1,35 +0,0 @@
-Основной компонент всех кнопок на сайте
-
-Расширяет стандартный 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

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

@@ -1,124 +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),
-.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

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

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

@@ -1,35 +0,0 @@
-.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);
-}