@topvisor/ui 1.2.0 → 1.3.1-dev.2

package/src/components/tabsView/tabsView/types.d.ts

@@ -0,0 +1,98 @@
+import { Component } from 'vue';
+export interface Store {
+    /**
+     * Если true - меню будет скрыто в popup под кнопку, которая его открывает, на кнопке будет текст активного элемента меню
+     */
+    showMenuInPopup: Props['showMenuInPopup'];
+    /**
+     * Если true - меню будет отображено в свернутом режиме без текста у кнопок
+     */
+    isShort: boolean;
+    /**
+     * Имя активной вкладки
+     */
+    activeItemName: Props['modelValue'];
+    /**
+     * Vue компонент активной вкладки
+     */
+    component: Required<PropsMenuItem['component']>;
+    /**
+     * Если false - контент вкладки будет без отступов и скролла (по умолчанию true).
+     * Задается через PropsMenuItems.scrollable активного пункта меню.
+     */
+    scrollable?: PropsMenuItem['scrollable'];
+}
+export interface Props {
+    /**
+     * Имя активной вкладки
+     */
+    modelValue: string;
+    /**
+     * Указывает на то, что компоеннт Используется в основной области документа
+     *
+     * props - константа, после инициализации менять нельзя
+     *
+     * Если установлен в true - отображает меню в режиме sticky, для настройки можно использовать css переменную --top-tabsView-top
+     *
+     * Если установлен в true - добавляет документу глобальный модификатор .top-hasTabsViewPageMod через htmlClassModificators
+     */
+    pageMod?: boolean;
+    /**
+     * Если true - меню будет скрыто в popup под кнопку, которая его открывает
+     *
+     * Если не указано будет использоваться Core.state.isMobile
+     */
+    showMenuInPopup?: boolean;
+    /**
+     * Если true - меню в режиме без popup можно сворачивать
+     */
+    isShortable?: boolean;
+    /**
+     *  @see defineStore()
+     */
+    idState?: string;
+}
+export interface Emits {
+}
+export interface PropsMenu {
+    /**
+     * Если true - будет выведена кнопка сжатия меню
+     */
+    isShortable: Props['isShortable'];
+    /**
+     * Флаг загрузки компонента вкладки.
+     */
+    isLoading: boolean;
+}
+export interface PropsMenuItem {
+    /**
+     * Уникальное имя вкладки, указывать, только если кнопка должна менять выбранную вкладку
+     */
+    name?: Props['modelValue'];
+    /**
+     * Если указано, кнопка будет вставлена как ссылка
+     */
+    href?: string;
+    icon?: string;
+    disabled?: boolean;
+    /**
+     * Vue компонент вкладки
+     */
+    component?: Component;
+    /**
+     * Состояние скролла для вкладки
+     */
+    scrollable?: boolean;
+}
+export interface PropsMenuTitle {
+    isSubtitle?: boolean;
+}
+/**
+ * Для activeMenuItem
+ */
+export interface MenuItem {
+    title?: string;
+    icon?: PropsMenuItem['icon'];
+    component: Required<PropsMenuItem['component']>;
+    scrollable?: PropsMenuItem['scrollable'];
+}

package/src/components/tabsView/tabsView/utils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Проверка нахождения компонента в состояние загрузки
+ * @param component
+ */
+export declare const checkComponentIsLoading: (component: any) => boolean;
+/**
+ * Презагрузить компонент
+ *
+ * Некоторое время ожидает загрузку компонента, прежде чем завершит работу
+ */
+export declare const preResolveComponent: (component: any, condition: Function) => Promise<void>;

package/src/components/tabsView/tabsView.d.ts

@@ -0,0 +1,3 @@
+export { default as TopTabsView } from './tabsView/tabsView.vue';
+export { default as TopTabsViewMenuItem } from './tabsView/menuItem.vue';
+export { default as TopTabsViewMenuTitle } from './tabsView/menuTitle.vue';

package/src/core/app.d.ts

