ant-design-x-vue/es/suggestion/Suggestion.mjs

Craft AI-driven interfaces effortlessly

import { onMounted as W, nextTick as I, unref as L, getCurrentScope as G, onScopeDispose as P, getCurrentInstance as V, computed as v, ref as y, watch as $, defineComponent as X, mergeDefaults as E, toRef as H, useSlots as K, createVNode as B } from "vue";
import { c as k } from "../attachments/Attachments2.mjs";
import "../x-provider/index.mjs";
import U from "../_util/hooks/use-x-component-config.mjs";
import j from "./style/index.mjs";
import A from "../_util/hooks/use-state.mjs";
import { Cascader as q } from "ant-design-vue";
import J from "./useActive.mjs";
import Q from "../x-provider/hooks/use-x-provider-context.mjs";
function Y(e) {
  return G() ? (P(e), !0) : !1;
}
function D(e) {
  return typeof e == "function" ? e() : L(e);
}
const Z = typeof window < "u" && typeof document < "u";
typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
function _(e) {
  return V();
}
function ee(e, n = !0, i) {
  _() ? W(e, i) : n ? e() : I(e);
}
const M = Z ? window : void 0;
function g(e) {
  var n;
  const i = D(e);
  return (n = i == null ? void 0 : i.$el) != null ? n : i;
}
function te() {
  const e = y(!1), n = V();
  return n && W(() => {
    e.value = !0;
  }, n), e;
}
function ne(e) {
  const n = te();
  return v(() => (n.value, !!e()));
}
function oe(e, n, i = {}) {
  const { window: a = M, ...c } = i;
  let r;
  const l = ne(() => a && "ResizeObserver" in a), u = () => {
    r && (r.disconnect(), r = void 0);
  }, w = v(() => {
    const t = D(e);
    return Array.isArray(t) ? t.map((o) => g(o)) : [g(t)];
  }), h = $(
    w,
    (t) => {
      if (u(), l.value && a) {
        r = new ResizeObserver(n);
        for (const o of t)
          o && r.observe(o, c);
      }
    },
    { immediate: !0, flush: "post" }
  ), m = () => {
    u(), h();
  };
  return Y(m), {
    isSupported: l,
    stop: m
  };
}
function se(e, n = { width: 0, height: 0 }, i = {}) {
  const { window: a = M, box: c = "content-box" } = i, r = v(() => {
    var t, o;
    return (o = (t = g(e)) == null ? void 0 : t.namespaceURI) == null ? void 0 : o.includes("svg");
  }), l = y(n.width), u = y(n.height), { stop: w } = oe(
    e,
    ([t]) => {
      const o = c === "border-box" ? t.borderBoxSize : c === "content-box" ? t.contentBoxSize : t.devicePixelContentBoxSize;
      if (a && r.value) {
        const f = g(e);
        if (f) {
          const d = f.getBoundingClientRect();
          l.value = d.width, u.value = d.height;
        }
      } else if (o) {
        const f = Array.isArray(o) ? o : [o];
        l.value = f.reduce((d, { inlineSize: C }) => d + C, 0), u.value = f.reduce((d, { blockSize: C }) => d + C, 0);
      } else
        l.value = t.contentRect.width, u.value = t.contentRect.height;
    },
    i
  );
  ee(() => {
    const t = g(e);
    t && (l.value = "offsetWidth" in t ? t.offsetWidth : n.width, u.value = "offsetHeight" in t ? t.offsetHeight : n.height);
  });
  const h = $(
    () => g(e),
    (t) => {
      l.value = t ? n.width : 0, u.value = t ? n.height : 0;
    }
  );
  function m() {
    w(), h();
  }
  return {
    width: l,
    height: u,
    stop: m
  };
}
const me = /* @__PURE__ */ X({
  name: "AXSuggestion",
  __name: "Suggestion",
  props: E({
    prefixCls: null,
    className: null,
    rootClassName: null,
    style: null,
    children: {
      type: Function
    },
    open: {
      type: Boolean
    },
    onOpenChange: {
      type: Function
    },
    items: {
      type: Function
    },
    onSelect: {
      type: Function
    },
    block: {
      type: Boolean
    },
    styles: null,
    classNames: null
  }, {
    open: !1
  }),
  setup(e) {
    H(e, "prefixCls");
    const n = K(), {
      direction: i,
      getPrefixCls: a
    } = Q(), c = v(() => a("suggestion", e.prefixCls));
    `${c.value}`;
    const r = v(() => i.value === "rtl"), l = U("suggestion"), u = y(), [w, h, m] = j(c), {
      width: t
    } = se(u), o = v(() => {
      if (e.block && t.value)
        return {
          width: `${t.value}px`
        };
    }), [f, d] = A(e.open), [C, T] = A(), p = (s) => {
      var N;
      d(s), (N = e.onOpenChange) == null || N.call(e, s);
    }, b = (s) => {
      s === !1 ? p(!1) : (T(s), p(!0));
    }, S = () => {
      p(!1);
    }, x = v(() => typeof e.items == "function" ? e.items(C.value) : e.items), R = (s) => {
      e.onSelect && e.onSelect(s[s.length - 1]), p(!1);
    }, [z, O] = J(x, f, r, R, S), F = v(() => {
      var s;
      return n.default ? n.default({
        onTrigger: b,
        onKeyDown: O
      }) : (s = e.children) == null ? void 0 : s.call(e, {
        onTrigger: b,
        onKeyDown: O
      });
    });
    return () => w(B(q, {
      options: x.value,
      open: f.value,
      value: z.value,
      placement: r.value ? "topRight" : "topLeft",
      onDropdownVisibleChange: (s) => {
        s || S();
      },
      class: k(e.rootClassName, c.value, h, m, {
        [`${c.value}-block`]: e.block
      }),
      onChange: R,
      dropdownStyle: o.value
    }, {
      default: () => B("div", {
        ref: u,
        class: k(c.value, l.value.className, e.rootClassName, e.className, `${c.value}-wrapper`, h.value, m),
        style: {
          ...l.value.style,
          ...e.style
        }
      }, [F.value])
    }));
  }
});
export {
  me as default
};