@weni/unnnic-system 1.24.21 → 1.25.0

package/src/components/UploadArea/UploadArea.vue

@@ -1,63 +1,21 @@
 <template>
   <div>
+    <UnnnicDropArea
+      :currentFiles.sync="currentFiles"
+      :acceptMultiple="acceptMultiple"
+      :supportedFormats="supportedFormats"
+      :maxFileSize="maxFileSize"
+      :shouldReplace="shouldReplace"
+      :maximumUploads="maximumUploads"
+      :subtitle="subtitle"
+      @file-change="$emit('fileChange', $event)"
+    />
+
     <div
-      ref="dropzone"
-      :class="{
-        'unnnic-upload-area__dropzone': true,
-        'unnnic-upload-area__dropzone__is-dragover': isDragging,
-        'unnnic-upload-area__dropzone__has-error': hasError,
-      }"
-      v-on:dragenter.stop.prevent="dragenter"
-      v-on:dragover.stop.prevent="dragover"
-      v-on:dragleave.stop.prevent="dragleave"
-      v-on:dragend.stop.prevent="dragend"
-      v-on:drop.stop.prevent="drop"
-      @click="() => this.$refs.file.click()"
+      v-if="currentFiles.length > 0"
+      class="unnnic-upload-area__cards"
     >
