sprintify-ui 0.2.17 → 0.2.19

package/src/components/BaseFileUploader.stories.js

@@ -1,84 +1,89 @@
-import BaseFileUploader from '@/components/BaseFileUploader.vue';
-import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
-import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-
-export default {
-  title: 'Form/BaseFileUploader',
-  component: BaseFileUploader,
-  args: {
-    twButton: 'w-full',
-    acceptedExtensions: ['jpg', 'png'],
-    maxSize: 1024 * 200, // 200kb
-    url: 'https://dummyjson.com/posts/add',
-  },
-};
-
-const Template = (args) => ({
-  components: {
-    BaseFileUploader,
-    BaseIcon,
-    BaseLoadingCover,
-    BaseAppNotifications,
-  },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseFileUploader v-bind="args">
-      <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"
-          :class="[
-            dragging ? 'bg-slate-100' : 'bg-white',
-            disabled ? 'bg-slate-100 cursor-not-allowed opacity-50' : 'hover:bg-slate-50',
-          ]"
-        >
-          <div class="rounded-full bg-slate-200 p-2">
-            <BaseIcon
-              icon="heroicons:arrow-up-on-square"
-              class="h-6 w-6"
-            />
-          </div>
-          <div class="text-left">
-            <p class="mb-0 text-sm font-medium leading-tight">
-              {{ $t("sui.drop_or_click_to_upload") }}
-            </p>
-            <p class="text-sm text-slate-500 mt-1">Max 200kb</p>
-            <p class="text-sm text-slate-500">.jpg, .png</p>
-          </div>
-        </div>
-      </template>
-      <template #loading="{ dragging, disabled, uploading, selecting }">
-        <BaseLoadingCover
-          :model-value="args.loading || uploading || selecting"
-          :delay="0"
-          tw-icon="text-red-600 w-6 h-6"
-          tw-backdrop="bg-white opacity-60"
-        />
-      </template>
-    </BaseFileUploader>
-    <BaseAppNotifications></BaseAppNotifications>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-export const ImagePicker = Template.bind({});
-ImagePicker.args = {
-  component: 'BaseFilePickerCrop',
-  cropper: {
-    preset: 'avatar',
-  },
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-};
-
-export const Loading = Template.bind({});
-Loading.args = {
-  loading: true,
-};
+import BaseFileUploader from '@/components/BaseFileUploader.vue';
+import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
+import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+
+export default {
+  title: 'Form/BaseFileUploader',
+  component: BaseFileUploader,
+  args: {
+    twButton: 'w-full',
+    acceptedExtensions: ['jpg', 'png'],
+    maxSize: 1024 * 1024 * 20, // 20MB
+    url: 'https://faker.witify.io/api/todos/upload',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseFileUploader,
+    BaseIcon,
+    BaseLoadingCover,
+    BaseAppNotifications,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseFileUploader v-bind="args">
+      <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"
+          :class="[
+            dragging ? 'bg-slate-100' : 'bg-white',
+            disabled ? 'bg-slate-100 cursor-not-allowed opacity-50' : 'hover:bg-slate-50',
+          ]"
+        >
+          <div class="rounded-full bg-slate-200 p-2">
+            <BaseIcon
+              icon="heroicons:arrow-up-on-square"
+              class="h-6 w-6"
+            />
+          </div>
+          <div class="text-left">
+            <p class="mb-0 text-sm font-medium leading-tight">
+              {{ $t("sui.drop_or_click_to_upload") }}
+            </p>
+            <p class="text-sm text-slate-500 mt-1">Max 200kb</p>
+            <p class="text-sm text-slate-500">.jpg, .png</p>
+          </div>
+        </div>
+      </template>
+      <template #loading="{ dragging, disabled, uploading, selecting }">
+        <BaseLoadingCover
+          :model-value="args.loading || uploading || selecting"
+          :delay="0"
+          tw-icon="text-red-600 w-6 h-6"
+          tw-backdrop="bg-white opacity-60"
+        />
+      </template>
+    </BaseFileUploader>
+    <BaseAppNotifications></BaseAppNotifications>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const ImagePicker = Template.bind({});
+ImagePicker.args = {
+  component: 'BaseFilePickerCrop',
+  cropper: {
+    preset: 'avatar',
+  },
+};
+
+export const Multiple = Template.bind({});
+Multiple.args = {
+  multiple: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  loading: true,
+};

package/src/components/BaseFileUploader.vue

@@ -1,163 +1,174 @@
-<template>
-  <div class="relative">
-    <component
-      :is="componentInternal"
-      v-bind="pickerProps"
-      @select="onFileSelect"
-    >
-      <template #default="slotProps">
-        <slot
-          name="default"
-          :uploading="uploading"
-          :loading="loading"
-          v-bind="slotProps"
-        />
-        <slot
-          name="loading"
-          :uploading="uploading"
-          :loading="loading"
-          v-bind="slotProps"
-        >
-          <BaseLoadingCover
-            :delay="0"
-            tw-icon="w-6 h-6 text-primary-600"
-            :model-value="loading || uploading || slotProps.selecting"
-          />
-        </slot>
-      </template>
-    </component>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { config } from '@/index';
-import { UploadedFile } from '@/types/UploadedFile';
-import { useNotificationsStore } from '@/stores/notifications';
-import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
-import { BaseCropperConfig } from '@/types';
-import BaseFilePicker from './BaseFilePicker.vue';
-import BaseFilePickerCrop from './BaseFilePickerCrop.vue';
-import { t } from '@/i18n';
-
-const http = config.http;
-const notifications = useNotificationsStore();
-
-const props = withDefaults(
-  defineProps<{
-    component?: 'BaseFilePicker' | 'BaseFilePickerCrop';
-    url?: string;
-    disabled?: boolean;
-    loading?: boolean;
-    beforeUpload?: () => boolean;
-    twButton?: string;
-    maxSize?: number;
-    accept?: string;
-    acceptedExtensions?: string[];
-    cropper?: BaseCropperConfig | Record<string, any> | boolean | null;
-  }>(),
-  {
-    component: 'BaseFilePicker',
-    url: undefined,
-    disabled: false,
-    loading: false,
-    beforeUpload: (): boolean => {
-      return true;
-    },
-    twButton: '',
-    maxSize: undefined,
-    accept: undefined,
-    acceptedExtensions: undefined,
-    cropper: true,
-  }
-);
-
-const emit = defineEmits([
-  'upload:start',
-  'upload:success',
-  'upload:fail',
-  'upload:end',
-]);
-
-const componentInternal = computed(() => {
-  if (props.component == 'BaseFilePickerCrop') {
-    return BaseFilePickerCrop;
-  }
-  return BaseFilePicker;
-});
-
-const pickerProps = computed(() => {
-  const pickerProps = {
-    disabled: props.disabled || props.loading || uploading.value,
-    twButton: props.twButton,
-    maxSize: props.maxSize,
-    accept: props.component == 'BaseFilePickerCrop' ? undefined : props.accept,
-    acceptedExtensions: props.acceptedExtensions,
-  } as Record<string, any>;
-
-  if (props.component == 'BaseFilePickerCrop') {
-    pickerProps.cropper = props.cropper;
-  }
-
-  return pickerProps;
-});
-
-const uploading = ref(false);
-
-async function onFileSelect(file: File) {
-  if (uploading.value) {
-    return;
-  }
-
-  uploading.value = true;
-
-  if (!(await props.beforeUpload())) {
-    uploading.value = false;
-    return;
-  }
-
-  try {
-    const formData = new FormData();
-
-    formData.append('file', file);
-
-    emit('upload:start');
-
-    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();
-
-    reader.onload = (e: any) => {
-      payload.data_url = e.target.result;
-      onSuccess(payload);
-    };
-
-    reader.onerror = (e: any) => {
-      onSuccess(payload);
-    };
-
-    if (payload.mime_type.includes('image')) {
-      reader.readAsDataURL(file);
-    } else {
-      onSuccess(payload);
-    }
-  } catch (e: unknown) {
-    console.error(e);
-    emit('upload:fail');
-    notifications.push({
-      color: 'danger',
-      title: t('sui.error'),
-      text: t('sui.upload_failed'),
-    });
-  } finally {
-    emit('upload:end');
-    uploading.value = false;
-  }
-}
-
-function onSuccess(payload: any) {
-  emit('upload:success', payload);
-}
-</script>
+<template>
+  <div class="relative">
+    <component
+      :is="componentInternal"
+      v-bind="pickerProps"
+      @select="onFileSelect"
+    >
+      <template #default="slotProps">
+        <slot
+          name="default"
+          :uploading="uploading"
+          :loading="loading"
+          v-bind="slotProps"
+        />
+        <slot
+          name="loading"
+          :uploading="uploading"
+          :loading="loading"
+          v-bind="slotProps"
+        >
+          <BaseLoadingCover
+            :delay="0"
+            tw-icon="w-6 h-6 text-primary-600"
+            :model-value="loading || uploading || slotProps.selecting"
+          />
+        </slot>
+      </template>
+    </component>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { config } from '@/index';
+import { UploadedFile } from '@/types/UploadedFile';
+import { useNotificationsStore } from '@/stores/notifications';
+import BaseLoadingCover from '@/components/BaseLoadingCover.vue';
+import { BaseCropperConfig } from '@/types';
+import BaseFilePicker from './BaseFilePicker.vue';
+import BaseFilePickerCrop from './BaseFilePickerCrop.vue';
+import { t } from '@/i18n';
+
+const http = config.http;
+const notifications = useNotificationsStore();
+
+const props = withDefaults(
+  defineProps<{
+    component?: 'BaseFilePicker' | 'BaseFilePickerCrop';
+    url?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    beforeUpload?: () => boolean;
+    twButton?: string;
+    maxSize?: number;
+    accept?: string;
+    acceptedExtensions?: string[];
+    cropper?: BaseCropperConfig | Record<string, any> | boolean | null;
+    multiple: boolean;
+  }>(),
+  {
+    component: 'BaseFilePicker',
+    url: undefined,
+    disabled: false,
+    loading: false,
+    beforeUpload: (): boolean => {
+      return true;
+    },
+    twButton: '',
+    maxSize: undefined,
+    accept: undefined,
+    acceptedExtensions: undefined,
+    cropper: true,
+    multiple: false
+  }
+);
+
+const emit = defineEmits([
+  'upload:start',
+  'upload:success',
+  'upload:fail',
+  'upload:end',
+]);
+
+const componentInternal = computed(() => {
+  if (props.component == 'BaseFilePickerCrop') {
+    return BaseFilePickerCrop;
+  }
+  return BaseFilePicker;
+});
+
+const pickerProps = computed(() => {
+  const pickerProps = {
+    disabled: props.disabled || props.loading || uploading.value,
+    twButton: props.twButton,
+    maxSize: props.maxSize,
+    accept: props.component == 'BaseFilePickerCrop' ? undefined : props.accept,
+    acceptedExtensions: props.acceptedExtensions,
+    multiple: props.component == 'BaseFilePickerCrop' ? undefined : props.multiple,
+  } as Record<string, any>;
+
+  if (props.component == 'BaseFilePickerCrop') {
+    pickerProps.cropper = props.cropper;
+  }
+
+  return pickerProps;
+});
+
+const uploading = ref(false);
+
+async function onFileSelect(files: File | File[]) {
+  if (uploading.value) {
+    return;
+  }
+
+  uploading.value = true;
+
+  if (!(await props.beforeUpload())) {
+    uploading.value = false;
+    return;
+  }
+
+  try {
+    const formData = new FormData();
+
+    if (Array.isArray(files)) {
+      await Promise.all(files.map(f => processFileUpload(formData, f)))
+    } else {
+      await processFileUpload(formData, files)
+    }
+  } catch (e: unknown) {
+    console.error(e);
+    emit('upload:fail');
+    notifications.push({
+      color: 'danger',
+      title: t('sui.error'),
+      text: t('sui.upload_failed'),
+    });
+  } finally {
+    emit('upload:end');
+    uploading.value = false;
+  }
+}
+
+async function processFileUpload(formData: FormData, file: File) {
+  formData.append('file', file);
+
+  emit('upload:start');
+
+  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();
+
+  reader.onload = (e: any) => {
+    payload.data_url = e.target.result;
+    onSuccess(payload);
+  };
+
+  reader.onerror = (e: any) => {
+    onSuccess(payload);
+  };
+
+  if (payload.mime_type.includes('image')) {
+    reader.readAsDataURL(file);
+  } else {
+    onSuccess(payload);
+  }
+}
+
+function onSuccess(payload: any) {
+  emit('upload:success', payload);
+}
+</script>

package/src/components/BaseForm.stories.js

@@ -1,46 +1,46 @@
-import BaseForm from './BaseForm.vue';
-import BaseField from './BaseField.vue';
-import BaseMediaLibrary from './BaseMediaLibrary.vue';
-import ShowValue from '../../.storybook/components/ShowValue.vue';
-
-export default {
-  title: 'Form/BaseForm',
-  component: BaseForm,
-};
-
-const Template = (args) => ({
-  components: {
-    ShowValue,
-    BaseForm,
-    BaseField,
-    BaseMediaLibrary,
-  },
-  setup() {
-    const form = ref({
-      number: 1.1,
-    });
-    return { args, form };
-  },
-  template: `
-  <BaseForm 
-    method="post" 
-    url="https://faker.witify.io/api/todos/422" 
-    :data="form" 
-    v-slot="{disabled}"
-  >
-    <BaseField class="mb-3" name="number" label="Number">
-      <BaseInput v-model="form.number"></BaseInput>
-    </BaseField>
-    
-    <BaseField class="mb-3" name="media" label="Media">
-      <BaseMediaLibrary v-model="form.media" upload-url="https://faker.witify.io/api/todos/upload"></BaseMediaLibrary>
-    </BaseField>
-
-    <button type="submit" class="btn btn-primary" :disabled="disabled">Submit</button>
-  </BaseForm>
-  <ShowValue :value="form" />
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
+import BaseForm from './BaseForm.vue';
+import BaseField from './BaseField.vue';
+import BaseMediaLibrary from './BaseMediaLibrary.vue';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
+
+export default {
+  title: 'Form/BaseForm',
+  component: BaseForm,
+};
+
+const Template = (args) => ({
+  components: {
+    ShowValue,
+    BaseForm,
+    BaseField,
+    BaseMediaLibrary,
+  },
+  setup() {
+    const form = ref({
+      number: 1.1,
+    });
+    return { args, form };
+  },
+  template: `
+  <BaseForm 
+    method="post" 
+    url="https://faker.witify.io/api/todos/422" 
+    :data="form" 
+    v-slot="{disabled}"
+  >
+    <BaseField class="mb-3" name="number" label="Number">
+      <BaseInput v-model="form.number"></BaseInput>
+    </BaseField>
+    
+    <BaseField class="mb-3" name="media" label="Media">
+      <BaseMediaLibrary v-model="form.media" upload-url="https://faker.witify.io/api/todos/upload"></BaseMediaLibrary>
+    </BaseField>
+
+    <button type="submit" class="btn btn-primary" :disabled="disabled">Submit</button>
+  </BaseForm>
+  <ShowValue :value="form" />
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};