@vnejs/plugins.views.screens.gallery 0.1.5 → 0.1.7

package/dist/index.d.ts

@@ -0,0 +1 @@
+import "@vnejs/plugins.views.screens.gallery.contract";

package/dist/index.js

@@ -0,0 +1,7 @@
+import "@vnejs/plugins.views.screens.gallery.contract";
+import { regPlugin } from "@vnejs/shared";
+import { PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/plugins.views.screens.gallery.contract";
+import { GalleryController } from "./modules/controller.js";
+import { Gallery } from "./modules/gallery.js";
+import { GalleryView } from "./modules/view.js";
+regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [GalleryController, Gallery, GalleryView]);

package/dist/modules/controller.d.ts

@@ -0,0 +1,61 @@
+import { ModuleController } from "@vnejs/module.components";
+import type { GalleryPluginConstants, GalleryPluginEvents, GalleryPluginParams, GalleryPluginSettings } from "../types.js";
+import type { GalleryMapTabContentPayload, GalleryPageSetPayload, GalleryPluginState, GalleryTypeSetPayload } from "../utils/gallery.js";
+export declare class GalleryController extends ModuleController<GalleryPluginEvents, GalleryPluginConstants, GalleryPluginSettings, GalleryPluginParams, GalleryPluginState> {
+    name: string;
+    updateEvent: "vne:gallery:update";
+    bgName: "save";
+    maxPagesCount: Record<string, number>;
+    itemsOnPage: number;
+    emitHide: () => undefined;
+    initRowAndColumns: () => Promise<unknown[]> | undefined;
+    incRow: () => Promise<unknown[]> | undefined;
+    decRow: () => Promise<unknown[]> | undefined;
+    incColumn: () => Promise<unknown[]> | undefined;
+    decColumn: () => Promise<unknown[]> | undefined;
+    accept: () => undefined;
+    onPrevTab: () => void;
+    onNextTab: () => void;
+    controls: {
+        abstract_back: () => undefined;
+        abstract_menu: () => undefined;
+        abstract_gamemenu: () => undefined;
+        abstract_arrow_up: () => undefined;
+        abstract_arrow_right: () => undefined;
+        abstract_arrow_bottom: () => undefined;
+        abstract_arrow_left: () => undefined;
+        abstract_tab_prev: () => undefined;
+        abstract_tab_next: () => undefined;
+        abstract_accept: () => undefined;
+        abstract_interact: () => undefined;
+    };
+    controlsIndex: number;
+    subscribe: () => void;
+    init: () => void;
+    beforeShow: () => Promise<void>;
+    afterHide: () => void;
+    onStarted: () => void;
+    onPreload: () => Promise<[HTMLImageElement, ...{
+        isOpened: boolean;
+        fullName: string;
+        src: string;
+        mediaType: string;
+    }[]]>;
+    onMemoryCleared: () => Promise<unknown[]> | undefined;
+    onPageSet: ({ page }?: GalleryPageSetPayload) => false | Promise<void>;
+    onTypeSet: ({ type }?: GalleryTypeSetPayload) => false | Promise<void>;
+    updatePageAndType: (page?: number, type?: string | false, isUpdateView?: boolean) => Promise<void>;
+    mapTabContent: ({ check, mediaType, name, fullName }?: GalleryMapTabContentPayload) => Promise<{
+        isOpened: boolean;
+        fullName: string;
+        src: string;
+        mediaType: string;
+    }>;
+    getItemsInfo: (type: string, page: number) => {
+        check: string;
+        mediaType: string;
+        name: string;
+        fullName: string;
+    }[];
+    calcMaxPageCount: (type: string) => void;
+}

package/dist/modules/controller.js

