@topvisor/ui 1.2.0 → 1.3.1-dev.2

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

@@ -1,170 +0,0 @@
-import { defineAsyncComponent } from 'vue';
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import { genArgsTypes } from '@/components/helpersStories';
-
-import Component from './tabsView.vue';
-import TabsViewMenuItem from './menuItem.vue';
-import TabsViewMenuTitle from './menuTitle.vue';
-import * as ComponentsConst from './tabsView';
-import ReadMe from './stories/README.md?raw';
-
-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: {
-		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.ts

@@ -1,118 +0,0 @@
-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/tabsView.vue

@@ -1,120 +0,0 @@
-<script setup lang="ts">
-import { defineModel, onMounted, onUnmounted, ref, watch } from 'vue';
-import Core from '@/core/core/core';
-import { delHash } from '@/core/utils/route';
-import type { Props } from './tabsView';
-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/utils.ts

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

@@ -1,47 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import { genArgsTypes } from '@/components/helpersStories';
-
-import TabsView from '../tabsView.vue';
-import Component from '../menuItem.vue';
-import * as ComponentsConst from '../tabsView';
-
-const argTypes = genArgsTypes(Component, ComponentsConst, ['default']);
-
-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

@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import { genArgsTypes } from '@/components/helpersStories';
-
-import TabsView from '../tabsView.vue';
-import Component from '../menuTitle.vue';
-import * as ComponentsConst from '../tabsView';
-
-const argTypes = genArgsTypes(Component, ComponentsConst, ['default']);
-
-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

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

@@ -1,3 +0,0 @@
-export type $el = JQuery<HTMLElement>;
-
-export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

package/src/core/app.ts

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

@@ -1,36 +0,0 @@
-# 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**