@@ -0,0 +1,8 @@
+import { default as Core } from './core/core';
+import { default as corePlugin } from './plugins/core';
+import { Lang, default as i18nPlugin, useI18n, useI18nLang } from './plugins/i18n';
+import { default as piniaTPAPlugin } from './plugins/piniaTPA';
+export { Core, useI18n, useI18nLang, corePlugin, i18nPlugin, piniaTPAPlugin, };
+export { useAsyncTopDialog, useTopDialog } from '../components/dialog/dialog/composables/utils';
+export { TopDialogWorker } from '../components/dialog/lib/worker';
+export type { Lang, };

package/src/core/core/core.d.ts

@@ -0,0 +1,113 @@
+import { default as preloaders } from './preloaders';
+import { Options as TopNoticeOptions } from '../../components/core/notice/utils';
+import { Style as TopNoticeStyle } from '../../components/core/notice/item/types';
+/**
+ * Статический класс с текущим состоянимем UI
+ *
+ * @docs https://ui.topvisor.com/?path=/docs/core-core--docs
+ */
+export default class Core {
+    static state: {
+        documentClassModificators: Map<string | number, string> & Omit<Map<string | number, string>, keyof Map<any, any>>;
+        dateFormat: string;
+        currency: "USD" | "RUB" | "EUR";
+        timezoneOffset: number;
+        isMobile: boolean;
+        isMobileUA: boolean;
+        isRetina: boolean;
+        isApp: boolean;
+        isLandscape: boolean;
+        isPortrait: boolean;
+        size: number;
+        isHidden: boolean;
+    };
+    static preloaders: typeof preloaders;
+    static widthForMobile: number;
+    static themeName: string;
+    static matchMediaIsMobile?: MediaQueryList;
+    static $?: JQueryStatic | undefined;
+    static Events: {
+        addOnReize: (listener: (this: HTMLElement, e: UIEvent & {
+            topEvent: {
+                widthDiff: number;
+                hightDiff: number;
+            };
+        }) => void) => void;
+        removeOnResize: (listener: (this: HTMLElement, e: UIEvent & {
+            topEvent: {
+                widthDiff: number;
+                hightDiff: number;
+            };
+        }) => void) => void;
+    };
+    /**
+     * Различные флаги, необходимые для работы UI
+     */
+    static flags: {
+        needLoadNotice: boolean;
+    };
+    static _setState(): void;
+    private static useDocumentClassModificators;
+    private static useIsHidden;
+    private static setStateByWindowSize;
+    private static onResize;
+    /**
+     * Сохранить информацию об устройстве в cookie
+     */
+    private static saveToCookie;
+    /**
+     * Добавить установку класса при нажатии ctrl (cmd) / alt
+     */
+    private static useCtrlClasses;
+    /**
+     * Вывести на экране сообщение в стилизации под push уведомление
+     *
+     * Для удобства работы со словарем, принимает один парамтер `text` и первую строку из него использует как `title`.
+     * Данное поведение можно изменить, передав в параметрах `options.title`
+     *
+     * Для вывода используется компонент TopNotice, требует его подклчючения
+     *
+     * @docs https://ui.topvisor.com/?path=/docs/components-core-notice--docs
+     */
+    static notice: (text: string, style: TopNoticeStyle, options?: TopNoticeOptions) => Promise<void>;
+    /**
+     * Вставить css стили на страницу по ссылке с автоматическим добавлением правил media
+     *
+     * Правила media:
+     * - Файлы *.m.css будут грузиться, только на экранах с шириной менее, чем Core.widthForMobile
+     * - Файлы *.pc.css будут грузиться, только на экранах с шириной более, чем Core.widthForMobile
+     *
+     * Настройкой Core.widthForMobile можно управлять через plugin: @topvisor/ui/plugin/core
+     *
+     * @param fileNames - список ссылок на css файлы
+     * @param useSync - использовать синхронную загрузку css, только для css с того же домена. В синхронном режиме стили предзагружаются независимо от
+     * media
+     */
+    static insertCSSLinkToPage: (fileNames: Array<string>, useSync?: boolean) => Promise<unknown[]>;
+    private static _insertToPage;
+    /**
+     * Вставить css стили на страницу с автоматическим добавлением правил media
+     *
+     * Загрузка с Vite:
+     *
+     * ```js
+     * import style from '/style.css?inline';
+     *
+     * insertToPageAsInine(style);
+     * ```
+     *
+     * Загрузка с fetch:
+     *
+     * ```js
+     * const style = await fetch('./style.css');
+     *
+     * insertToPageAsInine(style);
+     * ```
+     *
+     * @param style - css стили в строке
+     * @param type - если указать 'm' или 'pc', то стили будут применяться по условию в зависимости от настройки this.widthForMobile
+     *
+     * @see insertToPage
+     */
+    static insertStyleToPage: (style: string, type?: "" | "m" | "pc") => void;
+}

