@mobileaction/action-kit 1.42.7-beta.2 → 1.42.7-beta.3

package/src/components/progress/assets/styles.scss

@@ -0,0 +1,241 @@
+$colors: (
+  "green": "primary-green",
+  "orange": "primary-orange",
+  "yellow": "yellow-400",
+  "red": "red-500",
+  "dark": "primary-dark",
+  "blue": "primary-dark-blue"
+);
+
+$circleSizes: (
+  "xs": "w-16 h-16",
+  "sm": "w-32 h-32",
+  "md": "w-40 h-40",
+  "lg": "w-48 h-48",
+  "xl": "w-56 h-56"
+);
+
+$circleSizes: (
+  "xs": (
+    "wrapper": "w-16 h-16",
+    "percent": "text-sm",
+    "label": "text-xs",
+    "icon": "w-6 h-6"
+  ),
+  "sm": (
+    "wrapper": "w-32 h-32",
+    "percent": "text-lg leading-6",
+    "label": "text-xs",
+    "icon": "w-10 h-10"
+  ),
+  "md": (
+    "wrapper": "w-40 h-40",
+    "percent": "text-2xl leading-6",
+    "label": "text-xs mb-1",
+    "icon": "w-12 h-12"
+  ),
+  "lg": (
+    "wrapper": "w-48 h-48",
+    "percent": "text-3xl leading-[3rem]",
+    "label": "text-sm -mb-1.5",
+    "icon": "w-14 h-14"
+  ),
+  "xl": (
+    "wrapper": "w-56 h-56",
+    "percent": "text-4xl leading-[3.5rem]",
+    "label": "text-base -mb-2",
+    "icon": "w-16 h-16"
+  )
+);
+
+$halfCircleSizes: (
+  "xs": (
+    "wrapper": "w-16 h-8"
+  ),
+  "sm": (
+    "wrapper": "w-32 h-16"
+  ),
+  "md": (
+    "wrapper": "w-40 h-20"
+  ),
+  "lg": (
+    "wrapper": "w-48 h-24"
+  ),
+  "xl": (
+    "wrapper": "w-56 h-28"
+  )
+);
+
+.ak-progress {
+  @apply font-euclid;
+  font-feature-settings: "tnum";
+  &--circle,
+  &--half-circle {
+    &.xs-circle-label {
+      @apply mb-6;
+      .label {
+        @apply absolute mt-11;
+      }
+    }
+    &.xs-half-circle-label {
+      .ma-progress-half-circle {
+        @apply h-auto #{!important};
+        label {
+          @apply flex flex-col-reverse pt-4;
+        }
+      }
+    }
+    .ma-progress-circle {
+      @apply relative flex items-center justify-center;
+      @each $name, $size in $circleSizes {
+        &.size-#{$name},
+        &.size-#{$name} .circle {
+          @apply #{map-get($size, 'wrapper')};
+        }
+        &.size-#{$name} .percent {
+          @apply #{map-get($size, 'percent')};
+        }
+        &.size-#{$name} .label {
+          @apply #{map-get($size, 'label')};
+        }
+        &.size-#{$name} .ma-icon {
+          @apply #{map-get($size, 'icon')};
+        }
+      }
+      @each $name, $color in $colors {
+        &.color-#{$name} {
+          @apply text-#{$color};
+          .circle .percent {
+            @apply stroke-#{$color};
+          }
+        }
+      }
+      .circle {
+        @apply absolute top-0;
+        .wrapper {
+          @apply stroke-[#F2F4F7];
+        }
+        .percent {
+          transition:
+            stroke-dashoffset 0.3s ease 0s,
+            stroke-dasharray 0.3s ease 0s,
+            stroke 0.3s ease 0s,
+            stroke-width 0.06s ease 0.3s,
+            opacity ease 0s;
+        }
+      }
+      label {
+        @apply text-center;
+        > span {
+          @apply block;
+          &.percent {
+            @apply relative text-gray-700 font-medium;
+          }
+          &.label {
+            @apply text-gray-500 font-medium;
+          }
+        }
+      }
+    }
+    .ma-progress-half-circle {
+      @apply flex-col justify-end;
+      > .circle {
+        @apply h-auto max-h-full #{!important};
+      }
+      @each $name, $size in $halfCircleSizes {
+        &.size-#{$name} {
+          @apply #{map-get($size, 'wrapper')};
+        }
+      }
+    }
+  }
+  &--line {
+    .ma-progress-line {
+      @apply flex flex-nowrap w-80 items-center gap-x-3 cursor-pointer;
+      .line-wrapper {
+        @apply w-full bg-gray-200 rounded h-2;
+        .line {
+          @apply h-2 rounded transition-all duration-300;
+        }
+      }
+      .ma-tooltip {
+        @apply w-full flex flex-nowrap items-center gap-x-3;
+      }
+      label {
+        @apply text-gray-500 text-sm font-medium;
+      }
+      &.color-dark {
+        label {
+          @apply text-primary-dark;
+        }
+      }
+      @each $name, $color in $colors {
+        &.color-#{$name} {
+          .ma-icon {
+            @apply flex-none text-#{$color};
+          }
+          .line {
+            @apply bg-#{$color};
+          }
+        }
+      }
+    }
+    &.percentage-left {
+      .ma-progress-line {
+        @apply flex-row-reverse;
+        .ma-tooltip {
+          @apply flex-row-reverse;
+        }
+      }
+    }
+  }
+  &--line-step {
+    .ma-progress-line-step {
+      @apply flex flex-nowrap w-80 items-center gap-x-3 cursor-pointer;
+      @each $name, $color in $colors {
+        &.color-#{$name} {
+          .single-line-fill {
+            @apply bg-#{$color};
+          }
+          .ma-icon {
+            @apply text-#{$color};
+          }
+        }
+      }
+      .step-line-wrapper {
+        @apply w-full h-2 flex items-center justify-between;
+        .single-line {
+          @apply w-[9%] h-2 rounded bg-gray-200 overflow-hidden;
+          &-fill {
+            @apply h-2;
+          }
+        }
+      }
+      .ma-icon,
+      label {
+        @apply flex-none;
+      }
+      label {
+        @apply text-primary-dark text-sm;
+      }
+    }
+  }
+  &.percentage-left {
+    .ma-progress-line-step {
+      @apply flex-row-reverse;
+    }
+  }
+}
+
+.ma-progress-tooltip {
+  .antd-tooltip-content {
+    .antd-tooltip-inner {
+      @apply items-center gap-x-8;
+      .ak-tooltip-overlay__content {
+        .ak-tooltip-overlay__content__title {
+          @apply text-gray-500;
+        }
+      }
+    }
+  }
+}

