From 9a26674f365799d03bd770a1b262d8f7b2d9d65b Mon Sep 17 00:00:00 2001
From: Maxim Bazuev <bazuka5801@mail.ru>
Date: Thu, 3 Aug 2023 14:47:54 +0300
Subject: [PATCH 1/3] feat(QCircularProgress): border of the rounded arc

---
 .../src/examples/QCircularProgress/Border.vue | 61 +++++++++++++++++++
 .../pages/vue-components/circular-progress.md |  2 +
 .../pages/components/circular-progress.vue    | 21 ++++++-
 .../circular-progress/QCircularProgress.js    | 14 ++++-
 .../circular-progress/QCircularProgress.json  | 12 ++++
 .../use-circular-progress.js                  |  5 ++
 6 files changed, 113 insertions(+), 2 deletions(-)
 create mode 100644 docs/src/examples/QCircularProgress/Border.vue

diff --git a/docs/src/examples/QCircularProgress/Border.vue b/docs/src/examples/QCircularProgress/Border.vue
new file mode 100644
index 00000000000..c318e5b636f
--- /dev/null
+++ b/docs/src/examples/QCircularProgress/Border.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="q-pa-md flex flex-center">
+    <q-circular-progress
+      rounded
+      :value="value"
+      size="100px"
+      color="orange"
+      class="q-ma-md"
+      :borderWidth="2"
+      borderColor="blue"
+    />
+
+    <q-circular-progress
+      rounded
+      :value="value"
+      size="130px"
+      :thickness="0.2"
+      color="orange"
+      center-color="grey-8"
+      track-color="transparent"
+      class="q-ma-md"
+      :borderWidth="4"
+      borderColor="blue"
+    />
+
+    <q-circular-progress
+      rounded
+      :value="value"
+      size="150px"
+      :thickness="0.22"
+      color="orange"
+      track-color="grey-3"
+      class="q-ma-md"
+      :borderWidth="4"
+      borderColor="blue"
+    />
+
+    <q-circular-progress
+      rounded
+      :value="value"
+      size="190px"
+      :thickness="0.4"
+      color="orange"
+      track-color="grey-3"
+      center-color="grey-8"
+      class="q-ma-md"
+      :borderWidth="7"
+      borderColor="blue"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  setup () {
+    return {
+      value: 61
+    }
+  }
+}
+</script>
diff --git a/docs/src/pages/vue-components/circular-progress.md b/docs/src/pages/vue-components/circular-progress.md
index fca2436534e..a7150cea6af 100644
--- a/docs/src/pages/vue-components/circular-progress.md
+++ b/docs/src/pages/vue-components/circular-progress.md
@@ -35,4 +35,6 @@ In the example below, `show-value` property also enables the default slot, so yo
 
 <doc-example title="Rounded arc of progress (v2.8.4+)" file="RoundedStyle" />
 
+<doc-example title="Border arc of progress" file="Border" />
+
 <doc-example title="Standard sizes" file="StandardSizes" />
diff --git a/ui/dev/src/pages/components/circular-progress.vue b/ui/dev/src/pages/components/circular-progress.vue
index 8d8b190a303..1c79ef276d2 100644
--- a/ui/dev/src/pages/components/circular-progress.vue
+++ b/ui/dev/src/pages/components/circular-progress.vue
@@ -11,6 +11,11 @@
       <q-slider v-model="angle" :min="0" :max="360" label />
       <div>Min/Max</div>
       <q-range v-model="range" :min="0" :max="360" label />
+
+      <div>Border Width</div>
+      <q-slider v-model="borderWidth" :min="0" :max="10" :step="0.1" label />
+      <div>Border Color</div>
+      <q-input v-model="borderColor"  />
       <div>
         <q-toggle v-model="reverse" label="Reverse" />
         <q-toggle v-model="showValue" label="Show Value" />
@@ -31,6 +36,8 @@
         :show-value="showValue"
         :indeterminate="indeterminate"
         :rounded="rounded"
+        :borderWidth="borderWidth"
+        :borderColor="borderColor"
       />
 
       <q-circular-progress
@@ -45,6 +52,8 @@
         :show-value="showValue"
         :indeterminate="indeterminate"
         :rounded="rounded"
+        :borderWidth="borderWidth"
+        :borderColor="borderColor"
         color="orange"
         center-color="grey-8"
         track-color="transparent"
@@ -61,6 +70,8 @@
         :reverse="reverse"
         :show-value="showValue"
         :indeterminate="indeterminate"
+        :borderWidth="borderWidth"
+        :borderColor="borderColor"
         color="grey-8"
         text-color="white"
         track-color="orange"
@@ -78,6 +89,8 @@
         :show-value="showValue"
         :indeterminate="indeterminate"
         :rounded="rounded"
+        :borderWidth="borderWidth"
+        :borderColor="borderColor"
         color="orange"
       />
 
@@ -92,6 +105,8 @@
         :reverse="reverse"
         :show-value="showValue"
         :indeterminate="indeterminate"
+        :borderWidth="borderWidth"
+        :borderColor="borderColor"
         track-color="grey-4"
         :rounded="rounded"
         color="orange"
@@ -110,6 +125,8 @@
         :show-value="showValue"
         :indeterminate="indeterminate"
         :rounded="rounded"
+        :borderWidth="borderWidth"
+        :borderColor="borderColor"
         color="orange"
         text-color="white"
         center-color="grey-8"