package/src/core/core/events/resize.d.ts

@@ -0,0 +1,16 @@
+type TopUIEvent = UIEvent & {
+    topEvent: {
+        widthDiff: number;
+        hightDiff: number;
+    };
+};
+/**
+ * Добавить обработчик на событие изменения размеров экрана
+ * вызов таких обработчиков будет опмизирован и объединен в одно событие
+ */
+export declare const addOnReize: (listener: (this: HTMLElement, e: TopUIEvent) => void) => void;
+/**
+ * Удаление обработчика на событие изменений размеров экрана
+ */
+export declare const removeOnResize: (listener: (this: HTMLElement, e: TopUIEvent) => void) => void;
+export {};

package/src/core/core/events.d.ts

@@ -0,0 +1,15 @@
+declare const _default: {
+    addOnReize: (listener: (this: HTMLElement, e: UIEvent & {
+        topEvent: {
+            widthDiff: number;
+            hightDiff: number;
+        };
+    }) => void) => void;
+    removeOnResize: (listener: (this: HTMLElement, e: UIEvent & {
+        topEvent: {
+            widthDiff: number;
+            hightDiff: number;
+        };
+    }) => void) => void;
+};
+export default _default;

package/src/core/core/options.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Конфигурация UI
+ *
+ * Начальные значений устанавливаются при подключении Core во Vue приложение через app.use(PluginCore, options)
+ */
+declare const _default: {
+    /**
+     * Имя темы оформления
+     *
+     * В данный момент не используется для загрузки css
+     *
+     * @todo Реализовать загрузки и замену css темы на стороне UI
+     *
+     * @see https://ui.topvisor.com/?path=/docs/core-theme--docs
+     */
+    themeName: "light" | "dark" | string;
+    /**
+     * CSS-классы модификаторы для документа страницы
+     *
+     * Могут использоваться компонентами для включения необходимых режимов отображения страницы
+     *
+     * Разные компоненты могут добавлять один и тот же класс, чтобы не было конфликтов каждый компонент управляет только своим классом:
+     * - Ключ - уникальное имя компонента, например в setup: `const uid = Math.random();`
+     * - Значение - класс модификатора
+     */
+    documentClassModificators: Map<string | number, string>;
+    /**
+     * Базовая ширина страницы для отображения ПК / Мобильной версии сайта
+     *
+     * @see Core state isMobile
+     */
+    widthForMobile: number;
+    /**
+     * Формат даты, который будет использоваться по умолчанию для вывода даты, как правило, зависит от текущего пользователя
+     */
+    dateFormat: string;
+    /**
+     * Валюта, которая будет использоваться по умолчанию, как правило, зависит от текущего пользователя
+     */
+    currency: "RUB" | "USD" | "EUR";
+    /**
+     * Смещение timezone относительно UTC в минутах
+     * Для Москвы: -180
+     */
+    timezoneOffset: number;
+};
+export default _default;

package/src/core/core/preloaders.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Набор функцией, реализующих загрузку модулей системы, которые рекомендуется загружать в отложенном режиме
+ *
+ * Функции выполняют загрузку в память полный код модулей и компонентов
+ */
+export default class {
+    /**
+     * Загрузить в память полный функционал TopNotice
+     */
+    static TopNotice(): Promise<void>;
+    /**
+     * Загрузить в память полный функционал TopPopup
+     */
+    static TopPopup(): Promise<void>;
+    /**
+     * Загрузить в память полный функционал TopDialog
+     */
+    static TopDialog(): Promise<void>;
+}

