@indielayer/ui 1.12.0 → 1.12.1

package/docs/pages/component/tabs/usage.vue

@@ -111,6 +111,7 @@ const linkTab = ref(null)
     v-model="tab"
     class="pb-10"
     variant="block"
+    :full-width="false"
     ghost
   >
     <x-tab value="a" label="Tab A">

package/docs/pages/component/upload/usage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { useNotifications, type UploadFile } from '@indielayer/ui'
+import { useNotifications, XUpload, type UploadFile } from '@indielayer/ui'
 
 const notifications = useNotifications()
 
@@ -72,29 +72,38 @@ function onSubmit(isValid: boolean) {
   notifications?.success('Valid! Submitted.')
 }
 
+const uploadRef = ref<InstanceType<typeof XUpload>>()
+
+function reset() {
+  uploadRef.value?.reset()
+  previewImg.value = undefined
+}
+
 const action = 'https://run.mocky.io/v3/6904ae0b-3cfa-4ae1-bbf2-243a4dd32a3c'
 </script>
 
 <template>
   <div >
     <x-form @submit="onSubmit">
-      <div class="grid md:grid-cols-2 gap-2">
-        <x-upload
-          v-model="imageFiles"
-
-          :action="action"
-          method="POST"
-          :with-credentials="false"
-          :rules="[rules.isValidUpload]"
-
-          placeholder="Upload game title cover image"
-          max-file-size="2000000"
-          label="Cover Image"
-          tooltip="Title cover image should be 16:9 aspect ratio and max 2MB"
-          helper="Title cover image should be 16:9 aspect ratio and max 2MB"
-          @upload="onUploadComplete"
-          @change="onChangeImage"
-        />
+      <div class="grid md:grid-cols-2 gap-2 mb-4">
+        <div>
+          <x-upload
+            ref="uploadRef"
+            v-model="imageFiles"
+            :action="action"
+            method="POST"
+            :with-credentials="false"
+            :rules="[rules.isValidUpload]"
+            placeholder="Upload game title cover image"
+            max-file-size="2000000"
+            label="Cover Image"
+            tooltip="Title cover image should be 16:9 aspect ratio and max 2MB"
+            helper="Title cover image should be 16:9 aspect ratio and max 2MB"
+            @upload="onUploadComplete"
+            @change="onChangeImage"
+          />
+          <x-button size="sm" outlined ghost @click="reset">Reset input</x-button>
+        </div>
         <x-upload
           v-model="jsonFile"
           placeholder="Upload your json file"
@@ -105,6 +114,7 @@ const action = 'https://run.mocky.io/v3/6904ae0b-3cfa-4ae1-bbf2-243a4dd32a3c'
           @change="onChangeJSON"
         />
       </div>
+      <x-divider class="my-4"/>
       <x-button type="submit">Submit</x-button>
     </x-form>
     <div v-if="previewImg">

package/lib/components/modal/Modal.vue.js

@@ -78,10 +78,7 @@ const x = { key: 0 }, ee = ["xs", "sm", "md", "lg", "xl", "full"], oe = ["top",
         u.value = e, c.value = e, A(), document.body.style.paddingRight = "", document.body.style.overflow = "auto";
     }
     typeof window < "u" && G(document, "keydown", W);
-    const R = (e) => [".v-popper__popper", ".x-datepicker"].some((n) => {
-      if (typeof n == "string")
-        return Array.from(window.document.querySelectorAll(n)).some((f) => f === e.target || e.composedPath().includes(f));
-    });
+    const R = (e) => [".v-popper__popper", ".x-datepicker"].some((n) => typeof n == "string" ? Array.from(window.document.querySelectorAll(n)).some((f) => f === e.target || e.composedPath().includes(f)) : !1);
     function W(e) {
       e.key === "Escape" && !R(e) && c.value && !d.persistent && p();
     }

package/lib/components/tab/theme/Tab.base.theme.js

