vue-devui/action-timeline/index.es.js

DevUI components based on Vite and Vue3

import { defineComponent, toRefs, computed, createVNode, Fragment } from "vue";
const actionTimelineProps = {
  data: {
    type: Array
  },
  layout: {
    type: String,
    default: "horizontal"
  },
  loadMoreConfig: {
    type: Object
  },
  showTailLine: {
    type: Boolean,
    default: true
  },
  showStatusBgColor: {
    type: Boolean,
    default: false
  },
  showStatusLineColor: {
    type: Boolean,
    default: false
  }
};
var actionTimeline = "";
var ActionTimeline = defineComponent({
  name: "DActionTimeline",
  props: actionTimelineProps,
  emits: ["actionLoadMore"],
  setup(props, ctx) {
    const {
      layout,
      data,
      showTailLine,
      showStatusBgColor,
      showStatusLineColor,
      loadMoreConfig
    } = toRefs(props);
    const isVertical = computed(() => layout.value === "vertical");
    const containerClass = computed(() => ({
      "dp-action-timeline": true,
      "dp-action-timeline-status-bg": showStatusBgColor.value,
      "dp-action-timeline-status-line": showStatusLineColor.value
    }));
    const timelineItemClass = (childIndex, parentIndex, actionData, item) => ({
      "dp-action-timeline-item": true,
      "dp-action-timeline-item-info": showStatusLineColor.value && item.status === "color-info",
      "dp-action-timeline-item-danger": showStatusLineColor.value && item.status === "color-danger",
      "dp-action-timeline-item-success": showStatusLineColor.value && item.status === "color-info",
      "vertical-list-item": isVertical.value,
      "list-last-item": actionData.actions && (data == null ? void 0 : data.value) && childIndex === actionData.actions.length - 1 && parentIndex === data.value.length - 1 && showTailLine.value
    });
    const itemIconClass = (item, flag = false) => {
      var _a, _b;
      if (flag) {
        return {
          "dp-action-timeline-list-icon": true,
          "item-empty-icon": !item.icon,
          [(_a = item.status) != null ? _a : ""]: true
        };
      } else {
        return {
          icon: true,
          [(_b = item.icon) != null ? _b : ""]: true
        };
      }
    };
    const renderVerticalBody = (actionData, parentIndex) => {
      var _a;
      return (_a = actionData.actions) == null ? void 0 : _a.map((item, index2) => {
        var _a2, _b, _c, _d, _e, _f;
        return createVNode("div", {
          "class": timelineItemClass(index2, parentIndex, actionData, item)
        }, [createVNode("div", {
          "class": "vertical-list-item-top"
        }, [createVNode("div", {
          "class": "vertical-list-item-top-left"
        }, [((_b = (_a2 = ctx.slots).iconContent) == null ? void 0 : _b.call(_a2, {
          option: item
        })) || createVNode("div", {
          "class": itemIconClass(item, true)
        }, [!item.icon && createVNode("div", {
          "class": "list-empty-icon-dot"
        }, null), createVNode("em", {
          "class": itemIconClass(item)
        }, null)]), createVNode("div", {
          "class": "vertical-list-item-top-left-title"
        }, [(_d = (_c = ctx.slots).title) == null ? void 0 : _d.call(_c, {
          option: item
        })])]), createVNode("div", {
          "class": "dp-action-timeline-item-data"
        }, [item.createdAt])]), createVNode("div", {
          "class": "vertical-list-item-bottom"
        }, [(_f = (_e = ctx.slots).content) == null ? void 0 : _f.call(_e, {
          option: item
        })])]);
      });
    };
    const renderHorizontalBody = (actionData, parentIndex) => {
      var _a;
      return (_a = actionData.actions) == null ? void 0 : _a.map((item, index2) => {
        var _a2, _b, _c, _d, _e;
        return createVNode("div", {
          "class": timelineItemClass(index2, parentIndex, actionData, item)
        }, [((_b = (_a2 = ctx.slots).iconContent) == null ? void 0 : _b.call(_a2, {
          option: item
        })) || createVNode("div", {
          "class": itemIconClass(item, true)
        }, [!item.icon && createVNode("div", {
          "class": "list-empty-icon-dot"
        }, null), createVNode("em", {
          "class": itemIconClass(item)
        }, null)]), createVNode("div", {
          "class": "dp-action-timeline-list-data"
        }, [(_d = (_c = ctx.slots).content) == null ? void 0 : _d.call(_c, {
          option: item
        })]), createVNode("div", {
          "class": "dp-action-timeline-item-date"
        }, [item.createdAt]), !(actionData.actions && (data == null ? void 0 : data.value) && index2 === actionData.actions.length - 1 && parentIndex === ((_e = data == null ? void 0 : data.value) == null ? void 0 : _e.length) - 1) && createVNode("div", {
          "class": "border-bottom"
        }, null)]);
      });
    };
    const handleLoadMoreClicked = () => {
      ctx.emit("actionLoadMore");
    };
    const handleBackTopClicked = () => {
      window.scrollTo(0, 0);
    };
    const renderLoadMore = () => {
      var _a, _b;
      return createVNode("div", {
        "class": "dp-action-timeline-operation-container"
      }, [((_a = loadMoreConfig == null ? void 0 : loadMoreConfig.value) == null ? void 0 : _a.loadMore) && createVNode("div", {
        "class": "dp-action-timeline-operation",
        "onClick": handleLoadMoreClicked
      }, [loadMoreConfig.value.loadMoreText]), ((_b = loadMoreConfig == null ? void 0 : loadMoreConfig.value) == null ? void 0 : _b.isToTop) && createVNode("div", {
        "class": "dp-action-timeline-operation",
        "onClick": handleBackTopClicked
      }, [loadMoreConfig.value.toTopText])]);
    };
    return () => {
      var _a, _b;
      return createVNode(Fragment, null, [(_a = data == null ? void 0 : data.value) == null ? void 0 : _a.map((item, parentIndex) => createVNode("div", {
        "class": containerClass.value
      }, [createVNode("div", {
        "class": "dp-action-timeline-title"
      }, [createVNode("p", null, [item.time])]), createVNode("div", {
        "class": "dp-action-timeline-body"
      }, [isVertical.value ? renderVerticalBody(item, parentIndex) : renderHorizontalBody(item, parentIndex)]), createVNode("div", {
        "class": "border-left"
      }, null)])), Boolean((_b = data == null ? void 0 : data.value) == null ? void 0 : _b.length) && renderLoadMore()]);
    };
  }
});
var index = {
  title: "ActionTimeline \u64CD\u4F5C\u65F6\u95F4\u8F74",
  category: "\u6F14\u8FDB\u4E2D",
  status: "100%",
  install(app) {
    app.component(ActionTimeline.name, ActionTimeline);
  }
};
export { ActionTimeline, actionTimelineProps, index as default };