@artmate/chat/dist/es/thought-chain/item.vue.js

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

import { defineComponent as V, useSlots as E, useId as F, computed as z, createElementBlock as a, openBlock as l, normalizeStyle as d, normalizeClass as n, unref as t, createElementVNode as i, withDirectives as D, createCommentVNode as r, renderSlot as m, createTextVNode as H, createVNode as $, withCtx as I, toDisplayString as g, vShow as K } from "vue";
import { ElIcon as R } from "element-plus";
import { ArrowRightBold as T } from "@element-plus/icons-vue";
import { useNamespace as _ } from "../hooks/useNamespace.js";
const A = { key: 0 }, L = /* @__PURE__ */ V({
  __name: "item",
  props: {
    info: { default: () => ({}) },
    nextStatus: {},
    headerClick: { type: Function, default: () => {
    } },
    expandedKeys: {},
    className: {},
    style: {},
    classNames: {},
    styles: {},
    enableCollapse: { type: Boolean }
  },
  setup(w) {
    const o = _("thought-chain-item"), e = w, c = E(), u = F(), B = () => {
      var s;
      return (s = e.headerClick) == null ? void 0 : s.call(e, u);
    }, f = z(() => {
      var s;
      return (s = e.expandedKeys) == null ? void 0 : s.includes(u);
    });
    return (s, O) => {
      var p, y, b, h, C, v, N, k, S, x;
      return l(), a("div", {
        class: n([t(o).b(), ((p = e.info) == null ? void 0 : p.status) && t(o).b(`${e.info.status}${s.nextStatus ? `-${s.nextStatus}` : ""}`), e.className]),
        style: d(e.style)
      }, [
        i("div", {
          class: n([t(o).b("header"), (y = e.classNames) == null ? void 0 : y.itemHeader]),
          style: d((b = e.styles) == null ? void 0 : b.itemHeader),
          onClick: B
        }, [
          i("div", {
            class: n([t(o).b("icon")])
          }, [
            m(s.$slots, "icon", {
              info: e.info
            })
          ], 2),
          i("div", {
            class: n([t(o).b("header-box"), s.enableCollapse && t(c).content])
          }, [
            i("span", {
              class: n([t(o).b("title")])
            }, [
              i("strong", null, [
                e.enableCollapse && t(c).content ? (l(), a("div", A, [
                  $(t(R), {
                    class: n([t(o).b("collapse-icon"), f.value && "rotate"])
                  }, {
                    default: I(() => [
                      $(t(T))
                    ]),
                    _: 1
                  }, 8, ["class"])
                ])) : r("", !0),
                H(" " + g((h = e.info) == null ? void 0 : h.title), 1)
              ])
            ], 2),
            (C = e.info) != null && C.description ? (l(), a("span", {
              key: 0,
              class: n([t(o).b("desc")])
            }, g((v = e.info) == null ? void 0 : v.description), 3)) : r("", !0)
          ], 2),
          t(c).extra ? (l(), a("div", {
            key: 0,
            class: n([t(o).b("extra")])
          }, [
            m(s.$slots, "extra", {
              info: e.info
            })
          ], 2)) : r("", !0)
        ], 6),
        t(c).content ? D((l(), a("div", {
          key: 0,
          ref: "contentRef",
          class: n([t(o).b("content")])
        }, [
          i("div", {
            class: n([t(o).b("content-box"), (N = e.classNames) == null ? void 0 : N.itemContent]),
            style: d((k = e.styles) == null ? void 0 : k.itemContent)
          }, [
            m(s.$slots, "content", {
              info: e.info
            })
          ], 6)
        ], 2)), [
          [K, e.enableCollapse ? f.value : !0]
        ]) : r("", !0),
        t(c).footer ? (l(), a("div", {
          key: 1,
          class: n([t(o).b("footer"), (S = e.classNames) == null ? void 0 : S.itemFooter]),
          style: d((x = e.styles) == null ? void 0 : x.itemFooter)
        }, [
          m(s.$slots, "footer", {
            info: e.info
          })
        ], 6)) : r("", !0)
      ], 6);
    };
  }
});
export {
  L as default
};