@farris/ui-vue/components/discussion-list/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { defineComponent as y, ref as t, computed as u, onMounted as D, createVNode as s } from "vue";
const x = {
  pagerOnServer: { Type: Boolean, default: !0 },
  /** 是否支持分页 */
  supportPaging: { Type: Boolean, default: !0 },
  /** 当前页码 */
  pageIndex: { Type: Number, default: 1 },
  /** 总条数 */
  total: { Type: Number, default: 0 },
  /** 每页显示个数 */
  pageSize: { Type: Number, default: 10 },
  /** 评论数据 */
  discussionData: { Type: Object, default: [] },
  personnelsDisplayKey: { Type: String, default: "userName" }
}, c = /* @__PURE__ */ y({
  name: "FDiscussionList",
  props: x,
  emits: ["replyMessage", "page", "pageSize", "filePreview", "fileDownload"],
  setup(i, r) {
    const o = t(i.personnelsDisplayKey), d = t(i.pagerOnServer), p = t(i.supportPaging), m = t(i.pageIndex), n = t(i.total), a = t(i.pageSize);
    t(i.discussionData);
    let g = [];
    u({
      get() {
        return n.value;
      },
      set(e) {
        n.value = e, l();
      }
    }), u({
      get() {
        return a.value;
      },
      set(e) {
        a.value = e, l();
      }
    }), D(() => {
      l();
    });
    function l() {
      a.value, m.value;
    }
    function v(e) {
      r.emit("replyMessage", e);
    }
    return () => s("div", null, [s("div", {
      class: "f-discussion-group-content"
    }, [
      // *ngFor="let item of (supportPaging ? (innerDiscussionData | paginate: paginationOptions) : innerDiscussionData)"
      g.map((e) => s("div", {
        class: "f-discussion-group-content-item"
      }, [s("div", {
        class: "discussion-item-avatar"
      }, [s("div", null, [e.imgData && s("div", null, [s("img", {
        src: e.imgData,
        alt: "",
        class: "discussion-item-avatar-img"
      }, null)])]), s("div", null, [!e.imgData && s("div", {
        class: "discussion-item-avatar-tip"
      }, null)])]), s("div", {
        class: "discussion-item-inner"
      }, [s("div", {
        class: "discussion-item-username"
      }, [e[o.value]]), s("div", {
        class: "discussion-item-text"
      }, [s("span", {
        class: "discussion-item-text-message",
        innerHTML: e.text
      }, null)]), e.parentData && s("div", {
        class: "discussion-item-text-reply"
      }, [s("span", {
        class: "discussion-item-text-reply-title"
      }, ["discussionGroup.reply", s("span", {
        class: "discussion-item-text-reply-name"
      }, [e.parentData[o.value]])]), s("span", {
        class: "discussion-item-text-reply-content",
        innerHTML: e.parentData.text
      }, null)]), s("div", {
        class: "discussion-item-footer"
      }, [s("div", {
        class: "discussion-item-time"
      }, [s("span", {
        class: "discussion-item-time-text"
      }, [e.commentDate])]), s("div", {
        class: "discussion-item-btns"
      }, [s("span", {
        class: "discussion-item-btns-start",
        onClick: (f) => {
          v(f);
        }
      }, [s("span", {
        class: "f-icon f-icon-message"
      }, null), s("span", {
        class: "discussion-item-btns-start-text"
      }, ["discussionGroup.reply"])])])])])])),
      p.value && s("div", {
        class: "f-discussion-group-footer"
      }, null)
    ])]);
  }
}), T = {
  install(i) {
    i.component(c.name, c);
  }
};
export {
  c as DiscussionListProps,
  T as default,
  x as discussionListProps
};