refactor(linear-progress): Use open prop for showing and hiding linear

progress BREAKING CHANGES: Public component methods for open / close no longer exist. Please change your templates to use v-model instead.
matsp · Apr 17, 2018 · 1db78b1 · 1db78b1
1 parent 25ca33b
commit 1db78b1
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 47 deletions.
diff --git a/components/linear-progress/LinearProgress.vue b/components/linear-progress/LinearProgress.vue
@@ -23,15 +23,15 @@ export default {
   props: {
     open: {
       type: Boolean,
-      required: false
+      default: false
     },
     indeterminate: {
       type: Boolean,
-      required: false
+      default: false
     },
     reverse: {
       type: Boolean,
-      required: false
+      default: false
     },
     progress: {
       type: Number,
@@ -76,14 +76,6 @@ export default {
   },
   beforeDestroy () {
     this.mdcLinearProgress.destroy()
-  },
-  methods: {
-    show () {
-      this.mdcLinearProgress.open()
-    },
-    hide () {
-      this.mdcLinearProgress.close()
-    }
   }
 }
 </script>
diff --git a/components/linear-progress/README.md b/components/linear-progress/README.md
@@ -3,31 +3,33 @@
 ### Markup
 
 ```html
-<m-linear-progress ref="progress" open :progress="0.5" :buffer="0.5" indeterminate />
+<m-linear-progress
+  :open="isProgressOpen"
+  :progress="0.5"
+  :buffer="0.5"
+  indeterminate/>
 ```
 
 ### Script 
 
 ```javascript
-this.$refs.progress.show()
-this.$refs.progress.hide()
+data () {
+  return {
+    isProgressOpen: true
+  }
+}
 ```
 
-### Props & methods
+### Props
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
-| open | Boolean | - | false | initial state |
-| indeterminate | Boolean | - | false | indeterminate state |
-| reverse | Boolean | - | false | reverse direction of progress |
+| open | Boolean | false | - | linear progress starts in open state |
+| indeterminate | Boolean | false | - | indeterminate state |
+| reverse | Boolean | false | - | reverse direction of progress |
 | progress | Number | - | false | progress value between 0 and 1 |
 | buffer | Number | - | false | buffer value between 0 and 1 |
 
-| Method | Description |
-|--------|-------------|
-| show | show the progress |
-| hide | hide the progress |
-
 ### Reference
 
-- https://github.com/material-components/material-components-web/tree/master/packages/mdc-linear-progress
+- https://github.com/material-components/material-components-web/tree/master/packages/mdc-linear-progress
diff --git a/demo/views/LinearProgressView.vue b/demo/views/LinearProgressView.vue
@@ -5,27 +5,17 @@
       <m-layout-grid-inner>
         <m-layout-grid-cell :span="4">
           <m-linear-progress
-            ref="progress"
-            open
+            :open="isProgressOpen"
             :progress="0.5"
             :buffer="0.5"
             indeterminate/>
         </m-layout-grid-cell>
         <m-layout-grid-cell :span="8"/>
         <m-layout-grid-cell :span="1">
           <m-button
-            @click="stopProgress"
+            @click="isProgressOpen = !isProgressOpen"
             raised
-            interactive>
-            hide
-          </m-button>
-        </m-layout-grid-cell>
-        <m-layout-grid-cell :span="1">
-          <m-button
-            @click="startProgress"
-            stroked>
-            show
-          </m-button>
+            interactive>toggle</m-button>
         </m-layout-grid-cell>
       </m-layout-grid-inner>
     </m-layout-grid-cell>
@@ -43,17 +33,9 @@ Vue.use(LinearProgress)
 export default {
   data () {
     return {
+      isProgressOpen: true
     }
-  },
-  methods: {
-    stopProgress () {
-      this.$refs.progress.hide()
-    },
-    startProgress () {
-      this.$refs.progress.show()
-    }
-  }
-}
+  }}
 </script>
 
 <style lang="scss">