vue-devui 1.0.0-beta.2 → 1.0.0-beta.6

package/switch/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/table/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/tabs/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/tabs/index.es.js

@@ -81,6 +81,7 @@ var Tabs = defineComponent({
         }
         const tab = state.data.find((itemOption) => itemOption.id === item.id);
         if (tab && !tab.disabled) {
+          state.active = item.id;
           emit("update:modelValue", tab.id);
           if (props.type === "slider" && tabEl && tabsEle) {
             this.offsetLeft = tabEl.getBoundingClientRect().left - this.tabsEle.nativeElement.getBoundingClientRect().left;

package/tabs/index.umd.js

@@ -1 +1 @@
-(function(d,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(d=typeof globalThis!="undefined"?globalThis:d||self,t(d.index={},d.Vue))})(this,function(d,t){"use strict";var m="",u=t.defineComponent({name:"DTabs",props:{modelValue:{type:[String,Number],default:null},type:{type:String,default:"tabs"},showContent:{type:Boolean,default:!0},vertical:{type:Boolean,default:!1},reactivable:{type:Boolean,default:!0},customWidth:{type:String,default:""},cssClass:{type:String,default:""},beforeChange:{type:Function,default:null}},emits:["update:modelValue","activeTabChange"],setup(e,{emit:f,slots:o}){const s=t.ref(null),c=t.reactive({offsetLeft:0,offsetWidth:0,id:null}),n=t.reactive({data:[],active:e.modelValue,showContent:e.showContent,slots:[]});t.provide("tabs",{state:n});const v=function(a){let l=Promise.resolve(!0);if(typeof e.beforeChange=="function"){const i=e.beforeChange(a);typeof i!="undefined"&&(i.then?l=i:(console.log(i),l=Promise.resolve(i)))}return l},b=function(a,l){!e.reactivable&&e.modelValue===a.id||v(a.id).then(i=>{if(!i)return;const r=n.data.find(C=>C.id===a.id);r&&!r.disabled&&(f("update:modelValue",r.id),e.type==="slider"&&l&&s&&(this.offsetLeft=l.getBoundingClientRect().left-this.tabsEle.nativeElement.getBoundingClientRect().left,this.offsetWidth=l.getBoundingClientRect().width),f("activeTabChange",r.id))})},g=[e.type];return e.cssClass&&g.push(e.cssClass),e.vertical&&g.push("devui-nav-stacked"),t.onUpdated(()=>{e.type==="slider"&&setTimeout(()=>{const a=s.value.querySelector("#"+e.modelValue+".active");a&&(c.offsetLeft=a.getBoundingClientRect().left-s.value.getBoundingClientRect().left,c.offsetWidth=a.getBoundingClientRect().width)})}),t.onBeforeMount(()=>{e.type!=="slider"&&e.modelValue===void 0&&n.data.length>0&&b(n.data[0])}),t.onMounted(()=>{e.type==="slider"&&e.modelValue===void 0&&n.data.length>0&&n.data[0]&&b(n.data[0].tabsEle.value.getElementById(n.data[0].tabId))}),()=>t.createVNode("div",null,[t.createVNode("ul",{ref:s,role:"tablist",class:`devui-nav devui-nav-${g.join(" ")}`,id:"devuiTabs11"},[n.data.map((a,l)=>t.createVNode("li",{role:"presentation",onClick:()=>{b(a)},class:(e.modelValue===(a.id||a.tabId)?"active":"")+" "+(a.disabled?"disabled":""),id:a.id||a.tabId},[t.createVNode("a",{role:"tab","data-toggle":a.id,"aria-expanded":e.modelValue===(a.id||a.tabId)},[n.slots[l]?n.slots[l]():t.createVNode("span",null,[a.title])])])),t.createVNode("div",{class:`devui-nav-${e.type}-animation`,style:{left:c.offsetLeft+"px",width:c.offsetWidth+"px"}},null)]),o.default()])}}),h=t.defineComponent({name:"DTab",props:{title:{default:null,type:[String,Number]},id:{default:null,type:String},disabled:{type:Boolean,default:!1}},setup(e,{slots:f}){const o=t.inject("tabs");return o.state.slots.push(f.dTabTitle),o.state.data.push(e),()=>{const{id:s}=e;return o.state.showContent&&o.state.active===s?t.createVNode("div",{class:"devui-tab-content"},[t.createVNode("div",{role:"tabpanel",class:"devui-tab-pane in active"},[f.default()])]):null}}});u.install=function(e){e.component(u.name,u),e.component(h.name,h)};var y={title:"Tabs \u9009\u9879\u5361",category:"\u5BFC\u822A",status:"60%",install(e){e.use(u)}};d.Tabs=u,d.default=y,Object.defineProperty(d,"__esModule",{value:!0}),d[Symbol.toStringTag]="Module"});
+(function(d,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(d=typeof globalThis!="undefined"?globalThis:d||self,t(d.index={},d.Vue))})(this,function(d,t){"use strict";var m="",u=t.defineComponent({name:"DTabs",props:{modelValue:{type:[String,Number],default:null},type:{type:String,default:"tabs"},showContent:{type:Boolean,default:!0},vertical:{type:Boolean,default:!1},reactivable:{type:Boolean,default:!0},customWidth:{type:String,default:""},cssClass:{type:String,default:""},beforeChange:{type:Function,default:null}},emits:["update:modelValue","activeTabChange"],setup(e,{emit:f,slots:o}){const s=t.ref(null),c=t.reactive({offsetLeft:0,offsetWidth:0,id:null}),n=t.reactive({data:[],active:e.modelValue,showContent:e.showContent,slots:[]});t.provide("tabs",{state:n});const v=function(a){let l=Promise.resolve(!0);if(typeof e.beforeChange=="function"){const i=e.beforeChange(a);typeof i!="undefined"&&(i.then?l=i:(console.log(i),l=Promise.resolve(i)))}return l},b=function(a,l){!e.reactivable&&e.modelValue===a.id||v(a.id).then(i=>{if(!i)return;const r=n.data.find(C=>C.id===a.id);r&&!r.disabled&&(n.active=a.id,f("update:modelValue",r.id),e.type==="slider"&&l&&s&&(this.offsetLeft=l.getBoundingClientRect().left-this.tabsEle.nativeElement.getBoundingClientRect().left,this.offsetWidth=l.getBoundingClientRect().width),f("activeTabChange",r.id))})},g=[e.type];return e.cssClass&&g.push(e.cssClass),e.vertical&&g.push("devui-nav-stacked"),t.onUpdated(()=>{e.type==="slider"&&setTimeout(()=>{const a=s.value.querySelector("#"+e.modelValue+".active");a&&(c.offsetLeft=a.getBoundingClientRect().left-s.value.getBoundingClientRect().left,c.offsetWidth=a.getBoundingClientRect().width)})}),t.onBeforeMount(()=>{e.type!=="slider"&&e.modelValue===void 0&&n.data.length>0&&b(n.data[0])}),t.onMounted(()=>{e.type==="slider"&&e.modelValue===void 0&&n.data.length>0&&n.data[0]&&b(n.data[0].tabsEle.value.getElementById(n.data[0].tabId))}),()=>t.createVNode("div",null,[t.createVNode("ul",{ref:s,role:"tablist",class:`devui-nav devui-nav-${g.join(" ")}`,id:"devuiTabs11"},[n.data.map((a,l)=>t.createVNode("li",{role:"presentation",onClick:()=>{b(a)},class:(e.modelValue===(a.id||a.tabId)?"active":"")+" "+(a.disabled?"disabled":""),id:a.id||a.tabId},[t.createVNode("a",{role:"tab","data-toggle":a.id,"aria-expanded":e.modelValue===(a.id||a.tabId)},[n.slots[l]?n.slots[l]():t.createVNode("span",null,[a.title])])])),t.createVNode("div",{class:`devui-nav-${e.type}-animation`,style:{left:c.offsetLeft+"px",width:c.offsetWidth+"px"}},null)]),o.default()])}}),h=t.defineComponent({name:"DTab",props:{title:{default:null,type:[String,Number]},id:{default:null,type:String},disabled:{type:Boolean,default:!1}},setup(e,{slots:f}){const o=t.inject("tabs");return o.state.slots.push(f.dTabTitle),o.state.data.push(e),()=>{const{id:s}=e;return o.state.showContent&&o.state.active===s?t.createVNode("div",{class:"devui-tab-content"},[t.createVNode("div",{role:"tabpanel",class:"devui-tab-pane in active"},[f.default()])]):null}}});u.install=function(e){e.component(u.name,u),e.component(h.name,h)};var y={title:"Tabs \u9009\u9879\u5361",category:"\u5BFC\u822A",status:"60%",install(e){e.use(u)}};d.Tabs=u,d.default=y,Object.defineProperty(d,"__esModule",{value:!0}),d[Symbol.toStringTag]="Module"});

package/tag/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/tag/index.es.js

@@ -0,0 +1,49 @@
+import { computed, defineComponent, createVNode } from "vue";
+const tagProps = {
+  type: {
+    type: String,
+    default: ""
+  },
+  color: {
+    type: String,
+    default: ""
+  }
+};
+function useStyle(props) {
+  return computed(() => {
+    const { type } = props;
+    return `devui-tag devui-tag-${type || "default"}`;
+  });
+}
+var tag = "";
+var Tag = defineComponent({
+  name: "DTag",
+  props: tagProps,
+  emits: [],
+  setup(props, {
+    slots
+  }) {
+    const tagClass = useStyle(props);
+    return () => {
+      var _a;
+      return createVNode("div", {
+        "class": "devui-tag"
+      }, [createVNode("span", {
+        "class": tagClass.value,
+        "style": "display: block;"
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)])]);
+    };
+  }
+});
+Tag.install = function(app) {
+  app.component(Tag.name, Tag);
+};
+var index = {
+  title: "Tag \u6807\u7B7E",
+  category: "\u6570\u636E\u5C55\u793A",
+  status: "20%",
+  install(app) {
+    app.use(Tag);
+  }
+};
+export { Tag, index as default };

package/tag/index.umd.js

@@ -0,0 +1 @@
+(function(e,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(e=typeof globalThis!="undefined"?globalThis:e||self,t(e.index={},e.Vue))})(this,function(e,t){"use strict";const d={type:{type:String,default:""},color:{type:String,default:""}};function o(n){return t.computed(()=>{const{type:a}=n;return`devui-tag devui-tag-${a||"default"}`})}var f="",u=t.defineComponent({name:"DTag",props:d,emits:[],setup(n,{slots:a}){const s=o(n);return()=>{var i;return t.createVNode("div",{class:"devui-tag"},[t.createVNode("span",{class:s.value,style:"display: block;"},[(i=a.default)==null?void 0:i.call(a)])])}}});u.install=function(n){n.component(u.name,u)};var r={title:"Tag \u6807\u7B7E",category:"\u6570\u636E\u5C55\u793A",status:"20%",install(n){n.use(u)}};e.Tag=u,e.default=r,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"});

package/tag/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "tag",
+  "version": "0.0.0",
+  "main": "index.umd.js",
+  "module": "index.es.js",
+  "style": "style.css"
+}

package/tag/style.css

@@ -0,0 +1 @@
+.devui-tag{display:inline-block;margin:4px}.devui-tag .devui-tag{padding:0 8px;min-height:20px;font-size:12px;font-size:var(--devui-font-size, 12px);line-height:20px;border:1px solid;border-radius:var(--devui-border-radius, 2px);display:block;align-items:center;position:relative;cursor:default}.devui-tag .devui-tag.devui-tag-default{border:0;color:var(--devui-text, #252b3a);background-color:var(--devui-default-bg, #f3f6f8)}.devui-tag .devui-tag.devui-tag-primary{color:var(--devui-primary, #5e7ce0);background-color:var(--devui-primary-bg, #f2f5fc);border-color:var(--devui-primary-line, #5e7ce0)}.devui-tag .devui-tag.devui-tag-success{color:var(--devui-success, #50d4ab);background-color:var(--devui-success-bg, #edfff9);border-color:var(--devui-success-line, #50d4ab)}.devui-tag .devui-tag.devui-tag-warning{color:var(--devui-warning, #fac20a);background-color:var(--devui-warning-bg, #fff3e8);border-color:var(--devui-warning-line, #fa9841)}.devui-tag .devui-tag.devui-tag-danger{color:var(--devui-danger, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed);border-color:var(--devui-danger-line, #f66f6a)}

package/tag-input/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/textarea/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/textarea/index.es.js

@@ -0,0 +1,132 @@
+import { defineComponent, ref, createVNode, mergeProps } from "vue";
+const textareaProps = {
+  id: {
+    type: String,
+    default: void 0
+  },
+  autofocus: {
+    type: Boolean,
+    default: false
+  },
+  showCount: {
+    type: Boolean,
+    default: false
+  },
+  placeholder: {
+    type: String,
+    default: void 0
+  },
+  value: {
+    type: String,
+    default: ""
+  },
+  maxLength: {
+    type: [String, Number],
+    default: void 0
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  error: {
+    type: Boolean,
+    default: false
+  },
+  cssClass: {
+    type: String,
+    default: ""
+  },
+  resize: {
+    type: String,
+    default: "none"
+  }
+};
+var textarea = "";
+var Textarea = defineComponent({
+  name: "DTextarea",
+  props: textareaProps,
+  emits: ["update:value", "focus", "blur", "change", "keydown"],
+  setup(props, ctx) {
+    const textareaCls = {
+      error: props.error,
+      [props.cssClass]: true
+    };
+    const curValueRef = ref(props.value);
+    const onInput = ($event) => {
+      const inputValue = $event.target.value;
+      curValueRef.value = inputValue;
+      ctx.emit("update:value", inputValue);
+    }, onFocus = ($event) => {
+      ctx.emit("focus", $event);
+    }, onBlur = ($event) => {
+      ctx.emit("blur", $event);
+    }, onChange = ($event) => {
+      ctx.emit("change", $event.target.value);
+    }, onKeydown = ($event) => {
+      ctx.emit("keydown", $event);
+    };
+    return {
+      textareaCls,
+      onInput,
+      onFocus,
+      onBlur,
+      onChange,
+      onKeydown,
+      curValueRef,
+      autofocus: props.autofocus
+    };
+  },
+  render() {
+    const {
+      id,
+      placeholder,
+      disabled,
+      maxLength,
+      resize,
+      textareaCls,
+      onInput,
+      onFocus,
+      onBlur,
+      onChange,
+      onKeydown,
+      showCount,
+      autofocus,
+      curValueRef
+    } = this;
+    return createVNode("div", {
+      "class": "devui-textarea-wrap"
+    }, [createVNode("textarea", mergeProps({
+      DTextarea: true
+    }, {
+      "id": id,
+      "value": curValueRef,
+      "autofocus": autofocus,
+      "placeholder": placeholder,
+      "disabled": disabled,
+      "maxlength": maxLength,
+      "style": {
+        resize
+      },
+      "class": textareaCls,
+      "onInput": onInput,
+      "onFocus": onFocus,
+      "onBlur": onBlur,
+      "onChange": onChange,
+      "onKeydown": onKeydown
+    }), null), showCount && createVNode("div", {
+      "class": "devui-textarea-show-count"
+    }, [curValueRef.length, !(maxLength != null ? maxLength : false) ? "" : " / " + maxLength])]);
+  }
+});
+Textarea.install = function(app) {
+  app.component(Textarea.name, Textarea);
+};
+var index = {
+  title: "Textarea \u591A\u884C\u6587\u672C\u6846",
+  category: "\u6570\u636E\u5F55\u5165",
+  status: "\u5DF2\u5B8C\u6210",
+  install(app) {
+    app.use(Textarea);
+  }
+};
+export { Textarea, index as default };

package/textarea/index.umd.js

@@ -0,0 +1 @@
+(function(n,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(n=typeof globalThis!="undefined"?globalThis:n||self,t(n.index={},n.Vue))})(this,function(n,t){"use strict";const g={id:{type:String,default:void 0},autofocus:{type:Boolean,default:!1},showCount:{type:Boolean,default:!1},placeholder:{type:String,default:void 0},value:{type:String,default:""},maxLength:{type:[String,Number],default:void 0},disabled:{type:Boolean,default:!1},error:{type:Boolean,default:!1},cssClass:{type:String,default:""},resize:{type:String,default:"none"}};var C="",l=t.defineComponent({name:"DTextarea",props:g,emits:["update:value","focus","blur","change","keydown"],setup(a,u){const s={error:a.error,[a.cssClass]:!0},o=t.ref(a.value);return{textareaCls:s,onInput:e=>{const r=e.target.value;o.value=r,u.emit("update:value",r)},onFocus:e=>{u.emit("focus",e)},onBlur:e=>{u.emit("blur",e)},onChange:e=>{u.emit("change",e.target.value)},onKeydown:e=>{u.emit("keydown",e)},curValueRef:o,autofocus:a.autofocus}},render(){const{id:a,placeholder:u,disabled:s,maxLength:o,resize:d,textareaCls:i,onInput:f,onFocus:c,onBlur:p,onChange:e,onKeydown:r,showCount:m,autofocus:v,curValueRef:y}=this;return t.createVNode("div",{class:"devui-textarea-wrap"},[t.createVNode("textarea",t.mergeProps({DTextarea:!0},{id:a,value:y,autofocus:v,placeholder:u,disabled:s,maxlength:o,style:{resize:d},class:i,onInput:f,onFocus:c,onBlur:p,onChange:e,onKeydown:r}),null),m&&t.createVNode("div",{class:"devui-textarea-show-count"},[y.length,(o!=null?o:!1)?" / "+o:""])])}});l.install=function(a){a.component(l.name,l)};var h={title:"Textarea \u591A\u884C\u6587\u672C\u6846",category:"\u6570\u636E\u5F55\u5165",status:"\u5DF2\u5B8C\u6210",install(a){a.use(l)}};n.Textarea=l,n.default=h,Object.defineProperty(n,"__esModule",{value:!0}),n[Symbol.toStringTag]="Module"});

package/textarea/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "textarea",
+  "version": "0.0.0",
+  "main": "index.umd.js",
+  "module": "index.es.js",
+  "style": "style.css"
+}

package/textarea/style.css

@@ -0,0 +1 @@
+@charset "UTF-8";.devui-form-controls input[type=text],.devui-form-controls input[type=password],[dInput]{width:100%;height:28px;font-size:var(--devui-font-size, 12px)}.devui-form-controls input[type=text].devui-input-sm,.devui-form-controls input[type=password].devui-input-sm,[dInput].devui-input-sm{font-size:var(--devui-font-size-sm, 12px);height:26px}.devui-form-controls input[type=text].devui-input-lg,.devui-form-controls input[type=password].devui-input-lg,[dInput].devui-input-lg{font-size:var(--devui-font-size-lg, 14px);height:46px}[dTextArea]{width:100%}.devui-form-controls textarea,[dInput],[dTextarea]{box-sizing:border-box;padding:4px 10px;color:var(--devui-text, #252b3a);vertical-align:middle;border:1px solid var(--devui-form-control-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);outline:none;background-color:var(--devui-base-bg, #ffffff);transition:border-color .3s cubic-bezier(.645,.045,.355,1)}.devui-form-controls textarea:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):hover,[dInput]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):hover,[dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):hover{border-color:var(--devui-form-control-line-hover, #575d6c)}.devui-form-controls textarea:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):focus,[dInput]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):focus,[dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):focus{border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-form-controls textarea[disabled],.devui-form-controls textarea[disabled]:hover,.devui-form-controls textarea.disabled,.devui-form-controls textarea.disabled:hover,.devui-form-controls textarea.devui-disabled,.devui-form-controls textarea.devui-disabled:hover,[dInput][disabled],[dInput][disabled]:hover,[dInput].disabled,[dInput].disabled:hover,[dInput].devui-disabled,[dInput].devui-disabled:hover,[dTextarea][disabled],[dTextarea][disabled]:hover,[dTextarea].disabled,[dTextarea].disabled:hover,[dTextarea].devui-disabled,[dTextarea].devui-disabled:hover{cursor:not-allowed;background-color:var(--devui-disabled-bg, #f5f5f6);border-color:var(--devui-disabled-line, #dfe1e6);color:var(--devui-disabled-text, #adb0b8)}.devui-form-controls textarea,[dTextarea]{width:100%}.devui-input-group{position:relative;display:table;border-collapse:separate}.devui-input-group-addon{border:1px solid var(--devui-form-control-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);display:table-cell;padding:0 10px;text-align:center}.devui-input-group-addon:last-child{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0}.devui-input-group-addon:first-child{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.devui-input{outline:none;background-color:var(--devui-base-bg, #ffffff);border:1px solid var(--devui-form-control-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);padding:5px 10px;line-height:16px;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a);width:100%;display:block;cursor:text;height:28px;transition:border-color .3s cubic-bezier(.645,.045,.355,1)}.devui-input:hover{border-color:var(--devui-form-control-line-hover, #575d6c)}.devui-input:focus{border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-input[disabled],.devui-input[disabled]:hover,.devui-input[disabled]:focus,.devui-input[disabled]:hover:focus,.devui-input.disabled,.devui-input.disabled:hover,.devui-input.disabled:focus,.devui-input.disabled:hover:focus,.devui-input.devui-disabled,.devui-input.devui-disabled:hover,.devui-input.devui-disabled:focus,.devui-input.devui-disabled:hover:focus{border-color:var(--devui-disabled-line, #dfe1e6);color:var(--devui-disabled-text, #adb0b8);background-color:var(--devui-disabled-bg, #f5f5f6);cursor:not-allowed}.devui-input::placeholder{color:var(--devui-placeholder, #8a8e99)}.devui-input.devui-search-in-dropdown{margin:0;border:none;padding:5px 26px 5px 10px;background-color:var(--devui-embed-search-bg, #f2f5fc);color:var(--devui-text, #252b3a)}.devui-input.devui-search-in-dropdown:-ms-input-placeholder{color:var(--devui-placeholder, #8a8e99)}.devui-input.devui-search-in-dropdown:hover{background-color:var(--devui-embed-search-bg-hover, #eef0f5)}.devui-input-group>.devui-input{display:table-cell}.devui-input-group>.devui-input:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.devui-input-group>.devui-input:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.devui-input-group>.devui-input:not(:first-child):not(:last-child){border-radius:0}.devui-input-lg{font-size:var(--devui-font-size-page-title, 16px);line-height:20px;height:32px}.devui-input-sm{font-size:var(--devui-font-size, 12px);line-height:14px;height:26px}.devui-dropup,.devui-dropdown{position:relative}.devui-form-group{position:relative}.devui-form-control{color:var(--devui-text, #252b3a);background-color:var(--devui-base-bg, #ffffff);padding:5px 10px;border:1px solid var(--devui-form-control-line, #adb0b8);display:block;width:100%;height:28px;border-radius:var(--devui-border-radius, 2px);outline:0;transition:border-color .3s cubic-bezier(.645,.045,.355,1)}.devui-form-control[disabled],.devui-form-control[disabled]:hover,.devui-form-control[disabled]:focus,.devui-form-control.disabled,.devui-form-control.disabled:hover,.devui-form-control.disabled:focus,.devui-form-control.devui-disabled,.devui-form-control.devui-disabled:hover,.devui-form-control.devui-disabled:focus{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-form-control[disabled],.devui-form-control[disabled]>input,.devui-form-control[disabled]:hover,.devui-form-control[disabled]:hover>input,.devui-form-control[disabled]:focus,.devui-form-control[disabled]:focus>input,.devui-form-control.disabled,.devui-form-control.disabled>input,.devui-form-control.disabled:hover,.devui-form-control.disabled:hover>input,.devui-form-control.disabled:focus,.devui-form-control.disabled:focus>input,.devui-form-control.devui-disabled,.devui-form-control.devui-disabled>input,.devui-form-control.devui-disabled:hover,.devui-form-control.devui-disabled:hover>input,.devui-form-control.devui-disabled:focus,.devui-form-control.devui-disabled:focus>input{color:var(--devui-disabled-text, #adb0b8);background-color:var(--devui-disabled-bg, #f5f5f6);cursor:not-allowed}.devui-form-control:hover{border-color:var(--devui-form-control-line-hover, #575d6c)}.devui-form-control:focus{border-color:var(--devui-form-control-line-active, #5e7ce0)}:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border){border-color:var(--devui-form-control-line, #adb0b8);transition:border-color .3s cubic-bezier(.645,.045,.355,1)}:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border):hover:not(:focus):not(.devui-dropdown-origin-open){border-color:var(--devui-form-control-line-hover, #575d6c)}:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border):focus,:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border):focus-within{outline:none;border-color:var(--devui-form-control-line-active, #5e7ce0)}:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border).devui-dropdown-origin-open{outline:none;border-color:var(--devui-connected-overlay-line, #526ecc)}.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]){min-height:28px}.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled){color:var(--devui-text, #252b3a)}.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-input,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-form-control{height:26px}.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not(.devui-select-underlined-border):not(.devui-dropdown-no-border):not(.devui-no-border){border-radius:var(--devui-border-radius, 2px);border-width:1px;border-style:solid}.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-form-control,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-form-control:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-form-control:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-form-control:focus:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-input-group-addon,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-input-group-addon:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-input-group-addon:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-dropdown-default,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-dropdown-default:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-dropdown-default:active,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-dropdown-default:focus{border-color:transparent}.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-form-control,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-form-control:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-form-control:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-form-control:focus:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-input-group-addon,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled]>.devui-dropdown-default,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled]>.devui-dropdown-default:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled]>.devui-dropdown-default:active,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled]>.devui-dropdown-default:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-form-control,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-form-control:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-form-control:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-form-control:focus:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-input-group-addon,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled>.devui-dropdown-default,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled>.devui-dropdown-default:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled>.devui-dropdown-default:active,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled>.devui-dropdown-default:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-form-control,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-form-control:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-form-control:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-form-control:focus:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-input-group-addon,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled>.devui-dropdown-default,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled>.devui-dropdown-default:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled>.devui-dropdown-default:active,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled>.devui-dropdown-default:focus{background-color:var(--devui-disabled-bg, #f5f5f6)}input::-moz-placeholder{color:var(--devui-placeholder, #8a8e99)}input:-ms-input-placeholder{color:var(--devui-placeholder, #8a8e99)}input::-webkit-input-placeholder{color:var(--devui-placeholder, #8a8e99)}[dInput]:not([disabled]):not(.disabled):not(.devui-disabled).error,[dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled).error,[dInput]:not([disabled]):not(.disabled):not(.devui-disabled).devui-error,[dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled).devui-error{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}[dDatePicker]:not([disabled]):not(.disabled):not(.devui-disabled).devui-error{background-color:var(--devui-danger-bg, #ffeeed)}d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropup,d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropdown{border-color:var(--devui-danger-line, #f66f6a)}d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropup .devui-form-group .devui-input.devui-form-control.devui-select-input:not(.devui-select-search),d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropup .devui-form-group .devui-select-input:not(.devui-select-search)+.devui-form-control-feedback,d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropdown .devui-form-group .devui-input.devui-form-control.devui-select-input:not(.devui-select-search),d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropdown .devui-form-group .devui-select-input:not(.devui-select-search)+.devui-form-control-feedback{background-color:var(--devui-danger-bg, #ffeeed)}d-editable-select:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-form-group:not(.multiple-label-auto-complete-disabled) input.devui-form-control.devui-dropdown-origin{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}d-datepicker-pro:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-datepicker-pro-wrapper:not([disabled]):not(.disabled):not(.devui-disabled) .devui-dropdown-toggle .devui-single-picker{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}d-datepicker-pro:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-datepicker-pro-wrapper:not([disabled]):not(.disabled):not(.devui-disabled) .devui-dropdown-toggle .devui-single-picker .devui-input:not(.devui-disabled){background-color:var(--devui-danger-bg, #ffeeed)}d-range-datepicker-pro:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-datepicker-pro-wrapper:not([disabled]):not(.disabled):not(.devui-disabled) .devui-dropdown-toggle .devui-range-picker{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}d-range-datepicker-pro:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-datepicker-pro-wrapper:not([disabled]):not(.disabled):not(.devui-disabled) .devui-dropdown-toggle .devui-range-picker .devui-input:not(.devui-disabled){background-color:var(--devui-danger-bg, #ffeeed)}d-input-number:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .input-box:not(:disabled){border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}d-multi-auto-complete:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled).multiple-label-auto-complete.multiple-label-auto-complete-border ul.devui-dropdown-origin{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}d-multi-auto-complete:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled) input[dAutoComplete]{background-color:var(--devui-danger-bg, #ffeeed)}d-tags-input:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled) div.devui-tags.devui-form-control{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}d-tags-input:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled) input.devui-input{background-color:var(--devui-danger-bg, #ffeeed)}d-tree-select:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled)>div.devui-select-input.devui-dropdown-origin.devui-tree-select-input{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}d-search:not([disabled]):not(.disabled):not(.devui-disabled).devui-error input.devui-input{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}d-editor-md:not([disabled]):not(.disabled):not(.devui-disabled).devui-error{border-color:var(--devui-danger-line, #f66f6a)}d-editor:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .ql-toolbar,d-editor:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .ql-container{border-color:var(--devui-danger-line, #f66f6a)}d-form-control d-search{width:100%}.devui-form-controls.devui-form-control-has-suffix [dInput],.devui-form-controls.devui-form-control-has-suffix [dTextArea]{padding-right:28px}.devui-form-controls.devui-form-control-has-suffix.devui-form-control-has-feedback [dInput],.devui-form-controls.devui-form-control-has-suffix.devui-form-control-has-feedback [dTextArea]{padding-right:56px}.devui-form-controls.devui-form-control-has-feedback [dInput],.devui-form-controls.devui-form-control-has-feedback [dTextarea]{padding-right:28px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-icon{right:24px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-line{right:60px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-clear{right:60px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-icon-left{padding-right:30px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input{padding-right:54px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-clear-exit{padding-right:84px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-line.devui-search-line-sm{right:60px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-clear.devui-search-clear-sm{right:60px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-input-sm{padding-right:54px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-clear-exit.devui-input-sm{padding-right:84px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-line.devui-search-line-lg{right:70px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-clear.devui-search-clear-lg{right:70px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-input-lg{padding-right:60px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-clear-exit.devui-input-lg{padding-right:95px}.devui-form-controls.devui-form-control-has-feedback d-select .devui-form-group .devui-select-input{padding-right:48px}.devui-form-controls.devui-form-control-has-feedback d-select .devui-form-group .devui-form-control-feedback{right:24px}.devui-form-controls.devui-form-control-has-feedback d-tree-select{vertical-align:middle}.devui-form-controls.devui-form-control-has-feedback d-tree-select .devui-tree-select .devui-select-input.devui-tree-select-input{padding-right:52px}.devui-form-controls.devui-form-control-has-feedback d-tree-select .devui-tree-select .devui-select-chevron-icon{right:34px}.devui-form-controls.devui-form-control-has-feedback d-input-number{width:100%}.devui-form-controls.devui-form-control-has-feedback d-input-number .input-control-buttons{right:32px}.devui-form-controls.devui-form-control-has-feedback d-input-number .input-box{padding-right:32px}.devui-form-controls.devui-form-control-has-feedback d-input-number:hover .input-box:not(.disabled){padding-right:58px}.devui-form-controls.devui-form-control-has-feedback d-tags-input .devui-tags{padding-right:28px}.devui-form-controls.devui-form-control-has-feedback d-multi-auto-complete .multiple-label-auto-complete ul{padding-right:28px}.devui-form-controls.devui-form-control-has-feedback d-editable-select .devui-form-group.devui-has-feedback>.devui-form-control-feedback{right:24px}.devui-form-controls.devui-form-control-has-feedback d-editable-select>div>.devui-form-control{padding-right:48px}.devui-form-controls.devui-form-control-has-feedback [dDatePicker].devui-form-control{padding-right:32px}.devui-textarea-wrap .devui-textarea-show-count{text-align:right;color:inherit;white-space:nowrap;pointer-events:none;font-size:var(--devui-font-size, 12px)}

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,185 @@
-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, Fragment, inject, createTextVNode, provide, ref, reactive, onMounted, watch, toRef, nextTick } 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 createVNode(Fragment, null, [/^((https?):)?\/\//.test(name) ? createVNode("img", {
+      "src": name,
+      "alt": name.split("/")[name.split("/").length - 1],
+      "style": {
+        width: size
+      }
+    }, 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 +192,105 @@ 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);
+  app.component(TimeAxisItem.name, TimeAxisItem);
 };
 var index = {
   title: "TimeAxis \u65F6\u95F4\u8F74",
   category: "\u6570\u636E\u5C55\u793A",
-  status: "10%",
+  status: "\u5DF2\u5B8C\u6210",
   install(app) {
     app.use(TimeAxis);
+    app.use(TimeAxisItem);
   }
 };
-export { TimeAxis, index as default };
+export { TimeAxis, TimeAxisItem, index as default };