vue-devui 1.5.3 → 1.5.4

package/action-timeline/index.es.js

@@ -0,0 +1,161 @@
+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;
+        return createVNode("div", {
+          "class": timelineItemClass(index2, parentIndex, actionData, item)
+        }, [createVNode("div", {
+          "class": "vertical-list-item-top"
+        }, [createVNode("div", {
+          "class": "vertical-list-item-top-left"
+        }, [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"
+        }, [(_b = (_a2 = ctx.slots).title) == null ? void 0 : _b.call(_a2, {
+          option: item
+        })])]), createVNode("div", {
+          "class": "dp-action-timeline-item-data"
+        }, [item.createdAt])]), createVNode("div", {
+          "class": "vertical-list-item-bottom"
+        }, [(_d = (_c = ctx.slots).content) == null ? void 0 : _d.call(_c, {
+          option: item
+        })])]);
+      });
+    };
+    const renderHorizontalBody = (actionData, parentIndex) => {
+      var _a;
+      return (_a = actionData.actions) == null ? void 0 : _a.map((item, index2) => {
+        var _a2, _b, _c;
+        return createVNode("div", {
+          "class": timelineItemClass(index2, parentIndex, actionData, 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"
+        }, [(_b = (_a2 = ctx.slots).content) == null ? void 0 : _b.call(_a2, {
+          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 === ((_c = data == null ? void 0 : data.value) == null ? void 0 : _c.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 };

package/action-timeline/index.umd.js

@@ -0,0 +1 @@
+(function(a,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis!="undefined"?globalThis:a||self,e(a.index={},a.Vue))})(this,function(a,e){"use strict";const v={data:{type:Array},layout:{type:String,default:"horizontal"},loadMoreConfig:{type:Object},showTailLine:{type:Boolean,default:!0},showStatusBgColor:{type:Boolean,default:!1},showStatusLineColor:{type:Boolean,default:!1}};var k="",f=e.defineComponent({name:"DActionTimeline",props:v,emits:["actionLoadMore"],setup(N,u){const{layout:C,data:i,showTailLine:B,showStatusBgColor:b,showStatusLineColor:p,loadMoreConfig:s}=e.toRefs(N),y=e.computed(()=>C.value==="vertical"),w=e.computed(()=>({"dp-action-timeline":!0,"dp-action-timeline-status-bg":b.value,"dp-action-timeline-status-line":p.value})),T=(o,n,l,t)=>({"dp-action-timeline-item":!0,"dp-action-timeline-item-info":p.value&&t.status==="color-info","dp-action-timeline-item-danger":p.value&&t.status==="color-danger","dp-action-timeline-item-success":p.value&&t.status==="color-info","vertical-list-item":y.value,"list-last-item":l.actions&&(i==null?void 0:i.value)&&o===l.actions.length-1&&n===i.value.length-1&&B.value}),m=(o,n=!1)=>{var l,t;return n?{"dp-action-timeline-list-icon":!0,"item-empty-icon":!o.icon,[(l=o.status)!=null?l:""]:!0}:{icon:!0,[(t=o.icon)!=null?t:""]:!0}},L=(o,n)=>{var l;return(l=o.actions)==null?void 0:l.map((t,V)=>{var c,d,r,h;return e.createVNode("div",{class:T(V,n,o,t)},[e.createVNode("div",{class:"vertical-list-item-top"},[e.createVNode("div",{class:"vertical-list-item-top-left"},[e.createVNode("div",{class:m(t,!0)},[!t.icon&&e.createVNode("div",{class:"list-empty-icon-dot"},null),e.createVNode("em",{class:m(t)},null)]),e.createVNode("div",{class:"vertical-list-item-top-left-title"},[(d=(c=u.slots).title)==null?void 0:d.call(c,{option:t})])]),e.createVNode("div",{class:"dp-action-timeline-item-data"},[t.createdAt])]),e.createVNode("div",{class:"vertical-list-item-bottom"},[(h=(r=u.slots).content)==null?void 0:h.call(r,{option:t})])])})},A=(o,n)=>{var l;return(l=o.actions)==null?void 0:l.map((t,V)=>{var c,d,r;return e.createVNode("div",{class:T(V,n,o,t)},[e.createVNode("div",{class:m(t,!0)},[!t.icon&&e.createVNode("div",{class:"list-empty-icon-dot"},null),e.createVNode("em",{class:m(t)},null)]),e.createVNode("div",{class:"dp-action-timeline-list-data"},[(d=(c=u.slots).content)==null?void 0:d.call(c,{option:t})]),e.createVNode("div",{class:"dp-action-timeline-item-date"},[t.createdAt]),!(o.actions&&(i==null?void 0:i.value)&&V===o.actions.length-1&&n===((r=i==null?void 0:i.value)==null?void 0:r.length)-1)&&e.createVNode("div",{class:"border-bottom"},null)])})},F=()=>{u.emit("actionLoadMore")},S=()=>{window.scrollTo(0,0)},M=()=>{var o,n;return e.createVNode("div",{class:"dp-action-timeline-operation-container"},[((o=s==null?void 0:s.value)==null?void 0:o.loadMore)&&e.createVNode("div",{class:"dp-action-timeline-operation",onClick:F},[s.value.loadMoreText]),((n=s==null?void 0:s.value)==null?void 0:n.isToTop)&&e.createVNode("div",{class:"dp-action-timeline-operation",onClick:S},[s.value.toTopText])])};return()=>{var o,n;return e.createVNode(e.Fragment,null,[(o=i==null?void 0:i.value)==null?void 0:o.map((l,t)=>e.createVNode("div",{class:w.value},[e.createVNode("div",{class:"dp-action-timeline-title"},[e.createVNode("p",null,[l.time])]),e.createVNode("div",{class:"dp-action-timeline-body"},[y.value?L(l,t):A(l,t)]),e.createVNode("div",{class:"border-left"},null)])),Boolean((n=i==null?void 0:i.value)==null?void 0:n.length)&&M()])}}}),g={title:"ActionTimeline \u64CD\u4F5C\u65F6\u95F4\u8F74",category:"\u6F14\u8FDB\u4E2D",status:"100%",install(N){N.component(f.name,f)}};a.ActionTimeline=f,a.actionTimelineProps=v,a.default=g,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});

package/action-timeline/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "action-timeline",
+  "version": "0.0.0",
+  "main": "index.umd.js",
+  "module": "index.es.js",
+  "style": "style.css",
+  "types": "../types/action-timeline/index.d.ts"
+}

package/action-timeline/style.css

@@ -0,0 +1 @@
+.dp-action-timeline{background-color:var(--devui-base-bg, #ffffff);padding:0 20px;position:relative}.dp-action-timeline .dp-action-timeline-title{font-size:var(--devui-font-size-sm, 12px);padding-top:12px}.dp-action-timeline .dp-action-timeline-title>p{position:relative;z-index:2;background-color:var(--devui-base-bg, #ffffff);padding:8px 0}.dp-action-timeline .dp-action-timeline-item{display:flex;position:relative;padding:12px 0}.dp-action-timeline .dp-action-timeline-item.list-last-item:before{content:"";position:absolute;top:24px;height:calc(100% - 24px);left:10px;border-left:4px solid var(--devui-base-bg, #ffffff);z-index:2}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon{width:24px;height:24px;margin-right:8px;border-radius:50%;background-color:var(--devui-list-item-hover-bg, #f2f2f3);position:relative;z-index:3}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon:before,.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon:after{content:"";position:absolute;height:2px;width:2px;left:11px;background-color:var(--devui-base-bg, #ffffff);z-index:3}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon:before{top:-2px}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon:after{bottom:-2px}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.item-empty-icon{background:none}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.item-empty-icon:before{top:7px}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.item-empty-icon:before{bottom:7px}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.item-empty-icon .list-empty-icon-dot{position:absolute;width:6px;height:6px;background-color:var(--devui-list-item-hover-bg, #f2f2f3);top:9px;left:9px;border-radius:50%}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon .icon{width:24px;font-size:var(--devui-font-size-icon, 16px);color:var(--devui-icon-text, #71757f);text-align:center;line-height:24px}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.color-info .icon{color:var(--devui-info, #5e7ce0)}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.color-danger .icon{color:var(--devui-danger, #f66f6a)}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.color-success .icon{color:var(--devui-success, #50d4ab)}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-icon.color-warning .icon{color:var(--devui-warning, #fac20a)}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-list-data{flex:1;word-break:break-all}.dp-action-timeline .dp-action-timeline-item .dp-action-timeline-item-date{font-size:var(--devui-font-size-sm, 12px);color:var(--devui-aide-text, #71757f)}.dp-action-timeline .dp-action-timeline-item .border-bottom{position:absolute;bottom:0;width:calc(100% - 12px);height:1px;margin-left:12px;background-color:var(--devui-dividing-line, #f2f2f3)}.dp-action-timeline .dp-action-timeline-item.vertical-list-item{display:flex;flex-direction:column}.dp-action-timeline .dp-action-timeline-item.vertical-list-item .vertical-list-item-top{display:flex;align-items:center;justify-content:space-between}.dp-action-timeline .dp-action-timeline-item.vertical-list-item .vertical-list-item-top .vertical-list-item-top-left{display:flex;align-items:center}.dp-action-timeline .border-left{position:absolute;bottom:0;left:31px;width:2px;height:100%;background-color:var(--devui-dividing-line, #f2f2f3);z-index:1}.dp-action-timeline:first-child .border-left{height:calc(100% - 26px)}.dp-action-timeline-operation-container .dp-action-timeline-operation{margin:0 18px;padding:4px 0;height:32px;font-size:var(--devui-font-size-lg, 14px);text-align:center;border:1px solid var(--devui-form-control-line, #d7d8da);background-color:var(--devui-base-bg, #ffffff);border-radius:4px;cursor:pointer;transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),border-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.dp-action-timeline-operation-container .dp-action-timeline-operation:hover{color:var(--devui-brand-active, #526ecc);border-color:var(--devui-form-control-line-active, #5e7ce0)}.dp-action-timeline-status-bg .dp-action-timeline-list-icon.color-info{background-color:var(--devui-info-bg, #f2f5fc)}.dp-action-timeline-status-bg .dp-action-timeline-list-icon.color-danger{background-color:var(--devui-danger-bg, #ffeeed)}.dp-action-timeline-status-bg .dp-action-timeline-list-icon.color-success{background-color:var(--devui-success-bg, #edfff9)}.dp-action-timeline-status-bg .dp-action-timeline-list-icon.color-warning{background-color:var(--devui-warning-bg, #fff3e8)}.dp-action-timeline-status-line .border-left{display:none}.dp-action-timeline-status-line .dp-action-timeline-item:before{content:"";position:absolute;top:40px;height:calc(100% - 40px);left:11px;border-left:2px solid transparent;z-index:2;border-color:var(--devui-line, #d7d8da)}.dp-action-timeline-status-line .dp-action-timeline-item.dp-action-timeline-item-info:before{content:"";position:absolute;top:40px;height:calc(100% - 40px);left:11px;border-left:2px solid transparent;z-index:2;border-color:var(--devui-info-line, #5e7ce0)}.dp-action-timeline-status-line .dp-action-timeline-item.dp-action-timeline-item-danger:before{content:"";position:absolute;top:40px;height:calc(100% - 40px);left:11px;border-left:2px solid transparent;z-index:2;border-color:var(--devui-danger-line, #f66f6a)}.dp-action-timeline-status-line .dp-action-timeline-item.dp-action-timeline-item-success:before{content:"";position:absolute;top:40px;height:calc(100% - 40px);left:11px;border-left:2px solid transparent;z-index:2;border-color:var(--devui-success-line, #50d4ab)}.dp-action-timeline-status-line .dp-action-timeline-item.dp-action-timeline-item-warning:before{content:"";position:absolute;top:40px;height:calc(100% - 40px);left:11px;border-left:2px solid transparent;z-index:2;border-color:var(--devui-warning-line, #fa9841)}.dp-action-timeline-status-line .dp-action-timeline-item.list-last-item:before{content:"";position:absolute;top:40px;height:calc(100% - 40px);left:11px;border-left:2px solid transparent;z-index:2;border-color:var(--devui-base-bg, #ffffff)}