@vnejs/plugins.views.settings 0.1.3 → 0.2.1

package/dist/index.d.ts

@@ -0,0 +1 @@
+import "@vnejs/contracts.views.settings";

package/dist/index.js

@@ -0,0 +1,6 @@
+import "@vnejs/contracts.views.settings";
+import { regPlugin } from "@vnejs/shared";
+import { PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/contracts.views.settings";
+import { SettingsViewController } from "./modules/controller.js";
+import { SettingsView } from "./modules/view.js";
+regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [SettingsViewController, SettingsView]);

package/dist/modules/controller.d.ts

@@ -0,0 +1,38 @@
+import { ModuleController } from "@vnejs/module.components";
+import type { SettingsViewPluginConstants, SettingsViewPluginEvents, SettingsViewPluginParams, SettingsViewPluginSettings } from "../types.js";
+import type { SettingsViewPluginState, SettingsViewTabContent, SettingsViewTabPayload } from "../utils/settings.js";
+export declare class SettingsViewController extends ModuleController<SettingsViewPluginEvents, SettingsViewPluginConstants, SettingsViewPluginSettings, SettingsViewPluginParams, SettingsViewPluginState> {
+    name: string;
+    updateEvent: "vne:settings_view:update";
+    controlsIndex: number;
+    tabKeyOf: ({ tabKey, tab }?: SettingsViewTabPayload) => string;
+    tabContentOf: (tab: SettingsViewTabPayload["tab"], locs?: Record<string, string>) => SettingsViewTabContent;
+    applyTab: (payload?: SettingsViewTabPayload) => {
+        tab: import("@vnejs/contracts.views.settings").SettingsTab | undefined;
+        tabKey: string;
+        tabsContent: {
+            [k: string]: SettingsViewTabContent;
+        };
+        fields: import("@vnejs/contracts.views.settings").SettingsField[];
+        locs: Record<string, string> | undefined;
+        showTextExample: boolean;
+        currentItemInner: number;
+    };
+    onShowFields: (payload?: SettingsViewTabPayload) => Promise<void>;
+    onTabSet: (payload?: SettingsViewTabPayload) => Promise<void | unknown[]>;
+    onArrowLeft: () => false | Promise<unknown[]> | undefined;
+    onArrowRight: () => false | Promise<unknown[]> | undefined;
+    onInteract: () => void;
+    controls: {
+        abstract_interact: () => undefined;
+        abstract_arrow_left: () => undefined;
+        abstract_arrow_right: () => undefined;
+        abstract_arrow_up: () => Promise<void>;
+        abstract_arrow_bottom: () => Promise<void>;
+    };
+    controlsCheckNext: boolean;
+    subscribe: () => void;
+    beforeShow: (payload?: SettingsViewTabPayload) => Promise<void>;
+    afterHide: () => void;
+    onSettingChange: () => false | Promise<unknown[]> | undefined;
+}

package/dist/modules/controller.js

