@topvisor/ui 1.2.0 → 1.3.0

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

@@ -1,291 +0,0 @@
-<script setup lang="ts">
-import type { Ref, VNode } from 'vue';
-import { markRaw, onMounted, onUnmounted, ref, useSlots, watch } from 'vue';
-import { TopPopup } from '../../popup/popup';
-import { getHash, setHash } from '@/core/utils/route';
-
-import type { MenuItem, PropsMenu, PropsMenuItem } from './tabsView';
-import { useTabsStore } from './store';
-import TabsViewMenuItem from './menuItem.vue';
-import { preResolveComponent } from './utils';
-
-defineProps<PropsMenu>();
-
-const isLoading = defineModel('isLoading');
-
-const store = useTabsStore();
-
-const slots = useSlots();
-
-// словарь используется для оптимизации получения нужного menuItem
-const menuItemByName: Map<PropsMenuItem['name'], MenuItem> = new Map();
-
-// заполнить словарь с menuItem, по элементам в slot default
-const setMenuItemByName = () => {
-	if (!slots.default) return;
-
-	const component: any = slots.default().find(item => item.key === '_menu');
-	if (!component) return;
-
-	setMenuItemByNameFromItems(component.children);
-};
-
-// заполнить словарь с menuItem, по элементам
-const setMenuItemByNameFromItems = (menuItems: VNode[]) => {
-	menuItems.forEach((subComponent: any) => {
-		// это не компонент элемента меню
-		if (subComponent.type.__name && subComponent.type.__name !== TabsViewMenuItem.__name) return;
-
-		// это не компонент, например template
-		if (!subComponent.type.__name && typeof subComponent.children === 'object') {
-			setMenuItemByNameFromItems(subComponent.children);
-
-			return;
-		}
-
-		if (!subComponent.props?.name || subComponent.props?.disabled) return;
-
-		const menuItem: MenuItem = {
-			title: (subComponent.children.default?.()[0].children as string).trim(),
-			icon: subComponent.props.icon,
-			component: subComponent.props.component ? markRaw(subComponent.props.component) : TabsViewMenuItem.props.component.default,
-			scrollable: subComponent.props.scrollable ?? TabsViewMenuItem.props.scrollable.default,
-		};
-
-		menuItemByName.set(subComponent.props.name, menuItem);
-	});
-};
-
-/**
- * activeMenuItem нужен:
- * - для вывода текста активной вкладки в меню с popup
- * - для вывода компонента активной вкладки (store.component)
- * - для установки store.scrollable
- */
-const activeMenuItem: Ref<MenuItem | null> = ref(null);
-
-/**
- * Кол-во изменений активной вкладки
- */
-let countChanged = 0;
-
-/**
- * Смена активной вкладки
- *
- * TODO: смена slot, например смена языка, требует повторного выполнения setMenuItemByName()
- */
-watch(
-	() => store.activeItemName,
-	async () => {
-		const numberChanged = ++countChanged; // порядковый номер текущего изменения
-
-		if (menuItemByName.size === 0) {
-			setMenuItemByName();
-		}
-
-		if (menuItemByName.size === 0) {
-			store.activeItemName = '';
-
-			return;
-		}
-
-		activeMenuItem.value = menuItemByName.get(store.activeItemName) ?? null;
-
-		// элемент не найден, установить из хеша страницы
-		if (!activeMenuItem.value && store.$id) {
-			const activeItemName = getHash(store.$id);
-
-			activeMenuItem.value = menuItemByName.get(activeItemName) ?? null;
-
-			if (activeMenuItem.value) {
-				store.activeItemName = activeItemName;
-
-				return;
-			}
-		}
-
-		// элемент не найден, установить первый доступный
-		if (!activeMenuItem.value) {
-			store.activeItemName = menuItemByName.keys().next().value!;
-
-			return;
-		}
-
-		// запрошена смена на уже активный элемент
-		if (activeMenuItem.value.component === store.component) {
-			isLoading.value = false;
-
-			return;
-		}
-
-		if (store.$id) setHash(store.$id, store.activeItemName, false);
-
-		// флаг загрузки будет сброшен при инициализации компонента
-		isLoading.value = true;
-
-		/**
-		 * Презагрузить компонент
-		 *
-		 * Нужно для того, чтобы минимизировать скачки интерфейса при ожидании загрузки асинхронного компонента
-		 */
-		await preResolveComponent(activeMenuItem.value.component, () => numberChanged === countChanged);
-
-		// влкадка была сменена еще раз во время sleepWhile
-		if (numberChanged !== countChanged) {
-			return;
-		}
-
-		store.scrollable = activeMenuItem.value.scrollable;
-		store.component = activeMenuItem.value.component;
-
-		if (activeMenuItem.value && !store.component) {
-			console.warn(`Компонент вкладки ${store.activeItemName} не найден. Добавьте props.component для пункта меню ${store.activeItemName}.`);
-		}
-	},
-	{ immediate: true },
-);
-
-const elRef = ref();
-let resizeObserver: ResizeObserver;
-
-onMounted(() => {
-	resizeObserver = new ResizeObserver(() => {
-		elRef.value.parentElement.style.setProperty('--top-tabsView-contents-offset-top', elRef.value.offsetHeight + 'px');
-	});
-
-	resizeObserver.observe(elRef.value);
-});
-
-onUnmounted(() => {
-	resizeObserver.disconnect();
-});
-</script>
-
-<template>
-	<div
-		ref="elRef"
-		:class="{
-			'top-tabsView_menu': true,
-			'top-tabsView_menu-inPopup_0': !store.showMenuInPopup,
-			'top-tabsView_menu-inPopup_1': store.showMenuInPopup,
-			'top-tabsView_menu-short': store.isShort && !store.showMenuInPopup,
-		}"
-	>
-		<!-- Спрятать меню под кнопку в popup -->
-		<TopPopup v-if="store.showMenuInPopup">
-			<template #opener>
-				<div class="top-tabsView_menuOpener">
-					<div
-						v-if="activeMenuItem"
-						class="top-tabsView_menuOpenerActiveItem"
-						:data-top-icon="activeMenuItem.icon"
-					>
-						<span class="top-ellipsis">
-							{{ activeMenuItem.title }}
-						</span>
-					</div>
-
-					<div class="top-tabsView_menuOpenerIcon" data-top-icon=""></div>
-				</div>
-			</template>
-
-			<template #contentList>
-				<slot></slot>
-			</template>
-		</TopPopup>
-
-		<!-- Отобразить меню на странице -->
-		<template v-else>
-			<div class="top-tabsView_menuList">
-				<slot></slot>
-			</div>
-
-			<div
-				v-if="isShortable"
-				class="top-tabsView_menuFooter"
-			>
-				<TabsViewMenuItem
-					v-if="isShortable"
-					:icon="store.isShort ? '' : ''"
-					@click="store.isShort = !store.isShort"
-				>
-					{{ store.isShort ? '' : 'Свернуть' }} <!--TODO: translate-->
-				</TabsViewMenuItem>
-			</div>
-		</template>
-	</div>
-</template>
-
-<style>
-/* режим отображение табов в основной области документа */
-.top-tabsView-pageMod .top-tabsView_menu {
-	box-sizing: border-box;
-	position: sticky;
-	top: var(--top-tabsView-top);
-	z-index: 10;
-}
-
-/* режим отображение табов в основной области документа без popup */
-.top-tabsView-pageMod .top-tabsView_menu-inPopup_0 {
-	height: calc(var(--100vh) - var(--top-tabsView-top));
-}
-
-/* стантартный режим  */
-.top-tabsView_menu-inPopup_0 {
-	box-sizing: border-box;
-	width: var(--top-tabsView-menu-width);
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	flex-shrink: 0;
-}
-
-/* режим вывода в popup */
-.top-tabsView_menu-inPopup_1 {
-	border-bottom: 1px solid var(--color-line-2-opacity);
-}
-
-.top-tabsView_menu-short {
-	width: auto;
-}
-
-.top-tabsView_menu > .top-tabsView_menuOpener {
-	display: flex;
-	justify-content: flex-end;
-}
-
-.top-tabsView_menu > .top-tabsView_menuOpener:hover {
-	background: var(--color-layer-1);
-}
-
-.top-tabsView_menuOpenerIcon { display: flex; }
-
-.top-tabsView_menuOpenerActiveItem {
-	--top-forms-padding: 0px;
-
-	box-sizing: border-box;
-	padding: var(--top-padding-2);
-	max-width: calc(100% - var(--top-forms-base-height));
-	white-space: nowrap;
-	flex-grow: 1;
-	display: flex;
-	align-items: center;
-	gap: var(--top-padding-2);
-}
-
-.top-tabsView_menuList,
-.top-tabsView_menuFooter {
-	padding: var(--top-padding-2);
-	display: flex;
-	flex-direction: column;
-	gap: var(--top-gap-2);
-}
-
-.top-tabsView_menuList {
-	overflow-y: auto;
-}
-
-.top-tabsView_menu-short .top-tabsView_menuFooter > .top-tabsView_menuItem {
-	--top-icon-width: 100%;
-}
-</style>

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

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-	<div class="top-tabsView_menuDelimeter"></div>
-</template>
-
-<style>
-.top-tabsView_menuDelimeter {
-	padding: var(--top-padding-1) 0;
-	display: flex;
-}
-
-.top-tabsView_menuDelimeter:before {
-	content: "";
-	height: 2px;
-	background: var(--color-line-2);
-	flex-grow: 1;
-}
-
-.top-tabsView_menuDelimeter:first-child,
-.top-tabsView_menuDelimeter + .top-tabsView_menuDelimeter {
-	display: none;
-}
-</style>

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

