@topvisor/ui 1.0.22-test-ci-cd-10 → 1.2.0

package/src/core/directives/scrollIntoView.mdx

@@ -0,0 +1,41 @@
+# v-top-scroll-into-view
+
+Проскролить до элемента, в соответсвие с прапавилами позиционирования элемента.
+
+**Правила позиционирования**: если элемент не виден на экране или виден, но не полностью. Изменить правила можно через **значние** директивы.
+
+**Правила срабатыварния**: при смене видимости через стили, например через `v-show`.
+Изменить поведение срабатывания можно через модифиатор `immediately`.
+
+Если на странице несколько элементов с этой директивой, применяться будет та, которая сработала позже всех.
+
+## Значение
+
+Директива в качестве необязтальеного значения принимает объект с настройками позиционирования типа **boolean** или **ScrollIntoViewOptions**,
+см. https://developer.mozilla.org/docs/Web/API/Element/scrollIntoView#scrollintoviewoptions
+
+## Модификаторы
+
+- **immediately**: сразу произвести скролл, для работы с `v-if` или для немедленного скролла, сразу после отрисовки компонента
+
+## Пример использования
+
+```html
+<!-- Проскроллить только при визуальном появлении элемента -->
+<div v-top-scroll-into-view v-show="condition"></div>
+
+<!-- Проскроллить сразу при появлении элемента -->
+<div v-top-scroll-into-view.immediate></div>
+
+<!-- Проскроллить сразу при появлении элемента -->
+<div v-top-scroll-into-view.immediate v-if="condition"></div>
+
+<!-- Проскроллить без анимации -->
+<div v-top-scroll-into-view="{behavior: 'instant'}"></div>
+
+<!-- Проскроллить так, чтобы элемент расположить вверху -->
+<div v-top-scroll-into-view="{block: 'start'}"></div>
+
+<!-- Проскроллить c настройкой alignToTop = true -->
+<div v-top-scroll-into-view="true"></div>
+```

package/src/core/directives/scrollIntoView.ts

@@ -0,0 +1,123 @@
+import type { DirectiveBinding, ObjectDirective } from 'vue';
+import { isVisible } from '@/core/utils/dom';
+
+type Binding = DirectiveBinding<ScrollIntoViewOptions | boolean | undefined, 'immediate'>;
+
+type Storage = {
+	/**
+	 * Сохраненное состояние видимости
+	 */
+	isVisible: boolean,
+
+	/**
+	 * Текущие настройки скролла
+	 */
+	scrollIntoViewOptions: ScrollIntoViewOptions | boolean
+};
+
+let UtilsDom: typeof import('@/core/utils/dom');
+let UtilsLodash: typeof import('@/core/utils/lodash');
+
+/**
+ * Сгенерировать настройки для скролла
+ *
+ * @see https://developer.mozilla.org/ru/docs/Web/API/Element/scrollIntoView
+ */
+const genScrollIntoViewOptions = (scrollIntoViewOptions?: ScrollIntoViewOptions | boolean) => {
+	if (typeof scrollIntoViewOptions === 'boolean') return scrollIntoViewOptions;
+
+	if (!scrollIntoViewOptions) {
+		scrollIntoViewOptions = {};
+	} else {
+		scrollIntoViewOptions = { ...scrollIntoViewOptions };
+	}
+
+	scrollIntoViewOptions.behavior ??= 'smooth';
+	scrollIntoViewOptions.block ??= 'nearest';
+	scrollIntoViewOptions.inline ??= 'nearest';
+
+	return scrollIntoViewOptions;
+};
+
+/**
+ * Активный элемент, для дедупликации скроллов
+ *
+ * Только один элемент на странице может считаться активным
+ */
+let elActive: HTMLElement | undefined;
+
+/**
+ * Функция скролла с дедупликацией
+ */
+let scrollToElActiveDebounce: Function;
+
+/**
+ * Выполнить скролл к текущему активному элементу
+ */
+const scrollToElActive = async () => {
+	if (!elActive) return;
+
+	const storage = await useStorage(elActive);
+	if (!storage.isVisible) return;
+
+	elActive.scrollIntoView(storage.scrollIntoViewOptions);
+};
+
+/**
+ * Выполнить дедуплицированный скролл к элементу
+ *
+ * Будет выполнен скролл к самому последнему элементу, вызвавшему срабатывание директивы
+ */
+const scrollToElDebounce = async (el: HTMLElement) => {
+	if (!UtilsLodash) UtilsLodash = await import('@/core/utils/lodash');
+	if (!scrollToElActiveDebounce) scrollToElActiveDebounce = UtilsLodash.debounce(scrollToElActive, 30);
+
+	elActive = el;
+
+	scrollToElActiveDebounce();
+};
+
+/**
+ * Данные, связанные с элементом и директивой
+ */
+const useStorage = async (el: HTMLElement, scrollIntoViewOptions?: ScrollIntoViewOptions | boolean) => {
+	if (!UtilsDom) UtilsDom = await import('@/core/utils/dom');
+
+	let storage: Storage | undefined = UtilsDom.storage(el, 'v-top-scrollIntoView');
+
+	// инициализация
+	if (!storage) {
+		storage = {
+			isVisible: isVisible(el),
+			scrollIntoViewOptions: genScrollIntoViewOptions(scrollIntoViewOptions),
+		};
+
+		UtilsDom.storage(el, 'v-top-scrollIntoView', storage);
+	}
+
+	return storage;
+};
+
+const scrollIntoView: ObjectDirective = {
+	async mounted(el: HTMLElement, binding: Binding) {
+		await useStorage(el, binding.value);
+
+		if (binding.modifiers.immediate) {
+			scrollToElDebounce(el);
+		}
+	},
+
+	async updated(el: HTMLElement, binding: Binding) {
+		const storage = await useStorage(el, binding.value);
+		storage.scrollIntoViewOptions = genScrollIntoViewOptions(binding.value);
+
+		const isVisibleNew = isVisible(el);
+		if (isVisibleNew && storage.isVisible !== isVisibleNew) {
+			scrollToElDebounce(el);
+		}
+
+		storage.isVisible = isVisibleNew;
+	},
+};
+
+export default scrollIntoView;

