@vnejs/plugins.views.settings 0.2.1 → 0.2.3

package/dist/index.js

@@ -2,5 +2,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 { SettingsViewArrows } from "./modules/arrows.js";
 import { SettingsView } from "./modules/view.js";
-regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [SettingsViewController, SettingsView]);
+regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [SettingsViewController, SettingsViewArrows, SettingsView]);

package/dist/modules/arrows.d.ts

@@ -0,0 +1,18 @@
+import type { SettingsField } from "@vnejs/contracts.views.settings";
+import { ModuleControllerArrowsVertical } from "@vnejs/module.controller.arrows.vertical";
+import type { SettingsViewPluginConstants, SettingsViewPluginEvents, SettingsViewPluginParams, SettingsViewPluginSettings } from "../types.js";
+import type { SettingsViewTabPayload } from "../utils/settings.js";
+export declare class SettingsViewArrows extends ModuleControllerArrowsVertical<SettingsViewPluginEvents, SettingsViewPluginConstants, SettingsViewPluginSettings, SettingsViewPluginParams> {
+    name: string;
+    EVENT_SHOW: "vne:settings_view:show";
+    EVENT_HIDE: "vne:settings_view:hide";
+    EVENT_STATE_UPDATE: "vne:settings_view:state_update";
+    EVENT_UPDATE_FAST: "vne:settings_view:update_fast";
+    CONTROLS_ZINDEX: number;
+    fields: SettingsField[];
+    subscribe: () => void;
+    onShow: (payload?: SettingsViewTabPayload) => Promise<unknown[]> | undefined;
+    onTabSet: (payload?: SettingsViewTabPayload) => void;
+    getMaxCurrentItem: () => number;
+    syncFields: (payload?: SettingsViewTabPayload) => void;
+}

package/dist/modules/arrows.js

@@ -0,0 +1,34 @@
+import { ModuleControllerArrowsVertical } from "@vnejs/module.controller.arrows.vertical";
+export class SettingsViewArrows extends ModuleControllerArrowsVertical {
+    name = "settings.fields.controller.arrows";
+    EVENT_SHOW = this.EVENTS.SETTINGS_VIEW.SHOW;
+    EVENT_HIDE = this.EVENTS.SETTINGS_VIEW.HIDE;
+    EVENT_STATE_UPDATE = this.EVENTS.SETTINGS_VIEW.STATE_UPDATE;
+    EVENT_UPDATE_FAST = this.EVENTS.SETTINGS_VIEW.UPDATE_FAST;
+    CONTROLS_ZINDEX = this.PARAMS.SETTINGS_VIEW.ZINDEX;
+    fields = [];
+    subscribe = () => {
+        this.on(this.EVENT_SHOW, this.onShow);
+        this.on(this.EVENT_HIDE, this.onHide);
+        this.on(this.EVENTS.SETTINGS_VIEW.TAB_SET, this.onTabSet);
+    };
+    onShow = (payload = {}) => {
+        this.syncFields(payload);
+        this.currentItem = null;
+        return this.emit(this.EVENTS.CONTROLS.PUSH, {
+            key: this.name,
+            controls: this.controls,
+            index: this.CONTROLS_ZINDEX + 1,
+            checkNext: true,
+        });
+    };
+    onTabSet = (payload = {}) => {
+        this.syncFields(payload);
+        this.currentItem = null;
+        this.emitCurrentItem();
+    };
+    getMaxCurrentItem = () => Math.max((this.fields.length ?? 1) - 1, 0);
+    syncFields = (payload = {}) => {
+        this.fields = payload.tab?.fields ?? [];
+    };
+}

package/dist/modules/controller.d.ts

@@ -1,4 +1,5 @@
 import { ModuleController } from "@vnejs/module.components";
+import type { SettingsField } from "@vnejs/contracts.views.settings";
 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> {
@@ -13,22 +14,25 @@ export declare class SettingsViewController extends ModuleController<SettingsVie
         tabsContent: {
             [k: string]: SettingsViewTabContent;
         };
-        fields: import("@vnejs/contracts.views.settings").SettingsField[];
+        fields: 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;
+    onStateUpdate: (payload?: Partial<SettingsViewPluginState>) => void;
+    getFocusedField: () => SettingsField | undefined;
+    innerIndexOfField: (field?: SettingsField) => number;
+    optionIndexOf: (length: number, index?: number) => number;
+    shiftOptions: (direction: -1 | 1) => void;
+    onArrowLeft: () => void | false;
+    onArrowRight: () => void | false;
     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;

package/dist/modules/controller.js

@@ -13,7 +13,6 @@ export class SettingsViewController extends ModuleController {
         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) };