@@ -1,125 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { genHash } from '@/core/utils/route';
-import { TopPopupListItem } from '@/components/popup/popup';
-import { useTabsStore } from './store';
-import type { PropsMenuItem } from './tabsView';
-
-const props = withDefaults(defineProps<PropsMenuItem>(), {
-	scrollable: true,
-	component: undefined,
-});
-
-const store = useTabsStore();
-
-const href = computed(() => {
-	// это внутренняя хеш навигация, ссылка на вкладку
-	if (props.name && store.$id) {
-		return genHash(store.$id, props.name);
-	}
-
-	return props.href;
-});
-
-const tagName = computed(() => {
-	if (store.showMenuInPopup) {
-		return TopPopupListItem;
-	}
-
-	return href ? 'a' : 'button';
-});
-
-/**
- * Клик по элементу меню
- */
-const onClick = (e: MouseEvent) => {
-	// это внутренняя хеш навигация, ссылка на вкладку
-	if (!props.href && href.value) {
-		e.preventDefault();
-	}
-
-	if (props.name) {
-		store.activeItemName = props.name;
-	}
-};
-</script>
-
-<template>
-	<component
-		:is="tagName"
-		target="_self"
-		:class="{
-			['top-tabsView_menuItem']: !store.showMenuInPopup,
-			['top-active']: name && store.activeItemName === name,
-			['top-disabled']: disabled,
-			['top-spa-disabled']: true,
-		}"
-		:href="href"
-		:data-top-icon="icon || undefined"
-		:disabled="disabled || undefined"
-		@click="onClick"
-	>
-		<slot v-if="store.showMenuInPopup"></slot>
-
-		<span
-			v-else-if="$slots.default && !store.isShort"
-			class="top-ellipsis"
-		>
-			<slot></slot>
-		</span>
-	</component>
-</template>
-
-<style>
-.top-tabsView_menuItem {
-	--top-icon-color: var(--color-text-2);
-	--top-icon-width: calc(var(--top-icon-size));
-
-	cursor: pointer;
-	box-sizing: border-box;
-
-	border: none;
-	border-radius: var(--top-radius-2);
-	padding: var(--top-padding-2);
-	background: transparent;
-	height: 40px;
-
-	color: var(--color-text-1);
-	text-decoration: none;
-	white-space: nowrap;
-
-	display: flex;
-	gap: var(--top-gap-2);
-	align-items: center;
-	justify-content: flex-start;
-	transition: background var(--transition);
-}
-
-.top-tabsView_menuItem:hover {
-	--top-icon-color: var(--color-text-1);
-
-	background: var(--color-bg-shading-1);
-	text-decoration: none;
-}
-
-.top-tabsView_menuItem.top-active {
-	--top-icon-color: inherit;
-
-	background: var(--color-layout-front-1);
-	color: inherit;
-}
-
-.top-tabsView_menuItem:disabled:not(option):not(optgroup):not(.top-forms-option),
-.top-tabsView_menuItem:disabled ~ .top-formsCaption,
-.top-tabsView_menuItem.top-disabled[data-top-icon]:before,
-.top-tabsView_menuItem.top-disabled[data-top-icon2]:after {
-	opacity: unset;
-	filter: unset;
-}
-
-.top-tabsView_menuItem.top-disabled {
-	--top-icon-color: var(--color-text-4);
-
-	color: var(--color-text-4);
-}
-</style>

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

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import { useTabsStore } from './store';
-import type { PropsMenuTitle } from './tabsView';
-import TabsViewMenuDelimeter from './menuDelimeter.vue';
-import { TopPopupListItem } from '../../popup/popup';
-
-defineProps<PropsMenuTitle>();
-
-const store = useTabsStore();
-</script>
-
-<template>
-	<TopPopupListItem
-		v-if="store.showMenuInPopup"
-		type="title"
-	>
-		<slot></slot>
-	</TopPopupListItem>
-
-	<TabsViewMenuDelimeter v-else-if="store.isShort"/>
-
-	<div
-		v-else
-		:class="{
-			'top-tabsView_menuTitle': true,
-			'top-tabsView_menuTitle-subtitle': isSubtitle,
-		}"
-	>
-		<slot></slot>
-	</div>
-</template>
-
-<style>
-.top-tabsView_menuTitle {
-	padding: var(--top-padding-4) var(--top-padding-2) var(--top-padding-1);
-	font-weight: 600;
-	color: var(--color-text-1);
-}
-
-.top-tabsView_menuTitle-subtitle {
-	padding-top: var(--top-padding-1);
-	font-size: 12px;
-	font-weight: 400;
-	color: var(--color-text-2);
-}
-</style>