package/src/core/directives/scrollShadow.mdx

@@ -0,0 +1,23 @@
+# v-top-scroll-shadow
+
+Добавить отображение тени при появлении скролла у элемента.
+
+Если у элемента внутри есть скролл, то тень добавляется снизу элемента, при скроле тень появляется и сверху.
+Если доскролить до самого низа, тень снизу пропадает.
+
+Так же к элементу подключается resizeObserver, если переполнение элемента произойдет при изменении его размера, то появятся тени.
+
+## Использоание
+
+После подключения директивы, в родительском элементе необходимо прописать класс **has_scroll_container**.
+
+Директива не может вмешиваться в управление атрибутами других элементов и добавлять этот класс автоматически.
+
+## Пример использования
+
+```html
+
+<div class="has_scroll_container">
+	<div v-top-scroll-shadow></div>
+</div>
+```

package/src/core/directives/scrollShadow.ts

@@ -0,0 +1,27 @@
+let UtilsScroll: typeof import('@/core/utils/scroll');
+
+/**
+ * Добавить отображение тени при появлении скролла у элемента
+ *
+ * Будут добавлены события для усатновки модификаторов тени в зависимости от скролла элемента
+ *
+ * Модификаторы:
+ * - top-scrollShadow
+ * - top-scrollShadow-started
+ * - top-scrollShadow-finished
+ */
+const connectScrollShadow = {
+	async mounted(el) {
+		if (!UtilsScroll) UtilsScroll = await import('@/core/utils/scroll');
+
+		UtilsScroll.connectScrollShadow(el);
+	},
+
+	async unmounted(el) {
+		if (!UtilsScroll) UtilsScroll = await import('@/core/utils/scroll');
+
+		UtilsScroll.unconnectScrollShadow(el);
+	},
+};
+
+export default connectScrollShadow;

package/src/core/directives/sticky.mdx

@@ -0,0 +1,29 @@
+# v-top-sticky
+
+К sticky-элементу добляется класс-модификатор переданный как значение диррективы либо **'top-sticky'** по умолчанию.
+
+**Только для элемента "приклеенного" к bottom**
+
+Класс добавляется когда элемент не виден полностью, поэтому у элемента должно быть следующие свойства **position: sticky; bottom: -1px;**
+
+## Модификаторы
+
+- **bottom**: когда область видимости будет ниже элемента, дополнительный класс удалится
+
+## Пример использования
+
+```html
+
+<div class="footer" v-top-sticky.bottom="footer-sticky"></div>
+```
+
+```css
+.footer {
+	position: sticky;
+	bottom: -1px;
+}
+
+.footer-sticky {
+	box-shadow: var(--top-shadow);
+}
+```

package/src/core/directives/sticky.ts

@@ -0,0 +1,32 @@
+import type { DirectiveBinding, ObjectDirective, VNode } from 'vue';
+
+let appStickyObserver: IntersectionObserver;
+
+/**
+ * Добавление sticky
+ * К элементу добляется класс переданный как значение диррективы либо **'top-sticky'** по умолчанию
+ */
+const sticky = {
+	mounted(el: HTMLElement, binding: DirectiveBinding, _vnode: VNode) {
+		const className = binding.value || 'top-sticky';
+
+		appStickyObserver = new IntersectionObserver(entries => {
+			let condition = entries[0].intersectionRatio < 1;
+			if (condition) {
+				if (binding.modifiers.bottom && entries[0].intersectionRect.y === 0) condition = false;
+			}
+
+			el.classList.toggle(className, condition);
+		}, {
+			threshold: [1],
+		});
+
+		appStickyObserver.observe(el);
+	},
+
+	unmounted(_el: HTMLElement, _binding: DirectiveBinding, _vnode: VNode) {
+		appStickyObserver?.disconnect();
+	},
+};
+
+export default sticky;