@@ -32,8 +31,7 @@ export class SettingsViewController extends ModuleController {
         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 };
+        const next = { ...this.applyTab(payload), currentArrowVerticalItem: null };
         if (isForce)
             return this.updateStateAndViewForce(next);
         const key = next.tabKey;
@@ -45,17 +43,54 @@ export class SettingsViewController extends ModuleController {
         }
         return this.updateStateAndView(next);
     };
-    onArrowLeft = () => {
-        const { currentItemInner = 0, currentItem, fields = [] } = this.state;
-        if (currentItem == null || !fields.length)
+    onStateUpdate = (payload = {}) => {
+        const currentArrowVerticalItem = payload.currentArrowVerticalItem;
+        const field = currentArrowVerticalItem == null ? undefined : this.state.fields?.[currentArrowVerticalItem];
+        this.updateState({ ...payload, currentItemInner: this.innerIndexOfField(field) });
+    };
+    getFocusedField = () => {
+        const { currentArrowVerticalItem, fields = [] } = this.state;
+        if (currentArrowVerticalItem == null || !fields.length)
             return;
-        const { settingKey = "", step = 0, min = 0, type = "", options = [] } = fields[currentItem];
+        return fields[currentArrowVerticalItem];
+    };
+    innerIndexOfField = (field) => {
+        const options = field?.options ?? [];
+        if (!options.length)
+            return 0;
+        const settingKey = field?.settingKey;
         if (!settingKey)
+            return 0;
+        const index = options.findIndex((option) => option.value === this.shared.settings[settingKey]);
+        return index >= 0 ? index : 0;
+    };
+    optionIndexOf = (length, index = 0) => {
+        if (!length)
+            return 0;
+        return ((index % length) + length) % length;
+    };
+    shiftOptions = (direction) => {
+        const field = this.getFocusedField();
+        const options = field?.options ?? [];
+        if (!options.length)
             return;
-        if (options?.length) {
-            const newValue = (currentItemInner === 0 ? options.length : (currentItemInner ?? 0)) - 1;
-            return this.updateStateAndViewFast({ currentItemInner: newValue });
+        const currentItemInner = this.optionIndexOf(options.length, (this.state.currentItemInner ?? 0) + direction);
+        const option = options[currentItemInner];
+        const settingKey = field?.settingKey;
+        void this.updateStateAndViewFast({ currentItemInner });
+        if (settingKey && option && !option.action) {
+            void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: option.value });
         }
+    };
+    onArrowLeft = () => {
+        const field = this.getFocusedField();
+        if (!field)
+            return;
+        if (field.options?.length)
+            return this.shiftOptions(-1);
+        const { settingKey = "", step = 0, min = 0, type = "" } = field;
+        if (!settingKey)
+            return;
         if (type === "toggle") {
             return this.shared.settings[settingKey] === true && void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: false });
         }
@@ -65,15 +100,14 @@ export class SettingsViewController extends ModuleController {
         }
     };
     onArrowRight = () => {
-        const { currentItemInner = 0, currentItem, fields = [] } = this.state;
-        if (currentItem == null || !fields.length)
+        const field = this.getFocusedField();
+        if (!field)
             return;
-        const { settingKey = "", step = 0, max = 0, type = "", options = [] } = fields[currentItem];
+        if (field.options?.length)
+            return this.shiftOptions(1);
+        const { settingKey = "", step = 0, max = 0, type = "" } = field;
         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 });
         }
@@ -83,16 +117,23 @@ export class SettingsViewController extends ModuleController {
         }
     };
     onInteract = () => {
-        const { currentItemInner = 0, currentItem, fields = [], locs = {} } = this.state;
-        if (currentItem == null || !fields.length)
+        const field = this.getFocusedField();
+        if (!field)
+            return;
+        const { settingKey = "", type = "", options = [] } = field;
+        const { locs = {} } = this.state;
+        if (options?.length) {
+            const option = options[this.optionIndexOf(options.length, this.state.currentItemInner ?? 0)];
+            if (!option)
+                return;
+            if (option.action)
+                return this.PARAMS.SETTINGS_VIEW.ACTIONS[option.action](this, locs);
+            if (settingKey)
+                return void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: option.value });
             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] });
     };
