vue-devui 1.0.0-rc.8 → 1.0.0-rc.9

package/table/style.css

@@ -1 +1 @@
-.sort-clickable{cursor:pointer;position:absolute;top:-16px;left:50%;transform:translate(-50%);padding:8px;line-height:20px}.sort-icon-default>svg g use{fill:var(--devui-dividing-line, #dfe1e6)}.sort-icon-default>svg g polygon{fill:var(--devui-icon-bg, #ffffff)}.sort-icon-default:hover>svg g use{fill:var(--devui-icon-fill-active-hover, #526ecc)}.sort-icon-asc>svg g use,.sort-icon-desc>svg g use{fill:var(--devui-icon-fill-active, #5e7ce0)}.sort-icon-asc>svg g polygon,.sort-icon-desc>svg g polygon{fill:var(--devui-icon-bg, #ffffff)}.sort-icon-asc:hover>svg g use,.sort-icon-desc:hover>svg g use{fill:var(--devui-icon-fill-active-hover, #526ecc)}.sort-icon-asc>svg g polygon:last-of-type{opacity:.3}.sort-icon-desc>svg g polygon:first-of-type{opacity:.3}@keyframes d-overlay-fade{0%{opacity:0}to{opacity:1}}.devui-overlay__fade-enter{opacity:0}.devui-overlay__fade-enter-active{animation-name:d-overlay-fade;animation-duration:.3s}.devui-overlay__fade-leave{opacity:1}.devui-overlay__fade-leave-active{animation-name:d-overlay-fade;animation-duration:.3s;animation-direction:reverse}.devui-overlay__background{position:fixed;top:0;left:0;height:100vh;width:100vw;display:flex}.devui-overlay__background--color{background:rgba(0,0,0,.4)}.devui-overlay__background .devui-overlay{position:relative;z-index:1000;pointer-events:auto}.devui-overlay__background--disabled{pointer-events:none}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-connected-overlay, 0 2px 8px 0) var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1000}.devui-flexible-overlay__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}.devui-dropdown__toggle{display:inline-block}.devui-dropdown span.icon-chevron-down,.devui-dropdown span.icon-select-arrow{display:inline-block;vertical-align:text-top}.devui-dropdown__menu-wrap .devui-dropdown-menu{width:100%}.devui-dropdown-animation span.icon-chevron-down,.devui-dropdown-animation span.icon-select-arrow{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-dropdown.open span.icon-chevron-down,.devui-dropdown.open span.icon-select-arrow{transform:rotate(180deg)}.fade-in-top{animation:fadeInTop .2s cubic-bezier(.16,.75,.5,1)}.fade-in-bottom{animation:fadeInBottom .2s cubic-bezier(.16,.75,.5,1)}@keyframes fadeInTop{0%{opacity:.8;transform:scaleY(.8) translateY(4px)}to{opacity:1;transform:scaleY(.9999) translateY(0)}}@keyframes fadeInBottom{0%{opacity:.8;transform:scaleY(.8) translateY(-4px)}to{opacity:1;transform:scaleY(.9999) translateY(0)}}.devui-dropdown-fade-bottom-enter-from,.devui-dropdown-fade-bottom-leave-to{opacity:.8;transform:scaleY(.8) translateY(-4px)}.devui-dropdown-fade-bottom-enter-to,.devui-dropdown-fade-bottom-leave-from{opacity:1;transform:scaleY(.9999) translateY(0)}.devui-dropdown-fade-bottom-enter-active{transition:transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)}.devui-dropdown-fade-bottom-leave-active{transition:transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)}.devui-dropdown-fade-top-enter-from,.devui-dropdown-fade-top-leave-to{opacity:.8;transform:scaleY(.8) translateY(4px)}.devui-dropdown-fade-top-enter-to,.devui-dropdown-fade-top-leave-from{opacity:1;transform:scaleY(.9999) translateY(0)}.devui-dropdown-fade-top-enter-active{transition:transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)}.devui-dropdown-fade-top-leave-active{transition:transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)}@keyframes devui-busy-spinner-anim{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.5)}to{transform:rotate(360deg) scale(1)}}.devui-loading__mask{position:absolute;left:0;right:0;bottom:0;top:0;background-color:var(--devui-line, #adb0b8);opacity:.3}.devui-loading__wrapper{text-align:center}.devui-loading--full{position:fixed;left:0;right:0;bottom:0;top:0;z-index:9999}.devui-loading--hidden{overflow:hidden}.devui-loading__text{margin-left:10px}.devui-loading__area{position:absolute;transform:translate(-50%,-50%);padding:12px 14px;background:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius-card, 6px)}.devui-loading__busy-default-spinner{position:relative;display:inline-block;width:15px;height:15px;animation:devui-busy-spinner-anim 1s linear infinite}.devui-loading__busy-default-spinner div{position:absolute;left:44.5%;top:37%;width:6px;height:6px;border-radius:50%}.devui-loading__busy-default-spinner .devui-loading__bar1{top:0;left:0;background:#5e7ce0;background:var(--devui-brand, #5e7ce0)}.devui-loading__busy-default-spinner .devui-loading__bar2{top:0;left:9px;background:#859bff;background:var(--devui-brand-foil, #859bff)}.devui-loading__busy-default-spinner .devui-loading__bar3{top:9px;left:0;background:#859bff;background:var(--devui-brand-foil, #859bff)}.devui-loading__busy-default-spinner .devui-loading__bar4{top:9px;left:9px;background:#5e7ce0;background:var(--devui-brand, #5e7ce0)}.devui-button{padding:0 20px;font-size:var(--devui-font-size-md, 12px);height:28px;line-height:1.5;border:none;border-radius:var(--devui-border-radius, 2px);border-width:1px;background-color:transparent}.devui-button:hover{cursor:pointer}.devui-button:disabled{cursor:not-allowed}.devui-button--is-loading{pointer-events:none}.devui-button--solid{color:var(--devui-light-text, #ffffff);min-width:64px}.devui-button--solid--secondary{color:var(--devui-text, #252b3a);background-color:var(--devui-dividing-line, #dfe1e6)}.devui-button--solid--secondary:hover{opacity:.8}.devui-button--solid--secondary:focus{opacity:.8}.devui-button--solid--secondary:active{opacity:.8}.devui-button--solid--secondary:disabled{opacity:.8}.devui-button--solid--primary{background-color:var(--devui-primary, #5e7ce0)}.devui-button--solid--primary:hover{background-color:var(--devui-primary-hover, #7693f5)}.devui-button--solid--primary:focus{background-color:var(--devui-primary-hover, #7693f5)}.devui-button--solid--primary:active{background-color:var(--devui-primary-active, #344899)}.devui-button--solid--primary:disabled{color:var(--devui-light-text, #ffffff);background:var(--devui-primary-disabled, #beccfa);border:none}.devui-button--solid--danger{background-color:var(--devui-contrast, #c7000b)}.devui-button--solid--danger:hover{background-color:var(--devui-contrast-hover, #d64a52)}.devui-button--solid--danger:focus{background-color:var(--devui-contrast-hover, #d64a52)}.devui-button--solid--danger:active{background-color:var(--devui-contrast-active, #b12220)}.devui-button--solid--danger:disabled{background-color:var(--devui-contrast-disabled, #ffbcba)}.devui-button--outline{background-color:var(--devui-block, #ffffff);border-style:solid}.devui-button--outline--secondary{color:var(--devui-text, #252b3a);border-color:var(--devui-line, #adb0b8)}.devui-button--outline--secondary:hover{color:var(--devui-brand-active, #526ecc);border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-button--outline--secondary:focus{color:var(--devui-brand-active, #526ecc);border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-button--outline--secondary:active{color:var(--devui-brand-active, #526ecc);border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-button--outline--secondary:disabled{color:var(--devui-disabled-text, #adb0b8);border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-button--outline--primary{color:var(--devui-brand-active, #526ecc);border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-button--outline--primary:hover{color:var(--devui-brand-active-focus, #344899);border-color:var(--devui-form-control-line-active-hover, #344899)}.devui-button--outline--primary:focus{color:var(--devui-brand-active-focus, #344899);border-color:var(--devui-form-control-line-active-hover, #344899)}.devui-button--outline--primary:active{color:var(--devui-brand-active-focus, #344899);border-color:var(--devui-form-control-line-active-hover, #344899)}.devui-button--outline--primary:disabled{opacity:.8;color:var(--devui-brand-active, #526ecc);border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-button--outline--danger{color:var(--devui-contrast, #c7000b);border-color:var(--devui-contrast, #c7000b)}.devui-button--outline--danger:hover,.devui-button--outline--danger:focus,.devui-button--outline--danger:active,.devui-button--outline--danger:disabled{opacity:.8}.devui-button--text{padding:0}.devui-button--text--secondary{color:var(--devui-text, #252b3a)}.devui-button--text--secondary:hover{color:var(--devui-list-item-hover-text, #526ecc)}.devui-button--text--secondary:focus{color:var(--devui-list-item-hover-text, #526ecc)}.devui-button--text--secondary:active{color:var(--devui-list-item-hover-text, #526ecc)}.devui-button--text--secondary:disabled{color:var(--devui-disabled-text, #adb0b8)}.devui-button--text--primary{color:var(--devui-brand-active, #526ecc)}.devui-button--text--primary:hover{color:var(--devui-brand-active-focus, #344899)}.devui-button--text--primary:focus{color:var(--devui-brand-active-focus, #344899)}.devui-button--text--primary:active{color:var(--devui-brand-active-focus, #344899)}.devui-button--text--primary:disabled{opacity:.8}.devui-button--text--danger{color:var(--devui-contrast, #c7000b)}.devui-button--text--danger:hover,.devui-button--text--danger:focus,.devui-button--text--danger:active,.devui-button--text--danger:disabled{opacity:.8}.devui-button--xs{padding:0 4px;height:24px;font-size:var(--devui-font-size-sm, 12px);min-width:48px}.devui-button--sm{padding:0 16px;height:24px;font-size:var(--devui-font-size-sm, 12px);min-width:56px}.devui-button--lg{padding:0 24px;height:32px;font-size:var(--devui-font-size-lg, 14px);min-width:72px}.devui-button.devui-button__icon:not(.devui-button--solid):hover,.devui-button.devui-button__icon:not(.devui-button--solid):focus{border:1px solid var(--devui-list-item-hover-bg, #f2f5fc);background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-button.devui-button__icon:not(.devui-button--solid):disabled{background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap{color:var(--devui-text, #252b3a)}.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap .devui-button__icon-fix{color:var(--devui-text-weak, #575d6c)}.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap:hover{color:var(--devui-list-item-hover-text, #526ecc)}.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap:hover .devui-button__icon-fix{color:var(--devui-icon-fill-active, #5e7ce0)}.devui-button--circle{border-radius:100%}.devui-button--round{border-radius:20px}.devui-loading .devui-loading-default-spinner div{background-color:var(--devui-text, #252b3a)}.devui-button{transition:background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),border-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));white-space:nowrap;display:inline-flex;align-items:center;justify-content:center}.devui-button.devui-button__icon{padding:8px;line-height:1em}.devui-button.devui-button__icon:not(.devui-button--circle){border:1px solid transparent}.devui-button.devui-button__icon.devui-button--xs,.devui-button.devui-button__icon.devui-button--sm{padding:4px;min-width:24px}.devui-button.devui-button__icon.devui-button--lg{min-width:32px}.devui-button.devui-button__icon.devui-button--lg .icon{font-size:var(--devui-font-size-icon, 16px)}.devui-button.devui-button__icon.devui-button--circle.devui-button--xs,.devui-button.devui-button__icon.devui-button--circle.devui-button--sm{width:24px}.devui-button.devui-button__icon.devui-button--circle.devui-button--md{min-width:28px;width:28px}.devui-button.devui-button__icon.devui-button--circle.devui-button--lg{width:32px}.devui-button:not(.devui-button__icon) .icon-fix{font-size:var(--devui-font-size-icon, 16px)}.devui-button__icon-fix{position:relative;font-size:var(--devui-font-size, 12px)}.button-content{display:inline-block;position:relative}.clear-right-5{margin-right:5px}.devui-button-group{display:flex}.devui-button-group>*{position:relative}.devui-button-group>*:not(:first-child),.devui-button-group>*:not(:first-child) .devui-button{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.devui-button-group>*:not(:last-child),.devui-button-group>*:not(:last-child) .devui-button{border-top-right-radius:0;border-bottom-right-radius:0}.devui-button-group>*:hover,.devui-button-group>*:active{z-index:1}.devui-button-group>*:focus-within{z-index:1}.devui-checkbox{position:relative;display:flex;display:-ms-flexbox;align-items:center;-ms-flex-align:center;height:100%;margin:0}.devui-checkbox .devui-checkbox__tick-wrap{position:absolute}.devui-checkbox .devui-checkbox__tick-wrap .devui-checkbox__tick{fill:var(--devui-light-text, #ffffff);stroke-dashoffset:50;opacity:0;transform:scale(0);transform-origin:50% 50%;transition:stroke-dashoffset .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.devui-checkbox.active:not(.half-checked) .devui-checkbox__tick{opacity:1;stroke-dashoffset:0;transform:scale(1);transition:stroke-dashoffset .3s cubic-bezier(.755,.05,.855,.06),opacity .2s cubic-bezier(.755,.05,.855,.06)}.devui-checkbox.active:not(.disabled) .devui-checkbox__material:not(.custom-color),.devui-checkbox.half-checked:not(.disabled) .devui-checkbox__material:not(.custom-color){border-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.active:not(.disabled) .devui-checkbox__material{background-size:100% 100%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material:not(.custom-color){background-size:0% 0%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material:not(.custom-color):hover{border-color:var(--devui-icon-fill-active, #5e7ce0)}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material.custom-color{background-size:0% 0%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.half-checked .devui-checkbox__material:not(.custom-color){background-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.half-checked .devui-checkbox__material:not(.custom-color)>.devui-checkbox__halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform .2s cubic-bezier(.755,.05,.855,.06);background-color:var(--devui-light-text, #ffffff)}.devui-checkbox.half-checked .devui-checkbox__material.custom-color>.devui-checkbox__halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform .2s cubic-bezier(.755,.05,.855,.06);background-color:var(--devui-light-text, #ffffff)}.devui-checkbox .devui-checkbox__material{text-align:initial;height:14px;width:14px;position:relative;user-select:none;border:1px solid var(--devui-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);background:linear-gradient(var(--devui-brand, #5e7ce0),var(--devui-brand, #5e7ce0)) no-repeat center/0%;margin-right:8px;vertical-align:text-bottom}.devui-checkbox .devui-checkbox__material.devui-checkbox__default-background{background-color:var(--devui-base-bg, #ffffff)}.devui-checkbox .devui-checkbox__material.devui-checkbox--no-label{margin-right:0}.devui-checkbox .devui-checkbox__material>.devui-checkbox__halfchecked-bg{display:inline-block;position:absolute;content:"";background-color:var(--devui-light-text, #ffffff);top:0;left:0;height:100%;width:100%;transform:scale(1);opacity:0}.devui-checkbox .devui-checkbox__material>svg{width:14px;height:14px}.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):focus,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover{background-color:var(--devui-icon-fill-active, #5e7ce0)}.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):focus,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover:active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover:focus{background-color:var(--devui-brand-active-focus, #344899)}.devui-checkbox__input{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.devui-checkbox label{position:relative;font-weight:400;height:16px;line-height:16px;cursor:pointer;color:var(--devui-text, #252b3a);margin:0;display:block}.devui-checkbox label>span{display:inline-block;box-sizing:content-box;vertical-align:top}.devui-checkbox.disabled label{cursor:not-allowed;color:var(--devui-disabled-text, #adb0b8)}.devui-checkbox.disabled .devui-checkbox__material{border-color:var(--devui-icon-fill-active-disabled, #beccfa);background-color:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-checkbox.disabled.unchecked .devui-checkbox__material{border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-checkbox.disabled.half-checked .devui-checkbox__material{background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-checkbox.disabled.half-checked .devui-checkbox__material .devui-checkbox__halfchecked-bg{transform:scale(.4288);background-color:var(--devui-disabled-text, #adb0b8);opacity:1}.devui-checkbox.disabled.active svg polygon{fill:var(--devui-light-text, #ffffff)}.devui-checkbox--no-animation{transition:none!important}.devui-checkbox__column-margin{height:28px;line-height:28px}.devui-checkbox__wrap .devui-checkbox label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:block}.devui-checkbox-list-inline{min-height:28px;line-height:28px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin:-8px 0 0}.devui-checkbox-list-inline div:not(:last-child){margin-right:20px}.devui-checkbox-list-inline>*{margin-top:8px}.devui-list{padding-bottom:4px;border-radius:var(--devui-border-radius, 2px);box-sizing:border-box;background-clip:padding-box;background-color:var(--devui-connected-overlay-bg, #ffffff);outline:none}.devui-list-item{display:flex;align-items:center;width:100%;height:36px;line-height:36px;padding:0 8px;color:var(--devui-text, #252b3a);box-sizing:border-box;cursor:pointer;transition:color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-list-item:hover{color:var(--devui-list-item-hover-text, #526ecc);background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-list-item:active{color:var(--devui-list-item-active-text, #ffffff);background-color:var(--devui-list-item-active-bg, #5e7ce0)}.filter-wrapper{width:200px;background-color:var(--devui-connected-overlay-bg, #ffffff);border-radius:var(--devui-border-radius, 2px)}.filter-wrapper .filter-all-check{padding:0 8px 4px;border-bottom:1px solid var(--devui-dividing-line, #dfe1e6)}.filter-wrapper .filter-multiple-menu{width:100%;padding:4px 8px;border-bottom:1px solid var(--devui-dividing-line, #dfe1e6)}.filter-wrapper .filter-operation{display:flex;justify-content:center;align-items:center;padding:0 8px;height:26px}.filter-wrapper .filter-single-menu{width:100%}.filter-wrapper .filter-item{display:flex;align-items:center;height:30px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.filter-icon{display:inline-block;vertical-align:middle;cursor:pointer;height:16px;margin-top:-1px}.filter-icon>svg g{fill:var(--devui-dividing-line, #dfe1e6)}.filter-icon:hover>svg g{fill:var(--devui-icon-fill-active-hover, #526ecc)}.filter-item-active{background:var(--devui-list-item-active-bg, #5e7ce0);color:var(--devui-list-item-active-text, #ffffff)}.filter-icon-active{visibility:visible!important}.filter-icon-active>svg g{fill:var(--devui-icon-fill-active, #5e7ce0)}.filter-icon-active:hover>svg g{fill:var(--devui-icon-fill-active-hover, #526ecc)}.devui-table__thead tr{border:none;background-color:var(--devui-base-bg, #ffffff)}.devui-table__thead tr th{display:table-cell;text-align:left;padding:0 0 0 20px;border:none;border-bottom:1px solid var(--devui-line, #adb0b8)}.devui-table__thead tr .sort-active,.devui-table__thead tr .filter-active{background-color:var(--devui-list-item-hover-bg, #f2f5fc);border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-table__thead .header-container{position:relative;display:flex;align-items:center;padding-right:8px}.devui-table__thead .header-container .title{display:inline-block;width:calc(100% - 18px);font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a);font-weight:700;line-height:36px;vertical-align:middle;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;cursor:default}.devui-table--header-bg thead.devui-table__thead tr{background:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-table__tbody tr{font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a);background-color:var(--devui-base-bg, #ffffff);border:none}.devui-table__tbody tr.hover-enabled:hover{background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-table__tbody tr td{background-clip:padding-box;vertical-align:middle;word-wrap:break-word;word-break:normal;line-height:24px;border:none;border-bottom:1px solid var(--devui-dividing-line, #dfe1e6)}.devui-table--sticky-cell{position:sticky;z-index:5;background-color:inherit}.devui-table--sticky-cell.left{box-shadow:#0000000d var(--devui-shadow-length-slide-right, 2px 0 8px 0)}.devui-table--sticky-cell.right{box-shadow:#0000000d var(--devui-shadow-length-slide-left, -2px 0 8px 0)}.devui-table{position:relative;width:100%;overflow-x:auto;padding-top:8px}.devui-table .hidden-columns{position:absolute;visibility:hidden;z-index:-1}.devui-table__view{display:table;table-layout:fixed;width:100%;border-spacing:0;border-collapse:collapse;border:none;margin:0;padding:0}.devui-table--striped tbody tr:nth-child(even){background-color:var(--devui-list-item-strip-bg, #f2f5fc)}.devui-table__empty{width:100%;font-size:var(--devui-font-size, 12px);text-align:center}.devui-table__fix-header{display:flex;flex-direction:column;position:relative;height:100%}.devui-table__scroll-view{flex:1;overflow:scroll}.devui-table--layout-auto{table-layout:auto}.devui-table--sm tbody>tr>td{padding:7px 20px 8px}.devui-table--sm tbody>tr>td.devui-table__checkable-cell{padding:8px}.devui-table--sm thead>tr>th.devui-table__checkable-cell{padding:8px}.devui-table--md tbody>tr>td{padding:11px 20px 12px}.devui-table--md thead>tr>th.devui-table__checkable-cell{padding:8px 20px}.devui-table--lg tbody>tr>td{padding:15px 20px 16px}.devui-table--lg thead>tr>th.devui-table__checkable-cell{padding:8px 20px}.devui-table--borderless tbody>tr>td{border-bottom:none}.devui-table--bordered tr{border-left:1px solid var(--devui-dividing-line, #dfe1e6)}.devui-table--bordered tr td{border-right:1px solid var(--devui-dividing-line, #dfe1e6)}.devui-table--bordered thead tr th:first-child{border-left:1px solid var(--devui-dividing-line, #dfe1e6)}.devui-table--bordered thead tr th{border-top:1px solid var(--devui-dividing-line, #dfe1e6);border-right:1px solid var(--devui-dividing-line, #dfe1e6)}
+.sort-clickable{cursor:pointer;position:absolute;top:-16px;left:50%;transform:translate(-50%);padding:8px;line-height:20px}.sort-icon-default>svg g use{fill:var(--devui-dividing-line, #dfe1e6)}.sort-icon-default>svg g polygon{fill:var(--devui-icon-bg, #ffffff)}.sort-icon-default:hover>svg g use{fill:var(--devui-icon-fill-active-hover, #526ecc)}.sort-icon-asc>svg g use,.sort-icon-desc>svg g use{fill:var(--devui-icon-fill-active, #5e7ce0)}.sort-icon-asc>svg g polygon,.sort-icon-desc>svg g polygon{fill:var(--devui-icon-bg, #ffffff)}.sort-icon-asc:hover>svg g use,.sort-icon-desc:hover>svg g use{fill:var(--devui-icon-fill-active-hover, #526ecc)}.sort-icon-asc>svg g polygon:last-of-type{opacity:.3}.sort-icon-desc>svg g polygon:first-of-type{opacity:.3}@keyframes d-overlay-fade{0%{opacity:0}to{opacity:1}}.devui-overlay__fade-enter{opacity:0}.devui-overlay__fade-enter-active{animation-name:d-overlay-fade;animation-duration:.3s}.devui-overlay__fade-leave{opacity:1}.devui-overlay__fade-leave-active{animation-name:d-overlay-fade;animation-duration:.3s;animation-direction:reverse}.devui-overlay__background{position:fixed;top:0;left:0;height:100vh;width:100vw;display:flex}.devui-overlay__background--color{background:rgba(0,0,0,.4)}.devui-overlay__background .devui-overlay{position:relative;z-index:1000;pointer-events:auto}.devui-overlay__background--disabled{pointer-events:none}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-connected-overlay, 0 2px 8px 0) var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1000}.devui-flexible-overlay__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}.devui-dropdown span.icon-chevron-down,.devui-dropdown span.icon-select-arrow{display:inline-block;vertical-align:text-top}.devui-dropdown__menu-wrap .devui-dropdown-menu{width:100%}.devui-dropdown-animation span.icon-chevron-down,.devui-dropdown-animation span.icon-select-arrow{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-dropdown.open span.icon-chevron-down,.devui-dropdown.open span.icon-select-arrow{transform:rotate(180deg)}.fade-in-top{animation:fadeInTop .2s cubic-bezier(.16,.75,.5,1)}.fade-in-bottom{animation:fadeInBottom .2s cubic-bezier(.16,.75,.5,1)}@keyframes fadeInTop{0%{opacity:.8;transform:scaleY(.8) translateY(4px)}to{opacity:1;transform:scaleY(.9999) translateY(0)}}@keyframes fadeInBottom{0%{opacity:.8;transform:scaleY(.8) translateY(-4px)}to{opacity:1;transform:scaleY(.9999) translateY(0)}}.devui-dropdown--fade-bottom-enter-from,.devui-dropdown--fade-bottom-leave-to{opacity:.8;transform:scaleY(.8) translateY(-4px)}.devui-dropdown--fade-bottom-enter-to,.devui-dropdown--fade-bottom-leave-from{opacity:1;transform:scaleY(.9999) translateY(0)}.devui-dropdown--fade-bottom-enter-active{transition:transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)}.devui-dropdown--fade-bottom-leave-active{transition:transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)}.devui-dropdown--fade-top-enter-from,.devui-dropdown--fade-top-leave-to{opacity:.8;transform:scaleY(.8) translateY(4px)}.devui-dropdown--fade-top-enter-to,.devui-dropdown--fade-top-leave-from{opacity:1;transform:scaleY(.9999) translateY(0)}.devui-dropdown--fade-top-enter-active{transition:transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)}.devui-dropdown--fade-top-leave-active{transition:transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)}.devui-svg-icon{vertical-align:middle}@keyframes devui-busy-spinner-anim{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.5)}to{transform:rotate(360deg) scale(1)}}.devui-loading__mask{position:absolute;left:0;right:0;bottom:0;top:0;background-color:var(--devui-line, #adb0b8);opacity:.3}.devui-loading__wrapper{text-align:center}.devui-loading--full{position:fixed;left:0;right:0;bottom:0;top:0;z-index:9999}.devui-loading--hidden{overflow:hidden}.devui-loading__text{margin-left:10px}.devui-loading__area{position:absolute;transform:translate(-50%,-50%);padding:12px 14px;background:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius-card, 6px)}.devui-loading__busy-default-spinner{position:relative;display:inline-block;width:15px;height:15px;animation:devui-busy-spinner-anim 1s linear infinite}.devui-loading__busy-default-spinner div{position:absolute;left:44.5%;top:37%;width:6px;height:6px;border-radius:50%}.devui-loading__busy-default-spinner .devui-loading__bar1{top:0;left:0;background:#5e7ce0;background:var(--devui-brand, #5e7ce0)}.devui-loading__busy-default-spinner .devui-loading__bar2{top:0;left:9px;background:#859bff;background:var(--devui-brand-foil, #859bff)}.devui-loading__busy-default-spinner .devui-loading__bar3{top:9px;left:0;background:#859bff;background:var(--devui-brand-foil, #859bff)}.devui-loading__busy-default-spinner .devui-loading__bar4{top:9px;left:9px;background:#5e7ce0;background:var(--devui-brand, #5e7ce0)}.devui-button{padding:0 20px;font-size:var(--devui-font-size-md, 12px);height:28px;line-height:1.5;border:none;border-radius:var(--devui-border-radius, 2px);border-width:1px;background-color:transparent}.devui-button:hover{cursor:pointer}.devui-button:disabled{cursor:not-allowed}.devui-button--is-loading{pointer-events:none}.devui-button--solid{color:var(--devui-light-text, #ffffff);min-width:64px}.devui-button--solid--secondary{color:var(--devui-text, #252b3a);background-color:var(--devui-dividing-line, #dfe1e6)}.devui-button--solid--secondary:hover{opacity:.8}.devui-button--solid--secondary:focus{opacity:.8}.devui-button--solid--secondary:active{opacity:.8}.devui-button--solid--secondary:disabled{opacity:.8}.devui-button--solid--primary{background-color:var(--devui-primary, #5e7ce0)}.devui-button--solid--primary:hover{background-color:var(--devui-primary-hover, #7693f5)}.devui-button--solid--primary:focus{background-color:var(--devui-primary-hover, #7693f5)}.devui-button--solid--primary:active{background-color:var(--devui-primary-active, #344899)}.devui-button--solid--primary:disabled{color:var(--devui-light-text, #ffffff);background:var(--devui-primary-disabled, #beccfa);border:none}.devui-button--solid--danger{background-color:var(--devui-contrast, #c7000b)}.devui-button--solid--danger:hover{background-color:var(--devui-contrast-hover, #d64a52)}.devui-button--solid--danger:focus{background-color:var(--devui-contrast-hover, #d64a52)}.devui-button--solid--danger:active{background-color:var(--devui-contrast-active, #b12220)}.devui-button--solid--danger:disabled{background-color:var(--devui-contrast-disabled, #ffbcba)}.devui-button--outline{background-color:var(--devui-block, #ffffff);border-style:solid}.devui-button--outline--secondary{color:var(--devui-text, #252b3a);border-color:var(--devui-line, #adb0b8)}.devui-button--outline--secondary:hover{color:var(--devui-brand-active, #526ecc);border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-button--outline--secondary:focus{color:var(--devui-brand-active, #526ecc);border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-button--outline--secondary:active{color:var(--devui-brand-active, #526ecc);border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-button--outline--secondary:disabled{color:var(--devui-disabled-text, #adb0b8);border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-button--outline--primary{color:var(--devui-brand-active, #526ecc);border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-button--outline--primary:hover{color:var(--devui-brand-active-focus, #344899);border-color:var(--devui-form-control-line-active-hover, #344899)}.devui-button--outline--primary:focus{color:var(--devui-brand-active-focus, #344899);border-color:var(--devui-form-control-line-active-hover, #344899)}.devui-button--outline--primary:active{color:var(--devui-brand-active-focus, #344899);border-color:var(--devui-form-control-line-active-hover, #344899)}.devui-button--outline--primary:disabled{opacity:.8;color:var(--devui-brand-active, #526ecc);border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-button--outline--danger{color:var(--devui-contrast, #c7000b);border-color:var(--devui-contrast, #c7000b)}.devui-button--outline--danger:hover,.devui-button--outline--danger:focus,.devui-button--outline--danger:active,.devui-button--outline--danger:disabled{opacity:.8}.devui-button--text{padding:0}.devui-button--text--secondary{color:var(--devui-text, #252b3a)}.devui-button--text--secondary:hover{color:var(--devui-list-item-hover-text, #526ecc)}.devui-button--text--secondary:focus{color:var(--devui-list-item-hover-text, #526ecc)}.devui-button--text--secondary:active{color:var(--devui-list-item-hover-text, #526ecc)}.devui-button--text--secondary:disabled{color:var(--devui-disabled-text, #adb0b8)}.devui-button--text--primary{color:var(--devui-brand-active, #526ecc)}.devui-button--text--primary:hover{color:var(--devui-brand-active-focus, #344899)}.devui-button--text--primary:focus{color:var(--devui-brand-active-focus, #344899)}.devui-button--text--primary:active{color:var(--devui-brand-active-focus, #344899)}.devui-button--text--primary:disabled{opacity:.8}.devui-button--text--danger{color:var(--devui-contrast, #c7000b)}.devui-button--text--danger:hover,.devui-button--text--danger:focus,.devui-button--text--danger:active,.devui-button--text--danger:disabled{opacity:.8}.devui-button--xs{padding:0 4px;height:24px;font-size:var(--devui-font-size-sm, 12px);min-width:48px}.devui-button--sm{padding:0 16px;height:24px;font-size:var(--devui-font-size-sm, 12px);min-width:56px}.devui-button--lg{padding:0 24px;height:32px;font-size:var(--devui-font-size-lg, 14px);min-width:72px}.devui-button.devui-button__icon:not(.devui-button--solid):hover,.devui-button.devui-button__icon:not(.devui-button--solid):focus{border:1px solid var(--devui-list-item-hover-bg, #f2f5fc);background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-button.devui-button__icon:not(.devui-button--solid):disabled{background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap{color:var(--devui-text, #252b3a)}.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap .devui-button__icon-fix{color:var(--devui-text-weak, #575d6c)}.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap:hover{color:var(--devui-list-item-hover-text, #526ecc)}.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap:hover .devui-button__icon-fix{color:var(--devui-icon-fill-active, #5e7ce0)}.devui-button:not(:disabled).devui-button--text.devui-button__icon-wrap:hover .button-content{color:var(--devui-brand, #5e7ce0)}.devui-button--circle{border-radius:100%}.devui-button--round{border-radius:20px}.devui-loading .devui-loading-default-spinner div{background-color:var(--devui-text, #252b3a)}.devui-button{transition:background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),border-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));white-space:nowrap;display:inline-flex;align-items:center;justify-content:center}.devui-button.devui-button__icon{padding:8px;line-height:1em}.devui-button.devui-button__icon:not(.devui-button--circle){border:1px solid transparent}.devui-button.devui-button__icon.devui-button--xs,.devui-button.devui-button__icon.devui-button--sm{padding:4px;min-width:24px}.devui-button.devui-button__icon.devui-button--lg{min-width:32px}.devui-button.devui-button__icon.devui-button--lg .icon{font-size:var(--devui-font-size-icon, 16px)}.devui-button.devui-button__icon.devui-button--circle.devui-button--xs,.devui-button.devui-button__icon.devui-button--circle.devui-button--sm{width:24px}.devui-button.devui-button__icon.devui-button--circle.devui-button--md{min-width:28px;width:28px}.devui-button.devui-button__icon.devui-button--circle.devui-button--lg{width:32px}.devui-button:not(.devui-button__icon) .icon-fix{font-size:var(--devui-font-size-icon, 16px)}.devui-button__icon-fix{position:relative;font-size:var(--devui-font-size, 12px)}.button-content{display:inline-block;position:relative}.clear-right-5{margin-right:5px}.devui-button-group{display:flex}.devui-button-group>*{position:relative}.devui-button-group>*:not(:first-child),.devui-button-group>*:not(:first-child) .devui-button{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.devui-button-group>*:not(:last-child),.devui-button-group>*:not(:last-child) .devui-button{border-top-right-radius:0;border-bottom-right-radius:0}.devui-button-group>*:hover,.devui-button-group>*:active{z-index:1}.devui-button-group>*:focus-within{z-index:1}.devui-checkbox{position:relative;display:flex;display:-ms-flexbox;align-items:center;-ms-flex-align:center;height:100%;margin:0}.devui-checkbox .devui-checkbox__tick-wrap{position:absolute}.devui-checkbox .devui-checkbox__tick-wrap .devui-checkbox__tick{fill:var(--devui-light-text, #ffffff);stroke-dashoffset:50;opacity:0;transform:scale(0);transform-origin:50% 50%;transition:stroke-dashoffset .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.devui-checkbox.active:not(.half-checked) .devui-checkbox__tick{opacity:1;stroke-dashoffset:0;transform:scale(1);transition:stroke-dashoffset .3s cubic-bezier(.755,.05,.855,.06),opacity .2s cubic-bezier(.755,.05,.855,.06)}.devui-checkbox.active:not(.disabled) .devui-checkbox__material:not(.custom-color),.devui-checkbox.half-checked:not(.disabled) .devui-checkbox__material:not(.custom-color){border-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.active .devui-checkbox--bordered,.devui-checkbox.half-checked .devui-checkbox--bordered{border-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.active:not(.disabled) .devui-checkbox__material{background-size:100% 100%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material:not(.custom-color){background-size:0% 0%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material:not(.custom-color):hover{border-color:var(--devui-icon-fill-active, #5e7ce0)}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material.custom-color{background-size:0% 0%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.half-checked .devui-checkbox__material:not(.custom-color){background-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.half-checked .devui-checkbox__material:not(.custom-color)>.devui-checkbox__halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform .2s cubic-bezier(.755,.05,.855,.06);background-color:var(--devui-light-text, #ffffff)}.devui-checkbox.half-checked .devui-checkbox__material.custom-color>.devui-checkbox__halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform .2s cubic-bezier(.755,.05,.855,.06);background-color:var(--devui-light-text, #ffffff)}.devui-checkbox .devui-checkbox__material{text-align:initial;height:14px;width:14px;position:relative;user-select:none;border:1px solid var(--devui-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);background:linear-gradient(var(--devui-brand, #5e7ce0),var(--devui-brand, #5e7ce0)) no-repeat center/0%;margin-right:8px;vertical-align:text-bottom}.devui-checkbox .devui-checkbox__material.devui-checkbox__default-background{background-color:var(--devui-base-bg, #ffffff)}.devui-checkbox .devui-checkbox__material.devui-checkbox--no-label{margin-right:0}.devui-checkbox .devui-checkbox__material>.devui-checkbox__halfchecked-bg{display:inline-block;position:absolute;content:"";background-color:var(--devui-light-text, #ffffff);top:0;left:0;height:100%;width:100%;transform:scale(1);opacity:0}.devui-checkbox .devui-checkbox__material>svg{width:14px;height:14px}.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):focus,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover{background-color:var(--devui-icon-fill-active, #5e7ce0)}.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):focus,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover:active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover:focus{background-color:var(--devui-brand-active-focus, #344899)}.devui-checkbox__input{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.devui-checkbox label{position:relative;font-weight:400;height:18px;line-height:18px;cursor:pointer;color:var(--devui-text, #252b3a);margin:0;display:block}.devui-checkbox label.devui-checkbox--lg{font-size:14px}.devui-checkbox label.devui-checkbox--lg .devui-checkbox__material{width:16px;height:16px}.devui-checkbox label.devui-checkbox--lg .devui-checkbox__material>svg{width:16px;height:16px}.devui-checkbox label.devui-checkbox--lg.devui-checkbox--bordered{height:40px;line-height:40px;padding:0 15px 0 10px}.devui-checkbox label.devui-checkbox--md{font-size:14px}.devui-checkbox label.devui-checkbox--md .devui-checkbox__material{width:16px;height:16px}.devui-checkbox label.devui-checkbox--md .devui-checkbox__material>svg{width:16px;height:16px}.devui-checkbox label.devui-checkbox--md.devui-checkbox--bordered{height:36px;line-height:36px;padding:0 15px 0 10px}.devui-checkbox label.devui-checkbox--sm{font-size:12px}.devui-checkbox label.devui-checkbox--sm .devui-checkbox__material{width:14px;height:14px}.devui-checkbox label.devui-checkbox--sm .devui-checkbox__material>svg{width:14px;height:14px}.devui-checkbox label.devui-checkbox--sm.devui-checkbox--bordered{height:32px;line-height:32px;padding:0 15px 0 10px}.devui-checkbox label.devui-checkbox--xs{font-size:12px}.devui-checkbox label.devui-checkbox--xs .devui-checkbox__material{width:14px;height:14px}.devui-checkbox label.devui-checkbox--xs .devui-checkbox__material>svg{width:14px;height:14px}.devui-checkbox label.devui-checkbox--xs.devui-checkbox--bordered{height:28px;line-height:28px;padding:0 15px 0 10px}.devui-checkbox label.devui-checkbox--bordered{border:1px solid var(--devui-disabled-line, #dfe1e6);border-radius:var(--devui-border-radius, 2px)}.devui-checkbox label>span{display:inline-block;box-sizing:content-box;vertical-align:top}.devui-checkbox.disabled label{cursor:not-allowed;color:var(--devui-disabled-text, #adb0b8)}.devui-checkbox.disabled .devui-checkbox__material{border-color:var(--devui-icon-fill-active-disabled, #beccfa);background-color:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-checkbox.disabled.unchecked .devui-checkbox__material{border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-checkbox.disabled.half-checked .devui-checkbox__material{background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-checkbox.disabled.half-checked .devui-checkbox__material .devui-checkbox__halfchecked-bg{transform:scale(.4288);background-color:var(--devui-disabled-text, #adb0b8);opacity:1}.devui-checkbox.disabled.active svg polygon{fill:var(--devui-light-text, #ffffff)}.devui-checkbox--no-animation{transition:none!important}.devui-checkbox__column-margin{height:28px;line-height:28px}.devui-checkbox__wrap .devui-checkbox label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:block}.devui-checkbox--list-inline{min-height:28px;line-height:28px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin:-8px 0 0}.devui-checkbox--list-inline div:not(:last-child){margin-right:20px}.devui-checkbox--list-inline>*{margin-top:8px}.devui-checkbox-button{display:inline-block;position:relative}.devui-checkbox-button__input{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.devui-checkbox-button__content{font-size:14px;color:var(--devui-text, #252b3a);padding:10px 20px;cursor:pointer;border:1px solid var(--devui-line, #adb0b8);border-left:none;display:inline-block;line-height:1;user-select:none;box-shadow:-1px 0 #e5f0fb}.devui-checkbox-button__content.devui-checkbox-button--lg{font-size:14px;padding:12px 20px}.devui-checkbox-button__content.devui-checkbox-button--md{font-size:14px;padding:10px 20px}.devui-checkbox-button__content.devui-checkbox-button--sm{font-size:12px;padding:9px 15px}.devui-checkbox-button__content.devui-checkbox-button--xs{font-size:12px;padding:7px 15px}.devui-checkbox-button.active .devui-checkbox-button__content{color:#fff;background-color:var(--devui-brand, #5e7ce0);border-color:var(--devui-brand, #5e7ce0)}.devui-checkbox-button.active.disabled .devui-checkbox-button__content{color:#fff;background-color:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-checkbox-button.disabled .devui-checkbox-button__content{cursor:not-allowed;color:var(--devui-disabled-text, #adb0b8);background-color:#fff;border-color:var(--devui-disabled-line, #dfe1e6)}.devui-checkbox-button:first-child .devui-checkbox-button__content{border-top-left-radius:var(--devui-border-radius, 2px);border-bottom-left-radius:var(--devui-border-radius, 2px);border-left:1px solid var(--devui-line, #adb0b8);box-shadow:none}.devui-checkbox-button:last-child .devui-checkbox-button__content{border-top-right-radius:var(--devui-border-radius, 2px);border-bottom-right-radius:var(--devui-border-radius, 2px)}.devui-list{padding-bottom:4px;border-radius:var(--devui-border-radius, 2px);box-sizing:border-box;background-clip:padding-box;background-color:var(--devui-connected-overlay-bg, #ffffff);outline:none}.devui-list-item{display:flex;align-items:center;width:100%;height:36px;line-height:36px;padding:0 8px;color:var(--devui-text, #252b3a);box-sizing:border-box;cursor:pointer;transition:color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),background-color var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-list-item:hover{color:var(--devui-list-item-hover-text, #526ecc);background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-list-item:active{color:var(--devui-list-item-active-text, #ffffff);background-color:var(--devui-list-item-active-bg, #5e7ce0)}.filter-wrapper{width:200px;background-color:var(--devui-connected-overlay-bg, #ffffff);border-radius:var(--devui-border-radius, 2px)}.filter-wrapper .filter-all-check{padding:0 8px 4px;border-bottom:1px solid var(--devui-dividing-line, #dfe1e6)}.filter-wrapper .filter-multiple-menu{width:100%;padding:4px 8px;border-bottom:1px solid var(--devui-dividing-line, #dfe1e6)}.filter-wrapper .filter-operation{display:flex;justify-content:center;align-items:center;padding:0 8px;height:26px}.filter-wrapper .filter-single-menu{width:100%}.filter-wrapper .filter-item{display:flex;align-items:center;height:30px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.filter-icon{display:inline-block;vertical-align:middle;cursor:pointer;height:16px;margin-top:-1px}.filter-icon>svg g{fill:var(--devui-dividing-line, #dfe1e6)}.filter-icon:hover>svg g{fill:var(--devui-icon-fill-active-hover, #526ecc)}.filter-item-active{background:var(--devui-list-item-active-bg, #5e7ce0);color:var(--devui-list-item-active-text, #ffffff)}.filter-icon-active{visibility:visible!important}.filter-icon-active>svg g{fill:var(--devui-icon-fill-active, #5e7ce0)}.filter-icon-active:hover>svg g{fill:var(--devui-icon-fill-active-hover, #526ecc)}.devui-table__thead tr{border:none;background-color:var(--devui-base-bg, #ffffff)}.devui-table__thead tr th{display:table-cell;text-align:left;padding:0;border:none;border-bottom:1px solid var(--devui-line, #adb0b8)}.devui-table__thead tr th.is-left{text-align:left}.devui-table__thead tr th.is-center{text-align:center}.devui-table__thead tr th.is-right{text-align:right}.devui-table__thead tr .operable:hover{background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-table__thead tr .resizeable:hover .resize-handle{border-right:1px solid var(--devui-line, #adb0b8)}.devui-table__thead tr .resizeable .resize-handle:hover{border-right:2px solid var(--devui-form-control-line-active, #5e7ce0)}.devui-table__thead tr .sort-active,.devui-table__thead tr .filter-active{background-color:var(--devui-list-item-hover-bg, #f2f5fc);border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-table__thead .header-container{position:relative;display:flex;align-items:center;padding-left:20px;padding-right:8px}.devui-table__thead .header-container .title{display:inline-block;width:calc(100% - 18px);font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a);font-weight:700;line-height:36px;vertical-align:middle;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.devui-table__thead .header-container .resize-handle{display:inline-block;position:absolute;right:0;top:0;bottom:0;width:5px;cursor:col-resize}.devui-table__thead .header-container .resize-overlay{position:absolute;display:block;top:0;left:0;bottom:0;right:0;z-index:1000}.devui-table--header-bg thead.devui-table__thead tr{background:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-table__tbody tr{font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a);background-color:var(--devui-base-bg, #ffffff);border:none}.devui-table__tbody tr.hover-enabled:hover{background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-table__tbody tr td .icon-expand-row:hover{cursor:pointer}.devui-table__tbody tr.expanded td .icon-expand-row{transform:rotate(90deg)}.devui-table__tbody tr td{background-clip:padding-box;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px;border:none;border-bottom:1px solid var(--devui-dividing-line, #dfe1e6)}.devui-table__tbody tr td.is-left{text-align:left}.devui-table__tbody tr td.is-center{text-align:center}.devui-table__tbody tr td.is-right{text-align:right}.devui-table--sticky-cell{position:sticky;z-index:5;background-color:inherit}.devui-table--sticky-cell.left{box-shadow:#0000000d var(--devui-shadow-length-slide-right, 2px 0 8px 0)}.devui-table--sticky-cell.right{box-shadow:#0000000d var(--devui-shadow-length-slide-left, -2px 0 8px 0)}.devui-tooltip{max-width:200px;min-height:26px;padding:4px 16px;font-size:var(--devui-font-size, 12px);color:var(--devui-feedback-overlay-text, #dfe1e6);letter-spacing:0;line-height:1.5;background:var(--devui-feedback-overlay-bg, #464d6e);box-shadow:none;overflow-wrap:break-word;word-break:break-word;word-wrap:break-word;text-align:start;border-radius:var(--devui-border-radius-feedback, 4px);font-style:normal;font-weight:400;line-break:auto;text-decoration:none;text-shadow:none;text-transform:none;word-spacing:normal;white-space:normal;opacity:1;z-index:var(--devui-z-index-pop-up, 1060)}.devui-tooltip--fade-bottom-enter-from,.devui-tooltip--fade-bottom-leave-to,.devui-tooltip--fade-top-enter-from,.devui-tooltip--fade-top-leave-to{opacity:.8;transform:scaleY(.8)}.devui-tooltip--fade-bottom-enter-to,.devui-tooltip--fade-bottom-leave-from,.devui-tooltip--fade-top-enter-to,.devui-tooltip--fade-top-leave-from{opacity:1;transform:scaleY(1)}.devui-tooltip--fade-bottom-enter-active,.devui-tooltip--fade-top-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-tooltip--fade-bottom-leave-active,.devui-tooltip--fade-top-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-tooltip--fade-left-enter-from,.devui-tooltip--fade-left-leave-to,.devui-tooltip--fade-right-enter-from,.devui-tooltip--fade-right-leave-to{opacity:.8;transform:scaleX(.8)}.devui-tooltip--fade-left-enter-to,.devui-tooltip--fade-left-leave-from,.devui-tooltip--fade-right-enter-to,.devui-tooltip--fade-right-leave-from{opacity:1;transform:scaleX(1)}.devui-tooltip--fade-left-enter-active,.devui-tooltip--fade-right-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-tooltip--fade-left-leave-active,.devui-tooltip--fade-right-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-table{position:relative;width:100%;overflow-x:auto}.devui-table .hidden-columns{position:absolute;visibility:hidden;z-index:-1}.devui-table__view{display:table;table-layout:fixed;width:100%;border-spacing:0;border-collapse:collapse;border:none;margin:0;padding:0}.devui-table--striped tbody tr:nth-child(even){background-color:var(--devui-list-item-strip-bg, #f2f5fc)}.devui-table__empty{padding:40px 0;background-color:var(--devui-base-bg, #ffffff)}.devui-table__fix-header{display:flex;flex-direction:column;position:relative;height:100%}.devui-table__scroll-view{flex:1;overflow:scroll}.devui-table--layout-auto{table-layout:auto}.devui-table--sm tbody>tr>td{font-size:var(--devui-font-size-sm, 12px);padding:7px 20px 8px}.devui-table--sm tbody>tr>td.devui-table__checkable-cell{padding:8px}.devui-table--sm thead>tr>th.devui-table__checkable-cell{padding:8px}.devui-table--md tbody>tr>td{font-size:var(--devui-font-size-md, 12px);padding:11px 20px 12px}.devui-table--md thead>tr>th.devui-table__checkable-cell{padding:8px 20px}.devui-table--lg tbody>tr>td{font-size:var(--devui-font-size-lg, 14px);padding:15px 20px 16px}.devui-table--lg thead>tr>th.devui-table__checkable-cell{padding:8px 20px}.devui-table--borderless tbody>tr>td{border-bottom:none}.devui-table--bordered tr{border-left:1px solid var(--devui-dividing-line, #dfe1e6)}.devui-table--bordered tr td{border-right:1px solid var(--devui-dividing-line, #dfe1e6)}.devui-table--bordered thead tr th:first-child{border-left:1px solid var(--devui-dividing-line, #dfe1e6)}.devui-table--bordered thead tr th{border-top:1px solid var(--devui-dividing-line, #dfe1e6);border-right:1px solid var(--devui-dividing-line, #dfe1e6)}.devui-table .resize-bar{display:none;position:absolute;top:0;bottom:0;width:2px;background-color:var(--devui-form-control-line-active, #5e7ce0);z-index:9999;cursor:col-resize}.table-selector{user-select:none;cursor:col-resize}

package/tabs/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, reactive, provide, onUpdated, onBeforeMount, onMounted, createVNode, inject } from "vue";
+import { toRefs, computed, defineComponent, shallowRef, reactive, inject, onUpdated, onBeforeMount, onMounted, createVNode, provide, mergeProps } from "vue";
 const tabsProps = {
   modelValue: {
     type: [String, Number],
@@ -43,8 +43,8 @@ function createBem(namespace, element, modifier) {
   }
   return cls;
 }
-function useNamespace(block) {
-  const namespace = `devui-${block}`;
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
   const b = () => createBem(namespace);
   const e = (element) => element ? createBem(namespace, element) : "";
   const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
@@ -57,67 +57,74 @@ function useNamespace(block) {
   };
 }
 var tabs = "";
-var Tabs = defineComponent({
-  name: "DTabs",
+const ns = useNamespace("tabs");
+function useTabNavRender(props) {
+  const { cssClass, vertical } = toRefs(props);
+  const ulClasses = computed(() => ({
+    [ns.e("nav")]: true,
+    [ns.em("nav", props.type)]: true,
+    [cssClass.value]: Boolean(cssClass.value),
+    [ns.e("stacked")]: vertical.value
+  }));
+  return { ulClasses };
+}
+function useTabNavFunction(props, tabs2, data, ctx, tabsEle) {
+  const canChange = function(currentTab) {
+    let changeResult = Promise.resolve(true);
+    if (typeof props.beforeChange === "function") {
+      const result = props.beforeChange(currentTab);
+      if (typeof result !== "undefined") {
+        if (result.then) {
+          changeResult = result;
+        } else {
+          changeResult = Promise.resolve(result);
+        }
+      }
+    }
+    return changeResult;
+  };
+  const activeClick = function(item, tabEl) {
+    if (!props.reactivable && props.modelValue === item.id) {
+      return;
+    }
+    canChange(item.id).then((change) => {
+      if (!change) {
+        return;
+      }
+      const tab2 = tabs2.state.data.find((itemOption) => itemOption.id === item.id);
+      if (tab2 && !tab2.disabled) {
+        tabs2.state.active = item.id;
+        ctx.emit("update:modelValue", tab2.id);
+        if (props.type === "slider" && tabEl && tabsEle) {
+          data.offsetLeft = tabEl.getBoundingClientRect().left - tabsEle.value.nativeElement.getBoundingClientRect().left;
+          data.offsetWidth = tabEl.getBoundingClientRect().width;
+        }
+        ctx.emit("active-tab-change", tab2.id);
+      }
+    });
+  };
+  return { activeClick };
+}
+var tabNav = "";
+var TabNav = defineComponent({
+  name: "DTabNav",
   props: tabsProps,
   emits: ["update:modelValue", "active-tab-change"],
-  setup(props, {
-    emit,
-    slots
-  }) {
-    const ns = useNamespace("tabs");
-    const tabsEle = ref(null);
+  setup(props, ctx) {
+    const ns2 = useNamespace("tabs");
+    const tabsEle = shallowRef();
     const data = reactive({
       offsetLeft: 0,
       offsetWidth: 0,
       id: null
     });
-    const state = reactive({
-      data: [],
-      active: props.modelValue,
-      showContent: props.showContent,
-      slots: []
-    });
-    provide("tabs", {
-      state
-    });
-    const canChange = function(currentTab) {
-      let changeResult = Promise.resolve(true);
-      if (typeof props.beforeChange === "function") {
-        const result = props.beforeChange(currentTab);
-        if (typeof result !== "undefined") {
-          if (result.then) {
-            changeResult = result;
-          } else {
-            changeResult = Promise.resolve(result);
-          }
-        }
-      }
-      return changeResult;
-    };
-    const activeClick = function(item, tabEl) {
-      if (!props.reactivable && props.modelValue === item.id) {
-        return;
-      }
-      canChange(item.id).then((change) => {
-        if (!change) {
-          return;
-        }
-        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;
-            this.offsetWidth = tabEl.getBoundingClientRect().width;
-          }
-          emit("active-tab-change", tab.id);
-        }
-      });
-    };
-    const ulClass = [ns.em("nav", props.type)];
-    props.cssClass && ulClass.push(props.cssClass);
-    props.vertical && ulClass.push(ns.e("stacked"));
+    const tabs2 = inject("tabs");
+    const {
+      ulClasses
+    } = useTabNavRender(props);
+    const {
+      activeClick
+    } = useTabNavFunction(props, tabs2, data, ctx, tabsEle);
     onUpdated(() => {
       if (props.type === "slider") {
         setTimeout(() => {
@@ -130,23 +137,21 @@ var Tabs = defineComponent({
       }
     });
     onBeforeMount(() => {
-      if (props.type !== "slider" && props.modelValue === void 0 && state.data.length > 0) {
-        activeClick(state.data[0]);
+      if (props.type !== "slider" && props.modelValue === void 0 && tabs2.state.data.length > 0) {
+        activeClick(tabs2.state.data[0]);
       }
     });
     onMounted(() => {
-      if (props.type === "slider" && props.modelValue === void 0 && state.data.length > 0 && state.data[0]) {
-        activeClick(state.data[0].tabsEle.value.getElementById(state.data[0].tabId));
+      if (props.type === "slider" && props.modelValue === void 0 && tabs2.state.data.length > 0 && tabs2.state.data[0]) {
+        activeClick(tabs2.state.data[0].tabsEle.value.getElementById(tabs2.state.data[0].tabId));
       }
     });
     return () => {
-      return createVNode("div", {
-        "class": ns.b()
-      }, [createVNode("ul", {
+      return createVNode("ul", {
         "ref": tabsEle,
         "role": "tablist",
-        "class": [ns.e("nav"), ulClass.join(" ")]
-      }, [state.data.map((item, i) => {
+        "class": ulClasses.value
+      }, [(tabs2.state.data || []).map((item, i) => {
         return createVNode("li", {
           "role": "presentation",
           "onClick": () => {
@@ -158,14 +163,49 @@ var Tabs = defineComponent({
           "role": "tab",
           "data-toggle": item.id,
           "aria-expanded": props.modelValue === (item.id || item.tabId)
-        }, [state.slots[i] ? state.slots[i]() : createVNode("span", null, [item.title])])]);
+        }, [tabs2.state.slots[i] ? tabs2.state.slots[i]() : createVNode("span", null, [item.title])])]);
       }), createVNode("div", {
-        "class": ns.e(`nav-${props.type}-animation`),
+        "class": ns2.e(`nav-${props.type}-animation`),
         "style": {
           left: data.offsetLeft + "px",
           width: data.offsetWidth + "px"
         }
-      }, null)]), slots.default()]);
+      }, null)]);
+    };
+  }
+});
+var Tabs = defineComponent({
+  name: "DTabs",
+  props: tabsProps,
+  emits: ["update:modelValue", "active-tab-change"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const ns2 = useNamespace("tabs");
+    const state = reactive({
+      data: [],
+      active: props.modelValue,
+      showContent: props.showContent,
+      slots: []
+    });
+    provide("tabs", {
+      state
+    });
+    const updateModelValue = (value) => {
+      emit("update:modelValue", value);
+    };
+    const activeTabChange = (value) => {
+      emit("active-tab-change", value);
+    };
+    return () => {
+      var _a;
+      return createVNode("div", {
+        "class": ns2.b()
+      }, [createVNode(TabNav, mergeProps(props, {
+        "onUpdate:modelValue": updateModelValue,
+        "onActiveTabChange": activeTabChange
+      }), null), (_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }
 });
@@ -183,6 +223,7 @@ const tabProps = {
     default: false
   }
 };
+var tab = "";
 var Tab = defineComponent({
   name: "DTab",
   props: tabProps,
@@ -192,16 +233,17 @@ var Tab = defineComponent({
     const tabs2 = inject("tabs");
     tabs2.state.slots.push(slots.title);
     tabs2.state.data.push(props);
-    const ns = useNamespace("tab");
+    const ns2 = useNamespace("tab");
     return () => {
+      var _a;
       const {
         id
       } = props;
       const content = tabs2.state.showContent && tabs2.state.active === id ? createVNode("div", {
-        "class": ns.e("content")
+        "class": ns2.e("content")
       }, [createVNode("div", {
         "role": "tabpanel"
-      }, [slots.default()])]) : null;
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)])]) : null;
       return content;
     };
   }

package/tabs/index.umd.js

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

package/tabs/style.css

@@ -1 +1 @@
-:host{display:block}.devui-tabs__nav--tabs,.devui-tabs__nav--pills{font-size:var(--devui-font-size, 12px);background:transparent;font-weight:700;list-style:none}.devui-tabs__nav--tabs li,.devui-tabs__nav--pills li{cursor:pointer;border:2px solid transparent}.devui-tabs__nav--tabs li a,.devui-tabs__nav--pills li a{cursor:pointer;border:none;line-height:30px;background-color:transparent;padding:0;text-decoration:none;color:var(--devui-text, #252b3a)}.devui-tabs__nav--tabs li a:hover,.devui-tabs__nav--tabs li a:focus,.devui-tabs__nav--tabs li a:active,.devui-tabs__nav--pills li a:hover,.devui-tabs__nav--pills li a:focus,.devui-tabs__nav--pills li a:active{outline:none}.devui-tabs__nav--tabs li.disabled a,.devui-tabs__nav--pills li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-tabs__nav--tabs li.active a,.devui-tabs__nav--tabs li:hover:not(.disabled) a,.devui-tabs__nav--pills li.active a,.devui-tabs__nav--pills li:hover:not(.disabled) a{color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--tabs li:after,.devui-tabs__nav--pills li:after{content:"";display:block;margin:auto;height:2px;width:0;background:transparent;transition:width var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-tabs__nav--tabs li.active:after,.devui-tabs__nav--pills li.active:after{width:100%;background:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--options{font-size:var(--devui-font-size, 12px);background:transparent;border:none;border-radius:var(--devui-border-radius, 2px)}.devui-tabs__nav--options>li:last-of-type{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-tabs__nav--options>li{cursor:pointer;border:1px solid var(--devui-line, #adb0b8);border-left-width:0;background-color:var(--devui-base-bg, #ffffff);float:left}.devui-tabs__nav--options>li:first-child{border-left-width:1px;border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-tabs__nav--options>li:last-child{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-tabs__nav--options>li>a{cursor:pointer;border:none;color:var(--devui-text, #252b3a);line-height:26px;padding:0 16px;transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-tabs__nav--options>li>a:hover,.devui-tabs__nav--options>li>a:focus,.devui-tabs__nav--options>li>a:active{outline:none}.devui-tabs__nav--options>li.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-tabs__nav--options>li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-tabs__nav--options>li.active>a,.devui-tabs__nav--options>li:hover:not(.disabled)>a{color:var(--devui-light-text, #ffffff)}.devui-tabs__nav--options>li.active>a:hover,.devui-tabs__nav--options>li:hover:not(.disabled)>a:hover{color:var(--devui-light-text, #ffffff);background:transparent}.devui-tabs__nav--options>li.active{background-color:var(--devui-brand, #5e7ce0);border-color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--options>li.active:not(:first-child):before{background-color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--options>li.active+li:before{background-color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--options>li:hover:not(.active):not(.disabled){background-color:var(--devui-brand-active, #526ecc);border-color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--options>li:hover:not(.active):not(.disabled):not(:first-child):before{background-color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--slider{font-size:var(--devui-font-size, 12px);border:none;border-radius:var(--devui-border-radius, 2px);background:var(--devui-list-item-hover-bg, #f2f5fc);width:fit-content;display:flex!important;align-items:center;position:relative}.devui-tabs__nav--slider>li{cursor:pointer;margin:2px;float:left;position:relative;z-index:1}.devui-tabs__nav--slider>li:first-child{border-left-width:1px;border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-tabs__nav--slider>li:last-child{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-tabs__nav--slider>li a{cursor:pointer;border:none;color:var(--devui-text, #252b3a);line-height:28px;padding:0 16px}.devui-tabs__nav--slider>li a:hover,.devui-tabs__nav--slider>li a:focus,.devui-tabs__nav--slider>li a:active{outline:none}.devui-tabs__nav--slider>li.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-tabs__nav--slider>li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-tabs__nav--slider>li.active a,.devui-tabs__nav--slider>li:hover:not(.disabled) a{color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--slider>li.active a:hover,.devui-tabs__nav--slider>li:hover:not(.disabled) a:hover{color:var(--devui-brand-active, #526ecc);background:transparent}.devui-tabs__nav--slider>li.active:not(:first-child):before,.devui-tabs__nav--slider>li:hover:not(.disabled):not(:first-child):before{content:"";display:block;top:-1px;left:-1px;width:1px;height:"calc(100% + 2px)";position:absolute}.devui-tabs__nav--slider>li.active{text-shadow:0 0 .7px var(--devui-brand, #5e7ce0)}.devui-tabs__nav--slider>li.active:not(:first-child):before{background-color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--slider>li.active+li:before{background-color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--slider>li:hover:not(.active):not(.disabled){color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--slider>li:hover:not(.active):not(.disabled):not(:first-child):before{background-color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--wrapped{font-size:var(--devui-font-size, 12px);background:transparent;border-bottom:1px solid var(--devui-dividing-line, #dfe1e6);background-color:var(--devui-base-bg, #ffffff)}.devui-tabs__nav--wrapped>li{cursor:pointer;float:left;position:relative;padding:8px 16px}.devui-tabs__nav--wrapped>li a{cursor:pointer;border:none;color:var(--devui-text, #252b3a);border-radius:var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0}.devui-tabs__nav--wrapped>li a:hover,.devui-tabs__nav--wrapped>li a:focus,.devui-tabs__nav--wrapped>li a:active{outline:none}.devui-tabs__nav--wrapped>li.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-tabs__nav--wrapped>li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-tabs__nav--wrapped>li.active{border:1px solid var(--devui-dividing-line, #dfe1e6);background:var(--devui-global-bg, #f3f6f8);border-radius:var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0;font-weight:700;margin:-1px;border-bottom-color:transparent}.devui-tabs__nav--wrapped>li.active a{color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--wrapped>li:hover:not(.active):not(.disabled) a{color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav{list-style:none;padding-left:0}.devui-tabs__nav li a{text-decoration:none}.devui-tabs__nav li a.custom-width{display:inline-block;padding:0;text-align:center}.devui-tabs__nav--tabs:not(.devui-tabs__stacked){border-bottom:1px var(--devui-line, #adb0b8) solid}.devui-tabs__nav--tabs:not(.devui-tabs__stacked) li{float:left;margin-left:32px;margin-bottom:-3px}.devui-tabs__nav--tabs:not(.devui-tabs__stacked) li:first-child{margin-left:0}.devui-tabs__nav--pills:not(.devui-tabs__stacked)>li{float:left;margin-left:32px}.devui-tabs__nav--pills:not(.devui-tabs__stacked)>li:first-child{margin-left:0}.devui-tabs__nav:before,.devui-tabs__nav:after{content:" ";display:table}.devui-tabs__nav:after{clear:both}.devui-tab__content{margin-top:20px}.devui-tabs__nav-slider-animation{position:absolute;z-index:0;background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius, 2px);box-shadow:0 2px 4px 0 var(--devui-light-shadow, rgba(37, 43, 58, .1));top:1px;height:30px;transition:left var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),width var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}
+:host{display:block}.devui-tabs__nav--tabs,.devui-tabs__nav--pills{font-size:var(--devui-font-size, 12px);background:transparent;font-weight:700;list-style:none}.devui-tabs__nav--tabs li,.devui-tabs__nav--pills li{cursor:pointer;border:2px solid transparent}.devui-tabs__nav--tabs li a,.devui-tabs__nav--pills li a{cursor:pointer;border:none;line-height:30px;background-color:transparent;padding:0;text-decoration:none;color:var(--devui-text, #252b3a)}.devui-tabs__nav--tabs li a:hover,.devui-tabs__nav--tabs li a:focus,.devui-tabs__nav--tabs li a:active,.devui-tabs__nav--pills li a:hover,.devui-tabs__nav--pills li a:focus,.devui-tabs__nav--pills li a:active{outline:none}.devui-tabs__nav--tabs li.disabled a,.devui-tabs__nav--pills li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-tabs__nav--tabs li.active a,.devui-tabs__nav--tabs li:hover:not(.disabled) a,.devui-tabs__nav--pills li.active a,.devui-tabs__nav--pills li:hover:not(.disabled) a{color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--tabs li:after,.devui-tabs__nav--pills li:after{content:"";display:block;margin:auto;height:2px;width:0;background:transparent;transition:width var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-tabs__nav--tabs li.active:after,.devui-tabs__nav--pills li.active:after{width:100%;background:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--options{font-size:var(--devui-font-size, 12px);background:transparent;border:none;border-radius:var(--devui-border-radius, 2px)}.devui-tabs__nav--options>li:last-of-type{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-tabs__nav--options>li{cursor:pointer;border:1px solid var(--devui-line, #adb0b8);border-left-width:0;background-color:var(--devui-base-bg, #ffffff);float:left}.devui-tabs__nav--options>li:first-child{border-left-width:1px;border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-tabs__nav--options>li:last-child{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-tabs__nav--options>li>a{cursor:pointer;border:none;color:var(--devui-text, #252b3a);line-height:26px;padding:0 16px;transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-tabs__nav--options>li>a:hover,.devui-tabs__nav--options>li>a:focus,.devui-tabs__nav--options>li>a:active{outline:none}.devui-tabs__nav--options>li.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-tabs__nav--options>li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-tabs__nav--options>li.active>a,.devui-tabs__nav--options>li:hover:not(.disabled)>a{color:var(--devui-light-text, #ffffff)}.devui-tabs__nav--options>li.active>a:hover,.devui-tabs__nav--options>li:hover:not(.disabled)>a:hover{color:var(--devui-light-text, #ffffff);background:transparent}.devui-tabs__nav--options>li.active{background-color:var(--devui-brand, #5e7ce0);border-color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--options>li.active:not(:first-child):before{background-color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--options>li.active+li:before{background-color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--options>li:hover:not(.active):not(.disabled){background-color:var(--devui-brand-active, #526ecc);border-color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--options>li:hover:not(.active):not(.disabled):not(:first-child):before{background-color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--slider{font-size:var(--devui-font-size, 12px);border:none;border-radius:var(--devui-border-radius, 2px);background:var(--devui-list-item-hover-bg, #f2f5fc);width:fit-content;display:flex!important;align-items:center;position:relative}.devui-tabs__nav--slider>li{cursor:pointer;margin:2px;float:left;position:relative;z-index:1}.devui-tabs__nav--slider>li:first-child{border-left-width:1px;border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-tabs__nav--slider>li:last-child{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-tabs__nav--slider>li a{cursor:pointer;border:none;color:var(--devui-text, #252b3a);line-height:28px;padding:0 16px}.devui-tabs__nav--slider>li a:hover,.devui-tabs__nav--slider>li a:focus,.devui-tabs__nav--slider>li a:active{outline:none}.devui-tabs__nav--slider>li.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-tabs__nav--slider>li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-tabs__nav--slider>li.active a,.devui-tabs__nav--slider>li:hover:not(.disabled) a{color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--slider>li.active a:hover,.devui-tabs__nav--slider>li:hover:not(.disabled) a:hover{color:var(--devui-brand-active, #526ecc);background:transparent}.devui-tabs__nav--slider>li.active:not(:first-child):before,.devui-tabs__nav--slider>li:hover:not(.disabled):not(:first-child):before{content:"";display:block;top:-1px;left:-1px;width:1px;height:"calc(100% + 2px)";position:absolute}.devui-tabs__nav--slider>li.active{text-shadow:0 0 .7px var(--devui-brand, #5e7ce0)}.devui-tabs__nav--slider>li.active:not(:first-child):before{background-color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--slider>li.active+li:before{background-color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav--slider>li:hover:not(.active):not(.disabled){color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--slider>li:hover:not(.active):not(.disabled):not(:first-child):before{background-color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--wrapped{font-size:var(--devui-font-size, 12px);background:transparent;border-bottom:1px solid var(--devui-dividing-line, #dfe1e6);background-color:var(--devui-base-bg, #ffffff)}.devui-tabs__nav--wrapped>li{cursor:pointer;float:left;position:relative;padding:8px 16px}.devui-tabs__nav--wrapped>li a{cursor:pointer;border:none;color:var(--devui-text, #252b3a);border-radius:var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0}.devui-tabs__nav--wrapped>li a:hover,.devui-tabs__nav--wrapped>li a:focus,.devui-tabs__nav--wrapped>li a:active{outline:none}.devui-tabs__nav--wrapped>li.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-tabs__nav--wrapped>li.disabled a{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-tabs__nav--wrapped>li.active{border:1px solid var(--devui-dividing-line, #dfe1e6);background:var(--devui-global-bg, #f3f6f8);border-radius:var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0 0;font-weight:700;margin:-1px;border-bottom-color:transparent}.devui-tabs__nav--wrapped>li.active a{color:var(--devui-brand-active, #526ecc)}.devui-tabs__nav--wrapped>li:hover:not(.active):not(.disabled) a{color:var(--devui-brand, #5e7ce0)}.devui-tabs__nav{list-style:none;padding-left:0}.devui-tabs__nav li a{text-decoration:none}.devui-tabs__nav li a.custom-width{display:inline-block;padding:0;text-align:center}.devui-tabs__nav--tabs:not(.devui-tabs__stacked){border-bottom:1px var(--devui-line, #adb0b8) solid}.devui-tabs__nav--tabs:not(.devui-tabs__stacked) li{float:left;margin-left:32px;margin-bottom:-3px}.devui-tabs__nav--tabs:not(.devui-tabs__stacked) li:first-child{margin-left:0}.devui-tabs__nav--pills:not(.devui-tabs__stacked)>li{float:left;margin-left:32px}.devui-tabs__nav--pills:not(.devui-tabs__stacked)>li:first-child{margin-left:0}.devui-tabs__nav:before,.devui-tabs__nav:after{content:" ";display:table}.devui-tabs__nav:after{clear:both}.devui-tabs__nav-slider-animation{position:absolute;z-index:0;background-color:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius, 2px);box-shadow:0 2px 4px 0 var(--devui-light-shadow, rgba(37, 43, 58, .1));top:1px;height:30px;transition:left var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),width var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-tab__content{margin-top:20px}

package/tag/index.es.js

@@ -1,4 +1,4 @@
-import { computed, defineComponent, toRefs, ref, watch, onUnmounted, withDirectives, createVNode, resolveComponent, vShow } from "vue";
+import { computed, defineComponent, toRefs, watch, onUnmounted, createVNode, resolveComponent } from "vue";
 const tagProps = {
   type: {
     type: String,
@@ -31,8 +31,8 @@ function createBem(namespace, element, modifier) {
   }
   return cls;
 }
-function useNamespace(block) {
-  const namespace = `devui-${block}`;
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
   const b = () => createBem(namespace);
   const e = (element) => element ? createBem(namespace, element) : "";
   const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
@@ -99,12 +99,11 @@ var Tag = defineComponent({
     const themeColor = useColor(props);
     const tagTitle = titleContent.value || "";
     const isDefaultTag = () => !type.value && !color.value;
-    const isShow = ref(true);
     const handleClick = (e) => {
       emit("click", e);
     };
     const handleDelete = (e) => {
-      isShow.value = false;
+      e.stopPropagation();
       emit("tagDelete", e);
     };
     const closeIconEl = () => {
@@ -127,7 +126,7 @@ var Tag = defineComponent({
     onUnmounted(() => unWatch());
     return () => {
       var _a;
-      return isShow.value && withDirectives(createVNode("div", {
+      return createVNode("div", {
         "class": ns.b(),
         "onClick": handleClick
       }, [createVNode("span", {
@@ -138,7 +137,7 @@ var Tag = defineComponent({
           backgroundColor: checked.value ? themeColor.value : !color.value ? "" : "var(--devui-base-bg, #ffffff)"
         },
         "title": tagTitle
-      }, [(_a = slots.default) == null ? void 0 : _a.call(slots), closeIconEl()])]), [[vShow, isShow.value]]);
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots), closeIconEl()])]);
     };
   }
 });

package/tag/index.umd.js

@@ -1 +1 @@
-(function(l,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis!="undefined"?globalThis:l||self,e(l.index={},l.Vue))})(this,function(l,e){"use strict";const m={type:{type:String,default:""},color:{type:String,default:""},titleContent:{type:String,default:""},checked:{type:Boolean,default:!1},deletable:{type:Boolean,default:!1}};function s(a,t,n){let c=a;return t&&(c+=`__${t}`),n&&(c+=`--${n}`),c}function v(a){const t=`devui-${a}`;return{b:()=>s(t),e:o=>o?s(t,o):"",m:o=>o?s(t,"",o):"",em:(o,d)=>o&&d?s(t,o,d):""}}function b(a){const t=v("tag");return e.computed(()=>{const{type:n,color:c,deletable:u}=a;return`${t.e("item")} ${t.m(n||(c?"colorful":"")||"default")} ${u?t.m("deletable"):""}`})}function y(a){return e.computed(()=>{const{color:t,type:n}=a,c={primary:"var(--devui-primary, #5e7ce0)",success:"var(--devui-success, #50d4ab)",warning:"var(--devui-warning, #fac20a)",danger:"var(--devui-danger, #f66f6a)"},u={"blue-w98":"#3383ff","aqua-w98":"#39afcc","olivine-w98":"#2fa898","green-w98":"#4eb15e","yellow-w98":"#b08d1a","orange-w98":"#d47f35","red-w98":"#f66f6a","pink-w98":"#f3689a","purple-w98":"#a97af8"};return!t&&n?c[n]:u[t]||t})}var $="",f=e.defineComponent({name:"DTag",props:m,emits:["click","tagDelete","checkedChange"],setup(a,{slots:t,emit:n}){const c=v("tag"),{type:u,color:i,checked:o,titleContent:d,deletable:C}=e.toRefs(a),w=b(a),p=y(a),k=d.value||"",T=()=>!u.value&&!i.value,g=e.ref(!0),S=r=>{n("click",r)},D=r=>{g.value=!1,n("tagDelete",r)},N=()=>C.value?e.createVNode("a",{class:"remove-button",onClick:D},[T()?e.createVNode(e.resolveComponent("d-icon"),{size:"12px",name:"error-o",color:"#adb0b8"},null):e.createVNode(e.resolveComponent("d-icon"),{size:"12px",name:"close",color:p.value},null)]):null,V=e.watch(o,r=>{n("checkedChange",r)});return e.onUnmounted(()=>V()),()=>{var r;return g.value&&e.withDirectives(e.createVNode("div",{class:c.b(),onClick:S},[e.createVNode("span",{class:w.value,style:{display:"block",color:o.value?"#fff":p.value,backgroundColor:o.value?p.value:i.value?"var(--devui-base-bg, #ffffff)":""},title:k},[(r=t.default)==null?void 0:r.call(t),N()])]),[[e.vShow,g.value]])}}}),h={title:"Tag \u6807\u7B7E",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(a){a.component(f.name,f)}};l.Tag=f,l.default=h,l.tagProps=m,Object.defineProperty(l,"__esModule",{value:!0}),l[Symbol.toStringTag]="Module"});
+(function(o,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis!="undefined"?globalThis:o||self,e(o.index={},o.Vue))})(this,function(o,e){"use strict";const m={type:{type:String,default:""},color:{type:String,default:""},titleContent:{type:String,default:""},checked:{type:Boolean,default:!1},deletable:{type:Boolean,default:!1}};function s(n,t,a){let l=n;return t&&(l+=`__${t}`),a&&(l+=`--${a}`),l}function v(n,t=!1){const a=t?`.devui-${n}`:`devui-${n}`;return{b:()=>s(a),e:c=>c?s(a,c):"",m:c=>c?s(a,"",c):"",em:(c,f)=>c&&f?s(a,c,f):""}}function y(n){const t=v("tag");return e.computed(()=>{const{type:a,color:l,deletable:u}=n;return`${t.e("item")} ${t.m(a||(l?"colorful":"")||"default")} ${u?t.m("deletable"):""}`})}function b(n){return e.computed(()=>{const{color:t,type:a}=n,l={primary:"var(--devui-primary, #5e7ce0)",success:"var(--devui-success, #50d4ab)",warning:"var(--devui-warning, #fac20a)",danger:"var(--devui-danger, #f66f6a)"},u={"blue-w98":"#3383ff","aqua-w98":"#39afcc","olivine-w98":"#2fa898","green-w98":"#4eb15e","yellow-w98":"#b08d1a","orange-w98":"#d47f35","red-w98":"#f66f6a","pink-w98":"#f3689a","purple-w98":"#a97af8"};return!t&&a?l[a]:u[t]||t})}var D="",p=e.defineComponent({name:"DTag",props:m,emits:["click","tagDelete","checkedChange"],setup(n,{slots:t,emit:a}){const l=v("tag"),{type:u,color:d,checked:i,titleContent:c,deletable:f}=e.toRefs(n),h=y(n),g=b(n),w=c.value||"",k=()=>!u.value&&!d.value,T=r=>{a("click",r)},$=r=>{r.stopPropagation(),a("tagDelete",r)},N=()=>f.value?e.createVNode("a",{class:"remove-button",onClick:$},[k()?e.createVNode(e.resolveComponent("d-icon"),{size:"12px",name:"error-o",color:"#adb0b8"},null):e.createVNode(e.resolveComponent("d-icon"),{size:"12px",name:"close",color:g.value},null)]):null,V=e.watch(i,r=>{a("checkedChange",r)});return e.onUnmounted(()=>V()),()=>{var r;return e.createVNode("div",{class:l.b(),onClick:T},[e.createVNode("span",{class:h.value,style:{display:"block",color:i.value?"#fff":g.value,backgroundColor:i.value?g.value:d.value?"var(--devui-base-bg, #ffffff)":""},title:w},[(r=t.default)==null?void 0:r.call(t),N()])])}}}),C={title:"Tag \u6807\u7B7E",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(n){n.component(p.name,p)}};o.Tag=p,o.default=C,o.tagProps=m,Object.defineProperty(o,"__esModule",{value:!0}),o[Symbol.toStringTag]="Module"});