@apollo-design/a11y 0.0.0-stage → 0.1.9

package/dist/use-roving-focus.mjs

@@ -0,0 +1,97 @@
+import { useControlledValue } from '@apollo-design/utils';
+import { toValue, computed, watch } from 'vue';
+import { NO_ACTIVE_INDEX, resolveRovingEnd, resolveRovingHome, getRovingTabIndex, getRovingOffset, moveRovingIndex } from './roving.mjs';
+
+function useRovingFocus(options) {
+  const getCount = () => Math.max(0, Math.trunc(toValue(options.count)));
+  const normalizeIndex = (index) => {
+    const count = getCount();
+    return count === 0 || index === NO_ACTIVE_INDEX ? NO_ACTIVE_INDEX : Math.min(Math.max(index, 0), count - 1);
+  };
+  const [state, setState] = useControlledValue({
+    getValue: () => toValue(options.activeIndex),
+    defaultValue: NO_ACTIVE_INDEX,
+    onChange: (index) => options.onChange?.(index)
+  });
+  const activeIndex = computed({
+    get: () => normalizeIndex(state.value),
+    set: (index) => setActive(index)
+  });
+  let pendingFocus;
+  const focusAcceptedItem = () => {
+    if (pendingFocus === void 0 || pendingFocus !== activeIndex.value) return;
+    if (pendingFocus === NO_ACTIVE_INDEX || toValue(options.focusOnMove) === false) {
+      pendingFocus = void 0;
+      return;
+    }
+    const item = options.getItem?.(pendingFocus);
+    if (item) {
+      pendingFocus = void 0;
+      item.focus();
+    }
+  };
+  function setActive(index, focus = true) {
+    const next = normalizeIndex(index);
+    pendingFocus = focus && toValue(options.focusOnMove) !== false ? next : void 0;
+    setState(next);
+    focusAcceptedItem();
+  }
+  watch(
+    activeIndex,
+    (index) => {
+      if (pendingFocus !== void 0 && pendingFocus !== index) pendingFocus = void 0;
+      focusAcceptedItem();
+    },
+    { flush: "post" }
+  );
+  watch(
+    getCount,
+    () => {
+      pendingFocus = void 0;
+      const next = normalizeIndex(state.value);
+      if (next !== state.value) setState(next);
+    },
+    { flush: "sync" }
+  );
+  const move = (offset) => {
+    if (offset === 0) return;
+    setActive(
+      moveRovingIndex(activeIndex.value, offset, getCount(), toValue(options.loop) ?? true)
+    );
+  };
+  const onKeyDown = (event) => {
+    if (event.defaultPrevented || event.isComposing || getCount() === 0) return false;
+    if (event.key === "Home") {
+      event.preventDefault();
+      setActive(resolveRovingHome(getCount()));
+      return true;
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      setActive(resolveRovingEnd(getCount()));
+      return true;
+    }
+    const offset = getRovingOffset(
+      toValue(options.orientation) ?? "vertical",
+      toValue(options.rtl) ?? false,
+      event.key
+    );
+    if (offset === null) {
+      return false;
+    }
+    event.preventDefault();
+    move(offset);
+    return true;
+  };
+  return {
+    activeIndex,
+    getTabIndex: (index) => getRovingTabIndex(activeIndex.value, index),
+    setActive,
+    move,
+    moveHome: () => setActive(resolveRovingHome(getCount())),
+    moveEnd: () => setActive(resolveRovingEnd(getCount())),
+    onKeyDown
+  };
+}
+
+export { useRovingFocus };

package/dist/use-typeahead.mjs

@@ -0,0 +1,41 @@
+import { ref, toValue } from 'vue';
+import { isTypeaheadKey, pushTypeaheadChar, INITIAL_TYPEAHEAD_STATE, findTypeaheadIndex } from './combobox.mjs';
+import { NO_ACTIVE_INDEX } from './roving.mjs';
+
+function useTypeahead(options) {
+  let state = INITIAL_TYPEAHEAD_STATE;
+  const buffer = ref("");
+  const reset = () => {
+    state = INITIAL_TYPEAHEAD_STATE;
+    buffer.value = "";
+  };
+  const onKeyDown = (event) => {
+    if (!isTypeaheadKey(event)) {
+      return false;
+    }
+    const labels = toValue(options.labels);
+    const from = toValue(options.activeIndex) ?? NO_ACTIVE_INDEX;
+    const accumulated = pushTypeaheadChar(
+      state,
+      event.key,
+      (options.now ?? Date.now)(),
+      options.resetDelay
+    );
+    let index = findTypeaheadIndex(labels, accumulated.buffer, from);
+    if (index === NO_ACTIVE_INDEX) {
+      index = findTypeaheadIndex(labels, event.key, from);
+      state = index === NO_ACTIVE_INDEX ? accumulated : { buffer: event.key, lastAt: accumulated.lastAt };
+    } else {
+      state = accumulated;
+    }
+    buffer.value = state.buffer;
+    if (index === NO_ACTIVE_INDEX) {
+      return false;
+    }
+    options.onMatch?.(index);
+    return true;
+  };
+  return { buffer, onKeyDown, reset };
+}
+
+export { useTypeahead };

package/package.json

@@ -1,6 +1,35 @@
 {
   "name": "@apollo-design/a11y",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.9",
+  "description": "运行时无障碍原语。antd 把焦点管理、roving tabindex、live region 等散落在各组件与 rc 包里，本项目把它们收敛为可复用的原语。",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@apollo-design/utils": "0.1.9"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.42"
+  },
+  "devDependencies": {
+    "@apollo-design/test-utils": "0.1.9"
+  },
+  "scripts": {
+    "build": "unbuild --config ../../scripts/unbuild-preserve-modules.mjs",
+    "test": "vitest run",
+    "lint": "vue-tsc --noEmit"
+  }
 }