@@ -100,14 +141,14 @@ export class SettingsViewController extends ModuleController {
         [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_VIEW.STATE_UPDATE, this.onStateUpdate);
+        this.on(this.EVENTS.SETTINGS_VIEW.UPDATE_FAST, this.updateViewFast);
         this.on(this.EVENTS.SETTINGS.CHANGED, this.onSettingChange);
         this.on(this.EVENTS.COMPONENTS.EXTERNAL_UPDATE, this.onSettingChange);
     };

package/dist/utils/settings.d.ts

@@ -13,7 +13,7 @@ export type SettingsViewPluginState = {
     fields?: SettingsField[];
     locs?: Record<string, string>;
     showTextExample?: boolean;
-    currentItem?: number | null;
+    currentArrowVerticalItem?: number | null;
     currentItemInner?: number | null;
 };
 export type SettingsViewTabPayload = {

package/dist/view/index.js

@@ -3,7 +3,7 @@ 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 { isShow = false, isForce = false, locs = {}, tabsContent = {}, tabKey = "", currentArrowVerticalItem = null, currentItemInner = null, } = useStoreState(store, onMount);
     const isRealForce = useIsForceHook(isForce);
     const propsByView = PARAMS.SETTINGS_VIEW.VIEW_PROPS;
     const propsView = useMemo(() => ({
@@ -12,7 +12,7 @@ const SettingsViewComponent = ({ store, onMount, PARAMS, emit, EVENTS, shared, C
         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]);
+    const propsTab = useMemo(() => ({ store, onMount, PARAMS, emit, EVENTS, shared, CONST, SETTINGS, isForce: isRealForce, currentItem: currentArrowVerticalItem, currentItemInner, locs }), [store, onMount, PARAMS, emit, EVENTS, shared, CONST, SETTINGS, isRealForce, currentArrowVerticalItem, 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,6 +1,6 @@
 {
   "name": "@vnejs/plugins.views.settings",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -36,6 +36,7 @@
     "@vnejs/helpers": "~0.2.0",
     "@vnejs/module.core": "~0.2.0",
     "@vnejs/module.components": "~0.2.0",
+    "@vnejs/module.controller.arrows.vertical": "~0.2.0",
     "@vnejs/contracts.controls": "~0.2.0",
     "@vnejs/contracts.core.settings": "~0.2.0",
     "@vnejs/contracts.settings.textsize": "~0.2.0",
@@ -55,6 +56,7 @@
     "@vnejs/helpers": "~0.2.0",
     "@vnejs/module.core": "~0.2.0",
     "@vnejs/module.components": "~0.2.0",
+    "@vnejs/module.controller.arrows.vertical": "~0.2.0",
     "@vnejs/shared": "~0.2.0",
     "@vnejs/sources-set": "~0.2.0",
     "@vnejs/uis.react": "~0.2.0"

package/src/index.ts

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

package/src/modules/arrows.ts

@@ -0,0 +1,54 @@
+import type { ControlsPushPayload } from "@vnejs/contracts.controls";
+import type { SettingsField } from "@vnejs/contracts.views.settings";
+import { ModuleControllerArrowsVertical } from "@vnejs/module.controller.arrows.vertical";
+
+import type { SettingsViewPluginConstants, SettingsViewPluginEvents, SettingsViewPluginParams, SettingsViewPluginSettings } from "../types.js";
+import type { SettingsViewTabPayload } from "../utils/settings.js";
+
+export class SettingsViewArrows extends ModuleControllerArrowsVertical<
+  SettingsViewPluginEvents,
+  SettingsViewPluginConstants,
+  SettingsViewPluginSettings,
+  SettingsViewPluginParams
+> {
+  name = "settings.fields.controller.arrows";
+
+  EVENT_SHOW = this.EVENTS.SETTINGS_VIEW.SHOW;
+  EVENT_HIDE = this.EVENTS.SETTINGS_VIEW.HIDE;
+  EVENT_STATE_UPDATE = this.EVENTS.SETTINGS_VIEW.STATE_UPDATE;
+  EVENT_UPDATE_FAST = this.EVENTS.SETTINGS_VIEW.UPDATE_FAST;
+
+  CONTROLS_ZINDEX = this.PARAMS.SETTINGS_VIEW.ZINDEX;
+
+  fields: SettingsField[] = [];
+
+  subscribe = () => {
+    this.on(this.EVENT_SHOW, this.onShow);
+    this.on(this.EVENT_HIDE, this.onHide);
+    this.on(this.EVENTS.SETTINGS_VIEW.TAB_SET, this.onTabSet);
+  };
+
+  onShow = (payload: SettingsViewTabPayload = {}) => {
+    this.syncFields(payload);
+    this.currentItem = null;
+
+    return this.emit(this.EVENTS.CONTROLS.PUSH, {
+      key: this.name,
+      controls: this.controls,
+      index: this.CONTROLS_ZINDEX + 1,
+      checkNext: true,
+    } satisfies ControlsPushPayload);
+  };
+
+  onTabSet = (payload: SettingsViewTabPayload = {}) => {
+    this.syncFields(payload);
+    this.currentItem = null;
+    this.emitCurrentItem();
+  };
+
+  getMaxCurrentItem = () => Math.max((this.fields.length ?? 1) - 1, 0);
+
+  syncFields = (payload: SettingsViewTabPayload = {}) => {
+    this.fields = payload.tab?.fields ?? [];
+  };
+}

package/src/modules/controller.ts

@@ -1,4 +1,5 @@
 import { ModuleController } from "@vnejs/module.components";
+import type { SettingsField } from "@vnejs/contracts.views.settings";
 
 import type { SettingsViewPluginConstants, SettingsViewPluginEvents, SettingsViewPluginParams, SettingsViewPluginSettings } from "../types.js";
 import type { SettingsViewPluginState, SettingsViewTabContent, SettingsViewTabPayload } from "../utils/settings.js";
@@ -28,8 +29,6 @@ export class SettingsViewController extends ModuleController<
     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)]),
@@ -54,9 +53,7 @@ export class SettingsViewController extends ModuleController<
 
     const isForce = Boolean(payload.isForce || this.shared.viewForceAnimationSources?.isNotEmpty());
 
-    this.currentItem = null;
-
-    const next = { ...this.applyTab(payload), currentItem: null as null };
+    const next = { ...this.applyTab(payload), currentArrowVerticalItem: null as null };
 
     if (isForce) return this.updateStateAndViewForce(next);
 
@@ -72,19 +69,65 @@ export class SettingsViewController extends ModuleController<
     return this.updateStateAndView(next);
   };
 
-  onArrowLeft = () => {
-    const { currentItemInner = 0, currentItem, fields = [] } = this.state;
+  onStateUpdate = (payload: Partial<SettingsViewPluginState> = {}) => {
+    const currentArrowVerticalItem = payload.currentArrowVerticalItem;
+    const field = currentArrowVerticalItem == null ? undefined : this.state.fields?.[currentArrowVerticalItem];
 
-    if (currentItem == null || !fields.length) return;
+    this.updateState({ ...payload, currentItemInner: this.innerIndexOfField(field) });
+  };
 
-    const { settingKey = "", step = 0, min = 0, type = "", options = [] } = fields[currentItem];
-    if (!settingKey) return;
+  getFocusedField = () => {
+    const { currentArrowVerticalItem, fields = [] } = this.state;
 
-    if (options?.length) {
-      const newValue = (currentItemInner === 0 ? options.length : (currentItemInner ?? 0)) - 1;
+    if (currentArrowVerticalItem == null || !fields.length) return;
+
+    return fields[currentArrowVerticalItem];
+  };
+
+  innerIndexOfField = (field?: SettingsField) => {
+    const options = field?.options ?? [];
+    if (!options.length) return 0;
+
+    const settingKey = field?.settingKey;
+    if (!settingKey) return 0;
+
+    const index = options.findIndex((option) => option.value === this.shared.settings[settingKey]);
+
+    return index >= 0 ? index : 0;
+  };
+
+  optionIndexOf = (length: number, index = 0) => {
+    if (!length) return 0;
+
+    return ((index % length) + length) % length;
+  };
+
+  shiftOptions = (direction: -1 | 1) => {
+    const field = this.getFocusedField();
+    const options = field?.options ?? [];
+
+    if (!options.length) return;
+
+    const currentItemInner = this.optionIndexOf(options.length, (this.state.currentItemInner ?? 0) + direction);
+    const option = options[currentItemInner];
+    const settingKey = field?.settingKey;
+
+    void this.updateStateAndViewFast({ currentItemInner });
 
-      return this.updateStateAndViewFast({ currentItemInner: newValue });
+    if (settingKey && option && !option.action) {
+      void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: option.value });
     }
+  };
+
+  onArrowLeft = () => {
+    const field = this.getFocusedField();
+
+    if (!field) return;
+
+    if (field.options?.length) return this.shiftOptions(-1);
+
+    const { settingKey = "", step = 0, min = 0, type = "" } = field;
+    if (!settingKey) return;
 
     if (type === "toggle") {
       return this.shared.settings[settingKey] === true && void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: false });
@@ -98,16 +141,14 @@ export class SettingsViewController extends ModuleController<
   };
 
   onArrowRight = () => {
-    const { currentItemInner = 0, currentItem, fields = [] } = this.state;
+    const field = this.getFocusedField();
 
-    if (currentItem == null || !fields.length) return;
+    if (!field) return;
 
-    const { settingKey = "", step = 0, max = 0, type = "", options = [] } = fields[currentItem];
-    if (!settingKey) return;
+    if (field.options?.length) return this.shiftOptions(1);
 
-    if (options?.length) {
-      return this.updateStateAndViewFast({ currentItemInner: ((currentItemInner ?? 0) + 1) % options.length });
-    }
+    const { settingKey = "", step = 0, max = 0, type = "" } = field;
+    if (!settingKey) return;
 
     if (type === "toggle") {
       return this.shared.settings[settingKey] === false && void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: true });
@@ -121,17 +162,25 @@ export class SettingsViewController extends ModuleController<
   };
 
   onInteract = () => {
-    const { currentItemInner = 0, currentItem, fields = [], locs = {} } = this.state;
+    const field = this.getFocusedField();
 
-    if (currentItem == null || !fields.length) return;
+    if (!field) return;
 
-    const { settingKey = "", type = "", options = [] } = fields[currentItem];
-    if (!settingKey) return;
+    const { settingKey = "", type = "", options = [] } = field;
+    const { locs = {} } = this.state;
+
+    if (options?.length) {
+      const option = options[this.optionIndexOf(options.length, this.state.currentItemInner ?? 0)];
+
+      if (!option) 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 (option.action) return this.PARAMS.SETTINGS_VIEW.ACTIONS[option.action](this, locs);
+      if (settingKey) return void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: option.value });
+
+      return;
+    }
+
+    if (!settingKey) return;
 
     if (type === "toggle") return void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: !this.shared.settings[settingKey] });
   };