@@ -0,0 +1,117 @@
+import { ModuleController } from "@vnejs/module.components";
+export class SettingsViewController extends ModuleController {
+    name = "settings.fields.controller";
+    updateEvent = this.EVENTS.SETTINGS_VIEW.UPDATE;
+    controlsIndex = this.PARAMS.SETTINGS_VIEW.ZINDEX;
+    tabKeyOf = ({ tabKey, tab } = {}) => tabKey || tab?.titleLocKey || "default";
+    tabContentOf = (tab, locs) => ({
+        fields: tab?.fields ?? [],
+        showTextExample: Boolean(tab?.showTextExample),
+        locs,
+    });
+    applyTab = (payload = {}) => {
+        const { tab, locs } = payload;
+        const fields = tab?.fields ?? [];
+        const key = this.tabKeyOf(payload);
+        this.maxCurrentItem = Math.max((fields.length ?? 1) - 1, 0);
+        const tabsContent = payload.tabs
+            ? Object.fromEntries(Object.entries(payload.tabs).map(([tabKey, settingsTab]) => [tabKey, this.tabContentOf(settingsTab, locs)]))
+            : { ...(this.state.tabsContent ?? {}), [key]: this.tabContentOf(tab, locs) };
+        return {
+            tab,
+            tabKey: key,
+            tabsContent,
+            fields,
+            locs,
+            showTextExample: Boolean(tab?.showTextExample),
+            currentItemInner: 0,
+        };
+    };
+    onShowFields = (payload = {}) => this.onShow(payload);
+    onTabSet = async (payload = {}) => {
+        if (!this.state.isShow)
+            return this.onShow(payload);
+        const isForce = Boolean(payload.isForce || this.shared.viewForceAnimationSources?.isNotEmpty());
+        this.currentItem = null;
+        const next = { ...this.applyTab(payload), currentItem: null };
+        if (isForce)
+            return this.updateStateAndViewForce(next);
+        const key = next.tabKey;
+        const alreadyMounted = Boolean(this.state.tabsContent?.[key]);
+        // Mount the incoming tab at opacity 0 first so CSS can crossfade both layers together.
+        if (!alreadyMounted) {
+            await this.updateStateAndViewFast({ tabsContent: next.tabsContent });
+            await this.waitRerender();
+        }
+        return this.updateStateAndView(next);
+    };
+    onArrowLeft = () => {
+        const { currentItemInner = 0, currentItem, fields = [] } = this.state;
+        if (currentItem == null || !fields.length)
+            return;
+        const { settingKey = "", step = 0, min = 0, type = "", options = [] } = fields[currentItem];
+        if (!settingKey)
+            return;
+        if (options?.length) {
+            const newValue = (currentItemInner === 0 ? options.length : (currentItemInner ?? 0)) - 1;
+            return this.updateStateAndViewFast({ currentItemInner: newValue });
+        }
+        if (type === "toggle") {
+            return this.shared.settings[settingKey] === true && void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: false });
+        }
+        if (type === "range") {
+            const newValue = Number(Number(Number(this.shared.settings[settingKey]) - step).toFixed(4));
+            return newValue >= min && void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: newValue });
+        }
+    };
+    onArrowRight = () => {
+        const { currentItemInner = 0, currentItem, fields = [] } = this.state;
+        if (currentItem == null || !fields.length)
+            return;
+        const { settingKey = "", step = 0, max = 0, type = "", options = [] } = fields[currentItem];
+        if (!settingKey)
+            return;
+        if (options?.length) {
+            return this.updateStateAndViewFast({ currentItemInner: ((currentItemInner ?? 0) + 1) % options.length });
+        }
+        if (type === "toggle") {
+            return this.shared.settings[settingKey] === false && void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: true });
+        }
+        if (type === "range") {
+            const newValue = Number(Number(Number(this.shared.settings[settingKey]) + step).toFixed(4));
+            return newValue <= max && void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: newValue });
+        }
+    };
+    onInteract = () => {
+        const { currentItemInner = 0, currentItem, fields = [], locs = {} } = this.state;
+        if (currentItem == null || !fields.length)
+            return;
+        const { settingKey = "", type = "", options = [] } = fields[currentItem];
+        if (!settingKey)
+            return;
+        if (options?.length)
+            return options[currentItemInner ?? 0].action
+                ? this.PARAMS.SETTINGS_VIEW.ACTIONS[options[currentItemInner ?? 0].action](this, locs)
+                : void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: options[currentItemInner ?? 0].value });
+        if (type === "toggle")
+            return void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: !this.shared.settings[settingKey] });
+    };
+    controls = {
+        [this.CONST.CONTROLS.BUTTONS.INTERACT]: () => void this.onInteract(),
+        [this.CONST.CONTROLS.BUTTONS.ARROW_LEFT]: () => void this.onArrowLeft(),
+        [this.CONST.CONTROLS.BUTTONS.ARROW_RIGHT]: () => void this.onArrowRight(),
+        [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: this.decCurrentItem,
+        [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: this.incCurrentItem,
+    };
+    controlsCheckNext = true;
+    subscribe = () => {
+        this.on(this.EVENTS.SETTINGS_VIEW.SHOW, this.onShowFields);
+        this.on(this.EVENTS.SETTINGS_VIEW.HIDE, this.onHide);
+        this.on(this.EVENTS.SETTINGS_VIEW.TAB_SET, this.onTabSet);
+        this.on(this.EVENTS.SETTINGS.CHANGED, this.onSettingChange);
+        this.on(this.EVENTS.COMPONENTS.EXTERNAL_UPDATE, this.onSettingChange);
+    };
+    beforeShow = async (payload = {}) => this.updateState(this.applyTab(payload));
+    afterHide = () => this.setDefaultState();
+    onSettingChange = () => this.state.isShow && this.updateViewFast();
+}

package/dist/modules/view.d.ts

@@ -0,0 +1,11 @@
+import { ModuleView } from "@vnejs/module.components";
+import type { SettingsViewPluginConstants, SettingsViewPluginEvents, SettingsViewPluginParams, SettingsViewPluginSettings } from "../types.js";
+import type { SettingsViewPluginState } from "../utils/settings.js";
+export declare class SettingsView extends ModuleView<SettingsViewPluginEvents, SettingsViewPluginConstants, SettingsViewPluginSettings, SettingsViewPluginParams, SettingsViewPluginState> {
+    name: string;
+    locLabel: string;
+    animationTime: number;
+    updateEvent: "vne:settings_view:update";
+    renderFunc: import("@vnejs/module.components").ViewRenderFunc<SettingsViewPluginState>;
+    updateHandler: (state?: SettingsViewPluginState | 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 SettingsView extends ModuleView {
+    name = "settings.fields.view";
+    locLabel = this.PARAMS.SETTINGS_VIEW.LOC_LABEL;
+    animationTime = this.PARAMS.SETTINGS_VIEW.TRANSITION;
+    updateEvent = this.EVENTS.SETTINGS_VIEW.UPDATE;
+    renderFunc = render;
+    updateHandler = this.onUpdateStoreComponent;
+}

package/dist/types.d.ts

@@ -0,0 +1,10 @@
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "@vnejs/module.components";
+import type { Constants as ControlsConstants, PluginName as ControlsPluginName } from "@vnejs/contracts.controls";
+import type { PluginName as SettingsPluginName, SubscribeEvents as SettingsSubscribeEvents } from "@vnejs/contracts.core.settings";
+import type { SettingsKeys as TextsizeSettingsKeys, PluginName as TextsizePluginName } from "@vnejs/contracts.settings.textsize";
+import type { Params as TextSmoothParams, PluginName as TextSmoothPluginName, SettingsKeys as TextSmoothSettingsKeys } from "@vnejs/contracts.text.smooth";
+import type { Params, PluginName, SubscribeEvents } from "@vnejs/contracts.views.settings";
+export type SettingsViewPluginEvents = ModuleComponentsEvents & Record<PluginName, SubscribeEvents> & Record<SettingsPluginName, SettingsSubscribeEvents>;
+export type SettingsViewPluginConstants = ModuleComponentsConstants & Record<ControlsPluginName, ControlsConstants>;
+export type SettingsViewPluginSettings = ModuleComponentsSettings & Record<TextSmoothPluginName, TextSmoothSettingsKeys> & Record<TextsizePluginName, TextsizeSettingsKeys>;
+export type SettingsViewPluginParams = ModuleComponentsParams & Record<PluginName, Params> & Record<TextSmoothPluginName, TextSmoothParams>;

package/dist/types.js

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

package/dist/utils/settings.d.ts

@@ -0,0 +1,25 @@
+import type { SettingsField, SettingsTab } from "@vnejs/contracts.views.settings";
+export type SettingsViewTabContent = {
+    fields?: SettingsField[];
+    showTextExample?: boolean;
+    locs?: Record<string, string>;
+};
+export type SettingsViewPluginState = {
+    isShow: boolean;
+    isForce: boolean;
+    tab?: SettingsTab;
+    tabKey?: string;
+    tabsContent?: Record<string, SettingsViewTabContent>;
+    fields?: SettingsField[];
+    locs?: Record<string, string>;
+    showTextExample?: boolean;
+    currentItem?: number | null;
+    currentItemInner?: number | null;
+};
+export type SettingsViewTabPayload = {
+    tab?: SettingsTab;
+    tabs?: Record<string, SettingsTab>;
+    tabKey?: string;
+    locs?: Record<string, string>;
+    isForce?: boolean;
+};

package/dist/utils/settings.js

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

package/dist/view/SettingsExampleText.d.ts

@@ -0,0 +1,9 @@
+import type { ReactComponentProps } from "@vnejs/uis.react";
+import type { SettingsViewPluginConstants, SettingsViewPluginEvents, SettingsViewPluginParams, SettingsViewPluginSettings } from "../types.js";
+import type { SettingsViewPluginState } from "../utils/settings.js";
+type SettingsExampleTextProps = ReactComponentProps<SettingsViewPluginEvents, SettingsViewPluginConstants, SettingsViewPluginSettings, SettingsViewPluginParams, SettingsViewPluginState> & {
+    isShow?: boolean;
+    locs?: Record<string, string>;
+};
+export declare const SettingsExampleText: ({ isShow, locs, PARAMS, shared, SETTINGS }: SettingsExampleTextProps) => import("react").JSX.Element;
+export {};

package/dist/view/SettingsExampleText.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tokenizeText } from "@vnejs/helpers";
+import { SmoothText, useEffect, useMemo, useState } from "@vnejs/uis.react";
+export const SettingsExampleText = ({ isShow = false, locs = {}, PARAMS, shared, SETTINGS }) => {
+    const [tokens, setTokens] = useState([]);
+    const isForce = shared.textProcessSkipSources.isNotEmpty();
+    const text = useMemo(() => locs["fields.text.example"] ?? "", [locs]);
+    useEffect(() => {
+        if (isShow)
+            setTokens(tokenizeText(text));
+    }, [isShow, text]);
+    useEffect(() => {
+        setTokens((prev) => (prev.length ? [...prev] : prev));
+    }, [isForce]);
+    useEffect(() => {
+        if (isShow || isForce)
+            return;
+        const tm = setTimeout(() => setTokens([]), PARAMS.SETTINGS_VIEW.TRANSITION);
+        return () => clearTimeout(tm);
+    }, [isShow, isForce, PARAMS.SETTINGS_VIEW.TRANSITION]);
+    const charDelay = isForce
+        ? 0
+        : PARAMS.TEXT_SMOOTH.TOKEN_RENDER_DELAY / Number(shared.settings[SETTINGS.TEXT_SMOOTH.TOKEN_RENDER_SPEED]);
+    return (_jsx(SmoothText, { tokens: tokens, isForce: isForce, charDelay: charDelay, tokensVisibleForce: isForce ? tokens.length : null, transition: PARAMS.SETTINGS_VIEW.VIEW_PROPS.exampleText.transition, size: PARAMS.SETTINGS_VIEW.VIEW_PROPS.exampleText.size, color: PARAMS.SETTINGS_VIEW.VIEW_PROPS.exampleText.color, height: PARAMS.SETTINGS_VIEW.VIEW_PROPS.exampleText.height, scrollBarTextSize: Number(shared.settings[SETTINGS.TEXTSIZE.VALUE]) }));
+};

package/dist/view/SettingsTabContent.d.ts

@@ -0,0 +1,15 @@
+import type { SettingsField } from "@vnejs/contracts.views.settings";
+import type { ReactComponentProps } from "@vnejs/uis.react";
+import type { SettingsViewPluginConstants, SettingsViewPluginEvents, SettingsViewPluginParams, SettingsViewPluginSettings } from "../types.js";
+import type { SettingsViewPluginState } from "../utils/settings.js";
+type SettingsTabContentProps = ReactComponentProps<SettingsViewPluginEvents, SettingsViewPluginConstants, SettingsViewPluginSettings, SettingsViewPluginParams, SettingsViewPluginState> & {
+    isShow?: boolean;
+    isForce?: boolean;
+    locs?: Record<string, string>;
+    fields?: SettingsField[];
+    showTextExample?: boolean;
+    currentItem?: number | null;
+    currentItemInner?: number | null;
+};
+export declare const SettingsTabContent: ({ isShow, isForce, locs, fields, showTextExample, currentItem, currentItemInner, PARAMS, emit, EVENTS, shared, SETTINGS, store, onMount, CONST, }: SettingsTabContentProps) => import("react").JSX.Element;
+export {};

package/dist/view/SettingsTabContent.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, PositionBox, Settings, useCallback } from "@vnejs/uis.react";
+import { SettingsExampleText } from "./SettingsExampleText.js";
+export const SettingsTabContent = ({ isShow = false, isForce = false, locs = {}, fields = [], showTextExample = false, currentItem = null, currentItemInner = null, PARAMS, emit, EVENTS, shared, SETTINGS, store, onMount, CONST, }) => {
+    const mapFields = useCallback(({ locKey = "", type = "", settingKey = "", options = [], titleToggledLocKey = "", titleUntoggledLocKey = "", valueMap = "", ...fieldProps } = {}) => {
+        const onChange = (value) => void emit(EVENTS.SETTINGS.SET, { name: settingKey, value });
+        const titles = { title: locs[locKey], titleToggled: locs[titleToggledLocKey], titleUntoggled: locs[titleUntoggledLocKey] };
+        const valueMapReal = valueMap ? PARAMS.SETTINGS_VIEW.VALUE_MAPS[valueMap] : null;
+        const optionsReal = options.map((option) => {
+            const result = { ...option };
+            if (option.locKey) {
+                delete result.locKey;
+                result.text = locs[option.locKey];
+            }
+            if (option.action) {
+                delete result.action;
+                result.onClick = () => PARAMS.SETTINGS_VIEW.ACTIONS[option.action]({ emit, emitOne: emit, emitReal: emit }, locs);
+            }
+            return result;
+        });
+        return { ...titles, value: shared.settings[settingKey], type, onChange, props: fieldProps, options: optionsReal, valueMap: valueMapReal };
+    }, [EVENTS.SETTINGS.SET, PARAMS.SETTINGS_VIEW.ACTIONS, PARAMS.SETTINGS_VIEW.VALUE_MAPS, emit, locs, shared.settings]);
+    // Do not memoize mapped settings: shared.settings is mutated in place on SETTINGS.CHANGED.
+    const propsSettings = {
+        ...PARAMS.SETTINGS_VIEW.VIEW_PROPS.fieldProps,
+        transition: isForce ? 0 : PARAMS.SETTINGS_VIEW.TRANSITION,
+        settings: fields.map(mapFields),
+        selectedIndex: isShow ? (currentItem ?? undefined) : -1,
+        selectedIndexInner: isShow ? (currentItemInner ?? undefined) : -1,
+    };
+    return (_jsx(PositionBox, { isCentered: true, opacity: isShow ? 1 : 0, transition: isForce ? 0 : PARAMS.SETTINGS_VIEW.TRANSITION, children: _jsxs(Flex, { direction: Flex.DIRECTION.COLUMN, gap: PARAMS.SETTINGS_VIEW.VIEW_PROPS.fieldsGap, children: [_jsx(Settings, { ...propsSettings }), showTextExample && (_jsx(SettingsExampleText, { store: store, onMount: onMount, PARAMS: PARAMS, emit: emit, EVENTS: EVENTS, shared: shared, CONST: CONST, SETTINGS: SETTINGS, locs: locs, isShow: isShow }))] }) }));
+};

package/dist/view/index.d.ts

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

package/dist/view/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { View, createRenderFunc, useIsForceHook, useMemo, useStoreState } from "@vnejs/uis.react";
+import { SettingsTabContent } from "./SettingsTabContent.js";
+const SettingsViewComponent = ({ store, onMount, PARAMS, emit, EVENTS, shared, CONST, SETTINGS }) => {
+    const { isShow = false, isForce = false, locs = {}, tabsContent = {}, tabKey = "", currentItem = null, currentItemInner = null, } = useStoreState(store, onMount);
+    const isRealForce = useIsForceHook(isForce);
+    const propsByView = PARAMS.SETTINGS_VIEW.VIEW_PROPS;
+    const propsView = useMemo(() => ({
+        ...propsByView.view,
+        isShow,
+        isForce: isRealForce,
+        transition: isRealForce ? 0 : PARAMS.SETTINGS_VIEW.TRANSITION,
+    }), [isShow, isRealForce, propsByView.view, PARAMS.SETTINGS_VIEW.TRANSITION]);
+    const propsTab = useMemo(() => ({ store, onMount, PARAMS, emit, EVENTS, shared, CONST, SETTINGS, isForce: isRealForce, currentItem, currentItemInner, locs }), [store, onMount, PARAMS, emit, EVENTS, shared, CONST, SETTINGS, isRealForce, currentItem, currentItemInner, locs]);
+    return (_jsx(View, { ...propsView, children: Object.entries(tabsContent).map(([key, content]) => (_createElement(SettingsTabContent, { ...propsTab, key: key, isShow: tabKey === key, fields: content.fields, showTextExample: content.showTextExample, locs: content.locs ?? locs }))) }));
+};
+export const render = createRenderFunc(SettingsViewComponent);

package/package.json

@@ -1,17 +1,62 @@
 {
   "name": "@vnejs/plugins.views.settings",
-  "version": "0.1.3",
-  "main": "index.js",
+  "version": "0.2.1",
+  "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",
+    "test": "npx @vnejs/monorepo test",
+    "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/contracts.views.settings": "~0.2.0"
+  },
+  "peerDependencies": {
+    "@vnejs/helpers": "~0.2.0",
+    "@vnejs/module.core": "~0.2.0",
+    "@vnejs/module.components": "~0.2.0",
+    "@vnejs/contracts.controls": "~0.2.0",
+    "@vnejs/contracts.core.settings": "~0.2.0",
+    "@vnejs/contracts.settings.textsize": "~0.2.0",
+    "@vnejs/contracts.text.smooth": "~0.2.0",
+    "@vnejs/shared": "~0.2.0",
+    "@vnejs/uis.react": "~0.2.0"
+  },
+  "devDependencies": {
+    "@vnejs/configs.ts-common": "~0.2.0",
+    "@vnejs/configs.vitest": "~0.2.0",
+    "@vnejs/test-utils": "~0.2.0",
+    "@vnejs/contracts.controls": "~0.2.0",
+    "@vnejs/contracts.core.settings": "~0.2.0",
+    "@vnejs/contracts.settings.textsize": "~0.2.0",
+    "@vnejs/contracts.text.smooth": "~0.2.0",
+    "@vnejs/contracts.views.settings": "~0.2.0",
+    "@vnejs/helpers": "~0.2.0",
+    "@vnejs/module.core": "~0.2.0",
+    "@vnejs/module.components": "~0.2.0",
+    "@vnejs/shared": "~0.2.0",
+    "@vnejs/sources-set": "~0.2.0",
+    "@vnejs/uis.react": "~0.2.0"
+  }
 }

