@topvisor/ui 0.0.34 → 0.0.35

package/src/components/tabs/tabs/content.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { PropsContent } from './tabs';
+
+defineProps<PropsContent>();
+</script>
+
+<template>
+	<div
+		:class="{
+			'top-tabs_content': true,
+		}"
+		:data-tabs-name="name"
+	>
+		<slot></slot>
+	</div>
+</template>
+
+<style module>
+.top-tabs_content {
+	padding: 14px;
+	overflow: auto;
+	display: none;
+}
+</style>

package/src/components/tabs/tabs/stories/README.md

@@ -0,0 +1,10 @@
+В компоненте используется 3 именованых слота:  
+**#header** - шаблон или текст справа от вкладок  
+**#buttons** - для вставки самих вкладок  
+**#contents** - для шаблона или текста под вкладкой
+
+Также нужно использовать два вспомогательных компонента:  
+**TabsTab** - компонент вкладки  
+**TabsContent** - компонент содержания вкладки
+
+Для совместимости с версткой в html поддерживает 6 вкладок

package/src/components/tabs/tabs/tab.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { PropsTab } from './tabs';
+
+defineProps<PropsTab>();
+</script>
+
+<template>
+	<input
+		type="radio"
+		class="top-tabs_tabInput top-unvisible"
+		:id="tabsId + name"
+		:name="tabsId"
+		:value="name"
+		:checked="active"
+		:disabled="disabled"
+	/>
+
+	<label
+		:class="{
+			'top-tabs_tabLabel': true,
+			'top-forms-focusable': true,
+			'top-disabled': disabled,
+		}"
+		:for="tabsId + name"
+	>
+		<slot></slot>
+	</label>
+</template>
+
+<style module>
+.top-tabs_tabLabel {
+	cursor: pointer;
+	border-bottom: 2px solid transparent;
+	padding: 14px 20px;
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+
+.top-tabs_tabLabel:hover {
+	border-color: var(--color-line-2-opacity);
+}
+
+.top-tabs_tabInput:checked + .top-tabs_tabLabel {
+	border-color: var(--color-primary);
+	color: var(--color-primary);
+}
+
+.top-tabs_tabLabel.top-disabled {
+	color: var(--color-text-3);
+}
+</style>

package/src/components/tabs/tabs/tabs.stories.ts

@@ -0,0 +1,171 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { genArgsTypes } from '@/components/helpersStories';
+
+import Component from './tabs.vue';
+import TabsTab from './tab.vue';
+import TabsContent from './content.vue';
+import * as ComponentsConst from './tabs';
+import ReadMe from './stories/README.md?raw';
+
+import Button from '@/components/forms/button/button.vue';
+import Hint from '@/components/forms/hint/hint.vue';
+import Textarea from '@/components/forms/textarea/textarea.vue';
+
+const argTypes = genArgsTypes(Component, ComponentsConst);
+
+const meta = {
+	component: Component,
+	tags: ['autodocs'],
+	argTypes,
+	parameters: {
+		docs: {
+			description: {
+				component: ReadMe,
+			},
+		},
+	},
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Overview = {
+	args: {
+		id: 'tabs',
+	},
+	render: (args) => ({
+		components: {
+			Tabs: Component,
+			TabsTab,
+			TabsContent,
+			Button,
+			Textarea,
+			Hint,
+		},
+		setup () {
+			return { args };
+		},
+		template: `
+			<Tabs :id="args.id">
+				<template #header>
+					<Hint hint="В шапку табов можно вставлять произвольный HTML код"></Hint>
+
+					<Button icon="" color="theme"/>
+				</template>
+
+				<template #buttons>
+					<TabsTab
+						:tabsId="args.id"
+						name="tab_1"
+						active
+					>
+						Вкладка 1
+					</TabsTab>
+
+					<TabsTab
+						:tabsId="args.id"
+						name="tab_2"
+					>
+						Вкладка 2
+					</TabsTab>
+
+					<TabsTab
+						:tabsId="args.id"
+						name="tab_3"
+					>
+						Вкладка 3
+					</TabsTab>
+
+					<TabsTab
+						:tabsId="args.id"
+						name="tab_4"
+					>
+						Вкладка 4
+
+						&nbsp;
+
+						<Hint hint="В заголовок вкладки можно вставлять произвольный HTML код"></Hint>
+					</TabsTab>
+
+					<TabsTab
+						:tabsId="args.id"
+						name="tab_5"
+					>
+						Вкладка 5 (вложенные)
+					</TabsTab>
+
+					<TabsTab
+						:tabsId="args.id"
+						name="tab_6"
+						disabled
+					>
+						Вкладка 6 (disabled)
+					</TabsTab>
+				</template>
+
+				<template #contents>
+					<TabsContent>
+						<p>
+							Текст для вкладки 1 с вставкой большого блока
+						</p>
+
+						<div style="background: var(--color-theme-100); width: 150%; height: 50vh; padding: 10px; display: block;">
+							Большой блок
+						</div>
+					</TabsContent>
+
+					<TabsContent>
+						<Textarea modelValue="" placeholder="Напишите что-нибудь..."/>
+					</TabsContent>
+
+					<TabsContent>
+						<Button>
+							Кнопка
+						</Button>
+					</TabsContent>
+
+					<TabsContent>
+						Текст для вкладки 4
+					</TabsContent>
+
+					<TabsContent>
+						<Tabs :id="args.id + '-2'">
+							<template #buttons>
+								<TabsTab
+									:tabsId="args.id + '2'"
+									name="subtab_1"
+									active
+								>
+									Вкладка 1
+								</TabsTab>
+
+								<TabsTab
+									:tabsId="args.id + '2'"
+									name="subtab_2"
+								>
+									Вкладка 2
+								</TabsTab>
+							</template>
+
+							<template #contents>
+								<TabsContent name="tab_1">
+									Текст для вкладки 1
+								</TabsContent>
+
+								<TabsContent name="tab_2">
+									Текст для вкладки 2
+								</TabsContent>
+							</template>
+						</Tabs>
+					</TabsContent>
+
+					<TabsContent>
+						Текст для вкладки 6
+					</TabsContent>
+				</template>
+			</Tabs>
+		`,
+	}),
+} satisfies Story;
+
+export default meta;

package/src/components/tabs/tabs/tabs.ts

@@ -0,0 +1,22 @@
+export interface Props {
+	/**
+	 * Уникальный id табов для нативного DOM и возмоэности сохранения state
+	 */
+	id: string;
+}
+
+export interface PropsTab {
+	tabsId: string;
+
+	/**
+	 * Обязательный атрибут, должен быть уникален для каждого таба в пределах одного компонента
+	 */
+	name: string;
+	title?: string;
+	active?: boolean;
+	disabled?: boolean;
+}
+
+export interface PropsContent {
+	name?: string;
+}

package/src/components/tabs/tabs/tabs.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { Props } from './tabs';
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+	<div
+		:class="{
+			'top-tabs': true,
+		}"
+	>
+		<!-- @slot Кнопки вкладок, ожидает передачу компонентов TabTitle -->
+		<slot name="buttons"></slot>
+
+		<div v-if="$slots.header" class="top-tabs_header">
+			<!-- @slot Слот с проивзольным содержимым, которое будет добавлено справа от вкладок -->
+			<slot name="header"></slot>
+		</div>
+
+		<div class="top-tabs_contents">
+			<!-- @slot Контент вкладок, ожидает передачу компонентов TabContent -->
+			<slot name="contents"></slot>
+		</div>
+	</div>
+</template>
+
+<style module>
+.top-tabs {
+	background: var(--content-background-color);
+	border-radius: 8px;
+	border: 1px solid var(--color-line-2-opacity);
+	padding: 0;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: stretch;
+}
+
+.top-tabs_header {
+	padding: 6px;
+	margin-left: auto;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	flex-wrap: wrap;
+}
+
+/* Содержимое вкладок */
+.top-tabs_contents {
+	border-top: 1px solid var(--color-line-2-opacity);
+	width: 100%;
+	margin-top: -1px;
+}
+
+/* Состояние открытости вкладок */
+.top-tabs_tabInput:checked:nth-child(1) ~ .top-tabs_contents > .top-tabs_content:nth-child(1),
+.top-tabs_tabInput:checked:nth-child(3) ~ .top-tabs_contents > .top-tabs_content:nth-child(2),
+.top-tabs_tabInput:checked:nth-child(5) ~ .top-tabs_contents > .top-tabs_content:nth-child(3),
+.top-tabs_tabInput:checked:nth-child(7) ~ .top-tabs_contents > .top-tabs_content:nth-child(4),
+.top-tabs_tabInput:checked:nth-child(9) ~ .top-tabs_contents > .top-tabs_content:nth-child(5),
+.top-tabs_tabInput:checked:nth-child(11) ~ .top-tabs_contents > .top-tabs_content:nth-child(6) {
+	display: block;
+}
+</style>

package/src/components/tabs/tabs.ts

@@ -0,0 +1,3 @@
+export { default as Tabs } from './tabs/tabs.vue'
+export { default as TabsTab } from './tabs/tab.vue'
+export { default as TabsContent } from './tabs/content.vue'

package/src/core/base/Colors.stories.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import colorsCSS from '@/resources/styles/core/colors.css?raw';
+import Component from '@/storybook/components/colors.vue';
+
+const meta = {
+	component: Component,
+} satisfies Meta<typeof Component>;
+
+export const Colors = {
+	args: {
+		style: colorsCSS
+	}
+} satisfies StoryObj<typeof meta>;
+
+export default meta;

package/src/core/base/Layout.stories.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import layoutCSS from '@/resources/styles/core/layout.css?raw';
+import Component from '@/storybook/components/properties.vue';
+
+const meta = {
+	component: Component,
+} satisfies Meta<typeof Component>;
+
+export const Layout = {
+	args: {
+		style: layoutCSS
+	}
+} satisfies StoryObj<typeof meta>;
+
+export default meta;

package/src/core/base/Properties.stories.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import colorsCSS from '@/resources/styles/core/colors.css?raw';
+import Component from '@/storybook/components/properties.vue';
+
+const meta = {
+	component: Component,
+} satisfies Meta<typeof Component>;
+
+export const Properties = {
+	args: {
+		style: colorsCSS
+	}
+} satisfies StoryObj<typeof meta>;
+
+export default meta;

package/src/core/base/base.mdx

@@ -0,0 +1,21 @@
+import { Canvas } from '@storybook/blocks';
+
+# Основные стили и переменные
+
+Основные стили и переменные доступны в:
+- после сборки: **core.css**
+- до сборки: **src/resources/styles/core/*.css**
+
+## Палитра
+
+Палитра содержит все основные  цвета и является постоянной в пределах проекта независимо от темы.
+
+👌 Переменные палитры **рекомендуется** импользовтаь в переменных темы.
+
+❌ Переменные палитры **не рекомендуется** импользовтаь в переменных и стилях компонентов.
+ 
+## Стили макета
+
+Стили макета содержат основные переменные и классы для расположения и оформления элементов на странице.
+
+Компоненты должны использовать предоставляемые классы макета, вместо реализации своих аналогичных стилей.

package/src/core/core/core.ts

@@ -0,0 +1,144 @@
+import { reactive } from 'vue';
+import Device from '@/core/utils/device';
+import Events from '@/core/core/events';
+import options from '@/core/core/options';
+import state from '@/core/core/state';
+import directiveTooltip from '@/core/directives/tooltip';
+
+const _window: any = window;
+
+class Core {
+
+	/**
+	 * Настройки словаря
+	 */
+	static L = reactive({
+		Not_date: 'Not date',
+	});
+
+	static page = _window?.page || {};
+
+	static options = options;
+
+	static state = reactive({ ...state });
+
+	static matchMediaIsMobile?: MediaQueryList;
+
+	/**
+	 * Добавить на страницу стили, используется для загрузки стилей из js
+	 *
+	 * Условная загрузка стилей m и pc отключена в пользу производительсности, стили грузятся всегда, но применяются по условию
+	 * @param style - css стили в строке
+	 * @param type - если указать 'm' или 'pc', то стили будут применяться по условию в зависимости от настройки this.options.widthForMobile
+	 */
+	static appendStyle(style: string, type: '' | 'm' | 'pc' = ''): void {
+		let media = 'all';
+
+		if (type === 'm') {
+			media = '(max-width: ' + this.options.widthForMobile + 'px)';
+		}
+
+		if (type === 'pc') {
+			media = '(min-width: ' + this.options.widthForMobile + 'px)';
+		}
+
+		const elStyle = document.createElement('style');
+		elStyle.innerHTML = style;
+		elStyle.media = media;
+
+		document.head.append(elStyle);
+	}
+
+	/**
+	 * Установить как плагин в прилоежнии Vue
+	 * Core.state является общим для всех приложений Vue на странице
+	 * Core.options является общим для всех приложений Vue на странице
+	 * @param app - Vue App
+	 * @param {typeof options} options - параметры UI
+	 */
+	static install(app: any, options: typeof this.options) {
+		Core.defineOptions(options);
+
+		app.provide('top-core', Core);
+
+		this.installDirectives(app);
+	}
+
+	static installDirectives(app: any) {
+		app.directive('top-tooltip', directiveTooltip);
+	}
+
+	/**
+	 * Установить конфигурацию UI
+	 * @param {typeof options} options
+	 */
+	static defineOptions(options: typeof this.options) {
+		if (options?.widthForMobile) {
+			this.options.widthForMobile = options.widthForMobile;
+		}
+
+		if (options?.dateFormat) {
+			this.options.dateFormat = options.dateFormat;
+		}
+
+		if (options?.gmt) {
+			this.options.gmt = options.gmt;
+		}
+
+		Core.setState();
+	}
+
+	static setState() {
+		Core.matchMediaIsMobile = window.matchMedia(`(max-width: ${Core.options.widthForMobile}px)`);
+
+		Core.state.isMobileUA = Device.isMobile();
+		Core.state.isRetina = Device.isRetina();
+		Core.state.isApp = Device.isApp();
+		Core.state.dateFormat = this.options.dateFormat;
+		Core.state.gmt = this.options.gmt;
+
+		Core.setStateByWindowSize();
+
+		// пересчет значений, зависящих от рамзеров окна
+		Events.addOnReize(Core.onResize);
+
+		Core.onResize();
+
+		Core.saveToCookie();
+	}
+
+	static onResize() {
+		Core.setStateByWindowSize();
+
+		// честный vh
+		document.documentElement.style.setProperty('--100vh', window.innerHeight + 'px');
+	}
+
+	static setStateByWindowSize() {
+		Core.state.isMobile = !!Core.matchMediaIsMobile?.matches;
+		Core.state.isLandscape = (window.innerWidth > window.innerHeight);
+		Core.state.isPortrait = !Core.state.isLandscape;
+		Core.state.size = (window.innerWidth > window.innerHeight) ? window.innerWidth : window.innerHeight;
+
+		Core.saveToCookie();
+	}
+
+	/**
+	 * Сохранить информацию об устройстве в cookie
+	 */
+	static saveToCookie() {
+		const device = [
+			1,
+			window.innerWidth,
+			window.innerHeight,
+			window.devicePixelRatio,
+			Number(Core.state.isMobile),
+			Number(Core.state.isRetina),
+		];
+
+		document.cookie = 'device=' + device.join(',') + '; path=/;';
+	}
+
+}
+
+export default Core;

