@mobileaction/action-kit 1.42.7-beta.2 → 1.42.7-beta.3

package/src/components/upload/index.vue

@@ -0,0 +1,386 @@
+<script setup lang="ts">
+import {
+    ComputedRef,
+    Ref,
+    WritableComputedRef,
+    computed,
+    onMounted,
+    onUnmounted,
+    ref,
+} from 'vue';
+import {
+    MaUploadType,
+    MaUploadSize,
+    MaUploadSizes,
+    MAUploadFile,
+    MaUploadFileStatus,
+} from './types';
+import { ButtonSizes, ButtonSize } from '../button/types';
+import {
+    useUploadFile,
+    generateFileID,
+    validateFile,
+} from './composables/file';
+import MaButton from '../button/index.vue';
+import MaIcon from '../icon/index.vue';
+import MaSpin from '../spin/index.vue';
+import SingleFile from './singleFile.vue';
+
+export interface MaUploadProps {
+  fileList: MAUploadFile[];
+  type?: MaUploadType;
+  size?: MaUploadSize;
+  accept?: string;
+  action?: string;
+  beforeUpload?: (file: File) => Promise<File>;
+  data?: Object;
+  disabled?: boolean;
+  headers?: Record<string, string>;
+  maxCount?: number;
+  maxFileSize?: number; // in bytes
+  multiple?: boolean;
+  name?: string;
+  ordered?: boolean;
+  showFileList?: boolean;
+  title?: string;
+  description?: string;
+  wait?: boolean;
+}
+
+const props = withDefaults(defineProps<MaUploadProps>(), {
+    type: 'box',
+    headers: () => ({}),
+    multiple: false,
+    name: 'file',
+    ordered: false,
+    showFileList: true,
+    size: 'md',
+    wait: false,
+    disabled: false,
+});
+
+const emit = defineEmits(['update:fileList', 'change', 'remove', 'error']);
+
+const uploadArea: Ref<HTMLDivElement | null> = ref(null);
+const fileInput: Ref<HTMLInputElement | null> = ref(null);
+const areaHighlight: Ref<boolean> = ref(false);
+
+const dragEvents = ['dragenter', 'dragover', 'dragleave', 'drop'];
+const dragEnterEvents = ['dragenter', 'dragover'];
+const dragLeaveEvents = ['dragleave', 'drop'];
+
+const files: WritableComputedRef<MAUploadFile[]> = computed({
+    get() {
+        return props.fileList;
+    },
+    set(data) {
+        emit('update:fileList', data);
+        emit('change', data);
+        if (props?.action) {
+            data.forEach(async (maFile, fileIndex) => {
+                if (
+                    [MaUploadFileStatus.done, MaUploadFileStatus.error].includes(
+                        maFile.status
+                    )
+                ) {
+                    return;
+                }
+                const { upload } = useUploadFile(
+                    props?.action || '', // || added for tsc warning
+                    props.headers,
+                    props.data,
+                    props.name
+                );
+                if (props?.beforeUpload) {
+                    maFile.file = await props.beforeUpload(maFile.file);
+                }
+                upload(maFile, (status, progress, response) => {
+                    if (files.value[fileIndex]) {
+                        if (status === MaUploadFileStatus.error) {
+                            emit('error', { file: maFile.file, message: response });
+                            removeFile(
+                                files.value.findIndex((file) => file.id === maFile.id)
+                            );
+                            return;
+                        }
+                        files.value[fileIndex].progress = progress;
+                        files.value[fileIndex].status = status;
+                        files.value[fileIndex].response = response || null;
+                        emit('change', files.value[fileIndex]);
+                    }
+                });
+            });
+        }
+    },
+});
+
+const fileNames = computed(() =>
+    files.value.map((maFile) => maFile.file.name).join(', ')
+);
+
+const uploadAreaStatus: ComputedRef<boolean> = computed(() =>
+    props.type === 'box' ? (!props.multiple ? !files.value.length : true) : true
+);
+
+const fileListStatus: ComputedRef<boolean> = computed(() =>
+    props.ordered && waitStatus.value
+        ? false
+        : files.value.length
+            ? props.showFileList
+            : false
+);
+
+const areaClassNames = computed(() => [
+  `ma-upload ma-upload--${props.type} ma-upload--${props.type}--${props.size}`,
+  {
+      'ma-upload--active': areaHighlight.value,
+  },
+  {
+      'ma-upload--disabled': disabledStatus.value,
+  },
+]);
+
+const fileListClassNames = computed(() => [
+  `ma-file-list`,
+  {
+      'only-file-list': !uploadAreaStatus.value,
+  },
+]);
+
+const buttonSize: ComputedRef<ButtonSize> = computed(() => {
+    const sizeIndex = props?.size ? MaUploadSizes.indexOf(props.size) : 0;
+    return ButtonSizes[sizeIndex];
+});
+
+const waitStatus = computed(
+    () =>
+        props.wait ||
+    files.value.some((file) => file.status === MaUploadFileStatus.uploading)
+);
+
+const disabledStatus = computed(() => props?.disabled || waitStatus.value);
+
+const checkMaxFileSize = (files: File[]): undefined | File => {
+    return Array.from(files).find(
+        (file) => props?.maxFileSize && file.size > props.maxFileSize
+    );
+};
+
+const handleChange = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  if (target.files) {
+    setFiles(Array.from(target.files));
+  }
+};
+
+const browseFiles = () => {
+    fileInput.value?.click();
+};
+
+const preventDragEvent = (e: Event) => {
+    e.preventDefault();
+};
+
+const highlightArea = () => {
+    areaHighlight.value = true;
+};
+
+const unHighlightArea = () => {
+    areaHighlight.value = false;
+};
+
+const onDrop = (e: DragEvent) => {
+    if (disabledStatus.value) {
+        return;
+    }
+    if (e.dataTransfer?.files) {
+        setFiles(
+            Array.from(e.dataTransfer.files).filter((file) => {
+                if (props?.accept && !validateFile(file, props.accept)) {
+                    emit('error', { file: file, message: 'file type does not match!' });
+                    return false;
+                }
+                return true;
+            })
+        );
+    }
+};
+
+const setFiles = (data: File[]) => {
+    const errorFile = checkMaxFileSize(data);
+    if (errorFile) {
+        emit('error', { file: errorFile, message: 'File too large' });
+        return;
+    }
+    const mappedFiles: MAUploadFile[] = Array.from(data)
+        .filter((_, index) =>
+            props?.maxCount ? index + 1 <= props.maxCount : true
+        )
+        .map((file) => ({
+            file,
+            id: generateFileID(),
+            status: props?.action
+                ? MaUploadFileStatus.uploading
+                : MaUploadFileStatus.done,
+            progress: props?.action ? 0 : 100,
+            response: null,
+        }));
+    if (props.multiple) {
+        files.value = [...files.value, ...mappedFiles];
+    } else if (mappedFiles.length) {
+        files.value = [mappedFiles[0]];
+    }
+};
+
+const removeFile = (fileIndex: number) => {
+    emit('remove', files.value[fileIndex]);
+    files.value = files.value.filter((_, i) => i !== fileIndex);
+};
+
+const cancelFile = (fileIndex: number) => {
+    const file: MAUploadFile = files.value[fileIndex];
+    if (typeof file?.cancelRequest === 'function') {
+        file.cancelRequest();
+    }
+    removeFile(fileIndex);
+};
+
+const cancelAllUploads = (event: Event) => {
+    event.stopPropagation();
+    files.value.forEach((_, fileIndex) => cancelFile(fileIndex));
+    files.value = [];
+};
+
+onMounted(() => {
+    dragEvents.forEach((eventName) => {
+        uploadArea.value?.addEventListener(eventName, preventDragEvent);
+    });
+    dragEnterEvents.forEach((eventName) => {
+        uploadArea.value?.addEventListener(eventName, highlightArea);
+    });
+    dragLeaveEvents.forEach((eventName) => {
+        uploadArea.value?.addEventListener(eventName, unHighlightArea);
+    });
+});
+
+onUnmounted(() => {
+    dragEvents.forEach((eventName) => {
+        uploadArea.value?.removeEventListener(eventName, preventDragEvent);
+    });
+    dragEnterEvents.forEach((eventName) => {
+        uploadArea.value?.removeEventListener(eventName, highlightArea);
+    });
+    dragLeaveEvents.forEach((eventName) => {
+        uploadArea.value?.removeEventListener(eventName, unHighlightArea);
+    });
+});
+</script>
+<template>
+  <div
+    class="ma-upload-wrapper"
+    v-bind="$attrs"
+  >
+    <div
+      v-show="uploadAreaStatus"
+      ref="uploadArea"
+      :class="areaClassNames"
+      @drop.prevent="onDrop($event as unknown as DragEvent)"
+    >
+      <input
+        :key="files.length"
+        ref="fileInput"
+        type="file"
+        :accept="accept"
+        :multiple="props.multiple"
+        :disabled="disabledStatus"
+        @change="handleChange"
+      >
+      <ma-button
+        v-if="props.type === 'button'"
+        :variant="fileList.length ? 'filled' : 'stroke'"
+        left-icon="export-2"
+        :size="buttonSize"
+        :disabled="disabledStatus"
+        :loading="waitStatus"
+        @click="browseFiles"
+      >
+        {{ fileList.length ? fileNames : props?.title }}
+      </ma-button>
+      <div
+        v-else-if="props.type === 'small-box'"
+        class="ma-upload__small_box"
+        @click="browseFiles"
+      >
+        <ma-spin
+          v-if="waitStatus"
+          type="three-circles"
+          color="blue"
+        />
+        <ma-icon
+          v-else
+          name="export-2-bulk"
+        />
+        <span class="text">
+          <template v-if="waitStatus"> Uploading... </template>
+          <template v-else>
+            {{ props?.title }}
+            <slot name="small-box-title" />
+          </template>
+        </span>
+      </div>
+      <div
+        v-else
+        class="ma-upload__box"
+        @click="browseFiles"
+      >
+        <template v-if="props.ordered && waitStatus">
+          <ma-spin
+            type="three-circles"
+            color="blue"
+          />
+          <span>Uploading file...</span>
+          <ma-button
+            class="box-cancel"
+            variant="stroke"
+            @click="cancelAllUploads"
+          >
+            Cancel
+          </ma-button>
+        </template>
+        <template v-else>
+          <div class="upload-icon">
+            <ma-icon name="upload-bulk" />
+          </div>
+          <span
+            v-if="props?.title"
+            class="upload-title"
+          >
+            {{ props?.title }}
+            <slot name="box-title" />
+          </span>
+          <span
+            v-if="props?.description"
+            class="upload-description"
+          >
+            {{ props?.description }}
+            <slot name="box-description" />
+          </span>
+        </template>
+      </div>
+    </div>
+    <div
+      v-if="fileListStatus"
+      :class="fileListClassNames"
+    >
+      <single-file
+        v-for="(file, fileIndex) in files"
+        :key="fileIndex"
+        :file="file"
+        :disabled="props.disabled"
+        @remove="removeFile(fileIndex)"
+        @cancel="cancelFile(fileIndex)"
+      />
+    </div>
+  </div>
+</template>
+<style lang="scss" src="./assets/styles.scss"></style>

