@idds/vue 1.4.17 → 1.4.19

package/dist/index.d.ts

@@ -1590,7 +1590,7 @@ declare const _default: {
     }>> & Readonly<{}>, {
         progress: number;
         className: string;
-        variant: "primary" | "secondary" | "success" | "warning" | "error" | string;
+        variant: "primary" | "secondary" | "positive" | "warning" | "negative" | string;
         diameter: number;
         strokeWidth: number;
         trackColor: string;
@@ -5937,7 +5937,7 @@ declare const _default: {
             }> | import('vue').Component>;
         };
         state: {
-            type: import('vue').PropType<"default" | "destructive" | "positive">;
+            type: import('vue').PropType<"default" | "positive" | "destructive">;
             default: string;
         };
     }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
@@ -5982,7 +5982,7 @@ declare const _default: {
             }> | import('vue').Component>;
         };
         state: {
-            type: import('vue').PropType<"default" | "destructive" | "positive">;
+            type: import('vue').PropType<"default" | "positive" | "destructive">;
             default: string;
         };
     }>> & Readonly<{}>, {

package/dist/index.es.js

@@ -2784,9 +2784,9 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$w = ["width", "height", "viewBox"];
-const _hoisted_2$t = ["cx", "cy", "r", "stroke", "stroke-width"];
-const _hoisted_3$r = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset"];
+const _hoisted_1$w = ["viewBox"];
+const _hoisted_2$t = ["cx", "cy", "r", "stroke-width"];
+const _hoisted_3$r = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"];
 const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "CircleProgressBar",
   props: {
@@ -2799,66 +2799,58 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const VARIANT_MAP = {
-      primary: "var(--ina-primary-500)",
-      secondary: "var(--ina-secondary-500)",
-      success: "var(--ina-success-500)",
-      warning: "var(--ina-warning-500)",
-      error: "var(--ina-error-500)"
-    };
     const normalizedProgress = computed(
       () => Math.min(100, Math.max(0, props.progress))
     );
-    const strokeColor = computed(() => {
-      const isHex = props.variant.startsWith("#");
-      return isHex ? props.variant : VARIANT_MAP[props.variant] || VARIANT_MAP.primary;
-    });
     const center = computed(() => props.diameter / 2);
     const radius = computed(() => (props.diameter - props.strokeWidth) / 2);
     const circumference = computed(() => 2 * Math.PI * radius.value);
     const strokeDashoffset = computed(
       () => circumference.value - normalizedProgress.value / 100 * circumference.value
     );
+    const isCustomColor = computed(() => props.variant.startsWith("#"));
     const containerClasses = computed(() => {
-      return [
-        "ina-circle-progress-bar",
-        "inline-flex items-center justify-center",
-        props.className
-      ].filter(Boolean).join(" ");
+      const variantClass = !isCustomColor.value ? `ina-circle-progress-bar--${props.variant}` : "";
+      return ["ina-circle-progress-bar", variantClass, props.className].filter(Boolean).join(" ");
+    });
+    const containerStyle = computed(() => {
+      const style = {
+        "--ina-circle-progress-size": `${props.diameter}px`
+      };
+      if (props.trackColor) {
+        style["--ina-circle-progress-track-color"] = props.trackColor;
+      }
+      if (isCustomColor.value) {
+        style["--ina-circle-progress-color"] = props.variant;
+      }
+      return style;
     });
-    const containerStyle = computed(() => ({
-      width: `${props.diameter}px`,
-      height: `${props.diameter}px`
-    }));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(containerClasses.value),
         style: normalizeStyle(containerStyle.value)
       }, [
         (openBlock(), createElementBlock("svg", {
-          width: __props.diameter,
-          height: __props.diameter,
+          class: "ina-circle-progress-bar__svg",
+          width: "100%",
+          height: "100%",
           viewBox: `0 0 ${__props.diameter} ${__props.diameter}`,
           fill: "none",
-          xmlns: "http://www.w3.org/2000/svg",
-          style: { "transform": "rotate(-90deg)" }
+          xmlns: "http://www.w3.org/2000/svg"
         }, [
           createElementVNode("circle", {
+            class: "ina-circle-progress-bar__track",
             cx: center.value,
             cy: center.value,
             r: radius.value,
-            stroke: __props.trackColor,
-            "stroke-width": __props.strokeWidth,
-            fill: "none"
+            "stroke-width": __props.strokeWidth
           }, null, 8, _hoisted_2$t),
           createElementVNode("circle", {
+            class: "ina-circle-progress-bar__progress",
             cx: center.value,
             cy: center.value,
             r: radius.value,
-            stroke: strokeColor.value,
             "stroke-width": __props.strokeWidth,
-            fill: "none",
-            "stroke-linecap": "round",
             "stroke-dasharray": circumference.value,
             "stroke-dashoffset": strokeDashoffset.value
           }, null, 8, _hoisted_3$r)