From 325a96ddf79ea2f99bd06326545dc97e38dbc530 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sat, 12 Oct 2019 00:31:45 +0800
Subject: [PATCH] feat(collapse): light theme
---
packages/common/Checkbox/src/main.vue | 21 +---
packages/common/Collapse/src/CollapseItem.vue | 31 ++++--
packages/common/Collapse/src/main.vue | 56 ++++------
packages/mixins/registerable.js | 35 ++++++
styles/Collapse.scss | 102 ++++++++++--------
styles/NimbusServiceLayout.scss | 13 +--
styles/themes/vars.scss | 4 +-
7 files changed, 153 insertions(+), 109 deletions(-)
create mode 100644 packages/mixins/registerable.js
diff --git a/packages/common/Checkbox/src/main.vue b/packages/common/Checkbox/src/main.vue
index dea7598a4..3d4f738c3 100644
--- a/packages/common/Checkbox/src/main.vue
+++ b/packages/common/Checkbox/src/main.vue
@@ -38,6 +38,7 @@ import themeable from '../../../mixins/themeable'
import hollowoutable from '../../../mixins/hollowoutable'
import CheckMark from './CheckMark'
import LineMark from './LineMark'
+import registerable from '../../../mixins/registerable'
export default {
name: 'NCheckbox',
@@ -53,7 +54,8 @@ export default {
mixins: [
withapp,
themeable,
- hollowoutable
+ hollowoutable,
+ registerable('NCheckboxGroup', 'collectedCheckboxValues')
],
model: {
prop: 'checked',
@@ -89,23 +91,6 @@ export default {
}
}
},
- watch: {
- value (value, oldValue) {
- if (this.NCheckboxGroup) {
- this.registerValue(value, oldValue)
- }
- }
- },
- created () {
- if (this.NCheckboxGroup) {
- this.registerValue(this.value)
- }
- },
- beforeDestroy () {
- if (this.NCheckboxGroup) {
- this.registerValue(undefined, this.value)
- }
- },
methods: {
registerValue (value = undefined, oldValue = undefined) {
if (this.NCheckboxGroup) {
diff --git a/packages/common/Collapse/src/CollapseItem.vue b/packages/common/Collapse/src/CollapseItem.vue
index 4910d6a49..745fa90d9 100644
--- a/packages/common/Collapse/src/CollapseItem.vue
+++ b/packages/common/Collapse/src/CollapseItem.vue
@@ -2,12 +2,15 @@
{{ title }}
@@ -18,7 +21,7 @@
@leave="handleLeave"
>
@@ -35,12 +38,19 @@
diff --git a/packages/mixins/registerable.js b/packages/mixins/registerable.js
new file mode 100644
index 000000000..a7ed1a0dd
--- /dev/null
+++ b/packages/mixins/registerable.js
@@ -0,0 +1,35 @@
+export default function (
+ inject,
+ collectionProperty,
+ registerProperty = 'value'
+) {
+ return {
+ watch: {
+ [registerProperty]: function (value, oldValue) {
+ if (this[inject]) {
+ this.registerValue(value, oldValue)
+ }
+ }
+ },
+ created () {
+ if (this[inject]) {
+ this.registerValue(this[registerProperty])
+ }
+ },
+ beforeDestroy () {
+ if (this[inject]) {
+ this.registerValue(undefined, this[registerProperty])
+ }
+ },
+ methods: {
+ registerValue (value = undefined, oldValue = undefined) {
+ if (this[inject]) {
+ const values = new Set(this[inject][collectionProperty])
+ if (oldValue !== undefined) values.delete(oldValue)
+ if (value !== undefined) values.add(value)
+ this[inject][collectionProperty] = Array.from(values)
+ }
+ }
+ }
+ }
+}
diff --git a/styles/Collapse.scss b/styles/Collapse.scss
index 7e35d6482..c36ca6191 100644
--- a/styles/Collapse.scss
+++ b/styles/Collapse.scss
@@ -5,48 +5,66 @@
width: 100%;
}
-@include b(collapse-item) {
- overflow: hidden;
- font-size: 14px;
- border-bottom: 1px solid rgba(255, 255, 255, 0.2);
- padding-top: 16px;
- &:first-child {
- padding-top: 0px;
- }
- &:last-child {
- border-bottom: none;
- }
- @include b(collapse-item) {
- margin-left: 18px;
- }
- &.n-collapse-item--active {
- .n-collapse-item__title {
- .n-icon {
- transform: rotate(90deg);
+@include themes-mixin {
+ @include b(collapse) {
+ @include b(collapse-item) {
+ @include once {
+ overflow: hidden;
+ font-size: 14px;
+ transition: border-color .3s $default-cubic-bezier;
+ margin-top: 16px;
+ &:first-child {
+ margin-top: 0px;
+ }
+ &:first-child > {
+ @include e(title) {
+ padding-top: 0px;
+ }
+ }
+ @include b(collapse-item) {
+ margin-left: 32px;
+ }
+ @include e(content-wrapper) {
+ @include fade-in-height-expand-transition($duration: .15s);
+ overflow: hidden;
+ }
+ @include m(active) {
+ @include e(title) {
+ @include m(active) {
+ @include b(icon) {
+ transform: rotate(90deg);
+ }
+ }
+ }
+ }
+ }
+ &:not(:first-child) {
+ border-top: 1px solid $--n-border-color;
+ }
+ @include e(title) {
+ @include once {
+ transition: color .3s $default-cubic-bezier;
+ position: relative;
+ cursor: pointer;
+ margin-left: 18px;
+ padding: 16px 0 0 0;
+ @include b(icon) {
+ transition: transform .15s $default-cubic-bezier;
+ font-size: 16px;
+ position: absolute;
+ left: -18px;
+ bottom: 0px;
+ }
+ }
+ color: $--n-text-color;
+ }
+ @include e(content-inner) {
+ @include once {
+ transition: color .3s $default-cubic-bezier;
+ padding-top: 16px;
+ }
+ color: $--n-secondary-text-color;
}
}
}
- .n-collapse-item__title {
- position: relative;
- cursor: pointer;
- .n-icon {
- transition: transform .3s $default-cubic-bezier;
- font-size: 16px;
- position: absolute;
- left: -18px;
- bottom: 0;
- }
- color: rgba(233, 233, 236, 1);
- margin-left: 18px;
- margin-bottom: 16px;
- }
- .n-collapse-item__content-wrapper {
- @include fade-in-height-expand-transition($duration: .15s);
- overflow: hidden;
- // transition: max-height .3s $default-cubic-bezier;
- }
- .n-collapse-item__content-inner {
- color: rgba(233, 233, 236, .7);
- padding-bottom: 16px;
- }
-}
\ No newline at end of file
+}
diff --git a/styles/NimbusServiceLayout.scss b/styles/NimbusServiceLayout.scss
index a863fca1b..734a369b5 100644
--- a/styles/NimbusServiceLayout.scss
+++ b/styles/NimbusServiceLayout.scss
@@ -154,9 +154,6 @@ $layout-nav-height: 64px;
}
}
@include m(is-group-header) {
- // span {
- // transition: color 0.3s $default-cubic-bezier;
- // }
&::after { // down arrow
content: '';
height: 6px;
@@ -170,11 +167,11 @@ $layout-nav-height: 64px;
transform-origin: 25% 25%;
transition: transform 0.3s $default-cubic-bezier, opacity 0.3s $default-cubic-bezier;
}
- @include m(group-item-is-choosed) {
- span {
- color: #63E2B7;
- }
- }
+ // @include m(group-item-is-choosed) {
+ // span {
+ // color: #63E2B7;
+ // }
+ // }
@include m(collapsed) {
&::after {
transform: rotate(225deg) ;
diff --git a/styles/themes/vars.scss b/styles/themes/vars.scss
index 3fc7ed8a3..0092b5136 100644
--- a/styles/themes/vars.scss
+++ b/styles/themes/vars.scss
@@ -361,11 +361,11 @@ $default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
}
&.#{$namespace}-#{$block}-leave-active {
overflow: hidden;
- transition: max-height $duration $default-cubic-bezier, opacity $duration $slow-out-cubic-bezier;
+ transition: max-height $duration $default-cubic-bezier, opacity $duration $fast-in-cubic-bezier;
}
&.#{$namespace}-#{$block}-enter-active {
overflow: hidden;
- transition: max-height $duration $default-cubic-bezier, opacity $duration $fast-in-cubic-bezier;
+ transition: max-height $duration $default-cubic-bezier, opacity $duration $slow-out-cubic-bezier;
}
}