xt-element-ui 2.1.61 → 2.2.0

package/lib/xt-upload/xt-upload.umd.min.js

@@ -0,0 +1 @@
+(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["xt-upload"]=t(require("vue")):e["xt-upload"]=t(e["Vue"])})("undefined"!==typeof self?self:this,(function(e){return function(e){var t={};function i(n){if(t[n])return t[n].exports;var s=t[n]={i:n,l:!1,exports:{}};return e[n].call(s.exports,s,s.exports,i),s.l=!0,s.exports}return i.m=e,i.c=t,i.d=function(e,t,n){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)i.d(n,s,function(t){return e[t]}.bind(null,s));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s="fb15")}({"2c86":function(e,t,i){"use strict";i("6d33")},"6d33":function(e,t,i){},"8bbf":function(t,i){t.exports=e},fb15:function(e,t,i){"use strict";if(i.r(t),i.d(t,"XtUpload",(function(){return I})),"undefined"!==typeof window){var n=window.document.currentScript,s=n&&n.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);s&&(i.p=s[1])}var o=function(){var e=this,t=e._self._c;return t("XtFlexBox",{attrs:{type:"inline-flex",gap:"5px"}},[e.action?t("el-upload",{ref:"uploadFile",attrs:{disabled:e.disabled||e.uploading,action:e.YSSQP+e.action,"file-list":e.fileList,data:{accessToken:e.accessToken,...e.data},multiple:e.multiple,limit:e.limit,"on-success":e.uploadSuccess,"show-file-list":!1,"auto-upload":e.autoUpload,"before-upload":e.uploadBefore,accept:e.accept}},[t("span",{staticStyle:{"font-size":"20px",padding:"20px",background:"#f0f0f1",color:"#409EFF"},style:{padding:e.plusPx/2+"px",cursor:e.disabled?"not-allowed":"pointer"}},[e._t("default",(function(){return[t("i",{class:e.icon})]}))],2)]):e._e(),null!==e.fileList&&e.fileList.length>0?t("XtFlexBox",{staticClass:"el-upload-list el-upload-list--picture-card",staticStyle:{flex:"1"},attrs:{gap:"5px",wrap:"wrap"}},e._l(e.fileList,(function(i,n){return t("li",{key:n,staticClass:"el-upload-list__item is-ready",staticStyle:{margin:"0",width:"62px",height:"62px"},style:{width:e.plusPx+22+"px",height:e.plusPx+22+"px"}},[t("el-image",{staticClass:"el-upload-list__item-thumbnail",attrs:{src:e.YSSQP+"/"+i,alt:""},on:{click:e.clickHandler}}),t("span",{staticClass:"el-upload-list__item-actions",on:{click:function(t){return e.preShowPicture(i,n)}}},[t("span",{staticClass:"el-upload-list__item-preview",on:{click:function(t){return t.stopPropagation(),e.preShowPicture(i,n)}}},[t("i",{staticClass:"el-icon-zoom-in"})]),e.uploading||e.disabled?e._e():t("span",{staticClass:"el-upload-list__item-delete",staticStyle:{"margin-left":"0"},on:{click:function(t){return t.stopPropagation(),e.handleRemove(n)}}},[t("i",{staticClass:"el-icon-delete"})])])],1)})),0):e._e(),e.preview?[e.previewVisible?t("ImageViewer",{attrs:{"z-index":3e3,"base-url":e.baseUrl+"/",infiniteLoop:!1,"initial-index":e.imageIndex,"url-list":e.allFileList||e.fileList,"on-close":e.closeViewer}}):e._e()]:e._e()],2)},a=[],r=function(){var e=this,t=e._self._c;return t("transition",{attrs:{name:"viewer-fade"}},[t("div",{ref:"el-image-viewer__wrapper",staticClass:"el-image-viewer__wrapper",style:{"z-index":e.zIndex},attrs:{tabindex:"-1"}},[t("div",{staticClass:"el-image-viewer__mask",on:{click:e.hide}}),t("span",{staticClass:"el-image-viewer__btn fix_close",on:{click:e.hide}},[t("i",{staticClass:"el-icon-close"})]),e.isSingle?e._e():[t("span",{staticClass:"el-image-viewer__btn el-image-viewer__prev",class:{"is-disabled":!e.infinite&&e.isFirst},on:{click:e.prev}},[t("i",{staticClass:"el-icon-arrow-left"})]),t("span",{staticClass:"el-image-viewer__btn el-image-viewer__next",class:{"is-disabled":!e.infinite&&e.isLast},on:{click:e.next}},[t("i",{staticClass:"el-icon-arrow-right"})])],t("div",{staticClass:"el-image-viewer__btn el-image-viewer__actions"},[t("div",{staticClass:"el-image-viewer__actions__inner"},[t("i",{staticClass:"el-icon-zoom-out",on:{click:function(t){return t.stopPropagation(),e.handleActions("zoomOut")}}}),t("i",{staticClass:"el-icon-zoom-in",on:{click:function(t){return t.stopPropagation(),e.handleActions("zoomIn")}}}),t("i",{staticClass:"el-image-viewer__actions__divider"}),t("i",{class:e.mode.icon,on:{click:function(t){return t.stopPropagation(),e.toggleMode.apply(null,arguments)}}}),t("i",{staticClass:"el-image-viewer__actions__divider"}),t("i",{staticClass:"el-icon-refresh-left",on:{click:function(t){return t.stopPropagation(),e.handleActions("anticlocelise")}}}),t("i",{staticClass:"el-icon-refresh-right",on:{click:function(t){return t.stopPropagation(),e.handleActions("clocelise")}}})])]),t("div",{staticClass:"el-image-viewer__canvas"},e._l(e.urlList,(function(i,n){return n===e.index?t("img",{key:i,ref:"img",refInFor:!0,staticClass:"el-image-viewer__img",style:e.imgStyle,attrs:{src:e.currentImg},on:{load:e.handleImgLoad,error:e.handleImgError,mousedown:e.handleMouseDown}}):e._e()})),0)],2)])},l=[],c=i("8bbf"),d=i.n(c);const u=d.a.prototype.$isServer,p=(u||Number(document.documentMode),function(){return!u&&document.addEventListener?function(e,t,i){e&&t&&i&&e.addEventListener(t,i,!1)}:function(e,t,i){e&&t&&i&&e.attachEvent("on"+t,i)}}()),f=function(){return!u&&document.removeEventListener?function(e,t,i){e&&t&&e.removeEventListener(t,i,!1)}:function(e,t,i){e&&t&&e.detachEvent("on"+t,i)}}();let h=e=>{var t={};return e&&"[object Function]"===t.toString.call(e)};"object"===typeof Int8Array||!d.a.prototype.$isServer&&"function"===typeof document.childNodes||(h=function(e){return"function"===typeof e||!1});Object.prototype.hasOwnProperty;const m=function(){return!d.a.prototype.$isServer&&!!window.navigator.userAgent.match(/firefox/i)};function g(e){let t=!1;return function(...i){t||(t=!0,window.requestAnimationFrame(n=>{e.apply(this,i),t=!1}))}}const _={CONTAIN:{name:"contain",icon:"el-icon-full-screen"},ORIGINAL:{name:"original",icon:"el-icon-c-scale-to-original"}},v=m()?"DOMMouseScroll":"mousewheel";var y={name:"elImageViewer",props:{baseUrl:{type:String,default:""},urlList:{type:Array,default:()=>[]},zIndex:{type:Number,default:2e3},onSwitch:{type:Function,default:()=>{}},onClose:{type:Function,default:()=>{}},initialIndex:{type:Number,default:0},infiniteLoop:{type:Boolean,default:!0}},data(){return{index:this.initialIndex,isShow:!1,infinite:this.infiniteLoop,loading:!1,mode:_.CONTAIN,transform:{scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}}},computed:{isSingle(){return this.urlList.length<=1},isFirst(){return 0===this.index},isLast(){return this.index===this.urlList.length-1},currentImg(){return this.baseUrl+this.urlList[this.index]},imgStyle(){const{scale:e,deg:t,offsetX:i,offsetY:n,enableTransition:s}=this.transform,o={transform:`scale(${1*e}) rotate(${t}deg)`,transition:s?"transform .3s":"","margin-left":i+"px","margin-top":n+"px"};return this.mode===_.CONTAIN&&(o.maxWidth=o.maxHeight="80%"),o}},watch:{index:{handler:function(e){this.reset(),this.onSwitch(e)}},currentImg(e){this.$nextTick(e=>{const t=this.$refs.img[0];t.complete||(this.loading=!0)})}},methods:{hide(){this.deviceSupportUninstall(),this.onClose()},deviceSupportInstall(){this._keyDownHandler=g(e=>{const t=e.keyCode;switch(t){case 27:this.hide();break;case 32:this.toggleMode();break;case 37:this.prev();break;case 38:this.handleActions("zoomIn");break;case 39:this.next();break;case 40:this.handleActions("zoomOut");break}}),this._mouseWheelHandler=g(e=>{const t=e.wheelDelta?e.wheelDelta:-e.detail;t>0?this.handleActions("zoomIn",{zoomRate:.015,enableTransition:!1}):this.handleActions("zoomOut",{zoomRate:.015,enableTransition:!1})}),p(document,"keydown",this._keyDownHandler),p(document,v,this._mouseWheelHandler)},deviceSupportUninstall(){f(document,"keydown",this._keyDownHandler),f(document,v,this._mouseWheelHandler),this._keyDownHandler=null,this._mouseWheelHandler=null},handleImgLoad(e){this.loading=!1},handleImgError(e){this.loading=!1,e.target.alt="加载失败"},handleMouseDown(e){if(this.loading||0!==e.button)return;const{offsetX:t,offsetY:i}=this.transform,n=e.pageX,s=e.pageY;this._dragHandler=g(e=>{this.transform.offsetX=t+e.pageX-n,this.transform.offsetY=i+e.pageY-s}),p(document,"mousemove",this._dragHandler),p(document,"mouseup",e=>{f(document,"mousemove",this._dragHandler)}),e.preventDefault()},reset(){this.transform={scale:1,deg:0,offsetX:0,offsetY:0,enableTransition:!1}},toggleMode(){if(this.loading)return;const e=Object.keys(_),t=Object.values(_),i=t.indexOf(this.mode),n=(i+1)%e.length;this.mode=_[e[n]],this.reset()},prev(){if(this.isFirst&&!this.infinite)return;const e=this.urlList.length;this.index=(this.index-1+e)%e},next(){if(this.isLast&&!this.infinite)return;const e=this.urlList.length;this.index=(this.index+1)%e},handleActions(e,t={}){if(this.loading)return;const{zoomRate:i,rotateDeg:n,enableTransition:s}={zoomRate:.2,rotateDeg:90,enableTransition:!0,...t},{transform:o}=this;switch(e){case"zoomOut":o.scale>.2&&(o.scale=parseFloat((o.scale-i).toFixed(3)));break;case"zoomIn":o.scale<10&&(o.scale=parseFloat((o.scale+i).toFixed(3)));break;case"clocelise":o.deg+=n;break;case"anticlocelise":o.deg-=n;break}o.enableTransition=s}},mounted(){this.deviceSupportInstall(),this.$refs["el-image-viewer__wrapper"].focus()}},b=y;i("2c86");function w(e,t,i,n,s,o,a,r){var l,c="function"===typeof e?e.options:e;if(t&&(c.render=t,c.staticRenderFns=i,c._compiled=!0),n&&(c.functional=!0),o&&(c._scopeId="data-v-"+o),a?(l=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),s&&s.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(a)},c._ssrRegister=l):s&&(l=r?function(){s.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:s),l)if(c.functional){c._injectStyles=l;var d=c.render;c.render=function(e,t){return l.call(t),d(e,t)}}else{var u=c.beforeCreate;c.beforeCreate=u?[].concat(u,l):[l]}return{exports:e,options:c}}var x=w(b,r,l,!1,null,"236adf7f",null),S=x.exports,k={name:"XtUpload",components:{ImageViewer:S},model:{prop:"src",event:"change"},props:{data:{type:Object,default:()=>({})},src:{type:String,default:"",required:!0},accessToken:{type:String,default:""},autoUpload:{type:Boolean,default:!0},action:{type:String,default:""},baseUrl:{type:String,default:""},multiple:{type:Boolean,default:!1},accept:{type:String,default:".jpg,.jpeg,.png"},limit:{type:Number,default:5},disabled:{type:Boolean,default:!1},size:{type:String,default:""},beforeEmitData:{type:Function,default:(e,t,i)=>200==e.code&&(e.data.Result?e.data.Data:e.data[0])},allFileList:{type:Array},icon:{type:String,default:"el-icon-camera"}},data(){return{YSSQP:this.baseUrl,previewVisible:!1,uploading:!1,imageUrl:"",fileList:[],imageIndex:0}},computed:{preview(){const{fileList:e}=this;return Array.isArray(e)&&e.length>0},plusPx(){const e="big"==this.size?100:20;return 2*e}},watch:{src:{immediate:!0,deep:!0,handler(e){this.fileList=e?e.split(","):[]}}},methods:{clickHandler(){this.preview&&(this.previewVisible=!0)},closeViewer(){this.previewVisible=!1},preShowPicture(e,t){if(this.allFileList&&0!=this.allFileList.length){const i=this.allFileList.findIndex(t=>t==e);this.imageIndex=i>-1?i:t}else this.imageIndex=t;e.indexOf(".pdf")>-1?window.open(e,"_blank"):(this.imageUrl=this.baseUrl+"/"+e,this.previewVisible=!0)},handleRemove(e,t){try{this.fileList.splice(e,1),this.$emit("change",this.fileList.join(","))}catch(i){console.log(i)}},getPathName(e){return e.split("/").pop().split(".")[0]},uploadBefore(e,t){console.log(e);const i="image/jpeg"===e.type||"image/jpg"===e.type||"image/png"===e.type||"application/pdf"===e.type,n=e.size/1024/1024<50;return i||this.$message.error("上传图片只能是jpg,jpeg,png,pdf格式!"),n||this.$message.error("上传图片大小不能超过50MB!"),i&&n},uploadSuccess(e,t,i){const n=this.beforeEmitData(e,t,i);if(n)return this.fileList.push(n),this.$emit("change",this.fileList.join(",")),this.$message({message:"上传成功",center:!0,type:"success"}),e.data[0];this.$message({message:"上传失败",center:!0,type:"error"})}}},C=k,L=w(C,o,a,!1,null,null,null),I=L.exports;I.install=function(e){e.component(I.name,I)};var j=I;t["default"]=j}})}));

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "xt-element-ui",
-  "version": "2.1.61",
+  "version": "2.2.0",
   "description": "基于 Vue 2.7 + ElementUI 的企业级组件库，提供丰富的自定义组件和扩展组件",
   "main": "lib/index.common.js",
