orio-ui 1.24.0 → 1.27.0

package/dist/runtime/composables/useRovingGrid.js

@@ -0,0 +1,115 @@
+import { computed, nextTick, ref } from "vue";
+const ARROW_OFFSETS = {
+  up: { rowDelta: -1, columnDelta: 0 },
+  down: { rowDelta: 1, columnDelta: 0 },
+  left: { rowDelta: 0, columnDelta: -1 },
+  right: { rowDelta: 0, columnDelta: 1 }
+};
+const ARROW_KEYS = {
+  ArrowUp: "up",
+  ArrowDown: "down",
+  ArrowLeft: "left",
+  ArrowRight: "right"
+};
+export function useRovingGrid(options) {
+  const focusedKey = ref(null);
+  function findCell(key) {
+    for (const [rowIndex, cellsInRow] of options.rows.value.entries()) {
+      const columnIndex = cellsInRow.findIndex(
+        (cell) => options.getKey(cell) === key
+      );
+      if (columnIndex !== -1) {
+        return { rowIndex, columnIndex, cell: cellsInRow[columnIndex] };
+      }
+    }
+    return null;
+  }
+  const activeKey = computed(() => {
+    if (focusedKey.value && findCell(focusedKey.value)) return focusedKey.value;
+    return options.initial();
+  });
+  function focusActive() {
+    nextTick(() => {
+      const selector = `[focus-key="${CSS.escape(activeKey.value)}"]`;
+      const element = options.gridRef.value?.querySelector(selector);
+      if (!element) return;
+      element.scrollIntoView({
+        block: "nearest",
+        inline: "nearest",
+        behavior: "smooth"
+      });
+      element.focus({ preventScroll: true });
+    });
+  }
+  function setActive(key, shouldFocus = true) {
+    focusedKey.value = key;
+    if (shouldFocus) focusActive();
+  }
+  function tryArrow(direction) {
+    const position = findCell(activeKey.value);
+    if (!position) return;
+    const offset = ARROW_OFFSETS[direction];
+    const rows = options.rows.value;
+    let targetRowIndex = position.rowIndex + offset.rowDelta;
+    let targetColumnIndex = position.columnIndex + offset.columnDelta;
+    while (rows[targetRowIndex]?.[targetColumnIndex] !== void 0) {
+      const candidate = rows[targetRowIndex][targetColumnIndex];
+      if (!options.isNavigable || options.isNavigable(candidate)) {
+        setActive(options.getKey(candidate));
+        return;
+      }
+      targetRowIndex += offset.rowDelta;
+      targetColumnIndex += offset.columnDelta;
+    }
+    const overflowKey = options.onArrowOverflow?.(direction, activeKey.value);
+    if (overflowKey) setActive(overflowKey);
+  }
+  function moveToRowEdge(toEnd) {
+    const position = findCell(activeKey.value);
+    if (!position) return;
+    const row = options.rows.value[position.rowIndex];
+    const ordered = toEnd ? [...row].reverse() : row;
+    const edgeCell = ordered.find(
+      (cell) => !options.isNavigable || options.isNavigable(cell)
+    );
+    if (!edgeCell) return;
+    setActive(options.getKey(edgeCell));
+  }
+  function tryPage(direction, bigJump) {
+    const newKey = options.onPage?.(direction, bigJump, activeKey.value);
+    if (newKey) setActive(newKey);
+  }
+  function activate() {
+    const position = findCell(activeKey.value);
+    if (position) options.onActivate?.(position.cell);
+  }
+  function onKeydown(event) {
+    const arrow = ARROW_KEYS[event.key];
+    if (arrow) {
+      tryArrow(arrow);
+    } else if (event.key === "Home") {
+      moveToRowEdge(false);
+    } else if (event.key === "End") {
+      moveToRowEdge(true);
+    } else if (event.key === "PageUp") {
+      tryPage("up", event.shiftKey);
+    } else if (event.key === "PageDown") {
+      tryPage("down", event.shiftKey);
+    } else if (event.key === "Enter" || event.key === " ") {
+      activate();
+    } else {
+      return;
+    }
+    event.preventDefault();
+  }
+  function tabindexFor(key) {
+    return key === activeKey.value ? 0 : -1;
+  }
+  return {
+    activeKey,
+    setActive,
+    focusActive,
+    onKeydown,
+    tabindexFor
+  };
+}

package/dist/runtime/i18n/en.json

@@ -6,7 +6,10 @@
   },
   "calendar": {
     "previousMonth": "Previous month",
-    "nextMonth": "Next month"
+    "nextMonth": "Next month",
+    "previousYear": "Previous year",
+    "nextYear": "Next year",
+    "navigation": "Calendar navigation"
   },
   "datePicker": {
     "placeholder": "Select a date"

package/dist/runtime/i18n/uk.json

@@ -6,7 +6,10 @@
   },
   "calendar": {
     "previousMonth": "Попередній місяць",
-    "nextMonth": "Наступний місяць"
+    "nextMonth": "Наступний місяць",
+    "previousYear": "Попередній рік",
+    "nextYear": "Наступний рік",
+    "navigation": "Навігація календаря"
   },
   "datePicker": {
     "placeholder": "Оберіть дату"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orio-ui",
-  "version": "1.24.0",
+  "version": "1.27.0",
   "description": "Modern Nuxt component library with theme support",
   "type": "module",
   "main": "./dist/module.mjs",