package/src/core/directives/swimUp.mdx

@@ -0,0 +1,27 @@
+# v-top-swim-up
+
+Добавление анимации подплытия вверх для блока.
+
+Изначально блок смещается вниз, при скроле он поднимается и занимает своё естественное положение.
+
+Для смартфонов подплытие отключается.
+
+## Значение
+
+Директива в качестве значения принимает объект с двумя свойствами:
+
+- **distance**: количество px на которые блок изначально смещен вниз, по умолчанию 100
+- **percent**: процент высоты экрана поднявшись на который блок закончит подплытие, по умолчанию 30
+
+## Пример использования
+
+```html
+
+<div v-top-swim-up></div>
+
+<!-- Изменить только distance -->
+<div v-top-swim-up="{ distance: 150 }"></div>
+
+<!-- Изменить distance и percent -->
+<div v-top-swim-up="{ distance: 140, percent: 40 }"></div>
+```

package/src/core/directives/swimUp.ts

@@ -0,0 +1,95 @@
+import type { DirectiveBinding, ObjectDirective, VNode } from 'vue';
+import Core from '@/core/core/core';
+
+interface HTMLElementWithSwimUpOptions extends HTMLElement {
+	directiveSwipUpOptions: {
+		distance: number,
+		percent: number,
+	};
+}
+
+let appSwimUpInited = false;
+let appSwimUpObserver: IntersectionObserver;
+const appSwimUpEls = new Map();
+
+/**
+ * Отодвинуть блок в зависимости от скролла старинцы
+ * @param el
+ * @param windowHeight
+ */
+const swimUpElTransform = (el: HTMLElementWithSwimUpOptions, windowHeight: number): void => {
+	const { distance, percent } = el.directiveSwipUpOptions;
+
+	const elTop = el.getBoundingClientRect().top;
+
+	// во столько раз triggerHeight должен быть меньше, чтобы закончить подплытие к нужной высоте экрана
+	const triggerHeightReducer = windowHeight * percent / 100 / distance;
+	const triggerHeight = (windowHeight - elTop) / triggerHeightReducer;
+
+	if (triggerHeight <= distance) {
+		el.style.transform = `translateY(${distance - triggerHeight}px)`;
+	} else {
+		el.style.transform = 'translateY(0px)';
+	}
+};
+
+const swimUpInit = (_el: HTMLElementWithSwimUpOptions): void => {
+	let windowHeight = window.innerHeight;
+
+	window.addEventListener('scroll', () => {
+		appSwimUpEls.forEach((el) => swimUpElTransform(el, windowHeight));
+	}, { passive: true });
+
+	// проверка того, что элемент в зоне видимости
+	appSwimUpObserver = new IntersectionObserver(entries => {
+		windowHeight = window.innerHeight;
+
+		entries.forEach((entry) => {
+			const el = entry.target as HTMLElementWithSwimUpOptions;
+
+			if (entry.intersectionRatio < 0.1) {
+				// элемент за областью видимости
+				appSwimUpEls.delete(el);
+			} else {
+				// элемент на экране
+				appSwimUpEls.set(el, el);
+			}
+
+			if (entry.intersectionRatio === 0) {
+				const { distance } = el.directiveSwipUpOptions;
+				el.style.transform = `translateY(${distance}px)`;
+			}
+		});
+	}, {
+		threshold: 0.1,
+	});
+};
+
+/**
+ * Добавление анимации подплытия вверх для блока
+ */
+const swimUp = {
+	mounted(el: HTMLElementWithSwimUpOptions, binding: DirectiveBinding, _vnode: VNode): void {
+		if (Core.state.isMobileUA) return;
+
+		el.directiveSwipUpOptions = {
+			distance: binding.value?.distance ?? 100, // количество px на которые блок изначально смещен вниз,
+			percent: binding.value?.percent ?? 30, // процент высоты экрана поднявшись на который блок закончит подплытие
+		};
+
+		if (!appSwimUpInited) {
+			swimUpInit(el);
+
+			appSwimUpInited = true;
+		}
+
+		appSwimUpObserver.observe(el);
+	},
+
+	unmounted(el: HTMLElementWithSwimUpOptions, _binding: DirectiveBinding, _vnode: VNode) {
+		appSwimUpEls.delete(el);
+		appSwimUpObserver?.unobserve(el);
+	},
+};
+
+export default swimUp;

package/src/core/directives/tooltip.mdx