package/src/core/core/events.ts

@@ -0,0 +1,54 @@
+const onResizeDelay = 100;
+
+let onResizeTimer: NodeJS.Timeout;
+
+type TopEvent = Event & { topEvent: { widthDiff: number, hightDiff: number } }
+
+/**
+ * Установленные обрабочики на событие изменения размеров окна
+ */
+const onResizeListeners: Map<(ev: TopEvent) => any, (ev: TopEvent) => any> = new Map();
+
+// зафиксированное состояние размеров окна
+const windowSize = {
+	width: window.innerWidth,
+	height: window.innerHeight,
+};
+
+/**
+ * Добавить обработчик на событие изменения размеров экрана
+ * вызов таких обработчиков будет опмизирован и объединен в одно событие
+ */
+function addOnReize (listener: (this: Element, ev: TopEvent) => any) {
+	onResizeListeners.set(listener, listener);
+}
+
+/**
+ * Удаление обработчика на событие изменений размеров экрана
+ */
+function removeOnResize (listener: (this: Element, ev: TopEvent) => any) {
+	onResizeListeners.delete(listener);
+}
+
+function onResize (e: any) {
+	clearTimeout(onResizeTimer);
+
+	onResizeTimer = setTimeout(function () {
+		e.topEvent = {
+			widthDiff: windowSize.width - window.innerWidth,
+			hightDiff: windowSize.height - window.innerHeight,
+		};
+
+		windowSize.width = window.innerWidth;
+		windowSize.height = window.innerHeight;
+
+		onResizeListeners.forEach((callback) => callback(e));
+	}, onResizeDelay);
+}
+
+window.addEventListener('resize', onResize);
+
+export default {
+	addOnReize,
+	removeOnResize,
+};

