sprintify-ui 0.2.30 → 0.4.1

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

@@ -14,7 +14,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     multiple: {
         type: import("vue").PropType<boolean>;
-        required: true;
         default: boolean;
     };
     cropper: {
@@ -45,7 +44,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<() => boolean>;
         default: () => boolean;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("upload:start" | "upload:success" | "upload:fail" | "upload:end")[], "upload:start" | "upload:success" | "upload:fail" | "upload:end", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("success" | "end" | "start" | "fail")[], "success" | "end" | "start" | "fail", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     component: {
         type: import("vue").PropType<"BaseFilePicker" | "BaseFilePickerCrop">;
         default: string;
@@ -60,7 +59,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     multiple: {
         type: import("vue").PropType<boolean>;
-        required: true;
         default: boolean;
     };
     cropper: {
@@ -92,10 +90,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: () => boolean;
     };
 }>> & {
-    "onUpload:start"?: ((...args: any[]) => any) | undefined;
-    "onUpload:success"?: ((...args: any[]) => any) | undefined;
-    "onUpload:fail"?: ((...args: any[]) => any) | undefined;
-    "onUpload:end"?: ((...args: any[]) => any) | undefined;
+    onSuccess?: ((...args: any[]) => any) | undefined;
+    onEnd?: ((...args: any[]) => any) | undefined;
+    onStart?: ((...args: any[]) => any) | undefined;
+    onFail?: ((...args: any[]) => any) | undefined;
 }, {
     component: "BaseFilePicker" | "BaseFilePickerCrop";
     disabled: boolean;

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

@@ -72,7 +72,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
         type: PropType<"list" | "gallery" | "images">;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "upload:start" | "upload:success" | "upload:fail" | "upload:end")[], "update:modelValue" | "upload:start" | "upload:success" | "upload:fail" | "upload:end", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("success" | "update:modelValue" | "end" | "start" | "fail")[], "success" | "update:modelValue" | "end" | "start" | "fail", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         default: undefined;
         type: PropType<MediaLibraryPayload>;
@@ -143,10 +143,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    "onUpload:start"?: ((...args: any[]) => any) | undefined;
-    "onUpload:success"?: ((...args: any[]) => any) | undefined;
-    "onUpload:fail"?: ((...args: any[]) => any) | undefined;
-    "onUpload:end"?: ((...args: any[]) => any) | undefined;
+    onSuccess?: ((...args: any[]) => any) | undefined;
+    onEnd?: ((...args: any[]) => any) | undefined;
+    onStart?: ((...args: any[]) => any) | undefined;
+    onFail?: ((...args: any[]) => any) | undefined;
 }, {
     draggable: boolean;
     name: string;

package/dist/types/src/stores/systemAlerts.d.ts

@@ -3,7 +3,7 @@ export declare const useSystemAlertStore: import("pinia").StoreDefinition<"syste
     count: number;
     systemAlerts: SystemAlert[];
 }, {}, {
-    push(systemAlert: SystemAlertOptions): void;
-    remove(systemAlert: SystemAlert): void;
+    push(systemAlert: SystemAlertOptions): string | number;
+    remove(alertId: number | string): void;
     clear(): void;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.2.30",
+  "version": "0.4.1",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -13,7 +13,8 @@
     "prepack": "npm run build",
     "prepare": "husky install && relative-deps",
     "release": "standard-version",
-    "commit": "cz"
+    "commit": "cz",
+    "vue-tsc": "vue-tsc"
   },
   "peerDependencies": {
     "@tailwindcss/aspect-ratio": "^0.4.2",

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.stories.js

@@ -1,6 +1,7 @@
 import BaseFileUploader from '@/components/BaseFileUploader.vue';
 import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
 import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
 import { Icon as BaseIcon } from '@iconify/vue';
 import { t } from '@/i18n';
 
@@ -21,12 +22,20 @@ const Template = (args) => ({
     BaseIcon,
     BaseLoadingCover,
     BaseAppNotifications,
+    ShowValue,
   },
   setup() {
-    return { args, t };
+
+    const files = ref([]);
+
+    function onSuccess(payload) {
+      files.value = payload;
+    }
+
+    return { args, t, files, onSuccess };
   },
   template: `
-    <BaseFileUploader v-bind="args">
+    <BaseFileUploader v-bind="args" @success="onSuccess">
       <template #default="{ dragging, disabled, uploading, selecting }">
         <div
           class="flex w-full items-center space-x-4 rounded-lg border-2 border-dashed border-slate-200 p-5 duration-100"
@@ -59,6 +68,9 @@ const Template = (args) => ({
         />
       </template>
     </BaseFileUploader>
+
+    <ShowValue :value="files" />
+
     <BaseAppNotifications></BaseAppNotifications>
   `,
 });

