stimeo-ui 0.2.0 → 0.3.0

data/dist/controllers/separator_controller.js

@@ -0,0 +1,96 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/separator_controller.ts
+
+// src/utils/arrow_step.ts
+function isReservedArrowChord(event, allow = []) {
+  if (!event.key.startsWith("Arrow")) return false;
+  return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
+}
+
+// src/controllers/separator_controller.ts
+var SeparatorController = class extends Controller {
+  static values = {
+    orientation: { type: String, default: "horizontal" },
+    focusable: { type: Boolean, default: false },
+    step: { type: Number, default: 1 }
+  };
+  static actions = ["onKeydown"];
+  static events = ["change"];
+  connect() {
+    if (!this.element.hasAttribute("role")) {
+      this.element.setAttribute("role", "separator");
+    }
+    if (!this.element.hasAttribute("aria-orientation")) {
+      this.element.setAttribute("aria-orientation", this.orientationValue);
+    }
+    if (this.focusableValue) {
+      if (!this.element.hasAttribute("tabindex")) {
+        this.element.setAttribute("tabindex", "0");
+      }
+      this.#setDefault("aria-valuemin", "0");
+      this.#setDefault("aria-valuemax", "100");
+      this.#setDefault("aria-valuenow", String(this.#clamp(this.#value)));
+    }
+  }
+  /** Adjusts the value on arrow / Home / End keys (focusable variant only). */
+  onKeydown(event) {
+    if (isReservedArrowChord(event)) return;
+    if (!this.focusableValue) return;
+    const horizontal = this.element.getAttribute("aria-orientation") !== "vertical";
+    let next = null;
+    switch (event.key) {
+      case "ArrowUp":
+        if (horizontal) next = this.#value + this.stepValue;
+        break;
+      case "ArrowDown":
+        if (horizontal) next = this.#value - this.stepValue;
+        break;
+      case "ArrowRight":
+        if (!horizontal) next = this.#value + this.stepValue;
+        break;
+      case "ArrowLeft":
+        if (!horizontal) next = this.#value - this.stepValue;
+        break;
+      case "Home":
+        next = this.#min;
+        break;
+      case "End":
+        next = this.#max;
+        break;
+      default:
+        return;
+    }
+    if (next === null) return;
+    event.preventDefault();
+    const clamped = this.#clamp(next);
+    if (clamped === this.#value) return;
+    this.element.setAttribute("aria-valuenow", String(clamped));
+    this.dispatch("change", { detail: { value: clamped } });
+  }
+  get #value() {
+    return this.#numericAttr("aria-valuenow", 0);
+  }
+  get #min() {
+    return this.#numericAttr("aria-valuemin", 0);
+  }
+  get #max() {
+    return this.#numericAttr("aria-valuemax", 100);
+  }
+  #clamp(value) {
+    return Math.min(this.#max, Math.max(this.#min, value));
+  }
+  #numericAttr(name, fallback) {
+    const parsed = Number.parseFloat(this.element.getAttribute(name) ?? "");
+    return Number.isNaN(parsed) ? fallback : parsed;
+  }
+  #setDefault(name, value) {
+    if (!this.element.hasAttribute(name)) {
+      this.element.setAttribute(name, value);
+    }
+  }
+};
+
+export { SeparatorController };
+//# sourceMappingURL=separator_controller.js.map
+//# sourceMappingURL=separator_controller.js.map