@topvisor/ui 1.0.42-date.2 → 1.0.42-dev.2

package/src/components/tabsView/tabsView/tabsView.stories.ts

@@ -0,0 +1,169 @@
+import { defineAsyncComponent } from 'vue';
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import { genArgsTypes } from '@/components/helpersStories';
+
+import Component from './tabsView.vue';
+import TabsViewMenuItem from './menuItem.vue';
+import TabsViewMenuTitle from './menuTitle.vue';
+import ReadMe from './stories/README.md?raw';
+
+const argTypes = genArgsTypes(Component);
+
+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: {
+		modelValue: 'item-1',
+		idState: 'main',
+		isShortable: true,
+	},
+	render: (args: any) => ({
+		components: {
+			TabsView: Component,
+			TabsViewMenuItem,
+			TabsViewMenuTitle,
+		},
+		setup() {
+			const componentByName = new Map();
+			componentByName.set('item-1', {
+				template: `
+					<p>
+						Контент вкладки
+					</p>
+				`,
+			});
+			componentByName.set('item-2', {
+				template: `
+					<p>
+						Контент вкладки 2
+					</p>
+				`,
+			});
+			componentByName.set('item-3', {
+				template: `
+					<p>
+						Контент вкладки 3
+					</p>
+				`,
+			});
+			componentByName.set(
+				'item-4',
+				defineAsyncComponent(() => {
+					return new Promise((resolve) => {
+						setTimeout(() => {
+							resolve({
+								template: `
+								<p>
+									Контент вкладки 4 (async, 100ms)
+								</p>
+							`,
+							});
+						}, 100);
+					});
+				}),
+			);
+			componentByName.set(
+				'item-5',
+				defineAsyncComponent(() => {
+					return new Promise((resolve) => {
+						setTimeout(() => {
+							resolve({
+								template: `
+								<p>
+									Контент вкладки 5 (async, 2000ms)
+								</p>
+							`,
+							});
+						}, 2000);
+					});
+				}),
+			);
+
+			return { args, componentByName };
+		},
+		template: `
+			<div style="height: 500px">
+				<TabsView
+					v-model="args.modelValue"
+					:pageMod="args.pageMod"
+					:showMenuInPopup="args.showMenuInPopup"
+					:isShortable="args.isShortable"
+					:idState="args.idState"
+				>
+					<template #menu>
+						<TabsViewMenuTitle>
+							Заголовок 1
+						</TabsViewMenuTitle>
+						<TabsViewMenuItem
+							name="item-1"
+							icon=""
+							:component="componentByName.get('item-1')"
+						>
+							Вкладка 1
+						</TabsViewMenuItem>
+						<TabsViewMenuTitle>
+							Заголовок 2
+						</TabsViewMenuTitle>
+						<TabsViewMenuTitle
+							:isSubtitle="true"
+						>
+							Подзаголовок 2.1
+						</TabsViewMenuTitle>
+						<TabsViewMenuItem
+							name="item-2"
+							icon=""
+							:component="componentByName.get('item-2')"
+						>
+							Вкладка 2
+						</TabsViewMenuItem>
+						<TabsViewMenuItem
+							name="item-3"
+							icon=""
+							:disabled="true"
+							:component="componentByName.get('item-3')"
+						>
+							Вкладка 3 неактивная
+						</TabsViewMenuItem>
+						<TabsViewMenuItem
+							name="item-4"
+							icon=""
+							:component="componentByName.get('item-4')"
+						>
+							Вкладка 4 (async, 100ms)
+						</TabsViewMenuItem>
+						<TabsViewMenuItem
+							name="item-5"
+							icon=""
+							:component="componentByName.get('item-5')"
+						>
+							Вкладка 5 (async, 2000ms)
+						</TabsViewMenuItem>
+						<TabsViewMenuItem
+							href="https://topvisor.com/ru/"
+							target="_blank"
+							icon=""
+						>
+							Кнопка ссылка
+						</TabsViewMenuItem>
+					</template>
+				</TabsView>
+			</div>
+		`,
+	}),
+} satisfies Story;
+
+export default meta;

