Merge pull request #172 from Lzumikonata/textarea

fix(collapse): add model & update style

docs/en-us/components/collapse.md

@@ -2,9 +2,13 @@
 
 Display large amounts of text in collapsible sections. Commonly referred to as an accordion.
 
-<ex-code name="ex-collapse-basic"/></ex-code>
+<ex-code name="ex-collapse-basic"></ex-code>
 
-<ex-code name="ex-collapse-multiple"/></ex-code>
+<ex-code name="ex-collapse-multiple"></ex-code>
+
+<ex-code name="ex-collapse-subtitle"></ex-code>
+
+<ex-code name="ex-collapse-shadow"></ex-code>
 
 <ex-footer edit-link="https://github.com/zeit-ui/vue/edit/master/docs/en-us/components/collapse.md">
 
@@ -14,5 +18,7 @@ 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` | - | - |
+| **subtitle** | title's description | `string` | - | - |
 
 </ex-footer>

docs/examples/collapse/shadow.vue

@@ -0,0 +1,17 @@
+<template lang="pug">
+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.
+</template>
+
+<script>
+export default {
+  name: 'ex-collapse-shadow',
+
+  data: () => ({
+    value: '',
+  }),
+}
+</script>

docs/examples/collapse/subtitle.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+zi-collapse(v-model="value")
+  zi-collapse-item(title="Quantum Mechanics" subtitle="More description about <b>Quantum Mechanics</b>")
+    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" subtitle="More description about Classical Mechanics")
+    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.
+</template>
+
+<script>
+export default {
+  name: 'ex-collapse-subtitle',
+
+  data: () => ({
+    value: '',
+  }),
+}
+</script>

docs/zh-cn/components/collapse.md

@@ -2,9 +2,13 @@
 
 可折叠的显示大量文本，通常也被称作手风琴。
 
-<ex-code name="ex-collapse-basic"/></ex-code>
+<ex-code name="ex-collapse-basic"></ex-code>
 
-<ex-code name="ex-collapse-multiple"/></ex-code>
+<ex-code name="ex-collapse-multiple"></ex-code>
+
+<ex-code name="ex-collapse-subtitle"></ex-code>
+
+<ex-code name="ex-collapse-shadow"></ex-code>
 
 <ex-footer edit-link="https://github.com/zeit-ui/vue/edit/master/docs/en-us/components/collapse.md">
 
@@ -14,5 +18,7 @@
 | **accordion** | 手风琴模式 | `string | boolean` | - | `false` |
 | **title** | 用于显示的标题 | `string` | - | - |
 | **name** | 触发事件用于标识的字符 | `string | number` | - | - |
+| **shadow** | 阴影效果 | `boolean` | - | - |
+| **subtitle** | 标题详情 | `string` | - | - |
 
 </ex-footer>

packages/collapse/collapse-item.vue

@@ -1,11 +1,14 @@
 <template lang="pug">
-.zi-collapse
-  .zi-collapse-title(@click="clickHandler")
-    h3 {{ title }}
-    downIcon.icon(:class="{ reverse: model }")
+.zi-collapse(:class="{ shadow }")
+  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" style="padding: 0")
-      slot
+    .zi-collapse-content(v-if="model")
+      .content
+        slot
 </template>
 
 <script>
@@ -37,6 +40,8 @@ export default {
         return this.title
       },
     },
+    shadow: Boolean,
+    subtitle: String,
   },
 
   mounted() {

packages/collapse/collapse.styl

@@ -1,12 +1,17 @@
 .zi-collapse
   text-align left
   border-bottom 1px solid var(--accents-2)
+  padding var(--geist-gap) 0
 
   &:first-child
     border-top 1px solid var(--accents-2)
 
+  &.shadow
+    box-shadow var(--shadow-small)
+    border-color transparent
+    padding var(--geist-gap)
+
 .zi-collapse-title
-  min-height rem(75)
   width 100%
   display flex
   justify-content space-between
@@ -16,6 +21,7 @@
   text-transform none
   margin 0
   cursor pointer
+  line-height 1.5
 
   >.icon
     width rem(16)
@@ -26,7 +32,18 @@
     &.reverse
       transform rotateZ(180deg)
 
+.zi-collapse-subtitle
+  color var(--accents-5)
+
 .zi-collapse-content
   width 100%
-  padding-bottom rem(20)
   transition height 0.2s ease
+
+  .content
+    padding var(--geist-gap) 0
+
+    > *:first-child
+      margin-top 0
+
+    > *:last-child
+      margin-bottom 0

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,15 +67,15 @@ 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)
       })
       return current && (this.currentColor = current.color)
     },
 
     sortable() {
-      return this.colors.sort((a, b) => Number(b.value) - Number(a.value))
+      return this.colors.sort((a, b) => +b.value - +a.value)
     },
   },