vue-devui 1.0.0 → 1.1.0

package/checkbox/style.css

@@ -1 +1 @@
-.devui-fixed-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1050}.devui-fixed-overlay--fade-enter-active,.devui-fixed-overlay--fade-leave-active{transition:opacity .1s cubic-bezier(0,0,1,1)}.devui-fixed-overlay--fade-enter-from,.devui-fixed-overlay--fade-leave-to{opacity:0}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 4px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-length-connected-overlay, 0 4px 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-popover__icon-wrap{width:16px;height:16px;margin-right:8px}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>path{fill:var(--devui-success, #50d4ab)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>circle,.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--warning>g>path{fill:var(--devui-warning, #fac20a)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--warning>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--info>g>g{fill:var(--devui-info, #5e7ce0)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--info>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--error>g>path{fill:var(--devui-danger, #f66f6a)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--error>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover__content.devui-flexible-overlay{display:flex;flex-wrap:wrap;align-items:center;white-space:nowrap;padding:4px 12px;line-height:1.5;border-radius:var(--devui-border-radius-feedback, 4px);color:var(--devui-feedback-overlay-text, #dfe1e6);background-color:var(--devui-feedback-overlay-bg, #464d6e);font-size:var(--devui-font-size-sm, 12px)}.devui-popover__content.devui-flexible-overlay.is-icon{flex-wrap:nowrap}.devui-popover--fade-bottom-enter-from,.devui-popover--fade-bottom-leave-to,.devui-popover--fade-top-enter-from,.devui-popover--fade-top-leave-to{opacity:.8;transform:scaleY(.8)}.devui-popover--fade-bottom-enter-to,.devui-popover--fade-bottom-leave-from,.devui-popover--fade-top-enter-to,.devui-popover--fade-top-leave-from{opacity:1;transform:scaleY(1)}.devui-popover--fade-bottom-enter-active,.devui-popover--fade-top-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-popover--fade-bottom-leave-active,.devui-popover--fade-top-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-popover--fade-left-enter-from,.devui-popover--fade-left-leave-to,.devui-popover--fade-right-enter-from,.devui-popover--fade-right-leave-to{opacity:.8;transform:scaleX(.8)}.devui-popover--fade-left-enter-to,.devui-popover--fade-left-leave-from,.devui-popover--fade-right-enter-to,.devui-popover--fade-right-leave-from{opacity:1;transform:scaleX(1)}.devui-popover--fade-left-enter-active,.devui-popover--fade-right-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-popover--fade-left-leave-active,.devui-popover--fade-right-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-form__label{align-self:flex-start}.devui-form__label--vertical{padding-bottom:8px}.devui-form__label--sm{flex:0 0 80px}.devui-form__label--md{flex:0 0 100px}.devui-form__label--lg{flex:0 0 150px}.devui-form__label--start{text-align:left}.devui-form__label--center{text-align:center}.devui-form__label--end{text-align:end}.devui-form__label-span{display:inline-block;vertical-align:middle;color:var(--devui-text, #252b3a)}.devui-form__label--required:before{content:"*";color:red;display:inline-block;margin-right:8px;margin-left:-12px}.devui-form__label-help{position:relative;top:-.1em;display:inline-block;vertical-align:middle;margin-left:4px;cursor:pointer}.devui-form__control{flex:1 1 auto;position:relative;width:100%}.devui-form__control--horizontal{margin-left:16px}.devui-form__control .devui-star{color:red}.devui-form__control .devui-form__control-container{position:relative}.devui-form__control .devui-form__control-container--horizontal{display:flex;width:100%}.devui-form__control .devui-form__control-container--horizontal .devui-validate-tip{margin:0}.devui-form__control .devui-form__control-container .devui-form__feedback-icon{position:absolute;top:50%;right:0;z-index:1;width:32px;height:16px;text-align:center;visibility:visible;pointer-events:none;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--error svg circle{fill:var(--devui-danger, #f66f6a)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--error svg polygon{fill:var(--devui-base-bg, #ffffff)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--success svg circle{fill:var(--devui-success, #50d4ab)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--success svg polygon{fill:var(--devui-base-bg, #ffffff)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--pending svg{animation:loading-keyframes 1s infinite linear}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--pending svg path{fill:var(--devui-brand, #5e7ce0)}.devui-form__control .devui-form__control-content{width:100%}.devui-form__control .devui-form__control-container--has-feedback{display:flex;align-items:center}.devui-form__control .devui-form__control-container--has-feedback input{padding-right:28px}.devui-form__control .devui-form__control-container--feedback-error{border:1px solid #f66f6a;border-radius:2px}.devui-form__control .devui-form__control-container--feedback-error input{background-color:#ffeeed;border-color:transparent}.devui-form__control .devui-form__control-container--feedback-error input:hover{border-color:transparent!important}.devui-form__control .devui-form__control-container--feedback-error input:focus{border-color:transparent!important}.devui-form__control .devui-form__control-container--feedback-error .devui-select-arrow{right:24px!important}.devui-form__control .devui-form__control-info{line-height:1}.devui-form__control .devui-form__control-info .error-message{display:inline-block;min-height:20px;line-height:1.5;font-size:var(--devui-font-size, 14px);color:var(--devui-danger, #f66f6a)}.devui-form__control .devui-form__control-info .devui-form__control-extra{font-size:var(--devui-font-size, 14px);color:var(--devui-aide-text, #71757f);min-height:20px;line-height:1.5;text-align:justify}@keyframes loading-keyframes{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.devui-form__item--horizontal{display:flex;align-items:center;margin-bottom:20px}.devui-form__item--vertical{display:flex;flex-direction:column;margin-bottom:20px}.devui-form__item--error{margin-bottom:0}.devui-form-operation .star{color:red}.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, #252b3a)}.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, #d7d8da);border-radius:var(--devui-border-radius, 4px);background:linear-gradient(var(--devui-brand, #5e7ce0),var(--devui-brand, #5e7ce0)) no-repeat 50%/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, #252b3a)}.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.devui-checkbox--lg{font-size:var(--devui-font-size-lg, 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:var(--devui-font-size-lg, 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:var(--devui-font-size-sm, 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:var(--devui-font-size-sm, 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, 4px)}.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, #f5f5f5)}.devui-checkbox.disabled.half-checked .devui-checkbox__material{background-color:var(--devui-disabled-bg, #f5f5f5)}.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-disabled-line, #dfe1e6);border-left:none;display:inline-block;line-height:1;user-select:none;box-shadow:-1px 0 0 0 var(--devui-disabled-line, #dfe1e6)}.devui-checkbox-button__content.devui-checkbox-button--lg{font-size:var(--devui-font-size-lg, 14px);padding:12px 20px}.devui-checkbox-button__content.devui-checkbox-button--md{font-size:var(--devui-font-size-lg, 14px);padding:10px 20px}.devui-checkbox-button__content.devui-checkbox-button--sm{font-size:var(--devui-font-size-sm, 12px);padding:9px 15px}.devui-checkbox-button__content.devui-checkbox-button--xs{font-size:var(--devui-font-size-sm, 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);border-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, 4px);border-bottom-left-radius:var(--devui-border-radius, 4px);border-left:1px solid var(--devui-disabled-line, #dfe1e6);box-shadow:none}.devui-checkbox-button:last-child .devui-checkbox-button__content{border-top-right-radius:var(--devui-border-radius, 4px);border-bottom-right-radius:var(--devui-border-radius, 4px)}
+.devui-fixed-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1050}.devui-fixed-overlay--fade-enter-active,.devui-fixed-overlay--fade-leave-active{transition:opacity .1s cubic-bezier(0,0,1,1)}.devui-fixed-overlay--fade-enter-from,.devui-fixed-overlay--fade-leave-to{opacity:0}.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-length-connected-overlay, 0 4px 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-popover__icon-wrap{width:16px;height:16px;margin-right:8px}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>path{fill:var(--devui-success, #50d4ab)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>circle,.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--success>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--warning>g>path{fill:var(--devui-warning, #fac20a)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--warning>g>polygon{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--info>g>g{fill:var(--devui-info, #5e7ce0)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--info>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--error>g>path{fill:var(--devui-danger, #f66f6a)}.devui-popover__icon-wrap .devui-popover__icon.devui-popover__icon--error>g>circle{fill:var(--devui-light-text, #ffffff)}.devui-popover__content.devui-flexible-overlay{display:flex;flex-wrap:wrap;align-items:center;white-space:nowrap;padding:4px 12px;line-height:1.5;border-radius:var(--devui-border-radius-feedback, 4px);color:var(--devui-feedback-overlay-text, #dfe1e6);background-color:var(--devui-feedback-overlay-bg, #464d6e);font-size:var(--devui-font-size-sm, 12px)}.devui-popover__content.devui-flexible-overlay.is-icon{flex-wrap:nowrap}.devui-popover--fade-bottom-enter-from,.devui-popover--fade-bottom-leave-to,.devui-popover--fade-top-enter-from,.devui-popover--fade-top-leave-to{opacity:.8;transform:scaleY(.8)}.devui-popover--fade-bottom-enter-to,.devui-popover--fade-bottom-leave-from,.devui-popover--fade-top-enter-to,.devui-popover--fade-top-leave-from{opacity:1;transform:scaleY(1)}.devui-popover--fade-bottom-enter-active,.devui-popover--fade-top-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-popover--fade-bottom-leave-active,.devui-popover--fade-top-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-popover--fade-left-enter-from,.devui-popover--fade-left-leave-to,.devui-popover--fade-right-enter-from,.devui-popover--fade-right-leave-to{opacity:.8;transform:scaleX(.8)}.devui-popover--fade-left-enter-to,.devui-popover--fade-left-leave-from,.devui-popover--fade-right-enter-to,.devui-popover--fade-right-leave-from{opacity:1;transform:scaleX(1)}.devui-popover--fade-left-enter-active,.devui-popover--fade-right-enter-active{transition:transform .1s cubic-bezier(.16,.75,.5,1),opacity .1s cubic-bezier(.16,.75,.5,1)}.devui-popover--fade-left-leave-active,.devui-popover--fade-right-leave-active{transition:transform .1s cubic-bezier(.5,0,.84,.25),opacity .1s cubic-bezier(.5,0,.84,.25)}.devui-form__label{align-self:flex-start}.devui-form__label--vertical{padding-bottom:8px}.devui-form__label--sm{flex:0 0 80px}.devui-form__label--md{flex:0 0 100px}.devui-form__label--lg{flex:0 0 150px}.devui-form__label--start{text-align:left}.devui-form__label--center{text-align:center}.devui-form__label--end{text-align:end}.devui-form__label-span{display:inline-block;vertical-align:middle;color:var(--devui-text, #252b3a)}.devui-form__label--required:before{content:"*";color:red;display:inline-block;margin-right:8px;margin-left:-12px}.devui-form__label-help{position:relative;top:-.1em;display:inline-block;vertical-align:middle;margin-left:4px;cursor:pointer}.devui-form__control{flex:1 1 auto;position:relative;width:100%}.devui-form__control--horizontal{margin-left:16px}.devui-form__control .devui-star{color:red}.devui-form__control .devui-form__control-container{position:relative}.devui-form__control .devui-form__control-container--horizontal{display:flex;width:100%}.devui-form__control .devui-form__control-container--horizontal .devui-validate-tip{margin:0}.devui-form__control .devui-form__control-container .devui-form__feedback-icon{position:absolute;top:50%;right:0;z-index:1;width:32px;height:16px;text-align:center;visibility:visible;pointer-events:none;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--error svg circle{fill:var(--devui-danger, #f66f6a)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--error svg polygon{fill:var(--devui-base-bg, #ffffff)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--success svg circle{fill:var(--devui-success, #50d4ab)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--success svg polygon{fill:var(--devui-base-bg, #ffffff)}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--pending svg{animation:loading-keyframes 1s infinite linear}.devui-form__control .devui-form__control-container .devui-form__feedback-icon--pending svg path{fill:var(--devui-brand, #5e7ce0)}.devui-form__control .devui-form__control-container--has-feedback{display:flex;align-items:center}.devui-form__control .devui-form__control-container--has-feedback input{padding-right:28px}.devui-form__control .devui-form__control-container--feedback-error{border:1px solid #f66f6a;border-radius:2px}.devui-form__control .devui-form__control-container--feedback-error input{background-color:#ffeeed;border-color:transparent}.devui-form__control .devui-form__control-container--feedback-error input:hover{border-color:transparent!important}.devui-form__control .devui-form__control-container--feedback-error input:focus{border-color:transparent!important}.devui-form__control .devui-form__control-container--feedback-error .devui-select-arrow{right:24px!important}.devui-form__control .devui-form__control-info{line-height:1}.devui-form__control .devui-form__control-info .error-message{display:inline-block;min-height:20px;line-height:1.5;font-size:var(--devui-font-size, 14px);color:var(--devui-danger, #f66f6a)}.devui-form__control .devui-form__control-info .devui-form__control-extra{font-size:var(--devui-font-size, 14px);color:var(--devui-aide-text, #71757f);min-height:20px;line-height:1.5;text-align:justify}@keyframes loading-keyframes{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.devui-form__item--horizontal{display:flex;align-items:center;margin-bottom:20px}.devui-form__item--vertical{display:flex;flex-direction:column;margin-bottom:20px}.devui-form__item--error{margin-bottom:0}.devui-form-operation .star{color:red}.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, #252b3a)}.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, #d7d8da);border-radius:var(--devui-border-radius, 2px);background:linear-gradient(var(--devui-brand, #5e7ce0),var(--devui-brand, #5e7ce0)) no-repeat 50%/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, #252b3a)}.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.devui-checkbox--lg{display:flex;align-items:center;font-size:var(--devui-font-size-lg, 14px)}.devui-checkbox label.devui-checkbox--lg .devui-checkbox__material{width:18px;height:18px}.devui-checkbox label.devui-checkbox--lg .devui-checkbox__material>svg{width:18px;height:18px}.devui-checkbox label.devui-checkbox--lg.devui-checkbox--bordered{height:40px;padding:0 15px 0 10px}.devui-checkbox label.devui-checkbox--md{display:flex;align-items:center;font-size:var(--devui-font-size-md, 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:32px;padding:0 15px 0 10px}.devui-checkbox label.devui-checkbox--sm{display:flex;align-items:center;font-size:var(--devui-font-size-sm, 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:24px;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, #f5f5f5)}.devui-checkbox.disabled.half-checked .devui-checkbox__material{background-color:var(--devui-disabled-bg, #f5f5f5)}.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}.devui-checkbox__group{display:inline-flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start}.devui-checkbox__group>*{margin-top:8px}.devui-checkbox__group.is-row{flex-direction:row}.devui-checkbox__group.is-row div:not(:last-child){margin-right:20px}.devui-checkbox__group.is-column{flex-direction:column}.devui-checkbox-button{display:flex;align-items:center;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-disabled-line, #dfe1e6);border-left:none;display:inline-block;line-height:1;user-select:none;box-shadow:-1px 0 0 0 var(--devui-disabled-line, #dfe1e6)}.devui-checkbox-button__content.devui-checkbox-button--lg{font-size:var(--devui-font-size-lg, 14px);padding:var(--devui-btn-lg-padding, 0 24px);height:40px;line-height:40px}.devui-checkbox-button__content.devui-checkbox-button--md{font-size:var(--devui-font-size-md, 14px);padding:var(--devui-btn-padding, 0 20px);height:32px;line-height:32px}.devui-checkbox-button__content.devui-checkbox-button--sm{font-size:var(--devui-font-size-sm, 12px);padding:var(--devui-btn-sm-padding, 0 16px);height:24px;line-height:24px}.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);border-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-disabled-line, #dfe1e6);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)}

package/date-picker-pro/index.es.js

@@ -33,7 +33,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { defineComponent, watch, provide, reactive, toRefs, createVNode, onUnmounted, Transition, mergeProps, ref, unref, nextTick, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, computed, onMounted, Teleport, withModifiers, createTextVNode, onBeforeUnmount, shallowRef, resolveDynamicComponent, getCurrentInstance, onBeforeMount, isVNode, onUpdated, toRaw, watchEffect, render, resolveDirective, toRef, renderSlot, useSlots } from "vue";
+import { defineComponent, watch, provide, reactive, toRefs, createVNode, onUnmounted, Transition, mergeProps, ref, unref, nextTick, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, computed, onMounted, Teleport, createTextVNode, onBeforeUnmount, shallowRef, resolveDynamicComponent, getCurrentInstance, onBeforeMount, isVNode, onUpdated, toRaw, watchEffect, render, resolveDirective, toRef, renderSlot, useSlots } from "vue";
 import { onClickOutside } from "@vueuse/core";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 const datePickerProCommonProps = {
@@ -6093,6 +6093,10 @@ const flexibleOverlayProps = {
   isArrowCenter: {
     type: Boolean,
     default: true
+  },
+  clickEventBubble: {
+    type: Boolean,
+    default: false
   }
 };
 function getScrollParent(element) {
@@ -6207,6 +6211,9 @@ const FlexibleOverlay = defineComponent({
     expose
   }) {
     const ns2 = useNamespace("flexible-overlay");
+    const {
+      clickEventBubble
+    } = toRefs(props);
     const {
       arrowRef,
       overlayRef,
@@ -6220,7 +6227,10 @@ const FlexibleOverlay = defineComponent({
       return props.modelValue && createVNode("div", mergeProps({
         "ref": overlayRef,
         "class": ns2.b()
-      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
+      }, attrs, {
+        "onClick": withModifiers(() => ({}), [clickEventBubble.value ? "" : "stop"]),
+        "onPointerup": withModifiers(() => ({}), ["stop"])
+      }), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
         "ref": arrowRef,
         "class": ns2.e("arrow")
       }, null)]);
@@ -6338,7 +6348,7 @@ const TransformOriginMap = {
 function usePopover(props, visible, placement, origin, popoverRef) {
   const { trigger, isOpen } = toRefs(props);
   const overlayStyles = computed(() => ({
-    zIndex: 1060,
+    zIndex: "var(--devui-z-index-pop-up, 1060)",
     transformOrigin: TransformOriginMap[placement.value]
   }));
   const onDocumentClick = (e) => {
@@ -6581,8 +6591,6 @@ var Popover = defineComponent({
           "style": overlayStyles.value
         }, attrs, {
           "onPositionChange": handlePositionChange,
-          "onClick": withModifiers(() => ({}), ["stop"]),
-          "onPointerup": withModifiers(() => ({}), ["stop"]),
           "onMouseenter": onMouseenter,
           "onMouseleave": onMouseleave
         }), {
@@ -6781,9 +6789,7 @@ var FormControl = defineComponent({
     }, {
       default: () => {
         var _a, _b;
-        return [createVNode("div", {
-          "class": ns2.e("control-content")
-        }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]), createTextVNode(",")];
+        return [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)];
       }
     }), showFeedback.value && createVNode("span", {
       "class": [ns2.e("feedback-icon"), ns2.em("feedback-icon", feedbackStatus.value)]
@@ -8043,7 +8049,6 @@ defineComponent({
 function usePickerPro(props, ctx, t) {
   const formContext = inject(FORM_TOKEN, void 0);
   const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
-  const containerRef = shallowRef();
   const originRef = ref();
   const inputRef = shallowRef();
   const overlayRef = shallowRef();
@@ -8060,11 +8065,10 @@ function usePickerPro(props, ctx, t) {
       ctx.emit("blur");
     }
   };
-  onClickOutside(containerRef, () => {
+  onClickOutside(overlayRef, () => {
     toggleChange(false);
-  });
+  }, { ignore: [originRef] });
   const onFocus = function(e) {
-    e.stopPropagation();
     toggleChange(true);
     ctx.emit("focus", e);
   };
@@ -8115,7 +8119,6 @@ function usePickerPro(props, ctx, t) {
     formItemContext == null ? void 0 : formItemContext.validate("change").catch((err) => console.warn(err));
   }, { deep: true });
   return {
-    containerRef,
     originRef,
     inputRef,
     overlayRef,
@@ -8288,7 +8291,8 @@ var Icon = defineComponent({
     const wrapClassed = computed(() => ({
       [ns2.e("container")]: true,
       [ns2.m("disabled")]: disabled.value,
-      [ns2.m("operable")]: operable.value
+      [ns2.m("operable")]: operable.value,
+      [ns2.m("no-slots")]: !Object.keys(ctx.slots).length
     }));
     const onClick = (e) => {
       if (disabled.value) {
@@ -8445,7 +8449,8 @@ function deepAssign(...objects) {
 var zhCN = {
   pagination: {
     totalItemText: "\u6240\u6709\u6761\u76EE",
-    goToText: "\u8DF3\u81F3"
+    goToText: "\u8DF3\u81F3",
+    perPage: "\u6761/\u9875"
   },
   accordion: {
     loading: "\u52A0\u8F7D\u4E2D",
@@ -8638,7 +8643,10 @@ var Input = defineComponent({
     const prefixVisible = ctx.slots.prefix || props.prefix;
     const suffixVisible = ctx.slots.suffix || props.suffix || props.showPassword || props.clearable;
     const showPwdVisible = computed(() => props.showPassword && !inputDisabled.value);
-    const showClearable = computed(() => props.clearable && !inputDisabled.value);
+    const showClearable = computed(() => {
+      var _a;
+      return props.clearable && !inputDisabled.value && ((_a = modelValue.value) == null ? void 0 : _a.length) > 0;
+    });
     watch(() => props.modelValue, () => {
       if (props.validateEvent) {
         formItemContext == null ? void 0 : formItemContext.validate("change").catch((err) => console.warn(err));
@@ -9046,6 +9054,7 @@ function useCalendarPanel(props, ctx) {
     isDisabled
   };
 }
+const DEFAULT_ITEM_HEIGHT = 20;
 const virtualListProps = {
   data: {
     type: Array,
@@ -9061,7 +9070,7 @@ const virtualListProps = {
   },
   itemHeight: {
     type: Number,
-    default: 0
+    default: DEFAULT_ITEM_HEIGHT
   },
   virtual: {
     type: Boolean,
@@ -9120,19 +9129,17 @@ const resizeObserverProps = {
   }
 };
 function useVirtual(props) {
+  const {
+    height,
+    data,
+    itemHeight,
+    virtual
+  } = toRefs(props);
   const isVirtual = computed(() => {
-    const {
-      height,
-      virtual
-    } = props;
-    return !!(virtual !== false && height);
+    return Boolean(virtual.value !== false && height.value);
   });
   const inVirtual = computed(() => {
-    const {
-      height,
-      data
-    } = props;
-    return isVirtual.value && data && 20 * data.length > height;
+    return Boolean(isVirtual.value && data.value.length && itemHeight.value * data.value.length > height.value);
   });
   return {
     isVirtual,
@@ -9463,7 +9470,6 @@ var ResizeObserverContainer = defineComponent({
         };
         innerStyle.value = __spreadProps(__spreadValues({}, innerStyle.value), {
           transform: `translateY(${offset2.value}px)`,
-          position: "absolute",
           left: 0,
           right: 0,
           top: 0
@@ -9730,7 +9736,6 @@ const ScrollStyle = {
   overflowY: "auto",
   overflowAnchor: "none"
 };
-const DEFAULT_HEIGHT = 20;
 var VirtualList = defineComponent({
   name: "DVirtualList",
   props: virtualListProps,
@@ -9839,7 +9844,7 @@ var VirtualList = defineComponent({
           cacheHeight = heights.get(key);
         }
         if (cacheHeight === void 0) {
-          cacheHeight = props.itemHeight || DEFAULT_HEIGHT;
+          cacheHeight = props.itemHeight || DEFAULT_ITEM_HEIGHT;
         }
         const currentItemBottom = itemTop + cacheHeight;
         if (startIndex === void 0 && currentItemBottom >= scrollTop) {
@@ -9975,7 +9980,7 @@ var VirtualList = defineComponent({
     });
     ctx.expose({
       scrollTo(index2) {
-        syncScrollTop(index2 * (props.itemHeight || DEFAULT_HEIGHT));
+        syncScrollTop(index2 * (props.itemHeight || DEFAULT_ITEM_HEIGHT));
       }
     });
     return () => {
@@ -10305,6 +10310,36 @@ const usePopupLine = (hourListRef, minuteListRef, secondListRef, minTime, maxTim
     resetScrollTop
   };
 };
+const popupLineProps = {
+  hourList: {
+    type: Array,
+    default: () => []
+  },
+  minuteList: {
+    type: Array,
+    default: () => []
+  },
+  secondList: {
+    type: Array,
+    default: () => []
+  },
+  format: {
+    type: String,
+    default: "hh:mm:ss"
+  },
+  minTime: {
+    type: String,
+    default: "00:00:00"
+  },
+  maxTime: {
+    type: String,
+    default: "23:59:59"
+  },
+  itemHeight: {
+    type: Number,
+    default: 32
+  }
+};
 const timePickerProps = {
   modelValue: {
     type: String,
@@ -10504,39 +10539,7 @@ var TimeScroll = defineComponent({
 var index$1 = "";
 var DTimeList = defineComponent({
   name: "DTimeList",
-  components: {
-    TimeScroll
-  },
-  props: {
-    hourList: {
-      type: Array,
-      default: () => []
-    },
-    minuteList: {
-      type: Array,
-      default: () => []
-    },
-    secondList: {
-      type: Array,
-      default: () => []
-    },
-    format: {
-      type: String,
-      default: "hh:mm:ss"
-    },
-    minTime: {
-      type: String,
-      default: "00:00:00"
-    },
-    maxTime: {
-      type: String,
-      default: "23:59:59"
-    },
-    itemHeight: {
-      type: Number,
-      default: 32
-    }
-  },
+  props: popupLineProps,
   emits: ["change"],
   setup(props, ctx) {
     const ns2 = useNamespace("time-list");
@@ -10551,14 +10554,12 @@ var DTimeList = defineComponent({
       resetTimeValue(time);
     };
     const TimeLi = (timeArr) => {
-      return timeArr.map((item, index2) => {
-        return createVNode("li", {
-          "class": `time-li ${item.flag}Id-${index2} ${item.isActive ? "active-li" : ""} ${item.isDisabled ? "disabled-li" : ""}`,
-          "onClick": (e) => {
-            activeTimeFun(e, item, index2);
-          }
-        }, [createVNode("span", null, [item.time])]);
-      });
+      return timeArr.map((item, index2) => createVNode("li", {
+        "class": `time-li ${item.flag}Id-${index2} ${item.isActive ? "active-li" : ""} ${item.isDisabled ? "disabled-li" : ""}`,
+        "onClick": (e) => {
+          activeTimeFun(e, item, index2);
+        }
+      }, [createVNode("span", null, [item.time])]));
     };
     const TimeUl = (timeList) => {
       return createVNode("div", {
@@ -10588,12 +10589,10 @@ var DTimeList = defineComponent({
       setOuterTime,
       getNewTime
     });
-    return () => {
-      return createVNode("div", {
-        "class": ns2.b(),
-        "ref": timeListDom
-      }, [formatTimeUl()]);
-    };
+    return () => createVNode("div", {
+      "class": ns2.b(),
+      "ref": timeListDom
+    }, [formatTimeUl()]);
   }
 });
 function initializeTimeData(type4) {
@@ -10729,7 +10728,7 @@ class LoadingOptions {
 }
 var loading = "";
 var Loading = defineComponent({
-  name: "DLoading",
+  name: "Loading",
   inheritAttrs: false,
   props: loadingProps,
   setup(props) {
@@ -10882,12 +10881,12 @@ const handleProps = (el, vprops) => {
   const props = __spreadValues(__spreadValues({}, new LoadingOptions()), vprops);
   const loadingTemplateRef = props.loadingTemplateRef;
   const loadingInstance = createComponent(loadingConstructor, __spreadValues({}, props), loadingTemplateRef ? () => loadingTemplateRef : null);
-  el.style.position = props.positionType;
+  el.style.position = props.positionType || "relative";
   el.options = props;
   el.instance = loadingInstance;
   el.mask = (_a = loadingInstance == null ? void 0 : loadingInstance.proxy) == null ? void 0 : _a.$el;
 };
-const loadingDirective = {
+const LoadingDirective = {
   mounted: function(el, binding, vnode) {
     handleProps(el, vnode.props);
     removeAttribute(el);
@@ -10977,7 +10976,7 @@ var button = "";
 var Button = defineComponent({
   name: "DButton",
   directives: {
-    dLoading: loadingDirective
+    Loading: LoadingDirective
   },
   props: buttonProps,
   emits: ["click"],
@@ -11010,7 +11009,7 @@ var Button = defineComponent({
         "class": iconClass.value
       }, null), createVNode("span", {
         "class": "button-content"
-      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])]), [[resolveDirective("dLoading"), loading2.value]]);
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])]), [[resolveDirective("loading"), loading2.value]]);
     };
   }
 });
@@ -11686,7 +11685,6 @@ var DatePickerPro = defineComponent({
     const t = createI18nTranslate("DDatePickerPro", app);
     const ns2 = useNamespace("date-picker-pro");
     const {
-      containerRef,
       originRef,
       inputRef,
       overlayRef,
@@ -11712,8 +11710,7 @@ var DatePickerPro = defineComponent({
         footer: ((_b = ctx.slots) == null ? void 0 : _b.footer) && (() => renderSlot(useSlots(), "footer"))
       };
       return createVNode("div", {
-        "class": ns2.b(),
-        "ref": containerRef
+        "class": ns2.b()
       }, [createVNode("div", {
         "class": ns2.e("single-picker"),
         "ref": originRef,
@@ -11723,7 +11720,7 @@ var DatePickerPro = defineComponent({
         "ref": inputRef,
         "modelValue": displayDateValue.value,
         "placeholder": placeholder.value || t("placeholder"),
-        "onFocus": onFocus,
+        "onFocus": withModifiers(onFocus, ["stop"]),
         "size": pickerSize.value,
         "disabled": pickerDisabled.value,
         "error": isValidateError.value
@@ -11735,23 +11732,30 @@ var DatePickerPro = defineComponent({
           "class": ["close-icon", showCloseIcon.value ? ns2.m("icon-visible") : ns2.m("icon-hidden")],
           "onClick": handlerClearTime
         }, [createVNode(IconClose, null, null)])
-      })]), createVNode(Transition, {
-        "name": "fade"
+      })]), createVNode(Teleport, {
+        "to": "body"
       }, {
-        default: () => [createVNode(FlexibleOverlay, {
-          "modelValue": isPanelShow.value,
-          "onUpdate:modelValue": ($event) => isPanelShow.value = $event,
-          "ref": overlayRef,
-          "origin": originRef.value,
-          "align": "start",
-          "position": position.value
+        default: () => [createVNode(Transition, {
+          "name": "fade"
         }, {
-          default: () => [createVNode(DatePickerProPanel, mergeProps(props, {
-            "dateValue": dateValue.value,
-            "visible": isPanelShow.value,
-            "format": format2.value,
-            "onSelectedDate": onSelectedDate
-          }), vSlots)]
+          default: () => [createVNode(FlexibleOverlay, {
+            "modelValue": isPanelShow.value,
+            "onUpdate:modelValue": ($event) => isPanelShow.value = $event,
+            "ref": overlayRef,
+            "origin": originRef.value,
+            "align": "start",
+            "position": position.value,
+            "style": {
+              zIndex: "var(--devui-z-index-dropdown, 1052)"
+            }
+          }, {
+            default: () => [createVNode(DatePickerProPanel, mergeProps(props, {
+              "dateValue": dateValue.value,
+              "visible": isPanelShow.value,
+              "format": format2.value,
+              "onSelectedDate": onSelectedDate
+            }), vSlots)]
+          })]
         })]
       })]);
     };
@@ -11774,7 +11778,6 @@ const rangeDatePickerProProps = __spreadValues({
 function useRangePickerPro(props, ctx) {
   const formContext = inject(FORM_TOKEN, void 0);
   const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
-  const containerRef = shallowRef();
   const originRef = ref();
   const startInputRef = shallowRef();
   const endInputRef = shallowRef();
@@ -11793,9 +11796,9 @@ function useRangePickerPro(props, ctx) {
       ctx.emit("blur");
     }
   };
-  onClickOutside(containerRef, () => {
+  onClickOutside(overlayRef, () => {
     toggleChange(false);
-  });
+  }, { ignore: [originRef] });
   const focusHandler = function(e) {
     ctx.emit("focus", e);
   };
@@ -11877,7 +11880,6 @@ function useRangePickerPro(props, ctx) {
     formItemContext == null ? void 0 : formItemContext.validate("change").catch((err) => console.warn(err));
   }, { deep: true });
   return {
-    containerRef,
     originRef,
     startInputRef,
     endInputRef,
@@ -11909,7 +11911,6 @@ var DRangeDatePickerPro = defineComponent({
     const t = createI18nTranslate("DDatePickerPro", app);
     const ns2 = useNamespace("range-date-picker-pro");
     const {
-      containerRef,
       originRef,
       startInputRef,
       endInputRef,
@@ -11939,8 +11940,7 @@ var DRangeDatePickerPro = defineComponent({
         footer: ((_b = ctx.slots) == null ? void 0 : _b.footer) && (() => renderSlot(useSlots(), "footer"))
       };
       return createVNode("div", {
-        "class": [ns2.b(), props.showTime ? ns2.e("range-time-width") : ns2.e("range-width"), isPanelShow.value && ns2.m("open")],
-        "ref": containerRef
+        "class": [ns2.b(), props.showTime ? ns2.e("range-time-width") : ns2.e("range-width"), isPanelShow.value && ns2.m("open")]
       }, [createVNode("div", {
         "class": [ns2.e("range-picker"), pickerDisabled.value && ns2.m("disabled"), isValidateError.value && ns2.m("error")],
         "ref": originRef,
@@ -11952,11 +11952,10 @@ var DRangeDatePickerPro = defineComponent({
         "ref": startInputRef,
         "modelValue": displayDateValue.value[0],
         "placeholder": placeholder.value[0] || t("startPlaceholder"),
-        "onFocus": (e) => {
-          e.stopPropagation();
+        "onFocus": withModifiers((e) => {
           onFocus("start");
           focusHandler(e);
-        },
+        }, ["stop"]),
         "size": pickerSize.value,
         "disabled": pickerDisabled.value
       }, {
@@ -11971,11 +11970,10 @@ var DRangeDatePickerPro = defineComponent({
         "ref": endInputRef,
         "modelValue": displayDateValue.value[1],
         "placeholder": placeholder.value[1] || t("endPlaceholder"),
-        "onFocus": (e) => {
-          e.stopPropagation();
+        "onFocus": withModifiers((e) => {
           onFocus("end");
           focusHandler(e);
-        },
+        }, ["stop"]),
         "size": pickerSize.value,
         "disabled": pickerDisabled.value
       }, {
@@ -11983,26 +11981,33 @@ var DRangeDatePickerPro = defineComponent({
           "class": [showCloseIcon.value ? ns2.m("icon-visible") : ns2.m("icon-hidden"), "close-icon"],
           "onClick": handlerClearTime
         }, [createVNode(IconClose, null, null)])
-      })])]), createVNode(Transition, {
-        "name": "fade"
+      })])]), createVNode(Teleport, {
+        "to": "body"
       }, {
-        default: () => [createVNode(FlexibleOverlay, {
-          "modelValue": isPanelShow.value,
-          "onUpdate:modelValue": ($event) => isPanelShow.value = $event,
-          "ref": overlayRef,
-          "origin": originRef.value,
-          "align": "start",
-          "position": position.value
+        default: () => [createVNode(Transition, {
+          "name": "fade"
         }, {
-          default: () => [createVNode(DatePickerProPanel, mergeProps(props, {
-            "dateValue": dateValue.value,
-            "visible": isPanelShow.value,
-            "format": format2.value,
-            "isRangeType": true,
-            "focusType": focusType.value,
-            "onSelectedDate": onSelectedDate,
-            "onChangeRangeFocusType": onChangeRangeFocusType
-          }), vSlots)]
+          default: () => [createVNode(FlexibleOverlay, {
+            "modelValue": isPanelShow.value,
+            "onUpdate:modelValue": ($event) => isPanelShow.value = $event,
+            "ref": overlayRef,
+            "origin": originRef.value,
+            "align": "start",
+            "position": position.value,
+            "style": {
+              zIndex: "var(--devui-z-index-dropdown, 1052)"
+            }
+          }, {
+            default: () => [createVNode(DatePickerProPanel, mergeProps(props, {
+              "dateValue": dateValue.value,
+              "visible": isPanelShow.value,
+              "format": format2.value,
+              "isRangeType": true,
+              "focusType": focusType.value,
+              "onSelectedDate": onSelectedDate,
+              "onChangeRangeFocusType": onChangeRangeFocusType
+            }), vSlots)]
+          })]
         })]
       })]);
     };