vue-devui 1.0.0-beta.1 → 1.0.0-beta.10

package/time-axis/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;

package/time-axis/index.es.js

@@ -1,51 +1,186 @@
-import { defineComponent, createVNode } from "vue";
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { defineComponent, createVNode, inject, createTextVNode, provide, ref, reactive, onMounted, watch, toRef, nextTick, Fragment } from "vue";
 const timeAxisProps = {
   direction: {
     type: String,
     default: "vertical"
   },
-  data: {
-    type: Array,
-    default: () => []
+  center: {
+    type: Boolean,
+    default: false
+  },
+  mode: {
+    type: String,
+    default: "normal"
+  },
+  timePosition: {
+    type: String,
+    default: "left"
   }
 };
+var DIcon = defineComponent({
+  name: "DIcon",
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    size: {
+      type: String,
+      default: "inherit"
+    },
+    color: {
+      type: String,
+      default: "inherit"
+    },
+    classPrefix: {
+      type: String,
+      default: "icon"
+    }
+  },
+  setup(props) {
+    return __spreadValues({}, props);
+  },
+  render() {
+    const {
+      name,
+      size,
+      color,
+      classPrefix
+    } = this;
+    return /^((https?):)?\/\//.test(name) ? createVNode("img", {
+      "src": name,
+      "alt": name.split("/")[name.split("/").length - 1],
+      "style": {
+        width: size,
+        verticalAlign: "text-bottom"
+      }
+    }, null) : createVNode("i", {
+      "class": `${classPrefix} ${classPrefix}-${name}`,
+      "style": {
+        fontSize: size,
+        color
+      }
+    }, null);
+  }
+});
 const timeAxisItemProps = {
   time: {
     type: String
   },
-  text: {
+  dotColor: {
     type: String
   },
-  dotColor: {
+  lineStyle: {
+    type: String,
+    default: "solid"
+  },
+  lineColor: {
     type: String
+  },
+  position: {
+    type: String
+  },
+  timePosition: {
+    type: String,
+    default: "left"
+  },
+  type: {
+    type: String,
+    default: "primary"
   }
 };
-var index$1 = "";
 var TimeAxisItem = defineComponent({
   name: "DTimeAxisItem",
+  components: {
+    DIcon
+  },
   props: timeAxisItemProps,
   emits: [],
   setup(props, ctx) {
+    const timeAxis2 = inject("timeAxis");
     const itemClass = "devui-time-axis-item";
+    const renderTime = () => {
+      var _a, _b;
+      return createVNode("div", {
+        "class": `${itemClass}-time`
+      }, [ctx.slots.time ? (_b = (_a = ctx.slots).time) == null ? void 0 : _b.call(_a) : props.time]);
+    };
+    const renderContent = () => {
+      var _a, _b;
+      return createVNode("div", {
+        "class": `${itemClass}-content`
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a, props)]);
+    };
+    const renderPosition = (types) => {
+      if (types.includes(props.position)) {
+        return renderContent();
+      } else {
+        if (timeAxis2.props.direction === "horizontal") {
+          return renderTime();
+        } else {
+          return props.timePosition === "left" ? renderTime() : "";
+        }
+      }
+    };
+    const setTypeIcon = (type) => {
+      if (type === "primary") {
+        return "";
+      }
+      return createVNode("i", {
+        "class": `icon-${type === "success" ? "right" : type}-o`
+      }, null);
+    };
+    const renderDot = () => {
+      var _a, _b;
+      if (ctx.slots.dot) {
+        return createVNode("div", {
+          "style": {
+            color: props.dotColor
+          },
+          "class": `${itemClass}-dot`
+        }, [createTextVNode(" "), (_b = (_a = ctx.slots).dot) == null ? void 0 : _b.call(_a)]);
+      } else {
+        return createVNode("div", {
+          "class": `${itemClass}-dot ${itemClass}-type-${props.type}`,
+          "style": {
+            borderColor: props.dotColor
+          }
+        }, [setTypeIcon(props.type)]);
+      }
+    };
     return () => {
       return createVNode("div", {
         "class": itemClass
       }, [createVNode("div", {
         "class": `${itemClass}-data-left ${itemClass}-data-top`
-      }, [createVNode("span", null, [props.time])]), createVNode("div", {
+      }, [renderPosition(["top", "left"])]), createVNode("div", {
         "class": `${itemClass}-axis`
-      }, [createVNode("div", {
-        "class": `${itemClass}-line ${itemClass}-line-style-solid`
-      }, null), createVNode("div", {
-        "class": `${itemClass}-dot ${itemClass}-type-primary`,
+      }, [renderDot(), timeAxis2.props.direction === "vertical" && props.timePosition === "bottom" ? renderTime() : "", createVNode("div", {
+        "class": `${itemClass}-line ${itemClass}-line-style-${props.lineStyle}`,
         "style": {
-          borderColor: props.dotColor
+          borderColor: props.lineColor
         }
-      }, null), createVNode("div", {
-        "class": `${itemClass}-line ${itemClass}-line-style-solid`
-      }, null)]), createVNode("div", {
+      }, [ctx.slots.extra ? createVNode("div", {
+        "class": `${itemClass}-line-extra`
+      }, [ctx.slots.extra()]) : ""])]), createVNode("div", {
         "class": `${itemClass}-data-right ${itemClass}-data-bottom`
-      }, [props.text])]);
+      }, [renderPosition(["right", "bottom"])])]);
     };
   }
 });