@@ -0,0 +1,144 @@
+import { ModuleController } from "@vnejs/module.components";
+export class GalleryController extends ModuleController {
+    name = "gallery.controller";
+    updateEvent = this.EVENTS.GALLERY.UPDATE;
+    bgName = this.PARAMS.GALLERY.BACKGROUND;
+    maxPagesCount = {};
+    itemsOnPage;
+    emitHide = () => void this.emit(this.EVENTS.GALLERY.HIDE);
+    initRowAndColumns = () => this.updateStateAndViewFast({ currentRow: 0, currentColumn: 0 });
+    incRow = () => {
+        if (this.state.currentRow === null || this.state.currentColumn === null)
+            return this.initRowAndColumns();
+        const maxRows = this.PARAMS.GALLERY.ROWS;
+        if ((this.state.currentRow ?? 0) + 1 < maxRows) {
+            this.updateStateAndView({ currentRow: this.state.currentRow + 1 });
+        }
+        else if (this.state.currentPage + 1 < this.state.pages) {
+            this.updateState({ currentRow: 0 });
+            this.updatePageAndType(this.state.currentPage + 1, false, true);
+        }
+    };
+    decRow = () => {
+        if (this.state.currentRow === null || this.state.currentColumn === null)
+            return this.initRowAndColumns();
+        const maxRows = this.PARAMS.GALLERY.ROWS;
+        if (this.state.currentRow !== 0) {
+            this.updateStateAndView({ currentRow: this.state.currentRow - 1 });
+        }
+        else if (this.state.currentPage > 0) {
+            this.updateState({ currentRow: maxRows - 1 });
+            this.updatePageAndType(this.state.currentPage - 1, false, true);
+        }
+    };
+    incColumn = () => {
+        if (this.state.currentRow === null || this.state.currentColumn === null)
+            return this.initRowAndColumns();
+        const maxColumns = this.PARAMS.GALLERY.COLUMNS;
+        if ((this.state.currentColumn ?? 0) + 1 < maxColumns) {
+            this.updateStateAndView({ currentColumn: this.state.currentColumn + 1 });
+        }
+        else if (this.state.currentPage + 1 < this.state.pages) {
+            this.updateState({ currentColumn: 0 });
+            this.updatePageAndType(this.state.currentPage + 1, false, true);
+        }
+    };
+    decColumn = () => {
+        if (this.state.currentRow === null || this.state.currentColumn === null)
+            return this.initRowAndColumns();
+        const maxColumns = this.PARAMS.GALLERY.COLUMNS;
+        if (this.state.currentColumn !== 0) {
+            this.updateStateAndView({ currentColumn: this.state.currentColumn - 1 });
+        }
+        else if (this.state.currentPage > 0) {
+            this.updateState({ currentColumn: maxColumns - 1 });
+            this.updatePageAndType(this.state.currentPage - 1, false, true);
+        }
+    };
+    accept = () => void this.emit(this.EVENTS.GALLERY.CHOOSE, {
+        index: this.state.currentColumn + this.state.currentRow * this.PARAMS.GALLERY.COLUMNS,
+    });
+    onPrevTab = () => {
+        const keys = Object.keys(this.PARAMS.GALLERY.TABS);
+        const currentTypeIndex = keys.findIndex((key) => key === this.state.currentType);
+        const type = currentTypeIndex === 0 ? keys[keys.length - 1] : keys[(currentTypeIndex - 1) % keys.length];
+        void this.emit(this.EVENTS.GALLERY.TYPE_SET, { type });
+    };
+    onNextTab = () => {
+        const keys = Object.keys(this.PARAMS.GALLERY.TABS);
+        const currentTypeIndex = keys.findIndex((key) => key === this.state.currentType);
+        const type = currentTypeIndex === keys.length - 1 ? keys[0] : keys[(currentTypeIndex + 1) % keys.length];
+        void this.emit(this.EVENTS.GALLERY.TYPE_SET, { type });
+    };
+    controls = {
+        [this.CONST.CONTROLS.BUTTONS.BACK]: () => void this.emitHide(),
+        [this.CONST.CONTROLS.BUTTONS.MENU]: () => void this.emitHide(),
+        [this.CONST.CONTROLS.BUTTONS.GAMEMENU]: () => void this.emitHide(),
+        [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: () => void this.decRow(),
+        [this.CONST.CONTROLS.BUTTONS.ARROW_RIGHT]: () => void this.incColumn(),
+        [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: () => void this.incRow(),
+        [this.CONST.CONTROLS.BUTTONS.ARROW_LEFT]: () => void this.decColumn(),
+        [this.CONST.CONTROLS.BUTTONS.TAB_PREV]: () => void this.onPrevTab(),
+        [this.CONST.CONTROLS.BUTTONS.TAB_NEXT]: () => void this.onNextTab(),
+        [this.CONST.CONTROLS.BUTTONS.ACCEPT]: () => void this.accept(),
+        [this.CONST.CONTROLS.BUTTONS.INTERACT]: () => void this.accept(),
+    };
+    controlsIndex = this.PARAMS.GALLERY.ZINDEX;
+    subscribe = () => {
+        this.on(this.EVENTS.GALLERY.SHOW, this.onShow);
+        this.on(this.EVENTS.GALLERY.HIDE, this.onHide);
+        this.on(this.EVENTS.GALLERY.PAGE_SET, this.onPageSet);
+        this.on(this.EVENTS.GALLERY.TYPE_SET, this.onTypeSet);
+        this.on(this.EVENTS.GALLERY.PRELOAD, this.onPreload);
+        this.on(this.EVENTS.MEMORY.CLEARED, this.onMemoryCleared);
+        this.on(this.EVENTS.STATE.CLEAR, this.onHide);
+        this.on(this.EVENTS.SYSTEM.STARTED, this.onStarted);
+    };
+    init = () => {
+        this.itemsOnPage = this.PARAMS.GALLERY.ROWS * this.PARAMS.GALLERY.COLUMNS;
+        this.updateState({ currentType: Object.keys(this.PARAMS.GALLERY.TABS)[0], currentPage: 0 });
+    };
+    beforeShow = async () => {
+        this.updateState({ bgSrc: (await this.loadBgMedia()).src, currentRow: null, currentColumn: null });
+        return this.updatePageAndType(0, Object.keys(this.PARAMS.GALLERY.TABS)[0], false);
+    };
+    afterHide = () => this.setDefaultState();
+    onStarted = () => Object.keys(this.PARAMS.GALLERY.TABS).forEach(this.calcMaxPageCount);
+    onPreload = () => Promise.all([this.loadBgMedia(), ...this.getItemsInfo(Object.keys(this.PARAMS.GALLERY.TABS)[0], 0).map(this.mapTabContent)]);
+    onMemoryCleared = () => {
+        if (!this.state.isShow)
+            return;
+        const { currentPage = 0, currentType = "" } = this.state;
+        const promises = [this.loadBgMedia(), ...this.getItemsInfo(currentType, currentPage).map(this.mapTabContent)];
+        if (currentPage > 0)
+            promises.push(...this.getItemsInfo(currentType, currentPage - 1).map(this.mapTabContent));
+        if (currentPage + 1 < this.maxPagesCount[currentType])
+            promises.push(...this.getItemsInfo(currentType, currentPage + 1).map(this.mapTabContent));
+        Object.keys(this.PARAMS.GALLERY.TABS).forEach((type) => type !== currentType && promises.push(...this.getItemsInfo(type, 0).map(this.mapTabContent)));
+        return Promise.all(promises);
+    };
+    onPageSet = ({ page } = {}) => page !== this.state.currentPage && this.updatePageAndType(page);
+    onTypeSet = ({ type } = {}) => type !== this.state.currentType && this.updatePageAndType(0, type);
+    updatePageAndType = async (page, type, isUpdateView = true) => {
+        this.updateState({ currentPage: page });
+        if (type)
+            this.updateState({ currentType: type, pages: this.maxPagesCount[type], currentColumn: null, currentRow: null });
+        const currentItems = await Promise.all(this.getItemsInfo(this.state.currentType, this.state.currentPage).map(this.mapTabContent));
+        const items = [...currentItems];
+        while (items.length < this.itemsOnPage)
+            items.push({ isStub: true });
+        this.updateState({ currentItems: items });
+        if (isUpdateView)
+            await this.updateViewFast();
+        this.emit(this.EVENTS.MEMORY.CLEAR);
+    };
+    mapTabContent = async ({ check, mediaType, name, fullName } = { check: "", mediaType: "", name: "", fullName: "" }) => {
+        const isOpened = Boolean(await this.emitOne(this.EVENTS.GALLERY.CHECK, { key: check }));
+        const src = isOpened ? (await this.loadImageMedia(name, mediaType, this.shared.settings[this.SETTINGS.LAYER.QUALITY])).src : "";
+        return { isOpened, fullName, src, mediaType };
+    };
+    getItemsInfo = (type, page) => this.PARAMS.GALLERY.TABS[type].content.slice(page * this.itemsOnPage, (page + 1) * this.itemsOnPage);
+    calcMaxPageCount = (type) => {
+        this.maxPagesCount[type] = Math.ceil(this.PARAMS.GALLERY.TABS[type].content.length / this.itemsOnPage);
+    };
+}

package/dist/modules/gallery.d.ts

@@ -0,0 +1,10 @@
+import { Module } from "@vnejs/module";
+import type { GalleryPluginConstants, GalleryPluginEvents, GalleryPluginParams, GalleryPluginSettings } from "../types.js";
+import type { GalleryCheckPayload, GalleryOpenPayload } from "../utils/gallery.js";
+export declare class Gallery extends Module<GalleryPluginEvents, GalleryPluginConstants, GalleryPluginSettings, GalleryPluginParams> {
+    name: string;
+    subscribe: () => void;
+    onOpen: ({ key }?: GalleryOpenPayload) => Promise<unknown[]> | undefined;
+    onCheck: ({ key }?: GalleryCheckPayload) => Promise<boolean>;
+    onClear: () => Promise<unknown[]> | undefined;
+}

package/dist/modules/gallery.js

@@ -0,0 +1,14 @@
+import { Module } from "@vnejs/module";
+const STORAGE_VALUE = 1;
+const isEqualStorageValueFunc = (value) => value === STORAGE_VALUE;
+export class Gallery extends Module {
+    name = "gallery";
+    subscribe = () => {
+        this.on(this.EVENTS.GALLERY.OPEN, this.onOpen);
+        this.on(this.EVENTS.GALLERY.CHECK, this.onCheck);
+        this.on(this.EVENTS.GALLERY.CLEAR, this.onClear);
+    };
+    onOpen = ({ key } = {}) => this.emit(this.EVENTS.STORAGE.SET, { module: this.name, key, value: STORAGE_VALUE });
+    onCheck = ({ key } = {}) => this.emitOne(this.EVENTS.STORAGE.GET, { module: this.name, key }).then(isEqualStorageValueFunc);
+    onClear = () => this.emit(this.EVENTS.STORAGE.RM_ALL, { module: this.name });
+}

package/dist/modules/view.d.ts

@@ -0,0 +1,11 @@
+import { ModuleView } from "@vnejs/module.components";
+import type { GalleryPluginConstants, GalleryPluginEvents, GalleryPluginParams, GalleryPluginSettings } from "../types.js";
+import type { GalleryPluginState } from "../utils/gallery.js";
+export declare class GalleryView extends ModuleView<GalleryPluginEvents, GalleryPluginConstants, GalleryPluginSettings, GalleryPluginParams, GalleryPluginState> {
+    name: string;
+    locLabel: string;
+    animationTime: number;
+    updateEvent: "vne:gallery:update";
+    renderFunc: import("@vnejs/module.components").ViewRenderFunc<GalleryPluginState>;
+    updateHandler: (state?: GalleryPluginState | undefined) => Promise<void>;
+}

package/dist/modules/view.js

@@ -0,0 +1,10 @@
+import { ModuleView } from "@vnejs/module.components";
+import { render } from "../view/index.js";
+export class GalleryView extends ModuleView {
+    name = "gallery.view";
+    locLabel = this.PARAMS.GALLERY.LOC_LABEL;
+    animationTime = this.PARAMS.GALLERY.TRANSITION;
+    updateEvent = this.EVENTS.GALLERY.UPDATE;
+    renderFunc = render;
+    updateHandler = this.onUpdateStoreComponent;
+}

package/dist/types.d.ts

@@ -0,0 +1,12 @@
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "@vnejs/module.components";
+import type { SettingsKeys as LayerSettingsKeys, PluginName as LayerPluginName } from "@vnejs/plugins.canvas.layer.contract";
+import type { Constants as ControlsConstants, PluginName as ControlsPluginName } from "@vnejs/plugins.controls.contract";
+import type { PluginName as MemoryPluginName, SubscribeEvents as MemorySubscribeEvents } from "@vnejs/plugins.core.memory.contract";
+import type { PluginName as StatePluginName, SubscribeEvents as StateSubscribeEvents } from "@vnejs/plugins.core.state.contract";
+import type { PluginName as StoragePluginName, SubscribeEvents as StorageSubscribeEvents } from "@vnejs/plugins.core.storage.contract";
+import type { PluginName as SystemPluginName, SubscribeEvents as SystemSubscribeEvents } from "@vnejs/plugins.core.system.contract";
+import type { Params, PluginName, SubscribeEvents } from "@vnejs/plugins.views.screens.gallery.contract";
+export type GalleryPluginEvents = ModuleComponentsEvents & Record<PluginName, SubscribeEvents> & Record<StoragePluginName, StorageSubscribeEvents> & Record<MemoryPluginName, MemorySubscribeEvents> & Record<StatePluginName, StateSubscribeEvents> & Record<SystemPluginName, SystemSubscribeEvents>;
+export type GalleryPluginConstants = ModuleComponentsConstants & Record<ControlsPluginName, ControlsConstants>;
+export type GalleryPluginSettings = ModuleComponentsSettings & Record<LayerPluginName, LayerSettingsKeys>;
+export type GalleryPluginParams = ModuleComponentsParams & Record<PluginName, Params>;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/gallery.d.ts

@@ -0,0 +1,43 @@
+import type { Module } from "@vnejs/module";
+import type { GalleryTabContent } from "@vnejs/plugins.views.screens.gallery.contract";
+import type { GalleryPluginConstants, GalleryPluginEvents, GalleryPluginParams, GalleryPluginSettings } from "../types.js";
+export type GalleryCurrentItem = {
+    isStub?: boolean;
+    isOpened?: boolean;
+    fullName?: string;
+    src?: string;
+    mediaType?: string;
+};
+export type GalleryPluginState = {
+    isShow: boolean;
+    isForce: boolean;
+    locs?: Record<string, string>;
+    bgSrc?: string;
+    currentType?: string;
+    currentPage?: number;
+    pages?: number;
+    currentRow?: number | null;
+    currentColumn?: number | null;
+    currentItems?: GalleryCurrentItem[];
+};
+export type GalleryViewContext = {
+    emit: Module<GalleryPluginEvents, GalleryPluginConstants, GalleryPluginSettings, GalleryPluginParams, GalleryPluginState>["emit"];
+    EVENTS: GalleryPluginEvents;
+    PARAMS: GalleryPluginParams;
+};
+export type GalleryOpenPayload = {
+    key?: string;
+};
+export type GalleryCheckPayload = {
+    key?: string;
+};
+export type GalleryPageSetPayload = {
+    page?: number;
+};
+export type GalleryTypeSetPayload = {
+    type?: string;
+};
+export type GalleryChoosePayload = {
+    index?: number;
+};
+export type GalleryMapTabContentPayload = GalleryTabContent;

package/dist/utils/gallery.js

@@ -0,0 +1 @@
+export {};

package/dist/view/components/GalleryClose.d.ts

@@ -0,0 +1,2 @@
+import type { GalleryViewContext } from "../../utils/gallery.js";
+export declare const GalleryClose: ({ emit, EVENTS, PARAMS }: GalleryViewContext) => import("react/jsx-runtime").JSX.Element;

package/dist/view/components/GalleryClose.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { PositionBox, Svg } from "@vnejs/uis.react";
+export const GalleryClose = ({ emit, EVENTS, PARAMS }) => {
+    const onClick = useCallback(() => void emit(EVENTS.GALLERY.HIDE), [emit, EVENTS.GALLERY.HIDE]);
+    const propsSvg = useMemo(() => ({ ...PARAMS.GALLERY.VIEW_PROPS.close.svg, onClick }), [PARAMS.GALLERY.VIEW_PROPS.close.svg, onClick]);
+    return (_jsx(PositionBox, { ...PARAMS.GALLERY.VIEW_PROPS.close.position, children: _jsx(Svg.Cross, { ...propsSvg }) }));
+};

package/dist/view/components/GalleryControls.d.ts

@@ -0,0 +1,7 @@
+import type { GalleryViewContext } from "../../utils/gallery.js";
+type GalleryControlsProps = GalleryViewContext & {
+    locs: Record<string, string>;
+    currentType: string;
+};
+export declare const GalleryControls: ({ locs, currentType, emit, EVENTS, PARAMS }: GalleryControlsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/view/components/GalleryControls.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { PositionBox, TextControls } from "@vnejs/uis.react";
+export const GalleryControls = ({ locs, currentType, emit, EVENTS, PARAMS }) => {
+    const texts = useMemo(() => Object.keys(PARAMS.GALLERY.TABS).map((key) => ({ text: locs[PARAMS.GALLERY.TABS[key].locKey], value: key })), [locs, PARAMS.GALLERY.TABS]);
+    const selectedIndex = useMemo(() => Object.keys(PARAMS.GALLERY.TABS).findIndex((key) => key === currentType), [currentType, PARAMS.GALLERY.TABS]);
+    const onClick = useCallback((type) => void emit(EVENTS.GALLERY.TYPE_SET, { type }), [emit, EVENTS.GALLERY.TYPE_SET]);
+    const propsControls = useMemo(() => ({ ...PARAMS.GALLERY.VIEW_PROPS.controls.controls, selectedIndex, texts, onClick }), [PARAMS.GALLERY.VIEW_PROPS.controls.controls, selectedIndex, texts, onClick]);
+    return (_jsx(PositionBox, { ...PARAMS.GALLERY.VIEW_PROPS.controls.position, children: _jsx(TextControls, { ...propsControls }) }));
+};

package/dist/view/components/GalleryItems.d.ts

@@ -0,0 +1,7 @@
+import type { GalleryCurrentItem, GalleryViewContext } from "../../utils/gallery.js";
+type GalleryItemsProps = GalleryViewContext & {
+    currentItems?: GalleryCurrentItem[];
+    selectedIndex?: number;
+};
+export declare const GalleryItems: ({ currentItems, selectedIndex, emit, EVENTS, PARAMS }: GalleryItemsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/view/components/GalleryItems.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useCallback } from "react";
+import { Flex, PositionBox, WrapWithContent } from "@vnejs/uis.react";
+export const GalleryItems = ({ currentItems = [], selectedIndex = -1, emit, EVENTS, PARAMS }) => {
+    const onSlotClick = useCallback((index) => void emit(EVENTS.GALLERY.CHOOSE, { index: Number(index) }), [emit, EVENTS.GALLERY.CHOOSE]);
+    const renderSlot = useCallback((item, i) => {
+        if (item.isStub)
+            return (_createElement("div", { ...PARAMS.GALLERY.VIEW_PROPS.items.stub, key: i }));
+        return (_createElement(WrapWithContent, { ...PARAMS.GALLERY.VIEW_PROPS.items.item, key: item.isOpened ? item.src : i, value: i, imageSrc: item.isOpened ? item.src : undefined, isSelected: selectedIndex === i, onClick: item.isOpened ? onSlotClick : undefined }));
+    }, [PARAMS.GALLERY.VIEW_PROPS.items, onSlotClick, selectedIndex]);
+    return (_jsx(PositionBox, { ...PARAMS.GALLERY.VIEW_PROPS.items.position, children: _jsx(Flex, { ...PARAMS.GALLERY.VIEW_PROPS.items.flex, children: currentItems.map(renderSlot) }) }));
+};

package/dist/view/components/GalleryPages.d.ts

@@ -0,0 +1,7 @@
+import type { GalleryViewContext } from "../../utils/gallery.js";
+type GalleryPagesProps = GalleryViewContext & {
+    pagesCount?: number;
+    currentPage?: number;
+};
+export declare const GalleryPages: ({ pagesCount, currentPage, emit, EVENTS, PARAMS }: GalleryPagesProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/view/components/GalleryPages.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { PageSelector, PositionBox } from "@vnejs/uis.react";
+export const GalleryPages = ({ pagesCount, currentPage, emit, EVENTS, PARAMS }) => {
+    const onPrevPage = useCallback(() => void emit(EVENTS.GALLERY.PAGE_SET, { page: currentPage - 1 }), [emit, EVENTS.GALLERY.PAGE_SET, currentPage]);
+    const onNextPage = useCallback(() => void emit(EVENTS.GALLERY.PAGE_SET, { page: currentPage + 1 }), [emit, EVENTS.GALLERY.PAGE_SET, currentPage]);
+    const propsSelector = useMemo(() => ({ onPrevPage, onNextPage, pagesCount: pagesCount ?? 0, page: currentPage + 1, pagesMinCount: 1 }), [onPrevPage, onNextPage, pagesCount, currentPage]);
+    return (_jsx(PositionBox, { ...PARAMS.GALLERY.VIEW_PROPS.pages.position, children: _jsx(PageSelector, { ...propsSelector }) }));
+};

package/dist/view/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./GalleryClose.js";
+export * from "./GalleryControls.js";
+export * from "./GalleryItems.js";
+export * from "./GalleryPages.js";

package/dist/view/components/index.js

@@ -0,0 +1,4 @@
+export * from "./GalleryClose.js";
+export * from "./GalleryControls.js";
+export * from "./GalleryItems.js";
+export * from "./GalleryPages.js";

package/dist/view/index.d.ts

@@ -0,0 +1,3 @@
+import type { ViewRenderFunc } from "@vnejs/module.components";
+import type { GalleryPluginState } from "../utils/gallery.js";
+export declare const render: ViewRenderFunc<GalleryPluginState>;

package/dist/view/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Screen, createRenderFunc, useMemo, useStoreState } from "@vnejs/uis.react";
+import { GalleryClose, GalleryControls, GalleryItems, GalleryPages } from "./components/index.js";
+const Gallery = ({ store, onMount, PARAMS, emit, EVENTS }) => {
+    const { isShow = false, isForce = false, locs = {}, bgSrc = "", currentType = "", currentItems = [], pages, currentColumn = null, currentRow = null, currentPage, } = useStoreState(store, onMount);
+    const selectedIndex = currentColumn !== null && currentRow !== null ? currentColumn + currentRow * 3 : -1;
+    const viewProps = useMemo(() => ({ emit, EVENTS, PARAMS }), [emit, EVENTS, PARAMS]);
+    const propsScreen = useMemo(() => ({ ...PARAMS.GALLERY.VIEW_PROPS.screen, isShow, isForce, bgSrc }), [isShow, isForce, bgSrc, PARAMS.GALLERY.VIEW_PROPS.screen]);
+    const propsControls = useMemo(() => ({ ...viewProps, currentType, locs }), [viewProps, currentType, locs]);
+    const propsPages = useMemo(() => ({ ...viewProps, pagesCount: pages, currentPage }), [viewProps, pages, currentPage]);
+    const propsItems = useMemo(() => ({ ...viewProps, currentItems, currentType, selectedIndex, locs }), [viewProps, currentItems, currentType, selectedIndex, locs]);
+    return (_jsxs(Screen, { ...propsScreen, children: [_jsx(GalleryControls, { ...propsControls }), _jsx(GalleryPages, { ...propsPages }), _jsx(GalleryItems, { ...propsItems }), _jsx(GalleryClose, { ...viewProps })] }));
+};
+export const render = createRenderFunc(Gallery);

package/package.json

@@ -1,17 +1,51 @@
 {
   "name": "@vnejs/plugins.views.screens.gallery",
-  "version": "0.1.5",
-  "main": "index.js",
+  "version": "0.1.7",
+  "description": "",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "tsconfig.json"
+  ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "npx @vnejs/monorepo package",
     "publish:major:plugin": "npm run publish:major",
     "publish:minor:plugin": "npm run publish:minor",
     "publish:patch:plugin": "npm run publish:patch",
-    "publish:major": "npm version major && npm publish --access public",
-    "publish:minor": "npm version minor && npm publish --access public",
-    "publish:patch": "npm version patch && npm publish --access public"
+    "publish:major": "npx @vnejs/monorepo publish major --access public",
+    "publish:minor": "npx @vnejs/monorepo publish minor --access public",
+    "publish:patch": "npx @vnejs/monorepo publish patch --access public"
   },
   "author": "",
   "license": "ISC",
-  "description": ""
+  "dependencies": {
+    "@vnejs/plugins.views.screens.gallery.contract": "~0.0.1"
+  },
+  "peerDependencies": {
+    "@vnejs/helpers": "~0.1.0",
+    "@vnejs/module": "~0.0.1",
+    "@vnejs/module.components": "~0.0.1",
+    "@vnejs/plugins.canvas.layer.contract": "~0.0.1",
+    "@vnejs/plugins.controls.contract": "~0.0.1",
+    "@vnejs/plugins.core.memory.contract": "~0.0.1",
+    "@vnejs/plugins.core.state.contract": "~0.0.1",
+    "@vnejs/plugins.core.storage.contract": "~0.0.1",
+    "@vnejs/plugins.core.system.contract": "~0.0.1",
+    "@vnejs/shared": "~0.0.9",
+    "@vnejs/uis.react": "~0.1.0"
+  },
+  "devDependencies": {
+    "@vnejs/configs.ts-common": "~0.0.1"
+  }
 }

package/src/index.ts

@@ -0,0 +1,10 @@
+import "@vnejs/plugins.views.screens.gallery.contract";
+
+import { regPlugin } from "@vnejs/shared";
+import { PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/plugins.views.screens.gallery.contract";
+
+import { GalleryController } from "./modules/controller.js";
+import { Gallery } from "./modules/gallery.js";
+import { GalleryView } from "./modules/view.js";
+
+regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [GalleryController, Gallery, GalleryView]);