-  "module": "lib/index.esm.js",
   "unpkg": "lib/index.umd.min.js",
   "style": "lib/index.css",
   "scripts": {
     "docs:dev": "vuepress dev docs",
     "docs:build": "vuepress build docs",
     "dev": "vue-cli-service serve",
-    "lib": "vue-cli-service build --target lib --name index --dest lib src/index.js",
+    "lib": "node scripts/build-lib.js",
+    "build:components": "node scripts/build-components.js",
     "prepublishOnly": "npm run lib",
     "postinstall": "patch-package"
   },
@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "@vue/cli-service": "~4.5.19",
-    "patch-package": "^8.0.1",
+    "babel-plugin-component": "^1.1.1",
     "sass": "^1.56.0",
     "sass-loader": "^10.5.2",
     "vuepress": "^1.9.10",
@@ -28,7 +28,10 @@
   },
   "files": [
     "lib",
-    "src",
+    "src/components",
+    "src/styles",
+    "src/utils",
+    "src/index.js",
     "README.md",
     "CHANGELOG.md",
     "docs/components/**/*md",
@@ -37,8 +40,8 @@
   "dependencies": {
     "echarts": "^4.0.0",
     "element-ui": "^2.11.1",
-    "vue": "^2.6.10",
-    "vue-server-renderer": "^2.7.14"
+    "patch-package": "^8.0.1",
+    "vue": "^2.6.10"
   },
   "keywords": [
     "vue",

package/src/components/xt-badge/index.js

@@ -1,7 +1,8 @@
-import XtBadge from './index.vue'
-
-XtBadge.install = function(Vue) {
-  Vue.component(XtBadge.name, XtBadge)
-}
-
-export default XtBadge
+import './style/index.scss'
+import XtBadge from './index.vue'
+
+XtBadge.install = function(Vue) {
+  Vue.component(XtBadge.name, XtBadge)
+}
+
+export default XtBadge

package/src/components/xt-button/index.js

@@ -1,3 +1,4 @@
+import './style/index.scss'
 import XtButton from './index.vue'
 
 XtButton.install = function (Vue) {

package/src/components/xt-card/index.js

@@ -1,3 +1,4 @@
+import './style/index.scss'
 import XtCard from './index.vue'
 
 XtCard.install = function (Vue) {

package/src/components/xt-card-item/index.js

@@ -1,3 +1,4 @@
+import './style/index.scss'
 import XtCardItem from './index.vue'
 
 XtCardItem.install = function (Vue) {

package/src/components/xt-config-provider/index.js

@@ -1,3 +1,4 @@
+import './style/index.scss'
 import XtConfigProvider from './index.vue'
 
 XtConfigProvider.install = function (Vue) {

package/src/components/xt-flex-box/index.js

@@ -1,3 +1,4 @@
+import './style/index.scss'
 import XtFlexBox from './index.vue'
 
 XtFlexBox.install = function (Vue) {

package/src/components/xt-grid-box/index.js

@@ -1,3 +1,4 @@
+import './style/index.scss'
 import XtGridBox from './index.vue'
 
 XtGridBox.install = function (Vue) {

package/src/components/xt-icon/index.js

@@ -1,3 +1,4 @@
+import './style/index.scss'
 import XtIcon from './index.vue'
 
 XtIcon.install = function (Vue) {

package/src/components/xt-input/index.js

@@ -1,3 +1,4 @@
+import './style/index.scss'
 import XtInput from './index.vue'
 
 XtInput.install = function (Vue) {

package/src/components/xt-map/index.js

@@ -1,3 +1,4 @@
+import './style/index.scss'
 import XtMap from './index.vue'
 
 XtMap.install = function (Vue) {

package/src/components/xt-progress/index.js

@@ -1,7 +1,8 @@
-import XtProgress from './index.vue'
-
-XtProgress.install = function(Vue) {
-  Vue.component(XtProgress.name, XtProgress)
-}
-
-export default XtProgress
+import './style/index.scss'
+import XtProgress from './index.vue'
+
+XtProgress.install = function(Vue) {
+  Vue.component(XtProgress.name, XtProgress)
+}
+
+export default XtProgress

package/src/components/xt-scroll-arrow/index.js

@@ -1,8 +1,9 @@
-import XtScrollArrow from './index.vue'
-
-XtScrollArrow.install = function (Vue) {
-  Vue.component(XtScrollArrow.name, XtScrollArrow)
-}
-
-export default XtScrollArrow
+import './style/index.scss'
+import XtScrollArrow from './index.vue'
+
+XtScrollArrow.install = function (Vue) {
+  Vue.component(XtScrollArrow.name, XtScrollArrow)
+}
+
+export default XtScrollArrow
 export { XtScrollArrow }

package/src/components/xt-step-price/index.js

@@ -1,3 +1,4 @@
+import './style/index.scss'
 import XtStepPrice from './index.vue'
 import XtStepPriceItem from '../xt-step-price-item/index.vue'
 

package/src/components/xt-tab-pane/index.js

@@ -0,0 +1,10 @@
+
+import XtTabPane from './index.vue'
+
+XtTabPane.install = function(Vue) {
+  Vue.component(XtTabPane.name, XtTabPane)
+}
+
+export default XtTabPane
+export { XtTabPane }
+

package/src/components/{xt-tabs/TabPane.vue → xt-tab-pane/index.vue}

@@ -15,6 +15,14 @@ export default {
     label: {
       type: String,
       default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    closable: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {
@@ -24,7 +32,12 @@ export default {
   },
   mounted() {
     if (this.$parent && typeof this.$parent.addPane === 'function') {
-      this.$parent.addPane({ name: this.name, label: this.label })
+      this.$parent.addPane({ 
+        name: this.name, 
+        label: this.label,
+        disabled: this.disabled,
+        closable: this.closable
+      })
     }
   },
   beforeDestroy() {

package/src/components/xt-tabs/index.js

@@ -1,10 +1,9 @@
-import XtTabs from './index.vue'
-import XtTabPane from './TabPane.vue'
-
-XtTabs.install = function(Vue) {
-  Vue.component(XtTabs.name, XtTabs)
-  Vue.component(XtTabPane.name, XtTabPane)
-}
-
-export default XtTabs
-export { XtTabPane }
+import './style/index.scss'
+import XtTabs from './index.vue'
+
+XtTabs.install = function(Vue) {
+  Vue.component(XtTabs.name, XtTabs)
+}
+
+export default XtTabs
+export { XtTabs }

package/src/components/xt-tabs/index.vue

@@ -1,34 +1,42 @@
 <template>
-  <div class="xt-tabs" :class="[
-    `xt-tabs--${position}`,
-    { 'xt-tabs--card': type === 'card' }
+  <div ref="tabsWrap" class="xt-tabs" :class="[
+    `xt-tabs--${actualPosition}`,
+    { 'xt-tabs--card': type === 'card' },
+    { 'xt-tabs--border-card': type === 'border-card' },
+    { 'xt-tabs--editable': editable }
   ]">
-    <div class="xt-tabs__header">
-      <div class="xt-tabs__nav">
+    <div class="xt-tabs__header" ref="tabsHeader">
+      <div class="xt-tabs__nav" ref="tabsNav">
         <div
           v-for="(pane, index) in panes"
           :key="pane.name"
           class="xt-tabs__nav-item"
-          :class="{ 'xt-tabs__nav-item--active': activeName === pane.name }"
-          @click="handleTabClick(pane.name)"
+          :class="{ 
+            'xt-tabs__nav-item--active': activeName === pane.name,
+            'xt-tabs__nav-item--disabled': pane.disabled
+          }"
+          @click="handleTabClick(pane)"
         >
           <span class="xt-tabs__nav-link">{{ pane.label }}</span>
+          <span 
+            v-if="(closable || pane.closable) && !editable" 
+            class="xt-tabs__close" 
+            @click.stop="handleTabRemove(pane.name)"
+          >×</span>
+        </div>
+        <div 
+          v-if="addable || editable" 
+          class="xt-tabs__nav-item xt-tabs__nav-item--add" 
+          @click="handleTabAdd"
+        >
+          <span>+</span>
         </div>
       </div>
       <div class="xt-tabs__nav-indicator" :style="indicatorStyle"></div>
     </div>
     
     <div class="xt-tabs__content">
-      <transition name="xt-tabs-fade" mode="out-in">
-        <div
-          v-for="(pane, index) in panes"
-          :key="pane.name"
-          class="xt-tabs__pane"
-          v-show="activeName === pane.name"
-        >
-          <slot :name="pane.name"></slot>
-        </div>
-      </transition>
+      <slot></slot>
     </div>
   </div>
 </template>
@@ -43,13 +51,29 @@ export default {
     },
     type: {
       type: String,
-      default: 'default',
-      validator: (val) => ['default', 'card'].includes(val)
+      default: 'card',
+      validator: (val) => ['default', 'card', 'border-card'].includes(val)
     },
     position: {
       type: String,
       default: 'top',
       validator: (val) => ['top', 'bottom', 'left', 'right'].includes(val)
+    },
+    tabPosition: {
+      type: String,
+      default: ''
+    },
+    closable: {
+      type: Boolean,
+      default: false
+    },
+    addable: {
+      type: Boolean,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -58,56 +82,291 @@ export default {
       activeName: this.value
     }
   },
-  watch: {
-    value(val) {
-      this.activeName = val
-    },
-    activeName(val) {
-      this.$emit('input', val)
-      this.$emit('change', val)
-    }
-  },
   computed: {
+    actualPosition() {
+      return this.tabPosition || this.position
+    },
     indicatorStyle() {
       const activeIndex = this.panes.findIndex(p => p.name === this.activeName)
-      if (activeIndex === -1) return { display: 'none' }
+      if (activeIndex === -1 || !this.$refs.tabsNav) return { display: 'none' }
       
-      const navItems = this.$el && this.$el.querySelectorAll('.xt-tabs__nav-item')
+      const navItems = this.$refs.tabsNav.querySelectorAll('.xt-tabs__nav-item:not(.xt-tabs__nav-item--add)')
       if (!navItems || navItems.length === 0) return { display: 'none' }
       
       const activeItem = navItems[activeIndex]
-      return {
-        left: `${activeItem.offsetLeft}px`,
-        width: `${activeItem.offsetWidth}px`,
-        display: 'block'
+      if (!activeItem) return { display: 'none' }
+
+      const pos = this.actualPosition
+      const base = { transition: 'all 0.3s ease' }
+      if (pos === 'top' || pos === 'bottom') {
+        return {
+          ...base,
+          left: `${activeItem.offsetLeft}px`,
+          width: `${activeItem.offsetWidth}px`,
+          height: '2px',
+          bottom: pos === 'top' ? 0 : 'auto',
+          top: pos === 'bottom' ? 0 : 'auto',
+          display: 'block'
+        }
+      } else {
+        return {
+          ...base,
+          top: `${activeItem.offsetTop}px`,
+          height: `${activeItem.offsetHeight}px`,
+          width: '2px',
+          left: pos === 'left' ? 'auto' : 0,
+          right: pos === 'right' ? 0 : 'auto',
+          display: 'block'
+        }
       }
     }
   },
+  watch: {
+    value(val) {
+      this.activeName = val
+    },
+    activeName(val) {
+      this.$emit('input', val)
+      this.$emit('change', val)
+      this.$nextTick(() => this.$forceUpdate())
+    },
+    panes: {
+      handler() {
+        this.$nextTick(() => this.$forceUpdate())
+      },
+      deep: true
+    }
+  },
   methods: {
-    handleTabClick(name) {
-      this.activeName = name
+    handleTabClick(pane) {
+      if (pane.disabled) return
+      this.activeName = pane.name
+      this.$emit('tab-click', pane)
+    },
+    handleTabRemove(name) {
+      this.$emit('tab-remove', name)
+      this.$emit('edit', name, 'remove')
+      const index = this.panes.findIndex(p => p.name === name)
+      if (index > -1) {
+        this.panes.splice(index, 1)
+        if (this.activeName === name && this.panes.length > 0) {
+          this.activeName = this.panes[0].name
+        }
+      }
+    },
+    handleTabAdd() {
+      this.$emit('tab-add')
+      this.$emit('edit', null, 'add')
     },
     addPane(pane) {
-      if (!this.panes.find(p => p.name === pane.name)) {
+      const exist = this.panes.some(p => p.name === pane.name)
+      if (!exist) {
         this.panes.push(pane)
         if (!this.activeName && this.panes.length === 1) {
           this.activeName = pane.name
         }
+        this.$nextTick(() => this.$forceUpdate())
       }
     },
     removePane(name) {
-      const index = this.panes.findIndex(p => p.name === name)
-      if (index > -1) {
-        this.panes.splice(index, 1)
+      const idx = this.panes.findIndex(p => p.name === name)
+      if (idx > -1) {
+        this.panes.splice(idx, 1)
+        this.$nextTick(() => this.$forceUpdate())
       }
+    },
+    collectPanes() {
+      this.panes = []
+      this.$children.forEach(child => {
+        if (child.$options.name === 'XtTabPane') {
+          this.addPane({
+            name: child.name,
+            label: child.label,
+            disabled: child.disabled,
+            closable: child.closable
+          })
+        }
+      })
     }
   },
   mounted() {
-    this.$children.forEach(child => {
-      if (child.$options.name === 'XtTabPane') {
-        this.addPane({ name: child.name, label: child.label })
-      }
+    this.$nextTick(() => {
+      this.collectPanes()
+      this.$watch(() => this.$children, () => {
+        this.collectPanes()
+      }, { flush: 'post' })
     })
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.xt-tabs {
+  display: flex;
+  flex-direction: column;
+  
+  &--top, &--bottom {
+    flex-direction: column;
+    .xt-tabs__header {
+      width: 100%;
+    }
+  }
+  
+  &--left, &--right {
+    flex-direction: row;
+    .xt-tabs__header {
+      flex-direction: column;
+      width: auto;
+    }
+    .xt-tabs__nav {
+      flex-direction: column;
+    }
+    .xt-tabs__nav-indicator {
+      width: 2px;
+      height: auto;
+    }
+    .xt-tabs__content {
+      border-left: 1px solid #dcdfe6;
+      border-top: none;
+    }
+    &--right .xt-tabs__content {
+      border-left: none;
+      border-right: 1px solid #dcdfe6;
+    }
+  }
+  
+  &--top .xt-tabs__nav-indicator {
+    bottom: 0;
+  }
+  &--bottom .xt-tabs__nav-indicator {
+    top: 0;
+  }
+  &--left .xt-tabs__nav-indicator {
+    right: 0;
+  }
+  &--right .xt-tabs__nav-indicator {
+    left: 0;
+  }
+  
+  &--card {
+    .xt-tabs__header {
+      margin-bottom: -1px;
+    }
+    
+    .xt-tabs__nav-item {
+      border: 1px solid transparent;
+      border-bottom: none;
+      background: #f5f7fa;
+      
+      &--active {
+        background: #fff;
+        border-color: #dcdfe6;
+        border-bottom-color: #fff;
+      }
+    }
+    &--left, &--right {
+      .xt-tabs__nav-item {
+        border-bottom: 1px solid transparent;
+        border-right: none;
+      }
+      .xt-tabs__nav-item--active {
+        border-right-color: #fff;
+        border-bottom-color: #dcdfe6;
+      }
+    }
+  }
+  
+  &--border-card {
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    overflow: hidden;
+    
+    .xt-tabs__nav-item--active {
+      background: #ecf5ff;
+      color: #409eff;
+    }
+  }
+  
+  &--editable {
+    .xt-tabs__close {
+      display: inline-block;
+    }
+  }
+}
+
+.xt-tabs__header {
+  position: relative;
+  display: flex;
+}
+
+.xt-tabs__nav {
+  display: flex;
+  flex-wrap: nowrap;
+}
+
+.xt-tabs__nav-item {
+  position: relative;
+  padding: 12px 20px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #606266;
+  transition: all 0.3s;
+  white-space: nowrap;
+  
+  &--active {
+    color: #409eff;
+  }
+  
+  &--disabled {
+    cursor: not-allowed;
+    color: #c0c4cc;
+  }
+  
+  &--add {
+    color: #909399;
+    font-size: 20px;
+  }
+  
+  &:hover:not(.xt-tabs__nav-item--disabled) {
+    color: #409eff;
+    background-color: #ecf5ff;
+  }
+}
+
+.xt-tabs__nav-link {
+  display: inline-block;
+}
+
+.xt-tabs__close {
+  display: none;
+  margin-left: 8px;
+  font-size: 16px;
+  line-height: 1;
+  color: #909399;
+  vertical-align: middle;
+  
+  &:hover {
+    color: #f56c6c;
+  }
+}
+
+.xt-tabs__nav-indicator {
+  position: absolute;
+  height: 2px;
+  background-color: #409eff;
+}
+
+.xt-tabs__content {
+  flex: 1;
+  padding: 16px;
+  border-top: 1px solid #dcdfe6;
+}
+
+.xt-tabs--border-card .xt-tabs__content {
+  border-top: none;
+}
+
+.xt-tabs__pane {
+  min-height: 40px;
+}
+</style>

package/src/components/xt-text/index.js

@@ -1,3 +1,4 @@
+import './style/index.scss'
 import XtText from './index.vue'
 
 XtText.install = function (Vue) {

package/src/components/xt-time/index.js

@@ -1,3 +1,4 @@
+import './style/index.scss'
 import XtTime from './index.vue'
 
 XtTime.install = function (Vue) {