package/src/components/tabsView/tabsView/tabsView.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { defineModel, onUnmounted, ref, watch } from 'vue';
+import Core from '@/core/core/core';
+import { delHash } from '@/core/utils/route';
+import type { Props } from './types';
+import { defineTabsStore } from './store';
+import TabsViewMenu from './menu.vue';
+import TopLoadbar from '@/components/forms/loadbar/loadbar.vue';
+import { checkComponentIsLoading } from './utils';
+
+const props = withDefaults(defineProps<Props>(), {
+	showMenuInPopup: undefined,
+	isShortable: false,
+});
+
+const model = defineModel<string>();
+
+const store = defineTabsStore(props, model);
+
+const uid = Math.random();
+
+if (props.pageMod) Core.state.documentClassModificators.set(uid, 'top-hasTabsViewPageMod');
+
+onUnmounted(() => {
+	if (props.pageMod) Core.state.documentClassModificators.delete(uid);
+
+	if (store.$id) delHash(store.$id, store.activeItemName, true);
+});
+
+const componentRef = ref();
+const isLoading = ref(false);
+
+watch([componentRef, () => store.component], () => {
+	isLoading.value = checkComponentIsLoading(store.component);
+}, { immediate: true });
+</script>
+
+<template>
+	<div
+		:class="{
+			'top-tabsView': true,
+			'top-tabsView-pageMod': props.pageMod,
+			'top-tabsView-inPopup': store.showMenuInPopup,
+		}"
+	>
+		<TabsViewMenu
+			:isShortable="isShortable"
+			v-model:isLoading="isLoading"
+		>
+			<!-- @slot Меню, ожидает передачу компонентов TabsViewMenuItem и TabsViewMenuTitle -->
+			<slot name="menu"></slot>
+		</TabsViewMenu>
+
+		<div
+			:class="{
+				'top-tabsView_contents': true,
+				'top-tabsView_contents-isLoading': isLoading,
+				'top-tabsView_contents-noScrollable': !store.scrollable,
+			}"
+		>
+			<TopLoadbar v-if="isLoading"/>
+
+			<keep-alive>
+				<component
+					ref="componentRef"
+					:is="store.component"
+				/>
+			</keep-alive>
+		</div>
+	</div>
+</template>
+
+<style>
+:root {
+	--top-tabsView-top: 0px;
+	--top-tabsView-menu-width: 220px;
+	--top-tabsView-contents-offset-top: 0px;
+}
+
+.top-tabsView {
+	background: var(--color-layout-middle);
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: row;
+}
+
+.top-tabsView_contents {
+	border-radius: var(--top-radius-4);
+	background: var(--color-layout-front-1);
+	padding: var(--top-padding-4);
+	flex-grow: 1;
+	overflow: auto;
+	position: relative;
+}
+
+.top-tabsView_contents-isLoading {
+	pointer-events: none;
+}
+
+.top-tabsView_contents-noScrollable {
+	width: calc(100% - var(--top-tabsView-menu-width));
+	padding: 0;
+	overflow: visible;
+}
+
+/* top-tabsView-inPopup */
+.top-tabsView-inPopup {
+	background: var(--color-layout-front-1);
+	flex-direction: column;
+}
+
+.top-tabsView-inPopup > .top-tabsView_contents {
+	border-radius: 0;
+}
+
+.top-tabsView-inPopup > .top-tabsView_contents-noScrollable {
+	width: auto;
+}
+</style>

package/src/components/tabsView/tabsView/types.ts