package/src/components/progress/components/circle.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import MaIcon from "@/components/icon/index.vue";
+import { SvgListType, MaProgressCircleSize } from "../types";
+import { MaTooltipProps } from '@/components/tooltip/index.vue';
+
+export interface MaProgressItemProps {
+  percent: number;
+  showTooltip?: boolean;
+  tooltipProps?: MaTooltipProps;
+  icon?: string;
+  label?: string;
+  showPercent?: boolean;
+  size?: MaProgressCircleSize;
+}
+
+const props = withDefaults(defineProps<MaProgressItemProps>(), {});
+
+
+const svgList: SvgListType = {
+    xl: {
+        viewBox: '0 0 224 224',
+        path: 'M112 10.5C125.329 10.5 138.528 13.1254 150.842 18.2262C163.157 23.3271 174.346 30.8035 183.771 40.2287C193.196 49.6538 200.673 60.8431 205.774 73.1576C210.875 85.4722 213.5 98.6708 213.5 112C213.5 125.329 210.875 138.528 205.774 150.842C200.673 163.157 193.196 174.346 183.771 183.771C174.346 193.197 163.157 200.673 150.842 205.774C138.528 210.875 125.329 213.5 112 213.5C98.6708 213.5 85.4721 210.875 73.1576 205.774C60.843 200.673 49.6538 193.196 40.2286 183.771C30.8035 174.346 23.3271 163.157 18.2262 150.842C13.1254 138.528 10.5 125.329 10.5 112C10.5 98.6708 13.1254 85.4721 18.2262 73.1576C23.3271 60.843 30.8036 49.6538 40.2287 40.2286C49.6539 30.8035 60.8431 23.327 73.1577 18.2262C85.4722 13.1254 98.6709 10.5 112 10.5L112 10.5Z',
+        strokeDashArray: 632,
+        strokeWidth: 21,
+    },
+    lg: {
+        viewBox: '0 0 192 192',
+        path: 'M96 9C107.425 9 118.738 11.2503 129.293 15.6225C139.849 19.9946 149.44 26.403 157.518 34.4817C165.597 42.5604 172.005 52.1512 176.378 62.7066C180.75 73.2619 183 84.575 183 96C183 107.425 180.75 118.738 176.378 129.293C172.005 139.849 165.597 149.44 157.518 157.518C149.44 165.597 139.849 172.005 129.293 176.378C118.738 180.75 107.425 183 96 183C84.575 183 73.2618 180.75 62.7065 176.378C52.1512 172.005 42.5604 165.597 34.4817 157.518C26.403 149.44 19.9946 139.849 15.6225 129.293C11.2503 118.738 8.99999 107.425 9 96C9.00001 84.575 11.2503 73.2618 15.6225 62.7065C19.9947 52.1512 26.403 42.5604 34.4817 34.4817C42.5604 26.403 52.1513 19.9946 62.7066 15.6225C73.2619 11.2503 84.5751 8.99999 96.0001 9L96 9Z',
+        strokeDashArray: 542,
+        strokeWidth: 18,
+    },
+    md: {
+        viewBox: '0 0 160 160',
+        path: 'M80 7.5C89.5208 7.5 98.9484 9.37527 107.745 13.0187C116.541 16.6622 124.533 22.0025 131.265 28.7348C137.997 35.467 143.338 43.4594 146.981 52.2555C150.625 61.0516 152.5 70.4792 152.5 80C152.5 89.5208 150.625 98.9485 146.981 107.745C143.338 116.541 137.997 124.533 131.265 131.265C124.533 137.998 116.541 143.338 107.745 146.981C98.9484 150.625 89.5208 152.5 80 152.5C70.4791 152.5 61.0515 150.625 52.2554 146.981C43.4593 143.338 35.467 137.997 28.7347 131.265C22.0025 124.533 16.6622 116.541 13.0187 107.745C9.37526 98.9484 7.5 89.5208 7.5 80C7.5 70.4791 9.37528 61.0515 13.0187 52.2554C16.6622 43.4593 22.0025 35.467 28.7348 28.7347C35.467 22.0025 43.4594 16.6622 52.2555 13.0187C61.0516 9.37526 70.4792 7.49999 80 7.5L80 7.5Z',
+        strokeDashArray: 450,
+        strokeWidth: 15,
+    },
+    sm: {
+        viewBox: '0 0 128 128',
+        path: 'M64 6C71.6167 6 79.1588 7.50021 86.1956 10.415C93.2325 13.3298 99.6264 17.602 105.012 22.9878C110.398 28.3736 114.67 34.7675 117.585 41.8044C120.5 48.8413 122 56.3833 122 64C122 71.6167 120.5 79.1588 117.585 86.1957C114.67 93.2325 110.398 99.6264 105.012 105.012C99.6264 110.398 93.2325 114.67 86.1956 117.585C79.1587 120.5 71.6166 122 64 122C56.3833 122 48.8412 120.5 41.8043 117.585C34.7675 114.67 28.3736 110.398 22.9878 105.012C17.602 99.6264 13.3297 93.2325 10.415 86.1956C7.50021 79.1587 6 71.6166 6 64C6 56.3833 7.50022 48.8412 10.415 41.8043C13.3298 34.7674 17.602 28.3736 22.9878 22.9878C28.3736 17.602 34.7675 13.3297 41.8044 10.415C48.8413 7.5002 56.3834 5.99999 64 6L64 6Z',
+        strokeDashArray: 360,
+        strokeWidth: 12,
+    },
+    xs: {
+        viewBox: '0 0 64 64',
+        path: 'M32 3C35.8083 3 39.5794 3.75011 43.0978 5.20749C46.6163 6.66488 49.8132 8.80101 52.5061 11.4939C55.199 14.1868 57.3351 17.3837 58.7925 20.9022C60.2499 24.4206 61 28.1917 61 32C61 35.8083 60.2499 39.5794 58.7925 43.0978C57.3351 46.6163 55.199 49.8132 52.5061 52.5061C49.8132 55.199 46.6163 57.3351 43.0978 58.7925C39.5794 60.2499 35.8083 61 32 61C28.1917 61 24.4206 60.2499 20.9022 58.7925C17.3837 57.3351 14.1868 55.199 11.4939 52.5061C8.801 49.8132 6.66487 46.6163 5.20749 43.0978C3.7501 39.5794 3 35.8083 3 32C3 28.1917 3.75011 24.4206 5.2075 20.9022C6.66489 17.3837 8.80101 14.1868 11.4939 11.4939C14.1868 8.80099 17.3838 6.66487 20.9022 5.20749C24.4206 3.7501 28.1917 3 32 3L32 3Z',
+        strokeDashArray: 179,
+        strokeWidth: 6,
+    },
+};
+
+const currentSize = computed(() => svgList[props.size]);
+const strokeDashOffset = computed(
+  () => (currentSize.value.strokeDashArray * (100 - props.percent)) / 100,
+);
+
+</script>
+<template>
+  <div class="ma-progress-circle">
+    <svg class="circle" :viewBox="currentSize.viewBox" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        :d="currentSize.path"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-width="currentSize.strokeWidth"
+        class="wrapper"
+      />
+      <path
+        :d="currentSize.path"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-dasharray="currentSize.strokeDashArray"
+        :stroke-dashoffset="strokeDashOffset"
+        :stroke-width="currentSize.strokeWidth"
+        v-if="props.percent > 0"
+        class="percent"
+      />
+    </svg>
+    <ma-icon
+        :name="props.icon"
+        v-if="props?.icon"
+    />
+    <label v-else>
+        <span class="label" v-if="props?.label || $slots.customLabel">
+            {{  props.label  }}
+            <slot name="customLabel"></slot>
+        </span>
+        <span class="percent">
+            {{ props?.percent }}%
+        </span>
+    </label>
+  </div>
+</template>

