vue-devui 1.0.0-beta.12 → 1.0.0-beta.16

package/modal/style.css

@@ -1 +1 @@
-.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}@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-modal-wrapper{justify-content:center;align-items:center;background-color:var(--devui-shadow, rgba(0, 0, 0, .2))}.devui-modal-content{background:var(--devui-fullscreen-overlay-bg, #ffffff);border-radius:var(--devui-border-radius, 2px)}.devui-modal-body{padding:20px 32px;color:var(--devui-text-weak, #575d6c)}.devui-modal-header{padding:32px 32px 0;height:56px;position:relative;border:none;user-select:none}.devui-modal-header .btn-close{position:absolute;right:20px;top:20px;font-size:var(--devui-font-size-icon, 16px);font-weight:700;line-height:1;color:#000;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}.devui-modal-header .header-alert-icon{display:inline-block;vertical-align:middle;margin-right:8px;line-height:16px;text-align:center}.devui-modal-footer{border-top:none;text-align:center;padding:0 32px 24px}@keyframes wipe-in-out{0%{opacity:.2;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}.devui-modal-wipe-enter-from{opacity:.2}.devui-modal-wipe-enter-active{animation-name:wipe-in-out;animation-duration:.3s}.devui-modal-wipe-leave-to{opacity:1}.devui-modal-wipe-leave-active{animation-name:wipe-in-out;animation-duration:.3s;animation-direction:reverse}.devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:normal;line-height:1.5}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:bold;line-height:1.5}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:bold;line-height:1.5}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:bold;line-height:1.5}.devui-btn{padding:3px 20px;font-size:var(--devui-font-size-md, 12px);height:28px;line-height:1.5;border-radius:var(--devui-border-radius, 2px);border-width:1px;border-color:transparent;background-color:transparent}.devui-btn.devui-btn-text{color:var(--devui-brand-active, #526ecc);padding:0}.devui-btn.devui-btn-text-dark{color:var(--devui-brand-active, #526ecc);padding:0}.devui-btn.devui-btn-common{color:var(--devui-text, #252b3a);min-width:64px;background-color:var(--devui-block, #ffffff);border-color:var(--devui-line, #adb0b8)}.devui-btn.devui-btn-stress{color:var(--devui-light-text, #ffffff);min-width:64px;background-color:var(--devui-primary, #5e7ce0)}.devui-btn.devui-btn-primary{color:var(--devui-light-text, #ffffff);min-width:64px;background-color:var(--devui-primary, #5e7ce0)}.devui-btn.devui-btn-danger{color:var(--devui-light-text, #ffffff);min-width:64px;background-color:var(--devui-contrast, #f66f6a)}.devui-btn.devui-btn-success{color:var(--devui-dark-text, #252b3a);min-width:64px;background-color:var(--devui-success, #50d4ab)}.devui-btn.devui-btn-warning{color:var(--devui-dark-text, #252b3a);min-width:64px;background-color:var(--devui-warning, #fac20a)}.devui-btn.devui-btn-left{border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-btn.devui-btn-right{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-btn.devui-btn-xs{padding:1px 5px;height:24px;font-size:var(--devui-font-size-sm, 12px);min-width:48px}.devui-btn.devui-btn-sm{padding:1px 15px;height:24px;font-size:var(--devui-font-size-sm, 12px);min-width:56px}.devui-btn.devui-btn-lg{padding:5px 23px;height:32px;font-size:var(--devui-font-size-lg, 14px);min-width:72px}.devui-btn.devui-btn-text:hover{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text:focus{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text:active{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text-dark:hover{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text-dark:focus{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text-dark:active{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-common:hover{border-color:var(--devui-form-control-line-active, #5e7ce0);color:var(--devui-brand-active, #526ecc)}.devui-btn.devui-btn-common:focus{border-color:var(--devui-form-control-line-active, #5e7ce0);color:var(--devui-brand-active, #526ecc)}.devui-btn.devui-btn-common:active{border-color:var(--devui-form-control-line-active, #5e7ce0);color:var(--devui-brand-active, #526ecc)}.devui-btn.devui-btn-stress:hover{background-color:var(--devui-primary-hover, #7693f5)}.devui-btn.devui-btn-stress:focus{background-color:var(--devui-primary-hover, #7693f5)}.devui-btn.devui-btn-stress:active{background-color:var(--devui-primary-active, #344899)}.devui-btn.devui-btn-primary:hover{background-color:var(--devui-primary-hover, #7693f5)}.devui-btn.devui-btn-primary:focus{background-color:var(--devui-primary-hover, #7693f5)}.devui-btn.devui-btn-primary:active{background-color:var(--devui-primary-active, #344899)}.devui-btn.devui-btn-danger:hover{background-color:var(--devui-contrast-hover, #ff8b87)}.devui-btn.devui-btn-danger:focus{background-color:var(--devui-contrast-hover, #ff8b87)}.devui-btn.devui-btn-danger:active{background-color:var(--devui-contrast-active, #de504e)}.devui-btn.devui-btn-success:hover{background-color:var(--devui-warning, #50d4ab)}.devui-btn.devui-btn-success:focus{background-color:var(--devui-warning, #50d4ab)}.devui-btn.devui-btn-success:active{background-color:var(--devui-warning, #50d4ab)}.devui-btn.devui-btn-warning:hover{background-color:var(--devui-warning, #fac20a)}.devui-btn.devui-btn-warning:focus{background-color:var(--devui-warning, #fac20a)}.devui-btn.devui-btn-warning:active{background-color:var(--devui-warning, #fac20a)}.devui-btn.devui-btn-common:disabled{color:var(--devui-disabled-text, #adb0b8);background:var(--devui-disabled-bg, #f5f5f6);border:1px solid var(--devui-disabled-line, #dfe1e6)}.devui-btn.devui-btn-primary:disabled{color:var(--devui-light-text, #ffffff);background:var(--devui-primary-disabled, #beccfa);border:none}.devui-btn.devui-btn-danger:disabled{color:var(--devui-disabled-text, #adb0b8);background:var(--devui-disabled-bg, #f5f5f6);border:1px solid var(--devui-disabled-line, #dfe1e6)}.devui-btn.devui-btn-text-dark:disabled{color:var(--devui-disabled-text, #adb0b8)}.devui-btn.devui-btn-text:disabled{color:var(--devui-disabled-text, #adb0b8)}.devui-btn.bordered.devui-btn-common{color:var(--devui-text, #252b3a);border-color:transparent}.devui-btn.bordered.devui-btn-common:hover,.devui-btn.bordered.devui-btn-common:focus{border-color:var(--devui-primary-hover, #7693f5)}.devui-btn.bordered.devui-btn-common:active{border-color:var(--devui-primary-active, #344899)}.devui-btn.bordered.devui-btn-stress,.devui-btn.bordered.devui-btn-primary{border-color:var(--devui-brand, #5e7ce0);color:var(--devui-brand, #5e7ce0);background-color:var(--devui-block, #ffffff)}.devui-btn.bordered.devui-btn-success{border-color:var(--devui-success, #50d4ab);color:var(--devui-success, #50d4ab);background-color:var(--devui-block, #ffffff)}.devui-btn.bordered.devui-btn-warning{border-color:var(--devui-warning, #fac20a);color:var(--devui-warning, #fac20a);background-color:var(--devui-block, #ffffff)}.devui-btn.bordered.devui-btn-danger{border-color:var(--devui-danger, #f66f6a);color:var(--devui-danger, #f66f6a);background-color:var(--devui-block, #ffffff)}.devui-btn.d-btn-icon:hover,.devui-btn.d-btn-icon:focus{border:1px solid var(--devui-list-item-hover-bg, #f2f5fc);background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-btn.d-btn-icon:disabled{background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-btn:not(:disabled).devui-btn-text.d-btn-icon-wrap,.devui-btn:not(:disabled).devui-btn-text-dark.d-btn-icon-wrap{color:var(--devui-text, #252b3a)}.devui-btn:not(:disabled).devui-btn-text.d-btn-icon-wrap .devui-icon-fix,.devui-btn:not(:disabled).devui-btn-text-dark.d-btn-icon-wrap .devui-icon-fix{color:var(--devui-text-weak, #575d6c)}.devui-btn:not(:disabled).devui-btn-text.d-btn-icon-wrap:hover,.devui-btn:not(:disabled).devui-btn-text-dark.d-btn-icon-wrap:hover{color:var(--devui-list-item-hover-text, #526ecc)}.devui-btn:not(:disabled).devui-btn-text.d-btn-icon-wrap:hover .devui-icon-fix,.devui-btn:not(:disabled).devui-btn-text-dark.d-btn-icon-wrap:hover .devui-icon-fix{color:var(--devui-icon-fill-active, #5e7ce0)}.devui-loading .devui-loading-default-spinner div{background-color:var(--devui-text, #252b3a)}.devui-btn-host{display:inline-block}.devui-btn{transition:background-color .2s;border-style:solid;white-space:nowrap;display:flex;align-items:center;justify-content:center}.devui-btn:disabled,.devui-btn[disabled]{cursor:not-allowed}.devui-btn.d-btn-icon{padding:7px 8px;line-height:1em;border:1px solid transparent}.devui-btn.d-btn-icon.devui-btn-xs,.devui-btn.d-btn-icon.devui-btn-sm{padding:5px}.devui-btn.d-btn-icon.devui-btn-xs{min-width:24px}.devui-btn.d-btn-icon.devui-btn-sm{min-width:24px}.devui-btn.d-btn-icon.devui-btn-lg{min-width:32px}.devui-btn.d-btn-icon.devui-btn-lg .icon{font-size:var(--devui-font-size-icon, 16px)}.devui-btn:not(.d-btn-icon) .icon-fix{font-size:var(--devui-font-size-icon, 16px)}.devui-icon-fix{position:relative;font-size:var(--devui-font-size, 12px)}.devui-btn.devui-btn-common:not(:disabled) .devui-icon-fix{color:var(--devui-text-weak, #575d6c)}.devui-btn.devui-btn-common:not(:disabled):hover .devui-icon-fix,.devui-btn.devui-btn-common:not(:disabled):active .devui-icon-fix,.devui-btn.devui-btn-common:not(:disabled):focus .devui-icon-fix{color:var(--devui-icon-fill-active, #5e7ce0)}.button-content{display:inline-block;position:relative}.clear-right-5{margin-right:5px}@keyframes devui-busy-spinner-anim{0%{transform:rotate(0) scale(1)}50%{transform:rotate(135deg) scale(1.5)}to{transform:rotate(270deg) 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-busy-default-spinner{position:relative;display:inline-block;width:15px;height:15px;animation:devui-busy-spinner-anim 1s linear infinite}.devui-busy-default-spinner div{position:absolute;left:44.5%;top:37%;width:6px;height:6px;border-radius:50%}.devui-busy-default-spinner .devui-loading-bar1{top:0;left:0;background:#5e7ce0;background:var(--devui-brand, #5e7ce0)}.devui-busy-default-spinner .devui-loading-bar2{top:0;left:9px;background:#859bff;background:var(--devui-brand-foil, #859bff)}.devui-busy-default-spinner .devui-loading-bar3{top:9px;left:0;background:#859bff;background:var(--devui-brand-foil, #859bff)}.devui-busy-default-spinner .devui-loading-bar4{top:9px;left:9px;background:#5e7ce0;background:var(--devui-brand, #5e7ce0)}
+.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}@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-modal-wrapper{justify-content:center;align-items:center;background-color:var(--devui-shadow, rgba(0, 0, 0, .2))}.devui-modal-content{background:var(--devui-fullscreen-overlay-bg, #ffffff);border-radius:var(--devui-border-radius, 2px)}.devui-modal-body{padding:20px 32px;color:var(--devui-text-weak, #575d6c)}.devui-modal-header{padding:32px 32px 0;height:56px;position:relative;border:none;user-select:none}.devui-modal-header .btn-close{position:absolute;right:20px;top:20px;font-size:var(--devui-font-size-icon, 16px);font-weight:700;line-height:1;color:#000;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}.devui-modal-header .header-alert-icon{display:inline-block;vertical-align:middle;margin-right:8px;line-height:16px;text-align:center}.devui-modal-footer{border-top:none;text-align:center;padding:0 32px 24px}@keyframes wipe-in-out{0%{opacity:.2;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}.devui-modal-wipe-enter-from{opacity:.2}.devui-modal-wipe-enter-active{animation-name:wipe-in-out;animation-duration:.3s}.devui-modal-wipe-leave-to{opacity:1}.devui-modal-wipe-leave-active{animation-name:wipe-in-out;animation-duration:.3s;animation-direction:reverse}@keyframes devui-busy-spinner-anim{0%{transform:rotate(0) scale(1)}50%{transform:rotate(135deg) scale(1.5)}to{transform:rotate(270deg) 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-busy-default-spinner{position:relative;display:inline-block;width:15px;height:15px;animation:devui-busy-spinner-anim 1s linear infinite}.devui-busy-default-spinner div{position:absolute;left:44.5%;top:37%;width:6px;height:6px;border-radius:50%}.devui-busy-default-spinner .devui-loading-bar1{top:0;left:0;background:#5e7ce0;background:var(--devui-brand, #5e7ce0)}.devui-busy-default-spinner .devui-loading-bar2{top:0;left:9px;background:#859bff;background:var(--devui-brand-foil, #859bff)}.devui-busy-default-spinner .devui-loading-bar3{top:9px;left:0;background:#859bff;background:var(--devui-brand-foil, #859bff)}.devui-busy-default-spinner .devui-loading-bar4{top:9px;left:9px;background:#5e7ce0;background:var(--devui-brand, #5e7ce0)}.devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:normal;line-height:1.5}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:bold;line-height:1.5}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:bold;line-height:1.5}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:bold;line-height:1.5}.devui-btn{padding:3px 20px;font-size:var(--devui-font-size-md, 12px);height:28px;line-height:1.5;border-radius:var(--devui-border-radius, 2px);border-width:1px;border-color:transparent;background-color:transparent}.devui-btn.devui-btn-text{color:var(--devui-brand-active, #526ecc);padding:0}.devui-btn.devui-btn-text-dark{color:var(--devui-brand-active, #526ecc);padding:0}.devui-btn.devui-btn-common{color:var(--devui-text, #252b3a);min-width:64px;background-color:var(--devui-block, #ffffff);border-color:var(--devui-line, #adb0b8)}.devui-btn.devui-btn-stress{color:var(--devui-light-text, #ffffff);min-width:64px;background-color:var(--devui-primary, #5e7ce0)}.devui-btn.devui-btn-primary{color:var(--devui-light-text, #ffffff);min-width:64px;background-color:var(--devui-primary, #5e7ce0)}.devui-btn.devui-btn-danger{color:var(--devui-light-text, #ffffff);min-width:64px;background-color:var(--devui-contrast, #f66f6a)}.devui-btn.devui-btn-success{color:var(--devui-dark-text, #252b3a);min-width:64px;background-color:var(--devui-success, #50d4ab)}.devui-btn.devui-btn-warning{color:var(--devui-dark-text, #252b3a);min-width:64px;background-color:var(--devui-warning, #fac20a)}.devui-btn.devui-btn-left{border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-btn.devui-btn-right{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-btn.devui-btn-xs{padding:1px 5px;height:24px;font-size:var(--devui-font-size-sm, 12px);min-width:48px}.devui-btn.devui-btn-sm{padding:1px 15px;height:24px;font-size:var(--devui-font-size-sm, 12px);min-width:56px}.devui-btn.devui-btn-lg{padding:5px 23px;height:32px;font-size:var(--devui-font-size-lg, 14px);min-width:72px}.devui-btn.devui-btn-text:hover{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text:focus{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text:active{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text-dark:hover{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text-dark:focus{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text-dark:active{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-common:hover{border-color:var(--devui-form-control-line-active, #5e7ce0);color:var(--devui-brand-active, #526ecc)}.devui-btn.devui-btn-common:focus{border-color:var(--devui-form-control-line-active, #5e7ce0);color:var(--devui-brand-active, #526ecc)}.devui-btn.devui-btn-common:active{border-color:var(--devui-form-control-line-active, #5e7ce0);color:var(--devui-brand-active, #526ecc)}.devui-btn.devui-btn-stress:hover{background-color:var(--devui-primary-hover, #7693f5)}.devui-btn.devui-btn-stress:focus{background-color:var(--devui-primary-hover, #7693f5)}.devui-btn.devui-btn-stress:active{background-color:var(--devui-primary-active, #344899)}.devui-btn.devui-btn-primary:hover{background-color:var(--devui-primary-hover, #7693f5)}.devui-btn.devui-btn-primary:focus{background-color:var(--devui-primary-hover, #7693f5)}.devui-btn.devui-btn-primary:active{background-color:var(--devui-primary-active, #344899)}.devui-btn.devui-btn-danger:hover{background-color:var(--devui-contrast-hover, #ff8b87)}.devui-btn.devui-btn-danger:focus{background-color:var(--devui-contrast-hover, #ff8b87)}.devui-btn.devui-btn-danger:active{background-color:var(--devui-contrast-active, #de504e)}.devui-btn.devui-btn-success:hover{background-color:var(--devui-success, #50d4ab)}.devui-btn.devui-btn-success:focus{background-color:var(--devui-success, #50d4ab)}.devui-btn.devui-btn-success:active{background-color:var(--devui-success, #50d4ab)}.devui-btn.devui-btn-warning:hover{background-color:var(--devui-warning, #fac20a)}.devui-btn.devui-btn-warning:focus{background-color:var(--devui-warning, #fac20a)}.devui-btn.devui-btn-warning:active{background-color:var(--devui-warning, #fac20a)}.devui-btn.devui-btn-common:disabled{color:var(--devui-disabled-text, #adb0b8);background:var(--devui-disabled-bg, #f5f5f6);border:1px solid var(--devui-disabled-line, #dfe1e6)}.devui-btn.devui-btn-primary:disabled{color:var(--devui-light-text, #ffffff);background:var(--devui-primary-disabled, #beccfa);border:none}.devui-btn.devui-btn-danger:disabled{color:var(--devui-disabled-text, #adb0b8);background:var(--devui-disabled-bg, #f5f5f6);border:1px solid var(--devui-disabled-line, #dfe1e6)}.devui-btn.devui-btn-text-dark:disabled{color:var(--devui-disabled-text, #adb0b8)}.devui-btn.devui-btn-text:disabled{color:var(--devui-disabled-text, #adb0b8)}.devui-btn.bordered.devui-btn-common{color:var(--devui-text, #252b3a);border-color:transparent}.devui-btn.bordered.devui-btn-common:hover,.devui-btn.bordered.devui-btn-common:focus{border-color:var(--devui-primary-hover, #7693f5)}.devui-btn.bordered.devui-btn-common:active{border-color:var(--devui-primary-active, #344899)}.devui-btn.bordered.devui-btn-stress,.devui-btn.bordered.devui-btn-primary{border-color:var(--devui-brand, #5e7ce0);color:var(--devui-brand, #5e7ce0);background-color:var(--devui-block, #ffffff)}.devui-btn.bordered.devui-btn-success{border-color:var(--devui-success, #50d4ab);color:var(--devui-success, #50d4ab);background-color:var(--devui-block, #ffffff)}.devui-btn.bordered.devui-btn-warning{border-color:var(--devui-warning, #fac20a);color:var(--devui-warning, #fac20a);background-color:var(--devui-block, #ffffff)}.devui-btn.bordered.devui-btn-danger{border-color:var(--devui-danger, #f66f6a);color:var(--devui-danger, #f66f6a);background-color:var(--devui-block, #ffffff)}.devui-btn.d-btn-icon:hover,.devui-btn.d-btn-icon:focus{border:1px solid var(--devui-list-item-hover-bg, #f2f5fc);background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-btn.d-btn-icon:disabled{background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-btn:not(:disabled).devui-btn-text.d-btn-icon-wrap,.devui-btn:not(:disabled).devui-btn-text-dark.d-btn-icon-wrap{color:var(--devui-text, #252b3a)}.devui-btn:not(:disabled).devui-btn-text.d-btn-icon-wrap .devui-icon-fix,.devui-btn:not(:disabled).devui-btn-text-dark.d-btn-icon-wrap .devui-icon-fix{color:var(--devui-text-weak, #575d6c)}.devui-btn:not(:disabled).devui-btn-text.d-btn-icon-wrap:hover,.devui-btn:not(:disabled).devui-btn-text-dark.d-btn-icon-wrap:hover{color:var(--devui-list-item-hover-text, #526ecc)}.devui-btn:not(:disabled).devui-btn-text.d-btn-icon-wrap:hover .devui-icon-fix,.devui-btn:not(:disabled).devui-btn-text-dark.d-btn-icon-wrap:hover .devui-icon-fix{color:var(--devui-icon-fill-active, #5e7ce0)}.devui-loading .devui-loading-default-spinner div{background-color:var(--devui-text, #252b3a)}.devui-btn-host{display:inline-block}.devui-btn{transition:background-color .2s;border-style:solid;white-space:nowrap;display:flex;align-items:center;justify-content:center}.devui-btn:disabled,.devui-btn[disabled]{cursor:not-allowed}.devui-btn.d-btn-icon{padding:7px 8px;line-height:1em;border:1px solid transparent}.devui-btn.d-btn-icon.devui-btn-xs,.devui-btn.d-btn-icon.devui-btn-sm{padding:5px}.devui-btn.d-btn-icon.devui-btn-xs{min-width:24px}.devui-btn.d-btn-icon.devui-btn-sm{min-width:24px}.devui-btn.d-btn-icon.devui-btn-lg{min-width:32px}.devui-btn.d-btn-icon.devui-btn-lg .icon{font-size:var(--devui-font-size-icon, 16px)}.devui-btn:not(.d-btn-icon) .icon-fix{font-size:var(--devui-font-size-icon, 16px)}.devui-icon-fix{position:relative;font-size:var(--devui-font-size, 12px)}.devui-btn.devui-btn-common:not(:disabled) .devui-icon-fix{color:var(--devui-text-weak, #575d6c)}.devui-btn.devui-btn-common:not(:disabled):hover .devui-icon-fix,.devui-btn.devui-btn-common:not(:disabled):active .devui-icon-fix,.devui-btn.devui-btn-common:not(:disabled):focus .devui-icon-fix{color:var(--devui-icon-fill-active, #5e7ce0)}.button-content{display:inline-block;position:relative}.clear-right-5{margin-right:5px}

package/nuxt/components/AutoComplete.js

@@ -0,0 +1,3 @@
+import '../../auto-complete/style.css' 
+
+export  { AutoComplete as default } from '../../auto-complete/index.es.js'

package/nuxt/components/CarouselItem.js

@@ -0,0 +1,3 @@
+import '../../carousel/style.css' 
+
+export  { CarouselItem as default } from '../../carousel/index.es.js'

package/nuxt/components/ColorPicker.js

@@ -0,0 +1,3 @@
+import '../../color-picker/style.css' 
+
+export  { ColorPicker as default } from '../../color-picker/index.es.js'

package/nuxt/components/DrawerService.js

@@ -0,0 +1,3 @@
+import '../../drawer/style.css' 
+
+export  { DrawerService as default } from '../../drawer/index.es.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-devui",
-  "version": "1.0.0-beta.12",
+  "version": "1.0.0-beta.16",
   "license": "MIT",
   "description": "DevUI components based on Vite and Vue3",
   "keywords": [
@@ -18,6 +18,26 @@
   "main": "vue-devui.umd.js",
   "module": "vue-devui.es.js",
   "style": "style.css",
+  "bin": {
+    "devui-cli": "./devui-cli/index.js"
+  },
+  "scripts": {
+    "dev": "yarn generate:theme && vitepress dev docs",
+    "build": "yarn generate:theme && node --max_old_space_size=8192 ./node_modules/.bin/vitepress build docs && cp public/* docs/.vitepress/dist/assets",
+    "serve": "vitepress serve docs",
+    "app:dev": "vite",
+    "app:build": "vite build",
+    "build:lib": "yarn predev && yarn build:components && yarn copy",
+    "test": "jest --config jest.config.js",
+    "build:components": "node ./devui-cli/index.js build",
+    "generate:theme": "node ./devui-cli/index.js generate:theme",
+    "generate:dts": "node ./devui-cli/index.js generate:dts",
+    "copy": "cp package.json build && cp ../../README.md build && cp devui/theme/theme.scss build/theme",
+    "clean:cli": "npm uninstall -g devui-cli & npm uninstall -g vue-devui",
+    "cli:create": "node ./devui-cli/index.js create -t component",
+    "predev": "node ./devui-cli/index.js create -t vue-devui --ignore-parse-error",
+    "prebuild": "node ./devui-cli/index.js create -t vue-devui --ignore-parse-error"
+  },
   "dependencies": {
     "@devui-design/icons": "^1.3.0",
     "@types/lodash-es": "^4.17.4",

package/popover/index.es.js

@@ -125,6 +125,10 @@ var Popover = defineComponent({
       type: Number,
       default: 1060
     },
+    controlled: {
+      type: Boolean,
+      default: false
+    },
     popType: {
       type: String,
       default: "default"
@@ -165,7 +169,8 @@ var Popover = defineComponent({
       mouseEnterDelay,
       mouseLeaveDelay,
       showAnimation,
-      popMaxWidth
+      popMaxWidth,
+      controlled
     } = toRefs(props);
     const style = __spreadValues({
       zIndex: zIndex.value
@@ -179,20 +184,24 @@ var Popover = defineComponent({
       }
       visible.value = true;
     };
-    const onClick = isClick ? event : null;
+    const onClick = isClick && controlled.value ? event : null;
     const enter = debounce(() => {
       visible.value = true;
     }, mouseEnterDelay.value);
     const leave = debounce(() => {
       visible.value = false;
     }, mouseLeaveDelay.value);
-    const onMouseenter = isClick ? null : enter;
-    const onMouseleave = isClick ? null : leave;
+    const onMouseenter = !isClick && controlled.value ? enter : null;
+    const onMouseleave = !isClick && controlled.value ? leave : null;
     const hiddenContext = () => {
+      if (!controlled.value)
+        return;
       visible.value = false;
     };
     popMaxWidth.value && (style.maxWidth = `${popMaxWidth.value}px`);
     watch(() => props.visible, (newVal) => {
+      if (controlled.value)
+        return;
       visible.value = newVal;
     });
     return () => {

package/popover/index.umd.js

@@ -1 +1 @@
-var R=Object.defineProperty;var C=Object.getOwnPropertySymbols;var $=Object.prototype.hasOwnProperty,G=Object.prototype.propertyIsEnumerable;var M=(o,t,u)=>t in o?R(o,t,{enumerable:!0,configurable:!0,writable:!0,value:u}):o[t]=u,S=(o,t)=>{for(var u in t||(t={}))$.call(t,u)&&M(o,u,t[u]);if(C)for(var u of C(t))G.call(t,u)&&M(o,u,t[u]);return o};(function(o,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(o=typeof globalThis!="undefined"?globalThis:o||self,t(o.index={},o.Vue))})(this,function(o,t){"use strict";var u=(e,i)=>{let n=null;return()=>{n&&clearTimeout(n),n=setTimeout(()=>{e==null||e()},i)}};const T=typeof window!="undefined";function g(e,i,n){document.addEventListener?e&&i&&n&&e.addEventListener(i,n,!1):e&&i&&n&&e.attachEvent("on"+i,n)}const a=Symbol("@@clickoutside"),p=new Map;let b,f=0,x=!0;function D(e,i,n){return T&&x&&(x=!1,g(document,"mousedown",r=>{b=r}),g(document,"mouseup",r=>{for(const[s,v]of p)v[a].documentHandler(r,b)})),function(r,s){!n||!i.instance||!r.target||!s.target||e.contains(r.target)||e.contains(s.target)||e===r.target||e[a].bindingFn&&e[a].bindingFn()}}const V={beforeMount:function(e,i,n){f++,p.set(f,e),e[a]={nid:f,documentHandler:D(e,i,n),bindingFn:i.value}},updated:function(e,i,n){e[a].documentHandler=D(e,i,n),e[a].bindingFn=i.value},unmounted:function(e){p.delete(e[a].nid),delete e[a]}};var J="";const N={success:{name:"right-o",color:"rgb(61, 204, 166)"},error:{name:"error-o",color:"rgb(249, 95, 91)"},info:{name:"info-o",color:"rgb(81, 112, 255)"},warning:{name:"warning-o",color:"rgb(254, 204, 85)"},default:{}};var l=t.defineComponent({name:"DPopover",directives:{clickoutside:V},props:{visible:{type:Boolean,default:!1},position:{type:String,default:"bottom"},content:{type:String,default:"default"},trigger:{type:String,default:"click"},zIndex:{type:Number,default:1060},popType:{type:String,default:"default"},showAnimation:{type:Boolean,default:!0},mouseEnterDelay:{type:Number,default:150},mouseLeaveDelay:{type:Number,default:100},popMaxWidth:{type:Number,default:void 0},popoverStyle:{type:Object,default:()=>({})}},setup(e,i){const{slots:n}=i,r=t.ref(e.visible),{position:s,content:v,zIndex:E,trigger:F,popType:L,popoverStyle:P,mouseEnterDelay:z,mouseLeaveDelay:A,showAnimation:H,popMaxWidth:h}=t.toRefs(e),m=S({zIndex:E.value},P.value),y=F.value==="click",c=t.reactive(N[L.value]),j=y?function(){if(r.value){r.value=!1;return}r.value=!0}:null,I=u(()=>{r.value=!0},z.value),W=u(()=>{r.value=!1},A.value),O=y?null:I,_=y?null:W,q=()=>{r.value=!1};return h.value&&(m.maxWidth=`${h.value}px`),t.watch(()=>e.visible,d=>{r.value=d}),()=>{var d,w;return t.createVNode("div",{class:["devui-popover",s.value,{"devui-popover-animation":H.value,"devui-popover-isVisible":r.value}]},[t.withDirectives(t.createVNode("div",{class:"devui-popover-reference",onMouseenter:O,onMouseleave:_,onClick:j},[(d=n.reference)==null?void 0:d.call(n)]),[[t.resolveDirective("clickoutside"),q]]),t.createVNode("div",{class:["devui-popover-content",c.name?"is-icon":""],style:m},[c.name&&t.createVNode(t.resolveComponent("d-icon"),{name:c.name,color:c.color,class:"devui-popover-icon",size:"16px"},null),((w=n.content)==null?void 0:w.call(n))||t.createVNode("span",null,[v.value]),t.createVNode("span",{class:"after",style:m},null)])])}}});l.install=function(e){e.component(l.name,l)};var k={title:"Popover \u60AC\u6D6E\u63D0\u793A",category:"\u53CD\u9988",status:"100%",install(e){e.use(l)}};o.Popover=l,o.default=k,Object.defineProperty(o,"__esModule",{value:!0}),o[Symbol.toStringTag]="Module"});
+var B=Object.defineProperty;var M=Object.getOwnPropertySymbols;var G=Object.prototype.hasOwnProperty,J=Object.prototype.propertyIsEnumerable;var S=(o,t,r)=>t in o?B(o,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[t]=r,T=(o,t)=>{for(var r in t||(t={}))G.call(t,r)&&S(o,r,t[r]);if(M)for(var r of M(t))J.call(t,r)&&S(o,r,t[r]);return o};(function(o,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(o=typeof globalThis!="undefined"?globalThis:o||self,t(o.index={},o.Vue))})(this,function(o,t){"use strict";var r=(e,i)=>{let n=null;return()=>{n&&clearTimeout(n),n=setTimeout(()=>{e==null||e()},i)}};const V=typeof window!="undefined";function b(e,i,n){document.addEventListener?e&&i&&n&&e.addEventListener(i,n,!1):e&&i&&n&&e.attachEvent("on"+i,n)}const a=Symbol("@@clickoutside"),p=new Map;let x,v=0,D=!0;function h(e,i,n){return V&&D&&(D=!1,b(document,"mousedown",u=>{x=u}),b(document,"mouseup",u=>{for(const[c,m]of p)m[a].documentHandler(u,x)})),function(u,c){!n||!i.instance||!u.target||!c.target||e.contains(u.target)||e.contains(c.target)||e===u.target||e[a].bindingFn&&e[a].bindingFn()}}const N={beforeMount:function(e,i,n){v++,p.set(v,e),e[a]={nid:v,documentHandler:h(e,i,n),bindingFn:i.value}},updated:function(e,i,n){e[a].documentHandler=h(e,i,n),e[a].bindingFn=i.value},unmounted:function(e){p.delete(e[a].nid),delete e[a]}};var K="";const k={success:{name:"right-o",color:"rgb(61, 204, 166)"},error:{name:"error-o",color:"rgb(249, 95, 91)"},info:{name:"info-o",color:"rgb(81, 112, 255)"},warning:{name:"warning-o",color:"rgb(254, 204, 85)"},default:{}};var l=t.defineComponent({name:"DPopover",directives:{clickoutside:N},props:{visible:{type:Boolean,default:!1},position:{type:String,default:"bottom"},content:{type:String,default:"default"},trigger:{type:String,default:"click"},zIndex:{type:Number,default:1060},controlled:{type:Boolean,default:!1},popType:{type:String,default:"default"},showAnimation:{type:Boolean,default:!0},mouseEnterDelay:{type:Number,default:150},mouseLeaveDelay:{type:Number,default:100},popMaxWidth:{type:Number,default:void 0},popoverStyle:{type:Object,default:()=>({})}},setup(e,i){const{slots:n}=i,u=t.ref(e.visible),{position:c,content:m,zIndex:F,trigger:L,popType:P,popoverStyle:z,mouseEnterDelay:A,mouseLeaveDelay:H,showAnimation:j,popMaxWidth:w,controlled:s}=t.toRefs(e),y=T({zIndex:F.value},z.value),g=L.value==="click",d=t.reactive(k[P.value]),I=function(){if(u.value){u.value=!1;return}u.value=!0},W=g&&s.value?I:null,O=r(()=>{u.value=!0},A.value),_=r(()=>{u.value=!1},H.value),q=!g&&s.value?O:null,R=!g&&s.value?_:null,$=()=>{!s.value||(u.value=!1)};return w.value&&(y.maxWidth=`${w.value}px`),t.watch(()=>e.visible,f=>{s.value||(u.value=f)}),()=>{var f,C;return t.createVNode("div",{class:["devui-popover",c.value,{"devui-popover-animation":j.value,"devui-popover-isVisible":u.value}]},[t.withDirectives(t.createVNode("div",{class:"devui-popover-reference",onMouseenter:q,onMouseleave:R,onClick:W},[(f=n.reference)==null?void 0:f.call(n)]),[[t.resolveDirective("clickoutside"),$]]),t.createVNode("div",{class:["devui-popover-content",d.name?"is-icon":""],style:y},[d.name&&t.createVNode(t.resolveComponent("d-icon"),{name:d.name,color:d.color,class:"devui-popover-icon",size:"16px"},null),((C=n.content)==null?void 0:C.call(n))||t.createVNode("span",null,[m.value]),t.createVNode("span",{class:"after",style:y},null)])])}}});l.install=function(e){e.component(l.name,l)};var E={title:"Popover \u60AC\u6D6E\u63D0\u793A",category:"\u53CD\u9988",status:"100%",install(e){e.use(l)}};o.Popover=l,o.default=E,Object.defineProperty(o,"__esModule",{value:!0}),o[Symbol.toStringTag]="Module"});

package/slider/index.es.js

@@ -129,11 +129,8 @@ var Slider = defineComponent({
         inputValue.value = props.min;
         percentDispaly.value = "0%";
       } else {
-        if (inputValue.value < props.min) {
-          inputValue.value = props.min;
-        }
-        if (inputValue.value > props.max) {
-          inputValue.value = props.max;
+        if (inputValue.value < props.min || inputValue.value > props.max) {
+          return;
         }
         const re = /^(?:[1-9]?\d|100)$/;
         if (re.test(`${inputValue.value}`)) {

package/slider/index.umd.js

@@ -1 +1 @@
-(function(a,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(a=typeof globalThis!="undefined"?globalThis:a||self,t(a.index={},a.Vue))})(this,function(a,t){"use strict";const x={disabled:{type:Boolean,default:!1},max:{type:Number,default:100},min:{type:Number,default:0},modelValue:{type:Number,default:0},showInput:{type:Boolean,default:!1},step:{type:Number,default:1},tipsRenderer:{type:String,default:""}};var R="",o=t.defineComponent({name:"DSlider",props:x,emits:["update:modelValue"],setup(e,v){let m=!0,f=0,s=0;const d=t.ref(!1),V=t.ref(null),l=t.ref(e.modelValue),r=t.ref(0),h=t.ref(0),u=t.ref(""),S=()=>e.showInput?t.createVNode("div",{class:"devui-input__out-wrap"},[t.createVNode("input",{onInput:D,value:l.value+""},null)]):"";e.modelValue>e.max?u.value="100%":e.modelValue<e.min?u.value="0%":u.value=(e.modelValue-e.min)*100/(e.max-e.min)+"%",t.onMounted(()=>{const n=V.value.clientWidth;r.value=n*(l.value-e.min)/(e.max-e.min)});function M(n){d.value=!0,!e.disabled&&(n.preventDefault(),E(n),window.addEventListener("mousemove",N),window.addEventListener("mouseup",_))}function E(n){m=!1,s=n.clientX,f=r.value,h.value=f}function N(n){d.value=!0;const c=n.clientX-s;h.value=f+c,b(h.value)}function _(){d.value=!1,setTimeout(()=>{m=!0},100),window.removeEventListener("mousemove",N),window.removeEventListener("mouseup",_)}function b(n){const i=Math.round(V.value.clientWidth);n<0&&(n=0);const c=i/((e.max-e.min)/e.step),y=Math.round(n/c)*c;if(Math.round(y)>=i){r.value=i,l.value=e.max,u.value="100%",v.emit("update:modelValue",e.max);return}u.value=Math.round(y*100/i)+"%",l.value=Math.round(y*(e.max-e.min)/i)+e.min,r.value=n,v.emit("update:modelValue",l.value)}function X(n){if(!e.disabled&&m){s=n.target.getBoundingClientRect().left;const i=n.clientX;b(i-s),M(n)}else return}function D(n){l.value=parseInt(n.target.value),l.value?(l.value<e.min&&(l.value=e.min),l.value>e.max&&(l.value=e.max),/^(?:[1-9]?\d|100)$/.test(`${l.value}`)&&(u.value=(l.value-e.min)*100/(e.max-e.min)+"%",v.emit("update:modelValue",l.value))):(l.value=e.min,u.value="0%")}const w=t.computed(()=>e.disabled?" disabled":""),I=()=>t.createVNode("div",{class:"devui-slider_popover",style:{left:u.value,opacity:d.value?1:0}},[t.createVNode("div",{class:"devui-slider_popover-arrow"},null),t.createVNode("div",{class:"devui-slider_popover-content"},[l.value+" "+e.tipsRenderer])]);return()=>t.createVNode("div",{class:"devui-slider"},[t.createVNode("div",{ref:V,class:"devui-slider__runway"+w.value,onMousedown:X,onMouseout:()=>d.value=!1},[t.createVNode("div",{class:"devui-slider__bar"+w.value,style:{width:u.value}},null),t.createVNode("div",{class:"devui-slider__button"+w.value,style:{left:u.value},onMousedown:M,onMouseenter:()=>d.value=!0,onMouseout:()=>d.value=!1},null),e.tipsRenderer==="null"?"":I()]),t.createVNode("span",{class:"devui-min_count"},[e.min]),t.createVNode("span",{class:"devui-max_count"},[e.max]),S()])}});o.install=function(e){e.component(o.name,o)};var g={title:"Slider \u6ED1\u5757",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(e){e.use(o)}};a.Slider=o,a.default=g,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});
+(function(a,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(a=typeof globalThis!="undefined"?globalThis:a||self,t(a.index={},a.Vue))})(this,function(a,t){"use strict";const g={disabled:{type:Boolean,default:!1},max:{type:Number,default:100},min:{type:Number,default:0},modelValue:{type:Number,default:0},showInput:{type:Boolean,default:!1},step:{type:Number,default:1},tipsRenderer:{type:String,default:""}};var R="",o=t.defineComponent({name:"DSlider",props:g,emits:["update:modelValue"],setup(e,v){let m=!0,f=0,s=0;const d=t.ref(!1),V=t.ref(null),l=t.ref(e.modelValue),r=t.ref(0),h=t.ref(0),u=t.ref(""),S=()=>e.showInput?t.createVNode("div",{class:"devui-input__out-wrap"},[t.createVNode("input",{onInput:D,value:l.value+""},null)]):"";e.modelValue>e.max?u.value="100%":e.modelValue<e.min?u.value="0%":u.value=(e.modelValue-e.min)*100/(e.max-e.min)+"%",t.onMounted(()=>{const n=V.value.clientWidth;r.value=n*(l.value-e.min)/(e.max-e.min)});function M(n){d.value=!0,!e.disabled&&(n.preventDefault(),E(n),window.addEventListener("mousemove",N),window.addEventListener("mouseup",_))}function E(n){m=!1,s=n.clientX,f=r.value,h.value=f}function N(n){d.value=!0;const c=n.clientX-s;h.value=f+c,b(h.value)}function _(){d.value=!1,setTimeout(()=>{m=!0},100),window.removeEventListener("mousemove",N),window.removeEventListener("mouseup",_)}function b(n){const i=Math.round(V.value.clientWidth);n<0&&(n=0);const c=i/((e.max-e.min)/e.step),y=Math.round(n/c)*c;if(Math.round(y)>=i){r.value=i,l.value=e.max,u.value="100%",v.emit("update:modelValue",e.max);return}u.value=Math.round(y*100/i)+"%",l.value=Math.round(y*(e.max-e.min)/i)+e.min,r.value=n,v.emit("update:modelValue",l.value)}function X(n){if(!e.disabled&&m){s=n.target.getBoundingClientRect().left;const i=n.clientX;b(i-s),M(n)}else return}function D(n){if(l.value=parseInt(n.target.value),!l.value)l.value=e.min,u.value="0%";else{if(l.value<e.min||l.value>e.max)return;/^(?:[1-9]?\d|100)$/.test(`${l.value}`)&&(u.value=(l.value-e.min)*100/(e.max-e.min)+"%",v.emit("update:modelValue",l.value))}}const w=t.computed(()=>e.disabled?" disabled":""),I=()=>t.createVNode("div",{class:"devui-slider_popover",style:{left:u.value,opacity:d.value?1:0}},[t.createVNode("div",{class:"devui-slider_popover-arrow"},null),t.createVNode("div",{class:"devui-slider_popover-content"},[l.value+" "+e.tipsRenderer])]);return()=>t.createVNode("div",{class:"devui-slider"},[t.createVNode("div",{ref:V,class:"devui-slider__runway"+w.value,onMousedown:X,onMouseout:()=>d.value=!1},[t.createVNode("div",{class:"devui-slider__bar"+w.value,style:{width:u.value}},null),t.createVNode("div",{class:"devui-slider__button"+w.value,style:{left:u.value},onMousedown:M,onMouseenter:()=>d.value=!0,onMouseout:()=>d.value=!1},null),e.tipsRenderer==="null"?"":I()]),t.createVNode("span",{class:"devui-min_count"},[e.min]),t.createVNode("span",{class:"devui-max_count"},[e.max]),S()])}});o.install=function(e){e.component(o.name,o)};var x={title:"Slider \u6ED1\u5757",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(e){e.use(o)}};a.Slider=o,a.default=x,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});

package/slider/style.css

@@ -1 +1 @@
-.devui-slider{position:relative;width:90%;display:block}.devui-slider.disabled{cursor:not-allowed;background-color:var(--devui-disabled-line, #dfe1e6);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway{position:relative;width:100%;padding:4px 0;margin:4px 0;cursor:pointer;box-sizing:border-box;height:5px;display:flex;align-items:center;background-color:var(--devui-default-bg, #f3f6f8)}.devui-slider__runway.disabled{cursor:not-allowed}.devui-slider__runway .devui-slider__bar{height:6px;background-color:var(--devui-default-line, #5e7ce0);border-top-left-radius:var(--devui-border-radius, 2px);border-bottom-left-radius:var(--devui-border-radius, 2px);position:absolute}.devui-slider__runway .devui-slider__bar.disabled{background-color:var(--devui-disabled-line, #dfe1e6);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway .devui-slider__bar.disabled:hover{cursor:not-allowed}.devui-slider__runway .devui-slider__button{position:absolute;width:14px;height:14px;border:2px solid var(--devui-default-line, #5e7ce0);background-color:var(--devui-base-bg, #ffffff);border-radius:50%;margin-left:-7px;transition:transform .2s ease-in-out}.devui-slider__runway .devui-slider__button:hover{transform:scale(1.2)}.devui-slider__runway .devui-slider__button.disabled{background-color:var(--devui-base-bg, #ffffff);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway .devui-slider__button.disabled:hover{cursor:not-allowed;transform:none}.devui-slider__runway .devui-slider_popover{position:relative;bottom:26px;transform:translate(-50%);border-radius:var(--devui-border-radius-feedback, 4px);font-size:var(--devui-font-size-sm, 12px);color:var(--devui-feedback-overlay-text, #dfe1e6)}.devui-slider__runway .devui-slider_popover .devui-slider_popover-arrow{position:absolute;left:50%;margin-left:-4px;bottom:-4px;width:8px;height:8px;transform:rotate(45deg);display:block;z-index:-1;background-color:var(--devui-feedback-overlay-bg, #464d6e)}.devui-slider__runway .devui-slider_popover .devui-slider_popover-content{padding:5px 14px;text-align:center;border-radius:var(--devui-border-radius-feedback, 4px);background-color:var(--devui-feedback-overlay-bg, #464d6e)}.devui-slider .devui-min_count{position:absolute;top:15px;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a)}.devui-slider .devui-max_count{position:absolute;top:15px;right:0;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a)}.devui-slider .devui-input__out-wrap{font-size:var(--devui-font-size, 12px);position:absolute;right:-60px;top:-12px;padding:5px 10px;cursor:text;margin-left:20px}.devui-slider .devui-input__out-wrap input{width:40px;text-align:center}
+.devui-slider{position:relative;width:90%;display:block}.devui-slider.disabled{cursor:not-allowed;background-color:var(--devui-disabled-line, #dfe1e6);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway{position:relative;width:100%;padding:4px 0;margin:4px 0;cursor:pointer;box-sizing:border-box;height:5px;display:flex;align-items:center;background-color:var(--devui-default-bg, #f3f6f8)}.devui-slider__runway.disabled{cursor:not-allowed}.devui-slider__runway .devui-slider__bar{height:6px;background-color:var(--devui-default-line, #5e7ce0);border-top-left-radius:var(--devui-border-radius, 2px);border-bottom-left-radius:var(--devui-border-radius, 2px);position:absolute}.devui-slider__runway .devui-slider__bar.disabled{background-color:var(--devui-disabled-line, #dfe1e6);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway .devui-slider__bar.disabled:hover{cursor:not-allowed}.devui-slider__runway .devui-slider__button{position:absolute;width:14px;height:14px;border:2px solid var(--devui-default-line, #5e7ce0);background-color:var(--devui-base-bg, #ffffff);border-radius:50%;margin-left:-7px;transition:transform .2s ease-in-out}.devui-slider__runway .devui-slider__button:hover{transform:scale(1.2)}.devui-slider__runway .devui-slider__button.disabled{background-color:var(--devui-base-bg, #ffffff);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway .devui-slider__button.disabled:hover{cursor:not-allowed;transform:none}.devui-slider__runway .devui-slider_popover{position:relative;bottom:26px;transform:translate(-50%);border-radius:var(--devui-border-radius-feedback, 4px);font-size:var(--devui-font-size-sm, 12px);color:var(--devui-feedback-overlay-text, #dfe1e6)}.devui-slider__runway .devui-slider_popover .devui-slider_popover-arrow{position:absolute;left:50%;margin-left:-4px;bottom:-4px;width:8px;height:8px;transform:rotate(45deg);display:block;z-index:-1;background-color:var(--devui-feedback-overlay-bg, #464d6e)}.devui-slider__runway .devui-slider_popover .devui-slider_popover-content{padding:5px 14px;text-align:center;border-radius:var(--devui-border-radius-feedback, 4px);background-color:var(--devui-feedback-overlay-bg, #464d6e)}.devui-slider .devui-min_count{position:absolute;top:15px;left:0;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a)}.devui-slider .devui-max_count{position:absolute;top:15px;right:0;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a)}.devui-slider .devui-input__out-wrap{font-size:var(--devui-font-size, 12px);position:absolute;right:-60px;top:-12px;padding:5px 10px;cursor:text;margin-left:20px}.devui-slider .devui-input__out-wrap input{width:40px;text-align:center}

package/splitter/index.es.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { defineComponent, inject, reactive, ref, watch, computed, onMounted, withDirectives, createVNode, provide, onUnmounted, resolveComponent, onUpdated } from "vue";
+import { defineComponent, reactive, ref, onMounted, onBeforeUnmount, renderSlot, useSlots, createVNode, inject, watch, computed, withDirectives, provide, onUnmounted, resolveComponent, onUpdated } from "vue";
 const splitterProps = {
   orientation: {
     type: String,
@@ -23,6 +23,118 @@ const splitterProps = {
     default: true
   }
 };
+const tooltipProps = {
+  position: {
+    type: String,
+    default: "top"
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
+  },
+  content: {
+    type: String
+  },
+  mouseLeaveDelay: {
+    type: String,
+    default: "150"
+  },
+  mouseEnterDelay: {
+    type: String,
+    default: "100"
+  }
+};
+var tooltip = "";
+var DToolTip = defineComponent({
+  name: "DTooltip",
+  props: tooltipProps,
+  setup(props) {
+    const position = reactive({
+      left: 0,
+      top: 0
+    });
+    const arrowStyle = (attr, value) => {
+      document.getElementById("devui-arrow").style[attr] = value;
+    };
+    const slotElement = ref(null);
+    onMounted(() => {
+      slotElement.value.children[0].onmouseenter = function() {
+        const tooltip2 = document.createElement("div");
+        const arrow = document.createElement("div");
+        const tooltipcontent = document.createElement("div");
+        tooltip2.classList.add("tooltip");
+        arrow.classList.add("arrow");
+        tooltipcontent.classList.add("tooltipcontent");
+        arrow.id = "devui-arrow";
+        tooltip2.id = "devui-tooltip1";
+        setTimeout(() => {
+          document.getElementById("devui-tooltip").appendChild(tooltip2);
+          tooltip2.appendChild(arrow);
+          tooltip2.appendChild(tooltipcontent);
+          tooltipcontent.innerHTML = props.content;
+          tooltip2.style.opacity = "1";
+          tooltip2.style.zIndex = "999";
+          arrow.style.border = "5px solid transparent";
+          switch (props.position) {
+            case "top":
+              position.left = slotElement.value.children[0].offsetLeft - tooltip2.offsetWidth / 2 + slotElement.value.children[0].offsetWidth / 2 - 5;
+              position.top = slotElement.value.children[0].offsetTop - 10 - tooltipcontent.offsetHeight;
+              arrow.style.top = `${tooltipcontent.offsetHeight}px`;
+              arrow.style.left = `${tooltipcontent.offsetWidth / 2 + 5}px`;
+              arrow.style.borderTop = "5px solid rgb(70, 77, 110)";
+              break;
+            case "bottom":
+              position.top = slotElement.value.children[0].offsetHeight + slotElement.value.children[0].offsetTop + 10;
+              position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth / 2 - tooltipcontent.offsetWidth / 2 - 5;
+              arrowStyle("borderBottom", "5px solid rgb(70, 77, 110)");
+              arrow.style.top = "-10px";
+              arrow.style.left = `${tooltipcontent.offsetWidth / 2 + 5}px`;
+              arrow.style.borderBottom = "5px solid rgb(70, 77, 110)";
+              break;
+            case "left":
+              position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight / 2 - tooltipcontent.offsetHeight / 2;
+              position.left = slotElement.value.children[0].offsetLeft - 20 - tooltipcontent.offsetWidth;
+              arrowStyle("borderLeft", "5px solid rgb(70, 77, 110)");
+              arrow.style.left = `${tooltipcontent.offsetWidth + 10}px`;
+              arrow.style.top = `${tooltipcontent.offsetHeight / 2 - 5}px`;
+              arrow.style.borderLeft = "5px solid rgb(70, 77, 110)";
+              break;
+            case "right":
+              position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth;
+              position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight / 2 - tooltipcontent.offsetHeight / 2;
+              arrowStyle("borderRight", "5px solid rgb(70, 77, 110)");
+              arrow.style.top = `${tooltipcontent.offsetHeight / 2 - 5}px`;
+              arrow.style.left = "-0px";
+              arrow.style.borderRight = "5px solid rgb(70, 77, 110)";
+              break;
+          }
+          tooltip2.style.top = position.top + 5 + "px";
+          tooltip2.style.left = position.left + "px";
+        }, props.mouseEnterDelay);
+      };
+      slotElement.value.children[0].onmouseleave = function() {
+        setTimeout(() => {
+          document.getElementById("devui-tooltip1").removeChild(document.getElementById("devui-arrow"));
+          document.getElementById("devui-tooltip").removeChild(document.getElementById("devui-tooltip1"));
+        }, props.mouseLeaveDelay);
+      };
+    });
+    onBeforeUnmount(() => {
+      slotElement.value.children[0].onmouseenter = null;
+      slotElement.value.children[0].onmouseleave = null;
+    });
+    return () => {
+      const defaultSlot = renderSlot(useSlots(), "default");
+      return createVNode("div", {
+        "class": "devui-tooltip",
+        "id": "devui-tooltip"
+      }, [createVNode("div", {
+        "class": "slotElement",
+        "ref": slotElement
+      }, [defaultSlot])]);
+    };
+  }
+});
 function setStyle(element, style) {
   const oldStyle = {};
   const styleKeys = Object.keys(style);
@@ -111,7 +223,6 @@ function normalizeEvent(e) {
     originalEvent: e
   };
 }
-var splitterBar = "";
 const splitterBarProps = {
   index: {
     type: Number
@@ -132,9 +243,13 @@ const splitterBarProps = {
     type: Boolean
   }
 };
+var splitterBar = "";
 var DSplitterBar = defineComponent({
   name: "DSplitterBar",
   props: splitterBarProps,
+  components: {
+    DToolTip
+  },
   setup(props) {
     const store = inject("splitterStore");
     const state = reactive({
@@ -279,21 +394,38 @@ var DSplitterBar = defineComponent({
     onMounted(() => {
       initialCollapseStatus();
     });
+    const renderCollapsedTip = () => {
+      var _a, _b, _c, _d;
+      const {
+        pane,
+        nearPane
+      } = queryPanes(props.index, props.index + 1);
+      const isCollapsed = ((_b = (_a = pane == null ? void 0 : pane.component) == null ? void 0 : _a.props) == null ? void 0 : _b.collapsed) || ((_d = (_c = nearPane == null ? void 0 : nearPane.component) == null ? void 0 : _c.props) == null ? void 0 : _d.collapsed);
+      return isCollapsed ? "\u5C55\u5F00" : "\u6536\u8D77";
+    };
     return () => {
       return withDirectives(createVNode("div", {
         "class": state.wrapperClass,
         "ref": domRef
-      }, [props.showCollapseButton ? createVNode("div", {
-        "class": ["prev", prevClass.value],
-        "onClick": () => {
-          handleCollapsePrePane();
-        }
-      }, null) : null, createVNode("div", {
+      }, [props.showCollapseButton && createVNode(DToolTip, {
+        "content": renderCollapsedTip()
+      }, {
+        default: () => [createVNode("div", {
+          "class": ["prev", prevClass.value],
+          "onClick": () => {
+            handleCollapsePrePane();
+          }
+        }, null)]
+      }), createVNode("div", {
         "class": "devui-resize-handle"
-      }, null), props.showCollapseButton ? createVNode("div", {
-        "class": ["next", nextClass.value],
-        "onClick": () => handleCollapseNextPane()
-      }, null) : null]), [[resize, resizeProp]]);
+      }, null), props.showCollapseButton && createVNode(DToolTip, {
+        "content": renderCollapsedTip()
+      }, {
+        default: () => [createVNode("div", {
+          "class": ["next", nextClass.value],
+          "onClick": () => handleCollapseNextPane()
+        }, null)]
+      })]), [[resize, resizeProp]]);
     };
   }
 });
@@ -571,8 +703,7 @@ var SplitterPane = defineComponent({
         return ele.offsetWidth;
       }
     };
-    watch(() => props.collapsed, (collapsed) => {
-      const ele = domRef.value;
+    watch([() => props.collapsed, domRef], ([collapsed, ele]) => {
       if (!ele) {
         return;
       }

package/splitter/index.umd.js

@@ -1 +1 @@
-var U=Object.defineProperty;var _=(g,o,v)=>o in g?U(g,o,{enumerable:!0,configurable:!0,writable:!0,value:v}):g[o]=v;var k=(g,o,v)=>(_(g,typeof o!="symbol"?o+"":o,v),v);(function(g,o){typeof exports=="object"&&typeof module!="undefined"?o(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],o):(g=typeof globalThis!="undefined"?globalThis:g||self,o(g.index={},g.Vue))})(this,function(g,o){"use strict";const v={orientation:{type:String,default:"horizontal"},splitBarSize:{type:String,default:"2px"},disabledBarSize:{type:String,default:"1px"},showCollapseButton:{type:Boolean,default:!0}};function b(t,e){const i={},s=Object.keys(e);return s.forEach(n=>{i[n]=t.style[n]}),s.forEach(n=>{t.style[n]=e[n]}),i}function R(t,e){return t.classList?t.classList.contains(e):` ${t.className} `.indexOf(` ${e} `)>-1}function X(t,e){t.classList?t.classList.add(e):R(t,e)||(t.className=`${t.className} ${e}`)}function y(t,e){if(t.classList)t.classList.remove(e);else if(R(t,e)){const i=t.className;t.className=` ${i} `.replace(` ${e} `," ")}}const F={mounted(t,{value:e}){t.$value=e,e.enableResize&&H(t)},unmounted(t,{value:e}){e.enableResize&&$(t,"mousedown",L)}};function H(t){N(t,"mousedown",L)}function N(t,e,i){t.addEventListener&&t.addEventListener(e,i)}function $(t,e,i){t.removeEventListener&&t.removeEventListener(e,i)}function L(t){var n;const e=(n=t==null?void 0:t.target)==null?void 0:n.$value;if(!e)return;N(document,"mousemove",i),N(document,"mouseup",s),e.onPressEvent(E(t));function i(p){e.onDragEvent(E(p))}function s(p){$(document,"mousemove",i),$(document,"mouseup",s),e.onReleaseEvent(E(p))}}function E(t){return{pageX:t.pageX,pageY:t.pageY,clientX:t.clientX,clientY:t.clientY,offsetX:t.offsetX,offsetY:t.offsetY,type:t.type,originalEvent:t}}var K="";const T={index:{type:Number},orientation:{type:String,required:!0},splitBarSize:{type:String,required:!0},disabledBarSize:{type:String,default:"1px"},showCollapseButton:{type:Boolean}};var q=o.defineComponent({name:"DSplitterBar",props:T,setup(t){const e=o.inject("splitterStore"),i=o.reactive({wrapperClass:`devui-splitter-bar devui-splitter-bar-${t.orientation}`}),s=o.ref();o.watch([()=>t.splitBarSize,s],([a,c])=>{c instanceof HTMLElement&&b(c,{flexBasis:a})},{immediate:!0}),o.watch([()=>e.state.panes,s],([a,c])=>{e.isStaticBar(t.index)?b(c,{flexBasis:t.disabledBarSize}):i.wrapperClass+=" resizable"},{deep:!0});const n={pageX:0,pageY:0,originalX:0,originalY:0};let p;const d={enableResize:!0,onPressEvent:function({originalEvent:a}){a.stopPropagation(),!!e.isResizable(t.index)&&(p=e.dragState(t.index),n.originalX=a.pageX,n.originalY=a.pageY)},onDragEvent:function({originalEvent:a}){if(a.stopPropagation(),!e.isResizable(t.index))return;n.pageX=a.pageX,n.pageY=a.pageY;let c;t.orientation==="vertical"?c=n.pageY-n.originalY:c=n.pageX-n.originalX,e.setSize(p,c)},onReleaseEvent:function({originalEvent:a}){if(a.stopPropagation(),!e.isResizable(t.index))return;n.pageX=a.pageX,n.pageY=a.pageY;let c;t.orientation==="vertical"?c=n.pageY-n.originalY:c=n.pageX-n.originalX,e.setSize(p,c)}},f=(a,c)=>{const x=e.getPane(a),h=e.getPane(c);return{pane:x,nearPane:h}},z=(a,c,x)=>{var B,M,V,j;const h=((M=(B=a==null?void 0:a.component)==null?void 0:B.props)==null?void 0:M.collapsible)&&x,C=(j=(V=a==null?void 0:a.component)==null?void 0:V.props)==null?void 0:j.collapsed,Y=c.collapsed;return{"devui-collapse":h,collapsed:C,hidden:Y}},m=o.computed(()=>{var h,C;const{pane:a,nearPane:c}=f(t.index,t.index+1),x=((C=(h=a==null?void 0:a.component)==null?void 0:h.props)==null?void 0:C.collapseDirection)!=="after"||t.index===0;return z(a,c,x)}),S=o.computed(()=>{var h,C;const{pane:a,nearPane:c}=f(t.index+1,t.index),x=((C=(h=a==null?void 0:a.component)==null?void 0:h.props)==null?void 0:C.collapseDirection)!=="before"||t.index+1===e.state.paneCount-1;return z(a,c,x)}),l=()=>{var h,C,Y,B;const{pane:a,nearPane:c}=f(t.index,t.index+1);((C=(h=a==null?void 0:a.component)==null?void 0:h.props)==null?void 0:C.collapsed)||((B=(Y=c==null?void 0:c.component)==null?void 0:Y.props)==null?void 0:B.collapsed)?X(s.value,"none-resizable"):y(s.value,"none-resizable")},r=a=>{e.tooglePane(t.index,t.index+1,a),l()},u=a=>{e.tooglePane(t.index+1,t.index,a),l()},P=()=>{r(!0),u(!0)};return o.onMounted(()=>{P()}),()=>o.withDirectives(o.createVNode("div",{class:i.wrapperClass,ref:s},[t.showCollapseButton?o.createVNode("div",{class:["prev",m.value],onClick:()=>{r()}},null):null,o.createVNode("div",{class:"devui-resize-handle"},null),t.showCollapseButton?o.createVNode("div",{class:["next",S.value],onClick:()=>u()},null):null]),[[F,d]])}});class G{constructor(){k(this,"state");this.state=o.reactive({panes:[],splitterContainerSize:0,paneCount:0})}setPanes({panes:e}){this.state.panes=e.map((i,s)=>{var n;return i.component&&(i.component.exposed.order.value=s*2),i.getPaneSize=(n=i==null?void 0:i.component)==null?void 0:n.exposed.getPaneSize,i}),this.state.paneCount=e.length}setSplitter({containerSize:e}){this.state.splitterContainerSize=e}getPane(e){if(!this.state.panes||e<0||e>=this.state.panes.length)throw new Error("no pane can return.");return this.state.panes[e]}dragState(e){const i=this.getPane(e),s=this.getPane(e+1),n=i.getPaneSize()+s.getPaneSize();return{prev:{index:e,initialSize:i.getPaneSize(),minSize:this.toPixels(i.component.props.minSize)||n-this.toPixels(s.component.props.maxSize)||0,maxSize:this.toPixels(i.component.props.maxSize)||n-this.toPixels(s.component.props.minSize)||n},next:{index:e+1,initialSize:s.getPaneSize(),minSize:this.toPixels(s.component.props.minSize)||n-this.toPixels(i.component.props.maxSize)||0,maxSize:this.toPixels(s.component.props.maxSize)||n-this.toPixels(i.component.props.minSize)||n}}}clamp(e,i,s){return Math.min(i,Math.max(e,s))}resize(e,i){const s=this.getPane(e.index),n=this.state.splitterContainerSize,p=this.clamp(e.minSize,e.maxSize,e.initialSize+i);let d="";this.isPercent(s.component.props.size)?d=p/n*100+"%":d=p+"px",s.component.props.size=d,s.component.emit("sizeChange",d)}isResizable(e){var p,d,f,z,m,S,l,r;const i=this.getPane(e),s=this.getPane(e+1),n=((d=(p=i==null?void 0:i.component)==null?void 0:p.props)==null?void 0:d.collapsed)||((z=(f=s==null?void 0:s.component)==null?void 0:f.props)==null?void 0:z.collapsed);return((S=(m=i==null?void 0:i.component)==null?void 0:m.props)==null?void 0:S.resizable)&&((r=(l=s==null?void 0:s.component)==null?void 0:l.props)==null?void 0:r.resizable)&&!n}isStaticBar(e){var n,p,d,f;const i=this.getPane(e),s=this.getPane(e+1);return!(((p=(n=i==null?void 0:i.component)==null?void 0:n.props)==null?void 0:p.resizable)&&((f=(d=s==null?void 0:s.component)==null?void 0:d.props)==null?void 0:f.resizable))}isPercent(e){return/%$/.test(e)}toPixels(e){let i=parseFloat(e);return this.isPercent(e)&&(i=this.state.splitterContainerSize*i/100),i}tooglePane(e,i,s){var d,f,z,m,S,l,r,u,P,a,c,x,h;const n=this.getPane(e),p=this.getPane(i);((f=(d=n==null?void 0:n.component)==null?void 0:d.props)==null?void 0:f.collapsible)&&(n.component.props.collapsed=s?(m=(z=n==null?void 0:n.component)==null?void 0:z.props)==null?void 0:m.collapsed:!((l=(S=n==null?void 0:n.component)==null?void 0:S.props)==null?void 0:l.collapsed),(a=(r=p==null?void 0:p.component)==null?void 0:r.exposed)==null||a.toggleNearPaneFlexGrow((P=(u=n==null?void 0:n.component)==null?void 0:u.props)==null?void 0:P.collapsed),(h=n==null?void 0:n.component)==null||h.emit("collapsedChange",(x=(c=n==null?void 0:n.component)==null?void 0:c.props)==null?void 0:x.collapsed))}setSize(e,i){const s=this.getPane(e.prev.index),n=this.getPane(e.next.index);s.component.props.size&&n.component.props.size?(this.resize(e.prev,i),this.resize(e.next,-i)):n.component.props.size?this.resize(e.next,-i):this.resize(e.prev,i)}}var A="",w=o.defineComponent({name:"DSplitter",components:{DSplitterBar:q},props:v,emits:[],setup(t,e){var f,z;const i=new G,s=o.reactive({panes:[]});s.panes=((z=(f=e.slots).DSplitterPane)==null?void 0:z.call(f))||[],i.setPanes({panes:s.panes}),o.provide("orientation",t.orientation),o.provide("splitterStore",i);const n=o.ref(),p=()=>{if(!n)return;let m=0;t.orientation==="vertical"?m=n.value.clientHeight:m=n.value.clientWidth,i.setSplitter({containerSize:m})},d=new ResizeObserver(p);return o.watch(n,m=>{!m||(p(),d.observe(n.value))}),o.onUnmounted(()=>{d.disconnect()}),()=>{const{splitBarSize:m,orientation:S,showCollapseButton:l}=t,r=["devui-splitter",`devui-splitter-${S}`];return o.createVNode("div",{class:r,ref:n},[s.panes,s.panes.filter((u,P,a)=>P!==a.length-1).map((u,P)=>o.createVNode(o.resolveComponent("d-splitter-bar"),{key:P,style:`order: ${P*2+1}`,splitBarSize:m,orientation:S,index:P,showCollapseButton:l},null))])}}});const O={size:{type:String},minSize:{type:String},maxSize:{type:String},resizable:{type:Boolean,default:!0},collapsible:{type:Boolean,default:!1},collapsed:{type:Boolean,default:!1},collapseDirection:{type:String,default:"both"},shrink:{type:Boolean,default:!1},shrinkWidth:{type:Number,default:36}};var J="",D=o.defineComponent({name:"DSplitterPane",props:O,emits:["sizeChange","collapsedChange"],setup(t,{slots:e,expose:i}){const s=o.inject("splitterStore"),n=o.ref(),p=o.ref();o.watch([p,n],([l,r])=>{!r||b(r,{order:l})});const d=(l,r)=>{if(!r)return;r.style.flexBasis=l;const u="devui-splitter-pane-fixed";l?X(r,u):y(r,u)};o.watch([()=>t.size,n],([l,r])=>{d(l,r)},{immediate:!0});const f=o.inject("orientation");let z="";o.onMounted(()=>{z=t.size,s.setPanes({panes:s.state.panes})}),o.onUpdated(()=>{s.setPanes({panes:s.state.panes})});const m=()=>{const l=n.value;if(!!l)return f==="vertical"?l.offsetHeight:l.offsetWidth};return o.watch(()=>t.collapsed,l=>{const r=n.value;if(!r)return;const u="devui-splitter-pane-hidden";l?X(r,u):y(r,u),l&&t.shrink?(y(r,u),b(r,{flexBasis:`${t.shrinkWidth}px`})):b(r,{flexBasis:z})},{immediate:!0}),i({order:p,getPaneSize:m,toggleNearPaneFlexGrow:l=>{const r=n.value;if(!(r instanceof HTMLElement))return;const u="devui-splitter-pane-grow";R(r,u)?y(r,u):l&&X(r,u)}}),()=>{var l;return o.createVNode("div",{class:"devui-splitter-pane",ref:n},[(l=e.default)==null?void 0:l.call(e)])}}});w.install=function(t){t.component(w.name,w),t.component(D.name,D)};var W={title:"Splitter \u5206\u5272\u5668",category:"\u5E03\u5C40",status:"100%",install(t){t.use(w)}};g.Splitter=w,g.default=W,Object.defineProperty(g,"__esModule",{value:!0}),g[Symbol.toStringTag]="Module"});
+var A=Object.defineProperty;var K=(h,s,P)=>s in h?A(h,s,{enumerable:!0,configurable:!0,writable:!0,value:P}):h[s]=P;var k=(h,s,P)=>(K(h,typeof s!="symbol"?s+"":s,P),P);(function(h,s){typeof exports=="object"&&typeof module!="undefined"?s(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],s):(h=typeof globalThis!="undefined"?globalThis:h||self,s(h.index={},h.Vue))})(this,function(h,s){"use strict";const P={orientation:{type:String,default:"horizontal"},splitBarSize:{type:String,default:"2px"},disabledBarSize:{type:String,default:"1px"},showCollapseButton:{type:Boolean,default:!0}},j={position:{type:String,default:"top"},showAnimation:{type:Boolean,default:!0},content:{type:String},mouseLeaveDelay:{type:String,default:"150"},mouseEnterDelay:{type:String,default:"100"}};var J="",N=s.defineComponent({name:"DTooltip",props:j,setup(t){const e=s.reactive({left:0,top:0}),i=(o,r)=>{document.getElementById("devui-arrow").style[o]=r},n=s.ref(null);return s.onMounted(()=>{n.value.children[0].onmouseenter=function(){const o=document.createElement("div"),r=document.createElement("div"),a=document.createElement("div");o.classList.add("tooltip"),r.classList.add("arrow"),a.classList.add("tooltipcontent"),r.id="devui-arrow",o.id="devui-tooltip1",setTimeout(()=>{switch(document.getElementById("devui-tooltip").appendChild(o),o.appendChild(r),o.appendChild(a),a.innerHTML=t.content,o.style.opacity="1",o.style.zIndex="999",r.style.border="5px solid transparent",t.position){case"top":e.left=n.value.children[0].offsetLeft-o.offsetWidth/2+n.value.children[0].offsetWidth/2-5,e.top=n.value.children[0].offsetTop-10-a.offsetHeight,r.style.top=`${a.offsetHeight}px`,r.style.left=`${a.offsetWidth/2+5}px`,r.style.borderTop="5px solid rgb(70, 77, 110)";break;case"bottom":e.top=n.value.children[0].offsetHeight+n.value.children[0].offsetTop+10,e.left=n.value.children[0].offsetLeft+n.value.children[0].offsetWidth/2-a.offsetWidth/2-5,i("borderBottom","5px solid rgb(70, 77, 110)"),r.style.top="-10px",r.style.left=`${a.offsetWidth/2+5}px`,r.style.borderBottom="5px solid rgb(70, 77, 110)";break;case"left":e.top=n.value.children[0].offsetTop+n.value.children[0].offsetHeight/2-a.offsetHeight/2,e.left=n.value.children[0].offsetLeft-20-a.offsetWidth,i("borderLeft","5px solid rgb(70, 77, 110)"),r.style.left=`${a.offsetWidth+10}px`,r.style.top=`${a.offsetHeight/2-5}px`,r.style.borderLeft="5px solid rgb(70, 77, 110)";break;case"right":e.left=n.value.children[0].offsetLeft+n.value.children[0].offsetWidth,e.top=n.value.children[0].offsetTop+n.value.children[0].offsetHeight/2-a.offsetHeight/2,i("borderRight","5px solid rgb(70, 77, 110)"),r.style.top=`${a.offsetHeight/2-5}px`,r.style.left="-0px",r.style.borderRight="5px solid rgb(70, 77, 110)";break}o.style.top=e.top+5+"px",o.style.left=e.left+"px"},t.mouseEnterDelay)},n.value.children[0].onmouseleave=function(){setTimeout(()=>{document.getElementById("devui-tooltip1").removeChild(document.getElementById("devui-arrow")),document.getElementById("devui-tooltip").removeChild(document.getElementById("devui-tooltip1"))},t.mouseLeaveDelay)}}),s.onBeforeUnmount(()=>{n.value.children[0].onmouseenter=null,n.value.children[0].onmouseleave=null}),()=>{const o=s.renderSlot(s.useSlots(),"default");return s.createVNode("div",{class:"devui-tooltip",id:"devui-tooltip"},[s.createVNode("div",{class:"slotElement",ref:n},[o])])}}});function B(t,e){const i={},n=Object.keys(e);return n.forEach(o=>{i[o]=t.style[o]}),n.forEach(o=>{t.style[o]=e[o]}),i}function X(t,e){return t.classList?t.classList.contains(e):` ${t.className} `.indexOf(` ${e} `)>-1}function $(t,e){t.classList?t.classList.add(e):X(t,e)||(t.className=`${t.className} ${e}`)}function E(t,e){if(t.classList)t.classList.remove(e);else if(X(t,e)){const i=t.className;t.className=` ${i} `.replace(` ${e} `," ")}}const F={mounted(t,{value:e}){t.$value=e,e.enableResize&&q(t)},unmounted(t,{value:e}){e.enableResize&&D(t,"mousedown",T)}};function q(t){Y(t,"mousedown",T)}function Y(t,e,i){t.addEventListener&&t.addEventListener(e,i)}function D(t,e,i){t.removeEventListener&&t.removeEventListener(e,i)}function T(t){var o;const e=(o=t==null?void 0:t.target)==null?void 0:o.$value;if(!e)return;Y(document,"mousemove",i),Y(document,"mouseup",n),e.onPressEvent(R(t));function i(r){e.onDragEvent(R(r))}function n(r){D(document,"mousemove",i),D(document,"mouseup",n),e.onReleaseEvent(R(r))}}function R(t){return{pageX:t.pageX,pageY:t.pageY,clientX:t.clientX,clientY:t.clientY,offsetX:t.offsetX,offsetY:t.offsetY,type:t.type,originalEvent:t}}const G={index:{type:Number},orientation:{type:String,required:!0},splitBarSize:{type:String,required:!0},disabledBarSize:{type:String,default:"1px"},showCollapseButton:{type:Boolean}};var Q="",I=s.defineComponent({name:"DSplitterBar",props:G,components:{DToolTip:N},setup(t){const e=s.inject("splitterStore"),i=s.reactive({wrapperClass:`devui-splitter-bar devui-splitter-bar-${t.orientation}`}),n=s.ref();s.watch([()=>t.splitBarSize,n],([l,p])=>{p instanceof HTMLElement&&B(p,{flexBasis:l})},{immediate:!0}),s.watch([()=>e.state.panes,n],([l,p])=>{e.isStaticBar(t.index)?B(p,{flexBasis:t.disabledBarSize}):i.wrapperClass+=" resizable"},{deep:!0});const o={pageX:0,pageY:0,originalX:0,originalY:0};let r;const a={enableResize:!0,onPressEvent:function({originalEvent:l}){l.stopPropagation(),!!e.isResizable(t.index)&&(r=e.dragState(t.index),o.originalX=l.pageX,o.originalY=l.pageY)},onDragEvent:function({originalEvent:l}){if(l.stopPropagation(),!e.isResizable(t.index))return;o.pageX=l.pageX,o.pageY=l.pageY;let p;t.orientation==="vertical"?p=o.pageY-o.originalY:p=o.pageX-o.originalX,e.setSize(r,p)},onReleaseEvent:function({originalEvent:l}){if(l.stopPropagation(),!e.isResizable(t.index))return;o.pageX=l.pageX,o.pageY=l.pageY;let p;t.orientation==="vertical"?p=o.pageY-o.originalY:p=o.pageX-o.originalX,e.setSize(r,p)}},f=(l,p)=>{const x=e.getPane(l),g=e.getPane(p);return{pane:x,nearPane:g}},S=(l,p,x)=>{var C,M,W,V;const g=((M=(C=l==null?void 0:l.component)==null?void 0:C.props)==null?void 0:M.collapsible)&&x,z=(V=(W=l==null?void 0:l.component)==null?void 0:W.props)==null?void 0:V.collapsed,w=p.collapsed;return{"devui-collapse":g,collapsed:z,hidden:w}},m=s.computed(()=>{var g,z;const{pane:l,nearPane:p}=f(t.index,t.index+1),x=((z=(g=l==null?void 0:l.component)==null?void 0:g.props)==null?void 0:z.collapseDirection)!=="after"||t.index===0;return S(l,p,x)}),y=s.computed(()=>{var g,z;const{pane:l,nearPane:p}=f(t.index+1,t.index),x=((z=(g=l==null?void 0:l.component)==null?void 0:g.props)==null?void 0:z.collapseDirection)!=="before"||t.index+1===e.state.paneCount-1;return S(l,p,x)}),d=()=>{var g,z,w,C;const{pane:l,nearPane:p}=f(t.index,t.index+1);((z=(g=l==null?void 0:l.component)==null?void 0:g.props)==null?void 0:z.collapsed)||((C=(w=p==null?void 0:p.component)==null?void 0:w.props)==null?void 0:C.collapsed)?$(n.value,"none-resizable"):E(n.value,"none-resizable")},c=l=>{e.tooglePane(t.index,t.index+1,l),d()},u=l=>{e.tooglePane(t.index+1,t.index,l),d()},v=()=>{c(!0),u(!0)};s.onMounted(()=>{v()});const b=()=>{var g,z,w,C;const{pane:l,nearPane:p}=f(t.index,t.index+1);return((z=(g=l==null?void 0:l.component)==null?void 0:g.props)==null?void 0:z.collapsed)||((C=(w=p==null?void 0:p.component)==null?void 0:w.props)==null?void 0:C.collapsed)?"\u5C55\u5F00":"\u6536\u8D77"};return()=>s.withDirectives(s.createVNode("div",{class:i.wrapperClass,ref:n},[t.showCollapseButton&&s.createVNode(N,{content:b()},{default:()=>[s.createVNode("div",{class:["prev",m.value],onClick:()=>{c()}},null)]}),s.createVNode("div",{class:"devui-resize-handle"},null),t.showCollapseButton&&s.createVNode(N,{content:b()},{default:()=>[s.createVNode("div",{class:["next",y.value],onClick:()=>u()},null)]})]),[[F,a]])}});class O{constructor(){k(this,"state");this.state=s.reactive({panes:[],splitterContainerSize:0,paneCount:0})}setPanes({panes:e}){this.state.panes=e.map((i,n)=>{var o;return i.component&&(i.component.exposed.order.value=n*2),i.getPaneSize=(o=i==null?void 0:i.component)==null?void 0:o.exposed.getPaneSize,i}),this.state.paneCount=e.length}setSplitter({containerSize:e}){this.state.splitterContainerSize=e}getPane(e){if(!this.state.panes||e<0||e>=this.state.panes.length)throw new Error("no pane can return.");return this.state.panes[e]}dragState(e){const i=this.getPane(e),n=this.getPane(e+1),o=i.getPaneSize()+n.getPaneSize();return{prev:{index:e,initialSize:i.getPaneSize(),minSize:this.toPixels(i.component.props.minSize)||o-this.toPixels(n.component.props.maxSize)||0,maxSize:this.toPixels(i.component.props.maxSize)||o-this.toPixels(n.component.props.minSize)||o},next:{index:e+1,initialSize:n.getPaneSize(),minSize:this.toPixels(n.component.props.minSize)||o-this.toPixels(i.component.props.maxSize)||0,maxSize:this.toPixels(n.component.props.maxSize)||o-this.toPixels(i.component.props.minSize)||o}}}clamp(e,i,n){return Math.min(i,Math.max(e,n))}resize(e,i){const n=this.getPane(e.index),o=this.state.splitterContainerSize,r=this.clamp(e.minSize,e.maxSize,e.initialSize+i);let a="";this.isPercent(n.component.props.size)?a=r/o*100+"%":a=r+"px",n.component.props.size=a,n.component.emit("sizeChange",a)}isResizable(e){var r,a,f,S,m,y,d,c;const i=this.getPane(e),n=this.getPane(e+1),o=((a=(r=i==null?void 0:i.component)==null?void 0:r.props)==null?void 0:a.collapsed)||((S=(f=n==null?void 0:n.component)==null?void 0:f.props)==null?void 0:S.collapsed);return((y=(m=i==null?void 0:i.component)==null?void 0:m.props)==null?void 0:y.resizable)&&((c=(d=n==null?void 0:n.component)==null?void 0:d.props)==null?void 0:c.resizable)&&!o}isStaticBar(e){var o,r,a,f;const i=this.getPane(e),n=this.getPane(e+1);return!(((r=(o=i==null?void 0:i.component)==null?void 0:o.props)==null?void 0:r.resizable)&&((f=(a=n==null?void 0:n.component)==null?void 0:a.props)==null?void 0:f.resizable))}isPercent(e){return/%$/.test(e)}toPixels(e){let i=parseFloat(e);return this.isPercent(e)&&(i=this.state.splitterContainerSize*i/100),i}tooglePane(e,i,n){var a,f,S,m,y,d,c,u,v,b,l,p,x;const o=this.getPane(e),r=this.getPane(i);((f=(a=o==null?void 0:o.component)==null?void 0:a.props)==null?void 0:f.collapsible)&&(o.component.props.collapsed=n?(m=(S=o==null?void 0:o.component)==null?void 0:S.props)==null?void 0:m.collapsed:!((d=(y=o==null?void 0:o.component)==null?void 0:y.props)==null?void 0:d.collapsed),(b=(c=r==null?void 0:r.component)==null?void 0:c.exposed)==null||b.toggleNearPaneFlexGrow((v=(u=o==null?void 0:o.component)==null?void 0:u.props)==null?void 0:v.collapsed),(x=o==null?void 0:o.component)==null||x.emit("collapsedChange",(p=(l=o==null?void 0:o.component)==null?void 0:l.props)==null?void 0:p.collapsed))}setSize(e,i){const n=this.getPane(e.prev.index),o=this.getPane(e.next.index);n.component.props.size&&o.component.props.size?(this.resize(e.prev,i),this.resize(e.next,-i)):o.component.props.size?this.resize(e.next,-i):this.resize(e.prev,i)}}var Z="",L=s.defineComponent({name:"DSplitter",components:{DSplitterBar:I},props:P,emits:[],setup(t,e){var f,S;const i=new O,n=s.reactive({panes:[]});n.panes=((S=(f=e.slots).DSplitterPane)==null?void 0:S.call(f))||[],i.setPanes({panes:n.panes}),s.provide("orientation",t.orientation),s.provide("splitterStore",i);const o=s.ref(),r=()=>{if(!o)return;let m=0;t.orientation==="vertical"?m=o.value.clientHeight:m=o.value.clientWidth,i.setSplitter({containerSize:m})},a=new ResizeObserver(r);return s.watch(o,m=>{!m||(r(),a.observe(o.value))}),s.onUnmounted(()=>{a.disconnect()}),()=>{const{splitBarSize:m,orientation:y,showCollapseButton:d}=t,c=["devui-splitter",`devui-splitter-${y}`];return s.createVNode("div",{class:c,ref:o},[n.panes,n.panes.filter((u,v,b)=>v!==b.length-1).map((u,v)=>s.createVNode(s.resolveComponent("d-splitter-bar"),{key:v,style:`order: ${v*2+1}`,splitBarSize:m,orientation:y,index:v,showCollapseButton:d},null))])}}});const U={size:{type:String},minSize:{type:String},maxSize:{type:String},resizable:{type:Boolean,default:!0},collapsible:{type:Boolean,default:!1},collapsed:{type:Boolean,default:!1},collapseDirection:{type:String,default:"both"},shrink:{type:Boolean,default:!1},shrinkWidth:{type:Number,default:36}};var ee="",H=s.defineComponent({name:"DSplitterPane",props:U,emits:["sizeChange","collapsedChange"],setup(t,{slots:e,expose:i}){const n=s.inject("splitterStore"),o=s.ref(),r=s.ref();s.watch([r,o],([d,c])=>{!c||B(c,{order:d})});const a=(d,c)=>{if(!c)return;c.style.flexBasis=d;const u="devui-splitter-pane-fixed";d?$(c,u):E(c,u)};s.watch([()=>t.size,o],([d,c])=>{a(d,c)},{immediate:!0});const f=s.inject("orientation");let S="";s.onMounted(()=>{S=t.size,n.setPanes({panes:n.state.panes})}),s.onUpdated(()=>{n.setPanes({panes:n.state.panes})});const m=()=>{const d=o.value;if(!!d)return f==="vertical"?d.offsetHeight:d.offsetWidth};return s.watch([()=>t.collapsed,o],([d,c])=>{if(!c)return;const u="devui-splitter-pane-hidden";d?$(c,u):E(c,u),d&&t.shrink?(E(c,u),B(c,{flexBasis:`${t.shrinkWidth}px`})):B(c,{flexBasis:S})},{immediate:!0}),i({order:r,getPaneSize:m,toggleNearPaneFlexGrow:d=>{const c=o.value;if(!(c instanceof HTMLElement))return;const u="devui-splitter-pane-grow";X(c,u)?E(c,u):d&&$(c,u)}}),()=>{var d;return s.createVNode("div",{class:"devui-splitter-pane",ref:o},[(d=e.default)==null?void 0:d.call(e)])}}});L.install=function(t){t.component(L.name,L),t.component(H.name,H)};var _={title:"Splitter \u5206\u5272\u5668",category:"\u5E03\u5C40",status:"100%",install(t){t.use(L)}};h.Splitter=L,h.default=_,Object.defineProperty(h,"__esModule",{value:!0}),h[Symbol.toStringTag]="Module"});

package/splitter/style.css

@@ -1 +1 @@
-.devui-splitter-bar{background-color:var(--devui-dividing-line, #dfe1e6);display:flex;position:relative;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0}.devui-splitter-bar .devui-collapse{background-color:var(--devui-dividing-line, #dfe1e6);position:absolute;z-index:15;cursor:pointer}.devui-splitter-bar .devui-collapse:before,.devui-splitter-bar .devui-collapse:after{content:"";width:10px;height:2px;background:#ffffff;display:block;position:absolute}.devui-splitter-bar .devui-collapse:hover{background-color:var(--devui-brand-hover, #7693f5)}.devui-splitter-bar-horizontal .devui-collapse{width:12px;height:30px}.devui-splitter-bar-horizontal .devui-collapse.prev.hidden,.devui-splitter-bar-horizontal .devui-collapse.next.hidden{display:none}.devui-splitter-bar-horizontal .devui-collapse.prev{border-radius:0 var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px) 0;left:100%}.devui-splitter-bar-horizontal .devui-collapse.prev:before,.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed:before{top:9px;left:1px}.devui-splitter-bar-horizontal .devui-collapse.prev:before{transform:rotate(-70deg)}.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed:before{transform:rotate(70deg)}.devui-splitter-bar-horizontal .devui-collapse.prev:after,.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed:after{top:18px;left:1px}.devui-splitter-bar-horizontal .devui-collapse.prev:after{transform:rotate(70deg)}.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed:after{transform:rotate(-70deg)}.devui-splitter-bar-horizontal .devui-collapse.next{border-radius:var(--devui-border-radius-feedback, 4px) 0 0 var(--devui-border-radius-feedback, 4px);right:100%}.devui-splitter-bar-horizontal .devui-collapse.next:before,.devui-splitter-bar-horizontal .devui-collapse.next.collapsed:before{top:9px;right:1px}.devui-splitter-bar-horizontal .devui-collapse.next:before{transform:rotate(70deg)}.devui-splitter-bar-horizontal .devui-collapse.next.collapsed:before{transform:rotate(-70deg)}.devui-splitter-bar-horizontal .devui-collapse.next:after,.devui-splitter-bar-horizontal .devui-collapse.next.collapsed:after{top:18px;right:1px}.devui-splitter-bar-horizontal .devui-collapse.next:after{transform:rotate(-70deg)}.devui-splitter-bar-horizontal .devui-collapse.next.collapsed:after{transform:rotate(70deg)}.devui-splitter-bar-vertical .devui-collapse{height:12px;width:30px}.devui-splitter-bar-vertical .devui-collapse.prev.hidden,.devui-splitter-bar-vertical .devui-collapse.next.hidden{display:none}.devui-splitter-bar-vertical .devui-collapse.prev{border-radius:0 0 var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px);top:100%}.devui-splitter-bar-vertical .devui-collapse.prev:before,.devui-splitter-bar-vertical .devui-collapse.prev.collapsed:before{bottom:5px;left:5px}.devui-splitter-bar-vertical .devui-collapse.prev:before{transform:rotate(-20deg)}.devui-splitter-bar-vertical .devui-collapse.prev.collapsed:before{transform:rotate(20deg)}.devui-splitter-bar-vertical .devui-collapse.prev:after,.devui-splitter-bar-vertical .devui-collapse.prev.collapsed:after{bottom:5px;left:14px}.devui-splitter-bar-vertical .devui-collapse.prev:after{transform:rotate(20deg)}.devui-splitter-bar-vertical .devui-collapse.prev.collapsed:after{transform:rotate(-20deg)}.devui-splitter-bar-vertical .devui-collapse.next{border-radius:var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px) 0 0;bottom:100%}.devui-splitter-bar-vertical .devui-collapse.next:before,.devui-splitter-bar-vertical .devui-collapse.next.collapsed:before{top:5px;left:5px}.devui-splitter-bar-vertical .devui-collapse.next:before{transform:rotate(20deg)}.devui-splitter-bar-vertical .devui-collapse.next.collapsed:before{transform:rotate(-20deg);top:5px;left:5px}.devui-splitter-bar-vertical .devui-collapse.next:after,.devui-splitter-bar-vertical .devui-collapse.next.collapsed:after{top:5px;left:14px}.devui-splitter-bar-vertical .devui-collapse.next:after{transform:rotate(-20deg)}.devui-splitter-bar-vertical .devui-collapse.next.collapsed:after{transform:rotate(20deg)}.devui-splitter-bar-horizontal.resizable:not(.none-resizable):hover,.devui-splitter-bar-horizontal.resizable:not(.none-resizable):focus,.devui-splitter-bar-horizontal.resizable:not(.none-resizable):active,.devui-splitter-bar-vertical.resizable:not(.none-resizable):hover,.devui-splitter-bar-vertical.resizable:not(.none-resizable):focus,.devui-splitter-bar-vertical.resizable:not(.none-resizable):active{background-color:var(--devui-brand-hover, #7693f5)}.devui-splitter-bar-horizontal.resizable:not(.none-resizable):after,.devui-splitter-bar-vertical.resizable:not(.none-resizable):after{content:"";display:block;position:absolute;z-index:10}.devui-splitter-bar-horizontal.resizable{cursor:col-resize}.devui-splitter-bar-horizontal.resizable:after{cursor:col-resize;height:100%;width:10px;top:0}.devui-splitter-bar-vertical.resizable{cursor:row-resize}.devui-splitter-bar-vertical.resizable:after{cursor:row-resize;width:100%;height:10px;left:0}.devui-splitter{display:flex;width:100%;height:auto;position:relative;border-radius:var(--devui-border-radius, 2px)}.devui-splitter.devui-splitter-horizontal{flex-direction:row}.devui-splitter.devui-splitter-vertical{flex-direction:column}.devui-splitter-pane{position:relative;flex:1 1 auto;display:block;min-width:0;max-width:100%;min-height:0;max-height:100%}.devui-splitter-pane-fixed{flex-grow:0;flex-shrink:0}.devui-splitter-pane-hidden{flex:0!important;overflow:hidden!important}.devui-splitter-pane-grow{flex-grow:1!important}
+.devui-tooltip{box-sizing:border-box}.devui-tooltip .tooltip{box-sizing:border-box;position:absolute;width:fit-content;transition:all .5s}.devui-tooltip .tooltip .arrow{width:0;height:0;position:absolute}.devui-tooltip .tooltip .tooltipcontent{box-sizing:border-box;padding:10px;margin-left:10px;border-radius:4px;width:fit-content;background-color:var(--devui-feedback-overlay-bg, #464d6e);color:var(--devui-feedback-overlay-text, #dfe1e6)}.devui-splitter-bar{background-color:var(--devui-dividing-line, #dfe1e6);display:flex;position:relative;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0}.devui-splitter-bar .devui-collapse{background-color:var(--devui-dividing-line, #dfe1e6);position:absolute;z-index:15;cursor:pointer}.devui-splitter-bar .devui-collapse:before,.devui-splitter-bar .devui-collapse:after{content:"";width:10px;height:2px;background:#ffffff;display:block;position:absolute}.devui-splitter-bar .devui-collapse:hover{background-color:var(--devui-brand-hover, #7693f5)}.devui-splitter-bar-horizontal .devui-collapse{width:12px;height:30px}.devui-splitter-bar-horizontal .devui-collapse.prev.hidden,.devui-splitter-bar-horizontal .devui-collapse.next.hidden{display:none}.devui-splitter-bar-horizontal .devui-collapse.prev{border-radius:0 var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px) 0;left:100%}.devui-splitter-bar-horizontal .devui-collapse.prev:before,.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed:before{top:9px;left:1px}.devui-splitter-bar-horizontal .devui-collapse.prev:before{transform:rotate(-70deg)}.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed:before{transform:rotate(70deg)}.devui-splitter-bar-horizontal .devui-collapse.prev:after,.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed:after{top:18px;left:1px}.devui-splitter-bar-horizontal .devui-collapse.prev:after{transform:rotate(70deg)}.devui-splitter-bar-horizontal .devui-collapse.prev.collapsed:after{transform:rotate(-70deg)}.devui-splitter-bar-horizontal .devui-collapse.next{border-radius:var(--devui-border-radius-feedback, 4px) 0 0 var(--devui-border-radius-feedback, 4px);right:100%}.devui-splitter-bar-horizontal .devui-collapse.next:before,.devui-splitter-bar-horizontal .devui-collapse.next.collapsed:before{top:9px;right:1px}.devui-splitter-bar-horizontal .devui-collapse.next:before{transform:rotate(70deg)}.devui-splitter-bar-horizontal .devui-collapse.next.collapsed:before{transform:rotate(-70deg)}.devui-splitter-bar-horizontal .devui-collapse.next:after,.devui-splitter-bar-horizontal .devui-collapse.next.collapsed:after{top:18px;right:1px}.devui-splitter-bar-horizontal .devui-collapse.next:after{transform:rotate(-70deg)}.devui-splitter-bar-horizontal .devui-collapse.next.collapsed:after{transform:rotate(70deg)}.devui-splitter-bar-vertical .devui-collapse{height:12px;width:30px}.devui-splitter-bar-vertical .devui-collapse.prev.hidden,.devui-splitter-bar-vertical .devui-collapse.next.hidden{display:none}.devui-splitter-bar-vertical .devui-collapse.prev{border-radius:0 0 var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px);top:100%}.devui-splitter-bar-vertical .devui-collapse.prev:before,.devui-splitter-bar-vertical .devui-collapse.prev.collapsed:before{bottom:5px;left:5px}.devui-splitter-bar-vertical .devui-collapse.prev:before{transform:rotate(-20deg)}.devui-splitter-bar-vertical .devui-collapse.prev.collapsed:before{transform:rotate(20deg)}.devui-splitter-bar-vertical .devui-collapse.prev:after,.devui-splitter-bar-vertical .devui-collapse.prev.collapsed:after{bottom:5px;left:14px}.devui-splitter-bar-vertical .devui-collapse.prev:after{transform:rotate(20deg)}.devui-splitter-bar-vertical .devui-collapse.prev.collapsed:after{transform:rotate(-20deg)}.devui-splitter-bar-vertical .devui-collapse.next{border-radius:var(--devui-border-radius-feedback, 4px) var(--devui-border-radius-feedback, 4px) 0 0;bottom:100%}.devui-splitter-bar-vertical .devui-collapse.next:before,.devui-splitter-bar-vertical .devui-collapse.next.collapsed:before{top:5px;left:5px}.devui-splitter-bar-vertical .devui-collapse.next:before{transform:rotate(20deg)}.devui-splitter-bar-vertical .devui-collapse.next.collapsed:before{transform:rotate(-20deg);top:5px;left:5px}.devui-splitter-bar-vertical .devui-collapse.next:after,.devui-splitter-bar-vertical .devui-collapse.next.collapsed:after{top:5px;left:14px}.devui-splitter-bar-vertical .devui-collapse.next:after{transform:rotate(-20deg)}.devui-splitter-bar-vertical .devui-collapse.next.collapsed:after{transform:rotate(20deg)}.devui-splitter-bar-horizontal.resizable:not(.none-resizable):hover,.devui-splitter-bar-horizontal.resizable:not(.none-resizable):focus,.devui-splitter-bar-horizontal.resizable:not(.none-resizable):active,.devui-splitter-bar-vertical.resizable:not(.none-resizable):hover,.devui-splitter-bar-vertical.resizable:not(.none-resizable):focus,.devui-splitter-bar-vertical.resizable:not(.none-resizable):active{background-color:var(--devui-brand-hover, #7693f5)}.devui-splitter-bar-horizontal.resizable:not(.none-resizable):after,.devui-splitter-bar-vertical.resizable:not(.none-resizable):after{content:"";display:block;position:absolute;z-index:10}.devui-splitter-bar-horizontal.resizable{cursor:col-resize}.devui-splitter-bar-horizontal.resizable:after{cursor:col-resize;height:100%;width:10px;top:0}.devui-splitter-bar-vertical.resizable{cursor:row-resize}.devui-splitter-bar-vertical.resizable:after{cursor:row-resize;width:100%;height:10px;left:0}.devui-splitter{display:flex;width:100%;height:auto;position:relative;border-radius:var(--devui-border-radius, 2px)}.devui-splitter.devui-splitter-horizontal{flex-direction:row}.devui-splitter.devui-splitter-vertical{flex-direction:column}.devui-splitter-pane{position:relative;flex:1 1 auto;display:block;min-width:0;max-width:100%;min-height:0;max-height:100%}.devui-splitter-pane-fixed{flex-grow:0;flex-shrink:0}.devui-splitter-pane-hidden{flex:0!important;overflow:hidden!important}.devui-splitter-pane-grow{flex-grow:1!important}