@redseed/redseed-ui-vue3 1.4.0 → 1.5.0

package/index.js

@@ -40,6 +40,7 @@ import MessageBox from './src/components/MessageBox/MessageBox.vue'
 import MetaItem from './src/components/PageHeading/MetaItem.vue'
 import Modal from './src/components/Modal/Modal.vue'
 import PageHeading from './src/components/PageHeading/PageHeading.vue'
+import ProgressCircle from './src/components/Progress/ProgressCircle.vue'
 import SignInWithGoogle from './src/components/Social/SignInWithGoogle.vue'
 import SignUpWithGoogle from './src/components/Social/SignUpWithGoogle.vue'
 import TwoColumnLayout from './src/components/TwoColumnLayout/TwoColumnLayout.vue'
@@ -87,6 +88,7 @@ export {
     MetaItem,
     Modal,
     PageHeading,
+    ProgressCircle,
     SignInWithGoogle,
     SignUpWithGoogle,
     TwoColumnLayout,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "scripts": {

package/src/components/Button/ButtonSlot.vue

@@ -147,7 +147,7 @@ const buttonSlotIconClass = computed(() => [
         @apply text-xs;
         @apply px-2.5 py-1.5;
         &--icon {
-            @apply px-1.5;
+            @apply px-1.5 py-1.5;
         }
         .button-slot__icon {
             @apply w-4 h-4;
@@ -158,7 +158,7 @@ const buttonSlotIconClass = computed(() => [
         @apply text-sm;
         @apply px-3 py-2;
         &--icon {
-            @apply px-2;
+            @apply px-2 py-2;
         }
         .button-slot__icon {
             @apply w-5 h-5;
@@ -169,13 +169,10 @@ const buttonSlotIconClass = computed(() => [
         @apply text-base;
         @apply px-4 py-2;
         &--icon {
-            @apply px-2;
+            @apply px-2.5 py-2.5;
         }
         .button-slot__icon {
             @apply w-5 h-5;
-            &--only {
-                @apply w-6 h-6;
-            }
         }
     }
     // modifier lg size
@@ -183,13 +180,10 @@ const buttonSlotIconClass = computed(() => [
         @apply text-lg;
         @apply px-4 py-2;
         &--icon {
-            @apply px-2;
+            @apply px-3 py-3;
         }
         .button-slot__icon {
             @apply w-5 h-5;
-            &--only {
-                @apply w-7 h-7;
-            }
         }
     }
     // modifier icon at the end

package/src/components/Progress/ProgressCircle.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { ref, computed, onMounted, watchPostEffect } from 'vue'
+
+const props = defineProps({
+    percentage: {
+        type: Number,
+        default: 0,
+    },
+    sm: { // default size
+        type: Boolean,
+        default: false,
+    },
+    md: {
+        type: Boolean,
+        default: false,
+    },
+    lg: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+// Ensure the percentage is between 0 and 100
+const safePercentage = computed(() => {
+    if (props.percentage < 0) return 0
+    if (props.percentage > 100) return 100
+
+    return props.percentage
+})
+
+// default size of the progress circle
+const defaultSize = computed(() => !props.sm && !props.md && !props.lg)
+
+// Class for the progress circle
+const progressCircleClass = computed(() => [
+    'progress-circle',
+    {
+        'progress-circle--sm': props.sm || defaultSize.value,
+        'progress-circle--md': props.md,
+        'progress-circle--lg': props.lg,
+    },
+])
+
+// Reference to the progress circle element
+const progressCircle = ref(null)
+
+// Set the stroke dash of the progress circle
+function setProgressCircleDash() {
+    // Get the radius of the progress circle
+    const radius = progressCircle.value.r.baseVal.value
+    // Calculate the circumference of the circle
+    const circumference = 2 * Math.PI * radius
+    // Calculate the offset of the stroke dash
+    const offset = circumference * (100 - safePercentage.value) / 100
+
+    // Set the stroke dash of the progress circle
+    progressCircle.value.style.strokeDasharray = `${circumference}`
+    // Set the stroke dash offset of the progress circle
+    progressCircle.value.style.strokeDashoffset = `${offset}`
+}
+
+// Watch for changes in the percentage prop
+watchPostEffect(setProgressCircleDash)
+</script>
+<template>
+<div :class="progressCircleClass">
+    <svg viewBox="0 0 100 100">
+        <circle cx="50" cy="50" r="48"
+            class="progress-circle__background-circle"
+        ></circle>
+        <circle cx="50" cy="50" r="48"
+            ref="progressCircle"
+            class="progress-circle__progress-circle"
+        ></circle>
+    </svg>
+    <div class="progress-circle__content">
+        <slot></slot>
+    </div>
+</div>
+</template>
+<style lang="scss" scoped>
+.progress-circle {
+    @apply relative;
+    &--sm {
+        @apply size-16 text-xs;
+    }
+    &--md {
+        @apply size-20 text-sm;
+    }
+    &--lg {
+        @apply size-24 text-base;
+    }
+    svg {
+        @apply w-full h-full -rotate-90 transition-all;
+        circle {
+            stroke-linecap: round;
+        }
+    }
+    &__background-circle {
+        @apply stroke-gray-300 stroke-4 fill-none transition-all;
+    }
+    &__progress-circle {
+        @apply stroke-primary stroke-4 fill-none transition-all duration-0;
+    }
+    &__content {
+        @apply absolute inset-0 w-full h-full flex items-center justify-center;
+    }
+}
+</style>