package/src/components/tabsView/tabsView/store.ts

@@ -1,60 +0,0 @@
-import type { InjectionKey, ModelRef } from 'vue';
-import { computed, ref } from 'vue';
-import Core from '@/core/core/core';
-import { defineStore, useStore } from '@/core/utils/store';
-import StoreLocalStorage from '@/core/utils/store/localStorage';
-import type { Props, Store } from './tabsView';
-import { getHash } from '@/core/utils/route';
-
-const popstateCallbacks = new Set<(e: PopStateEvent) => void>();
-
-addEventListener('popstate', (e) => {
-	popstateCallbacks.forEach(popstateCallback => popstateCallback(e));
-});
-
-export const injectionKey = Symbol() as InjectionKey<Store>;
-
-/**
- * Инициировать Store компонента
- */
-export const defineTabsStore = (props: Props, model: ModelRef<string | undefined>) => {
-	const store = defineStore(injectionKey, () => {
-		const showMenuInPopup = computed(() => props.showMenuInPopup ?? Core.state.isMobile);
-		const pageMod = computed(() => props.pageMod);
-		const isShort = ref(false);
-
-		const component = ref(undefined);
-		const scrollable = ref(true);
-
-		return {
-			showMenuInPopup,
-			pageMod,
-			isShort,
-			activeItemName: model,
-			component,
-			scrollable,
-		};
-	}, props.idState);
-
-	if (props.isShortable) {
-		const stateName = 'isShort';
-
-		StoreLocalStorage.loadLocalStorge(stateName, store);
-		StoreLocalStorage.addSaverLocalStorge(stateName, store);
-	}
-
-	if (store.$id) {
-		const popstateCallback = (e: PopStateEvent) => {
-			model.value = getHash(store.$id!);
-		};
-
-		popstateCallbacks.add(popstateCallback);
-	}
-
-	return store;
-};
-
-/**
- * Получить Store компонента
- */
-export const useTabsStore = () => useStore(injectionKey);

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

@@ -1,22 +0,0 @@
-В компоненте используется 1 именованый слот:
-
-**#menu** - для вставки меню
-
-Для вывода навигации нужно использовать подкомпоненты:
-
-**TabsViewMenuItem** - компонент пункта меню  
-**TabsViewMenuTitle** - компонент заголовка / подзаголовка меню
-
-Элементы навигации и отображаемый контент связываются через:
-
-- props.modelValue в TabsView
-- props.name в TabsViewMenuItem
-- props.component в TabsViewMenuItem
-
-Определяет динамические css-переменные:
-
-- --top-tabsView-contents-offset-top - расстояние по вертикали до блока с контентом
-
-Устанавливает модификаторы документа:
-
-- .top-hasTabsViewPageMod - на страницу вставлен tabsView в качестве основного содержимого