package/src/components/upload/singleFile.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import MaIcon from '../icon/index.vue';
+import MaButton from '../button/index.vue';
+import { MAUploadFile, MaUploadFileStatus } from './types';
+
+export interface SingleFileProps {
+  file: MAUploadFile;
+  action?: string;
+  disabled: boolean;
+}
+const props = withDefaults(defineProps<SingleFileProps>(), {});
+
+const emits = defineEmits(['remove', 'cancel']);
+
+const fileSizeMB = computed(
+    () => `${(props.file.file.size / (1024 * 1024)).toFixed(1)} MB`
+);
+
+const fileSizeDisplayStatus = computed(() => typeof props.file.file.size === 'number');
+
+const remove = () => emits('remove');
+const cancel = () => emits('cancel');
+</script>
+<template>
+  <div class="single-file">
+    <div class="icon-wrapper">
+      <ma-icon name="document-bulk" />
+    </div>
+    <div class="single-file__detail">
+      <span class="file-name">{{ file.file.name }}</span>
+      <span
+        v-if="fileSizeDisplayStatus"
+        class="file-size"
+      >{{ fileSizeMB }}</span>
+      <span class="file-progress">
+        <span
+          class="progress-item"
+          :style="{ width: `${file.progress}%` }"
+        />
+      </span>
+    </div>
+    <div class="single-file__actions">
+      <ma-button
+        v-if="file.status === MaUploadFileStatus.uploading"
+        :disabled="disabled"
+        variant="ghost"
+        icon="close-circle-bulk"
+        @click="cancel()"
+      />
+      <ma-button
+        v-else
+        :disabled="disabled"
+        size="small"
+        variant="ghost"
+        icon="trash-bulk"
+        @click="remove()"
+      />
+      <span>%{{ parseInt(file.progress.toString()) }}</span>
+    </div>
+  </div>
+</template>