@@ -58,22 +193,107 @@ var TimeAxis = defineComponent({
   props: timeAxisProps,
   emits: [],
   setup(props, ctx) {
+    provide("timeAxis", {
+      ctx,
+      props
+    });
+    const timeAxis2 = ref();
+    const style = reactive({
+      marginLeft: "0px",
+      height: "auto"
+    });
+    const setStyle = () => {
+      style.height = "auto";
+      style.marginLeft = "0px";
+      if (props.direction === "horizontal") {
+        nextTick(() => {
+          var _a;
+          const el = timeAxis2.value;
+          if (props.center) {
+            style.marginLeft = (((_a = el == null ? void 0 : el.firstElementChild) == null ? void 0 : _a.clientWidth) || 0) / 2 + "px";
+          }
+          style.height = Math.max(...Array.from(el == null ? void 0 : el.querySelectorAll(".devui-time-axis-item-data-top")).map((el2) => el2.clientHeight), ...Array.from(el == null ? void 0 : el.querySelectorAll(".devui-time-axis-item-data-bottom")).map((el2) => el2.clientHeight)) * 2 + Math.max(...Array.from(el == null ? void 0 : el.querySelectorAll(".devui-time-axis-item-axis")).map((el2) => el2.clientHeight)) + "px";
+        });
+      }
+    };
+    onMounted(() => {
+      setStyle();
+    });
+    watch(toRef(props, "direction"), () => {
+      setStyle();
+    });
     return () => {
+      const renderItemPosition = (item, position) => {
+        return position ? createVNode(item, {
+          "position": position
+        }, null) : createVNode(item, null, null);
+      };
+      const renderItem = () => {
+        var _a, _b, _c;
+        const slots = (_c = (_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)) != null ? _c : [];
+        let children;
+        if (slots.length === 1 && slots[0].type === Fragment) {
+          children = slots[0].children || [];
+        } else {
+          children = slots;
+        }
+        return children.map((item, index2) => {
+          var _a2, _b2, _c2, _d, _e, _f, _g, _h;
+          if (index2 + 1 === children.length) {
+            if (!((_a2 = item.props) == null ? void 0 : _a2.lineStyle) && !((_b2 = item.props) == null ? void 0 : _b2["line-style"])) {
+              item = createVNode(item, {
+                "line-style": "none"
+              }, null);
+            }
+          }
+          if (!((_c2 = item.props) == null ? void 0 : _c2.timePosition) && !((_d = item.props) == null ? void 0 : _d["time-position"])) {
+            item = createVNode(item, {
+              "time-position": props.timePosition ? props.timePosition : "left"
+            }, null);
+          }
+          if (props.direction === "horizontal") {
+            if (((_e = item.props) == null ? void 0 : _e.position) === "top" || ((_f = item.props) == null ? void 0 : _f.position) === "bottom")
+              return item;
+            if (props.mode === "alternative") {
+              return renderItemPosition(item, index2 % 2 == 0 ? "bottom" : "top");
+            } else {
+              return renderItemPosition(item, "bottom");
+            }
+          } else {
+            if (((_g = item.props) == null ? void 0 : _g.position) === "left" || ((_h = item.props) == null ? void 0 : _h.position) === "right")
+              return item;
+            if (props.mode === "alternative") {
+              return renderItemPosition(item, index2 % 2 == 0 ? "left" : "right");
+            } else {
+              return renderItemPosition(item, "right");
+            }
+          }
+        });
+      };
+      const getDirection = () => {
+        return props.direction === "horizontal" ? "horizontal" : "vertical";
+      };
       return createVNode("div", {
-        "class": `devui-time-axis-${props.direction}`
-      }, [props.data.map((item) => createVNode(TimeAxisItem, item, null))]);
+        "class": `devui-time-axis devui-time-axis-${getDirection()}  ${props.center ? "devui-time-axis-" + getDirection() + "-center" : ""} `,
+        "ref": timeAxis2,
+        "style": style
+      }, [renderItem()]);
     };
   }
 });
 TimeAxis.install = function(app) {
   app.component(TimeAxis.name, TimeAxis);
 };
+TimeAxisItem.install = function(app) {
+  app.component(TimeAxisItem.name, TimeAxisItem);
+};
 var index = {
   title: "TimeAxis \u65F6\u95F4\u8F74",
   category: "\u6570\u636E\u5C55\u793A",
-  status: "10%",
+  status: "100%",
   install(app) {
     app.use(TimeAxis);
+    app.use(TimeAxisItem);
   }
 };
