ant-design-x-vue-next/es/actions/Actions.mjs

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

import { defineComponent as O, ref as z, computed as l, createVNode as i, mergeProps as y, Transition as M, isVNode as q } from "vue";
import { Tooltip as E } from "ant-design-vue";
import { b as m } from "../chunks/module-chunk.mjs";
import G from "../_util/pick-attrs.mjs";
import H from "../_util/hooks/use-x-component-config.mjs";
import "../x-provider/index.mjs";
import J from "./ActionMenu.mjs";
import { ActionsContextProvider as K } from "./context.mjs";
import { getItemChildren as Q } from "./getItemChildren.mjs";
import U from "./style/index.mjs";
import W from "../x-provider/hooks/use-x-provider-context.mjs";
function $(c) {
  return typeof c == "function" || Object.prototype.toString.call(c) === "[object Object]" && !q(c);
}
const ce = /* @__PURE__ */ O({
  name: "AXActions",
  __name: "Actions",
  props: {
    items: {
      default: () => []
    },
    rootClassName: {
      default: ""
    },
    classNames: {
      default: () => ({})
    },
    styles: {
      default: () => ({})
    },
    block: {
      type: Boolean,
      default: !1
    },
    onClick: {
      type: Function
    },
    style: null,
    variant: {
      default: "borderless"
    },
    prefixCls: null,
    fadeIn: {
      type: Boolean,
      default: !1
    },
    fadeInLeft: {
      type: Boolean,
      default: !1
    },
    dropdownProps: null
  },
  emits: ["click"],
  setup(c, {
    expose: k,
    emit: N
  }) {
    const o = c, u = z(null), p = N, {
      getPrefixCls: f,
      direction: g
    } = W(), a = f("actions", o.prefixCls), b = f(), r = H("actions"), [I, x, w] = U(a), P = l(() => o.fadeInLeft || o.fadeIn ? `${b}-x-fade${o.fadeInLeft ? "-left" : ""}` : ""), v = l(() => {
      var t, e;
      return m((t = r.value.classNames) == null ? void 0 : t.item, (e = o.classNames) == null ? void 0 : e.item);
    }), C = l(() => {
      var t, e;
      return {
        ...((t = r.value.styles) == null ? void 0 : t.item) || {},
        ...((e = o.styles) == null ? void 0 : e.item) || {}
      };
    }), D = l(() => {
      var t, e;
      return m((t = r.value.classNames) == null ? void 0 : t.itemDropdown, (e = o.classNames) == null ? void 0 : e.itemDropdown);
    }), S = l(() => {
      var t, e;
      return {
        ...((t = r.value.styles) == null ? void 0 : t.itemDropdown) || {},
        ...((e = o.styles) == null ? void 0 : e.itemDropdown) || {}
      };
    }), h = l(() => ({
      prefixCls: a,
      classNames: {
        item: v.value,
        itemDropdown: D.value
      },
      styles: {
        item: C.value,
        itemDropdown: S.value
      }
    })), A = l(() => {
      var t, e;
      return m(a, r.value.className, (t = r.value.classNames) == null ? void 0 : t.root, (e = o.classNames) == null ? void 0 : e.root, o.rootClassName, w, x.value, {
        [`${a}-rtl`]: g.value === "rtl"
      });
    }), _ = l(() => {
      var t, e;
      return {
        ...r.value.style,
        ...typeof o.style == "object" ? o.style : {},
        ...((t = r.value.styles) == null ? void 0 : t.root) || {},
        ...((e = o.styles) == null ? void 0 : e.root) || {}
      };
    }), V = l(() => {
      const t = o.variant ?? "borderless";
      return t === "border" ? "filled" : t;
    }), R = (t, e, n) => e ? i(E, y(n, {
      title: e
    }), $(t) ? t : {
      default: () => [t]
    }) : t, T = (t, e, n) => {
      if (e.disabled) {
        n.preventDefault();
        return;
      }
      if (e.onItemClick) {
        e.onItemClick(e);
        return;
      }
      p("click", {
        key: t,
        item: e,
        keyPath: [t],
        domEvent: n
      });
    }, j = (t) => {
      p("click", t);
    }, B = (t) => {
      const {
        icon: e,
        label: n,
        key: s,
        disabled: d,
        danger: L
      } = t;
      return i("div", {
        class: m(`${a}-list-item`, v.value, {
          [`${a}-list-item-disabled`]: d,
          [`${a}-list-danger`]: L
        }),
        style: C.value,
        "aria-disabled": d || void 0,
        onClick: (X) => T(s, t, X),
        key: s
      }, [R(i("div", {
        class: `${a}-list-item-icon`
      }, [e]), n)]);
    }, F = l(() => G(o, {
      aria: !0,
      data: !0
    }));
    return k({
      nativeElement: u
    }), () => {
      const t = i(K, {
        value: h.value
      }, {
        default: () => [i("div", y({
          ref: u,
          class: A.value
        }, F.value, {
          style: _.value
        }), [i("div", {
          class: m(`${a}-list`, `${a}-variant-${V.value}`, {
            block: o.block
          })
        }, [o.items.map((s) => {
          var d;
          return s.actionRender ? typeof s.actionRender == "function" ? s.actionRender(s) : s.actionRender : (d = Q(s)) != null && d.length ? i(J, {
            key: s.key,
            item: s,
            prefixCls: a,
            dropdownProps: o.dropdownProps,
            onClick: j
          }, null) : B(s);
        })])])]
      }), e = P.value, n = e ? i(M, {
        appear: !0,
        enterFromClass: `${e}-enter ${e}-appear`,
        enterActiveClass: `${e}-enter ${e}-enter-active ${e}-appear ${e}-appear-active`,
        enterToClass: `${e}-enter ${e}-enter-active`,
        leaveFromClass: `${e}-leave`,
        leaveActiveClass: `${e}-leave ${e}-leave-active`,
        leaveToClass: `${e}-leave ${e}-leave-active`
      }, $(t) ? t : {
        default: () => [t]
      }) : t;
      return I(n);
    };
  }
});
export {
  ce as default
};