@@ -0,0 +1,118 @@
+import type { Component } from 'vue';
+
+export interface Store {
+	/**
+	 * Если true - меню будет скрыто в popup под кнопку, которая его открывает, на кнопке будет текст активного элемента меню
+	 */
+	showMenuInPopup: Props['showMenuInPopup'];
+
+	/**
+	 * Если true - меню будет отображено в свернутом режиме без текста у кнопок
+	 */
+	isShort: boolean;
+
+	/**
+	 * Имя активной вкладки
+	 */
+	activeItemName: Props['modelValue'];
+
+	/**
+	 * Vue компонент активной вкладки
+	 */
+	component: Required<PropsMenuItem['component']>;
+
+	/**
+	 * Если false - контент вкладки будет без отступов и скролла (по умолчанию true).
+	 * Задается через PropsMenuItems.scrollable активного пункта меню.
+	 */
+	scrollable?: PropsMenuItem['scrollable'];
+}
+
+export interface Props {
+	/**
+	 * Имя активной вкладки
+	 */
+	modelValue: string;
+
+	/**
+	 * Указывает на то, что компоеннт Используется в основной области документа
+	 *
+	 * props - константа, после инициализации менять нельзя
+	 *
+	 * Если установлен в true - отображает меню в режиме sticky, для настройки можно использовать css переменную --top-tabsView-top
+	 *
+	 * Если установлен в true - добавляет документу глобальный модификатор .top-hasTabsViewPageMod через htmlClassModificators
+	 */
+	pageMod?: boolean;
+
+	/**
+	 * Если true - меню будет скрыто в popup под кнопку, которая его открывает
+	 *
+	 * Если не указано будет использоваться Core.state.isMobile
+	 */
+	showMenuInPopup?: boolean;
+
+	/**
+	 * Если true - меню в режиме без popup можно сворачивать
+	 */
+	isShortable?: boolean;
+
+	/**
+	 *  @see defineStore()
+	 */
+	idState?: string;
+}
+
+export interface Emits {
+
+}
+
+export interface PropsMenu {
+	/**
+	 * Если true - будет выведена кнопка сжатия меню
+	 */
+	isShortable: Props['isShortable'];
+
+	/**
+	 * Флаг загрузки компонента вкладки.
+	 */
+	isLoading: boolean;
+}
+
+export interface PropsMenuItem {
+	/**
+	 * Уникальное имя вкладки, указывать, только если кнопка должна менять выбранную вкладку
+	 */
+	name?: Props['modelValue'];
+
+	/**
+	 * Если указано, кнопка будет вставлена как ссылка
+	 */
+	href?: string;
+	icon?: string;
+	disabled?: boolean;
+
+	/**
+	 * Vue компонент вкладки
+	 */
+	component?: Component;
+
+	/**
+	 * Состояние скролла для вкладки
+	 */
+	scrollable?: boolean;
+}
+
+export interface PropsMenuTitle {
+	isSubtitle?: boolean;
+}
+
+/**
+ * Для activeMenuItem
+ */
+export interface MenuItem {
+	title?: string,
+	icon?: PropsMenuItem['icon'];
+	component: Required<PropsMenuItem['component']>;
+	scrollable?: PropsMenuItem['scrollable'];
+}

package/src/components/tabsView/tabsView/utils.ts

@@ -0,0 +1,27 @@
+// TODO: Эту функцию можно вынести в глобальный utils
+
+import { sleepWhile } from '@/core/utils/system';
+
+/**
+ * Проверка нахождения компонента в состояние загрузки
+ * @param component
+ */
+export const checkComponentIsLoading = (component: any) => {
+	return component?.name === 'AsyncComponentWrapper' && !component?.__asyncResolved;
+};
+
+/**
+ * Презагрузить компонент
+ *
+ * Некоторое время ожидает загрузку компонента, прежде чем завершит работу
+ */
+export const preResolveComponent = async (component: any, condition: Function) => {
+	if (component?.name !== 'AsyncComponentWrapper') return;
+	if (component?.__asyncResolved) return;
+
+	component.__asyncLoader();
+
+	await sleepWhile(() => {
+		return condition() && checkComponentIsLoading(component);
+	}, 200);
+};

