adverich-kun-ui 0.1.613 → 0.1.614

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

@@ -1,10 +1,7 @@
-import { ref as f, watch as E, computed as m, openBlock as l, createElementBlock as o, toDisplayString as a, createCommentVNode as i, createElementVNode as y, mergeProps as M, renderSlot as b, unref as k, withModifiers as K, Fragment as P, renderList as j, createTextVNode as D } from "vue";
+import { ref as h, watch as M, computed as f, openBlock as l, createElementBlock as o, normalizeClass as K, toDisplayString as a, createCommentVNode as u, createElementVNode as y, mergeProps as L, renderSlot as b, unref as k, withModifiers as P, Fragment as j, renderList as x, createTextVNode as D } from "vue";
 import { renderIconSlot as g } from "../../../../utils/renderIcon.js";
 import { kunFileInputProps as G } from "../composables/kunFileInputProps.js";
-const L = { class: "relative w-full" }, T = {
-  key: 0,
-  class: "block text-sm font-medium mb-1"
-}, q = { key: 0 }, H = ["multiple", "disabled"], J = { class: "flex-1 truncate" }, O = { key: 0 }, Q = {
+const T = { class: "relative flex w-full flex-col" }, q = { key: 0 }, H = ["multiple", "disabled"], J = { class: "flex-1 truncate" }, O = { key: 0 }, Q = {
   key: 1,
   class: "text-gray-400"
 }, U = { key: 0 }, W = { key: 0 }, X = { key: 1 }, Y = {
@@ -13,13 +10,13 @@ const L = { class: "relative w-full" }, T = {
 }, Z = {
   key: 0,
   class: "text-red-500"
-}, x = {
+}, ee = {
   key: 1,
   class: "text-gray-500"
-}, ee = {
+}, te = {
   key: 2,
   class: "mt-1 text-xs text-gray-400 text-right"
-}, te = { key: 0 }, re = {
+}, le = { key: 0 }, re = {
   __name: "KunFileInput",
   props: G,
   emits: [
@@ -28,64 +25,70 @@ const L = { class: "relative w-full" }, T = {
     "click:control",
     "update:focused"
   ],
-  setup(w, { expose: S, emit: $ }) {
-    const u = w, c = $, B = f(null), v = f(!1), d = f([]), r = f([]);
-    E(
-      () => u.modelValue,
+  setup(_, { expose: S, emit: $ }) {
+    const i = _, c = $, B = h(null), v = h(!1), d = h([]), n = h([]);
+    M(
+      () => i.modelValue,
       (e) => {
         d.value = Array.isArray(e) ? e : e ? [e] : [];
       },
       { immediate: !0 }
     );
-    function C(e) {
+    function z(e) {
       const t = e.target.files;
       if (!t) return;
       const s = Array.from(t);
-      d.value = u.multiple ? s : [s[0]], c("update:modelValue", u.multiple ? s : s[0]), I();
+      d.value = i.multiple ? s : [s[0]], c("update:modelValue", i.multiple ? s : s[0]), I();
     }
     function V() {
-      d.value = [], c("update:modelValue", u.multiple ? [] : null), c("click:clear"), r.value = [];
+      d.value = [], c("update:modelValue", i.multiple ? [] : null), c("click:clear"), n.value = [];
     }
-    function N() {
+    function C() {
       v.value = !0, c("update:focused", !0);
     }
-    function z() {
+    function A() {
       v.value = !1, c("update:focused", !1);
     }
-    const p = m(() => d.value.map((e) => e.name)), F = m(() => d.value.reduce((e, t) => e + t.size, 0)), _ = m(() => {
-      const e = F.value, t = u.showSize === 1024 ? 1024 : 1e3, s = ["B", "KB", "MB", "GB"];
-      let n = 0, h = e;
-      for (; h >= t && n < s.length - 1; )
-        h /= t, n++;
-      return `${h.toFixed(1)} ${s[n]}`;
+    const p = f(() => d.value.map((e) => e.name)), N = f(() => i.dirty || v.value || p.value.length > 0), F = f(() => d.value.reduce((e, t) => e + t.size, 0)), w = f(() => {
+      const e = F.value, t = i.showSize === 1024 ? 1024 : 1e3, s = ["B", "KB", "MB", "GB"];
+      let r = 0, m = e;
+      for (; m >= t && r < s.length - 1; )
+        m /= t, r++;
+      return `${m.toFixed(1)} ${s[r]}`;
     });
     async function I(e = !1) {
       const t = [];
-      for (const s of u.rules) {
-        const n = typeof s == "function" ? s(u.multiple ? d.value : d.value[0]) : !0;
-        typeof n == "string" ? t.push(n) : n === !1 && t.push("Valor inválido");
+      for (const s of i.rules) {
+        const r = typeof s == "function" ? s(i.multiple ? d.value : d.value[0]) : !0;
+        typeof r == "string" ? t.push(r) : r === !1 && t.push("Valor inválido");
       }
-      return r.value = t, !e && t.length && c("update:focused", !0), t;
+      return n.value = t, !e && t.length && c("update:focused", !0), t;
     }
-    async function A() {
+    async function R() {
       V();
     }
-    async function R() {
-      r.value = [];
+    async function E() {
+      n.value = [];
     }
     return S({
-      reset: A,
-      resetValidation: R,
+      reset: R,
+      resetValidation: E,
       validate: I,
-      isValid: m(() => r.value.length === 0),
-      errorMessages: r
-    }), (e, t) => (l(), o("div", L, [
-      e.label ? (l(), o("label", T, a(e.label), 1)) : i("", !0),
-      y("div", M({
+      isValid: f(() => n.value.length === 0),
+      errorMessages: n
+    }), (e, t) => (l(), o("div", T, [
+      e.label ? (l(), o("label", {
+        key: 0,
+        class: K([
+          "absolute left-2 z-10 px-1 text-black/80 transition-all duration-200 ease-in-out pointer-events-none select-none dark:text-white/80",
+          N.value ? "-top-2.25 text-xs opacity-80" : "top-3 text-sm opacity-80"
+        ])
+      }, a(e.label), 3)) : u("", !0),
+      y("div", L({
         class: ["flex items-center gap-2 rounded px-3 py-2 cursor-pointer transition", [
           e.variant === "outlined" ? "border border-slate-400 dark:border-slate-600" : e.variant === "solo" ? "border-slate-400 dark:border-slate-600 shadow-inner" : "bg-surface border border-slate-400 dark:border-slate-600",
           e.disabled ? "border-slate-400 dark:border-slate-600 cursor-not-allowed" : "hover:border-blue-500",
-          e.error || r.value.length ? "border-red-500" : "",
+          e.error || n.value.length ? "border-red-500" : "",
           v.value ? "ring-2 ring-blue-500" : ""
         ]]
       }, e.$attrs, {
@@ -93,11 +96,11 @@ const L = { class: "relative w-full" }, T = {
           var s;
           return (s = B.value) == null ? void 0 : s.click();
         }),
-        onFocusin: N,
-        onFocusout: z
+        onFocusin: C,
+        onFocusout: A
       }), [
         b(e.$slots, "prepend", {}, () => [
-          e.prependIcon ? (l(), o("span", q, a(k(g)(e.prependIcon)), 1)) : i("", !0)
+          e.prependIcon ? (l(), o("span", q, a(k(g)(e.prependIcon)), 1)) : u("", !0)
         ]),
         y("input", {
           ref_key: "inputRef",
@@ -106,37 +109,37 @@ const L = { class: "relative w-full" }, T = {
           class: "hidden",
           multiple: e.multiple,
           disabled: e.disabled,
-          onChange: C
+          onChange: z
         }, null, 40, H),
         y("div", J, [
           b(e.$slots, "selection", {
             fileNames: p.value,
             totalBytes: F.value,
-            totalBytesReadable: _.value
+            totalBytesReadable: w.value
           }, () => [
             p.value.length ? (l(), o("span", O, a(p.value.join(", ")), 1)) : (l(), o("span", Q, "Seleccionar archivo"))
           ])
         ]),
         b(e.$slots, "append", {}, () => [
-          e.appendIcon ? (l(), o("span", U, a(k(g)(e.appendIcon)), 1)) : i("", !0)
+          e.appendIcon ? (l(), o("span", U, a(k(g)(e.appendIcon)), 1)) : u("", !0)
         ]),
         e.clearable && p.value.length ? (l(), o("button", {
           key: 0,
-          onClick: K(V, ["stop"]),
-          class: "text-gray-500 hover:text-red-500"
+          onClick: P(V, ["stop"]),
+          class: "cursor-pointer text-gray-500 hover:text-red-500"
         }, [
           e.clearIcon ? (l(), o("span", W, a(k(g)(e.clearIcon)), 1)) : (l(), o("span", X, "✕"))
-        ])) : i("", !0)
+        ])) : u("", !0)
       ], 16),
-      e.hint || r.value.length ? (l(), o("div", Y, [
-        r.value.length ? (l(), o("div", Z, [
-          (l(!0), o(P, null, j(r.value, (s, n) => (l(), o("div", { key: n }, a(s), 1))), 128))
-        ])) : e.hint ? (l(), o("div", x, a(e.hint), 1)) : i("", !0)
-      ])) : i("", !0),
-      e.counter ? (l(), o("div", ee, [
+      e.hint || n.value.length ? (l(), o("div", Y, [
+        n.value.length ? (l(), o("div", Z, [
+          (l(!0), o(j, null, x(n.value, (s, r) => (l(), o("div", { key: r }, a(s), 1))), 128))
+        ])) : e.hint ? (l(), o("div", ee, a(e.hint), 1)) : u("", !0)
+      ])) : u("", !0),
+      e.counter ? (l(), o("div", te, [
         D(a(e.counterString ?? `${p.value.length} archivo(s)`) + " ", 1),
-        e.showSize ? (l(), o("span", te, " — " + a(_.value), 1)) : i("", !0)
-      ])) : i("", !0)
+        e.showSize ? (l(), o("span", le, " — " + a(w.value), 1)) : u("", !0)
+      ])) : u("", !0)
     ]));
   }
 };

package/dist/components/KunFileInput/src/composables/kunFileInputProps.js

@@ -5,6 +5,10 @@ const e = {
   chips: Boolean,
   showSize: [Boolean, Number],
   label: String,
+  dirty: {
+    type: Boolean,
+    default: !0
+  },
   disabled: Boolean,
   error: Boolean,
   errorMessages: [String, Array],

package/package.json

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