@topvisor/ui 0.0.35 → 0.0.37

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/core/core/core.ts

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

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

@@ -1,15 +0,0 @@
-/**
- * Конфигурация 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

@@ -1,44 +0,0 @@
-/**
- * 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;