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

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

import { defineComponent as Q, mergeDefaults as U, toRef as Y, useAttrs as Z, useSlots as _, computed as o, ref as ee, watch as te, createVNode as c, mergeProps as ne } from "vue";
import { c as oe } from "../chunks/helper-chunk.mjs";
import { N as le, b as d } from "../chunks/module-chunk.mjs";
import "../x-provider/index.mjs";
import se from "../_util/hooks/use-x-component-config.mjs";
import ae from "./style/index.mjs";
import A from "../_util/hooks/use-state.mjs";
import { Cascader as ce, Flex as ue } from "ant-design-vue";
import ie from "./useActive.mjs";
import re from "../x-provider/hooks/use-x-provider-context.mjs";
const we = /* @__PURE__ */ Q({
  name: "AXSuggestion",
  inheritAttrs: !1,
  __name: "Suggestion",
  props: U({
    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,
    getPopupContainer: {
      type: Function
    }
  }, {
    open: !1,
    styles: () => ({}),
    classNames: () => ({})
  }),
  setup(t) {
    const D = oe(t, ["prefixCls", "className", "rootClassName", "style", "children", "open", "onOpenChange", "items", "onSelect", "block", "styles", "classNames", "getPopupContainer"]);
    Y(t, "prefixCls");
    const F = Z(), g = _(), {
      direction: R,
      getPrefixCls: V
    } = re(), s = o(() => V("suggestion", t.prefixCls)), r = `${s.value}-item`, p = o(() => R.value === "rtl"), l = se("suggestion"), C = ee(), [$, h, y] = ae(s), {
      width: N
    } = le(C), L = o(() => {
      var n;
      const e = {
        ...((n = l.value.styles) == null ? void 0 : n.popup) || {},
        ...t.styles.popup || {}
      };
      return t.block && N.value ? {
        ...e,
        width: `${N.value}px`
      } : Object.keys(e).length ? e : void 0;
    }), S = o(() => {
      var e;
      return d(t.rootClassName, t.className, (e = l.value.classNames) == null ? void 0 : e.root, t.classNames.root, s.value, h.value, y, {
        [`${s.value}-block`]: t.block
      });
    }), X = o(() => {
      var e;
      return d(s.value, t.rootClassName, (e = l.value.classNames) == null ? void 0 : e.content, t.classNames.content, `${s.value}-content`, h.value, y);
    }), B = o(() => {
      var e;
      return {
        ...((e = l.value.styles) == null ? void 0 : e.content) || {},
        ...t.styles.content
      };
    }), I = o(() => {
      var e;
      return d(S.value, (e = l.value.classNames) == null ? void 0 : e.popup, t.classNames.popup);
    }), T = o(() => {
      var e;
      return {
        ...l.value.style,
        ...((e = l.value.styles) == null ? void 0 : e.root) || {},
        ...t.styles.root,
        ...t.style
      };
    }), [m, x] = A(t.open);
    te(() => t.open, (e) => {
      x(e);
    });
    const [j, z] = A(), u = (e) => {
      var n;
      x(e), (n = t.onOpenChange) == null || n.call(t, e);
    }, E = (e) => {
      e === !1 ? u(!1) : (z(e), u(!0));
    }, P = () => {
      u(!1);
    }, f = o(() => typeof t.items == "function" ? t.items(j.value) : t.items);
    function K(e, n) {
      const a = [];
      let v = e;
      for (const w of n) {
        const i = v.find((k) => k.value === w);
        if (!i) break;
        a.push(i), v = i.children || [];
      }
      return a;
    }
    function b(e) {
      return e.map((n) => {
        var a;
        return {
          value: n.value,
          icon: n.icon,
          extra: n.extra,
          label: c(ue, {
            class: r
          }, {
            default: () => [n.icon ? c("div", {
              class: `${r}-icon`
            }, [n.icon]) : null, n.label, n.extra ? c("div", {
              class: `${r}-extra`
            }, [n.extra]) : null]
          }),
          children: (a = n.children) != null && a.length ? b(n.children) : void 0
        };
      });
    }
    const W = o(() => b(f.value || [])), O = (e) => {
      const n = e || [];
      t.onSelect && t.onSelect(n[n.length - 1], K(f.value || [], n)), u(!1);
    }, [q, G] = ie(f, m, p, O, P), H = o(() => {
      var n;
      const e = {
        onTrigger: E,
        onKeyDown: G,
        open: m.value
      };
      return g.default ? g.default(e) : (n = t.children) == null ? void 0 : n.call(t, e);
    }), J = o(() => {
      const e = F, {
        class: n,
        style: a,
        open: v,
        options: w,
        value: i,
        multiple: k,
        onChange: me,
        onDropdownVisibleChange: fe,
        onOpenChange: ve,
        placement: de,
        getPopupContainer: ge,
        ...M
      } = e;
      return {
        ...M,
        ...D
      };
    });
    return () => $(c(ce, ne(J.value, {
      options: W.value,
      open: m.value,
      value: q.value,
      placement: p.value ? "topRight" : "topLeft",
      onDropdownVisibleChange: (e) => {
        e || P();
      },
      popupClassName: I.value,
      onChange: O,
      dropdownStyle: L.value,
      getPopupContainer: t.getPopupContainer,
      class: S.value,
      style: T.value
    }), {
      default: () => c("div", {
        ref: C,
        class: X.value,
        style: B.value
      }, [H.value])
    }));
  }
});
export {
  we as default
};