package/src/components/progress/components/halfCircle.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { SvgListType, MaProgressCircleSize } from '../types';
+import MaIcon from '@/components/icon/index.vue';
+import { MaTooltipProps } from '@/components/tooltip/index.vue';
+
+export interface MaProgressItemProps {
+  percent: number;
+  showTooltip?: boolean;
+  tooltipProps?: MaTooltipProps;
+  icon?: string;
+  label?: string;
+  showPercent?: boolean;
+  size?: MaProgressCircleSize;
+}
+
+const props = withDefaults(defineProps<MaProgressItemProps>(), {});
+
+const svgList: SvgListType = {
+  xl: {
+    viewBox: '0 0 224 128',
+    path: 'M10.5 112C10.5 98.6708 13.1254 85.4722 18.2262 73.1576C23.3271 60.8431 30.8035 49.6538 40.2287 40.2286C49.6538 30.8035 60.8431 23.3271 73.1577 18.2262C85.4722 13.1254 98.6709 10.5 112 10.5C125.329 10.5 138.528 13.1254 150.842 18.2262C163.157 23.3271 174.346 30.8035 183.771 40.2287C193.197 49.6539 200.673 60.8431 205.774 73.1577C210.875 85.4722 213.5 98.6709 213.5 112',
+    strokeDashArray: 320,
+    strokeWidth: 21,
+  },
+  lg: {
+    viewBox: '0 0 192 114',
+    path: 'M9 96C9 84.575 11.2503 73.2619 15.6225 62.7065C19.9946 52.1512 26.403 42.5604 34.4817 34.4817C42.5604 26.403 52.1512 19.9946 62.7066 15.6225C73.2619 11.2503 84.575 9 96 9C107.425 9 118.738 11.2503 129.293 15.6225C139.849 19.9947 149.44 26.403 157.518 34.4817C165.597 42.5604 172.005 52.1513 176.378 62.7066C180.75 73.2619 183 84.5751 183 96.0001',
+    strokeDashArray: 274,
+    strokeWidth: 18,
+  },
+  md: {
+    viewBox: '0 0 160 88',
+    path: 'M7.5 80C7.5 70.4792 9.37527 61.0515 13.0187 52.2554C16.6622 43.4593 22.0025 35.467 28.7348 28.7347C35.467 22.0025 43.4594 16.6622 52.2555 13.0187C61.0516 9.37526 70.4792 7.5 80 7.5C89.5209 7.5 98.9485 9.37528 107.745 13.0187C116.541 16.6622 124.533 22.0025 131.265 28.7348C137.998 35.467 143.338 43.4594 146.981 52.2555C150.625 61.0516 152.5 70.4792 152.5 80',
+    strokeDashArray: 226,
+    strokeWidth: 15,
+  },
+  sm: {
+    viewBox: '0 0 128 72',
+    path: 'M6 64C6 56.3833 7.50022 48.8412 10.415 41.8044C13.3298 34.7675 17.602 28.3736 22.9878 22.9878C28.3736 17.602 34.7675 13.3298 41.8044 10.415C48.8413 7.50021 56.3834 6 64 6C71.6167 6 79.1588 7.50022 86.1957 10.415C93.2325 13.3298 99.6264 17.602 105.012 22.9878C110.398 28.3736 114.67 34.7675 117.585 41.8044C120.5 48.8413 122 56.3834 122 64',
+    strokeDashArray: 182,
+    strokeWidth: 12,
+  },
+  xs: {
+    viewBox: '0 0 64 38',
+    path: 'M3 32C3 28.1917 3.75011 24.4206 5.2075 20.9022C6.66488 17.3837 8.80101 14.1868 11.4939 11.4939C14.1868 8.801 17.3837 6.66488 20.9022 5.20749C24.4206 3.7501 28.1917 3 32 3C35.8083 3 39.5794 3.75011 43.0978 5.2075C46.6163 6.66489 49.8132 8.80101 52.5061 11.4939C55.199 14.1868 57.3351 17.3838 58.7925 20.9022C60.2499 24.4206 61 28.1917 61 32',
+    strokeDashArray: 91,
+    strokeWidth: 6,
+  },
+};
+
+const currentSize = computed(() => svgList[props.size]);
+const strokeDashOffset = computed(
+  () => (currentSize.value.strokeDashArray * (100 - props.percent)) / 100,
+);
+</script>
+<template>
+  <div class="ma-progress-circle ma-progress-half-circle">
+    <svg
+      class="circle"
+      :viewBox="currentSize.viewBox"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        :d="currentSize.path"
+        :stroke-width="currentSize.strokeWidth"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="wrapper"
+      />
+      <path
+        :d="currentSize.path"
+        :stroke-width="currentSize.strokeWidth"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        :stroke-dasharray="currentSize.strokeDashArray"
+        :stroke-dashoffset="strokeDashOffset"
+        v-if="props.percent > 0"
+        class="percent"
+      />
+    </svg>
+    <ma-icon :name="props.icon" v-if="props?.icon" />
+    <label v-else>
+      <span class="label" v-if="props?.label || $slots.customLabel">
+        {{ props?.label }}
+        <slot name="customLabel"></slot>
+      </span>
+      <span class="percent"> {{ props?.percent }}% </span>
+    </label>
+  </div>
+</template>

