@topvisor/ui 0.0.34 → 0.0.35

package/src/core/directives/tooltip.ts

@@ -0,0 +1,55 @@
+import type { DirectiveBinding, ObjectDirective, VNode } from 'vue';
+
+const _window: any = window;
+
+const $ = (el: VNode) => {
+	if (!_window?.jQuery?.ui?.tooltip) {
+		console.info('Для работы v-top-tooltip требуется глобальная загрузка jQuery UI Tooltip');
+
+		return;
+	}
+
+	return _window.jQuery(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');
+		if (!instance) {
+			return;
+		}
+
+		instance.options = {
+			...instance.options,
+			...options,
+		};
+	},
+
+	unmounted(el: VNode, binding: DirectiveBinding, vnode: VNode) {
+		$(el)?.tooltip('destroy');
+	},
+} satisfies ObjectDirective;
+
+export default tooltip;

package/src/core/theme/Colors.stories.ts

@@ -0,0 +1,15 @@
+import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/vue3';
+import { getCurrentCSS } from '@/../.storybook/TopTheme';
+import Component from '@/storybook/components/colors.vue';
+
+const meta = {
+	component: Component,
+} satisfies Meta<typeof Component>;
+
+export const Colors = {
+	args: {
+		style: getCurrentCSS()
+	}
+} satisfies StoryObj<typeof meta>;
+
+export default meta;

package/src/core/theme/Properties.stories.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { getCurrentCSS } from '@/../.storybook/TopTheme';
+import Component from '@/storybook/components/properties.vue';
+
+const meta = {
+	component: Component,
+} satisfies Meta<typeof Component>;
+
+export const Properties = {
+	args: {
+		style: getCurrentCSS()
+	}
+} satisfies StoryObj<typeof meta>;
+
+export default meta;

package/src/core/theme/theme.mdx

