vue-devui 1.0.0 → 1.0.1

package/search/style.css

@@ -1 +1 @@
-.devui-icon__container{display:inline-block;color:var(--devui-icon-fill, #71757f)}.devui-icon__container>*:not(:last-child){vertical-align:middle;margin-right:8px}.devui-icon__container i{vertical-align:middle;transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--disabled{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-icon--disabled i{color:var(--devui-disabled-text, #adb0b8)}.devui-icon--operable:not(.devui-icon--disabled){cursor:pointer;transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--operable:not(.devui-icon--disabled) i{cursor:pointer}.devui-icon--operable:hover:not(.devui-icon--disabled){color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:hover:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-hover, var(--devui-list-item-hover-bg, #f2f2f3))}.devui-icon--operable:hover:not(.devui-icon--disabled) i{color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:active:not(.devui-icon--disabled){color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable:active:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-active, var(--devui-list-item-active-bg, #f2f5fc))}.devui-icon--operable:active:not(.devui-icon--disabled) i{color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable.devui-icon__container{height:32px;line-height:32px;padding:0 8px;margin-left:-8px;border-radius:var(--devui-border-radius, 4px);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--spin{animation:iconSpin 2.5s linear infinite}.devui-svg-icon{vertical-align:middle}@keyframes iconSpin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.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-input{height:28px;font-size:var(--devui-font-size, 14px)}.devui-input__wrapper{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:0 8px;box-sizing:border-box;border:1px solid var(--devui-form-control-line, #d7d8da);border-radius:var(--devui-border-radius, 4px);background-color:var(--devui-form-control-bg, #ffffff);transition:border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));height:100%}.devui-input__wrapper:not(.devui-input--error):not(.devui-input--disabled):not(.devui-input--focus):hover{border-color:var(--devui-form-control-line-hover, #575d6c)}.devui-input--focus:not(.devui-input--error){border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-input--disabled{color:var(--devui-disabled-text, #adb0b8);border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f5);cursor:not-allowed}.devui-input--disabled:hover{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-input--disabled .devui-input__inner{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-input--error{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}.devui-input--sm{height:26px;font-size:var(--devui-font-size-sm, 12px)}.devui-input--lg{height:46px;font-size:var(--devui-font-size-lg, 14px)}.devui-input--feedback{padding-right:28px}.devui-input__inner{width:100%;height:100%;color:var(--devui-text, #252b3a);font-size:inherit;padding:4px 0;border:none;background:none;outline:none;box-sizing:border-box}.devui-input--prepend .devui-input__wrapper{border-top-left-radius:0;border-bottom-left-radius:0}.devui-input--append .devui-input__wrapper{border-top-right-radius:0;border-bottom-right-radius:0}.devui-input-slot{display:inline-flex;width:100%;align-items:stretch}.devui-input-slot__prepend,.devui-input-slot__append{color:var(--devui-text);position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:100%;padding:0 20px;white-space:nowrap;border:1px solid var(--devui-form-control-line, #d7d8da);border-radius:var(--devui-border-radius, 4px);background-color:var(--devui-form-control-bg, #ffffff)}.devui-input-slot__prepend .devui-button,.devui-input-slot__prepend .devui-select .devui-select__selection,.devui-input-slot__append .devui-button,.devui-input-slot__append .devui-select .devui-select__selection{border:none!important;background-color:transparent!important;color:inherit}.devui-input-slot__prepend .devui-button,.devui-input-slot__prepend .devui-select__selection,.devui-input-slot__append .devui-button,.devui-input-slot__append .devui-select__selection{margin:0 -20px}.devui-input-slot__prepend{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.devui-input-slot__append{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.devui-input-slot__prefix,.devui-input-slot__suffix{display:inline-flex;white-space:nowrap;flex-shrink:0;flex-wrap:nowrap;align-items:center}.devui-input-slot__prefix>*{margin-right:8px}.devui-input-slot__suffix>*{margin-left:8px}.devui-input__clear--icon,.devui-input__password--icon{cursor:pointer}.devui-icon-group{display:inline-flex;align-items:center}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable){padding:8px;margin-left:0}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable):first-child{margin-left:-8px}.devui-icon-group>*:not(:first-child){margin-left:0}.devui-search{position:relative;display:flex;justify-content:center;align-items:center}.devui-search:not(.devui-search--error):not(.devui-search--disabled):not(.devui-search--focus):hover .devui-input{border-color:var(--devui-form-control-line-hover, #575d6c)}.devui-search .devui-input{padding:4px 60px 4px 8px;display:inline-flex;align-items:center;justify-content:center;width:100%;color:var(--devui-text, #252b3a);box-sizing:border-box;border:1px solid var(--devui-form-control-line, #d7d8da);border-radius:var(--devui-border-radius, 4px);background-color:var(--devui-form-control-bg, #ffffff);transition:border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-search .devui-input__inner{padding:0}.devui-search .devui-input__wrapper{border:none;padding:0}.devui-search--focus .devui-input{border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-search svg.svg-icon-clear path,.devui-search svg.svg-icon-search path{fill:var(--devui-icon-text, #71757f)}.devui-search__clear{position:absolute;right:36px;cursor:pointer;font-size:10px;width:30px;height:100%;display:flex;justify-content:center;align-items:center}.devui-search__clear:after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:46%;border-left:1px solid var(--devui-dividing-line, #f2f2f3)}.devui-search__icon{pointer-events:all;cursor:pointer;position:absolute;z-index:1;right:0;top:0;font-size:16px;width:36px;height:100%;display:flex;justify-content:center;align-items:center}.devui-search--sm .devui-input.devui-input--sm{font-size:var(--devui-font-size, 14px);padding-right:60px}.devui-search--sm .devui-search__icon{font-size:14px;width:34px;height:26px}.devui-search--sm .devui-search__clear{width:26px;height:100%;right:34px}.devui-search--lg .devui-input{padding:4px 36px 4px 10px}.devui-search--lg .devui-input.devui-input--lg{padding-right:75px}.devui-search--lg .devui-search__icon{font-size:18px;width:46px;height:46px}.devui-search--lg .devui-search__clear{width:40px;height:100%;right:46px}.devui-search--disabled .devui-input{cursor:not-allowed;color:var(--devui-disabled-text, #adb0b8);border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f5)}.devui-search--disabled .devui-search__icon{cursor:not-allowed}.devui-search--disabled .icon-search{color:var(--devui-disabled-text, #adb0b8)!important}.devui-search--left .devui-input{padding:4px 26px 4px 30px}.devui-search--left .devui-input.devui-input--lg{padding-right:28px;padding-left:48px}.devui-search--left .devui-input.devui-input--sm{padding-right:24px}.devui-search--left .devui-search__clear{right:0}.devui-search--left .devui-search__clear:after{display:none}.devui-search--left .devui-search__icon{left:0}.devui-search--no-border .devui-input{border:none}
+.devui-icon__container{display:inline-block;color:var(--devui-icon-fill, #71757f)}.devui-icon__container>*:not(:last-child){vertical-align:middle;margin-right:8px}.devui-icon__container i{vertical-align:middle;transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--no-slots i,.devui-icon--no-slots img{display:block}.devui-icon--disabled{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-icon--disabled i{color:var(--devui-disabled-text, #adb0b8)}.devui-icon--operable:not(.devui-icon--disabled){cursor:pointer;transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--operable:not(.devui-icon--disabled) i{cursor:pointer}.devui-icon--operable:hover:not(.devui-icon--disabled){color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:hover:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-hover, var(--devui-list-item-hover-bg, #f2f2f3))}.devui-icon--operable:hover:not(.devui-icon--disabled) i{color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:active:not(.devui-icon--disabled){color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable:active:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-active, var(--devui-list-item-active-bg, #f2f5fc))}.devui-icon--operable:active:not(.devui-icon--disabled) i{color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable.devui-icon__container{height:32px;line-height:32px;padding:0 8px;margin-left:-8px;border-radius:var(--devui-border-radius, 2px);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--spin{animation:iconSpin 2.5s linear infinite}.devui-svg-icon{vertical-align:middle}@keyframes iconSpin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.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-input{width:100%;height:32px;font-size:var(--devui-font-size, 14px)}.devui-input__wrapper{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:0 8px;box-sizing:border-box;border:1px solid var(--devui-form-control-line, #d7d8da);border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-form-control-bg, #ffffff);transition:border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));height:100%}.devui-input__wrapper:not(.devui-input--error):not(.devui-input--disabled):not(.devui-input--focus):hover{border-color:var(--devui-form-control-line-hover, #575d6c)}.devui-input--focus:not(.devui-input--error){border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-input--disabled{color:var(--devui-disabled-text, #adb0b8);border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f5);cursor:not-allowed}.devui-input--disabled:hover{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-input--disabled .devui-input__inner{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-input--error{border-color:var(--devui-danger-line, #f66f6a);background-color:var(--devui-danger-bg, #ffeeed)}.devui-input--sm{height:26px;font-size:var(--devui-font-size-sm, 12px)}.devui-input--lg{height:46px;font-size:var(--devui-font-size-lg, 14px)}.devui-input--feedback{padding-right:28px}.devui-input__inner{width:100%;height:100%;color:var(--devui-text, #252b3a);font-size:inherit;padding:4px 0;border:none;background:none;outline:none;box-sizing:border-box}.devui-input--prepend .devui-input__wrapper{border-top-left-radius:0;border-bottom-left-radius:0}.devui-input--append .devui-input__wrapper{border-top-right-radius:0;border-bottom-right-radius:0}.devui-input-slot{display:inline-flex;width:100%;align-items:stretch}.devui-input-slot__prepend,.devui-input-slot__append{color:var(--devui-text);position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:100%;padding:0 20px;white-space:nowrap;border:1px solid var(--devui-form-control-line, #d7d8da);border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-form-control-bg, #ffffff)}.devui-input-slot__prepend .devui-button,.devui-input-slot__prepend .devui-select .devui-select__selection,.devui-input-slot__append .devui-button,.devui-input-slot__append .devui-select .devui-select__selection{border:none!important;background-color:transparent!important;color:inherit}.devui-input-slot__prepend .devui-button,.devui-input-slot__prepend .devui-select__selection,.devui-input-slot__append .devui-button,.devui-input-slot__append .devui-select__selection{margin:0 -20px}.devui-input-slot__prepend{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.devui-input-slot__append{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.devui-input-slot__prefix,.devui-input-slot__suffix{display:inline-flex;white-space:nowrap;flex-shrink:0;flex-wrap:nowrap;align-items:center}.devui-input-slot__prefix>*{margin-right:8px}.devui-input-slot__suffix>*{margin-left:8px}.devui-input__clear--icon,.devui-input__password--icon{cursor:pointer}.devui-icon-group{display:inline-flex;align-items:center}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable){padding:8px;margin-left:0}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable):first-child{margin-left:-8px}.devui-icon-group>*:not(:first-child){margin-left:0}.devui-search{position:relative;display:flex;justify-content:center;align-items:center}.devui-search:not(.devui-search--error):not(.devui-search--disabled):not(.devui-search--focus):hover .devui-input{border-color:var(--devui-form-control-line-hover, #575d6c)}.devui-search .devui-input{padding:4px 60px 4px 8px;display:inline-flex;align-items:center;justify-content:center;width:100%;color:var(--devui-text, #252b3a);box-sizing:border-box;border:1px solid var(--devui-form-control-line, #d7d8da);border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-form-control-bg, #ffffff);transition:border-color .3s var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-search .devui-input__inner{padding:0}.devui-search .devui-input__wrapper{border:none;padding:0}.devui-search--focus .devui-input{border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-search svg.svg-icon-clear path,.devui-search svg.svg-icon-search path{fill:var(--devui-icon-text, #71757f)}.devui-search__clear{position:absolute;right:36px;cursor:pointer;font-size:10px;width:30px;height:100%;display:flex;justify-content:center;align-items:center}.devui-search__clear:after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:46%;border-left:1px solid var(--devui-dividing-line, #f2f2f3)}.devui-search__icon{pointer-events:all;cursor:pointer;position:absolute;z-index:1;right:0;top:0;font-size:16px;width:36px;height:100%;display:flex;justify-content:center;align-items:center}.devui-search--sm .devui-input.devui-input--sm{font-size:var(--devui-font-size, 14px);padding-right:60px}.devui-search--sm .devui-search__icon{font-size:14px;width:34px;height:26px}.devui-search--sm .devui-search__clear{width:26px;height:100%;right:34px}.devui-search--lg .devui-input{padding:4px 36px 4px 10px}.devui-search--lg .devui-input.devui-input--lg{padding-right:75px}.devui-search--lg .devui-search__icon{font-size:18px;width:46px;height:46px}.devui-search--lg .devui-search__clear{width:40px;height:100%;right:46px}.devui-search--disabled .devui-input{cursor:not-allowed;color:var(--devui-disabled-text, #adb0b8);border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f5)}.devui-search--disabled .devui-search__icon{cursor:not-allowed}.devui-search--disabled .icon-search{color:var(--devui-disabled-text, #adb0b8)!important}.devui-search--left .devui-input{padding:4px 26px 4px 30px}.devui-search--left .devui-input.devui-input--lg{padding-right:28px;padding-left:48px}.devui-search--left .devui-input.devui-input--sm{padding-right:24px}.devui-search--left .devui-search__clear{right:0}.devui-search--left .devui-search__clear:after{display:none}.devui-search--left .devui-search__icon{left:0}.devui-search--no-border .devui-input,.devui-search--no-border .devui-input__wrapper{background-color:unset}.devui-search--no-border:not(.devui-search--focus) .devui-input:not(:hover,:focus,:active){border:1px solid transparent}

package/select/index.es.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-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, toRef, onBeforeMount, vShow, resolveComponent, getCurrentInstance } 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, toRef, onBeforeMount, vShow, resolveComponent, getCurrentInstance } from "vue";
 import { onClickOutside } from "@vueuse/core";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 function className(classStr, classOpt) {
@@ -5789,6 +5789,10 @@ const flexibleOverlayProps = {
   isArrowCenter: {
     type: Boolean,
     default: true
+  },
+  clickEventBubble: {
+    type: Boolean,
+    default: false
   }
 };
 function getScrollParent(element) {
@@ -5903,6 +5907,9 @@ const FlexibleOverlay = defineComponent({
     expose
   }) {
     const ns2 = useNamespace("flexible-overlay");
+    const {
+      clickEventBubble
+    } = toRefs(props);
     const {
       arrowRef,
       overlayRef,
@@ -5916,7 +5923,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)]);
@@ -6034,7 +6044,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) => {
@@ -6277,8 +6287,6 @@ var Popover = defineComponent({
           "style": overlayStyles.value
         }, attrs, {
           "onPositionChange": handlePositionChange,
-          "onClick": withModifiers(() => ({}), ["stop"]),
-          "onPointerup": withModifiers(() => ({}), ["stop"]),
           "onMouseenter": onMouseenter,
           "onMouseleave": onMouseleave
         }), {
@@ -6477,9 +6485,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)]
@@ -7736,23 +7742,15 @@ defineComponent({
     };
   }
 });