package/src/components/progress/components/line.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed, ComputedRef } from 'vue';
+import MaTooltip, { MaTooltipProps } from '@/components/tooltip/index.vue';
+import MaIcon from '@/components/icon/index.vue';
+import { MaProgressCircleSize } from '../types';
+
+export interface MaProgressItemProps {
+  percent: number;
+  showTooltip?: boolean;
+  tooltipProps?: MaTooltipProps;
+  icon?: string;
+  label?: string;
+  showPercent?: boolean;
+  size?: MaProgressCircleSize;
+}
+
+const props = withDefaults(defineProps<MaProgressItemProps>(), {});
+
+const lineStyle = computed(() => ({ width: `${props.percent}%` }));
+const tooltipArgs: ComputedRef<MaTooltipProps> = computed(() => ({
+    overlayClassName: 'ma-progress-tooltip',
+    icon: 'warning-2-bold',
+    closable: true,
+    title: `%${props.percent}`,
+    defaultVisible: true,
+    trigger: 'click',
+    ...props.tooltipProps
+}));
+</script>
+<template>
+    <div class="ma-progress-line">
+        <ma-tooltip v-if="props?.showTooltip" v-bind="tooltipArgs">
+            <div class="line-wrapper">
+                <div class="line" :style="lineStyle"></div>
+            </div>
+            <ma-icon v-if="props?.icon" :name="props.icon" />
+            <label v-else-if="showPercent">{{ props.percent }}%</label>
+            <label v-if="$slots.customLabel"><slot name="customLabel"></slot></label>
+        </ma-tooltip>
+        <template v-else>
+            <div class="line-wrapper">
+                <div class="line" :style="lineStyle"></div>
+            </div>
+            <ma-icon v-if="props?.icon" :name="props.icon" />
+            <label v-else-if="showPercent">{{ props.percent }}%</label>
+            <label v-if="$slots.customLabel"><slot name="customLabel"></slot></label>
+        </template>
+    </div>
+</template>

