@nmorph/nmorph-ui-kit 2.2.24 → 2.2.25

package/dist/components/data/nmorph-badge/NmorphBadge.css

@@ -1 +1 @@
-.nmorph-badge{position:relative;display:inline-block;height:fit-content;--dot-size: 4px;--nmorph-badge-ribbon-height: 24px;--nmorph-badge-ribbon-corner-size: 62px;--nmorph-badge-ribbon-width: 116px;--nmorph-badge-ribbon-offset-x: 0px;--nmorph-badge-ribbon-offset-y: 0px}.nmorph-badge .nmorph-badge__container{position:absolute;display:inline-flex;justify-content:center;align-items:center;background:var(--nmorph-badge-color);border-radius:var(--default-border-radius);opacity:1}.nmorph-badge.nmorph-badge--tag{position:static;display:inline-flex}.nmorph-badge .nmorph-badge__container--tag{position:static}.nmorph-badge .nmorph-badge__content{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;min-width:calc(1em * var(--line-height-regular) + 4px);padding:2px 4px;color:var(--nmorph-light-shade-color);font-size:var(--font-size-base);line-height:var(--line-height-regular);text-align:center}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__content{font-size:var(--font-size-tiny)}.nmorph-badge.nmorph-badge--extra-small .nmorph-badge__content{font-size:var(--font-size-extra-small)}.nmorph-badge .nmorph-badge__container--hidden{opacity:0}.nmorph-badge .nmorph-badge__ribbon-frame{position:absolute;inset:0;overflow:hidden;border-radius:var(--default-border-radius);pointer-events:none}.nmorph-badge .nmorph-badge__ribbon-corner{position:absolute;width:var(--nmorph-badge-ribbon-corner-size);height:var(--nmorph-badge-ribbon-corner-size)}.nmorph-badge .nmorph-badge__container--ribbon{top:50%;left:50%;width:var(--nmorph-badge-ribbon-width);height:var(--nmorph-badge-ribbon-height);border-radius:0;box-shadow:var(--nmorph-shadow-outset)}.nmorph-badge .nmorph-badge__container--ribbon .nmorph-badge__content{width:100%;min-width:0;padding:0 var(--indentation-03);overflow:hidden;font-weight:600;font-size:var(--font-size-extra-small);white-space:nowrap;text-overflow:ellipsis;transform:translateY(-1px)}.nmorph-badge .nmorph-badge__ribbon-corner--top-left{top:var(--nmorph-badge-ribbon-offset-y);left:var(--nmorph-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-left .nmorph-badge__container--ribbon{transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right{top:var(--nmorph-badge-ribbon-offset-y);right:var(--nmorph-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right .nmorph-badge__container--ribbon{transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left{bottom:var(--nmorph-badge-ribbon-offset-y);left:var(--nmorph-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left .nmorph-badge__container--ribbon{transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right{right:var(--nmorph-badge-ribbon-offset-x);bottom:var(--nmorph-badge-ribbon-offset-y)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right .nmorph-badge__container--ribbon{transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__dot{width:var(--dot-size);height:var(--dot-size);border-radius:var(--border-radius-circular)}.nmorph-badge.nmorph-badge--tiny{--nmorph-badge-ribbon-height: 18px;--nmorph-badge-ribbon-corner-size: 50px;--nmorph-badge-ribbon-width: 92px}.nmorph-badge.nmorph-badge--extra-small{--nmorph-badge-ribbon-height: 20px;--nmorph-badge-ribbon-corner-size: 56px;--nmorph-badge-ribbon-width: 104px}
+.nmorph-badge{position:relative;display:inline-block;height:fit-content;--nmorph-badge-dot-size: 4px;--nmorph-badge-ribbon-height: 24px;--nmorph-badge-ribbon-corner-size: 62px;--nmorph-badge-ribbon-width: 116px;--nmorph-badge-ribbon-offset-x: 0px;--nmorph-badge-ribbon-offset-y: 0px}.nmorph-badge .nmorph-badge__container{position:absolute;display:inline-flex;justify-content:center;align-items:center;background:var(--nmorph-badge-color);border-radius:var(--default-border-radius);opacity:1}.nmorph-badge.nmorph-badge--tag{position:static;display:inline-flex}.nmorph-badge .nmorph-badge__container--tag{position:static}.nmorph-badge .nmorph-badge__content{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;min-width:calc(1em * var(--line-height-regular) + 4px);padding:2px 4px;color:var(--nmorph-light-shade-color);font-size:var(--font-size-base);line-height:var(--line-height-regular);text-align:center}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__content{font-size:var(--font-size-tiny)}.nmorph-badge.nmorph-badge--extra-small .nmorph-badge__content{font-size:var(--font-size-extra-small)}.nmorph-badge .nmorph-badge__container--hidden{opacity:0}.nmorph-badge .nmorph-badge__ribbon-frame{position:absolute;inset:0;overflow:hidden;border-radius:var(--default-border-radius);pointer-events:none}.nmorph-badge .nmorph-badge__ribbon-corner{position:absolute;width:var(--nmorph-badge-ribbon-corner-size);height:var(--nmorph-badge-ribbon-corner-size)}.nmorph-badge .nmorph-badge__container--ribbon{top:50%;left:50%;width:var(--nmorph-badge-ribbon-width);height:var(--nmorph-badge-ribbon-height);border-radius:0;box-shadow:var(--nmorph-shadow-outset)}.nmorph-badge .nmorph-badge__container--ribbon .nmorph-badge__content{width:100%;min-width:0;padding:0 var(--indentation-03);overflow:hidden;font-weight:600;font-size:var(--font-size-extra-small);white-space:nowrap;text-overflow:ellipsis;transform:translateY(-1px)}.nmorph-badge .nmorph-badge__ribbon-corner--top-left{top:var(--nmorph-badge-ribbon-offset-y);left:var(--nmorph-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-left .nmorph-badge__container--ribbon{transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right{top:var(--nmorph-badge-ribbon-offset-y);right:var(--nmorph-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right .nmorph-badge__container--ribbon{transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left{bottom:var(--nmorph-badge-ribbon-offset-y);left:var(--nmorph-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left .nmorph-badge__container--ribbon{transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right{right:var(--nmorph-badge-ribbon-offset-x);bottom:var(--nmorph-badge-ribbon-offset-y)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right .nmorph-badge__container--ribbon{transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__dot{width:var(--nmorph-badge-dot-size);height:var(--nmorph-badge-dot-size);border-radius:var(--border-radius-circular)}.nmorph-badge.nmorph-badge--tiny{--nmorph-badge-ribbon-height: 18px;--nmorph-badge-ribbon-corner-size: 50px;--nmorph-badge-ribbon-width: 92px}.nmorph-badge.nmorph-badge--extra-small{--nmorph-badge-ribbon-height: 20px;--nmorph-badge-ribbon-corner-size: 56px;--nmorph-badge-ribbon-width: 104px}

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

@@ -1,6 +1,6 @@
 import './NmorphBadge.css';
-import y from "./NmorphBadge.vue2.js";
-import { openBlock as o, createElementBlock as a, normalizeStyle as l, normalizeClass as i, renderSlot as s, createCommentVNode as d, createElementVNode as n, createTextVNode as t, toDisplayString as c, Fragment as m } from "vue";
+import c from "./NmorphBadge.vue2.js";
+import { openBlock as o, createElementBlock as a, normalizeStyle as r, normalizeClass as i, renderSlot as d, createCommentVNode as s, createElementVNode as n, createTextVNode as t, toDisplayString as y, Fragment as m } from "vue";
 /* empty css                 */
 import f from "../../../_virtual/_plugin-vue_export-helper.js";
 const _ = { class: "nmorph-badge__content" }, b = {
@@ -10,22 +10,22 @@ const _ = { class: "nmorph-badge__content" }, b = {
   key: 1,
   class: "nmorph-badge__content"
 };
-function h(r, p, v, e, k, V) {
-  return !e.props.disabled && (!e.props.isTag || e.shouldShowBadge) ? (o(), a(
+function h(l, v, p, e, k, T) {
+  return !e.props.disabled && (!e.isTagType || e.shouldShowBadge) ? (o(), a(
     "div",
     {
       key: 0,
       class: i(e.modifiers),
-      style: l(e.styles)
+      style: r(e.styles)
     },
     [
-      e.props.isTag ? d("v-if", !0) : s(r.$slots, "default", { key: 0 }),
+      e.isTagType ? s("v-if", !0) : d(l.$slots, "default", { key: 0 }),
       e.shouldShowBadge && e.isRibbon ? (o(), a(
         "div",
         {
           key: 1,
           class: "nmorph-badge__ribbon-frame",
-          style: l(e.ribbonFrameStyle)
+          style: r(e.ribbonFrameStyle)
         },
         [
           n(
@@ -39,16 +39,16 @@ function h(r, p, v, e, k, V) {
                 {
                   ref: "badge",
                   class: i(e.containerModifiers),
-                  style: l(e.containerStyle)
+                  style: r(e.containerStyle)
                 },
                 [
                   n("div", _, [
-                    s(r.$slots, "value", {
+                    d(l.$slots, "value", {
                       value: e.props.value,
                       displayValue: e.displayValue
                     }, () => [
                       t(
-                        c(e.displayValue),
+                        y(e.displayValue),
                         1
                         /* TEXT */
                       )
@@ -71,29 +71,29 @@ function h(r, p, v, e, k, V) {
           key: 2,
           ref: "badge",
           class: i(e.containerModifiers),
-          style: l(e.containerStyle)
+          style: r(e.containerStyle)
         },
         [
           e.isDotType ? (o(), a("div", b)) : (o(), a("div", g, [
-            e.props.isTag ? (o(), a(
+            e.isTagType ? (o(), a(
               m,
               { key: 0 },
               [
                 t(
-                  c(e.displayValue),
+                  y(e.displayValue),
                   1
                   /* TEXT */
                 )
               ],
               64
               /* STABLE_FRAGMENT */
-            )) : s(r.$slots, "value", {
+            )) : d(l.$slots, "value", {
               key: 1,
               value: e.props.value,
               displayValue: e.displayValue
             }, () => [
               t(
-                c(e.displayValue),
+                y(e.displayValue),
                 1
                 /* TEXT */
               )
@@ -102,13 +102,13 @@ function h(r, p, v, e, k, V) {
         ],
         6
         /* CLASS, STYLE */
-      )) : d("v-if", !0)
+      )) : s("v-if", !0)
     ],
     6
     /* CLASS, STYLE */
-  )) : e.props.isTag ? d("v-if", !0) : s(r.$slots, "default", { key: 1 });
+  )) : e.isTagType ? s("v-if", !0) : d(l.$slots, "default", { key: 1 });
 }
-const w = /* @__PURE__ */ f(y, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-badge/NmorphBadge.vue"]]);
+const w = /* @__PURE__ */ f(c, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-badge/NmorphBadge.vue"]]);
 export {
   w as default
 };

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

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