@nmorph/nmorph-ui-kit 2.2.26 → 2.2.27

package/dist/components/data/nmorph-badge/NmorphBadge.vue2.js

@@ -1,7 +1,7 @@
 import './NmorphBadge.css';
-import { defineComponent as N, computed as t, ref as b, onMounted as B, watch as I, nextTick as T } from "vue";
+import { defineComponent as N, computed as t, ref as b, onMounted as I, watch as T, nextTick as V } from "vue";
 import { useModifiers as p } from "../../../utils/create-modifiers.js";
-const X = /* @__PURE__ */ N({
+const F = /* @__PURE__ */ N({
   __name: "NmorphBadge",
   props: {
     value: { type: [Number, String], required: !1, default: void 0 },
@@ -11,6 +11,7 @@ const X = /* @__PURE__ */ N({
     isDot: { type: Boolean, required: !1, default: !1 },
     isTag: { type: Boolean, required: !1, default: !1 },
     hidden: { type: Boolean, required: !1, default: !1 },
+    hideOnFalsyValue: { type: Boolean, required: !1, default: !1 },
     color: { type: String, required: !1, default: "var(--nmorph-accent-color)" },
     size: { type: String, required: !1, default: "base" },
     offsetY: { type: Number, required: !1, default: 0 },
@@ -18,57 +19,60 @@ const X = /* @__PURE__ */ N({
     zIndex: { type: Number, required: !1, default: 1 },
     disabled: { type: Boolean, required: !1, default: !1 }
   },
-  setup(m, { expose: y }) {
-    y();
-    const e = m, o = t(() => e.type !== "default" ? e.type : e.isDot ? "dot" : e.isTag ? "tag" : "default"), c = t(() => o.value === "dot"), n = t(() => o.value === "tag"), r = t(() => o.value === "ribbon"), g = t(
+  setup(m, { expose: g }) {
+    g();
+    const e = m, o = t(() => e.type !== "default" ? e.type : e.isDot ? "dot" : e.isTag ? "tag" : "default"), c = t(() => o.value === "dot"), n = t(() => o.value === "tag"), a = t(() => o.value === "ribbon"), h = t(
       () => p({
         "nmorph-badge": [
           `${e.hidden && "hidden"}`,
           `${n.value && "tag"}`,
-          `${r.value && "ribbon"}`,
-          `${r.value && `ribbon-${e.ribbonCorner}`}`,
+          `${a.value && "ribbon"}`,
+          `${a.value && `ribbon-${e.ribbonCorner}`}`,
           e.size
         ]
       })
-    ), h = t(
+    ), x = t(
       () => p({
         "nmorph-badge__container": [
           `${e.hidden && "hidden"}`,
           `${n.value && "tag"}`,
-          `${r.value && "ribbon"}`,
-          `${r.value && `ribbon-${e.ribbonCorner}`}`
+          `${a.value && "ribbon"}`,
+          `${a.value && `ribbon-${e.ribbonCorner}`}`
         ]
       })
-    ), x = t(
+    ), $ = t(
       () => p({
         "nmorph-badge__ribbon-corner": [`${e.ribbonCorner}`]
       })
-    ), $ = t(() => typeof Number(e.value) == "number" && Number(e.value) > e.max ? `${e.max}+` : e.value), _ = t(() => c.value || e.value !== void 0), i = t(() => {
-      const a = `${(s?.value / 2 + e.offsetX) * -1}px`, C = `${(d?.value / 2 + e.offsetY) * -1}px`;
+    ), q = t(() => typeof Number(e.value) == "number" && Number(e.value) > e.max ? `${e.max}+` : e.value), v = t(() => e.hideOnFalsyValue && !e.value), _ = t(() => (c.value || e.value !== void 0) && !v.value), u = t(() => {
+      const r = `${(s?.value / 2 + e.offsetX) * -1}px`, C = `${(d?.value / 2 + e.offsetY) * -1}px`;
       return {
-        x: a,
+        x: r,
         y: C
       };
-    }), q = t(() => n.value || r.value ? {
+    }), z = t(() => n.value || a.value ? {
       zIndex: e.zIndex
     } : {
-      right: i.value.x,
-      top: i.value.y,
+      right: u.value.x,
+      top: u.value.y,
       zIndex: e.zIndex
-    }), l = (a) => typeof a == "number" ? `${a}px` : a, u = b(null), s = b(0), d = b(0), z = t(() => ({
+    }), i = (r) => typeof r == "number" ? `${r}px` : r, l = b(null), s = b(0), d = b(0), S = t(() => ({
       "--nmorph-badge-color": e.color,
-      ...e.offsetX !== 0 && { "--nmorph-badge-ribbon-offset-x": l(e.offsetX) },
-      ...e.offsetY !== 0 && { "--nmorph-badge-ribbon-offset-y": l(e.offsetY) }
+      ...e.offsetX !== 0 && { "--nmorph-badge-ribbon-offset-x": i(e.offsetX) },
+      ...e.offsetY !== 0 && { "--nmorph-badge-ribbon-offset-y": i(e.offsetY) }
     })), f = async () => {
-      await T(), !(!u.value || n.value || r.value) && (s.value = u.value.clientWidth, d.value = u.value.clientHeight);
-    }, S = t(() => ({
+      await V(), !(!l.value || n.value || a.value) && (s.value = l.value.clientWidth, d.value = l.value.clientHeight);
+    }, B = t(() => ({
       zIndex: e.zIndex
     }));
-    B(f), I(() => [e.value, e.max, o.value, e.ribbonCorner, e.size], f);
-    const v = { props: e, resolvedType: o, isDotType: c, isTagType: n, isRibbon: r, modifiers: g, containerModifiers: h, ribbonCornerModifiers: x, displayValue: $, shouldShowBadge: _, appliedOffset: i, containerStyle: q, getCssSize: l, badge: u, badgeWidth: s, badgeHeight: d, styles: z, updateBadgeSize: f, ribbonFrameStyle: S };
-    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
+    I(f), T(
+      () => [e.value, e.max, o.value, e.ribbonCorner, e.size, e.hideOnFalsyValue],
+      f
+    );
+    const y = { props: e, resolvedType: o, isDotType: c, isTagType: n, isRibbon: a, modifiers: h, containerModifiers: x, ribbonCornerModifiers: $, displayValue: q, shouldHideOnFalsyValue: v, shouldShowBadge: _, appliedOffset: u, containerStyle: z, getCssSize: i, badge: l, badgeWidth: s, badgeHeight: d, styles: S, updateBadgeSize: f, ribbonFrameStyle: B };
+    return Object.defineProperty(y, "__isScriptSetup", { enumerable: !1, value: !0 }), y;
   }
 });
 export {
-  X as default
+  F as default
 };