package/src/components/progress/components/stepLine.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import MaIcon from '@/components/icon/index.vue';
+import { MaTooltipProps } from '@/components/tooltip/index.vue';
+import { MaProgressCircleSize } from '../types';
+
+export interface MaProgressItemProps {
+  percent: number;
+  showTooltip?: boolean;
+  tooltipProps?: MaTooltipProps;
+  icon?: string;
+  label?: string;
+  showPercent?: boolean;
+  size?: MaProgressCircleSize;
+}
+
+const props = withDefaults(defineProps<MaProgressItemProps>(), {});
+
+const getLineStyle = (itemKey: number) => {
+    const lowerBound = (itemKey - 1) * 10;
+    const upperBound = itemKey * 10;
+    let widthPercent = 0; // Default value
+    if (props.percent >= upperBound) {
+        widthPercent = 100;
+    } else if (props.percent > lowerBound && props.percent < upperBound) {
+        widthPercent = 100 * (props.percent - lowerBound) / (upperBound - lowerBound);
+    }
+    return {
+        width: `${widthPercent}%`
+    };
+};
+</script>
+<template>
+    <div class="ma-progress-line-step">
+        <div class="step-line-wrapper">
+            <div
+                class="single-line"
+                :key="itemKey"
+                v-for="(itemKey) in 10"
+            >
+            <div class="single-line-fill" :style="getLineStyle(itemKey)">
+            </div>
+            </div>
+        </div>
+        <ma-icon v-if="props?.icon" :name="props.icon" />
+        <label v-else-if="props?.showPercent">{{ props.percent }}%</label>
+        <label v-if="$slots.customLabel"><slot name="customLabel"></slot></label>
+    </div>
+</template>

