ant-design-x-vue-next/es/conversations/ConversationsItem.mjs

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

import { defineComponent as P, computed as t, createVNode as n, mergeProps as $ } from "vue";
import { Tooltip as h, Typography as M, Dropdown as O, Menu as T } from "ant-design-vue";
import { b as _, E } from "../chunks/module-chunk.mjs";
import w from "../_util/pick-attrs.mjs";
import p from "../_util/hooks/use-state.mjs";
import { useMobile as I } from "../_util/hooks/use-mobile.mjs";
const R = /* @__PURE__ */ P({
  name: "AXConversationsItem",
  __name: "ConversationsItem",
  props: {
    info: {},
    prefixCls: {},
    direction: {},
    menu: {},
    active: {
      type: Boolean
    },
    onClick: {
      type: Function
    }
  },
  setup(u) {
    const e = u, c = I(), m = t(() => w(e, {
      aria: !0,
      data: !0,
      attr: !0
    })), f = (o) => {
      o.stopPropagation();
    }, i = t(() => e.info.disabled), [d, g] = p(!1), [v, s] = p(!1), C = t(() => _(e.class, `${e.prefixCls}-item`, {
      [`${e.prefixCls}-item-active`]: e.active && !i.value,
      [`${e.prefixCls}-item-disabled`]: i.value,
      [`${e.prefixCls}-item-menu-always`]: c.value && !!e.menu
    })), b = () => {
      !i.value && e.onClick && e.onClick(e.info);
    }, x = (o) => {
      o && s(!o);
    }, l = t(() => {
      var o;
      return (o = e.menu) == null ? void 0 : o.trigger;
    }), a = t(() => {
      const {
        trigger: o,
        ...r
      } = e.menu || {};
      return r;
    }), k = t(() => {
      var o;
      return (o = a.value) == null ? void 0 : o.getPopupContainer;
    }), y = (o) => {
      const r = n(E, {
        onClick: f,
        class: `${e.prefixCls}-menu-icon`
      }, null);
      return l.value ? typeof l.value == "function" ? l.value(o, {
        originNode: r
      }) : l.value : r;
    };
    return () => n(h, {
      title: e.info.label,
      open: d.value && v.value,
      onOpenChange: s,
      placement: e.direction === "rtl" ? "left" : "right"
    }, {
      default: () => [n("li", $(m.value, {
        class: C.value,
        onClick: b
      }), [e.info.icon && n("div", {
        class: `${e.prefixCls}-icon`
      }, [e.info.icon]), n(M.Text, {
        class: `${e.prefixCls}-label`,
        ellipsis: {
          onEllipsis: g
        }
      }, {
        default: () => [e.info.label]
      }), !i.value && e.menu && n(O, {
        placement: e.direction === "rtl" ? "bottomLeft" : "bottomRight",
        trigger: ["click"],
        disabled: i.value,
        onOpenChange: x,
        getPopupContainer: k.value
      }, {
        default: () => y(e.info),
        overlay: () => n(T, a.value, null)
      })])]
    });
  }
});
export {
  R as default
};