package/src/core/core/state.d.ts

@@ -0,0 +1,49 @@
+/**
+ * State UI для взаимодейсвтиями с приложениями Vue
+ */
+declare const state: {
+    /**
+     * CSS-классы модификаторы для документа страницы
+     */
+    documentClassModificators: Map<string | number, string>;
+    dateFormat: string;
+    currency: "USD" | "RUB" | "EUR";
+    timezoneOffset: number;
+    /**
+     * Device by size
+     *
+     * @see Core widthForMobile
+     */
+    isMobile: boolean;
+    /**
+     * Device by user agent
+     */
+    isMobileUA: boolean;
+    /**
+     * true, если плотность пикселей экрана больше 1
+     */
+    isRetina: boolean;
+    /**
+     * true, елси это приложение
+     */
+    isApp: boolean;
+    /**
+     * true при горизонтальном расположении устройства
+     */
+    isLandscape: boolean;
+    /**
+     * true при вертикальном расположении устройства
+     */
+    isPortrait: boolean;
+    /**
+     * Максимальная сторона страницы
+     */
+    size: number;
+    /**
+     * true, если страница скрыта
+     *
+     * Не меняйте это значение вручную
+     */
+    isHidden: boolean;
+};
+export default state;

package/src/core/directives/data.d.ts

@@ -0,0 +1,10 @@
+import { DirectiveBinding } from 'vue';
+/**
+ * Сохранить данные в элементе
+ *
+ * Для доступа к данным можно воспользоваться ui/utils/dom storage()
+ */
+declare const data: {
+    mounted: (el: HTMLElement, binding: DirectiveBinding) => Promise<void>;
+};
+export default data;

package/src/core/directives/focus.d.ts

@@ -0,0 +1,10 @@
+import { DirectiveBinding } from 'vue';
+type Binding = DirectiveBinding<boolean, 'onupdate'>;
+/**
+ * Фокусировка на элементе сразу после его отображения
+ */
+declare const focus: {
+    mounted: (el: HTMLElement, binding: Binding) => void;
+    updated: (el: HTMLElement, binding: Binding) => void;
+};
+export default focus;

package/src/core/directives/preloader.d.ts

@@ -0,0 +1,8 @@
+import { DirectiveBinding } from 'vue';
+/**
+ * Сохранить данные в элементе
+ */
+declare const preloader: {
+    mounted: (el: HTMLElement, binding: DirectiveBinding) => Promise<void>;
+};
+export default preloader;

package/src/core/directives/scrollIntoView.d.ts

@@ -0,0 +1,3 @@
+import { ObjectDirective } from 'vue';
+declare const scrollIntoView: ObjectDirective;
+export default scrollIntoView;

package/src/core/directives/scrollShadow.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Добавить отображение тени при появлении скролла у элемента
+ *
+ * Будут добавлены события для усатновки модификаторов тени в зависимости от скролла элемента
+ *
+ * Модификаторы:
+ * - top-scrollShadow
+ * - top-scrollShadow-started
+ * - top-scrollShadow-finished
+ */
+declare const connectScrollShadow: {
+    mounted(el: any): Promise<void>;
+    unmounted(el: any): Promise<void>;
+};
+export default connectScrollShadow;

package/src/core/directives/sticky.d.ts

@@ -0,0 +1,10 @@
+import { DirectiveBinding, VNode } from 'vue';
+/**
+ * Добавление sticky
+ * К элементу добляется класс переданный как значение диррективы либо **'top-sticky'** по умолчанию
+ */
+declare const sticky: {
+    mounted(el: HTMLElement, binding: DirectiveBinding, _vnode: VNode): void;
+    unmounted(_el: HTMLElement, _binding: DirectiveBinding, _vnode: VNode): void;
+};
+export default sticky;

package/src/core/directives/swimUp.d.ts

