@vnejs/plugins.views.settings 0.2.1 → 0.2.2

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,15 +14,20 @@ 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;
+    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;
     controls: {
         abstract_interact: () => undefined;

package/dist/modules/controller.js

@@ -45,17 +45,63 @@ export class SettingsViewController extends ModuleController {
         }
         return this.updateStateAndView(next);
     };
-    onArrowLeft = () => {
-        const { currentItemInner = 0, currentItem, fields = [] } = this.state;
+    getFocusedField = () => {
+        const { currentItem, fields = [] } = this.state;
         if (currentItem == null || !fields.length)
             return;
-        const { settingKey = "", step = 0, min = 0, type = "", options = [] } = fields[currentItem];
+        return fields[currentItem];
+    };
+    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 });
         }
+    };
+    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)
+            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 +111,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 +128,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 = [] } = fields[currentItem];
+        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;
+        }
         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] });
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vnejs/plugins.views.settings",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

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";
@@ -72,20 +73,73 @@ export class SettingsViewController extends ModuleController<
     return this.updateStateAndView(next);
   };
 
-  onArrowLeft = () => {
-    const { currentItemInner = 0, currentItem, fields = [] } = this.state;
+  getFocusedField = () => {
+    const { currentItem, fields = [] } = this.state;
 
     if (currentItem == null || !fields.length) return;
 
-    const { settingKey = "", step = 0, min = 0, type = "", options = [] } = fields[currentItem];
-    if (!settingKey) return;
+    return fields[currentItem];
+  };
 
-    if (options?.length) {
-      const newValue = (currentItemInner === 0 ? options.length : (currentItemInner ?? 0)) - 1;
+  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;
+  };
 
-      return this.updateStateAndViewFast({ currentItemInner: newValue });
+  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 });
+
+    if (settingKey && option && !option.action) {
+      void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: option.value });
+    }
+  };
+
+  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();
+
+    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 +152,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 +173,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 (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) 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;
+    }
+
+    if (!settingKey) return;
 
     if (type === "toggle") return void this.emit(this.EVENTS.SETTINGS.SET, { name: settingKey, value: !this.shared.settings[settingKey] });
   };

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";
@@ -90,4 +90,151 @@ describe("SettingsViewController", () => {
     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.currentItem = 0;
+    controller.updateState({ currentItem: 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.currentItem = 0;
+    controller.updateState({ currentItem: 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.currentItem = 0;
+    controller.updateState({ currentItem: 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("setCurrentItem 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.currentItem = 0;
+    controller.updateState({ currentItem: 0, currentItemInner: 99 });
+
+    await controller.setCurrentItem(1, 0);
+
+    expect(controller.currentItem).toBe(1);
+    expect(controller.state.currentItem).toBe(1);
+    expect(controller.state.currentItemInner).toBe(1);
+  });
 });