package/src/core/core/options.ts

@@ -0,0 +1,15 @@
+/**
+ * Конфигурация UI
+ * Можно переопределить при подклчюении UI во Vue приложение через app.use(Core, options)
+ */
+const options = {
+	widthForMobile: 900,
+	dateFormat: 'Y-m-d',
+
+	/**
+	 * Для Москвы: +0300
+	 */
+	gmt: new Date().toString().match(/GMT(\S+)/)?.[1],
+};
+
+export default options;

package/src/core/core/state.ts

@@ -0,0 +1,44 @@
+/**
+ * State UI для взаимодейсвтиями с приложениями Vue
+ */
+const state = {
+	/**
+	 * Device by size
+	 * @see widthForMobile
+	 */
+	isMobile: false,
+
+	/**
+	 * Device by user agent
+	 */
+	isMobileUA: false,
+
+	/**
+	 * true, если плотность пикселей экрана больше 1
+	 */
+	isRetina: false,
+
+	/**
+	 * true, елси это приложение
+	 */
+	isApp: false,
+
+	/**
+	 * true при горизонтальном расположении устройства
+	 */
+	isLandscape: true,
+
+	/**
+	 * true при вертикальном расположении устройства
+	 */
+	isPortrait: false,
+	size: 0,
+
+	// См. core.options
+	dateFormat: 'Y-m-d',
+
+	// См. core.options
+	gmt: new Date().toString().match(/GMT(\S+)/)?.[1],
+};
+
+export default state;