-function useSelect(props, ctx, focus, blur, isSelectFocus, t) {
+function useSelect(props, selectRef, ctx, focus, blur, isSelectFocus, t) {
   const formContext = inject(FORM_TOKEN, void 0);
   const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
   const ns2 = useNamespace("select");
-  const containerRef = ref();
   const dropdownRef = ref();
   const selectDisabled = computed(() => (formContext == null ? void 0 : formContext.disabled) || props.disabled);
   const selectSize = computed(() => (formContext == null ? void 0 : formContext.size) || props.size);
   const isObjectOption = ref(false);
   const originRef = ref();
-  const dropdownWidth = computed(() => {
-    var _a;
-    if (!((_a = originRef == null ? void 0 : originRef.value) == null ? void 0 : _a.clientWidth)) {
-      return "100%";
-    }
-    return originRef.value.clientWidth + "px";
-  });
   const isOpen = ref(false);
   const toggleChange = (bool) => {
     if (selectDisabled.value) {
@@ -7761,9 +7759,9 @@ function useSelect(props, ctx, focus, blur, isSelectFocus, t) {
     isOpen.value = bool;
     ctx.emit("toggle-change", bool);
   };
-  onClickOutside(containerRef, () => {
+  onClickOutside(dropdownRef, () => {
     toggleChange(false);
-  });
+  }, { ignore: [selectRef] });
   const dropdownMenuMultipleNs = useNamespace("dropdown-menu-multiple");
   const selectCls = computed(() => {
     return className(ns2.b(), {
@@ -7816,6 +7814,17 @@ function useSelect(props, ctx, focus, blur, isSelectFocus, t) {
     }
     isObjectOption.value = isObject2;
   };
+  const updateInjectOptionsStatus = () => {
+    if (props.multiple && Array.isArray(props.modelValue)) {
+      for (const child of injectOptions.value.values()) {
+        if (props.modelValue.includes(child.value)) {
+          child._checked = true;
+        } else {
+          child._checked = false;
+        }
+      }
+    }
+  };
   const getInjectOptions = (values) => {
     return values.map((value) => {
       if (props.multiple && props.allowCreate) {
@@ -7843,11 +7852,6 @@ function useSelect(props, ctx, focus, blur, isSelectFocus, t) {
     }
     return [];
   });
-  const onClick = function(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    toggleChange(!isOpen.value);
-  };
   const isSupportFilter = computed(() => lodash.exports.isFunction(props.filter) || typeof props.filter === "boolean" && props.filter);
   const getMultipleSelected = (items) => {
     if (mergeOptions.value.length) {
@@ -7954,10 +7958,12 @@ function useSelect(props, ctx, focus, blur, isSelectFocus, t) {
   const isLoading = computed(() => typeof props.loading === "boolean" && props.loading);
   const debounceTime = computed(() => props.remote ? 300 : 0);
   const handlerQueryFunc = (query) => {
+    var _a;
     if (lodash.exports.isFunction(props.filter)) {
       props.filter(query);
     } else {
       queryChange(query);
+      (_a = dropdownRef.value) == null ? void 0 : _a.updatePosition();
     }
   };
   const debounceQueryFilter = lodash.exports.debounce((query) => {
@@ -7968,10 +7974,14 @@ function useSelect(props, ctx, focus, blur, isSelectFocus, t) {
     const hasCommonOption = injectOptionsArray.value.filter((item) => !item.create).some((item) => item.name === filterQuery.value);
     return typeof props.filter === "boolean" && props.filter && props.allowCreate && !!filterQuery.value && !hasCommonOption;
   });
+  watch(isShowCreateOption, () => {
+    var _a;
+    (_a = dropdownRef.value) == null ? void 0 : _a.updatePosition();
+  });
   const emptyText = computed(() => {
     const visibleOptionsCount = injectOptionsArray.value.filter((item) => {
       const label = item.name || item.value;
-      return label.toString().toLocaleLowerCase().includes(filterQuery.value.toLocaleLowerCase());
+      return label.toString().toLocaleLowerCase().includes(filterQuery.value.toLocaleLowerCase().trim());
     }).length;
     if (isLoading.value) {
       return props.loadingText || t("loadingText");
@@ -7999,11 +8009,23 @@ function useSelect(props, ctx, focus, blur, isSelectFocus, t) {
   };
   watch(() => props.modelValue, () => {
     formItemContext == null ? void 0 : formItemContext.validate("change").catch((err) => console.warn(err));
+    updateInjectOptionsStatus();
   }, { deep: true });
+  watch(injectOptions, () => {
+    var _a;
+    if (isOpen.value) {
+      (_a = dropdownRef.value) == null ? void 0 : _a.updatePosition();
+    }
+  }, { deep: true });
+  watch(isOpen, (val) => {
+    var _a;
+    if (val) {
+      (_a = dropdownRef.value) == null ? void 0 : _a.updatePosition();
+    }
+  }, { flush: "post" });
   return {
     selectDisabled,
     selectSize,
-    containerRef,
     originRef,
     dropdownRef,
     isOpen,
@@ -8014,8 +8036,6 @@ function useSelect(props, ctx, focus, blur, isSelectFocus, t) {
     emptyText,
     isLoading,
     isShowEmptyText,
-    dropdownWidth,
-    onClick,
     handleClear,
     valueChange,
     handleClose,
@@ -8673,11 +8693,7 @@ var Option = defineComponent({
     return () => {
       var _a;
       return withDirectives(createVNode("li", {
-        "onClick": (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          optionSelect();
-        },
+        "onClick": withModifiers(optionSelect, ["prevent", "stop"]),
         "class": selectOptionCls.value
       }, [((_a = ctx.slots) == null ? void 0 : _a.default) ? ctx.slots.default() : currentName.value]), [[vShow, isVisible.value]]);
     };
@@ -8858,7 +8874,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",
@@ -9141,22 +9158,14 @@ var SelectContent = defineComponent({
         "class": multipleCls
       }, [!isSupportCollapseTags.value && selectedData.value.length >= 1 && selectedData.value.map((item) => createVNode(Tag, {
         "deletable": true,
-        "onTagDelete": (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          tagDelete(item);
-        },
+        "onTagDelete": withModifiers(() => tagDelete(item), ["prevent", "stop"]),
         "key": item.value,
         "size": tagSize.value
       }, {
         default: () => [item.name]
       })), isSupportCollapseTags.value && selectedData.value.length >= 1 && createVNode(Tag, {
         "deletable": true,
-        "onTagDelete": (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          tagDelete(selectedData.value[0]);
-        },
+        "onTagDelete": withModifiers(() => tagDelete(selectedData.value[0]), ["prevent", "stop"]),
         "size": tagSize.value
       }, {
         default: () => [selectedData.value[0].name]
@@ -9169,13 +9178,9 @@ var SelectContent = defineComponent({
         }, {
           default: () => [`+${selectedData.value.length - 1}`]
         }),
-        content: () => createVNode("div", null, [selectedData.value.map((item) => createVNode(Tag, {
+        content: () => createVNode("div", null, [selectedData.value.map((item, index2) => index2 !== 0 && createVNode(Tag, {
           "deletable": true,
-          "onTagDelete": (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            tagDelete(item);
-          },
+          "onTagDelete": withModifiers(() => tagDelete(item), ["prevent", "stop"]),
           "key": item.value,
           "size": tagSize.value
         }, {
@@ -9254,7 +9259,6 @@ var Select = defineComponent({
     const {
       selectDisabled,
       selectSize,
-      containerRef,
       originRef,
       dropdownRef,
       isOpen,
@@ -9265,8 +9269,6 @@ var Select = defineComponent({
       emptyText,
       isLoading,
       isShowEmptyText,
-      dropdownWidth,
-      onClick,
       valueChange,
       handleClear,
       updateInjectOptions,
@@ -9277,7 +9279,7 @@ var Select = defineComponent({
       isDisabled,
       toggleChange,
       isShowCreateOption
-    } = useSelect(props, ctx, focus, blur, isSelectFocus, t);
+    } = useSelect(props, selectRef, ctx, focus, blur, isSelectFocus, t);
     const scrollbarNs = useNamespace("scrollbar");
     const ns2 = useNamespace("select");
     const dropdownCls = ns2.e("dropdown");
@@ -9293,8 +9295,24 @@ var Select = defineComponent({
     });
     const isRender = ref(false);
     const position = ref(["bottom-start", "top-start"]);
+    const dropdownWidth = ref("0");
+    const updateDropdownWidth = () => {
+      var _a;
+      dropdownWidth.value = ((_a = originRef == null ? void 0 : originRef.value) == null ? void 0 : _a.clientWidth) ? originRef.value.clientWidth + "px" : "100%";
+    };
+    watch(selectRef, (val) => {
+      if (val) {
+        originRef.value = val.$el;
+        updateDropdownWidth();
+      }
+    });
     onMounted(() => {
       isRender.value = true;
+      updateDropdownWidth();
+      window.addEventListener("resize", updateDropdownWidth);
+    });
+    onUnmounted(() => {
+      window.removeEventListener("resize", updateDropdownWidth);
     });
     provide(SELECT_TOKEN, reactive(__spreadProps(__spreadValues({}, toRefs(props)), {
       selectDisabled,
@@ -9313,61 +9331,65 @@ var Select = defineComponent({
     return () => {
       return createVNode("div", {
         "class": selectCls.value,
-        "ref": containerRef,
-        "onClick": onClick
-      }, [createVNode("div", {
-        "ref": originRef
+        "onClick": withModifiers(() => {
+          toggleChange(!isOpen.value);
+        }, ["stop"])
       }, [createVNode(SelectContent, {
         "ref": selectRef
-      }, null)]), createVNode(Transition, {
-        "name": "fade"
+      }, null), createVNode(Teleport, {
+        "to": "body"
       }, {
-        default: () => [createVNode(FlexibleOverlay, {
-          "modelValue": isRender.value,
-          "onUpdate:modelValue": ($event) => isRender.value = $event,
-          "ref": dropdownRef,
-          "origin": originRef.value,
-          "align": "start",
-          "position": position.value,
-          "style": {
-            visibility: isOpen.value ? "visible" : "hidden",
-            "z-index": isOpen.value ? 1e3 : -1
-          }
+        default: () => [createVNode(Transition, {
+          "name": "fade"
         }, {
-          default: () => {
-            var _a, _b, _c, _d;
-            return [createVNode("div", {
-              "class": dropdownCls,
-              "style": {
-                width: `${dropdownWidth.value}`,
-                visibility: isOpen.value ? "visible" : "hidden"
-              }
-            }, [withDirectives(createVNode("ul", {
-              "class": listCls
-            }, [isShowCreateOption.value && createVNode(Option, {
-              "value": filterQuery.value,
-              "name": filterQuery.value,
-              "create": true
-            }, {
-              default: () => [props.multiple ? createVNode(Checkbox, {
-                "modelValue": false,
-                "label": filterQuery.value
-              }, null) : filterQuery.value]
-            }), ((_a = ctx.slots) == null ? void 0 : _a.default) && ctx.slots.default(), !((_b = ctx.slots) == null ? void 0 : _b.default) && mergeOptions.value.length >= 1 && mergeOptions.value.map((item) => createVNode(Option, {
-              "key": item.value,
-              "value": item.value,
-              "name": item.name,
-              "disabled": isDisabled(item)
-            }, {
-              default: () => [props.multiple ? createVNode(Checkbox, {
-                "modelValue": item._checked,
-                "label": item.name,
+          default: () => [createVNode(FlexibleOverlay, {
+            "modelValue": isRender.value,
+            "onUpdate:modelValue": ($event) => isRender.value = $event,
+            "ref": dropdownRef,
+            "origin": originRef.value,
+            "align": "start",
+            "offset": 4,
+            "position": position.value,
+            "style": {
+              visibility: isOpen.value ? "visible" : "hidden",
+              "z-index": isOpen.value ? "var(--devui-z-index-dropdown, 1052)" : -1
+            }
+          }, {
+            default: () => {
+              var _a, _b, _c, _d;
+              return [createVNode("div", {
+                "class": dropdownCls,
+                "style": {
+                  width: `${dropdownWidth.value}`,
+                  visibility: isOpen.value ? "visible" : "hidden"
+                }
+              }, [withDirectives(createVNode("ul", {
+                "class": listCls
+              }, [isShowCreateOption.value && createVNode(Option, {
+                "value": filterQuery.value,
+                "name": filterQuery.value,
+                "create": true
+              }, {
+                default: () => [props.multiple ? createVNode(Checkbox, {
+                  "modelValue": false,
+                  "label": filterQuery.value
+                }, null) : filterQuery.value]
+              }), ((_a = ctx.slots) == null ? void 0 : _a.default) && ctx.slots.default(), !((_b = ctx.slots) == null ? void 0 : _b.default) && mergeOptions.value.length >= 1 && mergeOptions.value.map((item) => createVNode(Option, {
+                "key": item.value,
+                "value": item.value,
+                "name": item.name,
                 "disabled": isDisabled(item)
-              }, null) : item.name || item.value]
-            }))]), [[vShow, !isLoading.value]]), isShowEmptyText.value && createVNode("div", null, [((_c = ctx.slots) == null ? void 0 : _c.empty) && ctx.slots.empty(), !((_d = ctx.slots) == null ? void 0 : _d.empty) && createVNode("p", {
-              "class": dropdownEmptyCls
-            }, [emptyText.value])])])];
-          }
+              }, {
+                default: () => [props.multiple ? createVNode(Checkbox, {
+                  "modelValue": item._checked,
+                  "label": item.name,
+                  "disabled": isDisabled(item)
+                }, null) : item.name || item.value]
+              }))]), [[vShow, !isLoading.value]]), isShowEmptyText.value && createVNode("div", null, [((_c = ctx.slots) == null ? void 0 : _c.empty) && ctx.slots.empty(), !((_d = ctx.slots) == null ? void 0 : _d.empty) && createVNode("p", {
+                "class": dropdownEmptyCls
+              }, [emptyText.value])])])];
+            }
+          })]
         })]
       })]);
     };