@vnejs/plugins.views.settings 0.2.2 → 0.2.4

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

@@ -21,11 +21,11 @@ export declare class SettingsViewController extends ModuleController<SettingsVie
     };
     onShowFields: (payload?: SettingsViewTabPayload) => Promise<void>;
     onTabSet: (payload?: SettingsViewTabPayload) => Promise<void | unknown[]>;
+    onStateUpdate: (payload?: Partial<SettingsViewPluginState>) => void;
     getFocusedField: () => SettingsField | undefined;
     innerIndexOfField: (field?: SettingsField) => number;
     optionIndexOf: (length: number, index?: number) => number;
     shiftOptions: (direction: -1 | 1) => void;
-    setCurrentItem: (value: number, defaultValue: number) => Promise<void>;
     onArrowLeft: () => void | false;
     onArrowRight: () => void | false;
     onInteract: () => void;
@@ -33,8 +33,6 @@ export declare class SettingsViewController extends ModuleController<SettingsVie
         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,11 +43,16 @@ export class SettingsViewController extends ModuleController {
         }
         return this.updateStateAndView(next);
     };
+    onStateUpdate = (payload = {}) => {
+        const currentArrowVerticalItem = payload.currentArrowVerticalItem;
+        const field = currentArrowVerticalItem == null ? undefined : this.state.fields?.[currentArrowVerticalItem];
+        this.updateState({ ...payload, currentItemInner: this.innerIndexOfField(field) });
+    };
     getFocusedField = () => {
-        const { currentItem, fields = [] } = this.state;
-        if (currentItem == null || !fields.length)
+        const { currentArrowVerticalItem, fields = [] } = this.state;
+        if (currentArrowVerticalItem == null || !fields.length)
             return;
-        return fields[currentItem];
+        return fields[currentArrowVerticalItem];
     };
     innerIndexOfField = (field) => {
         const options = field?.options ?? [];
@@ -79,20 +82,6 @@ export class SettingsViewController extends ModuleController {
             void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: option.value });
         }
     };
-    setCurrentItem = async (value, defaultValue) => {
-        if (this.currentItem === null) {
-            this.currentItem = defaultValue;
-        }
-        else {
-            this.currentItem = value;
-            if (this.currentItem > this.maxCurrentItem)
-                this.currentItem = 0;
-            if (this.currentItem < 0)
-                this.currentItem = this.maxCurrentItem;
-        }
-        const currentItemInner = this.innerIndexOfField(this.state.fields?.[this.currentItem]);
-        await this.updateStateAndViewFast({ currentItem: this.currentItem, currentItemInner });
-    };
     onArrowLeft = () => {
         const field = this.getFocusedField();
         if (!field)
@@ -152,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/SettingsExampleText.js

@@ -18,8 +18,6 @@ export const SettingsExampleText = ({ isShow = false, locs = {}, PARAMS, shared,
         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]);
+    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/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,20 @@ 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.2",
+  "version": "0.2.4",
   "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

@@ -29,12 +29,8 @@ 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)]),
-        )
+      ? Object.fromEntries(Object.entries(payload.tabs).map(([tabKey, settingsTab]) => [tabKey, this.tabContentOf(settingsTab, locs)]))
       : { ...(this.state.tabsContent ?? {}), [key]: this.tabContentOf(tab, locs) };
 
     return {
@@ -55,9 +51,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);
 
@@ -73,12 +67,19 @@ export class SettingsViewController extends ModuleController<
     return this.updateStateAndView(next);
   };
 
+  onStateUpdate = (payload: Partial<SettingsViewPluginState> = {}) => {
+    const currentArrowVerticalItem = payload.currentArrowVerticalItem;
+    const field = currentArrowVerticalItem == null ? undefined : this.state.fields?.[currentArrowVerticalItem];
+
+    this.updateState({ ...payload, currentItemInner: this.innerIndexOfField(field) });
+  };
+
   getFocusedField = () => {
-    const { currentItem, fields = [] } = this.state;
+    const { currentArrowVerticalItem, fields = [] } = this.state;
 
-    if (currentItem == null || !fields.length) return;
+    if (currentArrowVerticalItem == null || !fields.length) return;
 
-    return fields[currentItem];
+    return fields[currentArrowVerticalItem];
   };
 
   innerIndexOfField = (field?: SettingsField) => {
@@ -116,20 +117,6 @@ export class SettingsViewController extends ModuleController<
     }
   };
 
-  setCurrentItem = async (value: number, defaultValue: number) => {
-    if (this.currentItem === null) {
-      this.currentItem = defaultValue;
-    } else {
-      this.currentItem = value;
-      if (this.currentItem > this.maxCurrentItem) this.currentItem = 0;
-      if (this.currentItem < 0) this.currentItem = this.maxCurrentItem;
-    }
-
-    const currentItemInner = this.innerIndexOfField(this.state.fields?.[this.currentItem]);
-
-    await this.updateStateAndViewFast({ currentItem: this.currentItem, currentItemInner });
-  };
-
   onArrowLeft = () => {
     const field = this.getFocusedField();
 
@@ -200,8 +187,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;
 
@@ -209,6 +194,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,104 @@
+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

@@ -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,8 +83,8 @@ 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"]);
   });
