@nmorph/nmorph-ui-kit 1.0.75 → 1.0.76

package/dist/index.es.js

@@ -339,7 +339,7 @@ const usePlacement = (data) => {
 
 const name = "@nmorph/nmorph-ui-kit";
 const type = "module";
-const version = "1.0.75";
+const version = "1.0.76";
 const license = "MIT";
 const engines = {
 	node: "18.13.0",
@@ -8063,7 +8063,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         "nmorph-progress": []
       })
     );
-    computed(() => `${props.percentage}%`);
+    const innerContentWidth = computed(() => `${props.percentage}%`);
     const color = computed(() => {
       if (Array.isArray(props.color)) {
         return props.color.find((el) => el.percentage <= props.percentage)?.color;
@@ -8072,7 +8072,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         return props.color(props.percentage);
       return props.color;
     });
-    computed(() => {
+    const animation = computed(() => {
       return props.indeterminate ? "var(--animation)" : "none";
     });
     const circle = ref(null);
@@ -8084,7 +8084,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         return;
       circumference.value = 2 * Math.PI * circle.value.r.baseVal.value;
     });
-    computed(() => `${props.circleSize}px`);
+    const circleContainerSize = computed(() => `${props.circleSize}px`);
     const displayPercentage = computed(() => `${props.percentage}%`);
     const slide = Gi`
   from {
@@ -8098,7 +8098,6 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     const commonCSS = Hi`
   --height: 8px;
   --width-transition: 0.4s ease-in-out width;
-  --animation: ${slide} 2s linear infinite;
   display: inline;
 
   .nmorph-progress__linear {
@@ -8116,12 +8115,9 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
 
     .nmorph-progress__inner {
       position: relative;
-      width: v-bind(innerContentWidth);
       height: 100%;
-      background: v-bind(color);
       border-radius: var(--border-radius-40);
       transition: var(--width-transition);
-      animation: v-bind(animation);
     }
 
     .nmorph-progress__percentage,
@@ -8140,8 +8136,6 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
 
   .nmorph-progress__circle {
     position: relative;
-    width: v-bind(circleContainerSize);
-    height: v-bind(circleContainerSize);
     border-radius: var(--border-radius-circular);
 
     &::after {
@@ -8177,6 +8171,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
   }
 `;
     const StyledComponent = Kr.div`
+  --animation: ${slide} 2s linear infinite;
   ${commonCSS}
   .nmorph-progress__linear {
     .nmorph-progress__outer {
@@ -8193,9 +8188,16 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     }
   }
 
+  .nmorph-progress__inner {
+    width: ${innerContentWidth.value};
+    background: ${color.value};
+    animation: ${animation.value};
+  }
 
   .nmorph-progress__circle {
     ${nmorphInset()}
+    width: ${circleContainerSize.value};
+    height: ${circleContainerSize.value};
   }
 
   .nmorph-progress__circle-ring {

package/dist/index.umd.js

@@ -342,7 +342,7 @@
 
   const name = "@nmorph/nmorph-ui-kit";
   const type = "module";
-  const version = "1.0.75";
+  const version = "1.0.76";
   const license = "MIT";
   const engines = {
   	node: "18.13.0",
@@ -8066,7 +8066,7 @@
           "nmorph-progress": []
         })
       );
-      vue.computed(() => `${props.percentage}%`);
+      const innerContentWidth = vue.computed(() => `${props.percentage}%`);
       const color = vue.computed(() => {
         if (Array.isArray(props.color)) {
           return props.color.find((el) => el.percentage <= props.percentage)?.color;
@@ -8075,7 +8075,7 @@
           return props.color(props.percentage);
         return props.color;
       });
-      vue.computed(() => {
+      const animation = vue.computed(() => {
         return props.indeterminate ? "var(--animation)" : "none";
       });
       const circle = vue.ref(null);
@@ -8087,7 +8087,7 @@
           return;
         circumference.value = 2 * Math.PI * circle.value.r.baseVal.value;
       });
-      vue.computed(() => `${props.circleSize}px`);
+      const circleContainerSize = vue.computed(() => `${props.circleSize}px`);
       const displayPercentage = vue.computed(() => `${props.percentage}%`);
       const slide = Gi`
   from {
@@ -8101,7 +8101,6 @@
       const commonCSS = Hi`
   --height: 8px;
   --width-transition: 0.4s ease-in-out width;
-  --animation: ${slide} 2s linear infinite;
   display: inline;
 
   .nmorph-progress__linear {
@@ -8119,12 +8118,9 @@
 
     .nmorph-progress__inner {
       position: relative;
-      width: v-bind(innerContentWidth);
       height: 100%;
-      background: v-bind(color);
       border-radius: var(--border-radius-40);
       transition: var(--width-transition);
-      animation: v-bind(animation);
     }
 
     .nmorph-progress__percentage,
@@ -8143,8 +8139,6 @@
 
   .nmorph-progress__circle {
     position: relative;
-    width: v-bind(circleContainerSize);
-    height: v-bind(circleContainerSize);
     border-radius: var(--border-radius-circular);
 
     &::after {
@@ -8180,6 +8174,7 @@
   }
 `;
       const StyledComponent = Kr.div`
+  --animation: ${slide} 2s linear infinite;
   ${commonCSS}
   .nmorph-progress__linear {
     .nmorph-progress__outer {
@@ -8196,9 +8191,16 @@
     }
   }
 
+  .nmorph-progress__inner {
+    width: ${innerContentWidth.value};
+    background: ${color.value};
+    animation: ${animation.value};
+  }
 
   .nmorph-progress__circle {
     ${nmorphInset()}
+    width: ${circleContainerSize.value};
+    height: ${circleContainerSize.value};
   }
 
   .nmorph-progress__circle-ring {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@nmorph/nmorph-ui-kit",
   "type": "module",
   "private": false,
-  "version": "1.0.75",
+  "version": "1.0.76",
   "license": "MIT",
   "engines": {
     "node": "18.13.0",