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

Craft AI-driven interfaces effortlessly

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