sprintify-ui 0.0.28 → 0.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseBadge.vue

@@ -14,7 +14,7 @@ import { BaseIcon } from '.';
 
 const props = defineProps({
   contrast: {
-    default: 'low',
+    default: 'high',
     type: String as PropType<'low' | 'high'>,
   },
   color: {

package/src/components/{BaseProcessRing.stories.js → BaseProgressCircle.stories.js}

@@ -1,8 +1,8 @@
-import BaseProcessRing from './BaseProcessRing.vue';
+import BaseProgressCircle from './BaseProgressCircle.vue';
 
 export default {
-  title: 'Components/BaseProcessRing',
-  component: BaseProcessRing,
+  title: 'Components/BaseProgressCircle',
+  component: BaseProgressCircle,
   args: {
     class: 'text-primary-500',
     radius: 100,
@@ -13,13 +13,13 @@ export default {
 
 const Template = (args) => ({
   components: {
-    BaseProcessRing,
+    BaseProgressCircle,
   },
   setup() {
     return { args };
   },
   template: `
-    <BaseProcessRing v-bind="args"></BaseProcessRing>
+    <BaseProgressCircle v-bind="args"></BaseProgressCircle>
   `,
 });
 

package/src/components/{BaseProcessRing.vue → BaseProgressCircle.vue}

@@ -1,5 +1,14 @@
 <template>
   <svg :height="radius * 2" :width="radius * 2">
+    <circle
+      stroke="currentColor"
+      class="text-slate-200"
+      :stroke-width="stroke"
+      fill="transparent"
+      :r="normalizedRadius"
+      :cx="radius"
+      :cy="radius"
+    />
     <circle
       stroke="currentColor"
       :stroke-dasharray="`${circumference} ${circumference}`"
@@ -10,6 +19,15 @@
       :cx="radius"
       :cy="radius"
     />
+    <text
+      text-anchor="middle"
+      alignment-baseline="middle"
+      :x="radius"
+      :y="radius + fontSize / 10"
+      :style="{ fontSize: fontSize + 'px', fontWeight: 600 }"
+    >
+      {{ Math.round(progress * 100) }}%
+    </text>
   </svg>
 </template>
 
@@ -43,6 +61,9 @@ export default defineComponent({
         this.circumference - Math.min(1, this.progress) * this.circumference;
       return offset;
     },
+    fontSize(): number {
+      return Math.min(30, this.radius / 2.7);
+    },
   },
 });
 </script>

package/src/components/index.ts

@@ -44,7 +44,7 @@ import BaseNavbarItemContent from './BaseNavbarItemContent.vue';
 import BasePagination from './BasePagination.vue';
 import BasePanel from './BasePanel.vue';
 import BasePassword from './BasePassword.vue';
-import BaseProcessRing from './BaseProcessRing.vue';
+import BaseProgressCircle from './BaseProgressCircle.vue';
 import BaseReadMore from './BaseReadMore.vue';
 import BaseSelect from './BaseSelect.vue';
 import BaseSideNavigation from './BaseSideNavigation.vue';
@@ -113,7 +113,7 @@ export {
   BasePagination,
   BasePanel,
   BasePassword,
-  BaseProcessRing,
+  BaseProgressCircle,
   BaseReadMore,
   BaseSelect,
   BaseSideNavigation,