vxe-pc-ui 3.16.0 → 3.16.1

package/es/tabs/style.min.css

@@ -0,0 +1 @@
+.vxe-tabs{display:flex;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-tabs.pos--bottom,.vxe-tabs.pos--top{flex-direction:column}.vxe-tabs.pos--left,.vxe-tabs.pos--right{flex-direction:row}.vxe-tabs.trigger--default .vxe-tabs-header--item{cursor:pointer}.vxe-tabs.trigger--default .vxe-tabs-header--item:hover .vxe-tabs-header--item-name{color:var(--vxe-ui-font-primary-color)}.vxe-tabs-header--bar{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}.vxe-tabs-header--bar::after{content:"";position:absolute;background-color:var(--vxe-ui-input-border-color);z-index:3}.vxe-tabs-header--bar:focus{color:var(--vxe-ui-font-darken-color)}.vxe-tabs-header--bar:hover{color:var(--vxe-ui-font-primary-lighten-color)}.vxe-tabs-header--bar:active{color:var(--vxe-ui-font-primary-darken-color)}.vxe-tabs-header--bar.type--border-card,.vxe-tabs-header--bar.type--card,.vxe-tabs-header--bar.type--default,.vxe-tabs-header--bar.type--round-card{border:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--bar.type--round-card{background-color:rgba(0,0,0,.02)}.vxe-tabs-header--bar.pos--bottom,.vxe-tabs-header--bar.pos--top{width:1.6em}.vxe-tabs-header--bar.pos--bottom::after,.vxe-tabs-header--bar.pos--top::after{top:0;width:1px;height:100%}.vxe-tabs-header--bar.pos--left,.vxe-tabs-header--bar.pos--right{width:100%;height:1.6em}.vxe-tabs-header--bar.pos--left::after,.vxe-tabs-header--bar.pos--right::after{left:0;width:100%;height:1px}.vxe-tabs-header--prev-bar.type--default.pos--bottom,.vxe-tabs-header--prev-bar.type--default.pos--top{border-right:0}.vxe-tabs-header--prev-bar.type--default.pos--left,.vxe-tabs-header--prev-bar.type--default.pos--right{border-bottom:0}.vxe-tabs-header--prev-bar.type--card.pos--top{border-bottom:0;border-right:0}.vxe-tabs-header--prev-bar.type--card.pos--bottom{border-top:0;border-right:0}.vxe-tabs-header--prev-bar.type--card.pos--left{border-left:0;border-bottom:0}.vxe-tabs-header--prev-bar.type--card.pos--right{border-right:0;border-bottom:0}.vxe-tabs-header--prev-bar.type--border-card.pos--top{border-top:0;border-right:0}.vxe-tabs-header--prev-bar.type--border-card.pos--bottom{border-right:0;border-bottom:0}.vxe-tabs-header--prev-bar.type--border-card.pos--left{border-left:0;border-bottom:0}.vxe-tabs-header--prev-bar.type--border-card.pos--right{border-right:0;border-bottom:0}.vxe-tabs-header--prev-bar.type--round-card.pos--top{border-right:0}.vxe-tabs-header--prev-bar.type--round-card.pos--bottom{border-right:0}.vxe-tabs-header--prev-bar.type--round-card.pos--left{border-bottom:0}.vxe-tabs-header--prev-bar.type--round-card.pos--right{border-bottom:0}.vxe-tabs-header--prev-bar.pos--bottom::after,.vxe-tabs-header--prev-bar.pos--top::after{right:0}.vxe-tabs-header--prev-bar.pos--left::after,.vxe-tabs-header--prev-bar.pos--right::after{bottom:0}.vxe-tabs-header--prev-bar.scrolling--middle.pos--bottom,.vxe-tabs-header--prev-bar.scrolling--middle.pos--top{box-shadow:4px 0 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color)}.vxe-tabs-header--prev-bar.scrolling--middle.pos--left,.vxe-tabs-header--prev-bar.scrolling--middle.pos--right{box-shadow:0 4px 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color)}.vxe-tabs-header--next-bar.type--default.pos--bottom,.vxe-tabs-header--next-bar.type--default.pos--top{border-left:0}.vxe-tabs-header--next-bar.type--default.pos--left,.vxe-tabs-header--next-bar.type--default.pos--right{border-top:0}.vxe-tabs-header--next-bar.type--card.pos--top{border-top:0;border-left:0}.vxe-tabs-header--next-bar.type--card.pos--bottom{border-bottom:0;border-left:0}.vxe-tabs-header--next-bar.type--card.pos--left{border-top:0;border-right:0}.vxe-tabs-header--next-bar.type--card.pos--right{border-top:0;border-left:0}.vxe-tabs-header--next-bar.type--border-card.pos--top{border-left:0;border-top:0}.vxe-tabs-header--next-bar.type--border-card.pos--bottom{border-left:0;border-bottom:0}.vxe-tabs-header--next-bar.type--border-card.pos--left{border-left:0;border-top:0}.vxe-tabs-header--next-bar.type--border-card.pos--right{border-right:0;border-top:0}.vxe-tabs-header--next-bar.type--round-card.pos--top{border-left:0}.vxe-tabs-header--next-bar.type--round-card.pos--bottom{border-left:0;border-bottom:0}.vxe-tabs-header--next-bar.type--round-card.pos--left{border-top:0}.vxe-tabs-header--next-bar.type--round-card.pos--right{border-top:0}.vxe-tabs-header--next-bar.pos--bottom::after,.vxe-tabs-header--next-bar.pos--top::after{left:0}.vxe-tabs-header--next-bar.pos--left::after,.vxe-tabs-header--next-bar.pos--right::after{top:0}.vxe-tabs-header--next-bar.scrolling--middle.pos--bottom,.vxe-tabs-header--next-bar.scrolling--middle.pos--top{box-shadow:-4px 0 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color)}.vxe-tabs-header--next-bar.scrolling--middle.pos--left,.vxe-tabs-header--next-bar.scrolling--middle.pos--right{box-shadow:0 -4px 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color)}.vxe-tabs-header--prefix,.vxe-tabs-header--suffix{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0}.vxe-tabs-header--prefix.type--border-card.pos--top,.vxe-tabs-header--prefix.type--default.pos--top,.vxe-tabs-header--prefix.type--round-card.pos--top,.vxe-tabs-header--suffix.type--border-card.pos--top,.vxe-tabs-header--suffix.type--default.pos--top,.vxe-tabs-header--suffix.type--round-card.pos--top{border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--prefix.type--border-card.pos--bottom,.vxe-tabs-header--prefix.type--default.pos--bottom,.vxe-tabs-header--prefix.type--round-card.pos--bottom,.vxe-tabs-header--suffix.type--border-card.pos--bottom,.vxe-tabs-header--suffix.type--default.pos--bottom,.vxe-tabs-header--suffix.type--round-card.pos--bottom{border-top:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--prefix.type--border-card.pos--left,.vxe-tabs-header--prefix.type--default.pos--left,.vxe-tabs-header--prefix.type--round-card.pos--left,.vxe-tabs-header--suffix.type--border-card.pos--left,.vxe-tabs-header--suffix.type--default.pos--left,.vxe-tabs-header--suffix.type--round-card.pos--left{border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--prefix.type--border-card.pos--right,.vxe-tabs-header--prefix.type--default.pos--right,.vxe-tabs-header--prefix.type--round-card.pos--right,.vxe-tabs-header--suffix.type--border-card.pos--right,.vxe-tabs-header--suffix.type--default.pos--right,.vxe-tabs-header--suffix.type--round-card.pos--right{border-left:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item-wrapper{position:relative;display:flex;outline:0}.vxe-tabs-header--item{position:relative;flex-shrink:0;padding:0 .5em}.vxe-tabs-header--item.is--active .vxe-tabs-header--item-content{color:var(--vxe-ui-font-primary-color)}.vxe-tabs-header--item.align--left{text-align:left}.vxe-tabs-header--item.align--center{text-align:center}.vxe-tabs-header--item.align--right{text-align:right}.vxe-tabs-header--item.type--card.pos--top{border-top:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--bottom{border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--bottom,.vxe-tabs-header--item.type--card.pos--top{border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--bottom:first-child,.vxe-tabs-header--item.type--card.pos--top:first-child{border-left:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--left{border-left:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--right{border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--left,.vxe-tabs-header--item.type--card.pos--right{border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--left:first-child,.vxe-tabs-header--item.type--card.pos--right:first-child{border-top:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--border-card.is--active{background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs-header--item.type--round-card{z-index:2;border:1px solid var(--vxe-ui-input-border-color);background-color:rgba(0,0,0,.02);transition:color .3s ease-in-out}.vxe-tabs-header--item.type--round-card.is--active{background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs-header--item.type--round-card.pos--top{border-bottom:0;border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0}.vxe-tabs-header--item.type--round-card.pos--bottom{border-top:0;border-radius:0 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius)}.vxe-tabs-header--item.type--round-card.pos--bottom,.vxe-tabs-header--item.type--round-card.pos--top{margin:0 2px}.vxe-tabs-header--item.type--round-card.pos--bottom:first-child,.vxe-tabs-header--item.type--round-card.pos--top:first-child{margin-left:0}.vxe-tabs-header--item.type--round-card.pos--bottom:last-child,.vxe-tabs-header--item.type--round-card.pos--top:last-child{margin-right:0}.vxe-tabs-header--item.type--round-card.pos--left{border-right:0;border-radius:var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius)}.vxe-tabs-header--item.type--round-card.pos--right{border-left:0;border-radius:0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0}.vxe-tabs-header--item.type--round-card.pos--left,.vxe-tabs-header--item.type--round-card.pos--right{margin:2px 0}.vxe-tabs-header--item.type--round-card.pos--left:first-child,.vxe-tabs-header--item.type--round-card.pos--right:first-child{margin-top:0}.vxe-tabs-header--item.type--round-card.pos--left:last-child,.vxe-tabs-header--item.type--round-card.pos--right:last-child{margin-bottom:0}.vxe-tabs-header--item-inner{display:flex;flex-direction:row;align-items:center}.vxe-tabs-header--item-content{flex-grow:1;max-width:30em;padding:0 .3em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-tabs-header--item-content>span{padding:0 .3em}.vxe-tabs-header--close-btn,.vxe-tabs-header--refresh-btn{font-size:.8em;border-radius:50%;width:1.5em;height:1.5em;line-height:1.5em;text-align:center}.vxe-tabs-header--close-btn:hover,.vxe-tabs-header--refresh-btn:hover{color:var(--vxe-ui-font-color);background:var(--vxe-ui-tabs-close-hover-background-color)}.vxe-tabs-header--close-btn:active,.vxe-tabs-header--refresh-btn:active{color:var(--vxe-ui-font-primary-color)}.vxe-tabs-header--close-btn>i,.vxe-tabs-header--refresh-btn>i{font-size:1em;vertical-align:middle}.vxe-tabs-header--refresh-btn{visibility:hidden}.vxe-tabs-header--refresh-btn.is--active,.vxe-tabs-header--refresh-btn.is--loading{visibility:visible}.vxe-tabs-header--refresh-btn.is--disabled{cursor:no-drop;color:var(--vxe-ui-font-disabled-color)}.vxe-tabs-header--item-inner{transition:color .1s ease-in-out}.vxe-tabs-pane--wrapper{display:none;position:relative;flex-direction:column;flex-grow:1;overflow:hidden}.vxe-tabs-pane--wrapper.is--content{display:flex}.vxe-tabs-pane--wrapper.type--border-card,.vxe-tabs-pane--wrapper.type--round-card{border:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-pane--wrapper.type--border-card.pos--top,.vxe-tabs-pane--wrapper.type--round-card.pos--top{border-top:0}.vxe-tabs-pane--wrapper.type--border-card.pos--bottom,.vxe-tabs-pane--wrapper.type--round-card.pos--bottom{border-bottom:0}.vxe-tabs-pane--wrapper.type--border-card.pos--left,.vxe-tabs-pane--wrapper.type--round-card.pos--left{border-left:0}.vxe-tabs-pane--wrapper.type--border-card.pos--right,.vxe-tabs-pane--wrapper.type--round-card.pos--right{border-right:0}.vxe-tabs-pane--body{flex-grow:1;overflow:hidden}.vxe-tabs-pane--body.is--padding{padding:var(--vxe-ui-layout-padding-default)}.vxe-tabs-pane--footer,.vxe-tabs-pane--header{flex-shrink:0;overflow:auto}.vxe-tabs-pane--item{display:none;height:100%;overflow:auto;outline:0}.vxe-tabs-pane--item.is--visible{display:block}.vxe-tabs-header{display:flex}.vxe-tabs-header.pos--bottom,.vxe-tabs-header.pos--top{flex-direction:row}.vxe-tabs-header.pos--left,.vxe-tabs-header.pos--right{flex-direction:column}.vxe-tabs-header.type--card.pos--top{border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header.type--card.pos--bottom{border-top:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header.type--card.pos--left{border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header.type--card.pos--right{border-left:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header.type--border-card{background-color:var(--vxe-ui-tabs-card-header-background-color);border:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header.type--border-card.pos--top{border-bottom:0}.vxe-tabs-header.type--border-card.pos--bottom{border-top:0}.vxe-tabs-header.type--border-card.pos--left{border-right:0}.vxe-tabs-header.type--border-card.pos--right{border-left:0}.vxe-tabs-header--wrapper{position:relative;flex-grow:1;overflow:hidden}.vxe-tabs-header--wrapper.type--border-card,.vxe-tabs-header--wrapper.type--default,.vxe-tabs-header--wrapper.type--round-card{position:relative}.vxe-tabs-header--wrapper.type--border-card::after,.vxe-tabs-header--wrapper.type--default::after,.vxe-tabs-header--wrapper.type--round-card::after{content:"";position:absolute;background-color:var(--vxe-ui-input-border-color);z-index:0}.vxe-tabs-header--wrapper.type--border-card.pos--top::after,.vxe-tabs-header--wrapper.type--default.pos--top::after,.vxe-tabs-header--wrapper.type--round-card.pos--top::after{bottom:0}.vxe-tabs-header--wrapper.type--border-card.pos--bottom::after,.vxe-tabs-header--wrapper.type--default.pos--bottom::after,.vxe-tabs-header--wrapper.type--round-card.pos--bottom::after{top:0}.vxe-tabs-header--wrapper.type--border-card.pos--bottom::after,.vxe-tabs-header--wrapper.type--border-card.pos--top::after,.vxe-tabs-header--wrapper.type--default.pos--bottom::after,.vxe-tabs-header--wrapper.type--default.pos--top::after,.vxe-tabs-header--wrapper.type--round-card.pos--bottom::after,.vxe-tabs-header--wrapper.type--round-card.pos--top::after{left:0;width:100%;height:1px}.vxe-tabs-header--wrapper.type--border-card.pos--left::after,.vxe-tabs-header--wrapper.type--default.pos--left::after,.vxe-tabs-header--wrapper.type--round-card.pos--left::after{right:0}.vxe-tabs-header--wrapper.type--border-card.pos--right::after,.vxe-tabs-header--wrapper.type--default.pos--right::after,.vxe-tabs-header--wrapper.type--round-card.pos--right::after{left:0}.vxe-tabs-header--wrapper.type--border-card.pos--left::after,.vxe-tabs-header--wrapper.type--border-card.pos--right::after,.vxe-tabs-header--wrapper.type--default.pos--left::after,.vxe-tabs-header--wrapper.type--default.pos--right::after,.vxe-tabs-header--wrapper.type--round-card.pos--left::after,.vxe-tabs-header--wrapper.type--round-card.pos--right::after{top:0;width:1px;height:100%}.vxe-tabs-header--wrapper.type--border-card.pos--top{border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0}.vxe-tabs-header--wrapper.type--border-card.pos--bottom{border-radius:0 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius)}.vxe-tabs-header--wrapper.type--border-card>.vxe-tabs-header--item-wrapper,.vxe-tabs-header--wrapper.type--round-card>.vxe-tabs-header--item-wrapper{z-index:2}.vxe-tabs-header--wrapper.pos--bottom .vxe-tabs-header--item-wrapper,.vxe-tabs-header--wrapper.pos--top .vxe-tabs-header--item-wrapper{flex-direction:row;width:100%;overflow-y:hidden;overflow-x:auto}.vxe-tabs-header--wrapper.pos--left .vxe-tabs-header--item-wrapper,.vxe-tabs-header--wrapper.pos--right .vxe-tabs-header--item-wrapper{flex-direction:column;height:100%;overflow-y:auto;overflow-x:hidden}.vxe-tabs-header--active-line{display:none}.vxe-tabs-header--active-line.type--default{display:block;position:absolute;background-color:var(--vxe-ui-font-primary-color);z-index:2;transition:all .3s ease-in-out}.vxe-tabs-header--active-line.type--default.pos--top{bottom:20px}.vxe-tabs-header--active-line.type--default.pos--bottom{top:0}.vxe-tabs-header--active-line.type--default.pos--bottom,.vxe-tabs-header--active-line.type--default.pos--top{left:0;height:2px;width:4px}.vxe-tabs-header--active-line.type--default.pos--left{right:20px}.vxe-tabs-header--active-line.type--default.pos--right{left:0}.vxe-tabs-header--active-line.type--default.pos--left,.vxe-tabs-header--active-line.type--default.pos--right{top:0;height:4px;width:2px}.vxe-tabs-header--active-line.type--card{display:block;position:absolute;top:0;left:0;border:1px solid var(--vxe-ui-font-primary-color);pointer-events:none;z-index:1;box-shadow:0 0 8px rgba(0,0,0,.1)}.vxe-tabs-header--active-line.type--card.pos--bottom,.vxe-tabs-header--active-line.type--card.pos--top{width:4px;transition:color,left .3s ease-in-out}.vxe-tabs-header--active-line.type--card.pos--left,.vxe-tabs-header--active-line.type--card.pos--right{width:calc(100% - 20px);transition:color,top .3s ease-in-out}.vxe-tabs-header--active-line.type--border-card{display:block;position:absolute;top:0;left:0;pointer-events:none;z-index:1}.vxe-tabs-header--active-line.type--border-card.pos--bottom,.vxe-tabs-header--active-line.type--border-card.pos--top{width:4px;border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--active-line.type--border-card.pos--left,.vxe-tabs-header--active-line.type--border-card.pos--right{width:100%;border-top:1px solid var(--vxe-ui-input-border-color);border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs--border-card,.vxe-tabs--card,.vxe-tabs--default,.vxe-tabs--round-card{border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs--default .vxe-tabs-header--item-inner{border-bottom:2px solid transparent}.vxe-tabs{font-size:var(--vxe-ui-font-size-default)}.vxe-tabs .vxe-tabs-header--item-inner{height:var(--vxe-ui-tabs-header-height-default)}.vxe-tabs .vxe-tabs-header--active-line.type--card{height:var(--vxe-ui-tabs-header-height-default)}.vxe-tabs .vxe-tabs-header--active-line.type--border-card{height:calc(var(--vxe-ui-tabs-header-height-default) + 1px);line-height:calc(var(--vxe-ui-tabs-header-height-default) + 1px)}.vxe-tabs .vxe-tabs-header--wrapper.pos--bottom,.vxe-tabs .vxe-tabs-header--wrapper.pos--top{height:var(--vxe-ui-tabs-header-height-default)}.vxe-tabs .vxe-tabs--card .vxe-tabs-header--item-inner,.vxe-tabs .vxe-tabs--round-card .vxe-tabs-header--item-inner{height:calc(var(--vxe-ui-tabs-header-height-default) - 1px)}.vxe-tabs .vxe-tabs-header--prefix.pos--bottom,.vxe-tabs .vxe-tabs-header--prefix.pos--top,.vxe-tabs .vxe-tabs-header--suffix.pos--bottom,.vxe-tabs .vxe-tabs-header--suffix.pos--top{height:var(--vxe-ui-tabs-header-height-default)}.vxe-tabs.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-tabs.size--medium .vxe-tabs-header--item-inner{height:var(--vxe-ui-tabs-header-height-medium)}.vxe-tabs.size--medium .vxe-tabs-header--active-line.type--card{height:var(--vxe-ui-tabs-header-height-medium)}.vxe-tabs.size--medium .vxe-tabs-header--active-line.type--border-card{height:calc(var(--vxe-ui-tabs-header-height-medium) + 1px);line-height:calc(var(--vxe-ui-tabs-header-height-medium) + 1px)}.vxe-tabs.size--medium .vxe-tabs-header--wrapper.pos--bottom,.vxe-tabs.size--medium .vxe-tabs-header--wrapper.pos--top{height:var(--vxe-ui-tabs-header-height-medium)}.vxe-tabs.size--medium .vxe-tabs--card .vxe-tabs-header--item-inner,.vxe-tabs.size--medium .vxe-tabs--round-card .vxe-tabs-header--item-inner{height:calc(var(--vxe-ui-tabs-header-height-medium) - 1px)}.vxe-tabs.size--medium .vxe-tabs-header--prefix.pos--bottom,.vxe-tabs.size--medium .vxe-tabs-header--prefix.pos--top,.vxe-tabs.size--medium .vxe-tabs-header--suffix.pos--bottom,.vxe-tabs.size--medium .vxe-tabs-header--suffix.pos--top{height:var(--vxe-ui-tabs-header-height-medium)}.vxe-tabs.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-tabs.size--small .vxe-tabs-header--item-inner{height:var(--vxe-ui-tabs-header-height-small)}.vxe-tabs.size--small .vxe-tabs-header--active-line.type--card{height:var(--vxe-ui-tabs-header-height-small)}.vxe-tabs.size--small .vxe-tabs-header--active-line.type--border-card{height:calc(var(--vxe-ui-tabs-header-height-small) + 1px);line-height:calc(var(--vxe-ui-tabs-header-height-small) + 1px)}.vxe-tabs.size--small .vxe-tabs-header--wrapper.pos--bottom,.vxe-tabs.size--small .vxe-tabs-header--wrapper.pos--top{height:var(--vxe-ui-tabs-header-height-small)}.vxe-tabs.size--small .vxe-tabs--card .vxe-tabs-header--item-inner,.vxe-tabs.size--small .vxe-tabs--round-card .vxe-tabs-header--item-inner{height:calc(var(--vxe-ui-tabs-header-height-small) - 1px)}.vxe-tabs.size--small .vxe-tabs-header--prefix.pos--bottom,.vxe-tabs.size--small .vxe-tabs-header--prefix.pos--top,.vxe-tabs.size--small .vxe-tabs-header--suffix.pos--bottom,.vxe-tabs.size--small .vxe-tabs-header--suffix.pos--top{height:var(--vxe-ui-tabs-header-height-small)}.vxe-tabs.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-tabs.size--mini .vxe-tabs-header--item-inner{height:var(--vxe-ui-tabs-header-height-mini)}.vxe-tabs.size--mini .vxe-tabs-header--active-line.type--card{height:var(--vxe-ui-tabs-header-height-mini)}.vxe-tabs.size--mini .vxe-tabs-header--active-line.type--border-card{height:calc(var(--vxe-ui-tabs-header-height-mini) + 1px);line-height:calc(var(--vxe-ui-tabs-header-height-mini) + 1px)}.vxe-tabs.size--mini .vxe-tabs-header--wrapper.pos--bottom,.vxe-tabs.size--mini .vxe-tabs-header--wrapper.pos--top{height:var(--vxe-ui-tabs-header-height-mini)}.vxe-tabs.size--mini .vxe-tabs--card .vxe-tabs-header--item-inner,.vxe-tabs.size--mini .vxe-tabs--round-card .vxe-tabs-header--item-inner{height:calc(var(--vxe-ui-tabs-header-height-mini) - 1px)}.vxe-tabs.size--mini .vxe-tabs-header--prefix.pos--bottom,.vxe-tabs.size--mini .vxe-tabs-header--prefix.pos--top,.vxe-tabs.size--mini .vxe-tabs-header--suffix.pos--bottom,.vxe-tabs.size--mini .vxe-tabs-header--suffix.pos--top{height:var(--vxe-ui-tabs-header-height-mini)}

package/es/tag/index.js

@@ -0,0 +1,12 @@
+import { VxeUI } from '@vxe-ui/core';
+import { dynamicApp } from '../dynamics';
+import VxeTagComponent from './src/tag';
+export const VxeTag = Object.assign({}, VxeTagComponent, {
+    install(app) {
+        app.component(VxeTagComponent.name, VxeTagComponent);
+    }
+});
+dynamicApp.use(VxeTag);
+VxeUI.component(VxeTagComponent);
+export const Tag = VxeTag;
+export default VxeTag;

package/es/tag/src/tag.js

@@ -0,0 +1,177 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { getConfig, getIcon, createEvent, globalMixins, renderEmptyElement } from '../../ui';
+export default {
+    name: 'VxeTag',
+    mixins: [
+        globalMixins.sizeMixin,
+        globalMixins.permissionMixin
+    ],
+    props: {
+        border: {
+            type: Boolean,
+            default: () => getConfig().tag.border
+        },
+        visible: {
+            type: Boolean,
+            default: null
+        },
+        status: String,
+        title: [String, Number],
+        icon: String,
+        closeIcon: {
+            type: String,
+            default: () => getConfig().tag.closeIcon
+        },
+        content: [String, Number],
+        round: Boolean,
+        closable: {
+            type: Boolean,
+            default: () => getConfig().tag.closable
+        },
+        color: String,
+        loading: Boolean,
+        size: {
+            type: String,
+            default: () => getConfig().tag.size || getConfig().size
+        }
+    },
+    data() {
+        const reactData = {
+            showTag: true
+        };
+        return {
+            xID: XEUtils.uniqueId(),
+            reactData
+        };
+    },
+    computed: Object.assign({}, {}),
+    watch: {
+        visible() {
+            const $xeTag = this;
+            $xeTag.updateVisible();
+        }
+    },
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeTag = this;
+            $xeTag.$emit(type, createEvent(evnt, { $tag: $xeTag }, params));
+        },
+        updateVisible() {
+            const $xeTag = this;
+            const props = $xeTag;
+            const reactData = $xeTag.reactData;
+            reactData.showTag = props.visible !== false;
+        },
+        clickEvent(evnt) {
+            const $xeTag = this;
+            const props = $xeTag;
+            const { loading } = props;
+            if (!loading) {
+                $xeTag.dispatchEvent('click', {}, evnt);
+            }
+        },
+        dblclickEvent(evnt) {
+            const $xeTag = this;
+            const props = $xeTag;
+            const { loading } = props;
+            if (!loading) {
+                $xeTag.dispatchEvent('dblclick', {}, evnt);
+            }
+        },
+        closeEvent(evnt) {
+            const $xeTag = this;
+            const props = $xeTag;
+            const reactData = $xeTag.reactData;
+            const { loading } = props;
+            if (!loading) {
+                const visible = !reactData.showTag;
+                reactData.showTag = visible;
+                $xeTag.$emit('update:visible', visible);
+                $xeTag.dispatchEvent('close', { visible }, evnt);
+            }
+        },
+        //
+        // Render
+        //
+        renderContent(h) {
+            const $xeTag = this;
+            const props = $xeTag;
+            const slots = $xeTag.$scopedSlots;
+            const { icon, content, closable, closeIcon, loading } = props;
+            const defaultSlot = slots.default;
+            const iconSlot = slots.icon;
+            const closeIconSlot = slots.closeIcon || slots['close-icon'];
+            return [
+                iconSlot || icon
+                    ? h('span', {
+                        class: 'vxe-tag--icon'
+                    }, iconSlot
+                        ? iconSlot({})
+                        : [
+                            h('i', {
+                                class: icon
+                            })
+                        ])
+                    : renderEmptyElement($xeTag),
+                h('span', {
+                    class: 'vxe-tag--content'
+                }, defaultSlot ? defaultSlot({}) : XEUtils.toValueString(content)),
+                loading || closable
+                    ? h('span', {
+                        class: loading ? 'vxe-tag--loading' : 'vxe-tag--close',
+                        on: {
+                            click: $xeTag.closeEvent
+                        }
+                    }, !loading && closeIconSlot
+                        ? closeIconSlot({})
+                        : [
+                            h('i', {
+                                class: loading ? getIcon().TAG_LOADING : (closeIcon || getIcon().TAG_CLOSE)
+                            })
+                        ])
+                    : renderEmptyElement($xeTag)
+            ];
+        },
+        renderVN(h) {
+            const $xeTag = this;
+            const props = $xeTag;
+            const reactData = $xeTag.reactData;
+            const { status, color, title, round, border, loading } = props;
+            const { showTag } = reactData;
+            const vSize = $xeTag.computeSize;
+            if (!showTag) {
+                return renderEmptyElement($xeTag);
+            }
+            return h('span', {
+                ref: 'refElem',
+                class: ['vxe-tag', {
+                        [`size--${vSize}`]: vSize,
+                        [`theme--${status}`]: status && !color,
+                        [`color--${color}`]: color && !status,
+                        'is--color': color,
+                        'is--round': round,
+                        'is--border': border,
+                        'is--loading': loading
+                    }],
+                attrs: {
+                    title
+                },
+                on: {
+                    click: $xeTag.clickEvent,
+                    dblclick: $xeTag.dblclickEvent
+                }
+            }, $xeTag.renderContent(h));
+        }
+    },
+    created() {
+        const $xeTag = this;
+        $xeTag.updateVisible();
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+};

package/es/tag/style.css

@@ -0,0 +1,187 @@
+.vxe-tag.color--gray {
+  color: #827d7d;
+  background-color: #f3f3f3;
+}
+.vxe-tag.color--orangered {
+  color: #877568;
+  background-color: #f4e9e1;
+}
+.vxe-tag.color--orange {
+  color: #9a9079;
+  background-color: #fff8e8;
+}
+.vxe-tag.color--green {
+  color: #627865;
+  background-color: #e7ffea;
+}
+.vxe-tag.color--blue {
+  color: #6b7b82;
+  background-color: #e8f8ff;
+}
+.vxe-tag.color--purple {
+  color: #8f7e97;
+  background-color: #f8e8ff;
+}
+.vxe-tag.color--pinkpurple {
+  color: #82687a;
+  background-color: #ffe8f8;
+}
+.vxe-tag.color--magenta {
+  color: #846084;
+  background-color: #f4c9f4;
+}
+.vxe-tag.color--chocolate {
+  color: #7f6e61;
+  background-color: #f7e2d2;
+}
+.vxe-tag.color--cyan {
+  color: #577474;
+  background-color: #d7f7f7;
+}
+
+.vxe-tag {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0.25em 0.5em;
+  color: var(--vxe-ui-font-color);
+  border-radius: var(--vxe-ui-base-border-radius);
+}
+.vxe-tag.theme--primary {
+  color: var(--vxe-ui-font-primary-color);
+  background-color: var(--vxe-ui-font-primary-tinge-color);
+}
+.vxe-tag.theme--primary.is--border {
+  border-color: var(--vxe-ui-font-primary-lighten-color);
+}
+.vxe-tag.theme--primary > .vxe-tag--close:hover {
+  background-color: var(--vxe-ui-font-primary-darken-color);
+}
+.vxe-tag.theme--success {
+  color: var(--vxe-ui-status-success-color);
+  background-color: var(--vxe-ui-status-success-tinge-color);
+}
+.vxe-tag.theme--success.is--border {
+  border-color: var(--vxe-ui-status-success-lighten-color);
+}
+.vxe-tag.theme--success > .vxe-tag--close:hover {
+  background-color: var(--vxe-ui-status-success-darken-color);
+}
+.vxe-tag.theme--info {
+  color: var(--vxe-ui-status-info-color);
+  background-color: var(--vxe-ui-status-info-tinge-color);
+}
+.vxe-tag.theme--info.is--border {
+  border-color: var(--vxe-ui-status-info-lighten-color);
+}
+.vxe-tag.theme--info > .vxe-tag--close:hover {
+  background-color: var(--vxe-ui-status-info-darken-color);
+}
+.vxe-tag.theme--warning {
+  color: var(--vxe-ui-status-warning-color);
+  background-color: var(--vxe-ui-status-warning-tinge-color);
+}
+.vxe-tag.theme--warning.is--border {
+  border-color: var(--vxe-ui-status-warning-lighten-color);
+}
+.vxe-tag.theme--warning > .vxe-tag--close:hover {
+  background-color: var(--vxe-ui-status-warning-darken-color);
+}
+.vxe-tag.theme--danger {
+  color: var(--vxe-ui-status-danger-color);
+  background-color: var(--vxe-ui-status-danger-tinge-color);
+}
+.vxe-tag.theme--danger.is--border {
+  border-color: var(--vxe-ui-status-danger-lighten-color);
+}
+.vxe-tag.theme--danger > .vxe-tag--close:hover {
+  background-color: var(--vxe-ui-status-danger-darken-color);
+}
+.vxe-tag.theme--error {
+  color: var(--vxe-ui-status-error-color);
+  background-color: var(--vxe-ui-status-error-tinge-color);
+}
+.vxe-tag.theme--error.is--border {
+  border-color: var(--vxe-ui-status-error-lighten-color);
+}
+.vxe-tag.theme--error > .vxe-tag--close:hover {
+  background-color: var(--vxe-ui-status-error-darken-color);
+}
+.vxe-tag.is--border {
+  border: 1px solid var(--vxe-ui-font-lighten-color);
+}
+.vxe-tag.is--round {
+  border-radius: 1em;
+}
+.vxe-tag.size--medium {
+  font-size: var(--vxe-ui-font-size-medium);
+}
+.vxe-tag.size--small {
+  font-size: var(--vxe-ui-font-size-small);
+}
+.vxe-tag.size--mini {
+  font-size: var(--vxe-ui-font-size-mini);
+}
+.vxe-tag + .vxe-tag {
+  margin-left: 8px;
+}
+
+.vxe-tag--icon {
+  padding: 0 0.1em;
+}
+
+.vxe-tag--content {
+  padding: 0 0.1em;
+}
+
+.vxe-tag--icon > i,
+.vxe-tag--loading > i {
+  font-size: 1em;
+  line-height: 1em;
+}
+
+.vxe-tag--close,
+.vxe-tag--loading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.1em 0;
+  border-radius: 50%;
+  width: 1.2em;
+  height: 1.2em;
+  line-height: 1em;
+}
+
+.vxe-tag--close {
+  transition: all 0.3s;
+}
+.vxe-tag--close:hover {
+  color: #fff;
+  background-color: var(--vxe-ui-font-darken-color);
+}
+.vxe-tag--close > i {
+  font-size: 0.7em;
+  line-height: 0.7em;
+}
+.vxe-tag--close {
+  cursor: pointer;
+}
+
+.vxe-tag--icon,
+.vxe-tag--close,
+.vxe-tag--loading {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.vxe-tag.size--medium {
+  font-size: var(--vxe-ui-font-size-medium);
+}
+.vxe-tag.size--small {
+  font-size: var(--vxe-ui-font-size-small);
+}
+.vxe-tag.size--mini {
+  font-size: var(--vxe-ui-font-size-mini);
+}

package/es/tag/style.min.css

@@ -0,0 +1 @@
+.vxe-tag.color--gray{color:#827d7d;background-color:#f3f3f3}.vxe-tag.color--orangered{color:#877568;background-color:#f4e9e1}.vxe-tag.color--orange{color:#9a9079;background-color:#fff8e8}.vxe-tag.color--green{color:#627865;background-color:#e7ffea}.vxe-tag.color--blue{color:#6b7b82;background-color:#e8f8ff}.vxe-tag.color--purple{color:#8f7e97;background-color:#f8e8ff}.vxe-tag.color--pinkpurple{color:#82687a;background-color:#ffe8f8}.vxe-tag.color--magenta{color:#846084;background-color:#f4c9f4}.vxe-tag.color--chocolate{color:#7f6e61;background-color:#f7e2d2}.vxe-tag.color--cyan{color:#577474;background-color:#d7f7f7}.vxe-tag{display:inline-flex;flex-direction:row;align-items:center;padding:.25em .5em;color:var(--vxe-ui-font-color);border-radius:var(--vxe-ui-base-border-radius)}.vxe-tag.theme--primary{color:var(--vxe-ui-font-primary-color);background-color:var(--vxe-ui-font-primary-tinge-color)}.vxe-tag.theme--primary.is--border{border-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-tag.theme--primary>.vxe-tag--close:hover{background-color:var(--vxe-ui-font-primary-darken-color)}.vxe-tag.theme--success{color:var(--vxe-ui-status-success-color);background-color:var(--vxe-ui-status-success-tinge-color)}.vxe-tag.theme--success.is--border{border-color:var(--vxe-ui-status-success-lighten-color)}.vxe-tag.theme--success>.vxe-tag--close:hover{background-color:var(--vxe-ui-status-success-darken-color)}.vxe-tag.theme--info{color:var(--vxe-ui-status-info-color);background-color:var(--vxe-ui-status-info-tinge-color)}.vxe-tag.theme--info.is--border{border-color:var(--vxe-ui-status-info-lighten-color)}.vxe-tag.theme--info>.vxe-tag--close:hover{background-color:var(--vxe-ui-status-info-darken-color)}.vxe-tag.theme--warning{color:var(--vxe-ui-status-warning-color);background-color:var(--vxe-ui-status-warning-tinge-color)}.vxe-tag.theme--warning.is--border{border-color:var(--vxe-ui-status-warning-lighten-color)}.vxe-tag.theme--warning>.vxe-tag--close:hover{background-color:var(--vxe-ui-status-warning-darken-color)}.vxe-tag.theme--danger{color:var(--vxe-ui-status-danger-color);background-color:var(--vxe-ui-status-danger-tinge-color)}.vxe-tag.theme--danger.is--border{border-color:var(--vxe-ui-status-danger-lighten-color)}.vxe-tag.theme--danger>.vxe-tag--close:hover{background-color:var(--vxe-ui-status-danger-darken-color)}.vxe-tag.theme--error{color:var(--vxe-ui-status-error-color);background-color:var(--vxe-ui-status-error-tinge-color)}.vxe-tag.theme--error.is--border{border-color:var(--vxe-ui-status-error-lighten-color)}.vxe-tag.theme--error>.vxe-tag--close:hover{background-color:var(--vxe-ui-status-error-darken-color)}.vxe-tag.is--border{border:1px solid var(--vxe-ui-font-lighten-color)}.vxe-tag.is--round{border-radius:1em}.vxe-tag.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-tag.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-tag.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-tag+.vxe-tag{margin-left:8px}.vxe-tag--icon{padding:0 .1em}.vxe-tag--content{padding:0 .1em}.vxe-tag--icon>i,.vxe-tag--loading>i{font-size:1em;line-height:1em}.vxe-tag--close,.vxe-tag--loading{display:inline-flex;align-items:center;justify-content:center;padding:.1em 0;border-radius:50%;width:1.2em;height:1.2em;line-height:1em}.vxe-tag--close{transition:all .3s}.vxe-tag--close:hover{color:#fff;background-color:var(--vxe-ui-font-darken-color)}.vxe-tag--close>i{font-size:.7em;line-height:.7em}.vxe-tag--close{cursor:pointer}.vxe-tag--close,.vxe-tag--icon,.vxe-tag--loading{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-tag.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-tag.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-tag.size--mini{font-size:var(--vxe-ui-font-size-mini)}

package/es/text/index.js

@@ -0,0 +1,12 @@
+import { VxeUI } from '@vxe-ui/core';
+import { dynamicApp } from '../dynamics';
+import VxeTextComponent from './src/text';
+export const VxeText = Object.assign({}, VxeTextComponent, {
+    install(app) {
+        app.component(VxeTextComponent.name, VxeTextComponent);
+    }
+});
+dynamicApp.use(VxeText);
+VxeUI.component(VxeTextComponent);
+export const Text = VxeText;
+export default VxeText;

package/es/text/src/text.js

@@ -0,0 +1,239 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { VxeUI, getConfig, getIcon, getI18n, createEvent, globalMixins } from '../../ui';
+export default {
+    name: 'VxeText',
+    mixins: [
+        globalMixins.sizeMixin,
+        globalMixins.permissionMixin
+    ],
+    props: {
+        status: String,
+        title: [String, Number],
+        icon: String,
+        prefixIcon: String,
+        suffixIcon: String,
+        loading: Boolean,
+        content: [String, Number],
+        clickToCopy: {
+            type: Boolean,
+            default: () => getConfig().text.clickToCopy
+        },
+        copyConfig: Object,
+        size: {
+            type: String,
+            default: () => getConfig().text.size || getConfig().size
+        }
+    },
+    data() {
+        const reactData = {};
+        return {
+            xID: XEUtils.uniqueId(),
+            reactData
+        };
+    },
+    computed: Object.assign(Object.assign({}, {}), { computeCopyOpts() {
+            const $xeText = this;
+            const props = $xeText;
+            return Object.assign({}, getConfig().text.copyConfig, props.copyConfig);
+        } }),
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeText = this;
+            $xeText.$emit(type, createEvent(evnt, { $text: $xeText }, params));
+        },
+        handleCopy(evnt) {
+            const $xeText = this;
+            const props = $xeText;
+            const { content } = props;
+            const copyOpts = $xeText.computeCopyOpts;
+            const { showMessage } = copyOpts;
+            const contentEl = $xeText.$refs.refContentElem;
+            const copyVal = (contentEl ? contentEl.textContent : '') || content;
+            if (copyVal) {
+                if (VxeUI.clipboard.copy(copyVal)) {
+                    if (showMessage && VxeUI.modal) {
+                        VxeUI.modal.message({
+                            content: getI18n('vxe.text.copySuccess'),
+                            status: 'success'
+                        });
+                    }
+                    $xeText.dispatchEvent('copy-success', {}, evnt);
+                }
+                else {
+                    if (showMessage && VxeUI.modal) {
+                        VxeUI.modal.message({
+                            content: getI18n('vxe.text.copyError'),
+                            status: 'error'
+                        });
+                    }
+                    $xeText.dispatchEvent('copy-error', {}, evnt);
+                }
+            }
+        },
+        clickIconEvent(evnt) {
+            const $xeText = this;
+            const props = $xeText;
+            const { clickToCopy } = props;
+            const copyOpts = $xeText.computeCopyOpts;
+            if (clickToCopy && copyOpts.trigger !== 'dblclick') {
+                $xeText.handleCopy(evnt);
+            }
+        },
+        dblclickIconEvent(evnt) {
+            const $xeText = this;
+            const props = $xeText;
+            const { clickToCopy } = props;
+            const copyOpts = $xeText.computeCopyOpts;
+            if (clickToCopy && copyOpts.trigger === 'dblclick') {
+                $xeText.handleCopy(evnt);
+            }
+        },
+        clickEvent(evnt) {
+            const $xeText = this;
+            const props = $xeText;
+            const { loading } = props;
+            if (!loading) {
+                $xeText.dispatchEvent('click', {}, evnt);
+            }
+        },
+        dblclickEvent(evnt) {
+            const $xeText = this;
+            const props = $xeText;
+            const { loading } = props;
+            if (!loading) {
+                $xeText.dispatchEvent('dblclick', {}, evnt);
+            }
+        },
+        prefixEvent(evnt) {
+            const $xeText = this;
+            const props = $xeText;
+            const { loading } = props;
+            if (!loading) {
+                $xeText.dispatchEvent('prefix-click', {}, evnt);
+            }
+        },
+        suffixEvent(evnt) {
+            const $xeText = this;
+            const props = $xeText;
+            const { loading } = props;
+            if (!loading) {
+                $xeText.dispatchEvent('suffix-click', {}, evnt);
+            }
+        },
+        //
+        // Render
+        //
+        renderCopyIcon(h) {
+            const $xeText = this;
+            const copyOpts = $xeText.computeCopyOpts;
+            const { icon, status } = copyOpts;
+            return h('span', {
+                key: 'ci',
+                class: ['vxe-text--copy-icon', {
+                        [`theme--${status}`]: status
+                    }],
+                on: {
+                    click: $xeText.clickIconEvent,
+                    dblclick: $xeText.dblclickIconEvent
+                }
+            }, [
+                h('i', {
+                    class: icon || getIcon().TEXT_COPY
+                })
+            ]);
+        },
+        renderContent(h) {
+            const $xeText = this;
+            const props = $xeText;
+            const slots = $xeText.$scopedSlots;
+            const { loading, icon, prefixIcon, suffixIcon, clickToCopy, content } = props;
+            const copyOpts = $xeText.computeCopyOpts;
+            const defaultSlot = slots.default;
+            const prefixIconSlot = slots.prefixIcon || slots['prefix-icon'] || slots.icon;
+            const suffixIconSlot = slots.suffixIcon || slots['suffix-icon'];
+            const copyToRight = copyOpts.layout === 'right';
+            const contVNs = [];
+            if (loading) {
+                contVNs.push(h('span', {
+                    key: 'lg',
+                    class: 'vxe-text--loading'
+                }, [
+                    h('i', {
+                        class: getIcon().TEXT_LOADING
+                    })
+                ]));
+            }
+            else if (clickToCopy && !copyToRight) {
+                contVNs.push($xeText.renderCopyIcon(h));
+            }
+            if (prefixIcon || icon) {
+                contVNs.push(h('span', {
+                    key: 'si',
+                    class: 'vxe-text--prefix-icon',
+                    on: {
+                        click: $xeText.prefixEvent
+                    }
+                }, prefixIconSlot
+                    ? prefixIconSlot({})
+                    : [
+                        h('i', {
+                            class: prefixIcon || icon
+                        })
+                    ]));
+            }
+            contVNs.push(h('span', {
+                key: 'ct',
+                ref: 'refContentElem',
+                class: 'vxe-text--content',
+                on: {
+                    click: $xeText.clickEvent,
+                    dblclick: $xeText.dblclickEvent
+                }
+            }, defaultSlot ? defaultSlot({}) : XEUtils.toValueString(content)));
+            if (suffixIcon) {
+                contVNs.push(h('span', {
+                    key: 'si',
+                    class: 'vxe-text--suffix-icon',
+                    on: {
+                        click: $xeText.suffixEvent
+                    }
+                }, suffixIconSlot
+                    ? suffixIconSlot({})
+                    : [
+                        h('i', {
+                            class: suffixIcon
+                        })
+                    ]));
+            }
+            if (clickToCopy && copyToRight && !loading) {
+                contVNs.push($xeText.renderCopyIcon(h));
+            }
+            return contVNs;
+        },
+        renderVN(h) {
+            const $xeText = this;
+            const props = $xeText;
+            const { loading, status, title, clickToCopy } = props;
+            const vSize = $xeText.computeSize;
+            return h('span', {
+                ref: 'refElem',
+                class: ['vxe-text', {
+                        [`size--${vSize}`]: vSize,
+                        [`theme--${status}`]: status,
+                        'is--copy': clickToCopy,
+                        'is--loading': loading
+                    }],
+                attrs: {
+                    title
+                }
+            }, $xeText.renderContent(h));
+        }
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+};