vue-devui 1.5.4-alpha.0 → 1.5.5

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)}

package/carousel/index.es.js

@@ -0,0 +1,448 @@
+import { defineComponent, toRefs, computed, createVNode, resolveDynamicComponent, mergeProps, ref, watch, onMounted, onBeforeUnmount, Fragment, Comment } from "vue";
+const carouselProps = {
+  arrowTrigger: {
+    type: String,
+    default: "hover"
+  },
+  autoplay: {
+    type: Boolean,
+    default: false
+  },
+  autoplaySpeed: {
+    type: Number,
+    default: 3e3
+  },
+  height: {
+    type: String,
+    default: "100%"
+  },
+  showDots: {
+    type: Boolean,
+    default: true
+  },
+  dotTrigger: {
+    type: String,
+    default: "click"
+  },
+  dotPosition: {
+    type: String,
+    default: "bottom"
+  },
+  activeIndex: {
+    type: Number,
+    default: 0
+  },
+  transitionSpeed: {
+    type: Number,
+    default: 500
+  }
+};
+const DEFAULT_PREFIX = "icon";
+const iconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
+  },
+  size: {
+    type: [Number, String],
+    default: "inherit"
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  component: {
+    type: Object,
+    default: null
+  },
+  classPrefix: {
+    type: String,
+    default: DEFAULT_PREFIX
+  },
+  operable: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  rotate: {
+    type: [Number, String]
+  }
+};
+const svgIconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  size: {
+    type: [Number, String],
+    default: "inherit"
+  }
+};
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
+var icon = "";
+var svgIcon = defineComponent({
+  name: "DSvgIcon",
+  props: svgIconProps,
+  setup(props) {
+    const {
+      name,
+      color,
+      size
+    } = toRefs(props);
+    const ns = useNamespace("svg-icon");
+    const iconName = computed(() => `#icon-${name.value}`);
+    const iconSize = computed(() => {
+      return typeof size.value === "number" ? `${size.value}px` : size.value;
+    });
+    const styles = {
+      width: iconSize.value,
+      height: iconSize.value
+    };
+    return () => {
+      return createVNode("svg", {
+        "class": ns.b(),
+        "style": styles
+      }, [createVNode("use", {
+        "xlink:href": iconName.value,
+        "fill": color.value
+      }, null)]);
+    };
+  }
+});
+function isUrl(value) {
+  return /^((http|https):)?\/\//.test(value);
+}
+function useIconDom(props, ctx) {
+  const {
+    component,
+    name,
+    size,
+    color,
+    classPrefix,
+    rotate
+  } = toRefs(props);
+  const ns = useNamespace("icon");
+  const iconSize = computed(() => {
+    return typeof size.value === "number" ? `${size.value}px` : size.value;
+  });
+  const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
+  const imgIconDom = () => {
+    return createVNode("img", mergeProps({
+      "src": name.value,
+      "alt": name.value.split("/")[name.value.split("/").length - 1],
+      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
+      "style": {
+        width: iconSize.value || "",
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`,
+        verticalAlign: "middle"
+      }
+    }, ctx.attrs), null);
+  };
+  const svgIconDom = () => {
+    return createVNode(IconComponent, mergeProps({
+      "name": name.value,
+      "color": color.value,
+      "size": iconSize.value,
+      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
+      "style": {
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
+      }
+    }, ctx.attrs), null);
+  };
+  const fontIconDom = () => {
+    const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
+    return createVNode("i", mergeProps({
+      "class": [classPrefix.value, fontIconClass, (rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
+      "style": {
+        fontSize: iconSize.value,
+        color: color.value,
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
+      }
+    }, ctx.attrs), null);
+  };
+  const iconDom = () => {
+    return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
+  };
+  return {
+    iconDom
+  };
+}
+var Icon = defineComponent({
+  name: "DIcon",
+  props: iconProps,
+  emits: ["click"],
+  setup(props, ctx) {
+    const {
+      disabled,
+      operable
+    } = toRefs(props);
+    const {
+      iconDom
+    } = useIconDom(props, ctx);
+    const ns = useNamespace("icon");
+    const wrapClassed = computed(() => ({
+      [ns.e("container")]: true,
+      [ns.m("disabled")]: disabled.value,
+      [ns.m("operable")]: operable.value,
+      [ns.m("no-slots")]: !Object.keys(ctx.slots).length
+    }));
+    const onClick = (e) => {
+      if (disabled.value) {
+        return;
+      }
+      ctx.emit("click", e);
+    };
+    return () => {
+      var _a, _b, _c, _d;
+      return createVNode("div", {
+        "class": wrapClassed.value,
+        "onClick": onClick
+      }, [(_b = (_a = ctx.slots).prefix) == null ? void 0 : _b.call(_a), iconDom(), (_d = (_c = ctx.slots).suffix) == null ? void 0 : _d.call(_c)]);
+    };
+  }
+});
+var carousel = "";
+var Carousel = defineComponent({
+  name: "DCarousel",
+  props: carouselProps,
+  emits: ["update:activeIndex", "activeIndexChange"],
+  setup(props, {
+    emit,
+    slots,
+    expose
+  }) {
+    const ns = useNamespace("carousel");
+    const {
+      height,
+      showDots,
+      dotPosition,
+      arrowTrigger,
+      autoplay,
+      autoplaySpeed,
+      dotTrigger,
+      activeIndex,
+      transitionSpeed
+    } = toRefs(props);
+    const itemCount = ref(0);
+    const showArrow = ref(false);
+    const currentIndex = ref(0);
+    const wrapperRef = ref(null);
+    const containerRef = ref(null);
+    const scheduledId = ref(null);
+    watch(() => arrowTrigger, () => {
+      showArrow.value = arrowTrigger.value === "always";
+    }, {
+      immediate: true
+    });
+    watch(() => activeIndex, () => {
+      currentIndex.value = activeIndex.value;
+    }, {
+      immediate: true
+    });
+    const translatePosition = (size) => {
+      if (containerRef.value) {
+        containerRef.value.style.left = `${-size * 100}%`;
+      }
+    };
+    const adjustTransition = (targetEl) => {
+      setTimeout(() => {
+        if (containerRef.value) {
+          containerRef.value.style.transition = "";
+        }
+        targetEl.style.transform = "";
+        translatePosition(currentIndex.value);
+      }, transitionSpeed.value);
+    };
+    const adjustPosition = (targetEl, firstToLast) => {
+      if (wrapperRef.value) {
+        const wrapperRect = wrapperRef.value.getBoundingClientRect();
+        targetEl.style.transform = `translateX(${(firstToLast ? -itemCount.value : itemCount.value) * wrapperRect.width}px)`;
+      }
+    };
+    const clearScheduledTransition = () => {
+      if (scheduledId.value) {
+        clearTimeout(scheduledId.value);
+        scheduledId.value = null;
+      }
+    };
+    const autoScheduleTransition = (callback) => {
+      clearScheduledTransition();
+      if (autoplay.value && autoplaySpeed.value) {
+        scheduledId.value = setTimeout(() => {
+          callback == null ? void 0 : callback();
+        }, autoplaySpeed.value);
+      }
+    };
+    const goto = (index2) => {
+      if (index2 === currentIndex.value || !wrapperRef.value || !containerRef.value) {
+        return;
+      }
+      containerRef.value.style.transition = `left ${transitionSpeed.value}ms ease`;
+      let latestIndex = currentIndex.value;
+      if (index2 < 0 && currentIndex.value === 0) {
+        latestIndex = itemCount.value - 1;
+        const targetEl = containerRef.value.children[latestIndex];
+        adjustPosition(targetEl, true);
+        translatePosition(-1);
+        adjustTransition(targetEl);
+      } else if (index2 >= itemCount.value && currentIndex.value === itemCount.value - 1) {
+        latestIndex = 0;
+        const targetEl = containerRef.value.children[latestIndex];
+        adjustPosition(targetEl, false);
+        translatePosition(itemCount.value);
+        adjustTransition(targetEl);
+      } else {
+        latestIndex = index2 < 0 ? 0 : index2 > itemCount.value - 1 ? itemCount.value - 1 : index2;
+        translatePosition(latestIndex);
+      }
+      currentIndex.value = latestIndex;
+      emit("update:activeIndex", latestIndex);
+      emit("activeIndexChange", latestIndex);
+      autoScheduleTransition(() => {
+        goto(currentIndex.value + 1);
+      });
+    };
+    const prev = () => {
+      goto(currentIndex.value - 1);
+    };
+    const next = () => {
+      goto(currentIndex.value + 1);
+    };
+    const arrowMouseEvent = (type) => {
+      if (arrowTrigger.value !== "hover") {
+        return;
+      }
+      showArrow.value = type === "enter";
+    };
+    const switchStep = (index2, type) => {
+      if (type === dotTrigger.value) {
+        goto(index2);
+      }
+    };
+    const changeItemCount = (val) => {
+      itemCount.value = val;
+      autoScheduleTransition(next);
+    };
+    onMounted(() => {
+      if (containerRef.value) {
+        containerRef.value.style.transition = `left ${transitionSpeed.value}ms ease`;
+        containerRef.value.style.left = "0%";
+      }
+      autoScheduleTransition(next);
+    });
+    onBeforeUnmount(() => {
+      clearScheduledTransition();
+    });
+    expose({
+      prev,
+      next,
+      goto
+    });
+    return () => {
+      var _a, _b;
+      const slot = (_b = (_a = slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : [];
+      let children = slot;
+      if (children.length === 1 && children[0].type === Fragment) {
+        children = (children[0].children || []).filter((item) => (item == null ? void 0 : item.type) !== Comment);
+      }
+      if (children.length !== itemCount.value) {
+        changeItemCount(children.length);
+      }
+      return createVNode("div", {
+        "class": ns.b(),
+        "style": {
+          height: height.value
+        },
+        "onMouseenter": () => arrowMouseEvent("enter"),
+        "onMouseleave": () => arrowMouseEvent("leave")
+      }, [arrowTrigger.value !== "never" && showArrow.value ? createVNode("div", {
+        "class": ns.e("arrow")
+      }, [createVNode("button", {
+        "class": "arrow-left",
+        "onClick": () => prev()
+      }, [createVNode(Icon, {
+        "name": "arrow-left"
+      }, null)]), createVNode("button", {
+        "class": "arrow-right",
+        "onClick": () => next()
+      }, [createVNode(Icon, {
+        "name": "arrow-right"
+      }, null)])]) : null, createVNode("div", {
+        "class": ns.e("item-wrapper"),
+        "ref": wrapperRef
+      }, [createVNode("div", {
+        "class": ns.e("item-container"),
+        "style": {
+          width: `${itemCount.value * 100}%`
+        },
+        "ref": containerRef
+      }, [slot])]), itemCount.value > 0 && showDots.value ? createVNode("ul", {
+        "class": [ns.e("dots"), dotPosition.value]
+      }, [children.map((_, index2) => createVNode("li", {
+        "class": {
+          "dot-item": true,
+          active: currentIndex.value === index2
+        },
+        "onClick": () => switchStep(index2, "click"),
+        "onMouseenter": () => switchStep(index2, "hover"),
+        "style": {
+          transition: `all ${transitionSpeed.value}ms ease`
+        }
+      }, null))]) : null]);
+    };
+  }
+});
+var CarouselItem = defineComponent({
+  name: "DCarouselItem",
+  setup(props, {
+    slots
+  }) {
+    var _a;
+    const ns = useNamespace("carousel");
+    const children = (_a = slots.default) == null ? void 0 : _a.call(slots);
+    return () => createVNode("div", {
+      "class": ns.e("item")
+    }, [children]);
+  }
+});
+var index = {
+  title: "Carousel \u8D70\u9A6C\u706F",
+  category: "\u6570\u636E\u5C55\u793A",
+  status: "100%",
+  install(app) {
+    app.component(Carousel.name, Carousel);
+    app.component(CarouselItem.name, CarouselItem);
+  }
+};
+export { Carousel, CarouselItem, index as default };

package/carousel/index.umd.js

@@ -0,0 +1 @@
+(function(p,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(p=typeof globalThis!="undefined"?globalThis:p||self,e(p.index={},p.Vue))})(this,function(p,e){"use strict";const O={arrowTrigger:{type:String,default:"hover"},autoplay:{type:Boolean,default:!1},autoplaySpeed:{type:Number,default:3e3},height:{type:String,default:"100%"},showDots:{type:Boolean,default:!0},dotTrigger:{type:String,default:"click"},dotPosition:{type:String,default:"bottom"},activeIndex:{type:Number,default:0},transitionSpeed:{type:Number,default:500}},X={name:{type:String,default:"",required:!0},size:{type:[Number,String],default:"inherit"},color:{type:String,default:"inherit"},component:{type:Object,default:null},classPrefix:{type:String,default:"icon"},operable:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},rotate:{type:[Number,String]}},L={name:{type:String,default:"",required:!0},color:{type:String,default:"inherit"},size:{type:[Number,String],default:"inherit"}};function b(r,a,o){let l=r;return a&&(l+=`__${a}`),o&&(l+=`--${o}`),l}function N(r,a=!1){const o=a?`.devui-${r}`:`devui-${r}`;return{b:()=>b(o),e:t=>t?b(o,t):"",m:t=>t?b(o,"",t):"",em:(t,i)=>t&&i?b(o,t,i):""}}var Y="",G=e.defineComponent({name:"DSvgIcon",props:L,setup(r){const{name:a,color:o,size:l}=e.toRefs(r),u=N("svg-icon"),d=e.computed(()=>`#icon-${a.value}`),m=e.computed(()=>typeof l.value=="number"?`${l.value}px`:l.value),t={width:m.value,height:m.value};return()=>e.createVNode("svg",{class:u.b(),style:t},[e.createVNode("use",{"xlink:href":d.value,fill:o.value},null)])}});function H(r){return/^((http|https):)?\/\//.test(r)}function J(r,a){const{component:o,name:l,size:u,color:d,classPrefix:m,rotate:t}=e.toRefs(r),i=N("icon"),y=e.computed(()=>typeof u.value=="number"?`${u.value}px`:u.value),h=o.value?e.resolveDynamicComponent(o.value):e.resolveDynamicComponent(G),C=()=>e.createVNode("img",e.mergeProps({src:l.value,alt:l.value.split("/")[l.value.split("/").length-1],class:[(t==null?void 0:t.value)==="infinite"&&i.m("spin")],style:{width:y.value||"",transform:`rotate(${t==null?void 0:t.value}deg)`,verticalAlign:"middle"}},a.attrs),null),D=()=>e.createVNode(h,e.mergeProps({name:l.value,color:d.value,size:y.value,class:[(t==null?void 0:t.value)==="infinite"&&i.m("spin")],style:{transform:`rotate(${t==null?void 0:t.value}deg)`}},a.attrs),null),I=()=>{const S=/^icon-/.test(l.value)?l.value:`${m.value}-${l.value}`;return e.createVNode("i",e.mergeProps({class:[m.value,S,(t==null?void 0:t.value)==="infinite"&&i.m("spin")],style:{fontSize:y.value,color:d.value,transform:`rotate(${t==null?void 0:t.value}deg)`}},a.attrs),null)};return{iconDom:()=>o.value?D():H(l.value)?C():I()}}var _=e.defineComponent({name:"DIcon",props:X,emits:["click"],setup(r,a){const{disabled:o,operable:l}=e.toRefs(r),{iconDom:u}=J(r,a),d=N("icon"),m=e.computed(()=>({[d.e("container")]:!0,[d.m("disabled")]:o.value,[d.m("operable")]:l.value,[d.m("no-slots")]:!Object.keys(a.slots).length})),t=i=>{o.value||a.emit("click",i)};return()=>{var i,y,h,C;return e.createVNode("div",{class:m.value,onClick:t},[(y=(i=a.slots).prefix)==null?void 0:y.call(i),u(),(C=(h=a.slots).suffix)==null?void 0:C.call(h)])}}}),Z="",z=e.defineComponent({name:"DCarousel",props:O,emits:["update:activeIndex","activeIndexChange"],setup(r,{emit:a,slots:o,expose:l}){const u=N("carousel"),{height:d,showDots:m,dotPosition:t,arrowTrigger:i,autoplay:y,autoplaySpeed:h,dotTrigger:C,activeIndex:D,transitionSpeed:I}=e.toRefs(r),c=e.ref(0),S=e.ref(!1),v=e.ref(0),V=e.ref(null),f=e.ref(null),$=e.ref(null);e.watch(()=>i,()=>{S.value=i.value==="always"},{immediate:!0}),e.watch(()=>D,()=>{v.value=D.value},{immediate:!0});const P=n=>{f.value&&(f.value.style.left=`${-n*100}%`)},j=n=>{setTimeout(()=>{f.value&&(f.value.style.transition=""),n.style.transform="",P(v.value)},I.value)},k=(n,s)=>{if(V.value){const g=V.value.getBoundingClientRect();n.style.transform=`translateX(${(s?-c.value:c.value)*g.width}px)`}},A=()=>{$.value&&(clearTimeout($.value),$.value=null)},B=n=>{A(),y.value&&h.value&&($.value=setTimeout(()=>{n==null||n()},h.value))},w=n=>{if(n===v.value||!V.value||!f.value)return;f.value.style.transition=`left ${I.value}ms ease`;let s=v.value;if(n<0&&v.value===0){s=c.value-1;const g=f.value.children[s];k(g,!0),P(-1),j(g)}else if(n>=c.value&&v.value===c.value-1){s=0;const g=f.value.children[s];k(g,!1),P(c.value),j(g)}else s=n<0?0:n>c.value-1?c.value-1:n,P(s);v.value=s,a("update:activeIndex",s),a("activeIndexChange",s),B(()=>{w(v.value+1)})},F=()=>{w(v.value-1)},T=()=>{w(v.value+1)},x=n=>{i.value==="hover"&&(S.value=n==="enter")},U=(n,s)=>{s===C.value&&w(n)},Q=n=>{c.value=n,B(T)};return e.onMounted(()=>{f.value&&(f.value.style.transition=`left ${I.value}ms ease`,f.value.style.left="0%"),B(T)}),e.onBeforeUnmount(()=>{A()}),l({prev:F,next:T,goto:w}),()=>{var g,q;const n=(q=(g=o.default)==null?void 0:g.call(o))!=null?q:[];let s=n;return s.length===1&&s[0].type===e.Fragment&&(s=(s[0].children||[]).filter(R=>(R==null?void 0:R.type)!==e.Comment)),s.length!==c.value&&Q(s.length),e.createVNode("div",{class:u.b(),style:{height:d.value},onMouseenter:()=>x("enter"),onMouseleave:()=>x("leave")},[i.value!=="never"&&S.value?e.createVNode("div",{class:u.e("arrow")},[e.createVNode("button",{class:"arrow-left",onClick:()=>F()},[e.createVNode(_,{name:"arrow-left"},null)]),e.createVNode("button",{class:"arrow-right",onClick:()=>T()},[e.createVNode(_,{name:"arrow-right"},null)])]):null,e.createVNode("div",{class:u.e("item-wrapper"),ref:V},[e.createVNode("div",{class:u.e("item-container"),style:{width:`${c.value*100}%`},ref:f},[n])]),c.value>0&&m.value?e.createVNode("ul",{class:[u.e("dots"),t.value]},[s.map((R,M)=>e.createVNode("li",{class:{"dot-item":!0,active:v.value===M},onClick:()=>U(M,"click"),onMouseenter:()=>U(M,"hover"),style:{transition:`all ${I.value}ms ease`}},null))]):null])}}}),E=e.defineComponent({name:"DCarouselItem",setup(r,{slots:a}){var u;const o=N("carousel"),l=(u=a.default)==null?void 0:u.call(a);return()=>e.createVNode("div",{class:o.e("item")},[l])}}),K={title:"Carousel \u8D70\u9A6C\u706F",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(r){r.component(z.name,z),r.component(E.name,E)}};p.Carousel=z,p.CarouselItem=E,p.default=K,Object.defineProperty(p,"__esModule",{value:!0}),p[Symbol.toStringTag]="Module"});

package/carousel/package.json

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

package/carousel/style.css

@@ -0,0 +1 @@
+.devui-icon__container{display:inline-block;color:var(--devui-icon-fill, #71757f)}.devui-icon__container>*:not(:last-child){vertical-align:middle;margin-right:8px}.devui-icon__container i{vertical-align:middle;transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--no-slots i,.devui-icon--no-slots img{display:block}.devui-icon--disabled{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-icon--disabled i{color:var(--devui-disabled-text, #adb0b8)}.devui-icon--operable:not(.devui-icon--disabled){cursor:pointer;transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--operable:not(.devui-icon--disabled) i{cursor:pointer}.devui-icon--operable:hover:not(.devui-icon--disabled){color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:hover:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-hover, var(--devui-list-item-hover-bg, #f2f2f3))}.devui-icon--operable:hover:not(.devui-icon--disabled) i{color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:active:not(.devui-icon--disabled){color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable:active:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-active, var(--devui-list-item-active-bg, #f2f5fc))}.devui-icon--operable:active:not(.devui-icon--disabled) i{color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable.devui-icon__container{height:32px;line-height:32px;padding:0 8px;margin-left:-8px;border-radius:var(--devui-border-radius, 2px);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--spin{animation:iconSpin 2.5s linear infinite}.devui-svg-icon{vertical-align:middle}@keyframes iconSpin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.devui-carousel{display:block;position:relative}.devui-carousel .devui-carousel__arrow{position:absolute;width:100%;top:50%}.devui-carousel .devui-carousel__arrow .arrow-left{position:absolute;top:-18px;z-index:2;cursor:pointer;width:36px;height:36px;border-radius:18px;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-hover, 0 8px 16px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));display:inline-flex;align-items:center;justify-content:center;left:10px}.devui-carousel .devui-carousel__arrow .arrow-left:hover{background:var(--devui-area, #f8f8f8)}.devui-carousel .devui-carousel__arrow .arrow-left svg polygon{fill:var(--devui-text, #252b3a)}.devui-carousel .devui-carousel__arrow .arrow-right{position:absolute;top:-18px;z-index:2;cursor:pointer;width:36px;height:36px;border-radius:18px;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-hover, 0 8px 16px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));display:inline-flex;align-items:center;justify-content:center;right:10px}.devui-carousel .devui-carousel__arrow .arrow-right:hover{background:var(--devui-area, #f8f8f8)}.devui-carousel .devui-carousel__arrow .arrow-right svg polygon{fill:var(--devui-text, #252b3a)}.devui-carousel .devui-carousel__item-wrapper{position:relative;overflow:hidden;height:100%}.devui-carousel .devui-carousel__item-wrapper .devui-carousel__item-container{display:flex;height:100%;position:relative}.devui-carousel .devui-carousel__item-wrapper .devui-carousel__item-container .devui-carousel__item{flex:1;position:relative;height:100%}.devui-carousel .devui-carousel__dots{position:absolute;display:flex;justify-content:center;width:100%;list-style:none}.devui-carousel .devui-carousel__dots.bottom{bottom:8px}.devui-carousel .devui-carousel__dots.top{top:8px}.devui-carousel .devui-carousel__dots .dot-item{width:6px;height:6px;border-radius:3px;margin-right:8px;background:var(--devui-icon-fill, #71757f)}.devui-carousel .devui-carousel__dots .dot-item:hover{cursor:pointer;background:var(--devui-icon-fill-hover, #252b3a)}.devui-carousel .devui-carousel__dots .dot-item.active{width:24px;background:var(--devui-icon-fill-active, #252b3a);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-carousel .devui-carousel__arrow .arrow-left,.devui-carousel .devui-carousel__arrow .arrow-right{transition:background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1))}