sprintify-ui 0.4.0 → 0.4.2

package/dist/sprintify-ui.es.js

@@ -18811,12 +18811,11 @@ const f1 = ["disabled"], d1 = ["accept", "multiple"], xs = /* @__PURE__ */ Ee({
       r("start");
       let d = [];
       try {
-        const f = new FormData();
         if (Array.isArray(h))
-          d = await Promise.all(h.map((m) => c(f, m)));
+          d = await Promise.all(h.map((f) => c(f)));
         else {
-          const m = await c(f, h);
-          d.push(m);
+          const f = await c(h);
+          d.push(f);
         }
         r("success", d);
       } catch (f) {
@@ -18829,16 +18828,17 @@ const f1 = ["disabled"], d1 = ["accept", "multiple"], xs = /* @__PURE__ */ Ee({
         r("end"), s.value = !1;
       }
     }
-    async function c(h, d) {
-      h.append("file", d);
-      const m = (await n.post(e.url ?? Lt.upload_url, h)).data;
-      return m.original_file = d, new Promise((w) => {
+    async function c(h) {
+      const d = new FormData();
+      d.append("file", h);
+      const m = (await n.post(e.url ?? Lt.upload_url, d)).data;
+      return m.original_file = h, new Promise((w) => {
         const p = new FileReader();
         p.onload = (g) => {
           m.data_url = g.target.result, w(m);
         }, p.onerror = () => {
           w(m);
-        }, m.mime_type.includes("image") ? p.readAsDataURL(d) : w(m);
+        }, m.mime_type.includes("image") ? p.readAsDataURL(h) : w(m);
       });
     }
     return (h, d) => (P(), G("div", p1, [
@@ -18963,6 +18963,10 @@ const w1 = { class: "absolute inset-0 flex h-full w-full items-center justify-ce
       default: "",
       type: String
     },
+    showLoadingMask: {
+      default: !0,
+      type: Boolean
+    },
     showNotificationOnError: {
       default: !0,
       type: Boolean
@@ -19079,7 +19083,7 @@ const w1 = { class: "absolute inset-0 flex h-full w-full items-center justify-ce
         "leave-to-class": "opacity-0"
       }, {
         default: _e(() => [
-          T(l) ? Be(O.$slots, "loading", { key: 0 }, () => [
+          T(l) && t.showLoadingMask ? Be(O.$slots, "loading", { key: 0 }, () => [
             $("div", w1, [
               $("div", {
                 class: pe(["absolute inset-0 h-full w-full", T(Yn)("bg-white opacity-80", t.twLoadingMask)])
@@ -21448,30 +21452,27 @@ const As = /* @__PURE__ */ Ee({
       type: Boolean
     }
   },
-  emits: ["remove", "update", "save:name"],
+  emits: ["remove", "update"],
   setup(t, { emit: r }) {
     const e = t, n = le(800), o = le();
     gr(o, () => {
-      var p;
-      n.value = ((p = o.value) == null ? void 0 : p.clientWidth) ?? 800;
+      var w;
+      n.value = ((w = o.value) == null ? void 0 : w.clientWidth) ?? 800;
     });
     const a = U(() => n.value <= No.xs), l = U(() => No.sm >= n.value && n.value > No.xs), s = le("show"), u = U(() => e.media.name), c = U(() => e.media.file_name), h = U(() => "url" in e.media ? e.media.url : null), d = le();
     function f() {
       e.disabled || (s.value = "edit", setTimeout(() => {
-        var p, g;
-        (p = d.value) == null || p.focus(), (g = d.value) == null || g.select();
+        var w, p;
+        (w = d.value) == null || w.focus(), (p = d.value) == null || p.select();
       }, 100));
     }
-    function m(p) {
-      const g = p.target, b = Nt(e.media);
-      b.name = g.value ?? "";
-      const v = b.file_name.split(".").pop();
-      b.file_name = b.name + "." + v, r("update", b);
-    }
-    function w() {
-      s.value = "show", r("save:name");
+    function m() {
+      const w = d.value, p = Nt(e.media);
+      p.name = (w == null ? void 0 : w.value) ?? "";
+      const g = p.file_name.split(".").pop();
+      p.file_name = p.name + "." + g, s.value = "show", r("update", p);
     }
-    return (p, g) => (P(), G("li", {
+    return (w, p) => (P(), G("li", {
       ref_key: "itemRef",
       ref: o,
       class: pe(["group flex h-10 items-center justify-between", [T(a) ? "h-9" : "h-10"]])
@@ -21494,7 +21495,7 @@ const As = /* @__PURE__ */ Ee({
             type: "button",
             disabled: t.disabled,
             class: "flex h-10 items-center overflow-hidden",
-            onClick: g[0] || (g[0] = (b) => f())
+            onClick: p[0] || (p[0] = (g) => f())
           }, [
             $("span", {
               class: pe(["mr-2 truncate", [(T(a), "text-sm")]])
@@ -21514,17 +21515,16 @@ const As = /* @__PURE__ */ Ee({
             type: "text",
             value: T(u),
             autofocus: "",
-            onInput: m,
             onKeydown: [
-              Hi(On(w, ["prevent"]), ["enter"]),
-              g[1] || (g[1] = Hi(On((b) => s.value = "show", ["prevent"]), ["escape"]))
+              Hi(On(m, ["prevent"]), ["enter"]),
+              p[1] || (p[1] = Hi(On((g) => s.value = "show", ["prevent"]), ["escape"]))
             ]
           }, null, 42, Qw),
           $("div", Jw, [
             $("button", {
               type: "button",
               class: pe(["h-10 shrink-0 pr-2 pl-3 text-blue-600", [(T(a), "text-sm")]]),
-              onClick: w
+              onClick: m
             }, Oe(T($e)("sui.save")), 3)
           ])
         ])),
@@ -21534,7 +21534,7 @@ const As = /* @__PURE__ */ Ee({
             type: "button",
             disabled: t.disabled,
             class: "shrink-0 text-sm disabled:opacity-50",
-            onClick: g[2] || (g[2] = (b) => p.$emit("remove"))
+            onClick: p[2] || (p[2] = (g) => w.$emit("remove"))
           }, [
             T(l) || T(a) ? (P(), De(T(Xe), {
               key: 0,
@@ -21578,7 +21578,7 @@ const As = /* @__PURE__ */ Ee({
       type: Boolean
     }
   },
-  emits: ["update:modelValue", "remove", "save:name"],
+  emits: ["update:modelValue", "remove"],
   setup(t, { emit: r }) {
     const e = t;
     function n(a, l) {
@@ -21604,9 +21604,8 @@ const As = /* @__PURE__ */ Ee({
             draggable: t.draggable,
             disabled: t.disabled,
             onUpdate: (c) => n(u, c),
-            onRemove: (c) => a.$emit("remove", u),
-            "onSave:name": (c) => a.$emit("save:name", u, c)
-          }, null, 8, ["media", "show-remove", "draggable", "disabled", "onUpdate", "onRemove", "onSave:name"])
+            onRemove: (c) => a.$emit("remove", u)
+          }, null, 8, ["media", "show-remove", "draggable", "disabled", "onUpdate", "onRemove"])
         ])
       ]),
       _: 1

package/dist/types/src/components/BaseForm.vue.d.ts

@@ -43,6 +43,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
         type: StringConstructor;
     };
+    showLoadingMask: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
     showNotificationOnError: {
         default: boolean;
         type: BooleanConstructor;
@@ -97,6 +101,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
         type: StringConstructor;
     };
+    showLoadingMask: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
     showNotificationOnError: {
         default: boolean;
         type: BooleanConstructor;
@@ -115,6 +123,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     beforeSubmit: (next: NextFunction) => void;
     successHandler: (response: any) => void;
     twLoadingMask: string;
+    showLoadingMask: boolean;
     showNotificationOnError: boolean;
     showNotificationOnSuccess: boolean;
 }, {}>, {

package/dist/types/src/components/BaseMediaList.vue.d.ts

@@ -18,7 +18,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "remove" | "save:name")[], "update:modelValue" | "remove" | "save:name", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "remove")[], "update:modelValue" | "remove", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         required: true;
         type: PropType<(UploadedFile | Media)[]>;
@@ -38,7 +38,6 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onRemove?: ((...args: any[]) => any) | undefined;
-    "onSave:name"?: ((...args: any[]) => any) | undefined;
 }, {
     draggable: boolean;
     disabled: boolean;

package/dist/types/src/components/BaseMediaListItem.vue.d.ts

@@ -18,7 +18,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update" | "remove" | "save:name")[], "update" | "remove" | "save:name", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update" | "remove")[], "update" | "remove", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     media: {
         required: true;
         type: PropType<UploadedFile | Media>;
@@ -38,7 +38,6 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onUpdate?: ((...args: any[]) => any) | undefined;
     onRemove?: ((...args: any[]) => any) | undefined;
-    "onSave:name"?: ((...args: any[]) => any) | undefined;
 }, {
     draggable: boolean;
     disabled: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseFilePicker.vue

@@ -3,10 +3,7 @@
     type="button"
     :class="twButton"
     :disabled="disabled"
-    @drop.prevent="
-      dragging = false;
-    handleDrop($event);
-    "
+    @drop.prevent="dragging = false; handleDrop($event);"
     @dragleave.prevent="dragging = false"
     @dragover.prevent="dragging = true"
     @dragenter.prevent="dragging = true"

package/src/components/BaseFileUploader.vue

@@ -120,15 +120,15 @@ async function onFileSelect(files: File | File[]) {
 
   emit('start');
 
+
   let payloads = [] as UploadedFile[];
 
   try {
-    const formData = new FormData();
 
     if (Array.isArray(files)) {
-      payloads = await Promise.all(files.map(f => processFileUpload(formData, f)));
+      payloads = await Promise.all(files.map(f => processFileUpload(f)));
     } else {
-      const payload = await processFileUpload(formData, files);
+      const payload = await processFileUpload(files);
       payloads.push(payload);
     }
 
@@ -148,7 +148,10 @@ async function onFileSelect(files: File | File[]) {
   }
 }
 
-async function processFileUpload(formData: FormData, file: File): Promise<UploadedFile> {
+async function processFileUpload(file: File): Promise<UploadedFile> {
+
+  const formData = new FormData();
+
   formData.append('file', file);
 
   const response = await http.post(props.url ?? config.upload_url, formData);

package/src/components/BaseForm.vue

@@ -20,7 +20,7 @@
       leave-to-class="opacity-0"
     >
       <slot
-        v-if="loading"
+        v-if="loading && showLoadingMask"
         name="loading"
       >
         <div
@@ -37,7 +37,7 @@
             <path
               fill="currentColor"
               d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
-            />
+            ></path>
           </svg>
         </div>
       </slot>
@@ -106,6 +106,10 @@ const props = defineProps({
     default: '',
     type: String,
   },
+  showLoadingMask: {
+    default: true,
+    type: Boolean,
+  },
   showNotificationOnError: {
     default: true,
     type: Boolean,

package/src/components/BaseMediaList.vue

@@ -16,7 +16,6 @@
           :disabled="disabled"
           @update="onItemUpdate(index, $event)"
           @remove="$emit('remove', index)"
-          @save:name="$emit('save:name', index, $event)"
         />
       </div>
     </template>
@@ -50,7 +49,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['update:modelValue', 'remove', 'save:name']);
+const emit = defineEmits(['update:modelValue', 'remove']);
 
 function onItemUpdate(index: number, media: Media | UploadedFile) {
   const modelValue = cloneDeep(props.modelValue);

package/src/components/BaseMediaListItem.vue

@@ -59,7 +59,6 @@
           type="text"
           :value="name"
           autofocus
-          @input="onNameChange"
           @keydown.enter.prevent="saveName"
           @keydown.escape.prevent="viewMode = 'show'"
         >
@@ -132,7 +131,7 @@ import { t } from '@/i18n';
 import { useResizeObserver } from '@vueuse/core';
 import breakpoints from '../../config/breakpoints.json';
 
-const emit = defineEmits(['remove', 'update', 'save:name']);
+const emit = defineEmits(['remove', 'update']);
 
 const props = defineProps({
   media: {
@@ -201,17 +200,13 @@ function editName() {
   }, 100);
 }
 
-function onNameChange(e: Event) {
-  const target = e.target as HTMLInputElement;
+function saveName() {
+  const target = inputRef.value;
   const media = cloneDeep(props.media);
-  media.name = (target.value ?? '') as string;
+  media.name = (target?.value ?? '') as string;
   const ext = media.file_name.split('.').pop();
   media.file_name = media.name + '.' + ext;
-  emit('update', media);
-}
-
-function saveName() {
   viewMode.value = 'show';
-  emit('save:name');
+  emit('update', media);
 }
 </script>