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

package/src/core/plugins/core.ts

@@ -0,0 +1,131 @@
+import { defineAsyncComponent, type Plugin } from 'vue';
+import type { PartialBy } from '@/components/types';
+
+import Core from '@/core/core/core';
+import coreDefaultOptions from '@/core/core/options';
+
+import * as Forms from '../../components/forms/forms';
+
+const TopNotice = defineAsyncComponent(() => import('@/components/core/notice/notice.vue'));
+
+import type { Options as TopPopupOptions } from '@/components/popup/lib/worker';
+import TopPopupWorker from '@/components/popup/lib/worker';
+import TopPopupWorkerGlobalEvents from '@/components/popup/lib/worker.globalEvents';
+
+import TopDialogs from '@/components/dialog/dialog/dialogs/dialogs.vue';
+import { TopDialogWorker } from '@/components/dialog/lib/worker';
+import type { TopDialogOptions } from '@/components/dialog/lib/types';
+
+import directiveData from '@/core/directives/data';
+import directiveFocus from '@/core/directives/focus';
+import directiveScrollIntoView from '@/core/directives/scrollIntoView';
+import directiveScrollShadow from '@/core/directives/scrollShadow';
+import directiveSticky from '@/core/directives/sticky';
+import directiveSwimUp from '@/core/directives/swimUp';
+import directiveTooltip from '@/core/directives/tooltip';
+
+declare global {
+	const vd: typeof console.log;
+}
+
+window['vd'] = console.log;
+
+declare module 'vue' {
+	export interface ComponentCustomProperties {
+		/**
+		 * Статический класс с текущим состоянимем UI
+		 */
+		$core: typeof Core;
+
+		$vd: typeof console.log;
+	}
+
+	/**
+	 * Обязательные компоненты UI
+	 *
+	 * Они подключаются через плагин и доступны без явного указания импорта
+	 */
+	export interface GlobalComponents {
+		TopAvatar: typeof Forms.TopAvatar;
+		TopButton: typeof Forms.TopButton;
+		TopCheckbox: typeof Forms.TopCheckbox;
+		TopControlLabel: typeof Forms.TopControlLabel;
+		TopHint: typeof Forms.TopHint;
+		TopInput: typeof Forms.TopInput;
+		TopInputDate: typeof Forms.TopInputDate;
+		TopInputRange: typeof Forms.TopInputRange;
+		TopRadio: typeof Forms.TopRadio;
+		TopSwitcher: typeof Forms.TopSwitcher;
+		TopTextarea: typeof Forms.TopTextarea;
+		TopSelect: typeof Forms.TopSelect;
+		TopLoadbar: typeof Forms.TopLoadbar;
+
+		TopNotice: typeof TopNotice;
+		TopDialogs: typeof TopDialogs;
+	}
+}
+
+type CoreOptions = PartialBy<typeof coreDefaultOptions, 'gmt' | 'documentClassModificators'>;
+
+type Options = CoreOptions & {
+	topPopupOptions?: TopPopupOptions
+	topDialogOptions?: TopDialogOptions
+};
+
+/**
+ * Плагин для интеграции UI во Vue приложение
+ *
+ * - В глобальную область видимости шаблонов будет добавлен объект $core
+ * - Будут зарегистрирвоаны директивы UI: https://ui.topvisor.com/?path=/docs/core-directives-focus--docs
+ * - Будут подключены базовые компоненты UI/Forms: https://ui.topvisor.com/?path=/docs/components-forms-readme--docs
+ */
+export default {
+
+	install: (app, options: Options) => {
+		app.config.globalProperties.$core = Core;
+		app.config.globalProperties.$vd = console.log;
+
+		// начальные настройки UI
+		for (const name in options) {
+			Core.state[name] = options[name];
+		}
+
+		if (options.widthForMobile) Core.widthForMobile = options.widthForMobile;
+		if (options.themeName) Core.themeName = options.themeName;
+
+		Core._setState();
+
+		if (options.topPopupOptions) TopPopupWorker.options = options.topPopupOptions;
+		TopPopupWorkerGlobalEvents.init();
+
+		TopDialogWorker.init(options.topDialogOptions);
+
+		// определение директив
+		app.directive('top-data', directiveData);
+		app.directive('top-focus', directiveFocus);
+		app.directive('top-scroll-into-view', directiveScrollIntoView);
+		app.directive('top-scroll-shadow', directiveScrollShadow);
+		app.directive('top-sticky', directiveSticky);
+		app.directive('top-swim-up', directiveSwimUp);
+		app.directive('top-tooltip', directiveTooltip);
+
+		// определение базовых компонентов
+		app.component('TopAvatar', Forms.TopAvatar);
+		app.component('TopButton', Forms.TopButton);
+		app.component('TopCheckbox', Forms.TopCheckbox);
+		app.component('TopControlLabel', Forms.TopControlLabel);
+		app.component('TopHint', Forms.TopHint);
+		app.component('TopInput', Forms.TopInput);
+		app.component('TopInputDate', Forms.TopInputDate);
+		app.component('TopInputRange', Forms.TopInputRange);
+		app.component('TopLoadbar', Forms.TopLoadbar);
+		app.component('TopRadio', Forms.TopRadio);
+		app.component('TopSelect', Forms.TopSelect);
+		app.component('TopSwitcher', Forms.TopSwitcher);
+		app.component('TopTextarea', Forms.TopTextarea);
+
+		app.component('TopNotice', TopNotice);
+		app.component('TopDialogs', TopDialogs);
+	},
+
+} satisfies Plugin<Options>;

