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

Craft AI-driven interfaces effortlessly

import { defineComponent as D, mergeDefaults as L, toRef as R, useSlots as X, computed as o, createVNode as h } from "vue";
import { c as y } from "../attachments/Attachments2.mjs";
import "../x-provider/index.mjs";
import $ from "../_util/hooks/use-x-component-config.mjs";
import A from "./style/index.mjs";
import S from "../_util/hooks/use-state.mjs";
import { Cascader as B } from "ant-design-vue";
import I from "./useActive.mjs";
import P from "../x-provider/hooks/use-x-provider-context.mjs";
const H = /* @__PURE__ */ D({
  name: "AXSuggestion",
  __name: "Suggestion",
  props: L({
    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) {
    R(e, "prefixCls");
    const s = X(), {
      direction: N,
      getPrefixCls: x
    } = P(), n = o(() => x("suggestion", e.prefixCls));
    `${n.value}`;
    const a = o(() => N.value === "rtl"), i = $("suggestion"), [b, c, u] = A(n), [m, w] = S(e.open), [k, F] = S(), l = (t) => {
      var v;
      w(t), (v = e.onOpenChange) == null || v.call(e, t);
    }, r = (t) => {
      t === !1 ? l(!1) : (F(t), l(!0));
    }, f = () => {
      l(!1);
    }, g = o(() => typeof e.items == "function" ? e.items(k.value) : e.items), C = (t) => {
      e.onSelect && e.onSelect(t[t.length - 1]), l(!1);
    }, [O, d] = I(g, m, a, C, f), V = o(() => {
      var t;
      return s.default ? s.default({
        onTrigger: r,
        onKeyDown: d
      }) : (t = e.children) == null ? void 0 : t.call(e, {
        onTrigger: r,
        onKeyDown: d
      });
    });
    return () => b(h(B, {
      options: g.value,
      open: m.value,
      value: O.value,
      placement: a.value ? "topRight" : "topLeft",
      onDropdownVisibleChange: (t) => {
        t || f();
      },
      class: y(e.rootClassName, n.value, c, u, {
        [`${n.value}-block`]: e.block
      }),
      onChange: C,
      dropdownMatchSelectWidth: e.block
    }, {
      default: () => h("div", {
        class: y(n.value, i.value.className, e.rootClassName, e.className, `${n.value}-wrapper`, c.value, u),
        style: {
          ...i.value.style,
          ...e.style
        }
      }, [V.value])
    }));
  }
});
export {
  H as default
};