vue-devui 1.5.8 → 1.5.9

package/checkbox/style.css

@@ -1 +1 @@
-.devui-fixed-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--devui-shadow, rgba(37, 43, 58, .24));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 2px 12px 0) var(--devui-shadow, rgba(37, 43, 58, .24));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, 12px);color:var(--devui-danger, #f66f6a)}.devui-form__control .devui-form__control-info .devui-form__control-extra{font-size:var(--devui-font-size, 12px);color:var(--devui-aide-text, #71757f);min-height:20px;line-height:1.5;text-align:justify}@keyframes loading-keyframes{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.devui-form__item--horizontal{display:flex;align-items:center;margin-bottom:20px}.devui-form__item--vertical{display:flex;flex-direction:column;margin-bottom:20px}.devui-form__item--error{margin-bottom:0}.devui-form-operation .star{color:red}.devui-checkbox{position:relative;display:flex;display:-ms-flexbox;align-items:center;-ms-flex-align:center;height:100%;margin:0}.devui-checkbox .devui-checkbox__tick-wrap{position:absolute}.devui-checkbox .devui-checkbox__tick-wrap .devui-checkbox__tick{fill:var(--devui-light-text, #ffffff);stroke-dashoffset:50;opacity:0;transform:scale(0);transform-origin:50% 50%;transition:stroke-dashoffset .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.devui-checkbox.active:not(.half-checked) .devui-checkbox__tick{opacity:1;stroke-dashoffset:0;transform:scale(1);transition:stroke-dashoffset .3s cubic-bezier(.755,.05,.855,.06),opacity .2s cubic-bezier(.755,.05,.855,.06)}.devui-checkbox.active:not(.disabled) .devui-checkbox__material:not(.custom-color),.devui-checkbox.half-checked:not(.disabled) .devui-checkbox__material:not(.custom-color){border-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.active .devui-checkbox--bordered,.devui-checkbox.half-checked .devui-checkbox--bordered{border-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.active:not(.disabled) .devui-checkbox__material{background-size:100% 100%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material:not(.custom-color){background-size:0% 0%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material:not(.custom-color):hover{border-color:var(--devui-icon-fill-active, #252b3a)}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material.custom-color{background-size:0% 0%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.half-checked .devui-checkbox__material:not(.custom-color){background-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.half-checked .devui-checkbox__material:not(.custom-color)>.devui-checkbox__halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform .2s cubic-bezier(.755,.05,.855,.06);background-color:var(--devui-light-text, #ffffff)}.devui-checkbox.half-checked .devui-checkbox__material.custom-color>.devui-checkbox__halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform .2s cubic-bezier(.755,.05,.855,.06);background-color:var(--devui-light-text, #ffffff)}.devui-checkbox .devui-checkbox__material{text-align:initial;height:14px;width:14px;position:relative;user-select:none;border:1px solid var(--devui-line, #d7d8da);border-radius:var(--devui-border-radius, 2px);background:linear-gradient(var(--devui-brand, #5e7ce0),var(--devui-brand, #5e7ce0)) no-repeat 50%/0;margin-right:8px;vertical-align:text-bottom}.devui-checkbox .devui-checkbox__material.devui-checkbox__default-background{background-color:var(--devui-base-bg, #ffffff)}.devui-checkbox .devui-checkbox__material.devui-checkbox--no-label{margin-right:0}.devui-checkbox .devui-checkbox__material>.devui-checkbox__halfchecked-bg{display:inline-block;position:absolute;content:"";background-color:var(--devui-light-text, #ffffff);top:0;left:0;height:100%;width:100%;transform:scale(1);opacity:0}.devui-checkbox .devui-checkbox__material>svg{width:14px;height:14px}.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):focus,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover{background-color:var(--devui-icon-fill-active, #252b3a)}.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):focus,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover:active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover:focus{background-color:var(--devui-brand-active-focus, #344899)}.devui-checkbox__input{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.devui-checkbox label{position:relative;font-weight:400;height:16px;line-height:16px;cursor:pointer;color:var(--devui-text, #252b3a);margin:0;display:flex;align-items:center}.devui-checkbox label.devui-checkbox--lg{display:flex;align-items:center;font-size:var(--devui-font-size-lg, 14px)}.devui-checkbox label.devui-checkbox--lg .devui-checkbox__material{width:18px;height:18px}.devui-checkbox label.devui-checkbox--lg .devui-checkbox__material>svg{width:18px;height:18px}.devui-checkbox label.devui-checkbox--lg.devui-checkbox--bordered{height:40px;padding:0 15px 0 10px}.devui-checkbox label.devui-checkbox--md{display:flex;align-items:center;font-size:var(--devui-font-size-md, 12px)}.devui-checkbox label.devui-checkbox--md .devui-checkbox__material{width:16px;height:16px}.devui-checkbox label.devui-checkbox--md .devui-checkbox__material>svg{width:16px;height:16px}.devui-checkbox label.devui-checkbox--md.devui-checkbox--bordered{height:32px;padding:0 15px 0 10px}.devui-checkbox label.devui-checkbox--sm{display:flex;align-items:center;font-size:var(--devui-font-size-sm, 12px)}.devui-checkbox label.devui-checkbox--sm .devui-checkbox__material{width:14px;height:14px}.devui-checkbox label.devui-checkbox--sm .devui-checkbox__material>svg{width:14px;height:14px}.devui-checkbox label.devui-checkbox--sm.devui-checkbox--bordered{height:24px;padding:0 15px 0 10px}.devui-checkbox label.devui-checkbox--bordered{border:1px solid var(--devui-disabled-line, #dfe1e6);border-radius:var(--devui-border-radius, 2px)}.devui-checkbox label>span{display:inline-block;box-sizing:content-box;vertical-align:top}.devui-checkbox label>span.devui-checkbox__material{flex-shrink:0}.devui-checkbox label>span.devui-checkbox__label-text{flex-shrink:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devui-checkbox.disabled label{cursor:not-allowed;color:var(--devui-disabled-text, #cfd0d3)}.devui-checkbox.disabled .devui-checkbox__material{border-color:var(--devui-icon-fill-active-disabled, #beccfa);background-color:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-checkbox.disabled.unchecked .devui-checkbox__material{border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f5)}.devui-checkbox.disabled.half-checked .devui-checkbox__material{background-color:var(--devui-disabled-bg, #f5f5f5)}.devui-checkbox.disabled.half-checked .devui-checkbox__material .devui-checkbox__halfchecked-bg{transform:scale(.4288);background-color:var(--devui-disabled-text, #cfd0d3);opacity:1}.devui-checkbox.disabled.active svg polygon{fill:var(--devui-light-text, #ffffff)}.devui-checkbox--no-animation{transition:none!important}.devui-checkbox__column-margin{height:28px;line-height:28px}.devui-checkbox__wrap .devui-checkbox label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.devui-checkbox__group{display:inline-flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start}.devui-checkbox__group>*{margin-top:8px}.devui-checkbox__group.is-row{flex-direction:row}.devui-checkbox__group.is-row div:not(:last-child){margin-right:20px}.devui-checkbox__group.is-column{flex-direction:column}.devui-checkbox-button{display:flex;align-items:center;position:relative}.devui-checkbox-button__input{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.devui-checkbox-button__content{font-size:14px;color:var(--devui-text, #252b3a);padding:10px 20px;cursor:pointer;border:1px solid var(--devui-disabled-line, #dfe1e6);display:inline-block;line-height:1;user-select:none}.devui-checkbox-button__content.devui-checkbox-button--lg{font-size:var(--devui-font-size-lg, 14px);padding:var(--devui-btn-lg-padding, 0 24px);height:40px;line-height:40px}.devui-checkbox-button__content.devui-checkbox-button--md{font-size:var(--devui-font-size-md, 12px);padding:var(--devui-btn-padding, 0 20px);height:32px;line-height:32px}.devui-checkbox-button__content.devui-checkbox-button--sm{font-size:var(--devui-font-size-sm, 12px);padding:var(--devui-btn-sm-padding, 0 16px);height:24px;line-height:24px}.devui-checkbox-button.active .devui-checkbox-button__content{color:#fff;background-color:var(--devui-brand, #5e7ce0);border-color:var(--devui-brand, #5e7ce0)}.devui-checkbox-button.active.disabled .devui-checkbox-button__content{color:#fff;background-color:var(--devui-icon-fill-active-disabled, #beccfa);border-color:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-checkbox-button.disabled .devui-checkbox-button__content{cursor:not-allowed;color:var(--devui-disabled-text, #cfd0d3);background-color:#fff;border-color:var(--devui-disabled-line, #dfe1e6)}.devui-checkbox__group.is-row .devui-checkbox-button__content{border-left:none;box-shadow:-1px 0 0 0 var(--devui-disabled-line, #dfe1e6)}.devui-checkbox__group.is-row .devui-checkbox-button:first-child .devui-checkbox-button__content{border-top-left-radius:var(--devui-border-radius, 2px);border-bottom-left-radius:var(--devui-border-radius, 2px);border-left:1px solid var(--devui-disabled-line, #dfe1e6);box-shadow:none}.devui-checkbox__group.is-row .devui-checkbox-button:last-child .devui-checkbox-button__content{border-top-right-radius:var(--devui-border-radius, 2px);border-bottom-right-radius:var(--devui-border-radius, 2px)}.devui-checkbox__group.is-column .devui-checkbox-button{width:100%;margin-top:0}.devui-checkbox__group.is-column .devui-checkbox-button__content{width:100%;border-top:none;box-shadow:0 -1px 0 0 var(--devui-disabled-line, #dfe1e6)}.devui-checkbox__group.is-column .devui-checkbox-button:first-child .devui-checkbox-button__content{border-top-left-radius:var(--devui-border-radius, 2px);border-top-right-radius:var(--devui-border-radius, 2px);border-top:1px solid var(--devui-disabled-line, #dfe1e6);box-shadow:none}.devui-checkbox__group.is-column .devui-checkbox-button:last-child .devui-checkbox-button__content{border-bottom-left-radius:var(--devui-border-radius, 2px);border-bottom-right-radius:var(--devui-border-radius, 2px)}
+.devui-fixed-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--devui-shadow, rgba(37, 43, 58, .24));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 2px 12px 0) var(--devui-shadow, rgba(37, 43, 58, .24));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--required-hide:before{display:none}.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, 12px);color:var(--devui-danger, #f66f6a)}.devui-form__control .devui-form__control-info .devui-form__control-extra{font-size:var(--devui-font-size, 12px);color:var(--devui-aide-text, #71757f);min-height:20px;line-height:1.5;text-align:justify}@keyframes loading-keyframes{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.devui-form__item--horizontal{display:flex;align-items:center;margin-bottom:20px}.devui-form__item--vertical{display:flex;flex-direction:column;margin-bottom:20px}.devui-form__item--error{margin-bottom:0}.devui-form-operation .star{color:red}.devui-checkbox{position:relative;display:flex;display:-ms-flexbox;align-items:center;-ms-flex-align:center;height:100%;margin:0}.devui-checkbox .devui-checkbox__tick-wrap{position:absolute}.devui-checkbox .devui-checkbox__tick-wrap .devui-checkbox__tick{fill:var(--devui-light-text, #ffffff);stroke-dashoffset:50;opacity:0;transform:scale(0);transform-origin:50% 50%;transition:stroke-dashoffset .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.devui-checkbox.active:not(.half-checked) .devui-checkbox__tick{opacity:1;stroke-dashoffset:0;transform:scale(1);transition:stroke-dashoffset .3s cubic-bezier(.755,.05,.855,.06),opacity .2s cubic-bezier(.755,.05,.855,.06)}.devui-checkbox.active:not(.disabled) .devui-checkbox__material:not(.custom-color),.devui-checkbox.half-checked:not(.disabled) .devui-checkbox__material:not(.custom-color){border-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.active .devui-checkbox--bordered,.devui-checkbox.half-checked .devui-checkbox--bordered{border-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.active:not(.disabled) .devui-checkbox__material{background-size:100% 100%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material:not(.custom-color){background-size:0% 0%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material:not(.custom-color):hover{border-color:var(--devui-icon-fill-active, #252b3a)}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material.custom-color{background-size:0% 0%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.half-checked .devui-checkbox__material:not(.custom-color){background-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.half-checked .devui-checkbox__material:not(.custom-color)>.devui-checkbox__halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform .2s cubic-bezier(.755,.05,.855,.06);background-color:var(--devui-light-text, #ffffff)}.devui-checkbox.half-checked .devui-checkbox__material.custom-color>.devui-checkbox__halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform .2s cubic-bezier(.755,.05,.855,.06);background-color:var(--devui-light-text, #ffffff)}.devui-checkbox .devui-checkbox__material{text-align:initial;height:14px;width:14px;position:relative;user-select:none;border:1px solid var(--devui-line, #d7d8da);border-radius:var(--devui-border-radius, 2px);background:linear-gradient(var(--devui-brand, #5e7ce0),var(--devui-brand, #5e7ce0)) no-repeat 50%/0;margin-right:8px;vertical-align:text-bottom}.devui-checkbox .devui-checkbox__material.devui-checkbox__default-background{background-color:var(--devui-base-bg, #ffffff)}.devui-checkbox .devui-checkbox__material.devui-checkbox--no-label{margin-right:0}.devui-checkbox .devui-checkbox__material>.devui-checkbox__halfchecked-bg{display:inline-block;position:absolute;content:"";background-color:var(--devui-light-text, #ffffff);top:0;left:0;height:100%;width:100%;transform:scale(1);opacity:0}.devui-checkbox .devui-checkbox__material>svg{width:14px;height:14px}.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):focus,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover{background-color:var(--devui-icon-fill-active, #252b3a)}.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):focus,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover:active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover:focus{background-color:var(--devui-brand-active-focus, #344899)}.devui-checkbox__input{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.devui-checkbox label{position:relative;font-weight:400;height:16px;line-height:16px;cursor:pointer;color:var(--devui-text, #252b3a);margin:0;display:flex;align-items:center}.devui-checkbox label.devui-checkbox--lg{display:flex;align-items:center;font-size:var(--devui-font-size-lg, 14px)}.devui-checkbox label.devui-checkbox--lg .devui-checkbox__material{width:18px;height:18px}.devui-checkbox label.devui-checkbox--lg .devui-checkbox__material>svg{width:18px;height:18px}.devui-checkbox label.devui-checkbox--lg.devui-checkbox--bordered{height:40px;padding:0 15px 0 10px}.devui-checkbox label.devui-checkbox--md{display:flex;align-items:center;font-size:var(--devui-font-size-md, 12px)}.devui-checkbox label.devui-checkbox--md .devui-checkbox__material{width:16px;height:16px}.devui-checkbox label.devui-checkbox--md .devui-checkbox__material>svg{width:16px;height:16px}.devui-checkbox label.devui-checkbox--md.devui-checkbox--bordered{height:32px;padding:0 15px 0 10px}.devui-checkbox label.devui-checkbox--sm{display:flex;align-items:center;font-size:var(--devui-font-size-sm, 12px)}.devui-checkbox label.devui-checkbox--sm .devui-checkbox__material{width:14px;height:14px}.devui-checkbox label.devui-checkbox--sm .devui-checkbox__material>svg{width:14px;height:14px}.devui-checkbox label.devui-checkbox--sm.devui-checkbox--bordered{height:24px;padding:0 15px 0 10px}.devui-checkbox label.devui-checkbox--bordered{border:1px solid var(--devui-disabled-line, #dfe1e6);border-radius:var(--devui-border-radius, 2px)}.devui-checkbox label>span{display:inline-block;box-sizing:content-box;vertical-align:top}.devui-checkbox label>span.devui-checkbox__material{flex-shrink:0}.devui-checkbox label>span.devui-checkbox__label-text{flex-shrink:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devui-checkbox.disabled label{cursor:not-allowed;color:var(--devui-disabled-text, #cfd0d3)}.devui-checkbox.disabled .devui-checkbox__material{border-color:var(--devui-icon-fill-active-disabled, #beccfa);background-color:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-checkbox.disabled.unchecked .devui-checkbox__material{border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f5)}.devui-checkbox.disabled.half-checked .devui-checkbox__material{background-color:var(--devui-disabled-bg, #f5f5f5)}.devui-checkbox.disabled.half-checked .devui-checkbox__material .devui-checkbox__halfchecked-bg{transform:scale(.4288);background-color:var(--devui-disabled-text, #cfd0d3);opacity:1}.devui-checkbox.disabled.active svg polygon{fill:var(--devui-light-text, #ffffff)}.devui-checkbox--no-animation{transition:none!important}.devui-checkbox__column-margin{height:28px;line-height:28px}.devui-checkbox__wrap .devui-checkbox label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.devui-checkbox__group{display:inline-flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start}.devui-checkbox__group>*{margin-top:8px}.devui-checkbox__group.is-row{flex-direction:row}.devui-checkbox__group.is-row div:not(:last-child){margin-right:20px}.devui-checkbox__group.is-column{flex-direction:column}.devui-checkbox-button{display:flex;align-items:center;position:relative}.devui-checkbox-button__input{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.devui-checkbox-button__content{font-size:14px;color:var(--devui-text, #252b3a);padding:10px 20px;cursor:pointer;border:1px solid var(--devui-disabled-line, #dfe1e6);display:inline-block;line-height:1;user-select:none}.devui-checkbox-button__content.devui-checkbox-button--lg{font-size:var(--devui-font-size-lg, 14px);padding:var(--devui-btn-lg-padding, 0 24px);height:40px;line-height:40px}.devui-checkbox-button__content.devui-checkbox-button--md{font-size:var(--devui-font-size-md, 12px);padding:var(--devui-btn-padding, 0 20px);height:32px;line-height:32px}.devui-checkbox-button__content.devui-checkbox-button--sm{font-size:var(--devui-font-size-sm, 12px);padding:var(--devui-btn-sm-padding, 0 16px);height:24px;line-height:24px}.devui-checkbox-button.active .devui-checkbox-button__content{color:#fff;background-color:var(--devui-brand, #5e7ce0);border-color:var(--devui-brand, #5e7ce0)}.devui-checkbox-button.active.disabled .devui-checkbox-button__content{color:#fff;background-color:var(--devui-icon-fill-active-disabled, #beccfa);border-color:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-checkbox-button.disabled .devui-checkbox-button__content{cursor:not-allowed;color:var(--devui-disabled-text, #cfd0d3);background-color:#fff;border-color:var(--devui-disabled-line, #dfe1e6)}.devui-checkbox__group.is-row .devui-checkbox-button__content{border-left:none;box-shadow:-1px 0 0 0 var(--devui-disabled-line, #dfe1e6)}.devui-checkbox__group.is-row .devui-checkbox-button:first-child .devui-checkbox-button__content{border-top-left-radius:var(--devui-border-radius, 2px);border-bottom-left-radius:var(--devui-border-radius, 2px);border-left:1px solid var(--devui-disabled-line, #dfe1e6);box-shadow:none}.devui-checkbox__group.is-row .devui-checkbox-button:last-child .devui-checkbox-button__content{border-top-right-radius:var(--devui-border-radius, 2px);border-bottom-right-radius:var(--devui-border-radius, 2px)}.devui-checkbox__group.is-column .devui-checkbox-button{width:100%;margin-top:0}.devui-checkbox__group.is-column .devui-checkbox-button__content{width:100%;border-top:none;box-shadow:0 -1px 0 0 var(--devui-disabled-line, #dfe1e6)}.devui-checkbox__group.is-column .devui-checkbox-button:first-child .devui-checkbox-button__content{border-top-left-radius:var(--devui-border-radius, 2px);border-top-right-radius:var(--devui-border-radius, 2px);border-top:1px solid var(--devui-disabled-line, #dfe1e6);box-shadow:none}.devui-checkbox__group.is-column .devui-checkbox-button:last-child .devui-checkbox-button__content{border-bottom-left-radius:var(--devui-border-radius, 2px);border-bottom-right-radius:var(--devui-border-radius, 2px)}

package/code-review/index.es.js

@@ -1,7 +1,8 @@
-import { watch, onUnmounted, defineComponent, toRefs, createVNode, Transition, mergeProps, ref, unref, nextTick, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, computed, onMounted, provide, Teleport, createTextVNode, onBeforeMount } from "vue";
+import { watch, onUnmounted, defineComponent, toRefs, createVNode, Transition, mergeProps, ref, unref, nextTick, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, computed, onMounted, provide, Teleport, createTextVNode } from "vue";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 import Clipboard from "clipboard";
 import * as Diff2Html from "diff2html";
+import { Diff2HtmlUI } from "diff2html/lib/ui/js/diff2html-ui";
 const fixedOverlayProps = {
   modelValue: {
     type: Boolean,
@@ -6205,6 +6206,9 @@ const codeReviewProps = {
   expandAllThreshold: {
     type: Number,
     default: 50
+  },
+  codeLoader: {
+    type: Function
   }
 };
 const CodeReviewInjectionKey = Symbol("d-code-review");
@@ -6300,6 +6304,154 @@ function notEmptyNode(node) {
   const classes = node.classList;
   return !classes.contains("d2h-info") && !classes.contains("d2h-emptyplaceholder") && !classes.contains("comment-cell");
 }
+function insertIncrementLineToPage(referenceDom, trNodes, direction) {
+  const trNodesToBeInserted = trNodes.filter((element) => element.children[0].children.length === 2);
+  if (direction === "up") {
+    const nextSibling = referenceDom.nextElementSibling;
+    trNodesToBeInserted.forEach((item) => {
+      var _a;
+      (_a = referenceDom.parentNode) == null ? void 0 : _a.insertBefore(item, nextSibling);
+    });
+  } else {
+    trNodesToBeInserted.forEach((item) => {
+      var _a;
+      (_a = referenceDom.parentNode) == null ? void 0 : _a.insertBefore(item, referenceDom);
+    });
+  }
+}
+function ifRemoveExpandLine(expandDom, newExpandDom, direction) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  const matches = newExpandDom.children[1].innerText.trim().match(ExpandLineReg);
+  if (!matches) {
+    return true;
+  }
+  const leftLineNumber = parseInt(matches[1]);
+  const addedLine = parseInt(matches[2]);
+  const rightLineNumber = parseInt(matches[3]);
+  if (direction === "up") {
+    const prevSibling = expandDom.previousElementSibling;
+    if (!prevSibling) {
+      if (leftLineNumber === 1 && rightLineNumber === 1) {
+        expandDom == null ? void 0 : expandDom.remove();
+        return true;
+      }
+    } else {
+      const prevLeftLineNumber = parseInt((_c = (_b = (_a = prevSibling.children) == null ? void 0 : _a[0].children) == null ? void 0 : _b[0]) == null ? void 0 : _c.innerText);
+      const prevRightLineNumber = parseInt((_f = (_e = (_d = prevSibling.children) == null ? void 0 : _d[0].children) == null ? void 0 : _e[1]) == null ? void 0 : _f.innerText);
+      if (leftLineNumber === prevLeftLineNumber + 1 && rightLineNumber === prevRightLineNumber + 1) {
+        expandDom.remove();
+        return true;
+      }
+    }
+  } else {
+    const nextSibling = expandDom.nextElementSibling;
+    const nextLeftLineNumber = parseInt((_i = (_h = (_g = nextSibling == null ? void 0 : nextSibling.children) == null ? void 0 : _g[0].children) == null ? void 0 : _h[0]) == null ? void 0 : _i.innerText);
+    const nextRightLineNumber = parseInt((_l = (_k = (_j = nextSibling == null ? void 0 : nextSibling.children) == null ? void 0 : _j[0].children) == null ? void 0 : _k[1]) == null ? void 0 : _l.innerText);
+    if (leftLineNumber + addedLine === nextLeftLineNumber && rightLineNumber + addedLine === nextRightLineNumber) {
+      expandDom.remove();
+      return true;
+    }
+  }
+  return false;
+}
+function updateExpandLineCount(expandDom, newExpandDom) {
+  if (!expandDom.nextElementSibling) {
+    return;
+  }
+  const curMatches = expandDom.children[1].innerText.trim().match(ExpandLineReg);
+  const newMatches = newExpandDom.children[1].innerText.trim().match(ExpandLineReg);
+  const newChangedNumLeft = parseInt((curMatches == null ? void 0 : curMatches[2]) || "") + parseInt((newMatches == null ? void 0 : newMatches[2]) || "");
+  const newChangedNumRight = parseInt((curMatches == null ? void 0 : curMatches[4]) || "") + parseInt((newMatches == null ? void 0 : newMatches[4]) || "");
+  expandDom.children[1].children[0].innerText = `@@ -${(newMatches == null ? void 0 : newMatches[1]) || 0},${newChangedNumLeft} +${(newMatches == null ? void 0 : newMatches[3]) || 0},${newChangedNumRight} @@`;
+}
+function parseDiffCode(container, code, outputFormat) {
+  const diff2HtmlUi = new Diff2HtmlUI(container, code, {
+    drawFileList: false,
+    matching: "lines",
+    outputFormat,
+    highlight: true
+  });
+  diff2HtmlUi.draw();
+  diff2HtmlUi.highlightCode();
+}
+function setLineNumberInDataset(trNode, prevL, prevR, nextL, nextR) {
+  if (trNode) {
+    trNode.classList.add("expand-line");
+    trNode.dataset.prevL = String(prevL);
+    trNode.dataset.prevR = String(prevR);
+    trNode.dataset.nextL = String(nextL);
+    trNode.dataset.nextR = String(nextR);
+  }
+}
+function updateExpandUpDownButton(trNode) {
+  trNode.children[0].children[0].remove();
+  trNode.children[0].children[0].classList.remove("up-expand");
+  trNode.children[0].children[0].classList.add("all-expand");
+  trNode.children[0].children[0].innerHTML = AllExpandIcon();
+}
+function updateLineNumberInDataset(trNode, expandAllThreshold, position, updateExpandButton = false) {
+  let nextL;
+  let prevL;
+  let nextR;
+  let prevR;
+  if (position === "top") {
+    const nextLineNode = trNode.nextElementSibling;
+    nextL = parseInt(nextLineNode.children[0].children[0].innerText) - 1;
+    prevL = Math.max(nextL - expandAllThreshold + 1, 1);
+    nextR = parseInt(nextLineNode.children[0].children[1].innerText) - 1;
+    prevR = Math.max(nextR - expandAllThreshold + 1, 1);
+  } else if (position === "bottom") {
+    const prevLineNode = trNode.previousElementSibling;
+    prevL = parseInt(prevLineNode.children[0].children[0].innerText) + 1;
+    nextL = prevL + expandAllThreshold - 1;
+    prevR = parseInt(prevLineNode.children[0].children[1].innerText) + 1;
+    nextR = prevR + expandAllThreshold - 1;
+  } else {
+    const prevLineNode = trNode.previousElementSibling;
+    const nextLineNode = trNode.nextElementSibling;
+    const prevLineNumber = parseInt(prevLineNode.children[0].children[0].innerText);
+    const nextLineNumber = parseInt(nextLineNode.children[0].children[0].innerText);
+    prevL = prevLineNumber + 1;
+    prevR = parseInt(prevLineNode.children[0].children[1].innerText) + 1;
+    nextL = nextLineNumber - 1;
+    nextR = parseInt(nextLineNode.children[0].children[1].innerText) - 1;
+    const isExpandAll = nextLineNumber - prevLineNumber <= expandAllThreshold;
+    if (isExpandAll && updateExpandButton) {
+      updateExpandUpDownButton(trNode);
+    }
+  }
+  setLineNumberInDataset(trNode, prevL, prevR, nextL, nextR);
+}
+function getLineNumberFormDataset(expandDom, expandAllThreshold) {
+  var _a, _b, _c;
+  const attrsMap = (_b = (_a = expandDom.parentElement) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.dataset;
+  const prevL = Number(attrsMap == null ? void 0 : attrsMap.prevL);
+  const nextL = Number(attrsMap == null ? void 0 : attrsMap.nextL);
+  const prevR = Number(attrsMap == null ? void 0 : attrsMap.prevR);
+  const nextR = Number(attrsMap == null ? void 0 : attrsMap.nextR);
+  let leftLineStart, leftLineEnd, rightLineStart, rightLineEnd;
+  if (prevL && nextL && prevR && nextR) {
+    const buttonClasses = Array.from(expandDom.classList);
+    const direction = (_c = buttonClasses.find((item) => item.endsWith("expand"))) == null ? void 0 : _c.split("-")[0];
+    if (direction === "up") {
+      leftLineEnd = nextL;
+      leftLineStart = Math.max(leftLineEnd - expandAllThreshold + 1, prevL);
+      rightLineEnd = nextR;
+      rightLineStart = Math.max(rightLineEnd - expandAllThreshold + 1, prevR);
+    } else if (direction === "down") {
+      leftLineStart = prevL;
+      leftLineEnd = Math.min(leftLineStart + expandAllThreshold - 1, nextL);
+      rightLineStart = prevR;
+      rightLineEnd = Math.min(rightLineStart + expandAllThreshold - 1, nextR);
+    } else {
+      leftLineStart = prevL;
+      leftLineEnd = nextL;
+      rightLineStart = prevR;
+      rightLineEnd = nextR;
+    }
+  }
+  return [leftLineStart, leftLineEnd, rightLineStart, rightLineEnd];
+}
 function insertNode(parent, child) {
   if (parent.firstChild) {
     parent.insertBefore(child, parent.firstChild);
@@ -6351,7 +6503,8 @@ function addCommentToPage(lineHost, commentDom, lineSide) {
     (_b = lineHost.parentElement) == null ? void 0 : _b.appendChild(newLine);
   }
 }
-function useCodeReviewExpand(reviewContentRef, expandAllThreshold, outputFormat) {
+function useCodeReviewExpand(reviewContentRef, props) {
+  const { outputFormat, expandAllThreshold, codeLoader } = toRefs(props);
   const processSideBySide = () => {
     const [leftTable, rightTable] = reviewContentRef.value.querySelectorAll("table");
     const trNodes = Array.from(leftTable.querySelectorAll("tr"));
@@ -6371,7 +6524,7 @@ function useCodeReviewExpand(reviewContentRef, expandAllThreshold, outputFormat)
         } else if (lineIndex > 0 && lineIndex < totalLines - 1 && nextLineIndex in trNodes && prevLineIndex in trNodes) {
           const preLineChildren = Array.from(trNodes[prevLineIndex].children);
           const nextLineChildren = Array.from(trNodes[nextLineIndex].children);
-          const isExpandAll = parseInt(nextLineChildren[0].innerText) - parseInt(preLineChildren[0].innerText) - 1 < expandAllThreshold;
+          const isExpandAll = parseInt(nextLineChildren[0].innerText) - parseInt(preLineChildren[0].innerText) - 1 < expandAllThreshold.value;
           attachExpandUpDownButton(lineNumberBox, isExpandAll ? "all" : "updown");
         }
       }
@@ -6405,13 +6558,15 @@ function useCodeReviewExpand(reviewContentRef, expandAllThreshold, outputFormat)
         const nextLineIndex = lineIndex + 1;
         const prevLineIndex = lineIndex - 1;
         if (lineIndex === 0 && nextLineIndex in trNodes) {
+          updateLineNumberInDataset(trNodes[lineIndex], expandAllThreshold.value, "top");
           attachExpandUpDownButton(lineNumberBox, "up");
         } else if (lineIndex > 0 && lineIndex < totalLines - 1 && nextLineIndex in trNodes && prevLineIndex in trNodes) {
           const prevTdNodes = Array.from(trNodes[prevLineIndex].children);
           const prevLineNumber = parseInt(prevTdNodes[0].children[0].innerText);
           const nextTdNodes = Array.from(trNodes[nextLineIndex].children);
           const nextLineNumber = parseInt(nextTdNodes[0].children[0].innerText);
-          const isExpandAll = nextLineNumber - prevLineNumber - 1 < expandAllThreshold;
+          updateLineNumberInDataset(trNodes[lineIndex], expandAllThreshold.value, "middle");
+          const isExpandAll = nextLineNumber - prevLineNumber <= expandAllThreshold.value;
           attachExpandUpDownButton(lineNumberBox, isExpandAll ? "all" : "updown");
         }
       }
@@ -6419,35 +6574,93 @@ function useCodeReviewExpand(reviewContentRef, expandAllThreshold, outputFormat)
     const loadMoreLine = trNodes[0].cloneNode(true);
     loadMoreLine.children[0].removeChild(loadMoreLine.children[0].children[0]);
     loadMoreLine.children[1].innerText = "";
-    loadMoreLine.children[1].style.height = "20px";
-    const lastTrNode = trNodes[totalLines - 1].children;
-    const leftLineStart = parseInt(lastTrNode[0].children[0].innerText) + 1;
-    const rightLineStart = parseInt(lastTrNode[0].children[1].innerText) + 1;
-    if (leftLineStart && rightLineStart) {
-      attachExpandUpDownButton(loadMoreLine.children[0], "down");
-    }
     (_a = trNodes[0].parentElement) == null ? void 0 : _a.appendChild(loadMoreLine);
+    updateLineNumberInDataset(loadMoreLine, expandAllThreshold.value, "bottom");
+    attachExpandUpDownButton(loadMoreLine.children[0], "down");
+  };
+  const insertIncrementCode = (code, direction, referenceDom) => {
+    if (!referenceDom) {
+      return;
+    }
+    if (!code) {
+      return referenceDom == null ? void 0 : referenceDom.remove();
+    }
+    const prefix = "--- updated_at	Jan 1, 2019, 0:0:0 AM\n+++ updated_at	Jan 1, 2019, 0:0:0 AM\n";
+    const container = document.createElement("div");
+    parseDiffCode(container, prefix + code, outputFormat.value);
+    const trNodes = Array.from(container.querySelectorAll("tr"));
+    const expandLine = trNodes.find((element) => {
+      var _a;
+      return (_a = element.children[1]) == null ? void 0 : _a.innerText.trim().match(ExpandLineReg);
+    });
+    if (!expandLine) {
+      return;
+    }
+    insertIncrementLineToPage(referenceDom, trNodes, direction);
+    const removedExpandLine = ifRemoveExpandLine(referenceDom, expandLine, direction);
+    if (removedExpandLine) {
+      return;
+    }
+    updateExpandLineCount(referenceDom, expandLine);
+    if (direction === "up") {
+      if (!referenceDom.previousElementSibling) {
+        updateLineNumberInDataset(referenceDom, expandAllThreshold.value, "top");
+      } else {
+        updateLineNumberInDataset(referenceDom, expandAllThreshold.value, "middle", true);
+      }
+    } else {
+      if (referenceDom.nextElementSibling) {
+        updateLineNumberInDataset(referenceDom, expandAllThreshold.value, "middle", true);
+      } else {
+        updateLineNumberInDataset(referenceDom, expandAllThreshold.value, "bottom");
+      }
+    }
+  };
+  const onExpandButtonClick = (e) => {
+    var _a, _b;
+    const composedPath = e.composedPath();
+    const expandIconDom = composedPath.find((element) => {
+      var _a2;
+      return (_a2 = element.classList) == null ? void 0 : _a2.contains("expand-icon");
+    });
+    if (expandIconDom) {
+      const expandDirection = (_a = Array.from(expandIconDom.classList).find((item) => item.endsWith("expand"))) == null ? void 0 : _a.split("-")[0];
+      const direction = expandDirection === "up" || expandDirection === "all" ? "up" : "down";
+      const [leftLineStart, leftLineEnd, rightLineStart, rightLineEnd] = getLineNumberFormDataset(expandIconDom, expandAllThreshold.value);
+      (_b = codeLoader == null ? void 0 : codeLoader.value) == null ? void 0 : _b.call(codeLoader, [leftLineStart, leftLineEnd, rightLineStart, rightLineEnd], (code) => {
+        var _a2;
+        insertIncrementCode(code, direction, (_a2 = expandIconDom.parentElement) == null ? void 0 : _a2.parentElement);
+      });
+    }
   };
   const insertExpandButton = () => {
-    outputFormat === "side-by-side" ? processSideBySide() : processLineByLine();
+    outputFormat.value === "side-by-side" ? processSideBySide() : processLineByLine();
   };
-  return { insertExpandButton };
+  return { insertExpandButton, onExpandButtonClick };
 }
 function useCodeReview(props, ctx) {
-  const { diff, fold, outputFormat, expandAllThreshold } = toRefs(props);
+  const { diff, outputFormat } = toRefs(props);
   const renderHtml = ref("");
-  const isFold = ref(fold.value);
   const reviewContentRef = ref();
-  const diffFile = Diff2Html.parse(diff.value);
-  const { insertExpandButton } = useCodeReviewExpand(reviewContentRef, expandAllThreshold.value, outputFormat.value);
+  const diffFile = ref([]);
+  const { insertExpandButton, onExpandButtonClick } = useCodeReviewExpand(reviewContentRef, props);
   const initDiffContent = () => {
-    renderHtml.value = Diff2Html.html(diffFile, {
-      drawFileList: false,
-      matching: "lines",
-      outputFormat: outputFormat.value
+    diffFile.value = Diff2Html.parse(diff.value);
+    nextTick(() => {
+      parseDiffCode(reviewContentRef.value, diff.value, outputFormat.value);
+      insertExpandButton();
+      ctx.emit("contentRefresh", JSON.parse(JSON.stringify(diffFile.value)));
     });
-    nextTick(insertExpandButton);
   };
+  const onContentClick = (e) => {
+    onExpandButtonClick(e);
+  };
+  watch(diff, initDiffContent, { immediate: true });
+  return { renderHtml, reviewContentRef, diffFile, onContentClick };
+}
+function useCodeReviewFold(props, ctx) {
+  const { fold } = toRefs(props);
+  const isFold = ref(fold.value);
   const toggleFold = (status) => {
     if (status !== void 0) {
       isFold.value = status;
@@ -6459,18 +6672,9 @@ function useCodeReview(props, ctx) {
     isFold.value = val;
   });
   watch(isFold, () => {
-    if (!isFold.value && renderHtml.value === "") {
-      initDiffContent();
-    }
     ctx.emit("foldChange", isFold.value);
   });
-  onBeforeMount(() => {
-    if (!isFold.value) {
-      initDiffContent();
-    }
-  });
-  provide(CodeReviewInjectionKey, { reviewContentRef, diffInfo: diffFile[0], isFold, rootCtx: ctx });
-  return { renderHtml, isFold, reviewContentRef, toggleFold };
+  return { isFold, toggleFold };
 }
 function useCodeReviewComment(reviewContentRef, ctx) {
   const ns2 = useNamespace("code-review");
@@ -6550,6 +6754,10 @@ function useCodeReviewComment(reviewContentRef, ctx) {
       nextLineHost = nextLineHost.nextElementSibling;
     }
   };
+  window.addEventListener("scroll", resetLeftTop);
+  onUnmounted(() => {
+    window.removeEventListener("scroll", resetLeftTop);
+  });
   return {
     commentLeft,
     commentTop,
@@ -6566,15 +6774,19 @@ var codeReview = "";
 var CodeReview = defineComponent({
   name: "DCodeReview",
   props: codeReviewProps,
-  emits: ["foldChange", "addComment", "afterViewInit"],
+  emits: ["foldChange", "addComment", "afterViewInit", "contentRefresh"],
   setup(props, ctx) {
     const ns2 = useNamespace("code-review");
     const {
       renderHtml,
-      isFold,
       reviewContentRef,
-      toggleFold
+      diffFile,
+      onContentClick
     } = useCodeReview(props, ctx);
+    const {
+      isFold,
+      toggleFold
+    } = useCodeReviewFold(props, ctx);
     const {
       commentLeft,
       commentTop,
@@ -6593,6 +6805,12 @@ var CodeReview = defineComponent({
         removeComment
       });
     });
+    provide(CodeReviewInjectionKey, {
+      reviewContentRef,
+      diffInfo: diffFile.value[0],
+      isFold,
+      rootCtx: ctx
+    });
     return () => createVNode("div", {
       "class": ns2.b()
     }, [createVNode(CodeReviewHeader, {
@@ -6603,6 +6821,7 @@ var CodeReview = defineComponent({
       }],
       "innerHTML": renderHtml.value,
       "ref": reviewContentRef,
+      "onClick": onContentClick,
       "onMouseenter": onMouseEnter,
       "onMousemove": onMouseMove,
       "onMouseleave": onMouseleave