ant-design-x-vue-next/es/suggestion/useActive.mjs

Ant Design X for Vue — community continuation aligned with @ant-design/x

import { toValue as r, watch as b } from "vue";
import { useEventCallback as A } from "../_util/hooks/use-event-callback.mjs";
import D from "../_util/hooks/use-state.mjs";
function C(c, f, h, w, I) {
  const [t, o] = D([]), v = (e, l = t.value) => {
    let n = r(c);
    for (let s = 0; s < e - 1; s += 1) {
      const a = l[s], u = n.find((i) => i.value === a);
      if (!u)
        break;
      n = u.children || [];
    }
    return n;
  }, d = (e) => e.map((l, n) => {
    const a = v(n + 1, e).find((u) => u.value === l);
    return a == null ? void 0 : a.value;
  }), m = (e) => {
    const l = t.value.length || 1, n = v(l), s = n.findIndex(
      (i) => i.value === t.value[l - 1]
    ), a = n.length, u = n[(s + e + a) % a];
    o([...t.value.slice(0, l - 1), u.value]);
  }, g = () => {
    t.value.length > 1 && o(t.value.slice(0, t.value.length - 1));
  }, p = () => {
    const e = v(t.value.length + 1);
    e.length && o([...t.value, e[0].value]);
  }, k = A((e) => {
    if (r(f))
      switch (e.key) {
        case "ArrowDown":
          m(1), e.preventDefault();
          break;
        case "ArrowUp":
          m(-1), e.preventDefault();
          break;
        case "ArrowRight":
          r(h) ? g() : p(), e.preventDefault();
          break;
        case "ArrowLeft":
          r(h) ? p() : g(), e.preventDefault();
          break;
        case "Enter":
          v(t.value.length + 1).length || w(d(t.value)), e.preventDefault();
          break;
        case "Escape":
          I(), e.preventDefault();
          break;
      }
  });
  return b(() => r(f), () => {
    r(f) && Array.isArray(r(c)) && r(c).length > 0 && o([r(c)[0].value]);
  }, { immediate: !0 }), [t, k];
}
export {
  C as default
};