package/src/components/tabsView/tabsView//320/255/320/273/320/265/320/274/320/265/320/275/321/202/321/213/MenuItem.stories.ts

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import { genArgsTypes } from '@/components/helpersStories';
+
+import TabsView from '../tabsView.vue';
+import Component from '../menuItem.vue';
+
+const argTypes = genArgsTypes(Component);
+
+const meta = {
+	component: Component,
+	argTypes,
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const MenuItem = {
+	args: {
+		name: 'item-1',
+		href: '',
+		icon: '',
+		disabled: false,
+		scrollable: true,
+		default: 'Текст',
+	},
+	render: (args: any) => ({
+		components: {
+			TabsView,
+			TabsViewMenuItem: Component,
+		},
+		setup() {
+			return { args };
+		},
+		template: `
+			<TabsView modelValue="">
+				<template #menu>
+					<TabsViewMenuItem :="args">
+						{{ args.default }}
+					</TabsViewMenuItem>
+				</template>
+			</TabsView>
+		`,
+	}),
+} satisfies Story;
+
+export default meta;

package/src/components/tabsView/tabsView//320/255/320/273/320/265/320/274/320/265/320/275/321/202/321/213/MenuTitle.stories.ts

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+
+import { genArgsTypes } from '@/components/helpersStories';
+
+import TabsView from '../tabsView.vue';
+import Component from '../menuTitle.vue';
+
+const argTypes = genArgsTypes(Component);
+
+const meta = {
+	component: Component,
+	argTypes,
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const MenuTitle = {
+	args: {
+		isSubtitle: false,
+		default: 'Текст',
+	},
+	render: (args: any) => ({
+		components: {
+			TabsView,
+			TabsViewMenuTitle: Component,
+		},
+		setup() {
+			return { args };
+		},
+		template: `
+			<TabsView modelValue="">
+				<template #menu>
+					<TabsViewMenuTitle :="args">
+						{{ args.default }}
+					</TabsViewMenuTitle>
+				</template>
+			</TabsView>
+		`,
+	}),
+} satisfies Story;
+
+export default meta;

package/src/components/tabsView/tabsView.ts

@@ -0,0 +1,9 @@
+import type { ComponentCustomProps } from 'vue';
+
+import TabsView from './tabsView/tabsView.vue';
+import TabsViewMenuItem from './tabsView/menuItem.vue';
+import TabsViewMenuTitle from './tabsView/menuTitle.vue';
+
+export const TopTabsView = TabsView as typeof TabsView & ComponentCustomProps;
+export const TopTabsViewMenuItem = TabsViewMenuItem as typeof TabsViewMenuItem & ComponentCustomProps;
+export const TopTabsViewMenuTitle = TabsViewMenuTitle as typeof TabsViewMenuTitle & ComponentCustomProps;

package/src/components/types.ts

@@ -0,0 +1,6 @@
+export type $el = JQuery<HTMLElement>;
+
+/**
+ * Создаёт новый тип из T, и делает в нем свойства из `K` необязательными
+ */
+export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

package/src/core/app.ts

@@ -0,0 +1,22 @@
+import Core from './core/core';
+import corePlugin from './plugins/core';
+import type { Lang } from './plugins/i18n';
+import i18nPlugin, { useI18n, useI18nLang } from './plugins/i18n';
+import piniaTPAPlugin from './plugins/piniaTPA';
+
+export {
+	Core,
+	useI18n,
+	useI18nLang,
+	corePlugin,
+	i18nPlugin,
+	piniaTPAPlugin,
+};
+
+// TopDialog
+export { useAsyncTopDialog, useTopDialog } from '@/components/dialog/dialog/composables/utils';
+export { TopDialogWorker } from '@/components/dialog/lib/worker';
+
+export type{
+	Lang,
+};

package/src/core/core/core.mdx

@@ -0,0 +1,36 @@
+# Core
+
+Core - это ядро UI, определяет настройки его окружения.
+
+Подключается к приложению через плагин: [corePlugin](?path=/docs/core-plugins--docs)
+
+## Расширение функционала Vue прилоежния
+
+В приложение Vue будут добавлены:
+
+- В глобальную область видимости шаблонов будет добавлен объект `$core` (объект `Core` из **@topvisor/ui/app**)
+- В глобальную область видимости шаблонов будет добавлена функция `$vd()`, которая является shortcut для `console.log()`
+- UI [директивы](?path=/docs/core-directives-focus--docs)
+- Базовые компоненты UI [forms](?path=/docs/components-forms-readme--docs)
+- Автоматическое добавление модификаторов для `document.body` при нажатии `ctrl` / `alt`: `body.press_ctrl` и `body.press_alt`
+- Автоматическая устовка кук `device` с информацией об устройстве
+- Автоматическая установка `Core.state`
+
+В случае, когда на странице несколько приложений Vue с подключенным UI/Core, все они будут иметь общее состояние, а глобальные события на страницу
+будут добавлены только один раз.
+
+## Глобальная область видимости
+
+В глобальную область видимости будут добавлены:
+
+- `vd()` - shortcut для `console.log()`
+
+## Базовый функционал
+
+- `Core.$` - доступ к утилитам [jQuery](?path=/docs/core-core-jquery--docs) для работы с **DOM** и реализации **виджетов** за пределами компонентов
+- `Core.themeName` - выбранная тема оформления
+- `Core.state` - реактивное состояние приложения
+- `Core.Events` - интерфейс для установки глобальных событий
+    - `Core.Events.addOnReize` и `Core.Events.removeOnResize` - добавление ленивого исполнения `onresize` окна браузера
+- `Core.flags` - различные флаги, необходимые для работы UI
+- `Core.notice()` - вывод сообщения на экран, см. компоненет **TopNotice**