feat(QCircularProgress): (backport from Qv2) New Boolean prop -> roun…

…ded (quasarframework#14426)
pdanpdan · Sep 21, 2022 · 2c13300 · 2c13300
1 parent 916e238
commit 2c13300
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 3 deletions.
diff --git a/docs/src/examples/QCircularProgress/Indeterminate.vue b/docs/src/examples/QCircularProgress/Indeterminate.vue
@@ -2,6 +2,7 @@
   <div class="q-pa-md flex flex-center">
     <q-circular-progress
       indeterminate
+      rounded
       size="50px"
       color="lime"
       class="q-ma-md"
@@ -30,6 +31,7 @@
       indeterminate
       size="50px"
       :thickness="0.22"
+      rounded
       color="lime"
       track-color="grey-3"
       class="q-ma-md"

diff --git a/docs/src/examples/QCircularProgress/RoundedStyle.vue b/docs/src/examples/QCircularProgress/RoundedStyle.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="q-pa-md flex flex-center">
+    <q-circular-progress
+      rounded
+      :value="value"
+      size="50px"
+      color="orange"
+      class="q-ma-md"
+    />
+
+    <q-circular-progress
+      rounded
+      :value="value"
+      size="90px"
+      :thickness="0.2"
+      color="orange"
+      center-color="grey-8"
+      track-color="transparent"
+      class="q-ma-md"
+    />
+
+    <q-circular-progress
+      rounded
+      :value="value"
+      size="50px"
+      :thickness="0.22"
+      color="orange"
+      track-color="grey-3"
+      class="q-ma-md"
+    />
+
+    <q-circular-progress
+      rounded
+      :value="value"
+      size="40px"
+      :thickness="0.4"
+      color="orange"
+      track-color="grey-3"
+      center-color="grey-8"
+      class="q-ma-md"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      value: 61
+    }
+  }
+}
+</script>
diff --git a/docs/src/pages/vue-components/circular-progress.md b/docs/src/pages/vue-components/circular-progress.md
@@ -32,4 +32,6 @@ In the example below, `show-value` property also enables the default slot, so yo
 
 <doc-example title="Indeterminate state" file="QCircularProgress/Indeterminate" />
 
+<doc-example title="Rounded arc of progress (v1.20.2+)" file="QCircularProgress/RoundedStyle" />
+
 <doc-example title="Standard sizes" file="QCircularProgress/StandardSizes" />
diff --git a/ui/dev/src/pages/components/circular-progress.vue b/ui/dev/src/pages/components/circular-progress.vue
@@ -15,6 +15,7 @@
         <q-toggle v-model="reverse" label="Reverse" />
         <q-toggle v-model="showValue" label="Show Value" />
         <q-toggle v-model="indeterminate" label="Indeterminate" />
+        <q-toggle v-model="rounded" label="Rounded" />
       </div>
       <div>
         <q-btn @click="value = 10" label="Set value to 10" flat color="primary" class="q-mr-sm" />
@@ -29,6 +30,7 @@
         size="100px"
         :show-value="showValue"
         :indeterminate="indeterminate"
+        :rounded="rounded"
       />
 
       <q-circular-progress
@@ -42,6 +44,7 @@
         :reverse="reverse"
         :show-value="showValue"
         :indeterminate="indeterminate"
+        :rounded="rounded"
         color="orange"
         center-color="grey-8"
         track-color="transparent"
@@ -74,6 +77,23 @@
         :reverse="reverse"
         :show-value="showValue"
         :indeterminate="indeterminate"
+        :rounded="rounded"
+        color="orange"
+      />
+
+      <q-circular-progress
+        class="q-ma-sm"
+        :value="value"
+        :size="size + 'px'"
+        :thickness="thickness"
+        :angle="angle"
+        :min="range.min"
+        :max="range.max"
+        :reverse="reverse"
+        :show-value="showValue"
+        :indeterminate="indeterminate"
+        track-color="grey-4"
+        :rounded="rounded"
         color="orange"
       />
 
@@ -89,6 +109,7 @@
         font-size="50px"
         :show-value="showValue"
         :indeterminate="indeterminate"
+        :rounded="rounded"
         color="orange"
         text-color="white"
         center-color="grey-8"
@@ -111,7 +132,8 @@ export default {
       },
       showValue: true,
       reverse: false,
-      indeterminate: false
+      indeterminate: false,
+      rounded: false
     }
   },
   methods: {

diff --git a/ui/src/components/circular-progress/QCircularProgress.js b/ui/src/components/circular-progress/QCircularProgress.js
@@ -36,6 +36,7 @@ export default Vue.extend({
     trackColor: String,
 
     fontSize: String,
+    rounded: Boolean,
 
     // ratio
     thickness: {
@@ -105,7 +106,7 @@ export default Vue.extend({
   },
 
   methods: {
-    __getCircle (h, { thickness, offset, color, cls }) {
+    __getCircle (h, { thickness, offset, color, cls, rounded }) {
       return h('circle', {
         staticClass: 'q-circular-progress__' + cls,
         class: color !== void 0 ? `text-${color}` : null,
@@ -116,6 +117,7 @@ export default Vue.extend({
           'stroke-width': thickness,
           'stroke-dasharray': strokeDashArray,
           'stroke-dashoffset': offset,
+          'stroke-linecap': rounded,
           cx: this.viewBox,
           cy: this.viewBox,
           r: radius
@@ -154,7 +156,8 @@ export default Vue.extend({
         cls: 'circle',
         thickness: this.strokeWidth,
         offset: this.strokeDashOffset,
-        color: this.color
+        color: this.color,
+        rounded: this.rounded === true ? 'round' : void 0
       })
     )
 

diff --git a/ui/src/components/circular-progress/QCircularProgress.json b/ui/src/components/circular-progress/QCircularProgress.json
@@ -57,6 +57,13 @@
       "category": "style"
     },
 
+    "rounded": {
+      "type": "Boolean",
+      "desc": "Rounding the arc of progress",
+      "category": "style",
+      "addedIn": "v1.20.2"
+    },
+
     "thickness": {
       "type": "Number",
       "default": 0.2,