progress-bar

ionic-team · Dec 15, 2023 · faed9d1 · faed9d1
1 parent d0aeb8f
commit faed9d1
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 73 deletions.
diff --git a/static/usage/v7/progress-bar/buffer/vue.md b/static/usage/v7/progress-bar/buffer/vue.md
@@ -3,36 +3,27 @@
   <ion-progress-bar :buffer="buffer" :value="progress"></ion-progress-bar>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonProgressBar } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { onMounted, ref } from 'vue';
 
-  export default defineComponent({
-    components: { IonProgressBar },
-    setup() {
-      let buffer = ref(0.06);
-      let progress = ref(0);
+  const buffer = ref(0.06);
+  const progress = ref(0);
 
-      return {
-        buffer,
-        progress,
-      };
-    },
-    mounted() {
-      setInterval(() => {
-        this.buffer += 0.06;
-        this.progress += 0.06;
+  onMounted(() => {
+    setInterval(() => {
+      buffer.value += 0.06;
+      progress.value += 0.06;
 
-        // Reset the progress bar when it reaches 100%
-        // to continuously show the demo
-        if (this.progress > 1) {
-          setTimeout(() => {
-            this.buffer = 0.06;
-            this.progress = 0;
-          }, 1000);
-        }
-      }, 1000);
-    },
+      // Reset the progress bar when it reaches 100%
+      // to continuously show the demo
+      if (progress.value > 1) {
+        setTimeout(() => {
+          buffer.value = 0.06;
+          progress.value = 0;
+        }, 1000);
+      }
+    }, 1000);
   });
 </script>
 ```
diff --git a/static/usage/v7/progress-bar/determinate/vue.md b/static/usage/v7/progress-bar/determinate/vue.md
@@ -3,32 +3,23 @@
   <ion-progress-bar :value="progress"></ion-progress-bar>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonProgressBar } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  import { onMounted, ref } from 'vue';
 
-  export default defineComponent({
-    components: { IonProgressBar },
-    setup() {
-      let progress = ref(0);
+  const progress = ref(0);
+  onMounted(() => {
+    setInterval(() => {
+      progress.value += 0.01;
 
-      return {
-        progress,
-      };
-    },
-    mounted() {
-      setInterval(() => {
-        this.progress += 0.01;
-
-        // Reset the progress bar when it reaches 100%
-        // to continuously show the demo
-        if (this.progress > 1) {
-          setTimeout(() => {
-            this.progress = 0;
-          }, 1000);
-        }
-      }, 50);
-    },
+      // Reset the progress bar when it reaches 100%
+      // to continuously show the demo
+      if (progress.value > 1) {
+        setTimeout(() => {
+          progress.value = 0;
+        }, 1000);
+      }
+    }, 50);
   });
 </script>
 ```
diff --git a/static/usage/v7/progress-bar/indeterminate/vue.md b/static/usage/v7/progress-bar/indeterminate/vue.md
@@ -3,12 +3,7 @@
   <ion-progress-bar type="indeterminate"></ion-progress-bar>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonProgressBar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonProgressBar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/progress-bar/theming/colors/vue.md b/static/usage/v7/progress-bar/theming/colors/vue.md
@@ -11,12 +11,7 @@
   <ion-progress-bar type="indeterminate" color="dark"></ion-progress-bar>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonProgressBar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonProgressBar },
-  });
 </script>
 ```
diff --git a/static/usage/v7/progress-bar/theming/css-properties/vue.md b/static/usage/v7/progress-bar/theming/css-properties/vue.md
@@ -4,13 +4,8 @@
   <ion-progress-bar type="indeterminate"></ion-progress-bar>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonProgressBar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonProgressBar },
-  });
 </script>
 
 <style scoped>

diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md
@@ -4,13 +4,8 @@
   <ion-progress-bar type="indeterminate"></ion-progress-bar>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import { IonProgressBar } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonProgressBar },
-  });
 </script>
 
 <style scoped>