@@ -0,0 +1,15 @@
+import { Canvas } from '@storybook/blocks';
+
+# Темы
+
+Каждая тема представляет из себя набор переменных. Может включать в себя переменные для настройки любых стилей.
+
+Все темы должны реализовывать одинаковый набор переменных.
+
+Переменные темы после сборки доступны в файле темы в:
+- после сборки:
+    - **light.css**
+    - **dark.css**
+- до сборки:
+    - **src/resources/styles/themes/light/*.css**
+    - **src/resources/styles/themes/dark/*.css**

package/src/core/utils/date.ts

@@ -0,0 +1,164 @@
+import Core from '@/core/core/core';
+
+class UtilsDate {
+
+	/**
+	 * Получить объект Date из строки
+	 * @param date - строка с датой
+	 */
+	static stringToDate(date: string) {
+		if (date.indexOf('T') === -1) {
+			if (date.length == 10) {
+				date += ' 00:00:00';
+			}
+
+			date = date.replace(' ', 'T') + Core.state.gmt;
+		}
+
+		return new Date(date);
+	}
+
+	// Перевод миллисекунд (UTC) в дату-строку (время локальное)
+
+	/**
+	 * Перевод миллисекунд (UTC) в дату-строку (время локальное)
+	 * @param {?number} ms
+	 * @param {?boolean} useFormat
+	 */
+	static ms2Date(ms: number, useFormat: boolean = true): string {
+		let date;
+		if (ms != undefined) {
+			date = new Date(ms);
+		} else {
+			date = new Date();
+		}
+
+		const d = date.getDate().toString().padStart(2, '0');
+		const m = String(date.getMonth() + 1).padStart(2, '0');
+		const Y = date.getFullYear();
+		const H = date.getHours().toString().padStart(2, '0');
+		const i = date.getMinutes().toString().padStart(2, '0');
+		const s = date.getSeconds().toString().padStart(2, '0');
+
+		date = Y + '-' + m + '-' + d + ' ' + H + ':' + i + ':' + s;
+
+		if (useFormat) {
+			date = this.dateFormat(date);
+		}
+
+		return date;
+	}
+
+	/**
+	 * Перевод даты в формат пользователя
+	 * @param {string} date
+	 * @param {0|1|2|3} time - 0: только дата, 1: дата и часы, 2: дата и часы с минутами, 3: дата и часы с минутами и секундами
+	 */
+	static dateFormat(date: string, time: 0 | 1 | 2 | 3 = 2, emptyValue: string = Core.L.Not_date): string {
+		if (!date || date.substring(0, 10) === '0000-00-00') {
+			if (emptyValue && emptyValue !== '0000-00-00') {
+				return emptyValue;
+			}
+		}
+
+		const dateFormat = Core.state.dateFormat.toLowerCase();
+
+		let dateForObj = date.substring(0, 10);
+
+		if (dateForObj.length === 7) {
+			dateForObj += '-01';
+		}
+
+		dateForObj += ' 00:00';
+
+		// safari fix
+		dateForObj = dateForObj.replace(/-/g, '/');
+
+		const dateObject = new Date(dateForObj);
+		if (isNaN(Number(dateObject))) {
+			return emptyValue;
+		}
+
+		let result = dateFormat.
+			replace('y', String(dateObject.getFullYear()).padStart(2, '0')).
+			replace('m', String(dateObject.getMonth() + 1).padStart(2, '0')).
+			replace('d', String(dateObject.getDate()).padStart(2, '0'));
+
+		if (date.length > 10) {
+			switch (time) {
+				// часы
+				case 1:
+					result += ' ' + date.substring(11, 13);
+
+					break;
+
+				// часы и минуты
+				case 2:
+					result += ' ' + date.substring(11, 16);
+
+					break;
+
+				// часы, минуты и секунды
+				case 3:
+					result += ' ' + date.substring(11, 19);
+
+					break;
+			}
+		}
+
+		return result;
+	}
+
+	/**
+	 * Перевод даты из формата пользователя в системный формат
+	 * @param {string} date
+	 */
+	static dateUnformat(date: string, emptyValue: string = Core.L.Not_date): string {
+		if (!date) {
+			return emptyValue;
+		}
+
+		if (date.match(/\d\d\d\d-\d\d-\d\d/)) {
+			return date;
+		}
+
+		const dateFormat = Core.state.dateFormat.toLowerCase();
+
+		const dateChunks = date.split(/\W/);
+		const dateFormatChunks = dateFormat.split(/\W/);
+
+		let d = '';
+		let m = '';
+		let y = '';
+
+		dateFormatChunks.forEach((type, index) => {
+			switch (type) {
+				case 'd':
+					d = dateChunks[index];
+
+					break;
+				case 'm':
+					m = dateChunks[index];
+
+					break;
+				case 'y':
+					y = dateChunks[index];
+
+					break;
+			}
+		});
+
+		let result = y + '-' + m + '-' + d;
+
+		if (!result.match(/\d\d\d\d-\d\d-\d\d/)) {
+			console.info('Неверный формат даты, будет возращена текущая дата, ' + result);
+
+			result = this.ms2Date((new Date()).getTime(), false).substring(0, 10);
+		}
+
+		return result;
+	}
+
+}
+
+export default UtilsDate;

package/src/core/utils/device.ts

@@ -0,0 +1,48 @@
+class Device {
+
+	static isRetina () {
+		return ('devicePixelRatio' in window && window.devicePixelRatio > 1);
+	}
+
+	// определить, является ли устройство мобильным
+	static isMobile (): boolean {
+		return !!navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|IEMobile|Opera Mini/i);
+	}
+
+	// определить, открыт ли сайт в приложении
+	static isApp () {
+		return (navigator.userAgent.indexOf('Topvisor_App') != -1);
+	}
+
+	// определить, является ли OS пользователя macOS
+	static isMacOS () {
+		return navigator.userAgent.indexOf('Mac OS X') !== -1;
+	}
+
+	// определить, является ли текущий браузер пользователя Safari
+	static isSafari () {
+		const isChrome = /Chrome|Android/.test(navigator.userAgent);
+
+		let isSafari = /Safari/.test(navigator.userAgent);
+		if (isChrome && isSafari) {
+			isSafari = false;
+		}
+
+		return isSafari;
+	};
+
+	/**
+	 * Вернуть текст для обозначения клавиши Ctrl / Command в зависимости от OS
+	 * @returns {'Ctrl'|'⌘'}
+	 */
+	static getCommandKeyLabel (): 'Ctrl' | '⌘' {
+		if (this.isMacOS()) {
+			return '⌘';
+		} else {
+			return 'Ctrl';
+		}
+	}
+
+}
+
+export default Device;

package/src/core/utils/dom.ts

