sprintify-ui 0.2.18 → 0.2.21

package/src/components/BaseFilePicker.stories.js

@@ -1,78 +1,84 @@
-import BaseFilePicker from './BaseFilePicker.vue';
-import { Icon as BaseIcon } from '@iconify/vue';
-import ShowValue from '../../.storybook/components/ShowValue.vue';
-import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
-
-export default {
-  title: 'Form/BaseFilePicker',
-  component: BaseFilePicker,
-  args: {},
-};
-
-const Template = (args) => ({
-  components: { BaseFilePicker, BaseIcon, ShowValue, BaseAppNotifications },
-  setup() {
-    const file = ref(null);
-
-    function onSelect(f) {
-      file.value = f;
-    }
-
-    return { args, file, onSelect };
-  },
-  template: `
-    <BaseFilePicker v-bind="args" @select="onSelect">
-      <template #default="{ dragging, disabled }">
-        <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' : '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"
-              :class="[disabled ? 'text-slate-400' : 'text-slate-500']"
-            />
-          </div>
-          <div class="text-left">
-            <p 
-              class="mb-0 text-sm font-medium leading-tight" 
-              :class="[disabled ? 'text-slate-400' : 'text-slate-900']"
-            >
-              {{ $t("sui.drop_or_click_to_upload") }}
-            </p>
-            <div class="mt-1">
-              <p v-if="args.maxSize" class="text-sm text-slate-500">Max {{ args.maxSize }} bytes</p>
-              <p v-if="args.acceptedExtensions" class="text-sm text-slate-500">{{ args.acceptedExtensions?.join(', ') }}</p>
-            </div>
-          </div>
-        </div>
-      </template>
-    </BaseFilePicker>
-
-    <ShowValue :value="file" />
-
-    <BaseAppNotifications></BaseAppNotifications>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-export const MaxSize = Template.bind({});
-MaxSize.args = {
-  maxSize: 1024 * 10, // 10kb
-};
-
-export const FileExtension = Template.bind({});
-FileExtension.args = {
-  acceptedExtensions: ['xlsx', 'xls'],
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-};
+import BaseFilePicker from './BaseFilePicker.vue';
+import { Icon as BaseIcon } from '@iconify/vue';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
+import BaseAppNotifications from '@/components/BaseAppNotifications.vue';
+import { t } from '@/i18n';
+
+export default {
+  title: 'Media/BaseFilePicker',
+  component: BaseFilePicker,
+  args: {},
+};
+
+const Template = (args) => ({
+  components: { BaseFilePicker, BaseIcon, ShowValue, BaseAppNotifications },
+  setup() {
+    const file = ref(null);
+
+    function onSelect(f) {
+      file.value = f;
+    }
+
+    return { args, file, onSelect, t };
+  },
+  template: `
+    <BaseFilePicker v-bind="args" @select="onSelect">
+      <template #default="{ dragging, disabled }">
+        <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' : '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"
+              :class="[disabled ? 'text-slate-400' : 'text-slate-500']"
+            />
+          </div>
+          <div class="text-left">
+            <p 
+              class="mb-0 text-sm font-medium leading-tight" 
+              :class="[disabled ? 'text-slate-400' : 'text-slate-900']"
+            >
+              {{ t("sui.drop_or_click_to_upload") }}
+            </p>
+            <div class="mt-1">
+              <p v-if="args.maxSize" class="text-sm text-slate-500">Max {{ args.maxSize }} bytes</p>
+              <p v-if="args.acceptedExtensions" class="text-sm text-slate-500">{{ args.acceptedExtensions?.join(', ') }}</p>
+            </div>
+          </div>
+        </div>
+      </template>
+    </BaseFilePicker>
+
+    <ShowValue :value="file" />
+
+    <BaseAppNotifications></BaseAppNotifications>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const MaxSize = Template.bind({});
+MaxSize.args = {
+  maxSize: 1024 * 10, // 10kb
+};
+
+export const FileExtension = Template.bind({});
+FileExtension.args = {
+  acceptedExtensions: ['xlsx', 'xls'],
+};
+
+export const Multiple = Template.bind({});
+Multiple.args = {
+  multiple: true
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};

package/src/components/BaseFilePicker.vue

@@ -1,136 +1,166 @@
-<template>
-  <button
-    type="button"
-    :class="twButton"
-    :disabled="disabled"
-    @drop.prevent="
-      dragging = false;
-      handleDrop($event);
-    "
-    @dragleave.prevent="dragging = false"
-    @dragover.prevent="dragging = true"
-    @dragenter.prevent="dragging = true"
-    @click="pickFile"
-  >
-    <slot
-      :selecting="selecting"
-      :dragging="dragging"
-      :disabled="disabled"
-    />
-  </button>
-  <input
-    ref="input"
-    type="file"
-    :accept="accept"
-    hidden="true"
-    @change="onInputChange"
-  >
-</template>
-
-<script lang="ts" setup>
-import { t } from '@/i18n';
-import { useNotificationsStore } from '@/stores/notifications';
-import { fileSizeFormat, toHumanList } from '@/utils';
-import { maxSize, validExtension } from '@/utils/fileValidations';
-
-const props = withDefaults(
-  defineProps<{
-    disabled?: boolean;
-    twButton?: string;
-    maxSize?: number;
-    accept?: string;
-    acceptedExtensions?: string[];
-  }>(),
-  {
-    disabled: false,
-    twButton: '',
-    maxSize: 1024 * 1024 * 20, // 20 MB,
-    accept: undefined,
-    acceptedExtensions: undefined,
-  }
-);
-
-const emit = defineEmits(['select']);
-
-const notifications = useNotificationsStore();
-
-const selecting = ref(false);
-const dragging = ref(false);
-const input = ref<HTMLInputElement | undefined>();
-
-async function pickFile() {
-  if (props.disabled) {
-    return;
-  }
-
-  input.value?.click();
-}
-
-function onInputChange() {
-  const files = (input.value?.files ?? []) as File[];
-  select(files);
-}
-
-function handleDrop(e: any) {
-  if (props.disabled) {
-    return;
-  }
-
-  const files = e?.dataTransfer?.files ?? [];
-
-  select(files);
-}
-
-async function select(files: File[]) {
-  if (props.disabled) {
-    return;
-  }
-
-  if (!files || files.length == 0 || !(files[0] instanceof File)) {
-    return;
-  }
-
-  selecting.value = true;
-
-  try {
-    const file = files[0];
-
-    if (!maxSize(file, props.maxSize)) {
-      notifications.push({
-        color: 'danger',
-        title: t('sui.error'),
-        text: t('sui.the_file_size_must_not_exceed_x', {
-          x: fileSizeFormat(props.maxSize),
-        }),
-      });
-
-      selecting.value = false;
-      return;
-    }
-
-    if (!validExtension(file, props.acceptedExtensions)) {
-      notifications.push({
-        color: 'danger',
-        title: t('sui.error'),
-        text:
-          t('sui.the_file_type_is_invalid') +
-          ' ' +
-          t('sui.file_must_be_of_type') +
-          ' ' +
-          toHumanList(props.acceptedExtensions as string[], t('sui.or')) +
-          '.',
-      });
-
-      selecting.value = false;
-      return;
-    }
-
-    emit('select', file);
-  } finally {
-    if (input.value) {
-      input.value.value = '';
-    }
-    selecting.value = false;
-  }
-}
-</script>
+<template>
+  <button
+    type="button"
+    :class="twButton"
+    :disabled="disabled"
+    @drop.prevent="
+      dragging = false;
+    handleDrop($event);
+    "
+    @dragleave.prevent="dragging = false"
+    @dragover.prevent="dragging = true"
+    @dragenter.prevent="dragging = true"
+    @click="pickFile"
+  >
+    <slot
+      :selecting="selecting"
+      :dragging="dragging"
+      :disabled="disabled"
+    />
+  </button>
+  <input
+    ref="input"
+    type="file"
+    :accept="accept"
+    :multiple="multiple"
+    hidden="true"
+    @change="onInputChange"
+  >
+</template>
+
+<script lang="ts" setup>
+import { t } from '@/i18n';
+import { useNotificationsStore } from '@/stores/notifications';
+import { fileSizeFormat, toHumanList } from '@/utils';
+import { maxSize, validExtension } from '@/utils/fileValidations';
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    twButton?: string;
+    maxSize?: number;
+    accept?: string;
+    acceptedExtensions?: string[];
+    multiple?: boolean;
+  }>(),
+  {
+    disabled: false,
+    twButton: '',
+    maxSize: 1024 * 1024 * 20, // 20 MB,
+    accept: undefined,
+    acceptedExtensions: undefined,
+    multiple: false,
+  }
+);
+
+const emit = defineEmits(['select']);
+
+const notifications = useNotificationsStore();
+
+const selecting = ref(false);
+const dragging = ref(false);
+const input = ref<HTMLInputElement | undefined>();
+
+async function pickFile() {
+  if (props.disabled) {
+    return;
+  }
+
+  input.value?.click();
+}
+
+function onInputChange() {
+  const files = (input.value?.files ?? []) as File[];
+  select(files);
+}
+
+function handleDrop(e: any) {
+  if (props.disabled) {
+    return;
+  }
+
+  const files = e?.dataTransfer?.files ?? [];
+
+  select(files);
+}
+
+async function select(files: File[]) {
+  if (props.disabled) {
+    return;
+  }
+
+  if (!files || files.length == 0 || !(files[0] instanceof File)) {
+    return;
+  }
+
+  selecting.value = true;
+
+  try {
+    if (!props.multiple) {
+      const file = files[0];
+
+      if (!isValid(file)) {
+        return;
+      }
+
+      emit('select', file);
+
+      return
+    }
+
+    const listFiles = [] as File[];
+
+    for (const file of files) {
+      if (!isValid(file)) {
+        return;
+      }
+
+      listFiles.push(file);
+    }
+
+    emit('select', listFiles);
+
+  } finally {
+    if (input.value) {
+      input.value.value = '';
+    }
+    selecting.value = false;
+  }
+}
+
+function isValid(file: File) {
+  if (!maxSize(file, props.maxSize)) {
+    notifications.push({
+      color: 'danger',
+      title: t('sui.error'),
+      text: t('sui.the_file_size_must_not_exceed_x', {
+        x: fileSizeFormat(props.maxSize),
+      }),
+    });
+
+    selecting.value = false;
+
+    return false;
+  }
+
+  if (!validExtension(file, props.acceptedExtensions)) {
+    notifications.push({
+      color: 'danger',
+      title: t('sui.error'),
+      text:
+        t('sui.the_file_type_is_invalid') +
+        ' ' +
+        t('sui.file_must_be_of_type') +
+        ' ' +
+        toHumanList(props.acceptedExtensions as string[], t('sui.or')) +
+        '.',
+    });
+
+    selecting.value = false;
+
+    return false;
+  }
+
+  return true;
+}
+</script>