@@ -140,8 +189,6 @@ export class SettingsViewController extends ModuleController<
     [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;
 
@@ -149,6 +196,8 @@ export class SettingsViewController extends ModuleController<
     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_VIEW.STATE_UPDATE, this.onStateUpdate);
+    this.on(this.EVENTS.SETTINGS_VIEW.UPDATE_FAST, this.updateViewFast);
 
     this.on(this.EVENTS.SETTINGS.CHANGED, this.onSettingChange);
     this.on(this.EVENTS.COMPONENTS.EXTERNAL_UPDATE, this.onSettingChange);

package/src/tests/arrows.test.ts

@@ -0,0 +1,97 @@
+import { beforeEach, describe, expect, it } from "vitest";
+
+import { spyEvent } from "@vnejs/test-utils";
+
+import { SettingsViewArrows } from "../modules/arrows.js";
+import { CONTROLS_EVENTS, createSettingsViewTestModule, registerSettingsViewPluginVne, SUBSCRIBE_EVENTS } from "./setup.js";
+
+const generalTab = {
+  titleLocKey: "general",
+  fields: [{ settingKey: "a", type: "toggle" }, { settingKey: "b", type: "toggle" }],
+};
+
+describe("SettingsViewArrows", () => {
+  beforeEach(() => {
+    registerSettingsViewPluginVne();
+  });
+
+  it("SHOW pushes arrow controls above the controller layer", async () => {
+    const { module, observer } = createSettingsViewTestModule(SettingsViewArrows);
+    const arrows = module as SettingsViewArrows;
+    const push = spyEvent(observer, CONTROLS_EVENTS.PUSH);
+
+    await observer.emit(SUBSCRIBE_EVENTS.SHOW, { tab: generalTab });
+
+    expect(arrows.currentItem).toBeNull();
+    expect(arrows.fields).toHaveLength(2);
+    expect(push).toHaveBeenCalledExactlyOnceWith(
+      expect.objectContaining({
+        key: "settings.fields.controller.arrows",
+        checkNext: true,
+        index: arrows.PARAMS.SETTINGS_VIEW.ZINDEX + 1,
+      }),
+    );
+  });
+
+  it("HIDE pops arrow controls", async () => {
+    const { observer } = createSettingsViewTestModule(SettingsViewArrows);
+    const pop = spyEvent(observer, CONTROLS_EVENTS.POP);
+
+    await observer.emit(SUBSCRIBE_EVENTS.HIDE);
+
+    expect(pop).toHaveBeenCalledExactlyOnceWith({ key: "settings.fields.controller.arrows" });
+  });
+
+  it("first ARROW_BOTTOM selects 0 and emits STATE_UPDATE plus UPDATE_FAST", async () => {
+    const { module, observer } = createSettingsViewTestModule(SettingsViewArrows);
+    const arrows = module as SettingsViewArrows;
+    const stateUpdate = spyEvent(observer, SUBSCRIBE_EVENTS.STATE_UPDATE);
+    const updateFast = spyEvent(observer, SUBSCRIBE_EVENTS.UPDATE_FAST);
+
+    await observer.emit(SUBSCRIBE_EVENTS.SHOW, { tab: generalTab });
+    await arrows.incCurrentItem();
+
+    expect(arrows.currentItem).toBe(0);
+    expect(stateUpdate).toHaveBeenCalledExactlyOnceWith({ currentArrowVerticalItem: 0 });
+    expect(updateFast).toHaveBeenCalledOnce();
+  });
+
+  it("arrow wrap cycles fields", async () => {
+    const { module, observer } = createSettingsViewTestModule(SettingsViewArrows);
+    const arrows = module as SettingsViewArrows;
+    const stateUpdate = spyEvent(observer, SUBSCRIBE_EVENTS.STATE_UPDATE);
+
+    await observer.emit(SUBSCRIBE_EVENTS.SHOW, { tab: generalTab });
+    await arrows.incCurrentItem();
+    await arrows.incCurrentItem();
+    expect(arrows.currentItem).toBe(1);
+
+    await arrows.incCurrentItem();
+    expect(arrows.currentItem).toBe(0);
+    expect(stateUpdate).toHaveBeenLastCalledWith({ currentArrowVerticalItem: 0 });
+
+    await arrows.decCurrentItem();
+    expect(arrows.currentItem).toBe(1);
+  });
+
+  it("TAB_SET resets currentItem and syncs fields", async () => {
+    const { module, observer } = createSettingsViewTestModule(SettingsViewArrows);
+    const arrows = module as SettingsViewArrows;
+    const stateUpdate = spyEvent(observer, SUBSCRIBE_EVENTS.STATE_UPDATE);
+
+    await observer.emit(SUBSCRIBE_EVENTS.SHOW, { tab: generalTab });
+    await arrows.incCurrentItem();
+    expect(arrows.currentItem).toBe(0);
+
+    await observer.emit(SUBSCRIBE_EVENTS.TAB_SET, {
+      tab: {
+        titleLocKey: "audio",
+        fields: [{ settingKey: "c", type: "toggle" }, { settingKey: "d", type: "toggle" }, { settingKey: "e", type: "toggle" }],
+      },
+    });
+
+    expect(arrows.currentItem).toBeNull();
+    expect(arrows.fields).toHaveLength(3);
+    expect(stateUpdate).toHaveBeenLastCalledWith({ currentArrowVerticalItem: null });
+  });
+});