@@ -0,0 +1,185 @@
+/**
+ * Функции для работы с работы с Document Object Model (DOM)
+ */
+
+/**
+ * Создать элемент
+ * @param {string} tagName
+ * @param {any} attrs - атрибуты
+ * @param {Element[]} elsChildrens
+ * @returns {Element} - созданный элемент
+ */
+function genEl (tagName: string, attrs: any, ...elsChildrens: Element[]): Element {
+	const el: any = document.createElement(tagName);
+
+	for (const name in attrs) {
+		if (name.indexOf('on') === 0) {
+			// events
+			el[name] = attrs[name];
+		} else {
+			el.setAttribute(name, attrs[name]);
+		}
+	}
+
+	elsChildrens.forEach((elChildren) => {
+		if (typeof (elChildren) === 'string') {
+			el.insertAdjacentHTML('beforeend', elChildren);
+		} else {
+			el.append(elChildren);
+		}
+	});
+
+	return el;
+}
+
+/**
+ * Проверить видимость элемента
+ * @param {?Element} el
+ * @returns boolean - вернет true, если элемент считается видимым
+ */
+function isVisible (el?: Element) {
+	if (!el) {
+		return false;
+	}
+
+	const boundingClientRect = el.getBoundingClientRect();
+	return !!(boundingClientRect.width || boundingClientRect.height);
+}
+
+/**
+ * Получить координаты элемента относительно документа
+ * @param {Element} el
+ * @returns {{top: number, left: number}} - координаты элемента относительно документа
+ */
+function offset (el: Element): { top: number, left: number } {
+	const boundingClientRect = el.getBoundingClientRect();
+
+	return {
+		top: boundingClientRect.top + window.scrollY,
+		left: boundingClientRect.left + window.scrollX,
+	};
+}
+
+/**
+ * Получить значение css свойства элемента
+ * @param {Element} el
+ * @param {string} property - имя свойства
+ * @return {string} - значение css стиля
+ */
+function css (el: Element, property: string): string {
+	return window.getComputedStyle(el).getPropertyValue(property);
+}
+
+/**
+ * Обернуть элемент и вернуть только что созданный элемент
+ * @param {Element} el - элемент, который требуется обернуть
+ * @param {string} tagName - имя тега элемента, в который треубется обернуть элемент
+ * @returns {Element}
+ */
+function wrap (el: Element, tagName: string): Element {
+	const elWrapper = document.createElement(tagName);
+	el.after(elWrapper);
+
+	elWrapper.append(el);
+
+	return elWrapper;
+}
+
+/**
+ * Найти и вернуть первый видимый элемент
+ * @param {?Document|Element} el - корневой элемент поиска
+ * @param selectors - см. параметр selectors в Document.querySelectorAll()
+ * @returns {Element|null}
+ */
+function querySelectorVisible (el: Element, selectors: string): Element | null {
+	return querySelectorAllArray(el, selectors).find(isVisible) || null;
+}
+
+/**
+ * Найти и вернуть последний видимый элемент
+ * @param {?Document|Element} el - корневой элемент поиска
+ * @param selectors - см. параметр selectors в Document.querySelectorAll()
+ * @returns {Element|null}
+ */
+function querySelectorVisibleLast (el: Element, selectors: string): Element | null {
+	return querySelectorAllArray(el, selectors).findLast(isVisible) || null;
+}
+
+/**
+ * Найти видимые элементы
+ * @param {?Document|Element} el - корневой элемент поиска
+ * @param selectors - см. параметр selectors в Document.querySelectorAll()
+ * @returns {Element[]} - обратите внимание, возвращается не NodeList[], а Element[]
+ */
+function querySelectorAllVisible (el: Element, selectors: string): Element[] {
+	return querySelectorAllArray(el, selectors).filter(isVisible);
+}
+
+/**
+ * Найти элементы и вернуть в виде массива
+ * @param {?Document|Element} el - корневой элемент поиска
+ * @param selectors - см. параметр selectors в Document.querySelectorAll()
+ * @returns {Element[]}
+ */
+function querySelectorAllArray (el: Element, selectors: string): Element[] {
+	if (!el) {
+		return [];
+	}
+
+	return [...el.querySelectorAll(selectors)];
+}
+
+/**
+ * Хранилище данных элемента
+ * @param {Element} el
+ * @param {string} contextName - контекст, обычно используется имя компонента
+ * @param {?object | null} contextData - установить объект с данными, предыдущие данные будут заменены, установите null для удаления данных
+ * @returns {?object} - вернет объект контекста или undefined, если данные контекста не найдены
+ */
+function storage (
+	el?: Element & { topData?: any },
+	contextName: string = 'common', contextData: object | null | undefined = undefined,
+): object | undefined {
+	if (!el) {
+		return;
+	}
+
+	if (!el.topData) {
+		el.topData = {};
+	}
+
+	if (contextData) {
+		el.topData[contextName] = contextData;
+	}
+
+	if (contextData === null) {
+		delete el.topData[contextName];
+	}
+
+	return el.topData[contextName];
+}
+
+/**
+ * Очистить хранилище элемента
+ */
+function storageClear (el?: Element & { topData?: any }) {
+	if (!el) {
+		return;
+	}
+
+	delete el.topData;
+}
+
+export default {
+	genEl,
+	isVisible,
+	offset,
+	css,
+	wrap,
+	querySelectorVisible,
+	querySelectorVisibleLast,
+	querySelectorAllVisible,
+	querySelectorAllArray,
+	storage,
+	storageClear,
+};