@@ -0,0 +1,15 @@
+import { DirectiveBinding, VNode } from 'vue';
+interface HTMLElementWithSwimUpOptions extends HTMLElement {
+    directiveSwipUpOptions: {
+        distance: number;
+        percent: number;
+    };
+}
+/**
+ * Добавление анимации подплытия вверх для блока
+ */
+declare const swimUp: {
+    mounted(el: HTMLElementWithSwimUpOptions, binding: DirectiveBinding, _vnode: VNode): void;
+    unmounted(el: HTMLElementWithSwimUpOptions, _binding: DirectiveBinding, _vnode: VNode): void;
+};
+export default swimUp;

package/src/core/directives/tooltip.d.ts

@@ -0,0 +1,10 @@
+import { DirectiveBinding, VNode } from 'vue';
+/**
+ * Добавление всплывающей подсказки к элементу.
+ */
+declare const tooltip: {
+    mounted(el: VNode, binding: DirectiveBinding, vnode: VNode): void;
+    updated(el: VNode, binding: DirectiveBinding, vnode: VNode, _prevVnode: VNode): void;
+    unmounted(el: VNode, _binding: DirectiveBinding, _vnode: VNode): void;
+};
+export default tooltip;

package/src/core/plugins/core.d.ts

@@ -0,0 +1,60 @@
+import { PartialBy } from '../../components/types';
+import { default as Core } from '../core/core';
+import { default as coreDefaultOptions } from '../core/options';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, App } from 'vue';
+import { Props } from '../../components/core/notice/types';
+import { Options as TopPopupOptions } from '../../components/popup/lib/worker';
+import { default as TopDialogs } from '../../components/dialog/dialog/dialogs/dialogs.vue';
+import { TopDialogOptions } from '../../components/dialog/lib/types';
+import * as Forms from '../../components/forms/forms';
+declare const TopNotice: DefineComponent<Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+declare global {
+    const vd: typeof console.log;
+}
+declare module '@vue/runtime-core' {
+    interface ComponentCustomProperties {
+        /**
+         * Статический класс с текущим состоянимем UI
+         */
+        $core: typeof Core;
+        $vd: typeof console.log;
+    }
+    /**
+     * Обязательные компоненты UI
+     *
+     * Они подключаются через плагин и доступны без явного указания импорта
+     */
+    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, 'timezoneOffset' | '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
+ */
+declare const _default: {
+    install: (app: App<any>, options: Options) => void;
+};
+export default _default;

package/src/core/plugins/i18n.d.ts

@@ -0,0 +1,97 @@
+import { ComponentCustomProperties, Reactive, Ref, App } from 'vue';
+import { 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;
+declare module '@vue/runtime-core' {
+    interface ComponentCustomProperties {
+        /**
+         * Загруженные словари
+         *
+         * Можно использовать как функцию для подстановки значений в формате: `Текст {{ propName }}`
+         *
+         * @see I18n
+         * @see I18nRender
+         */
+        $i18n: I18n & I18nRender;
+        /**
+         * Текущий язык
+         */
+        $i18nLang: Ref<Lang>;
+    }
+}
+/**
+ * Плагин работает в сваязке с плагином 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}) }}
+ * 	```
+ */
+declare const _default: {
+    install: (app: App<any>, options: Options) => void;
+};
+export default _default;
+/**
+ * Получить доступ к загруженным словарям
+ *
+ * @see I18n
+ */
+export declare const useI18n: () => ComponentCustomProperties["$i18n"];
+/**
+ * Текущий язык
+ */
+export declare const useI18nLang: () => Ref<Lang>;

package/src/core/plugins/piniaTPA.d.ts

@@ -0,0 +1,17 @@
+import { PiniaPluginContext } from 'pinia';
+/**
+ * Плагин tpa (Third-party access) для pinia
+ *
+ * Добавляет возможность сохранять и загружать данные в/из:
+ * 	- URL hash в адресе страницы
+ * 	- localStorage
+ * 	- гостевая ссылка
+ *
+ * Для подключения плагина нужно указань одну или несколько опций при определении defineStore():
+ * - tpaNamesUrlHash
+ * - tpaNamesStorage
+ * - tpaNamesStorageLocal
+ * - tpaNamesGuestLink
+ */
+declare const _default: (contextPinia: PiniaPluginContext) => void;
+export default _default;