@@ -115,8 +113,7 @@ describe("SettingsViewController", () => {
 
     const controller = module as SettingsViewController;
 
-    controller.currentItem = 0;
-    controller.updateState({ currentItem: 0, currentItemInner: 0 });
+    controller.updateState({ currentArrowVerticalItem: 0, currentItemInner: 0 });
 
     const settingsSet = spyEvent(observer, SETTINGS_EVENTS.SET);
 
@@ -150,8 +147,7 @@ describe("SettingsViewController", () => {
 
     const controller = module as SettingsViewController;
 
-    controller.currentItem = 0;
-    controller.updateState({ currentItem: 0, currentItemInner: 0 });
+    controller.updateState({ currentArrowVerticalItem: 0, currentItemInner: 0 });
 
     const settingsSet = spyEvent(observer, SETTINGS_EVENTS.SET);
 
@@ -185,8 +181,7 @@ describe("SettingsViewController", () => {
       },
     });
 
-    controller.currentItem = 0;
-    controller.updateState({ currentItem: 0, currentItemInner: 0 });
+    controller.updateState({ currentArrowVerticalItem: 0, currentItemInner: 0 });
 
     const settingsSet = spyEvent(observer, SETTINGS_EVENTS.SET);
 
@@ -203,7 +198,7 @@ describe("SettingsViewController", () => {
     expect(doA).not.toHaveBeenCalled();
   });
 
-  it("setCurrentItem syncs currentItemInner to the current option", async () => {
+  it("STATE_UPDATE syncs currentItemInner to the current option", async () => {
     const { module, observer } = createSettingsViewTestModule(SettingsViewController, {
       shared: { settings: { "test.lang": "en" } },
     });
@@ -228,13 +223,11 @@ describe("SettingsViewController", () => {
 
     const controller = module as SettingsViewController;
 
-    controller.currentItem = 0;
-    controller.updateState({ currentItem: 0, currentItemInner: 99 });
+    controller.updateState({ currentArrowVerticalItem: 0, currentItemInner: 99 });
 
-    await controller.setCurrentItem(1, 0);
+    await observer.emit(SUBSCRIBE_EVENTS.STATE_UPDATE, { currentArrowVerticalItem: 1 });
 
-    expect(controller.currentItem).toBe(1);
-    expect(controller.state.currentItem).toBe(1);
+    expect(controller.state.currentArrowVerticalItem).toBe(1);
     expect(controller.state.currentItemInner).toBe(1);
   });
 });

package/src/tests/setup.ts

@@ -1,12 +1,7 @@
 import { CONSTANTS as CONTROLS_CONST, PLUGIN_NAME as CONTROLS, SUBSCRIBE_EVENTS as CONTROLS_EVENTS } from "@vnejs/contracts.controls";
 import { PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/contracts.views.settings";
 import { SourcesSet } from "@vnejs/sources-set";
-import {
-  createTestModule as baseCreateTestModule,
-  registerCoreVne,
-  registerVnePlugin,
-  stubSilentEvent,
-} from "@vnejs/test-utils";
+import { createTestModule as baseCreateTestModule, registerCoreVne, registerVnePlugin, stubSilentEvent } from "@vnejs/test-utils";
 
 export const registerSettingsViewPluginVne = () => {
   registerCoreVne();
@@ -23,7 +18,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 +31,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/types.ts

@@ -5,9 +5,7 @@ import type { SettingsKeys as TextsizeSettingsKeys, PluginName as TextsizePlugin
 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 SettingsViewPluginEvents = ModuleComponentsEvents & Record<PluginName, SubscribeEvents> & Record<SettingsPluginName, SettingsSubscribeEvents>;
 
 export type SettingsViewPluginConstants = ModuleComponentsConstants & Record<ControlsPluginName, ControlsConstants>;
 
@@ -15,6 +13,4 @@ export type SettingsViewPluginSettings = ModuleComponentsSettings &
   Record<TextSmoothPluginName, TextSmoothSettingsKeys> &
   Record<TextsizePluginName, TextsizeSettingsKeys>;
 
-export type SettingsViewPluginParams = ModuleComponentsParams &
-  Record<PluginName, Params> &
-  Record<TextSmoothPluginName, TextSmoothParams>;
+export type SettingsViewPluginParams = ModuleComponentsParams & Record<PluginName, Params> & Record<TextSmoothPluginName, TextSmoothParams>;

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/SettingsExampleText.tsx

@@ -41,9 +41,7 @@ export const SettingsExampleText = ({ isShow = false, locs = {}, PARAMS, shared,
     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]);
+  const charDelay = isForce ? 0 : PARAMS.TEXT_SMOOTH.TOKEN_RENDER_DELAY / Number(shared.settings[SETTINGS.TEXT_SMOOTH.TOKEN_RENDER_SPEED]);
 
   return (
     <SmoothText

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,21 @@ 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 (