package/src/core//320/235/320/260/320/261/320/276/321/200 /320/270/320/272/320/276/320/275/320/276/320/272/gallery.vue"

@@ -0,0 +1,72 @@
+<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));
+
+// TODO: использовать компонент Input
+</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//320/235/320/260/320/261/320/276/321/200 /320/270/320/272/320/276/320/275/320/276/320/272//320/235/320/260/320/261/320/276/321/200 /320/270/320/272/320/276/320/275/320/276/320/272.mdx"

@@ -0,0 +1,31 @@
+import { Story } from '@storybook/blocks';
+
+# Набор иконок
+
+Шрифт иконок настраивается через сервис [icomoon](https://icomoon.io/) и сохранятся в папку **public/icomoon**.
+
+Текущий конфиг icomoon: <a href="/src/resources/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="" />
+```
+
+Использование через компонент [Icon](/story/components-common-icon--icon):
+
+```html
+<icon :icon="" />
+<icon :icon2="" />
+<icon :icon="" :icon2="" />
+```

package/src/core//320/235/320/260/320/261/320/276/321/200 /320/270/320/272/320/276/320/275/320/276/320/272//320/235/320/260/320/261/320/276/321/200 /320/270/320/272/320/276/320/275/320/276/320/272.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;

package/src/docs/CSS/FAQ.mdx

@@ -0,0 +1,43 @@
+# FAQ
+
+**Почему используется camelCase?**
+
+> Для возможности использования одинарных разделителей, код становится чище
+
+> Чтобы имя блока сответствовало имени компонента
+
+**Почему в css модулях не добавляется хеш?**
+
+> В UI-kit принято использовать понятные и чистые имена классов
+
+> Упрощается процесс поиска нужного компонента или его элемента
+
+**Зачем нужно следовать правилам БЭМ, если есть правила сборки css модуля?**
+
+> Чтобы было можно быстро разобраться, к какому компоненту приналежит тот или иной класс
+
+> Чтобы код следовал единому стилю
+
+**Зачем нужен css модуль, если есть БЭМ?**
+
+> В правила преобразовавний классов можно вынести рутинные действия, например добавление префикса, характеризующего namespace / workspace
+
+> IDE поддерижвает автозаполнения классов модулей и навигацию по ним
+
+> Позволяет использовать дополнительные плагины для добавления полезного функционала
+
+**SSR с отдельной сборкой решает проблему размера сборки, зачем нужные ленивые компоненты?**
+
+> SPA приложение предполагает смену страниц без перезагрузки, поэтому отдельные сборки для каждой страницы будут приводить
+к дублям стилей при переходе между страницами. Так как страниц много, то возникнет ситуация, при которой кеш таких стилей будет мало полезен.
+
+> Такие сборки придется дополнительно настраивать и следить за выгрзкой дублей стилей между разными сборками разных страниц.
+
+> Автосборки SSR действительно удобны, однако если решить этот вопрос на этапе преоктировки UI, то таких проблем в SSR удастся избежать.
+
+**Как поменять какие компоненты и стили надо грузить при загрузке страницы, а какие в отложенном режиме?**
+
+> Сразу надо грузить те кмопоненты, которые должны быть отрисованы в момент загрузки текстовой страницы, например /forms/ и /content/.
+
+> Если потребуется мгновенная отрисовка компонента на какой-то странице, в самом вверху этой страницы можно указать прямую ссылку на css компонента.
+> Данный вопрос выходит за рамки UI-kit. Читайте: [CLS](https://web.dev/i18n/en/cls/).