package/src/core/plugins/i18n.ts

@@ -0,0 +1,184 @@
+import type { ComponentCustomProperties, ObjectPlugin, Reactive, Ref } from 'vue';
+import { getCurrentInstance, inject, reactive, ref } from 'vue';
+import type { components as I18nComponents } from 'topvisor-openapi/src/ts/I18n';
+
+export type Lang = 'ru' | 'en';
+
+type Options = {
+	/**
+	 * Предзагруженные словари
+	 *
+	 * Для загрузки нужного словаря используйте @r/i18n.esm.js
+	 *
+	 * ```js
+	 * import '@r/i18n.esm.js?Projects';
+	 * ```
+	 */
+	i18n: I18nComponents['schemas'];
+
+	/**
+	 * Текущий язык
+	 */
+	lang: Lang;
+};
+
+/**
+ * Загруженные словари
+ *
+ * Для загрузки нужного словаря используйте @r/i18n.esm.js
+ *
+ * ```js
+ * import '@r/i18n.esm.js?Projects';
+ * ```
+ */
+type I18n = Reactive<Options['i18n']>;
+
+type i18nRender = <T extends keyof I18n>(categoryName: T, key: keyof I18n[T], props: Record<string, number | string>) => string;
+
+// type i18nSetLang = (lang: Lang, forceReload?: boolean) => void;
+
+declare module 'vue' {
+	export interface ComponentCustomProperties {
+		/**
+		 * Загруженные словари
+		 *
+		 * Можно использовать как функцию для подстановки значений в формате: `Текст {{ propName }}`
+		 *
+		 * @see I18n
+		 * @see i18nRender
+		 */
+		$i18n: I18n & i18nRender;
+
+		/**
+		 * Текущий язык
+		 */
+		$i18nLang: Ref<Lang>;
+
+		// /**
+		//  * Установить язык
+		//  */
+		// $i18nSetLang: i18nSetLang;
+	}
+}
+
+/**
+ * Плагин работает в сваязке с плагином requirejs('i18n')
+ *
+ * При инициализации необходимо указать в $i18n объект с предзагруежнными словарями, остальные словари можно импортировать диномически вместе с
+ * компонентами
+ *
+ * Внутри UI дозагрузка словарей недоступна и требует предзагрузки необходимых словарей
+ *
+ * Добавляет глобальные свойства:
+ * - \$i18n
+ * - \$i18nLang
+ * - \$i18nL
+ *
+ * Для загрузки необходимого словаря указывайте его в зависимостях компонента:
+ *
+ * ```js
+ * import '@r/i18n.esm.js?Projects';
+ * ```
+ *
+ * В setup():
+ *
+ * ```js
+ * useI18n().Projects.Site; // выполнит inject('$i18n').Projects.Site, не испоьзуйте inject('$i18n') напрямую, так как он не типизирован
+ * ```
+ *
+ * В template:
+ *
+ * ```html
+ * {{ $i18n.Projects.Site }}
+ * ```
+ *
+ * С подстановкой значений:
+ * ```html
+ * 	{{ $i18n('Projects', 'Site', {name: value}) }}
+ * 	```
+ */
+export default {
+
+	install: (app, options) => {
+		const i18Render: i18nRender = (categoryName, key, props) => {
+			if (!app.config.globalProperties.$i18n[categoryName][key]) return '';
+
+			// используется для быстрой работы словаря, вне словаря используйте `compile` в `@vue/compiler-dom`
+			return Object.entries(props).reduce((result, [name, value]) => {
+				return result.replaceAll(new RegExp(`{{ ${name} }}`, 'g'), value);
+			}, app.config.globalProperties.$i18n[categoryName][key]);
+		};
+		Object.setPrototypeOf(i18Render, reactive(options.i18n));
+
+		app.config.globalProperties.$i18n = i18Render;
+
+		app.config.globalProperties.$i18nLang = ref(options.lang);
+		// app.config.globalProperties.$i18nSetLang = () => {};
+
+		/**
+		 * @deprecated
+		 */
+		app.config.globalProperties.i18n = app.config.globalProperties.$i18n;
+
+		// // это решение не работает, так как подмена значений в объекте не установит связь со словорем другого языка
+		// // только в браузере (не ssr)
+		// if (typeof window !== 'undefined' && window['requirejs']) {
+		// 	app.config.globalProperties.$i18nSetLang = async (lang, forceReload) => {
+		// 		await window['requirejs']('i18n').setLang(lang, forceReload);
+		//
+		// 		const categoriesActual = window['requirejs']('i18n').categories[lang];
+		// 		Object.keys(categoriesActual).forEach(categoryName => {
+		// 			app.config.globalProperties.$i18n[categoryName] = categoriesActual[categoryName];
+		// 		});
+		//
+		// 		app.config.globalProperties.$i18nLang.value = lang;
+		// 	};
+		// }
+
+		// так как плагина requirejs i18n нет в ui
+		if (typeof window !== 'undefined' && !window['requirejs']) {
+			globalThis.$i18n = app.config.globalProperties.$i18n;
+		}
+
+		app.provide('$i18n', app.config.globalProperties.$i18n);
+		app.provide('$i18nLang', app.config.globalProperties.$i18nLang);
+		// app.provide('$i18nSetLang', app.config.globalProperties.$i18nSetLang);
+
+		/**
+		 * @deprecated
+		 */
+		app.provide('i18n', app.config.globalProperties.i18n);
+	},
+
+} satisfies ObjectPlugin<Options>;
+
+/**
+ * Получить доступ к загруженным словарям
+ *
+ * @see I18n
+ */
+export const useI18n = (): ComponentCustomProperties['$i18n'] => {
+	// @ts-ignore - requirejs i18n нет в ui
+	if (!getCurrentInstance() && window['mo']?.user?.lang) return requirejs('i18n').categories[mo.user.lang];
+
+	if (!getCurrentInstance() && globalThis.$i18n) return globalThis.$i18n;
+
+	return inject('$i18n') as ComponentCustomProperties['$i18n'];
+};
+
+/**
+ * Текущий язык
+ */
+export const useI18nLang = (): Ref<Lang> => {
+	// @ts-ignore - no vue
+	if (!getCurrentInstance() && window['mo']?.user?.lang) return ref(mo.user.lang);
+
+	return inject('$i18nLang') as Ref<Lang>;
+};
+
+// /**
+//  * Получить функцию для установки языка
+//  */
+// export const useI18nSetLang = () => {
+// 	return inject('$i18nSetLang') as i18nSetLang;
+// };