@topvisor/ui 1.1.0 → 1.2.0

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

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

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

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

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

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

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