@@ -0,0 +1,13 @@
+# v-top-tooltip
+
+Добавление всплывающей подсказки к элементу. Реализовано с помощью [jQuery tooltip](https://jqueryui.com/tooltip/)
+
+## Использование
+
+Текст подсказки берётся из атрибута **title**.
+
+## Пример использования
+
+```html
+<div title="tooltip text" v-top-tooltip>
+```

package/src/core/directives/tooltip.ts

@@ -0,0 +1,57 @@
+import type { DirectiveBinding, ObjectDirective, VNode } from 'vue';
+import Core from '@/core/core/core';
+
+const $ = (el: VNode) => {
+	if (!Core.$?.ui?.tooltip) {
+		console.info('Для работы v-top-tooltip требуется глобальная загрузка jQuery UI Tooltip');
+
+		return;
+	}
+
+	return Core.$(el);
+};
+
+const tvTooltipGenOptions = (binding: DirectiveBinding, vnode: VNode) => {
+	const options = binding.value ?? {};
+
+	options.content ??= vnode.props?.title;
+	options.content = String(options.content).replace(/\r\n|\r|\n/g, '<br>');
+
+	options.position ??= {
+		my: 'bottom-18px',
+		at: 'top center',
+	};
+
+	return options;
+};
+
+/**
+ * Добавление всплывающей подсказки к элементу.
+ */
+const tooltip = {
+	mounted(el: VNode, binding: DirectiveBinding, vnode: VNode) {
+		$(el)?.tooltip(tvTooltipGenOptions(binding, vnode));
+	},
+
+	updated(el: VNode, binding: DirectiveBinding, vnode: VNode, _prevVnode: VNode) {
+		/**
+		 * В результате обновления может быть открыто несколько тултипов поэтому изменить опции, без перерисовки тултипа
+		 */
+		const options = tvTooltipGenOptions(binding, vnode);
+		const instance = $(el)?.tooltip('instance') as { options: JQueryUI.TooltipOptions } | undefined;
+		if (!instance) {
+			return;
+		}
+
+		instance.options = {
+			...instance.options,
+			...options,
+		};
+	},
+
+	unmounted(el: VNode, _binding: DirectiveBinding, _vnode: VNode) {
+		$(el)?.tooltip('destroy');
+	},
+};
+
+export default tooltip;

package/src/core/icons/gallery.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import * as icomoon from '@/storybook/components/icomoon';
+
+const clipboardCopy = (string: string) => navigator.clipboard.writeText(string);
+
+const searchString = ref('');
+
+const icons = computed(() => icomoon.genIconByLetter(searchString.value));
+</script>
+
+<template>
+	<div class="icomoon">
+		<p>Поиск проивзоидтся по символу, названию и тегам.</p>
+
+		<p>Кликните на иконку, чтобы скопировать ее символ.</p>
+
+		<input
+			placeholder="Поиск"
+			@input="(e: any) => searchString = e.target.value"
+		>
+
+		<br><br>
+
+		<div class="icomoon_list">
+			<div
+				v-for="(icon, letter) in icons"
+				class="icomoon_item"
+			>
+				<span
+					class="icomoon_icon"
+					:data-top-icon="letter"
+					@click="clipboardCopy(icon.letter)"
+				></span>
+
+				{{ icon.name }}
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.icomoon {}
+
+.icomoon_list {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 20px;
+}
+
+.icomoon_item {
+	width: 20%;
+	display: flex;
+	gap: 4px;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.icomoon_icon {
+	cursor: pointer;
+	border-radius: 8px;
+	border: 1px solid var(--color-line-1-opacity);
+	width: 32px;
+	height: 32px;
+	box-shadow: var(--top-shadow-s);
+	display: flex;
+	align-items: center;
+}
+</style>../../storybook/components/icomoon

package/src/core/icons/icons.mdx

@@ -0,0 +1,24 @@
+import { Story } from '@storybook/blocks';
+
+# Набор иконок
+
+Шрифт иконок настраивается через сервис [icomoon](https://icomoon.io/) и сохранятся в папку **public/icomoon**.
+
+Текущий конфиг icomoon: <a href="/icomoon/selection.json" target="_blank">selection.json</a>.
+
+После предкомпиляции он будет доступен в корне проекта в папке: **icomoon**.
+
+Имя шрифта: **Topvisor-2**.
+
+@topvisor/ui определяет стили для реализации вывода иконок в верстке через атрибуты **data-top-icon** и **data-top-icon2**.
+
+## Варианты использования
+
+Использование через атрибут, обычный html:
+
+```html
+
+<div data-top-icon=""/>
+<div data-top-icon2=""/>
+<div data-top-icon="" data-top-icon2=""/>
+```

package/src/core/icons/icons.stories.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Component from './gallery.vue';
+
+const meta = {
+	title: '',
+	component: Component,
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default = {} satisfies Story;
+
+export default meta;