From f72b9c445228404cb6ac66925288386fa8a60f91 Mon Sep 17 00:00:00 2001
From: wuke <504048655@qq.com>
Date: Fri, 27 Mar 2020 02:54:06 +0800
Subject: [PATCH 1/3] fix(progress): optimize code style
---
packages/progress/progress.vue | 16 ++++++++--------
1 file changed, 8 insertions(+), 8 deletions(-)
diff --git a/packages/progress/progress.vue b/packages/progress/progress.vue
index c3cbaa36..df4d376c 100644
--- a/packages/progress/progress.vue
+++ b/packages/progress/progress.vue
@@ -41,15 +41,15 @@ export default {
computed: {
privateMax() {
- if (Number.isNaN(Number(this.max))) throw new Error('error about max')
- return Number(this.max)
+ if (Number.isNaN(+this.max)) throw new Error('[Progress Error]max must be Number type')
+ return +this.max
},
privateValue() {
- if (Number.isNaN(Number(this.value))) throw new Error('error about value')
- let value = Number(this.value)
- if (value < 0) value = 0
- if (value > this.privateMax) value = this.privateMax
+ if (Number.isNaN(+this.value)) throw new Error('[Progress Error]value must be Number type')
+ const value = +this.value
+ if (value < 0) return 0
+ if (value > this.privateMax) return this.privateMax
return value
},
@@ -67,7 +67,7 @@ export default {
background() {
const current = this.sortable.find(item => {
- let value = Number(item.value)
+ let value = +item.value
if (value > this.privateMax) value = this.privateMax
return this.privatePercentage >= Math.round(value / this.privateMax * 100)
})
@@ -75,7 +75,7 @@ export default {
},
sortable() {
- return this.colors.sort((a, b) => Number(b.value) - Number(a.value))
+ return this.colors.sort((a, b) => +b.value - +a.value)
},
},
From 88b95c081074a9af2e3d7a6e01bf0ac38c09e764 Mon Sep 17 00:00:00 2001
From: wuke <504048655@qq.com>
Date: Sun, 29 Mar 2020 08:03:20 +0800
Subject: [PATCH 2/3] fix(collapse): add shadow & update style
fix(collapse): update shadow type
---
docs/en-us/components/collapse.md | 7 +++++--
docs/examples/collapse/shadow.vue | 22 ++++++++++++++++++++++
docs/zh-cn/components/collapse.md | 7 +++++--
packages/collapse/collapse-item.vue | 8 +++++---
packages/collapse/collapse.styl | 18 ++++++++++++++++--
5 files changed, 53 insertions(+), 9 deletions(-)
create mode 100644 docs/examples/collapse/shadow.vue
diff --git a/docs/en-us/components/collapse.md b/docs/en-us/components/collapse.md
index 86f95cc1..4e5ca8aa 100644
--- a/docs/en-us/components/collapse.md
+++ b/docs/en-us/components/collapse.md
@@ -2,9 +2,11 @@
Display large amounts of text in collapsible sections. Commonly referred to as an accordion.
-
+
-
+
+
+
@@ -14,5 +16,6 @@ Display large amounts of text in collapsible sections. Commonly referred to as a
| **accordion** | accordion mode | `string | boolean` | `true` / `false` | `false` |
| **title** | collapse-item's title | `string` | - | - |
| **name** | collapse-item's name | `string | number` | - | - |
+| **shadow** | shadow effect | `boolean` | - | - |
diff --git a/docs/examples/collapse/shadow.vue b/docs/examples/collapse/shadow.vue
new file mode 100644
index 00000000..6021643e
--- /dev/null
+++ b/docs/examples/collapse/shadow.vue
@@ -0,0 +1,22 @@
+
+zi-collapse(v-model="value" accordion)
+ zi-collapse-item(title="Quantum Mechanics" shadow)
+ p Quantum mechanics is the theory of describing micro
+ |matter, and together with relativity, it is regarded
+ |as the two basic pillars of modern physics.
+ zi-collapse-item(title="Classical Mechanics" shadow)
+ p The general term of mechanics before the emergence
+ |of quantum mechanics. It studies the laws of motion
+ |of macro objects, including classical theory and
+ |special relativity based on Newton's laws of motion.
+
+
+
diff --git a/docs/zh-cn/components/collapse.md b/docs/zh-cn/components/collapse.md
index ccd131bc..7d221675 100644
--- a/docs/zh-cn/components/collapse.md
+++ b/docs/zh-cn/components/collapse.md
@@ -2,9 +2,11 @@
可折叠的显示大量文本，通常也被称作手风琴。
-
+
-
+
+
+
@@ -14,5 +16,6 @@
| **accordion** | 手风琴模式 | `string | boolean` | - | `false` |
| **title** | 用于显示的标题 | `string` | - | - |
| **name** | 触发事件用于标识的字符 | `string | number` | - | - |
+| **shadow** | 阴影效果 | `boolean` | - | - |
diff --git a/packages/collapse/collapse-item.vue b/packages/collapse/collapse-item.vue
index 55782088..a7aee361 100644
--- a/packages/collapse/collapse-item.vue
+++ b/packages/collapse/collapse-item.vue
@@ -1,11 +1,12 @@
-.zi-collapse
+.zi-collapse(:class="{ shadow }")
.zi-collapse-title(@click="clickHandler")
h3 {{ title }}
downIcon.icon(:class="{ reverse: model }")
zi-transition-expand
- .zi-collapse-content(v-if="model" style="padding: 0")
- slot
+ .zi-collapse-content(v-if="model")
+ .content
+ slot
diff --git a/docs/zh-cn/components/collapse.md b/docs/zh-cn/components/collapse.md
index 7d221675..262bb023 100644
--- a/docs/zh-cn/components/collapse.md
+++ b/docs/zh-cn/components/collapse.md
@@ -6,6 +6,8 @@
+
+
@@ -17,5 +19,6 @@
| **title** | 用于显示的标题 | `string` | - | - |
| **name** | 触发事件用于标识的字符 | `string | number` | - | - |
| **shadow** | 阴影效果 | `boolean` | - | - |
+| **subtitle** | 标题详情 | `string` | - | - |
diff --git a/packages/collapse/collapse-item.vue b/packages/collapse/collapse-item.vue
index a7aee361..450553a2 100644
--- a/packages/collapse/collapse-item.vue
+++ b/packages/collapse/collapse-item.vue
@@ -1,8 +1,10 @@
.zi-collapse(:class="{ shadow }")
- .zi-collapse-title(@click="clickHandler")
- h3 {{ title }}
- downIcon.icon(:class="{ reverse: model }")
+ div
+ .zi-collapse-title(@click="clickHandler")
+ h3 {{ title }}
+ downIcon.icon(:class="{ reverse: model }")
+ .zi-collapse-subtitle(v-html="subtitle")
zi-transition-expand
.zi-collapse-content(v-if="model")
.content
@@ -39,6 +41,7 @@ export default {
},
},
shadow: Boolean,
+ subtitle: String,
},
mounted() {
diff --git a/packages/collapse/collapse.styl b/packages/collapse/collapse.styl
index 5b9d92b3..7bf943e8 100644
--- a/packages/collapse/collapse.styl
+++ b/packages/collapse/collapse.styl
@@ -32,6 +32,9 @@
&.reverse
transform rotateZ(180deg)
+.zi-collapse-subtitle
+ color var(--accents-5)
+
.zi-collapse-content
width 100%
transition height 0.2s ease