package/src/components/progress/index.vue

@@ -0,0 +1,90 @@
+<script lang="ts">
+export default {
+  name: 'MaProgress',
+};
+</script>
+<script setup lang="ts">
+import { MaProgressType, MaProgressColor, MaProgressCircleSize, MaProgressPercentAlignment } from './types';
+import { MaTooltipProps } from '../tooltip/index.vue';
+import { computed } from 'vue';
+import ProgressCircle from './components/circle.vue';
+import ProgressLine from './components/line.vue';
+import ProgressCircleHalf from './components/halfCircle.vue';
+import ProgressLineStep from './components/stepLine.vue';
+
+export interface MaProgressProps {
+  type?: MaProgressType;
+  percent: number;
+  color?: MaProgressColor;
+  showTooltip?: boolean;
+  tooltipProps?: MaTooltipProps;
+  icon?: string;
+  label?: string;
+  showPercent?: boolean;
+  percentAlignment?: MaProgressPercentAlignment,
+  circleSize?: MaProgressCircleSize;
+}
+
+const props = withDefaults(defineProps<MaProgressProps>(), {
+  type: 'line',
+  color: 'dark',
+  circleSize: 'md',
+  percentAlignment: 'right',
+  showPercent: true,
+});
+
+const className = computed(() => [
+  `
+    ma-progress
+    ak-progress
+    ak-progress--${props.type}
+    `,
+    {
+        'xs-circle-label': props.type === 'circle' && props?.label && props.circleSize === 'xs'
+    },
+    {
+        'xs-half-circle-label': props.type === 'half-circle' && props?.label && props.circleSize === 'xs'
+    },
+    {
+        'percentage-left': props?.percentAlignment === 'left'
+    }
+]);
+const dynamicComponent = computed(
+  () =>
+    ({
+      circle: ProgressCircle,
+      line: ProgressLine,
+      ['half-circle']: ProgressCircleHalf,
+      ['line-step']: ProgressLineStep,
+    }[props.type]),
+);
+const dynamicComponentClassName = computed(() => [
+    `
+        color-${props.color}
+        size-${props.circleSize}
+    `,
+]);
+const percent = computed(() =>
+    props.percent > 100? 100: props.percent
+);
+</script>
+<template>
+  <div :class="className">
+    <component
+        :class="dynamicComponentClassName"
+        :is="dynamicComponent"
+        :percent="percent"
+        :icon="props?.icon"
+        :label="props?.label"
+        :size="props?.circleSize"
+        :showPercent="props?.showPercent"
+        :showTooltip="props?.showTooltip"
+        :tooltipProps="props?.tooltipProps"
+    >
+    <template #customLabel>
+        <slot name="customLabel"></slot>
+    </template>
+    </component>
+  </div>
+</template>
+<style lang="scss" src="./assets/styles.scss"></style>