@@ -134,7 +151,9 @@ export default {
       showValue: true,
       reverse: false,
       indeterminate: false,
-      rounded: false
+      rounded: false,
+      borderWidth: 3,
+      borderColor: 'secondary'
     }
   },
   methods: {
diff --git a/ui/src/components/circular-progress/QCircularProgress.js b/ui/src/components/circular-progress/QCircularProgress.js
index 34298130739..2641fec6e21 100644
--- a/ui/src/components/circular-progress/QCircularProgress.js
+++ b/ui/src/components/circular-progress/QCircularProgress.js
@@ -104,10 +104,22 @@ export default createComponent({
         })
       )
 
+      if (props.rounded === true && props.borderWidth > 0) {
+        svgChild.push(
+          getCircle({
+            cls: 'circle',
+            thickness: strokeWidth.value,
+            offset: strokeDashOffset.value,
+            color: props.borderColor,
+            rounded: props.rounded === true ? 'round' : void 0
+          })
+        )
+      }
+
       svgChild.push(
         getCircle({
           cls: 'circle',
-          thickness: strokeWidth.value,
+          thickness: strokeWidth.value - props.borderWidth,
           offset: strokeDashOffset.value,
           color: props.color,
           rounded: props.rounded === true ? 'round' : void 0
diff --git a/ui/src/components/circular-progress/QCircularProgress.json b/ui/src/components/circular-progress/QCircularProgress.json
index b5af68df5a3..5d35dca19b5 100644
--- a/ui/src/components/circular-progress/QCircularProgress.json
+++ b/ui/src/components/circular-progress/QCircularProgress.json
@@ -57,6 +57,18 @@
       "addedIn": "v2.8.4"
     },
 
+    "borderWidth": {
+      "type": "Number",
+      "desc": "Width of the progress arc boundary",
+      "default": 0,
+      "category": "style"
+    },
+
+    "borderColor": {
+      "extends": "color",
+      "desc": "Color name for the the arc progress boundary from the Quasar Color Palette"
+    },
+
     "thickness": {
       "type": "Number",
       "default": 0.2,
diff --git a/ui/src/components/circular-progress/use-circular-progress.js b/ui/src/components/circular-progress/use-circular-progress.js
index fde698f5f2a..a3792e5cdce 100644
--- a/ui/src/components/circular-progress/use-circular-progress.js
+++ b/ui/src/components/circular-progress/use-circular-progress.js
@@ -19,6 +19,11 @@ export const useCircularCommonProps = {
 
   fontSize: String,
   rounded: Boolean,
+  borderWidth: {
+    type: Number,
+    default: 0
+  },
+  borderColor: String,
 
   // ratio
   thickness: {

From fd2a5d6c988cdb489b9216268e99967b3175b03d Mon Sep 17 00:00:00 2001
From: Maxim Bazuev <bazuka5801@mail.ru>
Date: Thu, 3 Aug 2023 14:52:47 +0300
Subject: [PATCH 2/3] chore(QCircularProgress): reset border width

---
 ui/dev/src/pages/components/circular-progress.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/dev/src/pages/components/circular-progress.vue b/ui/dev/src/pages/components/circular-progress.vue
index 1c79ef276d2..ff1ec7b0b7b 100644
--- a/ui/dev/src/pages/components/circular-progress.vue
+++ b/ui/dev/src/pages/components/circular-progress.vue
@@ -152,7 +152,7 @@ export default {
       reverse: false,
       indeterminate: false,
       rounded: false,
-      borderWidth: 3,
+      borderWidth: 0,
       borderColor: 'secondary'
     }
   },

From a70b4f3516cc3cb484495c2a8416385046e672f3 Mon Sep 17 00:00:00 2001
From: Maxim Bazuev <bazuka5801@mail.ru>
Date: Thu, 3 Aug 2023 15:08:20 +0300
Subject: [PATCH 3/3] fix(QCircularProgress): works only in rounded

---
 ui/src/components/circular-progress/QCircularProgress.js   | 5 +++--
 ui/src/components/circular-progress/QCircularProgress.json | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/circular-progress/QCircularProgress.js b/ui/src/components/circular-progress/QCircularProgress.js
index 2641fec6e21..7182337434a 100644
--- a/ui/src/components/circular-progress/QCircularProgress.js
+++ b/ui/src/components/circular-progress/QCircularProgress.js
@@ -65,6 +65,7 @@ export default createComponent({
     ))
 
     const strokeWidth = computed(() => props.thickness / 2 * viewBox.value)
+    const borderWidth = computed(() => ((props.borderWidth > 0 && props.rounded === true) ? props.borderWidth : 0))
 
     function getCircle ({ thickness, offset, color, cls, rounded }) {
       return h('circle', {
@@ -104,7 +105,7 @@ export default createComponent({
         })
       )
 
-      if (props.rounded === true && props.borderWidth > 0) {
+      if (borderWidth.value > 0) {
         svgChild.push(
           getCircle({
             cls: 'circle',
@@ -119,7 +120,7 @@ export default createComponent({
       svgChild.push(
         getCircle({
           cls: 'circle',
-          thickness: strokeWidth.value - props.borderWidth,
+          thickness: strokeWidth.value - borderWidth.value,
           offset: strokeDashOffset.value,
           color: props.color,
           rounded: props.rounded === true ? 'round' : void 0
diff --git a/ui/src/components/circular-progress/QCircularProgress.json b/ui/src/components/circular-progress/QCircularProgress.json
index 5d35dca19b5..08e7e931082 100644
--- a/ui/src/components/circular-progress/QCircularProgress.json
+++ b/ui/src/components/circular-progress/QCircularProgress.json
@@ -59,7 +59,7 @@
 
     "borderWidth": {
       "type": "Number",
-      "desc": "Width of the progress arc boundary",
+      "desc": "(Only works if rounded === true) Width of progress arc boundary",
       "default": 0,
       "category": "style"
     },