@topvisor/ui 1.2.0 → 1.3.1-dev.2

package/src/core/directives/scrollIntoView.mdx

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

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

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

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

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

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

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

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

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

package/src/core/directives/tooltip.ts

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

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

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

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