package/src/components/progress/stories/circle.stories.ts

@@ -0,0 +1,77 @@
+import type { Meta, StoryFn, StoryObj } from '@storybook/vue3';
+import { baseConfig, Template } from './constants';
+import { MaProgressCircleSizes, MaProgressColors } from '../types';
+
+import MaProgress from '../index.vue';
+
+const meta: Meta<typeof MaProgress> = {
+  title: 'Core/MaProgress/Circle',
+  ...baseConfig,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MaProgress>;
+
+export const Default: Story = Template.bind({});
+Default.args = {
+  percent: 40,
+  type: 'circle',
+};
+
+export const Icon: Story = Template.bind({});
+Icon.args = {
+  percent: 80,
+  type: 'circle',
+  icon: 'tick-circle-bold',
+  color: 'green',
+  circleSize: 'md',
+};
+
+export const WithLabel: Story = Template.bind({});
+WithLabel.args = {
+  percent: 80,
+  type: 'circle',
+  label: 'User',
+  circleSize: 'sm',
+};
+
+export const AllSizes: StoryFn = (args) => ({
+  components: { MaProgress },
+  setup() {
+    const sizes = MaProgressCircleSizes;
+    return { sizes, args };
+  },
+  template: `
+    <div class="flex justify-between">
+        <ma-progress
+            :percent="50"
+            :circleSize="size"
+            label="User"
+            type="circle"
+            v-bind="args"
+            v-for="size in sizes" :key="size"
+        />
+    </div>
+`,
+});
+
+export const AllColors: StoryFn = (args) => ({
+  components: { MaProgress },
+  setup() {
+    const colors = MaProgressColors;
+    return { colors, args };
+  },
+  template: `
+    <div class="flex justify-between">
+        <ma-progress
+            :percent="50"
+            :color="color"
+            label="User"
+            type="circle"
+            v-bind="args"
+            v-for="color in colors" :key="color"
+        />
+    </div>
+`,
+});