adverich-kun-ui 0.1.117 → 0.1.119

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

@@ -1,13 +1,13 @@
-import { computed as u, createElementBlock as i, createCommentVNode as n, openBlock as a, mergeProps as h, withKeys as w, withModifiers as z, createElementVNode as f, normalizeClass as r, createVNode as m, toDisplayString as c, createBlock as g, withCtx as y, createTextVNode as d } from "vue";
-import x from "../../../KunIcon/src/components/KunIcon.vue.js";
-import b from "../../../KunBtn/src/components/KunBtn.vue.js";
-const B = {
+import { onMounted as h, computed as m, createElementBlock as i, createCommentVNode as n, openBlock as a, mergeProps as w, withKeys as z, withModifiers as B, createElementVNode as u, normalizeClass as r, createVNode as g, toDisplayString as c, createBlock as y, withCtx as x, createTextVNode as f } from "vue";
+import b from "../../../KunIcon/src/components/KunIcon.vue.js";
+import C from "../../../KunBtn/src/components/KunBtn.vue.js";
+const V = {
   key: 0,
   class: "flex justify-center py-4"
-}, V = {
+}, N = {
   key: 2,
   class: "flex gap-4 mt-4"
-}, I = {
+}, K = {
   __name: "KunAlert",
   props: {
     modelValue: Boolean,
@@ -80,30 +80,20 @@ const B = {
       type: String,
       default: "p-2"
     },
-    margin: {
-      type: String,
-      default: "m-2"
-    },
-    fullscreen: {
-      type: Boolean,
-      default: !1
-    },
-    persistent: {
-      type: Boolean,
-      default: !1
-    },
-    persistentLabel: {
-      type: String,
-      default: "Aceptar"
-    },
-    actionLabel: {
-      type: String,
-      default: ""
-    }
+    margin: { type: String, default: "m-2" },
+    fullscreen: { type: Boolean, default: !1 },
+    persistent: { type: Boolean, default: !1 },
+    persistentLabel: { type: String, default: "Aceptar" },
+    actionLabel: { type: String, default: "" },
+    timeout: { type: Number, default: 2500 }
   },
   emits: ["update:modelValue", "action"],
-  setup(e, { emit: C }) {
-    const l = e, S = C, $ = u(() => {
+  setup(e, { emit: S }) {
+    const l = e, d = S;
+    h(() => setTimeout(() => {
+      d("update:modelValue", !1);
+    }, l.timeout));
+    const p = m(() => {
       if (l.fullscreen) return `fixed inset-0 flex items-center justify-center ${l.margin}`;
       const t = l.margin;
       switch (l.position) {
@@ -128,35 +118,35 @@ const B = {
         default:
           return `fixed top-0 left-1/2 transform -translate-x-1/2 ${t}`;
       }
-    }), p = u(() => `${l.fullscreen ? "w-full h-full" : "w-fit"} ${l.transition}`), s = () => {
-      S("update:modelValue", !1);
+    }), $ = m(() => `${l.fullscreen ? "w-full h-full" : "w-fit"} ${l.transition}`), s = () => {
+      d("update:modelValue", !1);
     }, k = () => {
       !l.persistent && !l.fullscreen && s();
     }, v = (t) => {
       !l.persistent && l.fullscreen && s();
     };
-    return (t, o) => e.modelValue ? (a(), i("div", h({
+    return (t, o) => e.modelValue ? (a(), i("div", w({
       key: 0,
-      class: [p.value, $.value],
+      class: ["px-2", [$.value, p.value]],
       style: { zIndex: e.zIndex },
-      onClick: z(k, ["self"]),
-      onKeydown: w(v, ["esc"]),
+      onClick: B(k, ["self"]),
+      onKeydown: z(v, ["esc"]),
       tabindex: "0"
     }, t.$attrs), [
-      f("div", {
+      u("div", {
         class: r([e.alertClass, e.textColor, e.bgColor, e.borderColor])
       }, [
-        e.icon ? (a(), i("div", B, [
-          f("div", {
+        e.icon ? (a(), i("div", V, [
+          u("div", {
             class: r(["rounded-full p-4", e.iconBgColor])
           }, [
-            m(x, {
+            g(b, {
               icon: e.icon,
               size: e.iconSize
             }, null, 8, ["icon", "size"])
           ], 2)
         ])) : n("", !0),
-        f("div", {
+        u("div", {
           class: r(["text-center flex flex-col justify-center items-center", e.paddingContainer])
         }, [
           e.title ? (a(), i("div", {
@@ -167,37 +157,37 @@ const B = {
             key: 1,
             class: r(e.messageClass)
           }, c(e.message), 3)) : n("", !0),
-          e.persistent ? (a(), i("div", V, [
-            e.actionLabel ? (a(), g(b, {
+          e.persistent ? (a(), i("div", N, [
+            e.actionLabel ? (a(), y(C, {
               key: 0,
               onClick: o[0] || (o[0] = (L) => t.$emit("action"))
             }, {
-              default: y(() => [
-                d(c(e.actionLabel), 1)
+              default: x(() => [
+                f(c(e.actionLabel), 1)
               ]),
               _: 1
             })) : n("", !0),
-            e.closable ? n("", !0) : (a(), g(b, {
+            e.closable ? n("", !0) : (a(), y(C, {
               key: 1,
               onClick: s
             }, {
-              default: y(() => [
-                d(c(e.persistentLabel), 1)
+              default: x(() => [
+                f(c(e.persistentLabel), 1)
               ]),
               _: 1
             }))
           ])) : n("", !0),
           e.closable ? (a(), i("button", {
             key: 3,
-            class: "absolute top-0 right-1 text-xl focus:outline-none cursor-pointer",
+            class: "absolute top-0 right-1 px-1 text-xl focus:outline-none cursor-pointer",
             onClick: s
           }, [
-            m(x, {
+            g(b, {
               icon: "hand",
               size: "text-base",
               class: "mr-1"
             }),
-            o[1] || (o[1] = d(" × "))
+            o[1] || (o[1] = f(" × "))
           ])) : n("", !0)
         ], 2)
       ], 2)
@@ -205,5 +195,5 @@ const B = {
   }
 };
 export {
-  I as default
+  K as default
 };

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

@@ -0,0 +1,177 @@
+import { getCurrentInstance as F, createElementBlock as s, openBlock as l, createCommentVNode as i, createElementVNode as d, normalizeClass as u, unref as t, toDisplayString as p, mergeProps as M, Fragment as N, renderList as B } from "vue";
+import { KunNumberFieldProps as K } from "../composables/KunNumberFieldProps.js";
+import { useKunNumberField as A } from "../composables/useKunNumberFieldComposable.js";
+const D = { class: "w-full flex flex-col relative" }, z = {
+  key: 0,
+  class: "h-full"
+}, E = ["disabled"], P = {
+  key: 1,
+  class: "mr-2"
+}, $ = {
+  key: 2,
+  class: "flex items-center justify-center min-w-[32px] h-full px-1"
+}, H = ["value", "placeholder", "readonly", "disabled", "maxlength", "aria-invalid"], L = ["disabled"], S = {
+  key: 4,
+  class: "flex items-center h-full"
+}, q = ["disabled"], G = ["disabled"], J = {
+  key: 5,
+  class: "flex flex-col items-center justify-center border-l border-slate-600"
+}, O = ["disabled"], Q = ["disabled"], R = {
+  key: 6,
+  class: "flex items-center justify-center min-w-[32px] h-full px-1 cursor-pointer"
+}, T = {
+  key: 7,
+  class: "h-full"
+}, U = ["disabled"], W = {
+  key: 8,
+  class: "ml-2"
+}, X = {
+  key: 0,
+  class: "h-[1.25rem]"
+}, Y = {
+  key: 0,
+  class: "text-red-500 text-sm text-center"
+}, Z = { key: 0 }, _ = { key: 1 }, ee = {
+  key: 1,
+  class: "text-xs text-center"
+}, se = {
+  __name: "KunNumberField",
+  props: K,
+  emits: ["update:modelValue"],
+  setup(m, { emit: v }) {
+    const g = m, w = v, b = `number-input-${F().uid}`, {
+      inputValue: y,
+      numberInput: C,
+      inputKey: x,
+      updateValue: I,
+      onIncrement: n,
+      onDecrement: a,
+      onClear: c,
+      focus: f,
+      handleFocus: h,
+      isActive: V,
+      handleBlur: k
+    } = A(g, w);
+    return (e, o) => (l(), s("div", D, [
+      e.label ? (l(), s("label", {
+        key: 0,
+        for: b,
+        class: u([
+          e.labelColor,
+          "absolute left-2 transition-all duration-200 ease-in-out pointer-events-none select-none z-10",
+          t(V) || e.placeholder ? "-top-2.25 text-xs opacity-80" : "top-3 text-sm opacity-80"
+        ])
+      }, p(e.label), 3)) : i("", !0),
+      d("div", M({ class: "w-full flex flex-col justify-center relative" }, e.$attrs), [
+        d("div", {
+          class: u(["flex items-center w-full h-full border", [
+            e.bgInput,
+            e.rounded,
+            t(f) ? "border-blue-600 shadow-[0_0_0_1px_rgba(59,130,246,0.5)]" : e.borderColor,
+            e.disabled ? "opacity-60 cursor-not-allowed" : "cursor-text",
+            e.error ? "bg-red-200 dark:bg-red-900" : ""
+          ]])
+        }, [
+          e.controlVariant === "split" ? (l(), s("div", z, [
+            d("button", {
+              type: "button",
+              class: "p-3 text-lg border-r border-slate-600 text-black dark:text-white disabled:opacity-50 cursor-pointer hover:opacity-80",
+              onClick: o[0] || (o[0] = (...r) => t(a) && t(a)(...r)),
+              disabled: e.disabled || e.readonly
+            }, "−", 8, E)
+          ])) : i("", !0),
+          e.prefix ? (l(), s("div", P, p(e.prefix), 1)) : i("", !0),
+          e.prependIcon ? (l(), s("div", $, [
+            d("i", {
+              class: u(e.prependIcon)
+            }, null, 2)
+          ])) : i("", !0),
+          (l(), s("input", {
+            id: b,
+            ref_key: "numberInput",
+            ref: C,
+            key: t(x),
+            type: "text",
+            value: t(y),
+            placeholder: e.placeholder,
+            readonly: e.readonly,
+            disabled: e.disabled,
+            maxlength: e.maxlength,
+            autocomplete: "off",
+            class: u(["w-full h-full bg-transparent rounded focus:outline-none p-3", [e.textColor, e.placeholderColor, e.textCenter ? "text-center" : ""]]),
+            "aria-invalid": e.error ? "true" : "false",
+            onInput: o[1] || (o[1] = (r) => t(I)(r.target.value)),
+            onFocus: o[2] || (o[2] = (...r) => t(h) && t(h)(...r)),
+            onBlur: o[3] || (o[3] = (...r) => t(k) && t(k)(...r))
+          }, null, 42, H)),
+          e.clearable && t(y) != null ? (l(), s("button", {
+            key: 3,
+            type: "button",
+            onClick: o[4] || (o[4] = (...r) => t(c) && t(c)(...r)),
+            class: u(["ml-2", e.textColor]),
+            disabled: e.disabled || e.readonly
+          }, " × ", 10, L)) : i("", !0),
+          e.controlVariant === "default" ? (l(), s("div", S, [
+            d("button", {
+              type: "button",
+              class: "flex items-center border-l border-slate-600 p-3 justify-center text-black dark:text-white hover:text-black/80 dark:hover:text-white/80 disabled:opacity-50 cursor-pointer hover:opacity-80",
+              onClick: o[5] || (o[5] = (...r) => t(n) && t(n)(...r)),
+              disabled: e.disabled || e.readonly
+            }, " ▲ ", 8, q),
+            d("button", {
+              type: "button",
+              class: "flex items-center border-l border-slate-600 p-3 justify-center text-black dark:text-white hover:text-black/80 dark:hover:text-white/80 disabled:opacity-50 cursor-pointer hover:opacity-80",
+              onClick: o[6] || (o[6] = (...r) => t(a) && t(a)(...r)),
+              disabled: e.disabled || e.readonly
+            }, " ▼ ", 8, G)
+          ])) : e.controlVariant === "stacked" ? (l(), s("div", J, [
+            d("div", {
+              class: "border-b border-slate-600 pb-1 px-3 flex hover:opacity-80 cursor-pointer",
+              onClick: o[7] || (o[7] = (...r) => t(n) && t(n)(...r))
+            }, [
+              d("button", {
+                type: "button",
+                class: "text-xs text-black dark:text-white hover:text-black/80 dark:hover:text-white/80 disabled:opacity-50 cursor-pointer",
+                disabled: e.disabled || e.readonly
+              }, "▲", 8, O)
+            ]),
+            d("div", {
+              class: "border-t border-slate-600 pt-1 px-3 flex hover:opacity-80 cursor-pointer",
+              onClick: o[8] || (o[8] = (...r) => t(a) && t(a)(...r))
+            }, [
+              d("button", {
+                type: "button",
+                class: "text-xs text-black dark:text-white hover:text-black/80 dark:hover:text-white/80 disabled:opacity-50 cursor-pointer",
+                disabled: e.disabled || e.readonly
+              }, "▼", 8, Q)
+            ])
+          ])) : i("", !0),
+          e.appendIcon ? (l(), s("div", R, [
+            d("i", {
+              class: u(e.appendIcon)
+            }, null, 2)
+          ])) : i("", !0),
+          e.controlVariant === "split" ? (l(), s("div", T, [
+            d("button", {
+              type: "button",
+              class: "p-3 text-lg border-l border-slate-600 text-black dark:text-white disabled:opacity-50 cursor-pointer hover:opacity-80",
+              onClick: o[9] || (o[9] = (...r) => t(n) && t(n)(...r)),
+              disabled: e.disabled || e.readonly
+            }, "+", 8, U)
+          ])) : i("", !0),
+          e.suffix ? (l(), s("div", W, p(e.suffix), 1)) : i("", !0)
+        ], 2),
+        e.hideDetails ? i("", !0) : (l(), s("div", X, [
+          e.error || e.errorMessages ? (l(), s("div", Y, [
+            Array.isArray(e.errorMessages) ? (l(), s("div", Z, [
+              (l(!0), s(N, null, B(e.errorMessages, (r, j) => (l(), s("div", { key: j }, p(r), 1))), 128))
+            ])) : typeof e.errorMessages == "string" ? (l(), s("div", _, p(e.errorMessages), 1)) : i("", !0)
+          ])) : e.hint && (e.persistentHint || t(f)) ? (l(), s("div", ee, p(e.hint), 1)) : i("", !0)
+        ]))
+      ], 16)
+    ]));
+  }
+};
+export {
+  se as default
+};

package/dist/components/KunNumberField/src/composables/KunNumberFieldProps.js

@@ -0,0 +1,48 @@
+const e = {
+  // Core
+  modelValue: { type: [Number, String], default: null },
+  type: { type: String, default: "text" },
+  placeholder: { type: String, default: "" },
+  label: { type: String, default: "" },
+  dirty: { type: Boolean, default: !1 },
+  // Decoradores
+  prefix: { type: String, default: "" },
+  suffix: { type: String, default: "" },
+  prependIcon: String,
+  appendIcon: String,
+  // Estilo y diseño
+  rounded: { type: String, default: "rounded" },
+  borderColor: { type: String, default: "border-gray-300 dark:border-gray-700" },
+  textColor: { type: String, default: "text-black dark:text-white" },
+  labelColor: { type: String, default: "text-black/80 dark:text-white/80" },
+  placeholderColor: { type: String, default: "placeholder-black/60 dark:placeholder-white/60" },
+  bgInput: { type: String, default: "bg-slate-200 dark:bg-slate-800" },
+  textCenter: { type: Boolean, default: !1 },
+  controlVariant: { type: String, default: "default" },
+  // Estado
+  error: { type: Boolean, default: !1 },
+  errorMessages: [String, Array],
+  rules: { type: Array, default: () => [] },
+  disabled: { type: Boolean, default: !1 },
+  readonly: { type: Boolean, default: !1 },
+  clearable: { type: Boolean, default: !1 },
+  maxlength: { type: [Number, String], default: null },
+  counter: { type: Boolean, default: !1 },
+  debounce: { type: Number, default: 300 },
+  // Ayuda y detalles
+  hint: { type: String, default: "" },
+  persistentHint: { type: Boolean, default: !1 },
+  hideDetails: { type: Boolean, default: !1 },
+  validateOnBlur: { type: Boolean, default: !1 },
+  // Reglas numéricas
+  min: { type: Number, default: -1 / 0 },
+  max: { type: Number, default: 1 / 0 },
+  step: { type: Number, default: 1 },
+  locale: { type: String, default: "es-AR" },
+  separator: { type: String, default: "." },
+  useGrouping: { type: Boolean, default: !0 },
+  precision: { type: Number, default: 2 }
+};
+export {
+  e as KunNumberFieldProps
+};

package/dist/components/KunNumberField/src/composables/numberFormatUtils.js

@@ -0,0 +1,7 @@
+function n(r, l = ",") {
+  const e = r.replace(/[^\d.,]/g, "");
+  return l === "," ? e.replace(/\./g, ",") : e.replace(/,/g, ".");
+}
+export {
+  n as normalizeNumber
+};

package/dist/components/KunNumberField/src/composables/useKunNumberFieldComposable.js

@@ -0,0 +1,60 @@
+import { ref as a, computed as p, watch as b, nextTick as g } from "vue";
+import { normalizeNumber as y } from "./numberFormatUtils.js";
+function F(u, o) {
+  const e = a(u.modelValue), r = a(null), f = a(0);
+  function i(n) {
+    if (!n) {
+      e.value = "0", o("update:modelValue", 0);
+      return;
+    }
+    const t = y(n, u.separator).split(u.separator);
+    if (t.length > 2) {
+      d();
+      return;
+    }
+    t.length === 2 && t[1].length > u.precision && (t[1] = t[1].slice(0, u.precision));
+    const c = t.join(u.separator);
+    c === e.value ? d() : e.value = c, o("update:modelValue", c || 0);
+  }
+  function d() {
+    f.value++, g(() => {
+      var n;
+      (n = r.value) == null || n.focus();
+    });
+  }
+  function m() {
+    i((e.value || 0) + u.step);
+  }
+  function s() {
+    i((e.value || 0) - u.step);
+  }
+  function v() {
+    e.value = null, o("update:modelValue", null);
+  }
+  const l = a(!1);
+  function V() {
+    l.value = !0, e.value || (e.value = "");
+  }
+  function h() {
+    l.value = !1, e.value || (e.value = 0);
+  }
+  const I = p(() => l.value || !!u.modelValue || u.dirty);
+  return b(() => u.modelValue, (n) => {
+    e.value = n;
+  }), {
+    inputValue: e,
+    numberInput: r,
+    inputKey: f,
+    updateValue: i,
+    onIncrement: m,
+    onDecrement: s,
+    onClear: v,
+    focus: l,
+    handleFocus: V,
+    isActive: I,
+    handleBlur: h
+  };
+}
+export {
+  F as useKunNumberField
+};

package/dist/index.js

@@ -8,8 +8,8 @@ import u from "./components/KunBudge/src/components/KunBudge.vue.js";
 import f from "./components/KunCard/src/components/KunCard.vue.js";
 import K from "./components/KunCardActions/src/components/KunCardActions.vue.js";
 import _ from "./components/KunCardItem/src/components/KunCardItem.vue.js";
-import p from "./components/KunCardSubtitle/src/components/KunCardSubtitle.vue.js";
-import e from "./components/KunCardText/src/components/KunCardText.vue.js";
+import e from "./components/KunCardSubtitle/src/components/KunCardSubtitle.vue.js";
+import p from "./components/KunCardText/src/components/KunCardText.vue.js";
 import c from "./components/KunCardTitle/src/components/KunCardTitle.vue.js";
 import $ from "./components/KunChip/src/components/KunChip.vue.js";
 import l from "./components/KunCol/src/components/KunCol.vue.js";
@@ -25,17 +25,18 @@ import x from "./components/KunListItem/src/components/KunListItem.vue.js";
 import h from "./components/KunListItemAction/src/components/KunListItemAction.vue.js";
 import g from "./components/KunListItemAvatar/src/components/KunListItemAvatar.vue.js";
 import w from "./components/KunListItemSubtitle/src/components/KunListItemSubtitle.vue.js";
-import v from "./components/KunListItemTitle/src/components/KunListItemTitle.vue.js";
-import B from "./components/KunListItemText/src/components/KunListItemText.vue.js";
-import F from "./components/KunListSubheader/src/components/KunListSubheader.vue.js";
+import F from "./components/KunListItemTitle/src/components/KunListItemTitle.vue.js";
+import v from "./components/KunListItemText/src/components/KunListItemText.vue.js";
+import B from "./components/KunListSubheader/src/components/KunListSubheader.vue.js";
 import y from "./components/kunMenu/src/components/kunMenu.vue.js";
-import D from "./components/KunLoaderCircular/src/components/KunLoaderCircular.vue.js";
-import G from "./components/KunRow/src/components/KunRow.vue.js";
-import R from "./components/KunSlider/src/components/KunSlider.vue.js";
-import j from "./components/KunSpacer/src/components/KunSpacer.vue.js";
-import k from "./components/KunSwitch/src/components/KunSwitch.vue.js";
-import q from "./components/KunTextField/src/components/KunTextField.vue.js";
-import M from "./components/KunToolbar/src/components/KunToolbar.vue.js";
+import D from "./components/KunNumberField/src/components/KunNumberField.vue.js";
+import G from "./components/KunLoaderCircular/src/components/KunLoaderCircular.vue.js";
+import R from "./components/KunRow/src/components/KunRow.vue.js";
+import j from "./components/KunSlider/src/components/KunSlider.vue.js";
+import k from "./components/KunSpacer/src/components/KunSpacer.vue.js";
+import q from "./components/KunSwitch/src/components/KunSwitch.vue.js";
+import M from "./components/KunTextField/src/components/KunTextField.vue.js";
+import N from "./components/KunToolbar/src/components/KunToolbar.vue.js";
 import z from "./components/KunTooltip/src/components/KunTooltip.vue.js";
 const n = {
   KunAlert: r,
@@ -47,9 +48,9 @@ const n = {
   KunCard: f,
   KunCardActions: K,
   KunCardItem: _,
-  KunCardSubtitle: p,
-  KunListItemTitle: v,
-  KunCardText: e,
+  KunCardSubtitle: e,
+  KunListItemTitle: F,
+  KunCardText: p,
   KunCardTitle: c,
   KunChip: $,
   KunCol: l,
@@ -65,19 +66,20 @@ const n = {
   KunListItemAction: h,
   KunListItemAvatar: g,
   KunListItemSubtitle: w,
-  KunListItemText: B,
-  KunListSubheader: F,
+  KunListItemText: v,
+  KunListSubheader: B,
   KunMenu: y,
-  KunLoaderCircular: D,
-  KunRow: G,
-  KunSlider: R,
-  KunSpacer: j,
-  KunSwitch: k,
-  KunTextField: q,
-  KunToolbar: M,
+  KunNumberField: D,
+  KunLoaderCircular: G,
+  KunRow: R,
+  KunSlider: j,
+  KunSpacer: k,
+  KunSwitch: q,
+  KunTextField: M,
+  KunToolbar: N,
   KunTooltip: z
 };
-function hm(i) {
+function wm(i) {
   for (const m in n)
     i.component(m, n[m]);
 }
@@ -91,8 +93,8 @@ export {
   f as KunCard,
   K as KunCardActions,
   _ as KunCardItem,
-  p as KunCardSubtitle,
-  e as KunCardText,
+  e as KunCardSubtitle,
+  p as KunCardText,
   c as KunCardTitle,
   $ as KunChip,
   l as KunCol,
@@ -108,17 +110,17 @@ export {
   h as KunListItemAction,
   g as KunListItemAvatar,
   w as KunListItemSubtitle,
-  B as KunListItemText,
-  v as KunListItemTitle,
-  F as KunListSubheader,
-  D as KunLoaderCircular,
+  v as KunListItemText,
+  F as KunListItemTitle,
+  B as KunListSubheader,
+  G as KunLoaderCircular,
   y as KunMenu,
-  G as KunRow,
-  R as KunSlider,
-  j as KunSpacer,
-  k as KunSwitch,
-  q as KunTextField,
-  M as KunToolbar,
+  R as KunRow,
+  j as KunSlider,
+  k as KunSpacer,
+  q as KunSwitch,
+  M as KunTextField,
+  N as KunToolbar,
   z as KunTooltip,
-  hm as install
+  wm as install
 };

package/package.json

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