package/src/components/upload/stories/box.stories.ts

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import {
+  baseConfig,
+  Template,
+  BeforeUploadTemplate,
+  ExistingFilesTemplate,
+} from './constants';
+
+import type MaUpload from '../index.vue';
+
+const meta: Meta<typeof MaUpload> = {
+  title: 'Core/MaUpload/Box',
+  ...baseConfig,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MaUpload>;
+
+export const Default: Story = Template.bind({});
+Default.args = {
+  type: 'box',
+  title: 'Click or drag file to this area to upload',
+  description: 'SVG, PNG, PDF, CSV and max 10 MB',
+  multiple: true,
+  action: 'https://api.escuelajs.co/api/v1/files/upload',
+  showFileList: true,
+};
+
+export const WithoutAction: Story = Template.bind({});
+WithoutAction.args = {
+  type: 'box',
+  title: 'Click or drag file to this area to upload',
+  description: 'SVG, PNG, PDF, CSV and max 10 MB',
+  multiple: true,
+  showFileList: true,
+};
+
+export const BeforeUpload: Story = BeforeUploadTemplate.bind({});
+BeforeUpload.args = {
+  type: 'box',
+  title: 'Click or drag file to this area to upload',
+  description: 'SVG, PNG, PDF, CSV and max 10 MB',
+  multiple: true,
+  showFileList: true,
+  action: 'https://api.escuelajs.co/api/v1/files/upload',
+  accept: 'image/*',
+};
+
+export const Ordered: Story = Template.bind({});
+Ordered.args = {
+  type: 'box',
+  title: 'Click or drag file to this area to upload',
+  description: 'SVG, PNG, PDF, CSV and max 10 MB',
+  ordered: true,
+  multiple: true,
+  action: 'https://api.escuelajs.co/api/v1/files/upload',
+};
+
+export const Single: Story = Template.bind({});
+Single.args = {
+  type: 'box',
+  title: 'Click or drag file to this area to upload',
+  description: 'SVG, PNG, PDF, CSV and max 10 MB',
+  multiple: false,
+  action: 'https://api.escuelajs.co/api/v1/files/upload',
+};
+
+export const ExistingFiles: Story = ExistingFilesTemplate.bind({});
+ExistingFiles.args = {
+  type: 'box',
+  title: 'Click or drag file to this area to upload',
+  description: 'SVG, PNG, PDF, CSV and max 10 MB',
+  multiple: true,
+  action: 'https://api.escuelajs.co/api/v1/files/upload',
+};

package/src/components/upload/stories/button.stories.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { baseConfig, Template } from './constants';
+
+import type MaUpload from '../index.vue';
+
+const meta: Meta<typeof MaUpload> = {
+  title: 'Core/MaUpload/Button',
+  ...baseConfig,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MaUpload>;
+
+export const Default: Story = Template.bind({});
+Default.args = {
+  type: 'button',
+  title: 'Click to upload',
+  action: 'https://api.escuelajs.co/api/v1/files/upload',
+};

package/src/components/upload/stories/constants.ts

@@ -0,0 +1,159 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { MaUploadSizes, MaUploadTypes } from "../types";
+
+import MaUpload from '../index.vue';
+import { ref } from 'vue';
+
+export const baseConfig: Meta<typeof MaUpload> = {
+    component: MaUpload,
+    parameters: {
+        docs: {
+            description: {
+                component: `<p>Figma Designs <a href="https://www.figma.com/file/LsEcZ7CR3mf1vzBpCRgN7m/Design-Foundation_VD?type=design&node-id=634-79137&mode=dev" target="_blank">here!</a></p><p>
+                Upload file by selecting or dragging.</p><p>
+                You can use this component both in your file uploading operations and in a manual file upload process like a normal file input.
+                </p><p>
+                </p><pre style="color: #667085; font-size: 12px;">
+                MaFileList: [
+                    {
+                        id: 'id', // a unique identifier, auto assigned from lib
+                        file: File
+                        status: 'done', // options：uploading, done, error
+                        progress: 100 // uploading progress
+                        response: {} // type: any, response from the endpoint
+                     }
+                ]
+                </pre>`,
+            },
+        },
+    },
+    argTypes: {
+        fileList: {
+            description: 'v-model:fileList <br> List of files that have been uploaded. '
+        },
+        type: {
+            control: { type: 'select' },
+            options: MaUploadTypes,
+        },
+        size: {
+            control: { type: 'select' },
+            options: MaUploadSizes,
+        },
+        data: {
+            description: 'Uploading params or function which can return uploading params.'
+        },
+        accept: {
+            description: 'File types that can be accepted. See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept" target="_blank">input accept attribute</a>'
+        },
+        beforeUpload: {
+            description: 'Hook function which will be executed before uploading. Uploading will be stopped with false or a rejected Promise returned.'
+        },
+        maxCount: {
+            description: 'Limit the number of uploaded files.'
+        },
+        headers: {
+            description: 'Set request headers'
+        },
+        action: {
+            description: 'Uploading URL. Not required!'
+        },
+        showFileList: {
+            description: 'allows file list display below.'
+        },
+        maxFileSize: {
+            description: 'in byte per file.'
+        },
+        name: {
+            description: 'The name of uploading file'
+        },
+        ordered: {
+            description: 'Ordered variant in box type.'
+        }
+    },
+};
+
+export const Template: StoryFn = (args: any) => ({
+    components: { MaUpload },
+    setup() {
+        const files = ref([]);
+        return { args, files };
+    },
+    template: `<ma-upload v-model:fileList="files" v-bind="args" />`,
+});
+
+export const BeforeUploadTemplate: StoryFn = (args: any) => ({
+    components: { MaUpload },
+    setup() {
+        const files = ref([]);
+        const beforeUpload = (file: File): Promise<File> => {
+            return new Promise(resolve => {
+                const reader = new FileReader();
+                reader.readAsDataURL(file);
+                reader.onload = () => {
+                    const img: HTMLImageElement = document.createElement('img');
+                    img.src = reader.result as string;
+                    img.onload = () => {
+                        const canvas = document.createElement('canvas');
+                        canvas.width = img.naturalWidth;
+                        canvas.height = img.naturalHeight;
+                        const ctx = canvas.getContext('2d');
+                        ctx.drawImage(img, 0, 0);
+                        ctx.fillStyle = 'red';
+                        ctx.textBaseline = 'middle';
+                        ctx.font = '33px Arial';
+                        ctx.fillText('Action-Kit', 20, 20);
+                        canvas.toBlob(blob => {
+                            const fileName = file.name;
+                            const convertedFile = new File([blob], fileName, { type: blob.type });
+                            resolve(convertedFile);
+                        });
+                    };
+                };
+            });
+        }
+        return { args, files, beforeUpload };
+    },
+    template: `<ma-upload :beforeUpload="beforeUpload" v-model:fileList="files" v-bind="args" />
+    <hr class="my-12">
+    <p>In this example, watermark is applied to images before upload, you can see the response after uploading an image.</p>
+    <pre>{{ files }}</pre>
+    `,
+});
+
+export const ExistingFilesTemplate: StoryFn = (args: any) => ({
+    components: { MaUpload },
+    setup() {
+        const files = ref([
+            {
+                "file": {
+                    name: 'Existing File 1.jpg',
+                    size: 1000000
+                },
+                "id": "-1",
+                "status": "done",
+                "progress": 100,
+                "response": {
+                    "originalname": "spin.gif",
+                    "filename": "c90c.gif",
+                    "location": "https://api.escuelajs.co/api/v1/files/c90c.gif"
+                }
+            },
+            {
+                "file": {
+                    name: 'Existing File 2.pdf',
+                    size: 500000
+                },
+                "id": "-2",
+                "status": "done",
+                "progress": 100,
+                "response": {
+                    "originalname": "spin.gif",
+                    "filename": "c90c.gif",
+                    "location": "https://api.escuelajs.co/api/v1/files/c90c.gif"
+                }
+            }
+        ]);
+        return { args, files };
+    },
+    template: `<ma-upload v-model:fileList="files" v-bind="args" />`,
+});