From 398debc510c288468880c3ba8519d83ab2e0445b Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Mon, 16 Dec 2019 14:49:57 +0800 Subject: [PATCH 1/9] fix(scrollbar): mouse enter transition --- styles/themes/vars.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles/themes/vars.scss b/styles/themes/vars.scss index 5f0766da7..08a6b19be 100644 --- a/styles/themes/vars.scss +++ b/styles/themes/vars.scss @@ -271,10 +271,10 @@ $default-cubic-bezier: cubic-bezier(.4, 0, .2, 1); @mixin fade-in-transition($block: "fade-in", $enter-duration: .2s, $leave-duration: .2s) { &.#{$namespace}-#{$block}--transition-enter-active { - transition: opacity $enter-duration $default-cubic-bezier; + transition: all $enter-duration $default-cubic-bezier !important; } &.#{$namespace}-#{$block}--transition-leave-active { - transition: opacity $leave-duration $default-cubic-bezier; + transition: all $leave-duration $default-cubic-bezier !important; } &.#{$namespace}-#{$block}--transition-enter, &.#{$namespace}-#{$block}--transition-leave-to { From 9810a7f935805c88acf1c8c2c7c97ca2c8a28fe6 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Mon, 16 Dec 2019 16:35:28 +0800 Subject: [PATCH 2/9] refactor(button): loading animation & icon switch transition --- .../components/button/enUS/loading.md | 4 + packages/common/Button/src/Button.vue | 91 +++++++++++-------- styles/Button.scss | 6 ++ 3 files changed, 61 insertions(+), 40 deletions(-) diff --git a/demo/documentation/components/button/enUS/loading.md b/demo/documentation/components/button/enUS/loading.md index 79e7f7583..d6a763aa8 100644 --- a/demo/documentation/components/button/enUS/loading.md +++ b/demo/documentation/components/button/enUS/loading.md @@ -10,6 +10,7 @@ Button has loading status. Loading +
Loading +
Loading +
Loading +
- +
- - - + - + + + +
- +
- +
- - - + - + + + +
- + - - diff --git a/packages/transition/FadeInHeightExpandTransition.vue b/packages/transition/FadeInHeightExpandTransition.vue index 3bccace12..d8d03aed2 100644 --- a/packages/transition/FadeInHeightExpandTransition.vue +++ b/packages/transition/FadeInHeightExpandTransition.vue @@ -4,6 +4,10 @@ export default { transitionDisabled: { type: Boolean, default: false + }, + width: { + type: Boolean, + default: false } }, beforeDestroy () { @@ -14,13 +18,21 @@ export default { }, methods: { handleBeforeLeave () { - this.$el.style.maxHeight = this.$el.offsetHeight + 'px' - this.$el.style.height = this.$el.offsetHeight + 'px' + if (this.width) { + this.$el.style.maxWidth = this.$el.offsetWidth + 'px' + this.$el.style.width = this.$el.offsetWidth + 'px' + } else { + this.$el.style.maxHeight = this.$el.offsetHeight + 'px' + this.$el.style.height = this.$el.offsetHeight + 'px' + } this.$el.getBoundingClientRect() }, handleLeave () { - // debugger - this.$el.style.maxHeight = 0 + if (this.width) { + this.$el.style.maxWidth = 0 + } else { + this.$el.style.maxHeight = 0 + } this.$el.getBoundingClientRect() }, handleAfterLeave () { @@ -28,21 +40,38 @@ export default { }, handleEnter () { this.$nextTick().then(() => { - this.$el.style.height = this.$el.offsetHeight + 'px' - this.$el.style.maxHeight = 0 + if (this.width) { + this.$el.style.width = this.$el.offsetWidth + 'px' + this.$el.style.maxWidth = 0 + } else { + this.$el.style.height = this.$el.offsetHeight + 'px' + this.$el.style.maxHeight = 0 + } + this.$el.style.transition = 'none' this.$el.getBoundingClientRect() - this.$el.style.maxHeight = this.$el.style.height + this.$el.style.transition = null + this.$el.getBoundingClientRect() + if (this.width) { + this.$el.style.maxWidth = this.$el.style.width + } else { + this.$el.style.maxHeight = this.$el.style.height + } }) }, handleAfterEnter () { - this.$el.style.height = null - this.$el.style.maxHeight = null + if (this.width) { + this.$el.style.width = null + this.$el.style.maxWidth = null + } else { + this.$el.style.height = null + this.$el.style.maxHeight = null + } } }, render (h) { return h('transition', { props: { - name: 'n-fade-in-height-expand' + name: this.width ? 'n-fade-in-width-expand' : 'n-fade-in-height-expand' }, on: { beforeLeave: this.handleBeforeLeave, diff --git a/packages/base/IconTransition/index.js b/packages/transition/IconSwitchTransition/index.js similarity index 100% rename from packages/base/IconTransition/index.js rename to packages/transition/IconSwitchTransition/index.js diff --git a/packages/transition/IconSwitchTransition/src/main.vue b/packages/transition/IconSwitchTransition/src/main.vue new file mode 100644 index 000000000..395c4a6a1 --- /dev/null +++ b/packages/transition/IconSwitchTransition/src/main.vue @@ -0,0 +1,23 @@ + From bac94bc8472f6644838b8dfbd5a0e0958ff4a2c8 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Mon, 16 Dec 2019 16:36:22 +0800 Subject: [PATCH 4/9] refactor(steps): use new icon-switch-transition --- packages/common/Steps/src/Step.vue | 8 ++++---- styles/Steps.scss | 4 ++++ 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/common/Steps/src/Step.vue b/packages/common/Steps/src/Step.vue index 5b380a2d7..a8953ecd4 100644 --- a/packages/common/Steps/src/Step.vue +++ b/packages/common/Steps/src/Step.vue @@ -9,7 +9,7 @@
- +
- +
@@ -55,11 +55,11 @@ diff --git a/packages/common/Log/src/main.vue b/packages/common/Log/src/main.vue index 67fe9ae55..43014970d 100644 --- a/packages/common/Log/src/main.vue +++ b/packages/common/Log/src/main.vue @@ -1,41 +1,40 @@ diff --git a/packages/common/Log/src/main.vue b/packages/common/Log/src/main.vue index 43014970d..885c1bd28 100644 --- a/packages/common/Log/src/main.vue +++ b/packages/common/Log/src/main.vue @@ -11,11 +11,12 @@ @wheel="handleWheel" > - 
{{ processedLog }}
+ + - +
@@ -26,23 +27,21 @@ import themeable from '../../../mixins/themeable' import NScrollbar from '../../Scrollbar' import NLogLoader from './LogLoader' import NFadeInHeightExpandTransition from '../../../transition/FadeInHeightExpandTransition' +import NLogLine from './LogLine' export default { name: 'NLog', components: { NScrollbar, NLogLoader, + NLogLine, NFadeInHeightExpandTransition }, mixins: [ withapp, themeable ], props: { - topLoading: { + loading: { type: Boolean, - default: true - }, - bottomLoading: { - type: Boolean, - default: true + default: false }, trim: { type: Boolean, @@ -71,6 +70,10 @@ export default { offsetBottom: { type: Number, default: 0 + }, + hljs: { + type: Object, + default: null } }, data () { @@ -87,7 +90,6 @@ export default { return `${this.rows * this.lineHeight}em` }, processedLog () { - console.log(this.log.trim()) if (this.trim && this.log) return this.log.trim() else return this.log }, @@ -98,6 +100,9 @@ export default { } }, methods: { + getHljs () { + return this.hljs || this.$naive.hljs + }, handleScroll (e, container, content) { const containerHeight = container.offsetHeight const containerScrollTop = container.scrollTop diff --git a/styles/Log.scss b/styles/Log.scss index 4f4c64814..b6991f10b 100644 --- a/styles/Log.scss +++ b/styles/Log.scss @@ -6,31 +6,31 @@ font-family: 'FiraCode', monospace; font-size: 14px; color: $--n-secondary-text-color; - border-radius: 6px; - width: 100%; box-sizing: border-box; - border: 1px solid $--n-border-color; + transition: border-color .3s $default-cubic-bezier; + @include m(top-bordered) { + border-top: 1px solid $--n-border-color; + } + @include m(bottom-bordered) { + border-bottom: 1px solid $--n-border-color; + } @include b(scrollbar-content) { + padding-top: 8px; + padding-bottom: 8px; overflow: hidden; } @include e(lines) { - padding: 0 8px; margin: 0; white-space: pre-wrap; } @include e(line) { - padding: 0 8px; margin: 0; - &:first-child { - margin-top: 8px; - } - &:last-child { - margin-bottom: 8px; - } } @include b(log-loader) { @include fade-in-width-expand-transition($duration: .3s, $delay: 0s); - box-shadow: $--popover-box-shadow; + box-sizing: border-box; + border: 1px solid $--n-border-color; + // box-shadow: $--popover-box-shadow; position: absolute; right: 16px; top: 8px; From 98a2a07e59002dbb2925353c64f2327d99d30ed0 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Tue, 17 Dec 2019 20:39:44 +0800 Subject: [PATCH 8/9] refactor(slider): logic changes, bug fixed & keyboard support --- .../components/slider/enUS/mark.md | 3 - packages/common/Slider/src/main.vue | 146 +++++++++++++++--- styles/Slider.scss | 126 ++++++++------- styles/themes/vars.scss | 2 +- 4 files changed, 200 insertions(+), 77 deletions(-) diff --git a/demo/documentation/components/slider/enUS/mark.md b/demo/documentation/components/slider/enUS/mark.md index 0a65d2514..344e333f1 100644 --- a/demo/documentation/components/slider/enUS/mark.md +++ b/demo/documentation/components/slider/enUS/mark.md @@ -29,9 +29,6 @@ export default { } ``` ```css -.n-slider { - margin-bottom: 8px; -} .n-input-number { margin: 0 12px 8px 0; } diff --git a/packages/common/Slider/src/main.vue b/packages/common/Slider/src/main.vue index f7dcfe2b6..1f8784a19 100644 --- a/packages/common/Slider/src/main.vue +++ b/packages/common/Slider/src/main.vue @@ -7,10 +7,13 @@ 'n-slider--with-mark': marks, [`n-${synthesizedTheme}-theme`]: synthesizedTheme }" + @keydown.right="handleKeyDownRight" + @keydown.left="handleKeyDownLeft" >
- {{ activeHandleValue || tooltipHoverDisplayValue }} + {{ activeHandleValue === null ? tooltipHoverDisplayValue : activeHandleValue }}
@@ -161,7 +164,10 @@ export default { showTooltip: false, firstHandleActive: false, secondHandleActive: false, + firstHandleClicked: false, + secondHandleClicked: false, memoziedOtherValue: null, + valueChangedByRailClick: true, tooltipHoverDisplayValue: '' } }, @@ -238,33 +244,56 @@ export default { }, active () { return this.firstHandleActive || this.secondHandleActive + }, + clicked () { + return this.firstHandleClicked || this.secondHandleClicked } }, watch: { value (newValue, oldValue) { - if (this.range && newValue && this.showTooltip) { + if (this.range && newValue) { if (oldValue && oldValue[1] !== newValue[1]) { this.$nextTick().then(() => { - this.firstHandleActive = false - this.secondHandleActive = true + if (!this.valueChangedByRailClick) { + this.firstHandleActive = false + this.secondHandleActive = true + } else { + this.valueChangedByRailClick = false + } this.switchFocus() }) } else if (oldValue && oldValue[0] !== newValue[0]) { this.$nextTick().then(() => { - this.firstHandleActive = true - this.secondHandleActive = false + if (!this.valueChangedByRailClick) { + this.firstHandleActive = true + this.secondHandleActive = false + } else { + this.valueChangedByRailClick = false + } this.switchFocus() }) } else if (newValue[0] === newValue[1]) { this.$nextTick().then(() => { - this.firstHandleActive = false - this.secondHandleActive = true + if (!this.valueChangedByRailClick) { + this.firstHandleActive = false + this.secondHandleActive = true + } else { + this.valueChangedByRailClick = false + } this.switchFocus() }) } } this.$nextTick().then(() => { - this.updatePosition() + if (this.range) { + if (newValue && oldValue) { + if (newValue[0] !== oldValue[0] || newValue[1] !== oldValue[1]) { + this.updatePosition() + } + } + } else { + this.updatePosition() + } }) } }, @@ -273,6 +302,85 @@ export default { window.removeEventListener('mouseup', this.handleFirstHandleMouseUp) }, methods: { + handleRailClick (e) { + this.valueChangedByRailClick = true + const railRect = this.$refs.rail.getBoundingClientRect() + const offsetRatio = (e.clientX - railRect.left) / railRect.width + const newValue = this.min + (this.max - this.min) * offsetRatio + if (!this.range) { + this.emitInputEvent(newValue) + this.$refs.firstHandle.focus() + } else { + if (this.value) { + if (Math.abs(this.firstHandleValue - newValue) < Math.abs(this.secondHandleValue - newValue)) { + this.emitInputEvent([newValue, this.secondHandleValue]) + this.$refs.firstHandle.focus() + } else { + this.emitInputEvent([this.firstHandleValue, newValue]) + this.$refs.secondHandle.focus() + } + } else { + this.emitInputEvent([newValue, newValue]) + this.$refs.firstHandle.focus() + } + } + }, + handleKeyDownRight () { + let firstHandleFocused = false + let handleValue = null + if (document.activeElement === this.$refs.firstHandle) { + firstHandleFocused = true + handleValue = this.firstHandleValue + } else { + handleValue = this.secondHandleValue + } + let nextValue = Math.floor(handleValue / this.step) * this.step + this.step + if (this.marks) { + for (let key of Object.keys(this.marks)) { + key = Number(key) + if (key > handleValue && key < nextValue) { + nextValue = key + } + } + } + if (this.range) { + if (firstHandleFocused) { + this.emitInputEvent([nextValue, this.secondHandleValue]) + } else { + this.emitInputEvent([this.firstHandleValue, nextValue]) + } + } else { + this.emitInputEvent(nextValue) + } + }, + handleKeyDownLeft () { + let firstHandleFocused = false + let handleValue = null + if (document.activeElement === this.$refs.firstHandle) { + firstHandleFocused = true + handleValue = this.firstHandleValue + } else { + handleValue = this.secondHandleValue + } + let nextValue = Math.ceil(handleValue / this.step) * this.step - this.step + if (this.marks) { + for (let key of Object.keys(this.marks)) { + key = Number(key) + if (key < handleValue && key > nextValue) { + nextValue = key + } + } + } + if (this.range) { + if (firstHandleFocused) { + this.emitInputEvent([nextValue, this.secondHandleValue]) + } else { + this.emitInputEvent([this.firstHandleValue, nextValue]) + } + } else { + this.emitInputEvent(nextValue) + } + }, switchFocus () { if (this.range) { const firstHandle = this.$refs.firstHandle @@ -319,13 +427,9 @@ export default { }, justifyValue (value) { let justifiedValue = value - if (this.min !== null) { - justifiedValue = Math.max(this.min, justifiedValue) - } - if (this.max !== null) { - justifiedValue = Math.min(this.max, justifiedValue) - } - justifiedValue = Math.round(justifiedValue / this.step) * this.step + justifiedValue = Math.max(this.min, justifiedValue) + justifiedValue = Math.min(this.max, justifiedValue) + justifiedValue = Math.round((justifiedValue - this.min) / this.step) * this.step + this.min if (this.marks) { const closestMarkValue = this.getClosestMarkValue(value) if (closestMarkValue !== null && Math.abs(justifiedValue - value) > Math.abs(closestMarkValue - value)) { @@ -339,6 +443,7 @@ export default { this.memoziedOtherValue = this.secondHandleValue } this.firstHandleActive = true + this.firstHandleClicked = true window.addEventListener('mouseup', this.handleFirstHandleMouseUp) window.addEventListener('mousemove', this.throttledHandleFirstHandleMouseMove) }, @@ -347,12 +452,15 @@ export default { this.memoziedOtherValue = this.firstHandleValue } this.secondHandleActive = true + this.secondHandleClicked = true window.addEventListener('mouseup', this.handleSecondHandleMouseUp) window.addEventListener('mousemove', this.throttledHandleSecondHandleMouseMove) }, handleFirstHandleMouseUp (e) { this.secondHandleActive = false this.firstHandleActive = false + this.secondHandleClicked = false + this.firstHandleClicked = false if (!this.$refs.firstHandle.contains(e.target)) { this.showTooltip = false } else { @@ -364,6 +472,8 @@ export default { handleSecondHandleMouseUp (e) { this.secondHandleActive = false this.firstHandleActive = false + this.secondHandleClicked = false + this.firstHandleClicked = false if (!this.$refs.firstHandle.contains(e.target)) { this.showTooltip = false } else { @@ -412,7 +522,7 @@ export default { } }, handleFirstHandleMouseLeave () { - if (!this.active) { + if (!this.active || !this.clicked) { this.showTooltip = false } }, @@ -428,7 +538,7 @@ export default { } }, handleSecondHandleMouseLeave () { - if (!this.active) { + if (!this.active || !this.clicked) { this.showTooltip = false } }, diff --git a/styles/Slider.scss b/styles/Slider.scss index 46bc5af79..9ee4a39aa 100644 --- a/styles/Slider.scss +++ b/styles/Slider.scss @@ -3,14 +3,30 @@ @include themes-mixin { @include b(slider) { - display: block; - padding: 5px 0; - position: relative; - z-index: 0; - width: calc(100% - 14px); - margin-left: 7px; - margin-right: 7px; - cursor: pointer; + @include once { + display: block; + padding: 5px 0; + position: relative; + z-index: 0; + width: calc(100% - 14px); + margin-left: 7px; + margin-right: 7px; + cursor: pointer; + @include b(slider-marks) { + position: absolute; + top: 14px; + left: 0; + right: 0; + @include b(slider-mark) { + position: absolute; + transform: translateX(-50%); + } + } + @include m(with-mark) { + width: calc(100% - 24px); + margin: 8px 12px 32px 12px; + } + } &:hover { @include b(slider-rail) { background-color: map-get($--slider-rail-background-color, 'hover'); @@ -43,38 +59,41 @@ box-shadow: map-get($--slider-handle-box-shadow, 'hover'); } } - @include m(with-mark) { - margin: 8px 12px 32px 12px; - } @include b(slider-rail) { - width: 100%; + @include once { + width: 100%; + position: relative; + } height: $--slider-rail-height; background-color: map-get($--slider-rail-background-color, 'default'); - position: relative; transition: background-color .2s $default-cubic-bezier; border-radius: $--slider-rail-height / 2; @include e(fill) { - transition: background-color .3s $default-cubic-bezier; - background-color: map-get($--slider-rail-fill-background-color, 'default'); - border-radius: $--slider-rail-height / 2; - position: absolute; - top: 0; - bottom: 0; + @include once { + position: absolute; + top: 0; + bottom: 0; + border-radius: $--slider-rail-height / 2; + transition: background-color .3s $default-cubic-bezier; + } + background-color: map-get($--slider-rail-fill-background-color, 'default'); } } @include b(slider-handle) { - outline: none; - height: $--slider-handle-size; - width: $--slider-handle-size; - border-radius: $--slider-handle-size / 2; + @include once { + outline: none; + height: $--slider-handle-size; + width: $--slider-handle-size; + border-radius: $--slider-handle-size / 2; + transition: box-shadow .2s $default-cubic-bezier, background-color .3s $default-cubic-bezier; + position: absolute; + top: 0; + transform: translateX(-50%); + overflow: hidden; + cursor: pointer; + } background-color: $--slider-handle-background-color; box-shadow: map-get($--slider-handle-box-shadow, 'default'); - transition: box-shadow .2s $default-cubic-bezier, background-color .3s $default-cubic-bezier; - position: absolute; - top: 0; - transform: translateX(-50%); - overflow: hidden; - cursor: pointer; &:hover { box-shadow: map-get($--slider-handle-box-shadow, 'hover'); } @@ -85,42 +104,39 @@ box-shadow: map-get($--slider-handle-box-shadow, 'focus'); } } - @include b(slider-marks) { - position: absolute; - top: 14px; - left: 0; - right: 0; - @include b(slider-mark) { - position: absolute; - transform: translateX(-50%); - } - } @include b(slider-dots) { - position: absolute; - left: 0; - top: 50%; - right: 0; - @include b(slider-dot) { - transition: box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier; + @include once { position: absolute; - transform: translateX(-50%) translateY(-50%); - height: $--slider-dot-size; - width: $--slider-dot-size; - border-radius: $--slider-dot-size / 2; - overflow: hidden; + left: 0; + top: 50%; + right: 0; + } + @include b(slider-dot) { + @include once { + transition: box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier; + position: absolute; + transform: translateX(-50%) translateY(-50%); + height: $--slider-dot-size; + width: $--slider-dot-size; + border-radius: $--slider-dot-size / 2; + overflow: hidden; + } box-shadow: map-get($--slider-dot-box-shadow, 'default'); } } } @include b(slider-handle-indicator) { - @include fade-in-scale-up-transition(); + @include once { + @include fade-in-scale-up-transition(); + transform: scale(0.99999); + font-size: 14px; + padding: 8px 12px; + margin-bottom: 12px; + border-radius: 4px; + } color: $--slider-indicator-color; - font-size: 14px; - padding: 8px 12px; - margin-bottom: 12px; background-color: $--slider-indicator-background-color; box-shadow: $--slider-indicator-box-shadow; - border-radius: 4px; } } diff --git a/styles/themes/vars.scss b/styles/themes/vars.scss index b6ab8b74e..a868c41b4 100644 --- a/styles/themes/vars.scss +++ b/styles/themes/vars.scss @@ -265,7 +265,7 @@ $default-cubic-bezier: cubic-bezier(.4, 0, .2, 1); } &.#{$namespace}-#{$block}--transition-leave, &.#{$namespace}-#{$block}--transition-enter-to { opacity: 1; - transform: scale(1) $original-transform; + transform: scale(0.99999) $original-transform; } } From ec6f6b7125b6d8d48167234882207741f8687239 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Tue, 17 Dec 2019 22:17:26 +0800 Subject: [PATCH 9/9] refactor(scrollbar): support rail offset --- .../components/log/enUS/basic.md | 23 +++++++----------- packages/common/Log/index.js | 2 +- packages/common/Log/src/{main.vue => Log.vue} | 4 +--- packages/common/Scrollbar/src/main.vue | 24 +++++++++++++------ styles/Log.scss | 17 +++++++++---- 5 files changed, 40 insertions(+), 30 deletions(-) rename packages/common/Log/src/{main.vue => Log.vue} (95%) diff --git a/demo/documentation/components/log/enUS/basic.md b/demo/documentation/components/log/enUS/basic.md index 9aceb7005..8dd7b424b 100644 --- a/demo/documentation/components/log/enUS/basic.md +++ b/demo/documentation/components/log/enUS/basic.md @@ -9,8 +9,7 @@ :log="log" @reach-top="handleReachTop" @reach-bottom="handleReachBottom" - :bottom-loading="bottomLoading" - :top-loading="topLoading" + :loading="loading" trim />