-      <unnnic-icon-svg
-        class="unnnic-upload-area__dropzone__icon"
-        icon="upload-bottom-1"
-        :scheme="hasError ? 'feedback-red' : 'brand-weni'"
-        size="xl"
-      />
-
-      <div class="unnnic-upload-area__dropzone__content">
-        <span class="unnnic-upload-area__dropzone__content__title">
-          {{ $t('upload_area.title.text') }}
-          <span
-            :class="`unnnic-upload-area__dropzone__content__title__${
-              hasError ? 'error' : 'search'
-            }`"
-          >
-            {{ $t('upload_area.title.highlight') }}
-          </span>
-        </span>
-        <span
-          :class="[
-            'unnnic-upload-area__dropzone__content__subtitle',
-            { 'unnnic-upload-area__dropzone__content__subtitle__error': hasError },
-          ]"
-          :title='formattedSupportedFormats'
-        >
-          {{
-            subtitle ||
-            `${$t(
-              `upload_area${hasError ? '.invalid' : ''}.subtitle`
-            )} ${formattedSupportedFormats}`
-          }}
-        </span>
-      </div>
-      <input
-        type="file"
-        ref="file"
-        :accept="supportedFormats"
-        :multiple="acceptMultiple"
-        @input="handleFileChange"
-        style="display: none;"
-      />
-    </div>
-    <div v-if="currentFiles.length > 0" class="unnnic-upload-area__cards">
-      <unnnic-import-card
+      <UnnnicImportCard
         v-for="(file, index) in currentFiles"
         :key="index"
         :title="file.name"
@@ -69,24 +27,26 @@
         :acceptedFormats="supportedFormats"
         uploadIcon="button-refresh-arrows-1"
         @delete="removeFile(index)"
-        @modifiedFile="modifyFile(index, $event)"
+        @modified-file="modifyFile(index, $event)"
       />
     </div>
   </div>
 </template>
 
 <script>
-import mime from 'mime-types';
-
-import UnnnicIconSvg from '../Icon.vue';
+import UnnnicDropArea from '../DropArea/DropArea.vue';
 import UnnnicImportCard from '../ImportCard/ImportCard.vue';
 
 export default {
-  name: 'unnnic-upload-area',
+  name: 'UnnnicUploadArea',
   components: {
-    UnnnicIconSvg,
+    UnnnicDropArea,
     UnnnicImportCard,
   },
+  model: {
+    prop: 'files',
+    event: 'fileChange',
+  },
   props: {
     files: {
       type: Array,
@@ -134,152 +94,26 @@ export default {
       default: '',
     },
   },
-  model: {
-    prop: 'files',
-    event: 'fileChange',
-  },
+
+  emits: ['fileChange'],
+
   data() {
     return {
-      hasError: false,
-      isDragging: false,
-      dragEnterCounter: 0, // to handle dragenter/dragleave on child elements
       currentFiles: this.files,
     };
   },
+
   watch: {
     files(newValue) {
       this.currentFiles = newValue;
     },
   },
-  computed: {
-    formattedSupportedFormats() {
-      const formats = this.supportedFormats.split(',').map((format) => format.toUpperCase());
 
-      return formats.join(', ');
-    },
-  },
   methods: {
-    dragenter() {
-      this.dragEnterCounter += 1;
-      this.isDragging = true;
-    },
-    dragover() {
-      this.isDragging = true;
-    },
-    dragleave() {
-      this.dragEnterCounter -= 1;
-      if (this.dragEnterCounter === 0) {
-        this.isDragging = false;
-      }
-    },
-    dragend() {
-      this.isDragging = false;
-    },
-    drop(event) {
-      this.isDragging = false;
-
-      const { files } = event.dataTransfer;
-
-      if (this.validateFiles(files)) {
-        this.addFiles(files);
-      }
-    },
-    handleFileChange(event) {
-      const { files } = event.target;
-
-      if (this.validateFiles(files)) {
-        this.addFiles(files);
-      }
-      this.$refs.file.value = '';
-    },
-    validateFiles(files) {
-      if (!this.acceptMultiple && files.length > 1) {
-        this.setErrorState();
-        return false;
-      }
-
-      if (!this.validFormat(files)) {
-        this.setErrorState();
-        return false;
-      }
-
-      if (!this.validSize(files)) {
-        this.setErrorState();
-        return false;
-      }
-
-      return true;
-    },
-    validFormat(files) {
-      const formats = this.supportedFormats.split(',').map((format) => format.trim());
-
-      const isValid = Array.from(files).find((file) => {
-        const fileName = file.name.toLowerCase();
-        const fileType = file.type.toLowerCase();
-        const fileExtension = `.${fileName.split('.').pop()}`;
-
-        const isValidFileExtension = formats.includes(fileExtension);
-        const isValidFileType = fileType === mime.lookup(fileName);
-
-        return isValidFileExtension && isValidFileType;
-      });
-
-      return isValid;
-    },
-
-    validSize(files) {
-      if (!this.maxFileSize) {
-        return true;
-      }
-
-      const isValid = Array.from(files).find((file) => {
-        const sizeInMB = (file.size / (1024 * 1024)).toFixed(2);
-
-        return sizeInMB <= this.maxFileSize;
-      });
-
-      return isValid;
-    },
-
-    setErrorState() {
-      this.hasError = true;
-
-      setTimeout(() => {
-        this.hasError = false;
-      }, 5000);
-    },
-
     emitFileChange() {
       this.$emit('fileChange', this.currentFiles);
     },
 
-    addFiles(files) {
-      let totalLength = files.length;
-
-      if (!this.shouldReplace) {
-        totalLength += this.currentFiles.length;
-      }
-
-      if (totalLength > this.maximumUploads) {
-        this.setErrorState();
-        return;
-      }
-
-      const validFiles = Array.from(files).filter((file) => {
-        if (this.validFormat([file]) && this.validSize([file])) {
-          return true;
-        }
-        return false;
-      });
-
-      if (this.shouldReplace) {
-        this.currentFiles = validFiles;
-      } else {
-        this.currentFiles = this.currentFiles.concat(validFiles);
-      }
-      this.emitFileChange();
-    },
-
     modifyFile(index, file) {
       this.currentFiles.splice(index, 1, file);
       this.emitFileChange();
@@ -289,14 +123,6 @@ export default {
       this.currentFiles.splice(index, 1);
       this.emitFileChange();
     },
-
-    checkDragAndDropSupport() {
-      const { dropzone } = this.$refs;
-      return (
-        'FileReader' in window
-        && ('draggable' in dropzone || ('ondragstart' in dropzone && 'ondrop' in dropzone))
-      );
-    },
   },
 };
 </script>
@@ -304,71 +130,7 @@ export default {
 <style lang="scss" scoped>
 @import '../../assets/scss/unnnic.scss';
 
-@function borderDashed($color) {
-  @return url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23#{str-slice(quote($color), 2)}' stroke-width='4' stroke-dasharray='4%2c 12' stroke-dashoffset='9' stroke-linecap='square'/%3e%3c/svg%3e");
-}
-
 .unnnic-upload-area {
-  &__dropzone {
-    border-radius: $unnnic-border-radius-lg;
-    background-color: $unnnic-color-background-carpet;
-    padding: $unnnic-spacing-inset-lg;
-
-    // Dashed border with increased dashes spacing and color neutral clean
-    background-image: borderDashed($unnnic-color-neutral-cleanest);
-
-    &__has-error {
-      background-image: borderDashed($unnnic-color-feedback-red);
-    }
-
-    &__is-dragover {
-      background-color: $unnnic-color-background-sky;
-      background-image: borderDashed($unnnic-color-brand-weni);
-    }
-
-    &__icon {
-      display: block;
-      margin: 0 auto;
-
-      margin-bottom: $unnnic-spacing-stack-sm;
-    }
-
-    &__content {
-      display: flex;
-      flex-direction: column;
-      gap: $unnnic-spacing-stack-nano;
-
-      text-align: center;
-      font-family: $unnnic-font-family-secondary;
-
-      &__title {
-        color: $unnnic-color-neutral-darkest;
-        font-weight: $unnnic-font-weight-bold;
-        font-size: $unnnic-font-size-body-gt;
-        line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
-
-        &__search {
-          color: $unnnic-color-brand-weni;
-        }
-
-        &__error {
-          color: $unnnic-color-feedback-red;
-        }
-      }
-
-      &__subtitle {
-        color: $unnnic-color-neutral-cloudy;
-        font-weight: $unnnic-font-weight-regular;
-        font-size: $unnnic-font-size-body-md;
-        line-height: $unnnic-font-size-body-md + $unnnic-line-height-md;
-
-        &__error {
-          color: $unnnic-color-feedback-red;
-        }
-      }
-    }
-  }
-
   &__cards {
     margin-top: $unnnic-spacing-stack-md;
     display: flex;
@@ -376,11 +138,4 @@ export default {
     gap: $unnnic-spacing-stack-xs;
   }
 }
-
-.unnnic-upload-area__dropzone__dragndrop,
-.unnnic-upload-area__dropzone__uploading,
-.unnnic-upload-area__dropzone__success,
-.unnnic-upload-area__dropzone__error {
-  display: none;
-}
 </style>

package/src/components/index.js

@@ -57,6 +57,7 @@ import Switch from './Switch/Switch.vue';
 import Slider from './Slider/Slider.vue';
 import DataArea from './DataArea/DataArea.vue';
 import Pagination from './Pagination/Pagination.vue';
+import DropArea from './DropArea/DropArea.vue';
 import UploadArea from './UploadArea/UploadArea.vue';
 import ImportCard from './ImportCard/ImportCard.vue';
 import DateFilter from './DateFilter/DateFilter.vue';
@@ -142,6 +143,7 @@ const components = {
   unnnicSlider: Slider,
   unnnicDataArea: DataArea,
   unnnicPagination: Pagination,
+  unnnicDropArea: DropArea,
   unnnicUploadArea: UploadArea,
   unnnicImportCard: ImportCard,
   unnnicDateFilter: DateFilter,
@@ -234,6 +236,7 @@ export const unnnicSwitch = Switch;
 export const unnnicSlider = Slider;
 export const unnnicDataArea = DataArea;
 export const unnnicPagination = Pagination;
+export const unnnicDropArea = DropArea;
 export const unnnicUploadArea = UploadArea;
 export const unnnicImportCard = ImportCard;
 export const unnnicDateFilter = DateFilter;

package/src/stories/DropArea.stories.js

@@ -0,0 +1,80 @@
+import UnnnicDropArea from '../components/DropArea/DropArea.vue';
+
+const events = {
+  'update:currentFiles': { action: 'update:currentFiles' },
+  fileChange: { action: 'fileChange' },
+  unsupportedFormat: { action: 'unsupportedFormat' },
+  exceededTheMaximumFileSizeLimit: { action: 'exceededTheMaximumFileSizeLimit' },
+};
+
+function getterEvents() {
+  return Object.keys(events)
+    .reduce(
+      (previous, current) => (
+        { ...previous, [current]: this.$props[current] }
+      ), {},
+    );
+}
+
+export default {
+  title: 'Example/DropArea',
+  component: UnnnicDropArea,
+  argTypes: {
+    acceptMultiple: { control: 'boolean' },
+    supportedFormats: { control: 'text' },
+    maxFileSize: { control: 'number' },
+    shouldReplace: { control: 'boolean' },
+    currentFiles: { control: 'object' },
+    maximumUploads: { control: 'number' },
+    subtitle: { control: 'text' },
+    ...events,
+  },
+  args: {
+    acceptMultiple: true,
+    supportedFormats: '*',
+    maxFileSize: undefined,
+    shouldReplace: false,
+    currentFiles: [],
+    maximumUploads: 1,
+    subtitle: '',
+  },
+};
+
+const Template = (_args, { argTypes }) => ({
+  components: { UnnnicDropArea },
+
+  props: Object.keys(argTypes),
+
+  computed: {
+    events: getterEvents,
+  },
+
+  template: `
+    <UnnnicDropArea v-bind="$props" v-on="events" />
+  `,
+});
+
+const TemplateWithTitleAndSubtitleSlots = (_args, { argTypes }) => ({
+  components: { UnnnicDropArea },
+
+  props: Object.keys(argTypes),
+
+  computed: {
+    events: getterEvents,
+  },
+
+  template: `
+    <UnnnicDropArea v-bind="$props" v-on="events">
+      <template #title>Title Slot</template>
+      <template #subtitle>Subtitle Slot</template>
+    </UnnnicDropArea>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const WithTitleAndSubtitleSlots = TemplateWithTitleAndSubtitleSlots.bind(
+  {},
+);
+WithTitleAndSubtitleSlots.args = {};