package/src/components/BaseFileUploader.vue

@@ -54,7 +54,7 @@ const props = withDefaults(
     accept?: string;
     acceptedExtensions?: string[];
     cropper?: BaseCropperConfig | Record<string, any> | boolean | null;
-    multiple: boolean;
+    multiple?: boolean;
   }>(),
   {
     component: 'BaseFilePicker',
@@ -74,10 +74,10 @@ const props = withDefaults(
 );
 
 const emit = defineEmits([
-  'upload:start',
-  'upload:success',
-  'upload:fail',
-  'upload:end',
+  'start',
+  'success',
+  'fail',
+  'end',
 ]);
 
 const componentInternal = computed(() => {
@@ -118,57 +118,68 @@ async function onFileSelect(files: File | File[]) {
     return;
   }
 
+  emit('start');
+
+
+  let payloads = [] as UploadedFile[];
+
   try {
-    const formData = new FormData();
 
     if (Array.isArray(files)) {
-      await Promise.all(files.map(f => processFileUpload(formData, f)))
+      payloads = await Promise.all(files.map(f => processFileUpload(f)));
     } else {
-      await processFileUpload(formData, files)
+      const payload = await processFileUpload(files);
+      payloads.push(payload);
     }
+
+    emit('success', payloads)
+
   } catch (e: unknown) {
     console.error(e);
-    emit('upload:fail');
+    emit('fail');
     notifications.push({
       color: 'danger',
       title: t('sui.error'),
       text: t('sui.upload_failed'),
     });
   } finally {
-    emit('upload:end');
+    emit('end');
     uploading.value = false;
   }
 }
 
-async function processFileUpload(formData: FormData, file: File) {
-  formData.append('file', file);
+async function processFileUpload(file: File): Promise<UploadedFile> {
+
+  const formData = new FormData();
 
-  emit('upload:start');
+  formData.append('file', file);
 
   const response = await http.post(props.url ?? config.upload_url, formData);
 
   const payload = response.data as UploadedFile;
   payload.original_file = file;
 
-  const reader = new FileReader();
+  // Read file if image, add add data_url to payload
 
-  reader.onload = (e: any) => {
-    payload.data_url = e.target.result;
-    onSuccess(payload);
-  };
+  return new Promise(resolve => {
 
-  reader.onerror = (e: any) => {
-    onSuccess(payload);
-  };
+    const reader = new FileReader();
 
-  if (payload.mime_type.includes('image')) {
-    reader.readAsDataURL(file);
-  } else {
-    onSuccess(payload);
-  }
-}
+    reader.onload = (e: any) => {
+      payload.data_url = e.target.result;
+      resolve(payload);
+    };
+
+    reader.onerror = () => {
+      resolve(payload);
+    };
 
-function onSuccess(payload: any) {
-  emit('upload:success', payload);
+    if (payload.mime_type.includes('image')) {
+      reader.readAsDataURL(file);
+    } else {
+      resolve(payload);
+    }
+  });
 }
+
 </script>

package/src/components/BaseLayoutSidebar.vue

@@ -18,7 +18,7 @@
           leave-from="opacity-100"
           leave-to="opacity-0"
         >
-          <div class="fixed inset-0 bg-slate-600 bg-opacity-75" />
+          <div class="fixed inset-0 bg-opacity-75 bg-slate-600" />
         </TransitionChild>
 
         <div class="fixed inset-0 z-40 flex">
@@ -32,7 +32,7 @@
             leave-to="-translate-x-full"
           >
             <DialogPanel
-              class="relative flex w-full max-w-xs flex-1 flex-col pt-5 pb-4"
+              class="relative flex flex-col flex-1 w-full max-w-xs pt-5 pb-4"
               :class="[dark ? 'bg-slate-800' : 'bg-white']"
             >
               <TransitionChild
@@ -44,31 +44,31 @@
                 leave-from="opacity-100"
                 leave-to="opacity-0"
               >
-                <div class="absolute top-0 right-0 -mr-12 pt-2">
+                <div class="absolute top-0 right-0 pt-2 -mr-12">
                   <button
                     type="button"
-                    class="ml-1 flex h-10 w-10 items-center justify-center rounded-full"
+                    class="flex items-center justify-center w-10 h-10 ml-1 rounded-full"
                     @click="showMobileMenu = false"
                   >
                     <span class="sr-only">Close sidebar</span>
                     <BaseIcon
                       icon="heroicons:x-mark"
-                      class="h-6 w-6 text-white"
+                      class="w-6 h-6 text-white"
                       aria-hidden="true"
                     />
                   </button>
                 </div>
               </TransitionChild>
-              <div class="flex flex-shrink-0 items-center px-4">
+              <div class="flex items-center flex-shrink-0 px-4">
                 <img
-                  class="block h-8 w-auto"
+                  class="block w-auto h-8"
                   :src="logoUrl"
                   :alt="appName"
                 >
               </div>
               <div
                 data-scroll-lock-scrollable
-                class="mt-5 h-0 flex-1 overflow-y-auto"
+                class="flex-1 h-0 mt-5 overflow-y-auto"
               >
                 <nav>
                   <slot name="menu" />
@@ -77,7 +77,7 @@
             </DialogPanel>
           </TransitionChild>
           <div
-            class="w-14 flex-shrink-0"
+            class="flex-shrink-0 w-14"
             aria-hidden="true"
           >
             <!-- Dummy element to force sidebar to shrink to fit close icon -->
@@ -86,8 +86,8 @@
       </Dialog>
     </TransitionRoot>
 
-    <div class="flex min-h-full flex-col xl:pl-64">
-      <div class="sticky top-0 left-0 z-10 shrink-0 shadow">
+    <div class="flex flex-col min-h-full xl:pl-64">
+      <div class="sticky top-0 left-0 z-10 shadow shrink-0">
         <BaseSystemAlert
           v-for="systemAlert in systemAlerts"
           :key="systemAlert.id"
@@ -95,7 +95,7 @@
           :to="systemAlert.to"
           :action="systemAlert.action"
           :closable="systemAlert.closable"
-          @close="systemAlertStore.remove(systemAlert)"
+          @close="systemAlertStore.remove(systemAlert.id)"
         >
           {{ systemAlert.message }}
         </BaseSystemAlert>
@@ -106,13 +106,13 @@
         >
           <button
             type="button"
-            class="border-r border-slate-200 px-4 text-slate-500 xl:hidden"
+            class="px-4 border-r border-slate-200 text-slate-500 xl:hidden"
             @click="showMobileMenu = true"
           >
             <span class="sr-only">Open sidebar</span>
             <BaseIcon
               icon="heroicons:bars-3-bottom-left"
-              class="h-6 w-6"
+              class="w-6 h-6"
               aria-hidden="true"
             />
           </button>
@@ -125,7 +125,7 @@
       </div>
 
       <!-- Position: relative to contain Loading Covers -->
-      <main class="relative min-h-full flex-1">
+      <main class="relative flex-1 min-h-full">
         <slot />
       </main>
     </div>
@@ -135,16 +135,16 @@
       <!-- Sidebar component, swap this element with another sidebar if you like -->
       <div
         data-scroll-lock-scrollable
-        class="flex min-h-0 flex-1 flex-col overflow-y-auto"
+        class="flex flex-col flex-1 min-h-0 overflow-y-auto"
         :class="[dark ? 'bg-slate-800' : 'bg-white shadow']"
       >
         <div
-          class="flex flex-shrink-0 items-center px-4"
+          class="flex items-center flex-shrink-0 px-4"
           :style="{ height: navbarHeight + 'px' }"
           :class="[dark ? 'bg-slate-900' : 'bg-white']"
         >
           <img
-            class="block h-8 w-auto"
+            class="block w-auto h-8"
             :src="logoUrl"
             :alt="appName"
           >

package/src/components/BaseLayoutStacked.vue

@@ -7,7 +7,7 @@
       :to="systemAlert.to"
       :action="systemAlert.action"
       :closable="systemAlert.closable"
-      @close="systemAlertStore.remove(systemAlert)"
+      @close="systemAlertStore.remove(systemAlert.id)"
     >
       {{ systemAlert.message }}
     </BaseSystemAlert>

package/src/components/BaseMediaLibrary.vue

@@ -3,7 +3,7 @@
     <BaseFileUploader
       :component="pickerComponent"
       :max-size="maxSize"
-      :disabled="disabled"
+      :disabled="disabledInternal"
       class="w-full"
       tw-button="w-full"
       :accept="accept"
@@ -11,10 +11,10 @@
       :url="uploadUrl"
       :multiple="multiple"
       :cropper="pickerComponent == 'BaseFilePickerCrop' ? cropper : undefined"
-      @upload:start="onUploadStart"
-      @upload:end="onUploadEnd"
-      @upload:fail="$emit('upload:fail', $event)"
-      @upload:success="onUploadSuccess"
+      @start="onStart"
+      @success="onSuccess"
+      @fail="onFail"
+      @end="onEnd"
     >
       <template #default="baseFileUploaderProps">
         <slot
@@ -62,7 +62,7 @@
       <slot
         :model-value="normalizedModelValue"
         name="list"
-        :disabled="disabled"
+        :disabled="disabledInternal"
         :draggable="draggable"
         :remove="promptRemove"
         @update:model-value="sync"
@@ -71,7 +71,7 @@
           v-if="layout == 'images'"
           v-bind="listProps"
           :model-value="normalizedModelValue"
-          :disabled="disabled"
+          :disabled="disabledInternal"
           :draggable="draggable"
           @update:model-value="sync"
           @remove="promptRemove($event)"
@@ -81,7 +81,7 @@
           v-else-if="layout == 'list'"
           v-bind="listProps"
           :model-value="normalizedModelValue"
-          :disabled="disabled"
+          :disabled="disabledInternal"
           :draggable="draggable"
           @update:model-value="sync"
           @remove="promptRemove($event)"
@@ -91,7 +91,7 @@
           v-else-if="layout == 'gallery'"
           v-bind="listProps"
           :model-value="normalizedModelValue"
-          :disabled="disabled"
+          :disabled="disabledInternal"
           :draggable="draggable"
           @update:model-value="sync"
           @remove="promptRemove($event)"
@@ -196,10 +196,10 @@ const props = defineProps({
 
 const emit = defineEmits([
   'update:modelValue',
-  'upload:start',
-  'upload:success',
-  'upload:fail',
-  'upload:end',
+  'start',
+  'success',
+  'fail',
+  'end',
 ]);
 
 const { emitUpdate, enableForm, disableForm } = useField({
@@ -222,10 +222,6 @@ const normalizedModelValue = computed(() => {
 
 sync(normalizedModelValue.value);
 
-const numberOfFiles = computed((): number => {
-  return normalizedModelValue.value.length;
-});
-
 // Validations
 
 const normalizedMax = computed(() => {
@@ -248,40 +244,59 @@ const maxFileSize = computed(() => {
 
 // Upload
 
-function onUploadSuccess(file: UploadedFile) {
-  if (file == null) {
-    return;
-  }
+const syncingFiles = ref(false);
+
+function onSuccess(files: UploadedFile[]) {
 
-  if (
-    normalizedMax.value &&
-    numberOfFiles.value >= normalizedMax.value &&
-    normalizedMax.value > 1
-  ) {
-    notifications.push({
-      title: t('sui.whoops'),
-      text: t('sui.you_can_upload_up_to_n_files', {
-        count: normalizedMax.value,
-      }),
-      color: 'danger',
-    });
+  if (files.length == 0) {
     return;
   }
 
+  syncingFiles.value = true;
+
   let modelValue = cloneDeep(normalizedModelValue.value);
 
-  if (normalizedMax.value == 1) {
-    // Remove everything...
-    modelValue = [];
-  }
+  for (const file of files) {
+
+
+    if (
+      normalizedMax.value &&
+      modelValue.length >= normalizedMax.value &&
+      normalizedMax.value > 1
+    ) {
+      notifications.push({
+        title: t('sui.whoops'),
+        text: t('sui.you_can_upload_up_to_n_files', {
+          count: normalizedMax.value,
+        }),
+        color: 'danger',
+      });
+
+      break;
+    }
 
-  modelValue.push(file);
+    if (normalizedMax.value == 1) {
+      // Remove everything...
+      modelValue = [];
+    }
+
+    modelValue.push(file);
+  }
 
   sync(modelValue);
 
-  emit('upload:success', file);
+  syncingFiles.value = false;
+
+  emit('success', files);
 }
 
+// Disabled
+
+const disabledInternal = computed(() => {
+  return props.disabled || syncingFiles.value;
+});
+
+
 // Remove
 
 function promptRemove(index: number, length = 1) {
@@ -311,13 +326,17 @@ function sync(modelValue: MediaLibraryPayload) {
 
 // Events
 
-function onUploadStart(event: any) {
-  emit('upload:start', event);
+function onStart(event: unknown) {
+  emit('start', event);
   disableForm();
 }
 
-function onUploadEnd(event: any) {
-  emit('upload:end', event);
+function onFail(event: unknown) {
+  emit('fail', event);
+}
+
+function onEnd(event: unknown) {
+  emit('end', event);
   enableForm();
 }
 </script>