package/src/index.ts

@@ -0,0 +1,9 @@
+import "@vnejs/contracts.views.settings";
+
+import { regPlugin } from "@vnejs/shared";
+import { PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/contracts.views.settings";
+
+import { SettingsViewController } from "./modules/controller.js";
+import { SettingsView } from "./modules/view.js";
+
+regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [SettingsViewController, SettingsView]);

package/src/modules/controller.ts

@@ -0,0 +1,161 @@
+import { ModuleController } from "@vnejs/module.components";
+
+import type { SettingsViewPluginConstants, SettingsViewPluginEvents, SettingsViewPluginParams, SettingsViewPluginSettings } from "../types.js";
+import type { SettingsViewPluginState, SettingsViewTabContent, SettingsViewTabPayload } from "../utils/settings.js";
+
+export class SettingsViewController extends ModuleController<
+  SettingsViewPluginEvents,
+  SettingsViewPluginConstants,
+  SettingsViewPluginSettings,
+  SettingsViewPluginParams,
+  SettingsViewPluginState
+> {
+  name = "settings.fields.controller";
+
+  updateEvent = this.EVENTS.SETTINGS_VIEW.UPDATE;
+  controlsIndex = this.PARAMS.SETTINGS_VIEW.ZINDEX;
+
+  tabKeyOf = ({ tabKey, tab }: SettingsViewTabPayload = {}) => tabKey || tab?.titleLocKey || "default";
+
+  tabContentOf = (tab: SettingsViewTabPayload["tab"], locs?: Record<string, string>): SettingsViewTabContent => ({
+    fields: tab?.fields ?? [],
+    showTextExample: Boolean(tab?.showTextExample),
+    locs,
+  });
+
+  applyTab = (payload: SettingsViewTabPayload = {}) => {
+    const { tab, locs } = payload;
+    const fields = tab?.fields ?? [];
+    const key = this.tabKeyOf(payload);
+
+    this.maxCurrentItem = Math.max((fields.length ?? 1) - 1, 0);
+
+    const tabsContent = payload.tabs
+      ? Object.fromEntries(
+          Object.entries(payload.tabs).map(([tabKey, settingsTab]) => [tabKey, this.tabContentOf(settingsTab, locs)]),
+        )
+      : { ...(this.state.tabsContent ?? {}), [key]: this.tabContentOf(tab, locs) };
+
+    return {
+      tab,
+      tabKey: key,
+      tabsContent,
+      fields,
+      locs,
+      showTextExample: Boolean(tab?.showTextExample),
+      currentItemInner: 0,
+    };
+  };
+
+  onShowFields = (payload: SettingsViewTabPayload = {}) => this.onShow(payload);
+
+  onTabSet = async (payload: SettingsViewTabPayload = {}) => {
+    if (!this.state.isShow) return this.onShow(payload);
+
+    const isForce = Boolean(payload.isForce || this.shared.viewForceAnimationSources?.isNotEmpty());
+
+    this.currentItem = null;
+
+    const next = { ...this.applyTab(payload), currentItem: null as null };
+
+    if (isForce) return this.updateStateAndViewForce(next);
+
+    const key = next.tabKey!;
+    const alreadyMounted = Boolean(this.state.tabsContent?.[key]);
+
+    // Mount the incoming tab at opacity 0 first so CSS can crossfade both layers together.
+    if (!alreadyMounted) {
+      await this.updateStateAndViewFast({ tabsContent: next.tabsContent });
+      await this.waitRerender();
+    }
+
+    return this.updateStateAndView(next);
+  };
+
+  onArrowLeft = () => {
+    const { currentItemInner = 0, currentItem, fields = [] } = this.state;
+
+    if (currentItem == null || !fields.length) return;
+
+    const { settingKey = "", step = 0, min = 0, type = "", options = [] } = fields[currentItem];
+    if (!settingKey) return;
+
+    if (options?.length) {
+      const newValue = (currentItemInner === 0 ? options.length : (currentItemInner ?? 0)) - 1;
+
+      return this.updateStateAndViewFast({ currentItemInner: newValue });
+    }
+
+    if (type === "toggle") {
+      return this.shared.settings[settingKey] === true && void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: false });
+    }
+
+    if (type === "range") {
+      const newValue = Number(Number(Number(this.shared.settings[settingKey]) - step).toFixed(4));
+
+      return newValue >= min && void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: newValue });
+    }
+  };
+
+  onArrowRight = () => {
+    const { currentItemInner = 0, currentItem, fields = [] } = this.state;
+
+    if (currentItem == null || !fields.length) return;
+
+    const { settingKey = "", step = 0, max = 0, type = "", options = [] } = fields[currentItem];
+    if (!settingKey) return;
+
+    if (options?.length) {
+      return this.updateStateAndViewFast({ currentItemInner: ((currentItemInner ?? 0) + 1) % options.length });
+    }
+
+    if (type === "toggle") {
+      return this.shared.settings[settingKey] === false && void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: true });
+    }
+
+    if (type === "range") {
+      const newValue = Number(Number(Number(this.shared.settings[settingKey]) + step).toFixed(4));
+
+      return newValue <= max && void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: newValue });
+    }
+  };
+
+  onInteract = () => {
+    const { currentItemInner = 0, currentItem, fields = [], locs = {} } = this.state;
+
+    if (currentItem == null || !fields.length) return;
+
+    const { settingKey = "", type = "", options = [] } = fields[currentItem];
+    if (!settingKey) return;
+
+    if (options?.length)
+      return options[currentItemInner ?? 0].action
+        ? this.PARAMS.SETTINGS_VIEW.ACTIONS[options[currentItemInner ?? 0].action!](this, locs)
+        : void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: options[currentItemInner ?? 0].value });
+
+    if (type === "toggle") return void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: !this.shared.settings[settingKey] });
+  };
+
+  controls = {
+    [this.CONST.CONTROLS.BUTTONS.INTERACT]: () => void this.onInteract(),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_LEFT]: () => void this.onArrowLeft(),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_RIGHT]: () => void this.onArrowRight(),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: this.decCurrentItem,
+    [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: this.incCurrentItem,
+  };
+  controlsCheckNext = true;
+
+  subscribe = () => {
+    this.on(this.EVENTS.SETTINGS_VIEW.SHOW, this.onShowFields);
+    this.on(this.EVENTS.SETTINGS_VIEW.HIDE, this.onHide);
+    this.on(this.EVENTS.SETTINGS_VIEW.TAB_SET, this.onTabSet);
+
+    this.on(this.EVENTS.SETTINGS.CHANGED, this.onSettingChange);
+    this.on(this.EVENTS.COMPONENTS.EXTERNAL_UPDATE, this.onSettingChange);
+  };
+
+  beforeShow = async (payload: SettingsViewTabPayload = {}) => this.updateState(this.applyTab(payload));
+  afterHide = () => this.setDefaultState();
+
+  onSettingChange = () => this.state.isShow && this.updateViewFast();
+}

package/src/modules/view.ts

@@ -0,0 +1,22 @@
+import { ModuleView } from "@vnejs/module.components";
+
+import { render } from "../view/index.js";
+import type { SettingsViewPluginConstants, SettingsViewPluginEvents, SettingsViewPluginParams, SettingsViewPluginSettings } from "../types.js";
+import type { SettingsViewPluginState } from "../utils/settings.js";
+
+export class SettingsView extends ModuleView<
+  SettingsViewPluginEvents,
+  SettingsViewPluginConstants,
+  SettingsViewPluginSettings,
+  SettingsViewPluginParams,
+  SettingsViewPluginState
+> {
+  name = "settings.fields.view";
+
+  locLabel = this.PARAMS.SETTINGS_VIEW.LOC_LABEL;
+  animationTime = this.PARAMS.SETTINGS_VIEW.TRANSITION;
+  updateEvent = this.EVENTS.SETTINGS_VIEW.UPDATE;
+
+  renderFunc = render;
+  updateHandler = this.onUpdateStoreComponent;
+}