vue-devui 1.0.2 → 1.1.0

package/input/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--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__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:24px;font-size:var(--devui-font-size-sm, 12px)}.devui-input--lg{height:40px;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}

package/menu/index.es.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { ref, defineComponent, getCurrentInstance, inject, toRefs, computed, createVNode, watch, onMounted, Transition, withDirectives, vShow, watchEffect, provide } from "vue";
+import { ref, defineComponent, getCurrentInstance, inject, toRefs, computed, createVNode, watch, onMounted, Transition, withDirectives, vShow, watchEffect, provide, reactive } from "vue";
 function createBem(namespace, element, modifier) {
   let cls = namespace;
   if (element) {
@@ -284,6 +284,7 @@ var MenuItem = defineComponent({
       e.stopPropagation();
       const ele = e.currentTarget;
       let changeRouteResult = void 0;
+      props.disabled && e.preventDefault();
       if (!props.disabled) {
         if (!multiple) {
           menuStore.emit("menuItem:clear:select");
@@ -339,7 +340,9 @@ var MenuItem = defineComponent({
     }, [(_b = (_a = ctx.slots).icon) == null ? void 0 : _b.call(_a)]);
     const menuItems = ref(null);
     watch(disabled, () => {
-      classObject.value[menuItemSelect] = false;
+      if (!multiple) {
+        classObject.value[menuItemSelect] = false;
+      }
     });
     watch(() => defaultSelectKey, (n) => {
       isSelect.value = initSelect(n, key, multiple, disabled);
@@ -425,61 +428,20 @@ var MenuItem = defineComponent({
     };
   }
 });
-const ns$1 = useNamespace("menu");
-const subNs$1 = useNamespace("submenu");
-const menuItemHorizontalWrapperHidden = `${ns$1.b()}-item-horizontal-wrapper-hidden`;
-const menuItemHorizontalWrapperShow = `${ns$1.b()}-item-horizontal-wrapper-show`;
-function useShowSubMenu(eventName, e, wrapper) {
-  const target = e.currentTarget;
-  const targetParent = target.parentElement;
-  const wrapperChildren = wrapper.children;
-  wrapper.style.padding = `0 20px !important`;
-  if (eventName === "mouseenter") {
-    if ((targetParent == null ? void 0 : targetParent.tagName) === "DIV") {
-      wrapper.classList.add(`${ns$1.b()}-item-horizontal-wrapper-level`);
-      const { width } = target.getClientRects()[0];
-      wrapper.style.top = `0px`;
-      wrapper.style.left = `${width}px`;
-    } else {
-      wrapper.style.top = `26px`;
-      wrapper.style.left = `0px`;
-    }
-    wrapper.classList.remove(menuItemHorizontalWrapperHidden);
-    wrapper.classList.add(menuItemHorizontalWrapperShow);
-    for (let i = 0; i < wrapperChildren.length; i++) {
-      const ul = wrapperChildren[i];
-      if (ul.tagName === "UL" && ul.classList.contains(subNs$1.b())) {
-        const levelUlWrapper = ul.getElementsByClassName(`${ns$1.b()}-item-horizontal-wrapper`)[0];
-        ul.addEventListener("mouseenter", (ev) => {
-          ev.stopPropagation();
-          useShowSubMenu("mouseenter", ev, levelUlWrapper);
-          levelUlWrapper.classList.remove(menuItemHorizontalWrapperHidden);
-          levelUlWrapper.classList.add(menuItemHorizontalWrapperShow);
-        });
-        ul.addEventListener("mouseleave", (ev) => {
-          ev.stopPropagation();
-          useShowSubMenu("mouseleave", ev, levelUlWrapper);
-          levelUlWrapper.classList.remove(menuItemHorizontalWrapperShow);
-          levelUlWrapper.classList.add(menuItemHorizontalWrapperHidden);
-        });
-      }
-    }
-  }
-  if (eventName === "mouseleave") {
-    wrapper.classList.remove(menuItemHorizontalWrapperShow);
-    wrapper.classList.add(menuItemHorizontalWrapperHidden);
+function randomId(n = 8) {
+  const str = "abcdefghijklmnopqrstuvwxyz0123456789";
+  let result = "";
+  for (let i = 0; i < n; i++) {
+    result += str[parseInt((Math.random() * str.length).toString())];
   }
+  return result;
 }
-const subMenuProps = {
-  title: {
-    type: String,
-    default: ""
-  },
-  disabled: {
-    type: Boolean,
-    default: false
+function useNearestMenuElement(ele) {
+  while (ele && ele.tagName !== "LI" && ele.tagName !== "UL") {
+    ele = ele.parentElement;
   }
-};
+  return ele;
+}
 const elTransition = "0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";
 const TransitionObj = {
   "before-enter"(el) {
@@ -553,6 +515,61 @@ var MenuTransition = defineComponent({
     };
   }
 });
+const subMenuProps = {
+  title: {
+    type: String,
+    default: ""
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+};
+const ns$1 = useNamespace("menu");
+const subNs$1 = useNamespace("submenu");
+const menuItemHorizontalWrapperHidden = `${ns$1.b()}-item-horizontal-wrapper-hidden`;
+const menuItemHorizontalWrapperShow = `${ns$1.b()}-item-horizontal-wrapper-show`;
+function useShowSubMenu(eventName, e, wrapper) {
+  const target = e.currentTarget;
+  const targetParent = target.parentElement;
+  const wrapperChildren = wrapper.children;
+  wrapper.style.padding = `0 20px !important`;
+  if (eventName === "mouseenter") {
+    if ((targetParent == null ? void 0 : targetParent.tagName) === "DIV") {
+      wrapper.classList.add(`${ns$1.b()}-item-horizontal-wrapper-level`);
+      const { width } = target.getClientRects()[0];
+      wrapper.style.top = `0px`;
+      wrapper.style.left = `${width}px`;
+    } else {
+      wrapper.style.top = `26px`;
+      wrapper.style.left = `0px`;
+    }
+    wrapper.classList.remove(menuItemHorizontalWrapperHidden);
+    wrapper.classList.add(menuItemHorizontalWrapperShow);
+    for (let i = 0; i < wrapperChildren.length; i++) {
+      const ul = wrapperChildren[i];
+      if (ul.tagName === "UL" && ul.classList.contains(subNs$1.b())) {
+        const levelUlWrapper = ul.getElementsByClassName(`${ns$1.b()}-item-horizontal-wrapper`)[0];
+        ul.addEventListener("mouseenter", (ev) => {
+          ev.stopPropagation();
+          useShowSubMenu("mouseenter", ev, levelUlWrapper);
+          levelUlWrapper.classList.remove(menuItemHorizontalWrapperHidden);
+          levelUlWrapper.classList.add(menuItemHorizontalWrapperShow);
+        });
+        ul.addEventListener("mouseleave", (ev) => {
+          ev.stopPropagation();
+          useShowSubMenu("mouseleave", ev, levelUlWrapper);
+          levelUlWrapper.classList.remove(menuItemHorizontalWrapperShow);
+          levelUlWrapper.classList.add(menuItemHorizontalWrapperHidden);
+        });
+      }
+    }
+  }
+  if (eventName === "mouseleave") {
+    wrapper.classList.remove(menuItemHorizontalWrapperShow);
+    wrapper.classList.add(menuItemHorizontalWrapperHidden);
+  }
+}
 const ns = useNamespace("menu");
 const subNs = useNamespace("submenu");
 const subMenuClass = subNs.b();
@@ -566,9 +583,9 @@ var SubMenu = defineComponent({
         key
       }
     } = getCurrentInstance();
-    const key_ = String(key);
-    const isOpen = ref(false);
+    let key_ = String(key);
     const defaultOpenKeys = inject("openKeys");
+    const isOpen = ref(defaultOpenKeys.value.includes(key_));
     const indent = inject("defaultIndent");
     const isCollapsed = inject("isCollapsed");
     const mode = inject("mode");
@@ -577,17 +594,11 @@ var SubMenu = defineComponent({
     const isHorizontal = mode.value === "horizontal";
     if (key_ === "null") {
       console.warn(`[devui][menu]: Key can not be null`);
-    } else {
-      if (defaultOpenKeys.value.includes(key_)) {
-        isOpen.value = true;
-      } else {
-        isOpen.value = false;
-      }
+      key_ = `randomKey-${randomId(16)}`;
     }
     const clickHandle = (e) => {
-      e.preventDefault();
       e.stopPropagation();
-      const ele = e.currentTarget;
+      const ele = useNearestMenuElement(e.target);
       if (ele.classList.contains(subMenuClass) && isHorizontal) {
         return;
       }
@@ -596,30 +607,21 @@ var SubMenu = defineComponent({
         useClick(e);
       }
       if (!props.disabled && mode.value !== "horizontal") {
-        const target = e.target;
-        let cur = e.target;
-        if (target.tagName === "UL") {
-          if (target.classList.contains(`${subMenuClass}-open`)) {
-            isOpen.value = !isOpen.value;
-          } else {
-            isOpen.value = isOpen.value;
-          }
+        const cur = useNearestMenuElement(e.target);
+        const idx = defaultOpenKeys.value.indexOf(key_);
+        if (idx >= 0 && cur.tagName === "UL") {
+          defaultOpenKeys.value.splice(idx, 1);
         } else {
-          while (cur && cur.tagName !== "UL") {
-            if (cur.tagName === "LI") {
-              break;
-            }
-            cur = cur.parentElement;
-          }
           if (cur.tagName === "UL") {
-            isOpen.value = !isOpen.value;
+            defaultOpenKeys.value.push(key_);
           }
         }
+        isOpen.value = defaultOpenKeys.value.indexOf(key_) >= 0;
         parentEmit("submenu-change", {
           type: "submenu-change",
           state: isOpen.value,
           key: key_,
-          el: cur
+          el: ele
         });
       }
     };
@@ -648,11 +650,11 @@ var SubMenu = defineComponent({
     });
     onMounted(() => {
       var _a;
-      const el = title.value;
-      const e = subMenu.value;
+      const subMenuTitle = title.value;
+      const subMenuWrapper = subMenu.value;
       addLayer();
-      class_layer.value = `layer_${(_a = Array.from(e.classList).at(-1)) == null ? void 0 : _a.replace("layer_", "")}`;
-      if (isHorizontal) {
+      class_layer.value = `layer_${(_a = Array.from(subMenuWrapper.classList).at(-1)) == null ? void 0 : _a.replace("layer_", "")}`;
+      if (isHorizontal && !props.disabled) {
         subMenu.value.addEventListener("mouseenter", (ev) => {
           ev.stopPropagation();
           useShowSubMenu("mouseenter", ev, wrapperDom);
@@ -663,22 +665,22 @@ var SubMenu = defineComponent({
         });
       }
       watch(isCollapsed, (newValue) => {
-        const layer = Number(getLayer(e));
+        const layer = Number(getLayer(subMenuWrapper));
         if (!Number.isNaN(layer)) {
           layer > 2 && (isShow.value = !isCollapsed.value);
         }
         if (newValue) {
-          el.style.padding !== "0" && (oldPadding = el.style.padding);
+          subMenuTitle.style.padding !== "0" && (oldPadding = subMenuTitle.style.padding);
           setTimeout(() => {
-            el.style.padding = "0";
-            el.style.width = "";
-            el.style.textAlign = `center`;
+            subMenuTitle.style.padding = "0";
+            subMenuTitle.style.width = "";
+            subMenuTitle.style.textAlign = `center`;
           }, 300);
-          el.style.display = `block`;
+          subMenuTitle.style.display = `block`;
         } else {
-          el.style.padding = `${oldPadding}`;
-          el.style.textAlign = ``;
-          el.style.display = `flex`;
+          subMenuTitle.style.padding = `${oldPadding}`;
+          subMenuTitle.style.textAlign = ``;
+          subMenuTitle.style.display = `flex`;
         }
       });
     });
@@ -686,10 +688,10 @@ var SubMenu = defineComponent({
       var _a, _b, _c, _d;
       return withDirectives(createVNode("ul", {
         "onClick": clickHandle,
-        "class": [subMenuClass, class_layer.value],
+        "class": [subMenuClass, class_layer.value, props["disabled"] && `${subMenuClass}-disabled`],
         "ref": subMenu
       }, [createVNode("div", {
-        "class": [`${subMenuClass}-title`, props["disabled"] && `${subMenuClass}-disabled`],
+        "class": [`${subMenuClass}-title`],
         "style": `padding: 0 ${indent}px`,
         "ref": title
       }, [createVNode("span", {
@@ -702,10 +704,10 @@ var SubMenu = defineComponent({
           "icon icon-chevron-right": class_layer.value === `layer_${subMenuClass}`,
           "is-opened": isOpen.value
         }
-      }, null), [[vShow, !isCollapsed.value && key !== "overflowContainer"]])]), isHorizontal ? createVNode("div", {
+      }, null), [[vShow, !isCollapsed.value && key !== "overflowContainer"]])]), isHorizontal ? withDirectives(createVNode("div", {
         "class": `${ns.b()}-item-horizontal-wrapper ${ns.b()}-item-horizontal-wrapper-hidden`,
         "ref": wrapper
-      }, [(_d = (_c = ctx.slots).default) == null ? void 0 : _d.call(_c)]) : createVNode(MenuTransition, null, {
+      }, [(_d = (_c = ctx.slots).default) == null ? void 0 : _d.call(_c)]), [[vShow, !props.disabled]]) : createVNode(MenuTransition, null, {
         default: () => {
           var _a2, _b2;
           return [withDirectives(createVNode("div", {
@@ -756,14 +758,6 @@ const menuProps = {
   }
 };
 var menu = "";
-function randomId(n = 8) {
-  const str = "abcdefghijklmnopqrstuvwxyz0123456789";
-  let result = "";
-  for (let i = 0; i < n; i++) {
-    result += str[parseInt((Math.random() * str.length).toString())];
-  }
-  return result;
-}
 const recordTable = {};
 class Store {
   constructor(rootName) {
@@ -818,51 +812,67 @@ var Menu = defineComponent({
     provide("useRouter", props.router);
     setDefaultIndent(props["indentSize"]);
     const menuRoot = ref(null);
-    const overflow_container = ref(null);
     const overflowItemLength = ref(0);
+    const overflowContainer = ref(null);
+    const selectClassName = `${ns2.b()}-item-select`;
     const rootClassName = computed(() => ({
       [`${ns2.b()}`]: true,
       [`${ns2.b()}-vertical`]: mode.value === "vertical",
       [`${ns2.b()}-horizontal`]: mode.value === "horizontal",
       [`${ns2.b()}-collapsed`]: collapsed.value
     }));
+    const overflowContainerClassName = reactive({
+      [selectClassName]: false,
+      [`${ns2.b()}-overflow-container`]: true
+    });
+    const resetOverflowContainerSelectState = (e) => {
+      const children = Array.from(e.children);
+      for (const item of children) {
+        if (item.classList.contains(selectClassName)) {
+          overflowContainerClassName[selectClassName] = true;
+          break;
+        } else {
+          overflowContainerClassName[selectClassName] = false;
+        }
+      }
+    };
     onMounted(() => {
       var _a;
       if (props["mode"] === "horizontal") {
         let flag = false;
-        const overflowContainer = (_a = overflow_container.value) == null ? void 0 : _a.$el;
+        const overflowContainerElement = (_a = overflowContainer.value) == null ? void 0 : _a.$el;
         const root = menuRoot.value;
         const children = root.children;
-        const container = overflowContainer.children[1];
+        const container = overflowContainerElement.children[1];
         const ob = new IntersectionObserver((entries) => {
-          entries.forEach((v) => {
-            if (!v.isIntersecting) {
-              const cloneNode = v.target.cloneNode(true);
-              if (v.target.classList.contains(`${ns2.b()}-overflow-container`)) {
-                if (flag && v.target.previousElementSibling && container.children.length) {
-                  root.appendChild(v.target.previousElementSibling);
+          entries.forEach((entry) => {
+            if (!entry.isIntersecting) {
+              const cloneNode = entry.target.cloneNode(true);
+              if (entry.target.classList.contains(`${ns2.b()}-overflow-container`)) {
+                if (flag && entry.target.previousElementSibling && container.children.length) {
+                  root.appendChild(entry.target.previousElementSibling);
                 } else {
                   flag = true;
                 }
               } else {
                 overflowItemLength.value += 1;
-                v.target.style.visibility = "hidden";
-                if (overflowContainer.nextSibling) {
-                  root.insertBefore(v.target, overflowContainer.nextSibling);
+                entry.target.style.visibility = "hidden";
+                if (overflowContainerElement.nextSibling) {
+                  root.insertBefore(entry.target, overflowContainerElement.nextSibling);
                 } else {
-                  root.appendChild(v.target);
+                  root.appendChild(entry.target);
                 }
                 container.appendChild(cloneNode);
+                resetOverflowContainerSelectState(container);
               }
             } else {
-              if (!v.target.classList.contains(`${ns2.b()}-overflow-container`) && v.target.style.visibility === "hidden") {
-                ob.unobserve(v.target);
-                const el = container.lastChild;
-                if (el) {
-                  root.insertBefore(el, overflowContainer);
-                }
-                const obItem = overflowContainer.previousElementSibling;
-                if (obItem) {
+              if (!entry.target.classList.contains(`${ns2.b()}-overflow-container`) && entry.target.style.visibility === "hidden") {
+                ob.unobserve(entry.target);
+                root.insertBefore(entry.target, overflowContainerElement);
+                entry.target.style.visibility = "";
+                const obItem = overflowContainerElement.previousElementSibling;
+                const canObAgin = obItem && entry.boundingClientRect.width % entry.target.getBoundingClientRect().width === 0;
+                if (canObAgin) {
                   ob.observe(obItem);
                 }
                 if (obItem == null ? void 0 : obItem.classList.contains("devui-submenu")) {
@@ -877,9 +887,12 @@ var Menu = defineComponent({
                     useShowSubMenu("mouseleave", ev, wrapper);
                   });
                 }
-                v.target.style.visibility = "";
-                v.target.remove();
                 overflowItemLength.value -= 1;
+                ob.observe(entry.target);
+                if (container.lastChild) {
+                  container.removeChild(container.lastChild);
+                }
+                resetOverflowContainerSelectState(container);
               }
             }
           });
@@ -898,12 +911,12 @@ var Menu = defineComponent({
       return createVNode("ul", {
         "ref": menuRoot,
         "class": rootClassName.value,
-        "style": [props["collapsed"] ? `width:${props["collapsedIndent"] * 2}px` : `width: ${props["width"]}`, "white-space: nowrap"]
+        "style": [props["collapsed"] ? `width:${props["collapsedIndent"] * 2}px` : `width: ${props["width"]}`]
       }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a), withDirectives(createVNode(SubMenu, {
-        "ref": overflow_container,
+        "ref": overflowContainer,
         "key": "overflowContainer",
         "title": "...",
-        "class": `${ns2.b()}-overflow-container`
+        "class": overflowContainerClassName
       }, null), [[vShow, overflowItemLength.value > 0 && mode.value === "horizontal"]])]);
     };
   }

package/menu/index.umd.js

@@ -1 +1 @@
-var Ee=Object.defineProperty;var Ce=(m,n,S)=>n in m?Ee(m,n,{enumerable:!0,configurable:!0,writable:!0,value:S}):m[n]=S;var ae=(m,n,S)=>(Ce(m,typeof n!="symbol"?n+"":n,S),S);(function(m,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(m=typeof globalThis!="undefined"?globalThis:m||self,n(m.index={},m.Vue))})(this,function(m,n){"use strict";function S(e,a,t){let s=e;return a&&(s+=`__${a}`),t&&(s+=`--${t}`),s}function E(e,a=!1){const t=a?`.devui-${e}`:`devui-${e}`;return{b:()=>S(t),e:u=>u?S(t,u):"",m:u=>u?S(t,"",u):"",em:(u,f)=>u&&f?S(t,u,f):""}}const J=[];let K=[];const U=n.ref(24),_=E("menu"),le=E("submenu"),B=_.b(),Q=`${_.b()}-item-horizontal-wrapper`,X=`${_.b()}-item-select`,Y=`${_.b()}-active-parent`;function oe(e){U.value=e}function ie(e){J.push(e)}function re(){K=[],J.forEach(t=>{K.push(t.el.parentElement)});const e=[...K],a=t=>{var s;return(s=/layer_(\d*)/gim.exec(t))==null?void 0:s[1]};for(;e.length;){const t=e.shift();if(t==null?void 0:t.classList.contains(B)){const s=t.children;e.unshift(...Array.from(s));continue}else{if(t.tagName==="DIV")if(t.classList.contains(`${_.b()}-item-vertical-wrapper`)||t.classList.contains(`${le.b()}-menu-item-vertical-wrapper`)){const s=t.parentElement;if(e.unshift(...Array.from(t.children)),s==null?void 0:s.classList.contains(B))t.classList.add("layer_1");else{let l=a((s==null?void 0:s.classList.value)||"");l=Number(l),t.classList.add(`layer_${l}`)}}else{const s=t.parentElement;let l=a((s==null?void 0:s.classList.value)||"");l=Number(l),t.classList.add(`layer_${l}`),t.style.paddingLeft=`${(l===2?1:l-1)*U.value}px`}if(t.tagName==="UL"){const s=t.parentElement,l=t.children;for(let u=0;u<l.length;u++)e.unshift(l[u]);const i=(s==null?void 0:s.classList.value)||"";let d=a(i);(s==null?void 0:s.classList.contains(B))?(d=1,t.classList.add(`layer_${2}`)):(t.classList.add(`layer_${Number(d)+1}`),d=Number(d)+1)}if(t.tagName==="LI"){const s=t.parentElement,l=(s==null?void 0:s.classList.value)||"";let i=a(l);a(l),i=Number(i),t.style.padding=`0 ${i*U.value}px`}}}}function ce(e){var s;const a=e;let t=null;for(let l=0;l<a.length;l++){const i=a[l];((s=i==null?void 0:i.classList)==null?void 0:s.contains(`${_.b()}-horizontal`))&&(t=i)}return t}function de(e,a){let t=a.target,s=[];const{path:l}=a,i=ce(l);for(s=[...Array.from(i.children)],t.tagName==="SPAN"&&(t=t.parentElement);s.length;){const d=s.shift();if((d==null?void 0:d.tagName)==="UL"||(d==null?void 0:d.classList.contains(Q))){const u=d==null?void 0:d.children;s.unshift(...Array.from(u))}d!==t&&(d==null||d.classList.remove(X),d==null||d.classList.remove(Y))}}function ue(e,a){const t=[],s=a.path||a.composedPath&&a.composedPath();for(let l=0;l<s.length;l++){const i=s[l];if(!i.classList.contains(B))t.push(...Array.from(i.children));else{t.push(...Array.from(i.children));break}}for(;t.length;){const l=t.shift();((l==null?void 0:l.tagName)==="UL"||(l==null?void 0:l.classList.contains(Q)))&&t.push(...Array.from(l==null?void 0:l.children)),l!==e&&((l==null?void 0:l.tagName)==="DIV"&&t.unshift(...Array.from(l==null?void 0:l.children)),l==null||l.classList.remove(X),l==null||l.classList.remove(Y))}}function Z(e,a,t=!1){t?de(e,a):ue(e,a)}function fe(e){var s;const a=/layer_(\d{1,})/gim,t=e.className;return(s=a.exec(t))==null?void 0:s[1]}const me={disabled:{type:Boolean,default:!1},href:{type:String,default:""},route:{type:[String,Object]}},ee=E("menu");function te(e,a,t,s){const l=n.ref(!1);return t?e.includes(a)?l.value=!0:l.value=!1:e[0]===a&&!s.value?l.value=!0:l.value=!1,l.value}function pe(e){var t,s;let a=e.parentElement;for(;!a.classList.contains(ee.b());)((t=a.firstElementChild)==null?void 0:t.tagName)==="DIV"&&((s=a==null?void 0:a.firstElementChild)==null||s.classList.add(`${ee.b()}-active-parent`)),a=a.parentElement;return a}function he(e,a,t,s){if(t&&a){const l=e.route||s,i=a.push(l).then(d=>d);return{route:l,routerResult:i}}}const W=E("menu");function ne(e){const a=e.path;for(let t=0;t<a.length;t++){const s=a[t];if(s.classList.contains(`${W.b()}-horizontal`))break;if(s.classList.contains(`${W.b()}-item-horizontal-wrapper`))continue;s.tagName!=="SPAN"&&s.classList.add(`${W.b()}-item-select`)}}const T=E("menu"),x=`${T.b()}-item-select`,ge=`${T.b()}-item-disabled`;var q=n.defineComponent({name:"DMenuItem",props:me,setup(e,a){var c,p;const t=n.getCurrentInstance(),s=String(t==null?void 0:t.vnode.key),l=n.inject("menuStore"),i=n.inject("mode"),d=n.inject("multiple"),u=n.inject("defaultIndent"),f=n.inject("isCollapsed"),g=n.inject("defaultSelectKey"),{disabled:M}=n.toRefs(e),$=n.ref(te(g,s,d,M)),y=n.ref(!0),N=n.inject("rootMenuEmit"),z=n.inject("useRouter"),w=t==null?void 0:t.appContext.config.globalProperties.$router,L=n.computed(()=>({[`${T.b()}-item`]:!0,[`${T.b()}-item-isCollapsed`]:f.value,[x]:$.value,[ge]:M.value}));l.on("menuItem:clear:select",()=>{$.value=!1});const A=r=>{var v;r.stopPropagation();const o=r.currentTarget;let h;if(!e.disabled){if(!d)l.emit("menuItem:clear:select"),Z(o,r,i.value==="horizontal"),i.value==="horizontal"&&ne(r),$.value=!0,h=he(e,w,z,s);else if(o.classList.contains(x)){N("deselect",{type:"deselect",key:s,el:o,e:r}),$.value=!1;return}else $.value=!0,o.classList.add(x);h===void 0?N("select",{type:"select",key:s,el:o,e:r}):N("select",{type:"select",key:s,el:o,e:r,route:h})}if(i.value==="vertical"){const D=r.currentTarget;pe(D)}if(i.value==="horizontal"){const D=(v=o.parentElement)==null?void 0:v.parentElement;D==null||D.classList.add(`${T.b()}-active-parent`)}},P=n.createVNode("span",{class:`${T.b()}-icon`},[(p=(c=a.slots).icon)==null?void 0:p.call(c)]),b=n.ref(null);return n.watch(M,()=>{L.value[x]=!1}),n.watch(()=>g,r=>{$.value=te(r,s,d,M),L.value[x]=$.value}),n.onMounted(()=>{var h,v;let r="";const o=b.value;i.value==="vertical"&&(((v=(h=o.parentElement)==null?void 0:h.parentElement)==null?void 0:v.classList.contains(T.b()))?(y.value=!0,y.value&&(o.style.paddingRight="",o.style.paddingLeft=`${u}px`),n.watch(f,D=>{D?(o.style.padding!=="0"&&(r=o.style.padding),setTimeout(()=>{o.style.padding="0",o.style.width="",o.style.textAlign="center"},300),o.style.display="block"):(o.style.padding=`${r}`,o.style.textAlign="",o.style.display="flex")})):y.value=!1)}),()=>i.value==="vertical"?n.createVNode("div",{class:`${T.b()}-item-vertical-wrapper`},[n.createVNode("li",{class:L.value,onClick:A,ref:b},[a.slots.icon!==void 0&&P,e.href===""?n.createVNode(n.Transition,{name:"fade"},{default:()=>{var r,o;return[n.withDirectives(n.createVNode("span",null,[(o=(r=a.slots).default)==null?void 0:o.call(r)]),[[n.vShow,!f.value]])]}}):n.createVNode("a",{href:e.href},[n.createVNode(n.Transition,{name:"fade"},{default:()=>{var r,o;return[(o=(r=a.slots).default)==null?void 0:o.call(r)]}})])])]):n.createVNode("li",{class:L.value,onClick:A,ref:b},[a.slots.icon!==void 0&&P,e.href===""?n.createVNode(n.Transition,{name:"fade"},{default:()=>{var r,o;return[n.withDirectives(n.createVNode("span",null,[(o=(r=a.slots).default)==null?void 0:o.call(r)]),[[n.vShow,!f.value]])]}}):n.createVNode("a",{href:e.href},[n.createVNode(n.Transition,{name:"fade"},{default:()=>{var r,o;return[(o=(r=a.slots).default)==null?void 0:o.call(r)]}})])])}});const R=E("menu"),ye=E("submenu"),I=`${R.b()}-item-horizontal-wrapper-hidden`,H=`${R.b()}-item-horizontal-wrapper-show`;function j(e,a,t){const s=a.currentTarget,l=s.parentElement,i=t.children;if(t.style.padding="0 20px !important",e==="mouseenter"){if((l==null?void 0:l.tagName)==="DIV"){t.classList.add(`${R.b()}-item-horizontal-wrapper-level`);const{width:d}=s.getClientRects()[0];t.style.top="0px",t.style.left=`${d}px`}else t.style.top="26px",t.style.left="0px";t.classList.remove(I),t.classList.add(H);for(let d=0;d<i.length;d++){const u=i[d];if(u.tagName==="UL"&&u.classList.contains(ye.b())){const f=u.getElementsByClassName(`${R.b()}-item-horizontal-wrapper`)[0];u.addEventListener("mouseenter",g=>{g.stopPropagation(),j("mouseenter",g,f),f.classList.remove(I),f.classList.add(H)}),u.addEventListener("mouseleave",g=>{g.stopPropagation(),j("mouseleave",g,f),f.classList.remove(H),f.classList.add(I)})}}}e==="mouseleave"&&(t.classList.remove(H),t.classList.add(I))}const be={title:{type:String,default:""},disabled:{type:Boolean,default:!1}},se="0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out",k={"before-enter"(e){e.style.transition=se,e.setAttribute("data-oldPadding",e.style.padding),e.setAttribute("data-oldMargin",e.style.margin),e.style.height="0",e.style.padding="0",e.style.margin="0"},enter(e){e.dataset.oldOverflow=e.style.overflow,e.scrollHeight!==0?e.style.height=e.scrollHeight+"px":e.style.height="",e.style.padding=e.getAttribute("data-oldPadding"),e.style.margin=e.getAttribute("data-oldMargin"),e.style.overflow="hidden"},"after-enter"(e){e.style.transition="",e.style.transition="",e.style.height="",e.style.overflow=e.getAttribute("data-overflow")},"before-leave"(e){e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.dataset.oldOverflow=e.style.overflow,e.style.height=e.scrollHeight+"px",e.style.overflow="hidden"},leave(e){e.scrollHeight!==0&&(e.style.transition=se,e.style.height="0",e.style.paddingTop="0",e.style.paddingBottom="0")},"after-leave"(e){e.style.transition="",e.style.height="",e.style.overflow=e.dataset.oldOverflow,e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom}};var ve=n.defineComponent({name:"DMenuTransition",setup(e,a){return()=>n.createVNode(n.Transition,{onBeforeEnter:t=>k["before-enter"](t),onBeforeLeave:t=>k["before-leave"](t),onEnter:t=>k.enter(t),onAfterEnter:t=>k["after-enter"](t),onLeave:t=>k.leave(t),onAfterLeave:t=>k["after-leave"](t)},{default:()=>{var t,s;return[(s=(t=a.slots).default)==null?void 0:s.call(t)]}})}});const F=E("menu"),V=E("submenu").b();var O=n.defineComponent({name:"DSubMenu",props:be,setup(e,a){const t=n.ref(!0),{vnode:{key:s}}=n.getCurrentInstance(),l=String(s),i=n.ref(!1),d=n.inject("openKeys"),u=n.inject("defaultIndent"),f=n.inject("isCollapsed"),g=n.inject("mode"),M=n.ref(null),$=n.inject("rootMenuEmit"),y=g.value==="horizontal";l==="null"?console.warn("[devui][menu]: Key can not be null"):d.value.includes(l)?i.value=!0:i.value=!1;const N=c=>{c.preventDefault(),c.stopPropagation();const p=c.currentTarget;if(!(p.classList.contains(V)&&y)&&(y&&(Z(p,c,!0),ne(c)),!e.disabled&&g.value!=="horizontal")){const r=c.target;let o=c.target;if(r.tagName==="UL")r.classList.contains(`${V}-open`)?i.value=!i.value:i.value=i.value;else{for(;o&&o.tagName!=="UL"&&o.tagName!=="LI";)o=o.parentElement;o.tagName==="UL"&&(i.value=!i.value)}$("submenu-change",{type:"submenu-change",state:i.value,key:l,el:o})}},z=n.ref(null);let w;const L=n.ref(null),A=n.ref(null);let P="";const b=n.ref("");return n.watchEffect(()=>{w=z.value,ie({el:L.value})},{flush:"post"}),n.watch(()=>d,c=>{c.value.includes(l)?i.value=!0:i.value=!1},{deep:!0}),n.onMounted(()=>{var r;const c=A.value,p=L.value;re(),b.value=`layer_${(r=Array.from(p.classList).at(-1))==null?void 0:r.replace("layer_","")}`,y&&(L.value.addEventListener("mouseenter",o=>{o.stopPropagation(),j("mouseenter",o,w)}),L.value.addEventListener("mouseleave",o=>{o.stopPropagation(),j("mouseleave",o,w)})),n.watch(f,o=>{const h=Number(fe(p));Number.isNaN(h)||h>2&&(t.value=!f.value),o?(c.style.padding!=="0"&&(P=c.style.padding),setTimeout(()=>{c.style.padding="0",c.style.width="",c.style.textAlign="center"},300),c.style.display="block"):(c.style.padding=`${P}`,c.style.textAlign="",c.style.display="flex")})}),()=>{var c,p,r,o;return n.withDirectives(n.createVNode("ul",{onClick:N,class:[V,b.value],ref:L},[n.createVNode("div",{class:[`${V}-title`,e.disabled&&`${V}-disabled`],style:`padding: 0 ${u}px`,ref:A},[n.createVNode("span",{class:`${F.b()}-icon`},[(p=(c=a.slots)==null?void 0:c.icon)==null?void 0:p.call(c)]),n.withDirectives(n.createVNode("span",{class:`${V}-title-content`},[e.title]),[[n.vShow,!f.value]]),n.withDirectives(n.createVNode("i",{class:{"icon icon-chevron-up":b.value!==`layer_${V}`,"icon icon-chevron-right":b.value===`layer_${V}`,"is-opened":i.value}},null),[[n.vShow,!f.value&&s!=="overflowContainer"]])]),y?n.createVNode("div",{class:`${F.b()}-item-horizontal-wrapper ${F.b()}-item-horizontal-wrapper-hidden`,ref:z},[(o=(r=a.slots).default)==null?void 0:o.call(r)]):n.createVNode(ve,null,{default:()=>{var h,v;return[n.withDirectives(n.createVNode("div",{class:[`${V}-menu-item-vertical-wrapper`],ref:M},[(v=(h=a.slots).default)==null?void 0:v.call(h)]),[[n.vShow,i.value]])]}})]),[[n.vShow,t.value]])}}});const Le={width:{type:String,default:""},collapsed:{type:Boolean,default:!1},collapsedIndent:{type:Number,default:24},indentSize:{type:Number,default:24},multiple:{type:Boolean,default:!1},openKeys:{type:Array,default:[]},defaultSelectKeys:{type:Array,default:[]},mode:{type:String,default:"vertical"},router:{type:Boolean,default:!1}};var ze="";function we(e=8){const a="abcdefghijklmnopqrstuvwxyz0123456789";let t="";for(let s=0;s<e;s++)t+=a[parseInt((Math.random()*a.length).toString())];return t}const C={};class $e{constructor(a){ae(this,"rootMenuName");this.rootMenuName=a}on(a,t){var s;((s=C==null?void 0:C[this.rootMenuName])==null?void 0:s[a])||Reflect.set(C[this.rootMenuName],a,[]),C[this.rootMenuName][a].push(t)}emit(a,...t){C[this.rootMenuName][a].forEach(s=>s(...t))}off(a,t){const s=C[this.rootMenuName][a].indexOf(t);s>=0&&C[this.rootMenuName][a].splice(s,1)}}function Ne(e){return C[e]||Reflect.set(C,e,{}),new $e(e)}var G=n.defineComponent({name:"DMenu",props:Le,emits:["select","deselect","submenu-change"],setup(e,a){const t=E("menu"),{openKeys:s,mode:l,collapsed:i}=n.toRefs(e),d=we(16),u=Ne(d);n.provide("menuStore",u),n.provide("isCollapsed",i),n.provide("defaultIndent",e.indentSize),n.provide("multiple",e.multiple),n.provide("openKeys",s),n.provide("defaultSelectKey",e.defaultSelectKeys),n.provide("mode",l),n.provide("collapsedIndent",e.collapsedIndent),n.provide("rootMenuEmit",a.emit),n.provide("useRouter",e.router),oe(e.indentSize);const f=n.ref(null),g=n.ref(null),M=n.ref(0),$=n.computed(()=>({[`${t.b()}`]:!0,[`${t.b()}-vertical`]:l.value==="vertical",[`${t.b()}-horizontal`]:l.value==="horizontal",[`${t.b()}-collapsed`]:i.value}));return n.onMounted(()=>{var y;if(e.mode==="horizontal"){let N=!1;const z=(y=g.value)==null?void 0:y.$el,w=f.value,L=w.children,A=z.children[1],P=new IntersectionObserver(b=>{b.forEach(c=>{if(c.isIntersecting){if(!c.target.classList.contains(`${t.b()}-overflow-container`)&&c.target.style.visibility==="hidden"){P.unobserve(c.target);const p=A.lastChild;p&&w.insertBefore(p,z);const r=z.previousElementSibling;if(r&&P.observe(r),r==null?void 0:r.classList.contains("devui-submenu")){const o=r,h=r.children[1];o.addEventListener("mouseenter",v=>{v.stopPropagation(),j("mouseenter",v,h)}),o.addEventListener("mouseleave",v=>{v.stopPropagation(),j("mouseleave",v,h)})}c.target.style.visibility="",c.target.remove(),M.value-=1}}else{const p=c.target.cloneNode(!0);c.target.classList.contains(`${t.b()}-overflow-container`)?N&&c.target.previousElementSibling&&A.children.length?w.appendChild(c.target.previousElementSibling):N=!0:(M.value+=1,c.target.style.visibility="hidden",z.nextSibling?w.insertBefore(c.target,z.nextSibling):w.appendChild(c.target),A.appendChild(p))}})},{root:w,threshold:1,rootMargin:"8px"});for(let b=0;b<L.length;b++)P.observe(L[b])}}),()=>{var y,N;return n.createVNode("ul",{ref:f,class:$.value,style:[e.collapsed?`width:${e.collapsedIndent*2}px`:`width: ${e.width}`,"white-space: nowrap"]},[(N=(y=a.slots).default)==null?void 0:N.call(y),n.withDirectives(n.createVNode(O,{ref:g,key:"overflowContainer",title:"...",class:`${t.b()}-overflow-container`},null),[[n.vShow,M.value>0&&l.value==="horizontal"]])])}}}),Se={title:"Menu \u83DC\u5355",category:"\u5BFC\u822A",status:"100%",install(e){e.component(G.name,G),e.component(q.name,q),e.component(O.name,O)}};m.Menu=G,m.MenuItem=q,m.SubMenu=O,m.default=Se,Object.defineProperty(m,"__esModule",{value:!0}),m[Symbol.toStringTag]="Module"});
+var Ae=Object.defineProperty;var ze=(h,n,$)=>n in h?Ae(h,n,{enumerable:!0,configurable:!0,writable:!0,value:$}):h[n]=$;var re=(h,n,$)=>(ze(h,typeof n!="symbol"?n+"":n,$),$);(function(h,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(h=typeof globalThis!="undefined"?globalThis:h||self,n(h.index={},h.Vue))})(this,function(h,n){"use strict";function $(e,l,t){let s=e;return l&&(s+=`__${l}`),t&&(s+=`--${t}`),s}function S(e,l=!1){const t=l?`.devui-${e}`:`devui-${e}`;return{b:()=>$(t),e:u=>u?$(t,u):"",m:u=>u?$(t,"",u):"",em:(u,f)=>u&&f?$(t,u,f):""}}const Q=[];let U=[];const W=n.ref(24),D=S("menu"),ce=S("submenu"),R=D.b(),X=`${D.b()}-item-horizontal-wrapper`,Y=`${D.b()}-item-select`,Z=`${D.b()}-active-parent`;function de(e){W.value=e}function ue(e){Q.push(e)}function fe(){U=[],Q.forEach(t=>{U.push(t.el.parentElement)});const e=[...U],l=t=>{var s;return(s=/layer_(\d*)/gim.exec(t))==null?void 0:s[1]};for(;e.length;){const t=e.shift();if(t==null?void 0:t.classList.contains(R)){const s=t.children;e.unshift(...Array.from(s));continue}else{if(t.tagName==="DIV")if(t.classList.contains(`${D.b()}-item-vertical-wrapper`)||t.classList.contains(`${ce.b()}-menu-item-vertical-wrapper`)){const s=t.parentElement;if(e.unshift(...Array.from(t.children)),s==null?void 0:s.classList.contains(R))t.classList.add("layer_1");else{let a=l((s==null?void 0:s.classList.value)||"");a=Number(a),t.classList.add(`layer_${a}`)}}else{const s=t.parentElement;let a=l((s==null?void 0:s.classList.value)||"");a=Number(a),t.classList.add(`layer_${a}`),t.style.paddingLeft=`${(a===2?1:a-1)*W.value}px`}if(t.tagName==="UL"){const s=t.parentElement,a=t.children;for(let u=0;u<a.length;u++)e.unshift(a[u]);const c=(s==null?void 0:s.classList.value)||"";let i=l(c);(s==null?void 0:s.classList.contains(R))?(i=1,t.classList.add(`layer_${2}`)):(t.classList.add(`layer_${Number(i)+1}`),i=Number(i)+1)}if(t.tagName==="LI"){const s=t.parentElement,a=(s==null?void 0:s.classList.value)||"";let c=l(a);l(a),c=Number(c),t.style.padding=`0 ${c*W.value}px`}}}}function me(e){var s;const l=e;let t=null;for(let a=0;a<l.length;a++){const c=l[a];((s=c==null?void 0:c.classList)==null?void 0:s.contains(`${D.b()}-horizontal`))&&(t=c)}return t}function pe(e,l){let t=l.target,s=[];const{path:a}=l,c=me(a);for(s=[...Array.from(c.children)],t.tagName==="SPAN"&&(t=t.parentElement);s.length;){const i=s.shift();if((i==null?void 0:i.tagName)==="UL"||(i==null?void 0:i.classList.contains(X))){const u=i==null?void 0:i.children;s.unshift(...Array.from(u))}i!==t&&(i==null||i.classList.remove(Y),i==null||i.classList.remove(Z))}}function he(e,l){const t=[],s=l.path||l.composedPath&&l.composedPath();for(let a=0;a<s.length;a++){const c=s[a];if(!c.classList.contains(R))t.push(...Array.from(c.children));else{t.push(...Array.from(c.children));break}}for(;t.length;){const a=t.shift();((a==null?void 0:a.tagName)==="UL"||(a==null?void 0:a.classList.contains(X)))&&t.push(...Array.from(a==null?void 0:a.children)),a!==e&&((a==null?void 0:a.tagName)==="DIV"&&t.unshift(...Array.from(a==null?void 0:a.children)),a==null||a.classList.remove(Y),a==null||a.classList.remove(Z))}}function ee(e,l,t=!1){t?pe(e,l):he(e,l)}function ge(e){var s;const l=/layer_(\d{1,})/gim,t=e.className;return(s=l.exec(t))==null?void 0:s[1]}const ye={disabled:{type:Boolean,default:!1},href:{type:String,default:""},route:{type:[String,Object]}},te=S("menu");function ne(e,l,t,s){const a=n.ref(!1);return t?e.includes(l)?a.value=!0:a.value=!1:e[0]===l&&!s.value?a.value=!0:a.value=!1,a.value}function be(e){var t,s;let l=e.parentElement;for(;!l.classList.contains(te.b());)((t=l.firstElementChild)==null?void 0:t.tagName)==="DIV"&&((s=l==null?void 0:l.firstElementChild)==null||s.classList.add(`${te.b()}-active-parent`)),l=l.parentElement;return l}function ve(e,l,t,s){if(t&&l){const a=e.route||s,c=l.push(a).then(i=>i);return{route:a,routerResult:c}}}const q=S("menu");function se(e){const l=e.path;for(let t=0;t<l.length;t++){const s=l[t];if(s.classList.contains(`${q.b()}-horizontal`))break;if(s.classList.contains(`${q.b()}-item-horizontal-wrapper`))continue;s.tagName!=="SPAN"&&s.classList.add(`${q.b()}-item-select`)}}const P=S("menu"),_=`${P.b()}-item-select`,Le=`${P.b()}-item-disabled`;var F=n.defineComponent({name:"DMenuItem",props:ye,setup(e,l){var d,g;const t=n.getCurrentInstance(),s=String(t==null?void 0:t.vnode.key),a=n.inject("menuStore"),c=n.inject("mode"),i=n.inject("multiple"),u=n.inject("defaultIndent"),f=n.inject("isCollapsed"),y=n.inject("defaultSelectKey"),{disabled:A}=n.toRefs(e),b=n.ref(ne(y,s,i,A)),E=n.ref(!0),z=n.inject("rootMenuEmit"),x=n.inject("useRouter"),v=t==null?void 0:t.appContext.config.globalProperties.$router,p=n.computed(()=>({[`${P.b()}-item`]:!0,[`${P.b()}-item-isCollapsed`]:f.value,[_]:b.value,[Le]:A.value}));a.on("menuItem:clear:select",()=>{b.value=!1});const L=r=>{var V;r.stopPropagation();const o=r.currentTarget;let m;if(e.disabled&&r.preventDefault(),!e.disabled){if(!i)a.emit("menuItem:clear:select"),ee(o,r,c.value==="horizontal"),c.value==="horizontal"&&se(r),b.value=!0,m=ve(e,v,x,s);else if(o.classList.contains(_)){z("deselect",{type:"deselect",key:s,el:o,e:r}),b.value=!1;return}else b.value=!0,o.classList.add(_);m===void 0?z("select",{type:"select",key:s,el:o,e:r}):z("select",{type:"select",key:s,el:o,e:r,route:m})}if(c.value==="vertical"){const M=r.currentTarget;be(M)}if(c.value==="horizontal"){const M=(V=o.parentElement)==null?void 0:V.parentElement;M==null||M.classList.add(`${P.b()}-active-parent`)}},w=n.createVNode("span",{class:`${P.b()}-icon`},[(g=(d=l.slots).icon)==null?void 0:g.call(d)]),N=n.ref(null);return n.watch(A,()=>{i||(p.value[_]=!1)}),n.watch(()=>y,r=>{b.value=ne(r,s,i,A),p.value[_]=b.value}),n.onMounted(()=>{var m,V;let r="";const o=N.value;c.value==="vertical"&&(((V=(m=o.parentElement)==null?void 0:m.parentElement)==null?void 0:V.classList.contains(P.b()))?(E.value=!0,E.value&&(o.style.paddingRight="",o.style.paddingLeft=`${u}px`),n.watch(f,M=>{M?(o.style.padding!=="0"&&(r=o.style.padding),setTimeout(()=>{o.style.padding="0",o.style.width="",o.style.textAlign="center"},300),o.style.display="block"):(o.style.padding=`${r}`,o.style.textAlign="",o.style.display="flex")})):E.value=!1)}),()=>c.value==="vertical"?n.createVNode("div",{class:`${P.b()}-item-vertical-wrapper`},[n.createVNode("li",{class:p.value,onClick:L,ref:N},[l.slots.icon!==void 0&&w,e.href===""?n.createVNode(n.Transition,{name:"fade"},{default:()=>{var r,o;return[n.withDirectives(n.createVNode("span",null,[(o=(r=l.slots).default)==null?void 0:o.call(r)]),[[n.vShow,!f.value]])]}}):n.createVNode("a",{href:e.href},[n.createVNode(n.Transition,{name:"fade"},{default:()=>{var r,o;return[(o=(r=l.slots).default)==null?void 0:o.call(r)]}})])])]):n.createVNode("li",{class:p.value,onClick:L,ref:N},[l.slots.icon!==void 0&&w,e.href===""?n.createVNode(n.Transition,{name:"fade"},{default:()=>{var r,o;return[n.withDirectives(n.createVNode("span",null,[(o=(r=l.slots).default)==null?void 0:o.call(r)]),[[n.vShow,!f.value]])]}}):n.createVNode("a",{href:e.href},[n.createVNode(n.Transition,{name:"fade"},{default:()=>{var r,o;return[(o=(r=l.slots).default)==null?void 0:o.call(r)]}})])])}});function ae(e=8){const l="abcdefghijklmnopqrstuvwxyz0123456789";let t="";for(let s=0;s<e;s++)t+=l[parseInt((Math.random()*l.length).toString())];return t}function le(e){for(;e&&e.tagName!=="LI"&&e.tagName!=="UL";)e=e.parentElement;return e}const oe="0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out",j={"before-enter"(e){e.style.transition=oe,e.setAttribute("data-oldPadding",e.style.padding),e.setAttribute("data-oldMargin",e.style.margin),e.style.height="0",e.style.padding="0",e.style.margin="0"},enter(e){e.dataset.oldOverflow=e.style.overflow,e.scrollHeight!==0?e.style.height=e.scrollHeight+"px":e.style.height="",e.style.padding=e.getAttribute("data-oldPadding"),e.style.margin=e.getAttribute("data-oldMargin"),e.style.overflow="hidden"},"after-enter"(e){e.style.transition="",e.style.transition="",e.style.height="",e.style.overflow=e.getAttribute("data-overflow")},"before-leave"(e){e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.dataset.oldOverflow=e.style.overflow,e.style.height=e.scrollHeight+"px",e.style.overflow="hidden"},leave(e){e.scrollHeight!==0&&(e.style.transition=oe,e.style.height="0",e.style.paddingTop="0",e.style.paddingBottom="0")},"after-leave"(e){e.style.transition="",e.style.height="",e.style.overflow=e.dataset.oldOverflow,e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom}};var we=n.defineComponent({name:"DMenuTransition",setup(e,l){return()=>n.createVNode(n.Transition,{onBeforeEnter:t=>j["before-enter"](t),onBeforeLeave:t=>j["before-leave"](t),onEnter:t=>j.enter(t),onAfterEnter:t=>j["after-enter"](t),onLeave:t=>j.leave(t),onAfterLeave:t=>j["after-leave"](t)},{default:()=>{var t,s;return[(s=(t=l.slots).default)==null?void 0:s.call(t)]}})}});const Ne={title:{type:String,default:""},disabled:{type:Boolean,default:!1}},O=S("menu"),$e=S("submenu"),I=`${O.b()}-item-horizontal-wrapper-hidden`,H=`${O.b()}-item-horizontal-wrapper-show`;function k(e,l,t){const s=l.currentTarget,a=s.parentElement,c=t.children;if(t.style.padding="0 20px !important",e==="mouseenter"){if((a==null?void 0:a.tagName)==="DIV"){t.classList.add(`${O.b()}-item-horizontal-wrapper-level`);const{width:i}=s.getClientRects()[0];t.style.top="0px",t.style.left=`${i}px`}else t.style.top="26px",t.style.left="0px";t.classList.remove(I),t.classList.add(H);for(let i=0;i<c.length;i++){const u=c[i];if(u.tagName==="UL"&&u.classList.contains($e.b())){const f=u.getElementsByClassName(`${O.b()}-item-horizontal-wrapper`)[0];u.addEventListener("mouseenter",y=>{y.stopPropagation(),k("mouseenter",y,f),f.classList.remove(I),f.classList.add(H)}),u.addEventListener("mouseleave",y=>{y.stopPropagation(),k("mouseleave",y,f),f.classList.remove(H),f.classList.add(I)})}}}e==="mouseleave"&&(t.classList.remove(H),t.classList.add(I))}const G=S("menu"),T=S("submenu").b();var K=n.defineComponent({name:"DSubMenu",props:Ne,setup(e,l){const t=n.ref(!0),{vnode:{key:s}}=n.getCurrentInstance();let a=String(s);const c=n.inject("openKeys"),i=n.ref(c.value.includes(a)),u=n.inject("defaultIndent"),f=n.inject("isCollapsed"),y=n.inject("mode"),A=n.ref(null),b=n.inject("rootMenuEmit"),E=y.value==="horizontal";a==="null"&&(console.warn("[devui][menu]: Key can not be null"),a=`randomKey-${ae(16)}`);const z=d=>{d.stopPropagation();const g=le(d.target);if(!(g.classList.contains(T)&&E)&&(E&&(ee(g,d,!0),se(d)),!e.disabled&&y.value!=="horizontal")){const r=le(d.target),o=c.value.indexOf(a);o>=0&&r.tagName==="UL"?c.value.splice(o,1):r.tagName==="UL"&&c.value.push(a),i.value=c.value.indexOf(a)>=0,b("submenu-change",{type:"submenu-change",state:i.value,key:a,el:g})}},x=n.ref(null);let v;const p=n.ref(null),L=n.ref(null);let w="";const N=n.ref("");return n.watchEffect(()=>{v=x.value,ue({el:p.value})},{flush:"post"}),n.watch(()=>c,d=>{d.value.includes(a)?i.value=!0:i.value=!1},{deep:!0}),n.onMounted(()=>{var r;const d=L.value,g=p.value;fe(),N.value=`layer_${(r=Array.from(g.classList).at(-1))==null?void 0:r.replace("layer_","")}`,E&&!e.disabled&&(p.value.addEventListener("mouseenter",o=>{o.stopPropagation(),k("mouseenter",o,v)}),p.value.addEventListener("mouseleave",o=>{o.stopPropagation(),k("mouseleave",o,v)})),n.watch(f,o=>{const m=Number(ge(g));Number.isNaN(m)||m>2&&(t.value=!f.value),o?(d.style.padding!=="0"&&(w=d.style.padding),setTimeout(()=>{d.style.padding="0",d.style.width="",d.style.textAlign="center"},300),d.style.display="block"):(d.style.padding=`${w}`,d.style.textAlign="",d.style.display="flex")})}),()=>{var d,g,r,o;return n.withDirectives(n.createVNode("ul",{onClick:z,class:[T,N.value,e.disabled&&`${T}-disabled`],ref:p},[n.createVNode("div",{class:[`${T}-title`],style:`padding: 0 ${u}px`,ref:L},[n.createVNode("span",{class:`${G.b()}-icon`},[(g=(d=l.slots)==null?void 0:d.icon)==null?void 0:g.call(d)]),n.withDirectives(n.createVNode("span",{class:`${T}-title-content`},[e.title]),[[n.vShow,!f.value]]),n.withDirectives(n.createVNode("i",{class:{"icon icon-chevron-up":N.value!==`layer_${T}`,"icon icon-chevron-right":N.value===`layer_${T}`,"is-opened":i.value}},null),[[n.vShow,!f.value&&s!=="overflowContainer"]])]),E?n.withDirectives(n.createVNode("div",{class:`${G.b()}-item-horizontal-wrapper ${G.b()}-item-horizontal-wrapper-hidden`,ref:x},[(o=(r=l.slots).default)==null?void 0:o.call(r)]),[[n.vShow,!e.disabled]]):n.createVNode(we,null,{default:()=>{var m,V;return[n.withDirectives(n.createVNode("div",{class:[`${T}-menu-item-vertical-wrapper`],ref:A},[(V=(m=l.slots).default)==null?void 0:V.call(m)]),[[n.vShow,i.value]])]}})]),[[n.vShow,t.value]])}}});const Se={width:{type:String,default:""},collapsed:{type:Boolean,default:!1},collapsedIndent:{type:Number,default:24},indentSize:{type:Number,default:24},multiple:{type:Boolean,default:!1},openKeys:{type:Array,default:[]},defaultSelectKeys:{type:Array,default:[]},mode:{type:String,default:"vertical"},router:{type:Boolean,default:!1}};var Pe="";const C={};class Ce{constructor(l){re(this,"rootMenuName");this.rootMenuName=l}on(l,t){var s;((s=C==null?void 0:C[this.rootMenuName])==null?void 0:s[l])||Reflect.set(C[this.rootMenuName],l,[]),C[this.rootMenuName][l].push(t)}emit(l,...t){C[this.rootMenuName][l].forEach(s=>s(...t))}off(l,t){const s=C[this.rootMenuName][l].indexOf(t);s>=0&&C[this.rootMenuName][l].splice(s,1)}}function Ee(e){return C[e]||Reflect.set(C,e,{}),new Ce(e)}var J=n.defineComponent({name:"DMenu",props:Se,emits:["select","deselect","submenu-change"],setup(e,l){const t=S("menu"),{openKeys:s,mode:a,collapsed:c}=n.toRefs(e),i=ae(16),u=Ee(i);n.provide("menuStore",u),n.provide("isCollapsed",c),n.provide("defaultIndent",e.indentSize),n.provide("multiple",e.multiple),n.provide("openKeys",s),n.provide("defaultSelectKey",e.defaultSelectKeys),n.provide("mode",a),n.provide("collapsedIndent",e.collapsedIndent),n.provide("rootMenuEmit",l.emit),n.provide("useRouter",e.router),de(e.indentSize);const f=n.ref(null),y=n.ref(0),A=n.ref(null),b=`${t.b()}-item-select`,E=n.computed(()=>({[`${t.b()}`]:!0,[`${t.b()}-vertical`]:a.value==="vertical",[`${t.b()}-horizontal`]:a.value==="horizontal",[`${t.b()}-collapsed`]:c.value})),z=n.reactive({[b]:!1,[`${t.b()}-overflow-container`]:!0}),x=v=>{const p=Array.from(v.children);for(const L of p)if(L.classList.contains(b)){z[b]=!0;break}else z[b]=!1};return n.onMounted(()=>{var v;if(e.mode==="horizontal"){let p=!1;const L=(v=A.value)==null?void 0:v.$el,w=f.value,N=w.children,d=L.children[1],g=new IntersectionObserver(r=>{r.forEach(o=>{if(o.isIntersecting){if(!o.target.classList.contains(`${t.b()}-overflow-container`)&&o.target.style.visibility==="hidden"){g.unobserve(o.target),w.insertBefore(o.target,L),o.target.style.visibility="";const m=L.previousElementSibling;if(m&&o.boundingClientRect.width%o.target.getBoundingClientRect().width===0&&g.observe(m),m==null?void 0:m.classList.contains("devui-submenu")){const M=m,ie=m.children[1];M.addEventListener("mouseenter",B=>{B.stopPropagation(),k("mouseenter",B,ie)}),M.addEventListener("mouseleave",B=>{B.stopPropagation(),k("mouseleave",B,ie)})}y.value-=1,g.observe(o.target),d.lastChild&&d.removeChild(d.lastChild),x(d)}}else{const m=o.target.cloneNode(!0);o.target.classList.contains(`${t.b()}-overflow-container`)?p&&o.target.previousElementSibling&&d.children.length?w.appendChild(o.target.previousElementSibling):p=!0:(y.value+=1,o.target.style.visibility="hidden",L.nextSibling?w.insertBefore(o.target,L.nextSibling):w.appendChild(o.target),d.appendChild(m),x(d))}})},{root:w,threshold:1,rootMargin:"8px"});for(let r=0;r<N.length;r++)g.observe(N[r])}}),()=>{var v,p;return n.createVNode("ul",{ref:f,class:E.value,style:[e.collapsed?`width:${e.collapsedIndent*2}px`:`width: ${e.width}`]},[(p=(v=l.slots).default)==null?void 0:p.call(v),n.withDirectives(n.createVNode(K,{ref:A,key:"overflowContainer",title:"...",class:z},null),[[n.vShow,y.value>0&&a.value==="horizontal"]])])}}}),Me={title:"Menu \u83DC\u5355",category:"\u5BFC\u822A",status:"100%",install(e){e.component(J.name,J),e.component(F.name,F),e.component(K.name,K)}};h.Menu=J,h.MenuItem=F,h.SubMenu=K,h.default=Me,Object.defineProperty(h,"__esModule",{value:!0}),h[Symbol.toStringTag]="Module"});

package/menu/style.css

@@ -1 +1 @@
-.devui-menu-vertical a,.devui-menu-horizontal a{text-decoration:none}.devui-menu-vertical ul,.devui-menu-vertical li,.devui-menu-horizontal ul,.devui-menu-horizontal li{list-style:none;white-space:nowrap}.devui-menu-horizontal{display:flex;box-sizing:border-box;line-height:var(--devui-line-height-base, 1.5);background:var(--devui-global-bg-normal);padding:14px 20px}.devui-menu-horizontal .devui-menu-item{display:flex;position:relative;box-sizing:content-box;padding:0 20px!important;line-height:24px;cursor:pointer}.devui-menu-horizontal .devui-menu-item:after{content:"";display:block;position:absolute;left:20px;right:20px;bottom:0;width:auto;height:2px}.devui-menu-horizontal :after{transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));background:transparent}.devui-menu-horizontal .devui-menu-item-select .devui-submenu-title-content,.devui-menu-horizontal .devui-menu-active-parent .devui-submenu-title-content{color:var(--devui-menu-item-hover)}.devui-menu-horizontal .devui-menu-item-select:after,.devui-menu-horizontal .devui-menu-active-parent:after{display:block;position:absolute;left:20px;right:20px;bottom:0;width:auto;height:2px;content:"";opacity:1;background:var(--devui-brand, #5e7ce0)}.devui-menu-horizontal .devui-menu-item span,.devui-menu-horizontal .devui-menu-item a{color:var(--devui-text, #252b3a)}.devui-menu-horizontal .devui-menu-item:hover span,.devui-menu-horizontal .devui-menu-item:hover a{color:var(--devui-brand, #5e7ce0)}.devui-menu-horizontal .devui-menu-item:hover:after{background:var(--devui-brand, #5e7ce0)}.devui-menu-horizontal .devui-submenu{margin:0;padding:0;position:relative}.devui-menu-horizontal .devui-submenu div.devui-submenu-title{padding:0 20px}.devui-menu-horizontal .devui-submenu div.devui-submenu-title span{margin:0}.devui-menu-horizontal .devui-submenu div.devui-submenu-title .icon-chevron-up,.devui-menu-horizontal .devui-submenu div.devui-submenu-title .icon-chevron-right{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-menu-horizontal .devui-submenu:after{content:"";display:block;position:absolute;left:20px;right:20px;bottom:0;width:auto;height:2px}.devui-menu-horizontal .devui-submenu:hover{cursor:pointer}.devui-menu-horizontal .devui-submenu:hover:after{background:var(--devui-brand, #5e7ce0)}.devui-menu-horizontal .devui-submenu:hover>div>i.icon-chevron-up{transform:rotate(180deg)}.devui-menu-horizontal .devui-submenu:hover>div>i.icon-chevron-right{transform:rotate(180deg)}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper{transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1)),left 0 linear;background:var(--devui-global-bg-normal);z-index:var(--devui-z-index-modal, 1050)}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show{transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));opacity:1;visibility:visible;max-height:100vh;padding:10px 0!important;border-radius:8px;position:absolute}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show .devui-menu-item{margin-top:5px}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show .devui-submenu{margin:5px 0;padding:0 20px!important}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show .devui-submenu div.devui-submenu-title{padding:0!important}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show .devui-menu-item-horizontal-wrapper-level .devui-submenu{padding:0 20px!important}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-hidden{transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));visibility:hidden;position:absolute;padding:0!important;max-height:0;overflow:hidden;opacity:0}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-hidden .devui-menu-item{margin-top:5px}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-hidden .devui-submenu{margin:5px 0;padding:0 20px!important}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-hidden .devui-submenu div.devui-submenu-title{padding:0!important}.devui-submenu-menu-item-vertical-wrapper{overflow:hidden}.devui-menu-vertical{padding:0;transition:width var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1)),padding var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));border-right:var(--devui-line, #d7d8da) 1px solid;background:var(--devui-area, #f8f8f8)!important}.devui-menu-vertical :after{transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));background:transparent}.devui-menu-vertical .layer_1{margin:0!important}.devui-menu-vertical .layer_2>div.devui-submenu-title{margin:0!important;background:var(--devui-block, #ffffff)}.devui-menu-vertical.devui-menu-collapsed .devui-menu-icon{margin:auto}.devui-menu-vertical.devui-menu-collapsed ul li{display:none!important}.devui-menu-vertical.devui-menu-collapsed .devui-submenu div.devui-submenu-title .devui-menu-icon{margin:auto}.devui-menu-vertical .devui-menu-item-vertical-wrapper{padding-left:0!important}.devui-menu-vertical .devui-menu-item{width:100%;height:40px;flex-grow:1;line-height:40px;cursor:pointer;color:var(--devui-menu-item);background:var(--devui-block, #ffffff);display:flex}.devui-menu-vertical .devui-menu-item span:nth-child(2){text-align:left}.devui-menu-vertical div:not(.devui-submenu-menu-item-vertical-wrapper){display:flex;flex:auto}.devui-menu-vertical .devui-menu-item:after{display:block;position:absolute;right:0;top:0;transform:scaleX(0);content:"";opacity:1;background:var(--devui-primary-hover, #5e7ce0)}.devui-menu-vertical .devui-menu-item-select{background:var(--devui-primary-bg, #f2f5fc)!important;position:relative}.devui-menu-vertical .devui-menu-item-select span,.devui-menu-vertical .devui-menu-item-select a{color:var(--devui-menu-item-hover)}.devui-menu-vertical .devui-menu-item-select:after{display:block;position:absolute;right:0;top:0;height:100%;width:4px;content:"";opacity:1;background:var(--devui-brand, #5e7ce0);transform:scaleX(1)}.devui-menu-vertical .devui-submenu>div:hover span.devui-submenu-title-content{color:var(--devui-menu-item-hover)}.devui-menu-vertical .devui-menu-item:hover{color:var(--devui-menu-item-hover)}.devui-menu-vertical li.devui-menu-item,.devui-menu-vertical div.devui-submenu-title{white-space:nowrap;overflow:hidden}.devui-menu-vertical li.devui-menu-item span:nth-child(2),.devui-menu-vertical div.devui-submenu-title span:nth-child(2){overflow:hidden;text-overflow:ellipsis}.devui-menu-vertical li.devui-menu-item span:nth-child(2) span,.devui-menu-vertical div.devui-submenu-title span:nth-child(2) span{overflow:hidden;text-overflow:ellipsis}.devui-menu-vertical .devui-menu-item-isCollapsed{width:fit-content}.devui-menu-vertical .devui-menu-item-isCollapsed .devui-menu-icon{margin:auto}.devui-menu-vertical ul.devui-submenu{margin:0;padding:0}.devui-menu-vertical ul.devui-submenu div.devui-submenu-title{display:flex;cursor:pointer;width:100%;height:40px;margin:4px 0;line-height:40px;padding-left:18px;align-items:center;color:var(--devui-menu-item)}.devui-menu-vertical ul.devui-submenu div.devui-submenu-title:nth-child(1){font-size:var(--devui-font-size-lg, 14px)}.devui-menu-vertical ul.devui-submenu div.devui-submenu-title span.devui-submenu-title-content{font-size:var(--devui-font-size-lg, 14px);flex:auto}.devui-menu-vertical ul.devui-submenu div.devui-submenu-title span.devui-menu-icon{text-align:center}.devui-menu-vertical ul.devui-submenu div.devui-submenu-title .icon-chevron-up{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-menu-vertical ul.devui-submenu div.devui-submenu-title i.icon-chevron-up.is-opened{transform:rotate(180deg)}.devui-menu-vertical ul.devui-submenu .devui-menu-item{display:flex}.devui-menu-vertical ul.devui-submenu .devui-menu-item>span{flex:auto;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));color:var(--devui-menu-item-sub)}.devui-menu-vertical ul.devui-submenu .devui-menu-item:hover>span{color:var(--devui-menu-item-hover)}.devui-menu-vertical ul.devui-submenu .devui-menu-item-select *{color:var(--devui-menu-item-hover)!important}.devui-menu-vertical ul li~ul>div{margin-top:0!important}.devui-menu-vertical ul li{background:var(--devui-area, #f8f8f8)!important}.devui-menu-icon+span{margin-left:10px}.devui-menu-item-disabled,.devui-submenu-disabled,.devui-menu-item-disabled:hover,.devui-submenu-disabled:hover{color:var(--devui-menu-disabled)!important;cursor:not-allowed!important}.devui-submenu-disabled:hover span{color:var(--devui-menu-disabled)!important}.fade-enter-active,.fade-leave-active{transition:opacity var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1))}.fade-leave-to{display:none}.fade-enter-from,.fade-leave-to{opacity:0}
+.devui-menu-vertical a,.devui-menu-vertical a:hover,.devui-menu-vertical a:active,.devui-menu-vertical a:visited,.devui-menu-horizontal a,.devui-menu-horizontal a:hover,.devui-menu-horizontal a:active,.devui-menu-horizontal a:visited{text-decoration:none}.devui-menu-vertical ul,.devui-menu-vertical li,.devui-menu-horizontal ul,.devui-menu-horizontal li{list-style:none;white-space:nowrap}.devui-menu-horizontal{display:flex;box-sizing:border-box;line-height:var(--devui-line-height-base, 1.5);background:var(--devui-global-bg-normal);padding:14px 20px}.devui-menu-horizontal .devui-menu-item{display:flex;position:relative;box-sizing:content-box;padding:0 20px!important;line-height:24px;cursor:pointer}.devui-menu-horizontal .devui-menu-item:after{content:"";display:block;position:absolute;left:20px;right:20px;bottom:0;width:auto;height:2px}.devui-menu-horizontal :after{transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));background:transparent}.devui-menu-horizontal .devui-menu-item-select .devui-submenu-title-content,.devui-menu-horizontal .devui-menu-active-parent .devui-submenu-title-content{color:var(--devui-menu-item-hover)}.devui-menu-horizontal .devui-menu-item-select:after,.devui-menu-horizontal .devui-menu-active-parent:after{display:block;position:absolute;left:20px;right:20px;bottom:0;width:auto;height:2px;content:"";opacity:1;background:var(--devui-brand, #5e7ce0)}.devui-menu-horizontal .devui-menu-item span,.devui-menu-horizontal .devui-menu-item a{color:var(--devui-text, #252b3a)}.devui-menu-horizontal .devui-menu-item:hover span,.devui-menu-horizontal .devui-menu-item:hover a{color:var(--devui-brand, #5e7ce0)}.devui-menu-horizontal .devui-menu-item:hover:after{background:var(--devui-brand, #5e7ce0)}.devui-menu-horizontal .devui-submenu{margin:0;padding:0;position:relative}.devui-menu-horizontal .devui-submenu div.devui-submenu-title{padding:0 20px}.devui-menu-horizontal .devui-submenu div.devui-submenu-title span{margin:0}.devui-menu-horizontal .devui-submenu div.devui-submenu-title .icon-chevron-up,.devui-menu-horizontal .devui-submenu div.devui-submenu-title .icon-chevron-right{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-menu-horizontal .devui-submenu:after{content:"";display:block;position:absolute;left:20px;right:20px;bottom:0;width:auto;height:2px}.devui-menu-horizontal .devui-submenu:hover{cursor:pointer}.devui-menu-horizontal .devui-submenu:hover:after{background:var(--devui-brand, #5e7ce0)}.devui-menu-horizontal .devui-submenu:hover>div>i.icon-chevron-up{transform:rotate(180deg)}.devui-menu-horizontal .devui-submenu:hover>div>i.icon-chevron-right{transform:rotate(180deg)}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper{transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1)),left 0 linear;background:var(--devui-global-bg-normal);z-index:var(--devui-z-index-modal, 1050)}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show{transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));opacity:1;visibility:visible;max-height:100vh;padding:10px 0!important;border-radius:8px;position:absolute}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show .devui-menu-item{margin-top:5px}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show .devui-submenu{margin:5px 0;padding:0 20px!important}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show .devui-submenu div.devui-submenu-title{padding:0!important}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-show .devui-menu-item-horizontal-wrapper-level .devui-submenu{padding:0 20px!important}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-hidden{transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));visibility:hidden;position:absolute;padding:0!important;max-height:0;overflow:hidden;opacity:0}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-hidden .devui-menu-item{margin-top:5px}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-hidden .devui-submenu{margin:5px 0;padding:0 20px!important}.devui-menu-horizontal .devui-submenu div.devui-menu-item-horizontal-wrapper-hidden .devui-submenu div.devui-submenu-title{padding:0!important}.devui-menu-horizontal .devui-menu-item-disabled span,.devui-menu-horizontal .devui-menu-item-disabled a,.devui-menu-horizontal .devui-submenu-disabled span,.devui-menu-horizontal .devui-submenu-disabled a{color:var(--devui-menu-disabled)!important;cursor:not-allowed}.devui-menu-horizontal .devui-menu-item-disabled:after,.devui-menu-horizontal .devui-submenu-disabled:after{content:unset!important}.devui-menu-horizontal .devui-menu-item-disabled+.devui-menu-item-horizontal-wrapper,.devui-menu-horizontal .devui-submenu-disabled+.devui-menu-item-horizontal-wrapper{display:none}.devui-submenu-menu-item-vertical-wrapper{overflow:hidden}.devui-submenu-menu-item{color:var(--devui-menu-item)}.devui-menu-vertical{padding:0;transition:width var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1)),padding var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));border-right:var(--devui-line, #d7d8da) 1px solid;background:var(--devui-area, #f8f8f8)!important}.devui-menu-vertical :after{transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));background:transparent}.devui-menu-vertical .layer_1{margin:0!important}.devui-menu-vertical .layer_2>div.devui-submenu-title{margin:0!important;background:var(--devui-block, #ffffff)}.devui-menu-vertical.devui-menu-collapsed .devui-menu-icon{margin:auto}.devui-menu-vertical.devui-menu-collapsed ul li{display:none!important}.devui-menu-vertical.devui-menu-collapsed .devui-submenu div.devui-submenu-title .devui-menu-icon{margin:auto}.devui-menu-vertical .devui-menu-item-vertical-wrapper{padding-left:0!important}.devui-menu-vertical .devui-menu-item{width:100%;height:40px;flex-grow:1;line-height:40px;cursor:pointer;color:var(--devui-menu-item);background:var(--devui-block, #ffffff);display:flex}.devui-menu-vertical .devui-menu-item span:nth-child(2){text-align:left}.devui-menu-vertical div:not(.devui-submenu-menu-item-vertical-wrapper){display:flex;flex:auto}.devui-menu-vertical .devui-menu-item:after{display:block;position:absolute;right:0;top:0;transform:scaleX(0);content:"";opacity:1;background:var(--devui-primary-hover, #5e7ce0)}.devui-menu-vertical ul.devui-submenu{margin:0;padding:0}.devui-menu-vertical ul.devui-submenu .devui-menu-item{display:flex;background:var(--devui-area, #f8f8f8)}.devui-menu-vertical ul.devui-submenu .devui-menu-item>span{flex:auto;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;transition:all var(--devui-animation-duration-fast, .1s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));color:var(--devui-menu-item)}.devui-menu-vertical ul.devui-submenu div.devui-submenu-title{display:flex;cursor:pointer;width:100%;height:40px;margin:4px 0;line-height:40px;padding-left:18px;align-items:center;color:var(--devui-menu-item)}.devui-menu-vertical ul.devui-submenu div.devui-submenu-title:nth-child(1){font-size:var(--devui-font-size-lg, 14px)}.devui-menu-vertical ul.devui-submenu div.devui-submenu-title span.devui-submenu-title-content{font-size:var(--devui-font-size-lg, 14px);flex:auto;color:var(--devui-menu-item)}.devui-menu-vertical ul.devui-submenu div.devui-submenu-title span.devui-menu-icon{text-align:center}.devui-menu-vertical ul.devui-submenu div.devui-submenu-title .icon-chevron-up{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-menu-vertical ul.devui-submenu div.devui-submenu-title i.icon-chevron-up.is-opened{transform:rotate(180deg)}.devui-menu-vertical ul.devui-submenu .devui-submenu-title:hover span{color:var(--devui-menu-item-hover)!important}.devui-menu-vertical ul.devui-submenu .devui-menu-item:hover span{color:var(--devui-menu-item-hover)}.devui-menu-vertical ul.devui-submenu .devui-menu-item-select *{color:var(--devui-menu-item-hover)!important}.devui-menu-vertical .devui-menu-item-select{background:var(--devui-primary-bg, #f2f5fc)!important;position:relative}.devui-menu-vertical .devui-menu-item-select span,.devui-menu-vertical .devui-menu-item-select a{color:var(--devui-menu-item-hover)}.devui-menu-vertical .devui-menu-item-select:after{display:block;position:absolute;right:0;top:0;height:100%;width:4px;content:"";opacity:1;background:var(--devui-brand, #5e7ce0);transform:scaleX(1)}.devui-menu-vertical .devui-menu-item:hover{color:var(--devui-menu-item-hover)}.devui-menu-vertical li.devui-menu-item,.devui-menu-vertical div.devui-submenu-title{white-space:nowrap;overflow:hidden}.devui-menu-vertical li.devui-menu-item span:nth-child(2),.devui-menu-vertical div.devui-submenu-title span:nth-child(2){overflow:hidden;text-overflow:ellipsis}.devui-menu-vertical li.devui-menu-item span:nth-child(2) span,.devui-menu-vertical div.devui-submenu-title span:nth-child(2) span{overflow:hidden;text-overflow:ellipsis}.devui-menu-vertical .devui-menu-item-isCollapsed{width:fit-content}.devui-menu-vertical .devui-menu-item-isCollapsed .devui-menu-icon{margin:auto}.devui-menu-vertical ul li~ul>div{margin-top:0!important}.devui-menu-vertical .devui-menu-item-disabled *,.devui-menu-vertical .devui-submenu-disabled *{color:var(--devui-menu-disabled)!important;cursor:not-allowed!important;background:var(--devui-block, #ffffff)!important}.devui-menu-vertical .devui-menu-item-disabled:after,.devui-menu-vertical .devui-submenu-disabled:after{content:unset}.devui-menu-icon+span{margin-left:10px}.devui-menu-item-disabled:hover,.devui-submenu-disabled:hover{color:var(--devui-menu-disabled)!important;cursor:not-allowed!important}.devui-submenu-disabled:hover span{color:var(--devui-menu-disabled)!important}.fade-enter-active,.fade-leave-active{transition:opacity var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1))}.fade-leave-to{display:none}.fade-enter-from,.fade-leave-to{opacity:0}.devui-menu-item-disabled,.devui-menu-item-disabled.devui-menu-vertical .devui-menu-item-disabled.devui-menu-item-select .devui-submenu-disabled,.devui-submenu-disabled.devui-menu-vertical,.devui-submenu-disabled.devui-menu-item-select{color:var(--devui-menu-disabled)!important;cursor:not-allowed!important}