package/src/tests/controller.test.ts

@@ -1,4 +1,4 @@
-import { beforeEach, describe, expect, it } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import { spyEvent } from "@vnejs/test-utils";
 import { SUBSCRIBE_EVENTS as SETTINGS_EVENTS } from "@vnejs/contracts.core.settings";
@@ -11,7 +11,7 @@ describe("SettingsViewController", () => {
     registerSettingsViewPluginVne();
   });
 
-  it("SHOW stores fields from tab and maxCurrentItem", async () => {
+  it("SHOW stores fields from tab", async () => {
     const { module, observer } = createSettingsViewTestModule(SettingsViewController);
 
     await observer.emit(SUBSCRIBE_EVENTS.SHOW, {
@@ -26,7 +26,6 @@ describe("SettingsViewController", () => {
     });
 
     expect((module as SettingsViewController).state.fields).toHaveLength(2);
-    expect((module as SettingsViewController).maxCurrentItem).toBe(1);
     expect((module as SettingsViewController).state.isShow).toBe(true);
     expect((module as SettingsViewController).state.tabKey).toBe("general");
     expect(Object.keys((module as SettingsViewController).state.tabsContent ?? {})).toEqual(["general"]);
@@ -41,8 +40,7 @@ describe("SettingsViewController", () => {
       tab: { titleLocKey: "general", fields: [{ settingKey: "test.toggle", type: "toggle" }] },
     });
 
-    (module as SettingsViewController).currentItem = 0;
-    (module as SettingsViewController).updateState({ currentItem: 0 });
+    (module as SettingsViewController).updateState({ currentArrowVerticalItem: 0 });
 
     const settingsSet = spyEvent(observer, SETTINGS_EVENTS.SET);
 
@@ -85,9 +83,151 @@ describe("SettingsViewController", () => {
 
     expect((module as SettingsViewController).state.fields).toHaveLength(2);
     expect((module as SettingsViewController).state.showTextExample).toBe(true);
-    expect((module as SettingsViewController).maxCurrentItem).toBe(1);
     expect((module as SettingsViewController).state.currentItemInner).toBe(0);
+    expect((module as SettingsViewController).state.currentArrowVerticalItem).toBeNull();
     expect((module as SettingsViewController).state.tabKey).toBe("audio");
     expect(Object.keys((module as SettingsViewController).state.tabsContent ?? {}).sort()).toEqual(["audio", "general"]);
   });
+
+  it("ARROW_RIGHT on selector_texts cycles inner and SET", async () => {
+    const { module, observer } = createSettingsViewTestModule(SettingsViewController, {
+      shared: { settings: { "test.lang": "ru" } },
+    });
+
+    await observer.emit(SUBSCRIBE_EVENTS.SHOW, {
+      tab: {
+        titleLocKey: "general",
+        fields: [
+          {
+            settingKey: "test.lang",
+            type: "selector_texts",
+            options: [
+              { text: "ru", value: "ru" },
+              { text: "en", value: "en" },
+              { text: "de", value: "de" },
+            ],
+          },
+        ],
+      },
+    });
+
+    const controller = module as SettingsViewController;
+
+    controller.updateState({ currentArrowVerticalItem: 0, currentItemInner: 0 });
+
+    const settingsSet = spyEvent(observer, SETTINGS_EVENTS.SET);
+
+    controller.onArrowRight();
+
+    expect(controller.state.currentItemInner).toBe(1);
+    expect(settingsSet).toHaveBeenCalledExactlyOnceWith({ name: "test.lang", value: "en" });
+  });
+
+  it("ARROW_LEFT on selector_texts wraps inner and SET", async () => {
+    const { module, observer } = createSettingsViewTestModule(SettingsViewController, {
+      shared: { settings: { "test.lang": "ru" } },
+    });
+
+    await observer.emit(SUBSCRIBE_EVENTS.SHOW, {
+      tab: {
+        titleLocKey: "general",
+        fields: [
+          {
+            settingKey: "test.lang",
+            type: "selector_texts",
+            options: [
+              { text: "ru", value: "ru" },
+              { text: "en", value: "en" },
+              { text: "de", value: "de" },
+            ],
+          },
+        ],
+      },
+    });
+
+    const controller = module as SettingsViewController;
+
+    controller.updateState({ currentArrowVerticalItem: 0, currentItemInner: 0 });
+
+    const settingsSet = spyEvent(observer, SETTINGS_EVENTS.SET);
+
+    controller.onArrowLeft();
+
+    expect(controller.state.currentItemInner).toBe(2);
+    expect(settingsSet).toHaveBeenCalledExactlyOnceWith({ name: "test.lang", value: "de" });
+  });
+
+  it("ARROW_* on actions without settingKey only moves inner", async () => {
+    const { module, observer } = createSettingsViewTestModule(SettingsViewController);
+    const controller = module as SettingsViewController;
+    const doA = vi.fn();
+    const doB = vi.fn();
+
+    controller.PARAMS.SETTINGS_VIEW.ACTIONS.do_a = doA;
+    controller.PARAMS.SETTINGS_VIEW.ACTIONS.do_b = doB;
+
+    await observer.emit(SUBSCRIBE_EVENTS.SHOW, {
+      tab: {
+        titleLocKey: "general",
+        fields: [
+          {
+            type: "actions",
+            options: [
+              { locKey: "a", action: "do_a" },
+              { locKey: "b", action: "do_b" },
+            ],
+          },
+        ],
+      },
+    });
+
+    controller.updateState({ currentArrowVerticalItem: 0, currentItemInner: 0 });
+
+    const settingsSet = spyEvent(observer, SETTINGS_EVENTS.SET);
+
+    controller.onArrowLeft();
+
+    expect(controller.state.currentItemInner).toBe(1);
+    expect(doA).not.toHaveBeenCalled();
+    expect(doB).not.toHaveBeenCalled();
+    expect(settingsSet).not.toHaveBeenCalled();
+
+    controller.onInteract();
+
+    expect(doB).toHaveBeenCalledOnce();
+    expect(doA).not.toHaveBeenCalled();
+  });
+
+  it("STATE_UPDATE syncs currentItemInner to the current option", async () => {
+    const { module, observer } = createSettingsViewTestModule(SettingsViewController, {
+      shared: { settings: { "test.lang": "en" } },
+    });
+
+    await observer.emit(SUBSCRIBE_EVENTS.SHOW, {
+      tab: {
+        titleLocKey: "general",
+        fields: [
+          { settingKey: "a", type: "toggle" },
+          {
+            settingKey: "test.lang",
+            type: "selector_texts",
+            options: [
+              { text: "ru", value: "ru" },
+              { text: "en", value: "en" },
+              { text: "de", value: "de" },
+            ],
+          },
+        ],
+      },
+    });
+
+    const controller = module as SettingsViewController;
+
+    controller.updateState({ currentArrowVerticalItem: 0, currentItemInner: 99 });
+
+    await observer.emit(SUBSCRIBE_EVENTS.STATE_UPDATE, { currentArrowVerticalItem: 1 });
+
+    expect(controller.state.currentArrowVerticalItem).toBe(1);
+    expect(controller.state.currentItemInner).toBe(1);
+  });
 });

package/src/tests/setup.ts

@@ -23,7 +23,7 @@ export const createSettingsViewTestModule = <T extends Parameters<typeof baseCre
   const result = baseCreateTestModule(ModuleClass, {
     ...rest,
     state: {
-      "settings.fields.controller": { isShow: false, fields: [], currentItem: null, currentItemInner: 0 },
+      "settings.fields.controller": { isShow: false, fields: [], currentArrowVerticalItem: null, currentItemInner: 0 },
       ...(stateOption ?? {}),
     },
     shared: {
@@ -36,9 +36,11 @@ export const createSettingsViewTestModule = <T extends Parameters<typeof baseCre
   stubSilentEvent(result.observer, SUBSCRIBE_EVENTS.SHOW);
   stubSilentEvent(result.observer, SUBSCRIBE_EVENTS.HIDE);
   stubSilentEvent(result.observer, SUBSCRIBE_EVENTS.UPDATE);
+  stubSilentEvent(result.observer, SUBSCRIBE_EVENTS.UPDATE_FAST);
+  stubSilentEvent(result.observer, SUBSCRIBE_EVENTS.STATE_UPDATE);
   stubSilentEvent(result.observer, SUBSCRIBE_EVENTS.TAB_SET);
 
   return result;
 };
 
-export { SUBSCRIBE_EVENTS, PARAMS, PLUGIN_NAME };
+export { SUBSCRIBE_EVENTS, PARAMS, PLUGIN_NAME, CONTROLS_EVENTS };

package/src/utils/settings.ts

@@ -15,7 +15,7 @@ export type SettingsViewPluginState = {
   fields?: SettingsField[];
   locs?: Record<string, string>;
   showTextExample?: boolean;
-  currentItem?: number | null;
+  currentArrowVerticalItem?: number | null;
   currentItemInner?: number | null;
 };
 

package/src/view/index.tsx

@@ -21,7 +21,7 @@ const SettingsViewComponent = ({ store, onMount, PARAMS, emit, EVENTS, shared, C
     locs = {},
     tabsContent = {},
     tabKey = "",
-    currentItem = null,
+    currentArrowVerticalItem = null,
     currentItemInner = null,
   } = useStoreState<SettingsViewPluginState>(store, onMount);
 
@@ -40,8 +40,8 @@ const SettingsViewComponent = ({ store, onMount, PARAMS, emit, EVENTS, shared, C
   );
 
   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],
+    () => ({ store, onMount, PARAMS, emit, EVENTS, shared, CONST, SETTINGS, isForce: isRealForce, currentItem: currentArrowVerticalItem, currentItemInner, locs }),
+    [store, onMount, PARAMS, emit, EVENTS, shared, CONST, SETTINGS, isRealForce, currentArrowVerticalItem, currentItemInner, locs],
   );
 
   return (