@artmate/chat/dist/es/conversations/item.vue.js

借鉴字节开源react库AntX，通过vue实现的版本

import { defineComponent as S, ref as v, computed as $, createBlock as f, openBlock as r, unref as l, withCtx as c, createElementVNode as k, normalizeClass as u, renderSlot as y, createCommentVNode as C, createElementBlock as z, resolveDynamicComponent as g, normalizeStyle as D, createTextVNode as H, toDisplayString as I, createVNode as p } from "vue";
import { ElTooltip as P, ElIcon as E, ElButton as T } from "element-plus";
import { MoreFilled as W } from "@element-plus/icons-vue";
import F from "../dropdown/index.vue.js";
import { useNamespace as O } from "../hooks/useNamespace.js";
const K = /* @__PURE__ */ S({
  __name: "item",
  props: {
    direction: {},
    className: {},
    active: { type: Boolean },
    info: {},
    menu: {},
    inEllipsis: { type: Boolean, default: !0 },
    line: { default: 1 }
  },
  emits: ["click"],
  setup(N, { emit: h }) {
    const o = N, B = h, d = v(!1), a = O("conversations"), A = $(() => {
      var e, i;
      return [
        o.className,
        a.b("item"),
        { [a.b("item-active")]: o.active && !((e = o.info) != null && e.disabled) },
        { [a.b("item-disabled")]: (i = o.info) == null ? void 0 : i.disabled }
      ];
    }), V = (e) => {
      e.stopPropagation();
    }, s = v(), w = () => {
      var e, i, n, t, m;
      if ((e = o.info) != null && e.disabled) {
        d.value = !1;
        return;
      }
      s.value && (d.value = ((i = s.value) == null ? void 0 : i.scrollWidth) > ((n = s.value) == null ? void 0 : n.offsetWidth) || ((t = s.value) == null ? void 0 : t.scrollHeight) > ((m = s.value) == null ? void 0 : m.offsetHeight));
    }, M = () => {
      var e;
      (e = o.info) != null && e.disabled || B("click", o.info);
    }, R = (e) => {
      var i, n;
      Array.isArray(o.menu) || o.info && ((n = (i = o.menu) == null ? void 0 : i.onClick) == null || n.call(i, { ...o.info, key: e }));
    };
    return (e, i) => {
      var n;
      return r(), f(l(P), {
        visible: d.value,
        "onUpdate:visible": i[0] || (i[0] = (t) => d.value = t),
        content: (n = e.info) == null ? void 0 : n.label,
        disabled: e.inEllipsis && !d.value,
        placement: e.direction === "rtl" ? "left" : "right"
      }, {
        default: c(() => {
          var t, m;
          return [
            k("li", {
              class: u(A.value),
              onClick: M
            }, [
              y(e.$slots, "default", { class: "icon" }, () => [
                e.info.icon ? (r(), z("div", {
                  key: 0,
                  class: u(l(a).b("icon"))
                }, [
                  typeof e.info.icon == "string" ? (r(), f(l(E), { key: 0 }, {
                    default: c(() => [
                      (r(), f(g(e.info.icon)))
                    ]),
                    _: 1
                  })) : (r(), f(g(e.info.icon), { key: 1 }))
                ], 2)) : C("", !0)
              ]),
              k("div", {
                ref_key: "textRef",
                ref: s,
                class: u(l(a).b("label")),
                style: D({ textOverflow: "ellipsis", "-webkit-line-clamp": e.line }),
                onMouseenter: w
              }, [
                y(e.$slots, "label", { item: e.info }, () => [
                  H(I(e.info.label), 1)
                ])
              ], 38),
              e.menu && !((t = e.info) != null && t.disabled) ? (r(), f(F, {
                key: 0,
                disabled: (m = e.info) == null ? void 0 : m.disabled,
                menu: Array.isArray(e.menu) ? e.menu : e.menu.items,
                placement: e.direction === "rtl" ? "bottom-start" : "bottom-end",
                trigger: "click",
                onCommand: R
              }, {
                default: c(() => {
                  var b;
                  return [
                    p(l(T), {
                      disabled: (b = e.info) == null ? void 0 : b.disabled,
                      link: "",
                      onClick: V
                    }, {
                      default: c(() => [
                        p(l(E), {
                          class: u(l(a).b("menu-icon"))
                        }, {
                          default: c(() => [
                            p(l(W))
                          ]),
                          _: 1
                        }, 8, ["class"])
                      ]),
                      _: 1
                    }, 8, ["disabled"])
                  ];
                }),
                _: 1
              }, 8, ["disabled", "menu", "placement"])) : C("", !0)
            ], 2)
          ];
        }),
        _: 3
      }, 8, ["visible", "content", "disabled", "placement"]);
    };
  }
});
export {
  K as default
};