adverich-kun-ui 0.1.309 → 0.1.310

package/dist/components/KunBadge/src/components/KunBadge.vue.js

@@ -1,5 +1,5 @@
-import { computed as i, createElementBlock as o, openBlock as r, renderSlot as s, createCommentVNode as n, mergeProps as d, toDisplayString as u } from "vue";
-const f = { class: "relative inline-block" }, p = { key: 0 }, m = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+import { computed as l, createElementBlock as i, openBlock as a, renderSlot as u, createCommentVNode as s, mergeProps as d, toDisplayString as p } from "vue";
+const m = { class: "relative inline-block" }, g = { key: 0 }, y = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
   __name: "KunBadge",
   props: {
     text: { type: [String, Number], default: "" },
@@ -9,32 +9,76 @@ const f = { class: "relative inline-block" }, p = { key: 0 }, m = /* @__PURE__ *
     fontWeight: { type: String, default: "font-bold" },
     rounded: { type: String, default: "rounded-full" },
     dot: { type: Boolean, default: !1 },
-    // Modo punto
-    visible: { type: Boolean, default: !0 }
-    // Mostrar u ocultar
+    visible: { type: Boolean, default: !0 },
+    position: {
+      type: String,
+      default: "top right",
+      validator: (t) => [
+        "top left",
+        "top center",
+        "top right",
+        "center left",
+        "center center",
+        "center right",
+        "bottom left",
+        "bottom center",
+        "bottom right"
+      ].includes(t)
+    },
+    ejeX: { type: Number, default: 0 },
+    // desplazamiento horizontal
+    ejeY: { type: Number, default: 0 }
+    // desplazamiento vertical
   },
-  setup(e) {
-    const t = e, a = i(() => [
+  setup(t) {
+    const e = t;
+    l(() => [
       "absolute -top-1 -right-1 flex items-center justify-center px-2 py-1",
       "transform translate-x-1/2 -translate-y-1/2",
       "min-w-[20px] min-h-[20px]",
-      t.bgColor,
-      t.textColor,
-      t.textSize,
-      t.fontWeight,
-      t.rounded
+      e.bgColor,
+      e.textColor,
+      e.textSize,
+      e.fontWeight,
+      e.rounded
     ].filter(Boolean));
-    return (l, c) => (r(), o("div", f, [
-      s(l.$slots, "default"),
-      e.visible ? (r(), o("div", d({
+    const c = l(() => {
+      const o = {
+        top: "top-0",
+        center: "top-1/2",
+        bottom: "bottom-0",
+        left: "left-0",
+        right: "right-0",
+        "center-x": "left-1/2",
+        "center-y": "top-1/2"
+      }, [n, r] = e.position.split(" ");
+      return [
+        o[n] || "",
+        r === "center" ? "left-1/2" : o[r],
+        n === "center" ? "top-1/2" : "",
+        "absolute",
+        "transform",
+        r === "center" ? "-translate-x-1/2" : "",
+        n === "center" ? "-translate-y-1/2" : ""
+      ].filter(Boolean);
+    }), f = l(() => ({
+      transform: `
+    ${e.position.includes("center") ? "translate(-50%, -50%)" : ""}
+    translate(${e.ejeX}px, ${e.ejeY}px)
+  `.trim()
+    }));
+    return (o, n) => (a(), i("div", m, [
+      u(o.$slots, "default"),
+      t.visible ? (a(), i("div", d({
         key: 0,
-        class: a.value
-      }, l.$attrs), [
-        e.dot ? n("", !0) : (r(), o("span", p, u(e.text), 1))
-      ], 16)) : n("", !0)
+        class: [...c.value, t.bgColor, t.textColor, t.textSize, t.fontWeight, t.rounded, "px-2 py-1 min-w-[20px] min-h-[20px] flex items-center justify-center"],
+        style: f.value
+      }, o.$attrs), [
+        t.dot ? s("", !0) : (a(), i("span", g, p(t.text), 1))
+      ], 16)) : s("", !0)
     ]));
   }
 });
 export {
-  m as default
+  y as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adverich-kun-ui",
-  "version": "0.1.309",
+  "version": "0.1.310",
   "type": "module",
   "description": "Una librería de componentes Vue.js con Tailwind CSS",
   "main": "dist/index.js",