@@ -1,8 +1,8 @@
 const i = {
   classes: {
     wrapper: ({ props: t, data: s }) => {
-      const e = ["py-2 transition-colors duration-150 ease-in-out whitespace-nowrap text-center"];
-      return s.variant === "block" && e.push("px-8"), t.size === "xs" ? e.push("text-xs") : t.size === "sm" ? e.push("text-sm") : t.size === "lg" ? e.push("text-lg") : t.size === "xl" && e.push("text-xl"), e;
+      const e = ["transition-colors duration-150 ease-in-out whitespace-nowrap text-center"];
+      return s.variant === "line" && e.push("py-2"), s.variant === "block" && e.push("py-1.5 px-8"), t.size === "xs" ? e.push("text-xs") : t.size === "sm" ? e.push("text-sm") : t.size === "lg" ? e.push("text-lg") : t.size === "xl" && e.push("text-xl"), e;
     },
     content: "flex items-center justify-center",
     label: "font-medium",

package/lib/components/tab/theme/TabGroup.base.theme.js

@@ -3,7 +3,7 @@ const o = {
     wrapper: "",
     scroller: ({ props: t }) => {
       const r = [""];
-      return t.fullWidth || r.push("!w-fit"), t.variant === "block" && r.push("rounded-md"), t.variant === "block" && !t.ghost && r.push("bg-secondary-100 dark:bg-secondary-800 p-1"), r;
+      return t.fullWidth || r.push("!w-fit"), t.variant === "block" && r.push("rounded-lg"), t.variant === "block" && !t.ghost && r.push("bg-secondary-100 dark:bg-secondary-800 p-1"), r;
     },
     list: ({ props: t }) => {
       const r = ["flex min-w-full w-fit"];

package/lib/components/upload/Upload.vue.d.ts

@@ -21,6 +21,10 @@ declare const uploadProps: {
         default: string;
     };
     withCredentials: BooleanConstructor;
+    fileFormDataName: {
+        type: StringConstructor;
+        default: string;
+    };
     modelValue: {
         readonly type: PropType<string | number | boolean | object | any[] | undefined>;
         readonly default: undefined;
@@ -80,6 +84,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         default: string;
     };
     withCredentials: BooleanConstructor;
+    fileFormDataName: {
+        type: StringConstructor;
+        default: string;
+    };
     modelValue: {
         readonly type: PropType<string | number | boolean | object | any[] | undefined>;
         readonly default: undefined;
@@ -132,6 +140,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
         default: string;
     };
     withCredentials: BooleanConstructor;
+    fileFormDataName: {
+        type: StringConstructor;
+        default: string;
+    };
     modelValue: {
         readonly type: PropType<string | number | boolean | object | any[] | undefined>;
         readonly default: undefined;
@@ -178,6 +190,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     multiple: boolean;
     method: "POST" | "PUT";
     withCredentials: boolean;
+    fileFormDataName: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
     box?(_: {
         isOver: boolean;

package/lib/components/upload/Upload.vue.js

@@ -1,20 +1,20 @@
-import { defineComponent as te, ref as y, computed as oe, watch as ne, openBlock as d, createElementBlock as f, normalizeClass as b, unref as s, createVNode as x, normalizeStyle as se, withCtx as ie, createElementVNode as l, mergeProps as ae, toHandlers as le, renderSlot as k, toDisplayString as _, createBlock as g, createCommentVNode as w, Fragment as de, renderList as ce } from "vue";
+import { defineComponent as te, ref as b, computed as oe, watch as ne, openBlock as d, createElementBlock as v, normalizeClass as x, unref as a, createVNode as k, normalizeStyle as se, withCtx as ae, createElementVNode as l, mergeProps as ie, toHandlers as le, renderSlot as S, toDisplayString as _, createBlock as g, createCommentVNode as w, Fragment as de, renderList as ce } from "vue";
 import { useDropZone as ue } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
-import { useCommon as pe } from "../../composables/useCommon.js";
-import { useInteractive as U } from "../../composables/useInteractive.js";
-import { useInputtable as I } from "../../composables/useInputtable.js";
-import { useTheme as me } from "../../composables/useTheme.js";
-import { uploadIcon as fe, fileIcon as ge, closeIcon as he } from "../../common/icons.js";
-import ve from "../label/Label.vue.js";
-import O from "../inputFooter/InputFooter.vue.js";
+import { useCommon as me } from "../../composables/useCommon.js";
+import { useInteractive as O } from "../../composables/useInteractive.js";
+import { useInputtable as V } from "../../composables/useInputtable.js";
+import { useTheme as pe } from "../../composables/useTheme.js";
+import { uploadIcon as fe, fileIcon as ve, closeIcon as ge } from "../../common/icons.js";
+import he from "../label/Label.vue.js";
+import L from "../inputFooter/InputFooter.vue.js";
 import ye from "../progress/Progress.vue.js";
-import S from "../icon/Icon.vue.js";
-const be = ["id", "disabled", "name", "accept", "multiple", "readonly"], xe = { class: "text-secondary-500 dark:text-secondary-400" }, ke = { class: "flex items-center" }, _e = ["src"], we = { class: "truncate flex-1 pr-2" }, Se = { class: "font-medium truncate" }, Ie = { class: "text-xs text-secondary-500" }, $e = ["onClick"], Ve = {
-  ...pe.validators(),
+import I from "../icon/Icon.vue.js";
+const be = ["id", "disabled", "name", "accept", "multiple", "readonly"], xe = { class: "text-secondary-500 dark:text-secondary-400" }, ke = { class: "flex items-center" }, Se = ["src"], _e = { class: "truncate flex-1 pr-2" }, we = { class: "font-medium truncate" }, Ie = { class: "text-xs text-secondary-500" }, Ve = ["onClick"], $e = {
+  ...me.validators(),
   variant: ["box"]
-}, Ce = {
-  ...U.props(),
-  ...I.props(),
+}, Ne = {
+  ...O.props(),
+  ...V.props(),
   placeholder: String,
   accept: String,
   multiple: Boolean,
@@ -32,20 +32,24 @@ const be = ["id", "disabled", "name", "accept", "multiple", "readonly"], xe = {
     type: String,
     default: "POST"
   },
-  withCredentials: Boolean
-}, Ee = {
+  withCredentials: Boolean,
+  fileFormDataName: {
+    type: String,
+    default: "file"
+  }
+}, Ce = {
   name: "XUpload",
-  validators: Ve
-}, Fe = /* @__PURE__ */ te({
-  ...Ee,
-  props: Ce,
-  emits: [...I.emits(), "upload", "remove"],
-  setup(j, { expose: D, emit: q }) {
-    const o = j, u = q, $ = y(null), p = oe(() => !!o.action), i = y([]);
-    ne(i, (e) => {
+  validators: $e
+}, Te = /* @__PURE__ */ te({
+  ...Ce,
+  props: Ne,
+  emits: [...V.emits(), "upload", "remove"],
+  setup(j, { expose: F, emit: U }) {
+    const o = j, u = U, p = b(null), f = oe(() => !!o.action), s = b([]);
+    ne(s, (e) => {
       u("update:modelValue", e);
     }, { deep: !0, immediate: !0 });
-    const { focus: V, blur: P } = U($);
+    const { focus: $, blur: q } = O(p);
     function h(e) {
       if (!e)
         return !1;
@@ -66,34 +70,34 @@ const be = ["id", "disabled", "name", "accept", "multiple", "readonly"], xe = {
       }
       return !0;
     }
-    function T(e) {
+    function P(e) {
       const r = e.target.files;
       h(r) && u("change", e);
     }
-    function F(e) {
+    function T(e) {
       const r = e.target.files;
-      h(r) && (N(r), o.validateOnInput && !K.value && v(i.value), u("input", e));
+      h(r) && (E(r), o.validateOnInput && !D.value && y(s.value), u("input", e));
     }
-    const C = y(null);
+    const N = b(null);
     function M(e) {
-      h(e) && N(e);
+      h(e) && E(e);
     }
-    const { isOverDropZone: E } = ue(C, {
+    const { isOverDropZone: C } = ue(N, {
       onDrop: M,
       multiple: o.multiple,
       preventDefaultForUnhandled: !1
     });
-    function N(e) {
-      i.value = e ? Array.from(e).map((t) => ({
+    function E(e) {
+      s.value = e ? Array.from(e).map((t) => ({
         file: t,
-        completed: !p.value,
-        progress: p.value ? 0 : 100,
+        completed: !f.value,
+        progress: f.value ? 0 : 100,
         error: ""
-      })) : [], p.value && W();
+      })) : [], f.value && W();
     }
     function Z(e) {
-      const t = i.value.findIndex((r) => r.file === e);
-      t !== -1 && (u("remove", i.value[t]), i.value.splice(t, 1));
+      const t = s.value.findIndex((r) => r.file === e);
+      t !== -1 && (u("remove", s.value[t]), s.value.splice(t, 1));
     }
     function B(e) {
       const t = ["jpg", "jpeg", "png", "gif", "webp", "svg"];
@@ -111,15 +115,15 @@ const be = ["id", "disabled", "name", "accept", "multiple", "readonly"], xe = {
           r(new Error("No action provided"));
         else {
           const n = new XMLHttpRequest(), c = new FormData();
-          c.append("file", e.file), n.open(o.method, o.action, !0), o.headers && typeof o.headers == "object" && Object.keys(o.headers).forEach((a) => {
-            n.setRequestHeader(a, o.headers[a]);
-          }), n.upload.addEventListener("progress", (a) => {
-            if (a.lengthComputable) {
-              const L = a.loaded / a.total * 100;
-              e.progress = L, console.log(`Upload progress: ${L}%`);
+          c.append(o.fileFormDataName, e.file), n.open(o.method, o.action, !0), o.headers && typeof o.headers == "object" && Object.keys(o.headers).forEach((i) => {
+            n.setRequestHeader(i, o.headers[i]);
+          }), n.upload.addEventListener("progress", (i) => {
+            if (i.lengthComputable) {
+              const re = i.loaded / i.total * 100;
+              e.progress = re;
             }
           }), n.addEventListener("load", () => {
-            if (n.status === 200) {
+            if (n.status >= 200 && n.status < 300) {
               e.completed = !0;
               try {
                 e.response = JSON.parse(n.responseText);
@@ -128,8 +132,8 @@ const be = ["id", "disabled", "name", "accept", "multiple", "readonly"], xe = {
               }
               t(n.responseText);
             } else {
-              const a = `Upload failed. Status: ${n.status}`;
-              e.error = a, r(new Error(a));
+              const i = `Upload failed. Status: ${n.status}`;
+              e.error = i, r(new Error(i));
             }
           }), n.addEventListener("error", () => {
             e.error = "An error occurred during the upload.", r(new Error("An error occurred during the upload."));
@@ -138,46 +142,48 @@ const be = ["id", "disabled", "name", "accept", "multiple", "readonly"], xe = {
       });
     }
     async function W() {
-      if (!o.action && !i.value)
+      if (!o.action && !s.value)
         return;
       const e = [];
-      for (let t = 0; t < i.value.length; t++)
-        e.push(H(i.value[t]));
-      await Promise.all(e), v(i.value);
+      for (let t = 0; t < s.value.length; t++)
+        e.push(H(s.value[t]));
+      await Promise.all(e), y(s.value);
+    }
+    function X() {
+      m.value = "", D.value = !0, s.value = [], p.value && (p.value.value = "");
     }
     const {
       errorInternal: m,
-      hideFooterInternal: X,
-      isInsideForm: G,
-      inputListeners: J,
-      isFirstValidation: K,
-      reset: Q,
-      validate: v,
-      setError: Y
-    } = I(o, { focus: V, emit: u }), { styles: ee, classes: R, className: re } = me("Upload", {}, o);
-    return D({ focus: V, blur: P, reset: Q, validate: v, setError: Y }), (e, t) => (d(), f("div", {
-      class: b([
-        s(re),
-        s(R).wrapper
+      hideFooterInternal: G,
+      isInsideForm: J,
+      inputListeners: K,
+      isFirstValidation: D,
+      validate: y,
+      setError: Q
+    } = V(o, { focus: $, emit: u }), { styles: Y, classes: R, className: ee } = pe("Upload", {}, o);
+    return F({ focus: $, blur: q, reset: X, validate: y, setError: Q }), (e, t) => (d(), v("div", {
+      class: x([
+        a(ee),
+        a(R).wrapper
       ])
     }, [
-      x(ve, {
-        style: se(s(ee)),
+      k(he, {
+        style: se(a(Y)),
         disabled: e.disabled,
         required: e.required,
-        "is-inside-form": s(G),
+        "is-inside-form": a(J),
         label: e.label,
         tooltip: e.tooltip
       }, {
-        default: ie(() => [
-          l("input", ae({
+        default: ae(() => [
+          l("input", ie({
             id: e.id,
             ref_key: "elRef",
-            ref: $,
+            ref: p,
             type: "file",
             class: [
               "sr-only",
-              s(R).input
+              a(R).input
             ],
             disabled: e.disabled,
             name: e.name,
@@ -185,53 +191,53 @@ const be = ["id", "disabled", "name", "accept", "multiple", "readonly"], xe = {
             multiple: e.multiple,
             readonly: e.readonly
           }, le({
-            ...s(J),
-            input: F,
-            change: T
+            ...a(K),
+            input: T,
+            change: P
           }, !0)), null, 16, be),
-          k(e.$slots, "box", { isOver: s(E) }, () => [
+          S(e.$slots, "box", { isOver: a(C) }, () => [
             l("div", {
               ref_key: "dropZoneRef",
-              ref: C,
-              class: b(["border border-dashed rounded-md flex items-center justify-center gap-2 p-4 cursor-pointer transition-colors duration-500 hover:border-primary-500 dark:hover:border-primary-400", {
-                "border-primary-500 dark:border-primary-400": s(E)
+              ref: N,
+              class: x(["border border-dashed rounded-md flex items-center justify-center gap-2 p-4 cursor-pointer transition-colors duration-500 hover:border-primary-500 dark:hover:border-primary-400", {
+                "border-primary-500 dark:border-primary-400": a(C)
               }])
             }, [
-              x(S, { icon: s(fe) }, null, 8, ["icon"]),
+              k(I, { icon: a(fe) }, null, 8, ["icon"]),
               l("span", xe, _(e.placeholder), 1),
               t[0] || (t[0] = l("span", { class: "text-xs text-secondary-400 dark:text-secondary-500" }, "or drag and drop", -1))
             ], 2)
           ]),
-          s(X) ? w("", !0) : (d(), g(O, {
+          a(G) ? w("", !0) : (d(), g(L, {
             key: 0,
-            error: s(m),
+            error: a(m),
             helper: e.helper
           }, null, 8, ["error", "helper"]))
         ]),
         _: 3
       }, 8, ["style", "disabled", "required", "is-inside-form", "label", "tooltip"]),
-      k(e.$slots, "files", { files: i.value }, () => [
-        (d(!0), f(de, null, ce(i.value, (r, n) => (d(), f("div", {
+      S(e.$slots, "files", { files: s.value }, () => [
+        (d(!0), v(de, null, ce(s.value, (r, n) => (d(), v("div", {
           key: n,
           class: "border rounded-md p-2 bg-secondary-100 my-2"
         }, [
           l("div", ke, [
             l("div", {
-              class: b(["rounded-md w-9 h-9 flex items-center justify-center mr-2 border", {
+              class: x(["rounded-md w-9 h-9 flex items-center justify-center mr-2 border", {
                 "p-2 bg-white": !B(r.file)
               }])
             }, [
-              B(r.file) ? (d(), f("img", {
+              B(r.file) ? (d(), v("img", {
                 key: 0,
                 src: z(r.file),
                 class: "w-full h-full object-cover rounded-md"
-              }, null, 8, _e)) : (d(), g(S, {
+              }, null, 8, Se)) : (d(), g(I, {
                 key: 1,
-                icon: s(ge)
+                icon: a(ve)
               }, null, 8, ["icon"]))
             ], 2),
-            l("div", we, [
-              l("div", Se, _(r.file.name), 1),
+            l("div", _e, [
+              l("div", we, _(r.file.name), 1),
               l("div", Ie, _(A(r.file.size)), 1)
             ]),
             l("button", {
@@ -239,18 +245,18 @@ const be = ["id", "disabled", "name", "accept", "multiple", "readonly"], xe = {
               class: "shrink-0",
               onClick: (c) => Z(r.file)
             }, [
-              k(e.$slots, "removeIcon", {}, () => [
-                x(S, { icon: s(he) }, null, 8, ["icon"])
+              S(e.$slots, "removeIcon", {}, () => [
+                k(I, { icon: a(ge) }, null, 8, ["icon"])
               ])
-            ], 8, $e)
+            ], 8, Ve)
           ]),
-          p.value ? (d(), g(ye, {
+          f.value ? (d(), g(ye, {
             key: 0,
             percentage: r.progress,
             class: "mt-1",
             color: r.error ? "warning" : "success"
           }, null, 8, ["percentage", "color"])) : w("", !0),
-          r.error ? (d(), g(O, {
+          r.error ? (d(), g(L, {
             key: 1,
             error: r.error
           }, null, 8, ["error"])) : w("", !0)
@@ -260,5 +266,5 @@ const be = ["id", "disabled", "name", "accept", "multiple", "readonly"], xe = {
   }
 });
 export {
-  Fe as default
+  Te as default
 };