-export { TimeAxis, index as default };
+export { TimeAxis, TimeAxisItem, index as default };

package/time-axis/index.umd.js

@@ -1 +1 @@
-(function(n,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis!="undefined"?globalThis:n||self,e(n.index={},n.Vue))})(this,function(n,e){"use strict";const d={direction:{type:String,default:"vertical"},data:{type:Array,default:()=>[]}},o={time:{type:String},text:{type:String},dotColor:{type:String}};var c="",a=e.defineComponent({name:"DTimeAxisItem",props:o,emits:[],setup(i,l){const t="devui-time-axis-item";return()=>e.createVNode("div",{class:t},[e.createVNode("div",{class:`${t}-data-left ${t}-data-top`},[e.createVNode("span",null,[i.time])]),e.createVNode("div",{class:`${t}-axis`},[e.createVNode("div",{class:`${t}-line ${t}-line-style-solid`},null),e.createVNode("div",{class:`${t}-dot ${t}-type-primary`,style:{borderColor:i.dotColor}},null),e.createVNode("div",{class:`${t}-line ${t}-line-style-solid`},null)]),e.createVNode("div",{class:`${t}-data-right ${t}-data-bottom`},[i.text])])}}),m="",s=e.defineComponent({name:"DTimeAxis",components:{TimeAxisItem:a},props:d,emits:[],setup(i,l){return()=>e.createVNode("div",{class:`devui-time-axis-${i.direction}`},[i.data.map(t=>e.createVNode(a,t,null))])}});s.install=function(i){i.component(s.name,s)};var r={title:"TimeAxis \u65F6\u95F4\u8F74",category:"\u6570\u636E\u5C55\u793A",status:"10%",install(i){i.use(s)}};n.TimeAxis=s,n.default=r,Object.defineProperty(n,"__esModule",{value:!0}),n[Symbol.toStringTag]="Module"});
+var F=Object.defineProperty;var I=Object.getOwnPropertySymbols;var j=Object.prototype.hasOwnProperty,H=Object.prototype.propertyIsEnumerable;var z=(r,t,a)=>t in r?F(r,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):r[t]=a,D=(r,t)=>{for(var a in t||(t={}))j.call(t,a)&&z(r,a,t[a]);if(I)for(var a of I(t))H.call(t,a)&&z(r,a,t[a]);return r};(function(r,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(r=typeof globalThis!="undefined"?globalThis:r||self,t(r.index={},r.Vue))})(this,function(r,t){"use strict";const a={direction:{type:String,default:"vertical"},center:{type:Boolean,default:!1},mode:{type:String,default:"normal"},timePosition:{type:String,default:"left"}};var q=t.defineComponent({name:"DIcon",props:{name:{type:String,required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}},setup(e){return D({},e)},render(){const{name:e,size:l,color:f,classPrefix:i}=this;return/^((https?):)?\/\//.test(e)?t.createVNode("img",{src:e,alt:e.split("/")[e.split("/").length-1],style:{width:l,verticalAlign:"text-bottom"}},null):t.createVNode("i",{class:`${i} ${i}-${e}`,style:{fontSize:l,color:f}},null)}});const v={time:{type:String},dotColor:{type:String},lineStyle:{type:String,default:"solid"},lineColor:{type:String},position:{type:String},timePosition:{type:String,default:"left"},type:{type:String,default:"primary"}};var p=t.defineComponent({name:"DTimeAxisItem",components:{DIcon:q},props:v,emits:[],setup(e,l){const f=t.inject("timeAxis"),i="devui-time-axis-item",y=()=>{var o,d;return t.createVNode("div",{class:`${i}-time`},[l.slots.time?(d=(o=l.slots).time)==null?void 0:d.call(o):e.time])},n=()=>{var o,d;return t.createVNode("div",{class:`${i}-content`},[(d=(o=l.slots).default)==null?void 0:d.call(o,e)])},u=o=>o.includes(e.position)?n():f.props.direction==="horizontal"||e.timePosition==="left"?y():"",c=o=>o==="primary"?"":t.createVNode("i",{class:`icon-${o==="success"?"right":o}-o`},null),m=()=>{var o,d;return l.slots.dot?t.createVNode("div",{style:{color:e.dotColor},class:`${i}-dot`},[t.createTextVNode(" "),(d=(o=l.slots).dot)==null?void 0:d.call(o)]):t.createVNode("div",{class:`${i}-dot ${i}-type-${e.type}`,style:{borderColor:e.dotColor}},[c(e.type)])};return()=>t.createVNode("div",{class:i},[t.createVNode("div",{class:`${i}-data-left ${i}-data-top`},[u(["top","left"])]),t.createVNode("div",{class:`${i}-axis`},[m(),f.props.direction==="vertical"&&e.timePosition==="bottom"?y():"",t.createVNode("div",{class:`${i}-line ${i}-line-style-${e.lineStyle}`,style:{borderColor:e.lineColor}},[l.slots.extra?t.createVNode("div",{class:`${i}-line-extra`},[l.slots.extra()]):""])]),t.createVNode("div",{class:`${i}-data-right ${i}-data-bottom`},[u(["right","bottom"])])])}}),L="",g=t.defineComponent({name:"DTimeAxis",components:{TimeAxisItem:p},props:a,emits:[],setup(e,l){t.provide("timeAxis",{ctx:l,props:e});const f=t.ref(),i=t.reactive({marginLeft:"0px",height:"auto"}),y=()=>{i.height="auto",i.marginLeft="0px",e.direction==="horizontal"&&t.nextTick(()=>{var u;const n=f.value;e.center&&(i.marginLeft=(((u=n==null?void 0:n.firstElementChild)==null?void 0:u.clientWidth)||0)/2+"px"),i.height=Math.max(...Array.from(n==null?void 0:n.querySelectorAll(".devui-time-axis-item-data-top")).map(c=>c.clientHeight),...Array.from(n==null?void 0:n.querySelectorAll(".devui-time-axis-item-data-bottom")).map(c=>c.clientHeight))*2+Math.max(...Array.from(n==null?void 0:n.querySelectorAll(".devui-time-axis-item-axis")).map(c=>c.clientHeight))+"px"})};return t.onMounted(()=>{y()}),t.watch(t.toRef(e,"direction"),()=>{y()}),()=>{const n=(m,o)=>o?t.createVNode(m,{position:o},null):t.createVNode(m,null,null),u=()=>{var d,x,S;const m=(S=(x=(d=l.slots).default)==null?void 0:x.call(d))!=null?S:[];let o;return m.length===1&&m[0].type===t.Fragment?o=m[0].children||[]:o=m,o.map((s,h)=>{var A,$,V,N,C,P,T,b;return h+1===o.length&&!((A=s.props)==null?void 0:A.lineStyle)&&!(($=s.props)==null?void 0:$["line-style"])&&(s=t.createVNode(s,{"line-style":"none"},null)),!((V=s.props)==null?void 0:V.timePosition)&&!((N=s.props)==null?void 0:N["time-position"])&&(s=t.createVNode(s,{"time-position":e.timePosition?e.timePosition:"left"},null)),e.direction==="horizontal"?((C=s.props)==null?void 0:C.position)==="top"||((P=s.props)==null?void 0:P.position)==="bottom"?s:e.mode==="alternative"?n(s,h%2==0?"bottom":"top"):n(s,"bottom"):((T=s.props)==null?void 0:T.position)==="left"||((b=s.props)==null?void 0:b.position)==="right"?s:e.mode==="alternative"?n(s,h%2==0?"left":"right"):n(s,"right")})},c=()=>e.direction==="horizontal"?"horizontal":"vertical";return t.createVNode("div",{class:`devui-time-axis devui-time-axis-${c()}  ${e.center?"devui-time-axis-"+c()+"-center":""} `,ref:f,style:i},[u()])}}});g.install=function(e){e.component(g.name,g)},p.install=function(e){e.component(p.name,p)};var M={title:"TimeAxis \u65F6\u95F4\u8F74",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(e){e.use(g),e.use(p)}};r.TimeAxis=g,r.TimeAxisItem=p,r.default=M,Object.defineProperty(r,"__esModule",{value:!0}),r[Symbol.toStringTag]="Module"});

package/time-axis/style.css

@@ -1 +1 @@
-.devui-time-axis-item-type-primary{border:2px solid var(--devui-placeholder, #8a8e99);border-radius:50%}.devui-time-axis-item-type-right i{color:var(--devui-success, #50d4ab)}.devui-time-axis-item-type-danger path{fill:var(--devui-danger, #f66f6a)}.devui-time-axis-item-type-danger circle{fill:var(--devui-light-text, #ffffff)}.devui-time-axis-item-type-warning i{color:var(--devui-warning, #fac20a)}.devui-time-axis-item-type-running{line-height:16px;text-align:center;animation:devui-time-axis-running 1.5s linear infinite;border:2px solid var(--devui-success, #50d4ab);border-radius:50%}.devui-time-axis-item-vertical-time-bottom{display:flex}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-item-axis{display:flex;flex-direction:column;align-items:center}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-item-dot,.devui-time-axis-item-vertical-time-bottom .devui-time-axis-item-dot>svg{width:18px;height:18px}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-item-dot>i{font-size:18px}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-item-custom-dot{width:18px;height:18px;text-align:center}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-item-line-time-bottom{position:relative;height:calc(100% - 36px);border-left-width:2px;border-left-color:var(--devui-dividing-line, #dfe1e6)}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-line-style-dashed{border-left-style:dashed}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-line-style-solid{border-left-style:solid}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-line-style-none{border-left-style:none}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-middle-zone{position:absolute;top:50%;transform:translate(-50%,-50%)}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-item-data-time-bottom{margin-left:12px;margin-bottom:40px}.devui-time-axis-item-vertical-time-bottom .devui-time-axis-item-template{margin-left:12px;margin-bottom:24px}@keyframes devui-time-axis-running{0%{transform:rotate(0);color:var(--devui-success, #50d4ab);border-color:var(--devui-success, #50d4ab)}50%{transform:rotate(180deg);color:var(--devui-success, #50d4ab);border-color:var(--devui-success, #50d4ab)}to{transform:rotate(360deg);color:var(--devui-success, #50d4ab);border-color:var(--devui-success, #50d4ab)}}.devui-time-axis-item-data-hidden{visibility:hidden}:host.devui-time-axis-item-horizontal-no-line{width:auto!important}:host.devui-time-axis-item-horizontal-no-line .devui-time-axis-item-data-horizontal-top{width:max-content}:host.devui-time-axis-item-horizontal-no-line .devui-time-axis-item-data-horizontal-bottom{width:max-content}:host.devui-time-axis-item-vertical-no-line .devui-time-axis-item-data-time-bottom{margin-bottom:0}:host.devui-time-axis-item-vertical-no-line .devui-time-axis-item-data-vertical-left{margin-bottom:0}:host.devui-time-axis-item-vertical-no-line .devui-time-axis-item-data-vertical-right{margin-bottom:0}.devui-time-axis-item-horizontal-align-center{position:relative;width:fit-content;transform:translate(-50%);left:8px}.devui-time-axis-vertical{display:flex;flex-direction:column;align-items:center;position:relative}.devui-time-axis-vertical .devui-time-axis-item{display:flex;flex-direction:row;width:100%}.devui-time-axis-vertical .devui-time-axis-item-axis{display:flex;flex-direction:column;align-items:center;padding:0 12px}.devui-time-axis-vertical .devui-time-axis-item-line{position:relative;height:calc(100% - 18px);border-left-width:2px;border-left-color:var(--devui-dividing-line, #dfe1e6)}.devui-time-axis-vertical .devui-time-axis-item-line:first-child{display:none}.devui-time-axis-vertical .devui-time-axis-item-data-left{text-align:end;margin-bottom:24px;height:18px;line-height:18px;flex:1}.devui-time-axis-vertical .devui-time-axis-item-data-right{margin-bottom:24px;height:18px;line-height:18px;flex:1}.devui-time-axis-vertical .devui-time-axis-item-line-style-dashed{border-left-style:dashed}.devui-time-axis-vertical .devui-time-axis-item-line-style-solid{border-left-style:solid}.devui-time-axis-vertical .devui-time-axis-item-line-style-dotted{border-left-style:dotted}.devui-time-axis-vertical .devui-time-axis-item-line-style-none{border-left-style:none}.devui-time-axis-vertical .devui-time-axis-item .devui-time-axis-middle-zone{position:absolute;top:50%;transform:translate(-50%,-50%)}.devui-time-axis-horizontal{display:flex;flex-direction:row;align-items:center;position:relative}.devui-time-axis-horizontal .devui-time-axis-item{display:flex;flex-direction:column;height:100%}.devui-time-axis-horizontal .devui-time-axis-item-axis{display:flex;flex-direction:row;align-items:center;padding:12px 0}.devui-time-axis-horizontal .devui-time-axis-item-line{position:relative;min-width:20px;width:calc(50% - (18px / 2));border-bottom-width:2px;border-bottom-color:var(--devui-dividing-line, #dfe1e6)}.devui-time-axis-horizontal .devui-time-axis-item:first-child .devui-time-axis-item-line:first-child{opacity:0}.devui-time-axis-horizontal .devui-time-axis-item-data-top{text-align:center;display:flex;align-items:flex-end;padding:0 12px;flex:1}.devui-time-axis-horizontal .devui-time-axis-item-data-bottom{text-align:center;padding:0 12px;flex:1}.devui-time-axis-horizontal .devui-time-axis-item-line-style-dashed{border-bottom-style:dashed}.devui-time-axis-horizontal .devui-time-axis-item-line-style-solid{border-bottom-style:solid}.devui-time-axis-horizontal .devui-time-axis-item-line-style-dotted{border-bottom-style:dotted}.devui-time-axis-horizontal .devui-time-axis-item-line-style-none{border-bottom-style:none}.devui-time-axis-horizontal .devui-time-axis-item .devui-time-axis-middle-zone{position:absolute;left:50%;transform:translate(-50%,-50%)}.devui-time-axis-item-dot,.devui-time-axis-item-dot>svg{width:18px;height:18px}.devui-time-axis-item-dot>i{font-size:18px}.devui-time-axis-item:last-child .devui-time-axis-item-line:last-child{display:none}
+.devui-time-axis-vertical{display:flex;flex-direction:column;align-items:center;position:relative}.devui-time-axis-vertical .devui-time-axis-item{display:flex;flex-direction:row;width:100%}.devui-time-axis-vertical .devui-time-axis-item-axis{display:flex;flex-direction:column;align-items:center;padding:0 12px}.devui-time-axis-vertical .devui-time-axis-item-line{position:relative;height:calc(100% - 18px);min-height:20px;border-left-width:2px;border-left-color:var(--devui-dividing-line, #dfe1e6)}.devui-time-axis-vertical .devui-time-axis-item-line-extra{position:absolute;top:50%;transform:translate(-50%,-50%)}.devui-time-axis-vertical .devui-time-axis-item-line:first-child{display:none}.devui-time-axis-vertical .devui-time-axis-item-data-left{text-align:end}.devui-time-axis-vertical .devui-time-axis-item-data-left,.devui-time-axis-vertical .devui-time-axis-item-data-right{margin-bottom:24px;margin-top:-2px;flex:1}.devui-time-axis-vertical .devui-time-axis-item-line-style-dashed{border-left-style:dashed}.devui-time-axis-vertical .devui-time-axis-item-line-style-solid{border-left-style:solid}.devui-time-axis-vertical .devui-time-axis-item-line-style-dotted{border-left-style:dotted}.devui-time-axis-vertical .devui-time-axis-item-line-style-none{border-left-style:none}.devui-time-axis-vertical .devui-time-axis-item .devui-time-axis-middle-zone{position:absolute;top:50%;transform:translate(-50%,-50%)}.devui-time-axis-horizontal{display:flex;flex-direction:row;align-items:center;position:relative}.devui-time-axis-horizontal-center .devui-time-axis-item-data-top,.devui-time-axis-horizontal-center .devui-time-axis-item-data-bottom{text-align:center;padding:0 6px}.devui-time-axis-horizontal-center .devui-time-axis-item-data-top>div,.devui-time-axis-horizontal-center .devui-time-axis-item-data-bottom>div{transform:translate(-50%)}.devui-time-axis-horizontal .devui-time-axis-item{display:flex;flex-direction:column;height:100%}.devui-time-axis-horizontal .devui-time-axis-item-axis{display:flex;flex-direction:row;align-items:center;padding:12px 0}.devui-time-axis-horizontal .devui-time-axis-item-line{position:relative;min-width:60px;width:calc(100% - 18px);border-bottom-width:2px;border-bottom-color:var(--devui-dividing-line, #dfe1e6)}.devui-time-axis-horizontal .devui-time-axis-item-line-extra{position:absolute;left:50%;transform:translate(-50%,-50%)}.devui-time-axis-horizontal .devui-time-axis-item:first-child .devui-time-axis-item-line:first-child{opacity:0}.devui-time-axis-horizontal .devui-time-axis-item-data-top,.devui-time-axis-horizontal .devui-time-axis-item-data-bottom{padding-right:12px;flex:1}.devui-time-axis-horizontal .devui-time-axis-item-line-style-dashed{border-bottom-style:dashed}.devui-time-axis-horizontal .devui-time-axis-item-line-style-solid{border-bottom-style:solid}.devui-time-axis-horizontal .devui-time-axis-item-line-style-dotted{border-bottom-style:dotted}.devui-time-axis-horizontal .devui-time-axis-item-line-style-none{border-bottom-style:none}.devui-time-axis-horizontal .devui-time-axis-item .devui-time-axis-middle-zone{position:absolute;left:50%;transform:translate(-50%,-50%)}.devui-time-axis-item-dot,.devui-time-axis-item-dot>svg{width:18px;height:18px;flex-shrink:0}.devui-time-axis-item-dot>i{font-size:18px;vertical-align:0}.devui-time-axis-item-type-primary{border:2px solid var(--devui-placeholder, #8a8e99);border-radius:50%}.devui-time-axis-item-type-success i{color:var(--devui-success, #50d4ab)}.devui-time-axis-item-type-error i{color:var(--devui-danger, #f66f6a)}.devui-time-axis-item-type-warning i{color:var(--devui-warning, #fac20a)}.devui-time-axis-item-type-running{line-height:16px;text-align:center;animation:devui-time-axis-running 1.5s linear infinite;border:2px solid var(--devui-success, #50d4ab);border-radius:50%}@keyframes devui-time-axis-running{0%{transform:rotate(0);color:var(--devui-success, #50d4ab);border-color:var(--devui-success, #50d4ab)}50%{transform:rotate(180deg);color:var(--devui-success, #50d4ab);border-color:var(--devui-success, #50d4ab)}to{transform:rotate(360deg);color:var(--devui-success, #50d4ab);border-color:var(--devui-success, #50d4ab)}}

package/time-picker/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;

package/time-picker/index.es.js

@@ -14,7 +14,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { defineComponent, createVNode, Fragment, reactive, ref, onMounted, onBeforeUnmount, onUnmounted, computed, mergeProps, watch, createTextVNode } from "vue";
+import { defineComponent, createVNode, reactive, ref, onMounted, onBeforeUnmount, onUnmounted, Fragment, computed, withDirectives, mergeProps, resolveDirective, watch, createTextVNode } from "vue";
 const timePickerProps = {
   modelValue: {
     type: String,
@@ -47,6 +47,10 @@ const timePickerProps = {
   autoOpen: {
     type: Boolean,
     default: false
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
   }
 };
 var Icon = defineComponent({
@@ -79,11 +83,12 @@ var Icon = defineComponent({
       color,
       classPrefix
     } = this;
-    return createVNode(Fragment, null, [/^((https?):)?\/\//.test(name) ? createVNode("img", {
+    return /^((https?):)?\/\//.test(name) ? createVNode("img", {
       "src": name,
       "alt": name.split("/")[name.split("/").length - 1],
       "style": {
-        width: size
+        width: size,
+        verticalAlign: "text-bottom"
       }
     }, null) : createVNode("i", {
       "class": `${classPrefix} ${classPrefix}-${name}`,
@@ -91,7 +96,7 @@ var Icon = defineComponent({
         fontSize: size,
         color
       }
-    }, null)]);
+    }, null);
   }
 });
 Icon.install = function(app) {
@@ -156,7 +161,7 @@ const setTimeAstrict = (hourList, minuteList, secondList, minTime, maxTime, form
     }
   });
 };
-function useTimePicker(hh, mm, ss, minTime, format, autoOpen, disabled, value) {
+function useTimePicker(hh, mm, ss, minTime, maxTime, format, autoOpen, disabled, value) {
   const isActive = ref(false);
   const showPopup = ref(false);
   const devuiTimePicker = ref();
@@ -183,13 +188,29 @@ function useTimePicker(hh, mm, ss, minTime, format, autoOpen, disabled, value) {
   };
   const mouseInIputFun = () => {
     if (firsthandActiveTime.value == "00:00:00") {
+      const vModelValueArr = value.split(":");
+      const minTimeValueArr = minTime.split(":");
       vModeValue.value == "" ? vModeValue.value = "00:00:00" : "";
-      vModeValue.value > minTime ? firsthandActiveTime.value = vModeValue.value : firsthandActiveTime.value = minTime;
+      if (vModeValue.value > minTime) {
+        firsthandActiveTime.value = value;
+        setInputValue(vModelValueArr[0], vModelValueArr[1], vModelValueArr[2]);
+      } else {
+        firsthandActiveTime.value = minTime;
+        setInputValue(minTimeValueArr[0], minTimeValueArr[1], minTimeValueArr[2]);
+      }
     }
-    setInputValue();
     isActive.value = true;
     showPopup.value = true;
   };
+  const vModelIsBeyond = () => {
+    if (vModeValue.value != "" && vModeValue.value < minTime) {
+      vModeValue.value = minTime;
+    } else if (vModeValue.value != "" && vModeValue.value > maxTime) {
+      vModeValue.value = maxTime;
+    }
+    const vModelValueArr = vModeValue.value.split(":");
+    vModeValue.value && setInputValue(vModelValueArr[0], vModelValueArr[1], vModelValueArr[2]);
+  };
   const getTimeValue = (e) => {
     e.stopPropagation();
     if (showPopup.value) {
@@ -197,18 +218,18 @@ function useTimePicker(hh, mm, ss, minTime, format, autoOpen, disabled, value) {
       mm.value = timePopupDom.value.changTimeData().activeMinute.value;
       ss.value = timePopupDom.value.changTimeData().activeSecond.value;
       firsthandActiveTime.value = `${hh.value}:${mm.value}:${ss.value}`;
-      setInputValue();
+      setInputValue(hh.value, mm.value, ss.value);
     }
   };
-  const setInputValue = () => {
+  const setInputValue = (hh2, mm2, ss2) => {
     if (format == "hh:mm:ss") {
-      vModeValue.value = `${hh.value}:${mm.value}:${ss.value}`;
+      vModeValue.value = `${hh2}:${mm2}:${ss2}`;
     } else if (format == "mm:hh:ss") {
-      vModeValue.value = `${mm.value}:${hh.value}:${ss.value}`;
+      vModeValue.value = `${mm2}:${hh2}:${ss2}`;
     } else if (format == "hh:mm") {
-      vModeValue.value = `${hh.value}:${mm.value}`;
+      vModeValue.value = `${hh2}:${mm2}`;
     } else if (format == "mm:ss") {
-      vModeValue.value = `${mm.value}:${ss.value}`;
+      vModeValue.value = `${mm2}:${ss2}`;
     }
   };
   const clearAll = (e) => {
@@ -225,7 +246,7 @@ function useTimePicker(hh, mm, ss, minTime, format, autoOpen, disabled, value) {
       ss.value = "00";
     }
     firsthandActiveTime.value = `${hh.value}:${mm.value}:${ss.value}`;
-    setInputValue();
+    setInputValue(hh.value, mm.value, ss.value);
   };
   const isOutOpen = () => {
     if (autoOpen) {
@@ -234,7 +255,7 @@ function useTimePicker(hh, mm, ss, minTime, format, autoOpen, disabled, value) {
       mm.value = timeArr[1];
       ss.value = timeArr[2];
       firsthandActiveTime.value = vModeValue.value;
-      setInputValue();
+      setInputValue(hh.value, mm.value, ss.value);
       isActive.value = true;
       showPopup.value = autoOpen;
     }
@@ -249,14 +270,14 @@ function useTimePicker(hh, mm, ss, minTime, format, autoOpen, disabled, value) {
         ss.value = slotTime.time;
       }
       firsthandActiveTime.value = `${hh.value}:${mm.value}:${ss.value}`;
-      setInputValue();
+      setInputValue(hh.value, mm.value, ss.value);
     } else {
       const timeArr = slotTime.time.split(":");
       hh.value = timeArr[0];
       mm.value = timeArr[1];
       ss.value = timeArr[2];
       firsthandActiveTime.value = `${hh.value}:${mm.value}:${ss.value}`;
-      setInputValue();
+      setInputValue(hh.value, mm.value, ss.value);
     }
   };
   return {
@@ -272,10 +293,10 @@ function useTimePicker(hh, mm, ss, minTime, format, autoOpen, disabled, value) {
     firsthandActiveTime,
     vModeValue,
     getPopupPosition,
-    setInputValue,
     getTimeValue,
     clickVerifyFun,
     isOutOpen,
+    vModelIsBeyond,
     clearAll,
     chooseTime
   };
@@ -552,6 +573,7 @@ function useTimeScroll() {
 var index$3 = "";
 var TimeScroll = defineComponent({
   name: "DTimeScroll",
+  props: timePickerProps,
   setup(props, ctx) {
     const {
       scrollBoxDom,
@@ -593,7 +615,7 @@ var TimeScroll = defineComponent({
         "class": "devui-scroll-box"
       }, [createVNode("div", {
         "ref": scrollContentDom,
-        "class": `box-content ${isDown.value ? "box-content-behavior-auto" : ""}`,
+        "class": `box-content ${isDown.value || !props.showAnimation ? "box-content-behavior-auto" : ""}`,
         "style": {
           "margin-right": marginRight + "px"
         }
@@ -665,7 +687,7 @@ var TimeList = defineComponent({
       return createVNode("div", {
         "class": "time-item",
         "style": {
-          "width": props.format.length > 6 ? "33.333%" : "50%"
+          "flex": 1
         }
       }, [createVNode(TimeScroll, null, {
         default: () => [createVNode("ul", {
@@ -789,7 +811,7 @@ var Button = defineComponent({
         showLoading,
         width
       } = props;
-      return createVNode("div", mergeProps({
+      return withDirectives(createVNode("div", mergeProps({
         "class": "devui-btn-host"
       }, ctx.attrs), [createVNode("button", {
         "class": btnClass.value,
@@ -800,12 +822,12 @@ var Button = defineComponent({
         },
         "onClick": onClick
       }, [!!icon ? createVNode(Icon, {
-        "name": props.icon,
+        "name": icon,
         "class": iconClass.value
       }, null) : null, createVNode("span", {
         "class": "button-content",
         "ref": buttonContent
-      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])])]);
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])])]), [[resolveDirective("dLoading"), showLoading]]);
     };
   }
 });
@@ -938,11 +960,12 @@ var TimePicker = defineComponent({
       getTimeValue,
       clickVerifyFun,
       isOutOpen,
+      vModelIsBeyond,
       clearAll,
       timePopupDom,
       vModeValue,
       getPopupPosition
-    } = useTimePicker(activeHour, activeMinute, activeSecond, props.minTime, format, props.autoOpen, props.disabled, props.modelValue);
+    } = useTimePicker(activeHour, activeMinute, activeSecond, props.minTime, props.maxTime, format, props.autoOpen, props.disabled, props.modelValue);
     const selectedTimeChage = (e) => {
       isActive.value = false;
       showPopup.value = false;
@@ -951,6 +974,7 @@ var TimePicker = defineComponent({
     onMounted(() => {
       getPopupPosition();
       isOutOpen();
+      vModelIsBeyond();
       document.addEventListener("click", clickVerifyFun);
       document.addEventListener("click", getTimeValue);
       document.addEventListener("scroll", getPopupPosition);
@@ -964,7 +988,7 @@ var TimePicker = defineComponent({
     });
     watch(vModeValue, (newValue) => {
       ctx.emit("update:modelValue", vModeValue.value);
-      if (newValue != props.minTime) {
+      if (newValue != props.minTime && newValue != "00:00") {
         showClearIcon.value = true;
       } else {
         showClearIcon.value = false;
@@ -1021,7 +1045,7 @@ TimePicker.install = function(app) {
 var index = {
   title: "TimePicker \u65F6\u95F4\u9009\u62E9\u5668",
   category: "\u6570\u636E\u5F55\u5165",
-  status: "80%",
+  status: "90%",
   install(app) {
     app.use(TimePicker);
   }