@weni/unnnic-system 1.24.21 → 1.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "1.24.21",
+  "version": "1.25.0",
   "main": "./dist/unnnic.common.js",
   "files": [
     "dist/*",

package/src/components/DropArea/DropArea.vue

@@ -0,0 +1,362 @@
+<template>
+  <section
+    ref="dropzone"
+    :class="{
+      'unnnic-upload-area__dropzone': true,
+      'unnnic-upload-area__dropzone__is-dragover': isDragging,
+      'unnnic-upload-area__dropzone__has-error': hasError,
+    }"
+    @dragenter.stop.prevent="dragenter"
+    @dragover.stop.prevent="dragover"
+    @dragleave.stop.prevent="dragleave"
+    @dragend.stop.prevent="dragend"
+    @drop.stop.prevent="drop"
+    @click="() => $refs.file.click()"
+  >
+    <UnnnicIcon
+      class="unnnic-upload-area__dropzone__icon"
+      icon="upload"
+      :scheme="hasError ? 'feedback-red' : 'weni-500'"
+      size="lg"
+    />
+
+    <div class="unnnic-upload-area__dropzone__content">
+      <span class="unnnic-upload-area__dropzone__content__title">
+        <slot name="title">
+          {{ $t('upload_area.title.text') }}
+          <span
+            :class="`unnnic-upload-area__dropzone__content__title__${
+              hasError ? 'error' : 'search'
+            }`"
+          >
+            {{ $t('upload_area.title.highlight') }}
+          </span>
+        </slot>
+      </span>
+      <span
+        :class="[
+          'unnnic-upload-area__dropzone__content__subtitle',
+          {
+            'unnnic-upload-area__dropzone__content__subtitle__error': hasError,
+          },
+        ]"
+        :title="formattedSupportedFormats"
+      >
+        <slot name="subtitle">
+          {{
+            subtitle ||
+            `${$t(
+              `upload_area${hasError ? '.invalid' : ''}.subtitle`,
+            )} ${formattedSupportedFormats}`
+          }}
+        </slot>
+      </span>
+    </div>
+    <input
+      v-show="false"
+      ref="file"
+      type="file"
+      :accept="supportedFormats"
+      :multiple="acceptMultiple"
+      @input="handleFileChange"
+    />
+  </section>
+</template>
+
+<script>
+import mime from 'mime-types';
+
+import UnnnicIcon from '../Icon.vue';
+
+export default {
+
+  components: {
+    UnnnicIcon,
+  },
+
+  props: {
+    acceptMultiple: {
+      type: Boolean,
+      default: true,
+    },
+
+    supportedFormats: {
+      type: String,
+      default: '*',
+    },
+
+    maxFileSize: {
+      type: Number,
+      default: undefined,
+    },
+
+    shouldReplace: {
+      type: Boolean,
+      default: false,
+    },
+
+    currentFiles: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+
+    maximumUploads: {
+      type: Number,
+      default: 1,
+    },
+
+    subtitle: {
+      type: String,
+      default: '',
+    },
+  },
+
+  emits: [
+    'update:currentFiles',
+    'fileChange',
+    'unsupportedFormat',
+    'exceededTheMaximumFileSizeLimit',
+  ],
+
+  data() {
+    return {
+      isDragging: false,
+      hasError: false,
+      dragEnterCounter: 0,
+    };
+  },
+
+  computed: {
+    formattedSupportedFormats() {
+      const formats = this.supportedFormats
+        .split(',')
+        .map((format) => format.toUpperCase());
+
+      return formats.join(', ');
+    },
+  },
+
+  methods: {
+    isEventDefined(eventName) {
+      return this.$listeners[eventName];
+    },
+
+    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 = '';
+    },
+
+    setErrorState() {
+      this.hasError = true;
+
+      setTimeout(() => {
+        this.hasError = false;
+      }, 5000);
+    },
+
+    validateFiles(files) {
+      if (!this.acceptMultiple && files.length > 1) {
+        this.setErrorState();
+        return false;
+      }
+
+      if (!this.validFormat(files)) {
+        if (this.isEventDefined('unsupportedFormat')) {
+          this.$emit('unsupportedFormat');
+        } else {
+          this.setErrorState();
+        }
+
+        return false;
+      }
+
+      if (!this.validSize(files)) {
+        if (this.isEventDefined('exceededTheMaximumFileSizeLimit')) {
+          this.$emit('exceededTheMaximumFileSizeLimit');
+        } else {
+          this.setErrorState();
+        }
+
+        return false;
+      }
+
+      return true;
+    },
+
+    validFormat(files) {
+      if (this.supportedFormats === '*') {
+        return true;
+      }
+
+      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;
+    },
+
+    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;
+      });
+
+      let currentFiles;
+
+      if (this.shouldReplace) {
+        currentFiles = validFiles;
+      } else {
+        currentFiles = this.currentFiles.concat(validFiles);
+      }
+
+      console.log('teste', this.$emit, currentFiles);
+
+      this.$emit('update:currentFiles', currentFiles);
+      this.$emit('fileChange', currentFiles);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/scss/unnnic.scss';
+
+@function borderDashed($color) {
+  $colorString: unquote('' + $color);
+  $cleanColor: str-slice($colorString, 2);
+  @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='8' ry='8' stroke='%23#{$cleanColor}' stroke-width='1' stroke-dasharray='4%2c 4' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+}
+
+.unnnic-upload-area__dropzone {
+  border-radius: $unnnic-border-radius-md;
+  padding: $unnnic-spacing-inset-lg;
+
+  // Dashed border with increased dashes spacing and color neutral clean
+  background-image: borderDashed($unnnic-color-neutral-clean);
+
+  &__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-xs;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+
+    text-align: center;
+    font-family: $unnnic-font-family-secondary;
+
+    &__title {
+      color: $unnnic-color-neutral-darkest;
+      font-weight: $unnnic-font-weight-regular;
+      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;
+      }
+    }
+  }
+}
+</style>

package/src/components/ImportCard/ImportCard.vue

@@ -1,47 +1,70 @@
 <template>
   <div class="unnnic-import-card">
+    <UnnnicIcon
+      class="unnnic-import-card__file-icon"
+      size="md"
+      scheme="weni-600"
+      :icon="fileIcon"
+    />
+
     <div class="unnnic-import-card__data">
-      <div v-if="isImporting" class="unnnic-import-card__data__title">
+      <div
+        v-if="isImporting"
+        class="unnnic-import-card__data__title"
+      >
         {{ $t('import_card.importing') }}...
       </div>
-      <div v-else class="unnnic-import-card__data__title">
+      <div
+        v-else
+        class="unnnic-import-card__data__title"
+      >
         {{ title }}
       </div>
 
-      <div v-if="subtitle && isImporting" class="unnnic-import-card__data__subtitle">
-        <div v-if="subtitle && isImporting" class="unnnic-import-card__data__subtitle__text">
+      <div
+        v-if="subtitle && isImporting"
+        class="unnnic-import-card__data__subtitle"
+      >
+        <div
+          v-if="subtitle && isImporting"
+          class="unnnic-import-card__data__subtitle__text"
+        >
           {{ subtitle }}
         </div>
-        <div v-if="subtitle && isImporting" class="unnnic-import-card__data__subtitle__progress">
+        <div
+          v-if="subtitle && isImporting"
+          class="unnnic-import-card__data__subtitle__progress"
+        >
           &nbsp;- {{ importProgress }}%
         </div>
       </div>
     </div>
 
     <div class="unnnic-import-card__buttons">
-      <unnnic-button
+      <UnnnicButton
         v-if="canImport"
         class="unnnic-import-card__buttons__import"
         size="small"
-        :icon-center="uploadIcon"
+        :iconCenter="uploadIcon"
         type="primary"
         @click="importFile"
       >
         <input
-          type="file"
           ref="file"
+          type="file"
           :accept="acceptedFormats"
+          style="display: none"
           @change="handleFileChange"
-          style="display: none;"
         />
-      </unnnic-button>
+      </UnnnicButton>
 
-      <unnnic-button
+      <UnnnicIcon
         v-if="canDelete"
         class="unnnic-import-card__buttons__delete"
-        size="small"
-        :icon-center="`close-1`"
-        type="primary"
+        size="sm"
+        scheme="neutral-cloudy"
+        icon="delete"
+        clickable
         @click="emitDeletion"
       />
     </div>
@@ -49,12 +72,14 @@
 </template>
 
 <script>
-import unnnicButton from '../Button/Button.vue';
+import UnnnicButton from '../Button/Button.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   name: 'ImportCard',
   components: {
-    unnnicButton,
+    UnnnicButton,
+    UnnnicIcon,
   },
   props: {
     title: {
@@ -90,6 +115,22 @@ export default {
       default: 'upload-bottom-1',
     },
   },
+  computed: {
+    fileIcon() {
+      const extension = this.title.slice(this.title.lastIndexOf('.') + 1);
+
+      return (
+        {
+          pdf: 'picture_as_pdf',
+          txt: 'text_snippet',
+          xls: 'table',
+          xlsx: 'table',
+          doc: 'draft',
+          docx: 'draft',
+        }[extension] || 'draft'
+      );
+    },
+  },
   methods: {
     importFile() {
       this.$refs.file.click();
@@ -118,15 +159,23 @@ export default {
 
 .unnnic-import-card {
   display: flex;
+  column-gap: $unnnic-spacing-xs;
+  align-items: center;
 
   border: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
-  border-radius: $unnnic-border-radius-md;
+  border-radius: $unnnic-border-radius-sm;
 
-  background-color: $unnnic-color-background-snow;
-  padding: $unnnic-squish-md;
+  background-color: $unnnic-color-neutral-white;
+  padding: $unnnic-spacing-xs - $unnnic-border-width-thinner;
+
+  &__file-icon {
+    user-select: none;
+    margin: $unnnic-spacing-xs;
+  }
 
   &__data {
     align-self: center;
+    overflow: hidden;
 
     flex: 1;
     gap: $unnnic-spacing-stack-nano;
@@ -134,10 +183,14 @@ export default {
     font-family: $unnnic-font-family-secondary;
 
     &__title {
-      color: $unnnic-color-neutral-darkest;
+      color: $unnnic-color-neutral-dark;
       font-size: $unnnic-font-size-body-gt;
       line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
-      font-weight: $unnnic-font-weight-bold;
+      font-weight: $unnnic-font-weight-regular;
+
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
     }
 
     &__subtitle {
@@ -166,15 +219,19 @@ export default {
   &__buttons {
     display: flex;
     gap: $unnnic-spacing-inline-xs;
+    align-items: center;
 
-    margin-left: $unnnic-spacing-inline-xs;
+    margin-right: $unnnic-spacing-xs;
 
     align-self: center;
 
     &__import {
-      background-color: rgba($unnnic-color-brand-weni, $unnnic-opacity-level-light);
+      background-color: rgba(
+        $unnnic-color-brand-weni,
+        $unnnic-opacity-level-light
+      );
 
-      ::v-deep .unnnic-icon {
+      :deep(.unnnic-icon) {
         svg {
           & .primary {
             fill: $unnnic-color-brand-weni;
@@ -184,15 +241,7 @@ export default {
     }
 
     &__delete {
-      background-color: rgba($unnnic-color-feedback-red, $unnnic-opacity-level-light);
-
-      ::v-deep .unnnic-icon {
-        svg {
-          & .primary {
-            fill: $unnnic-color-feedback-red;
-          }
-        }
-      }
+      user-select: none;
     }
   }
 }

package/src/components/Slider/Slider.vue

@@ -123,10 +123,8 @@ export default {
     window.removeEventListener('resize', this.handleResize);
   },
   mounted() {
-    const fallbackLabelWidth = 32 + this.sliderVal.toString().length * 4.5;
-    this.sliderWidth = this.$refs.input.clientWidth;
-    this.labelWidth = this.$refs.tooltip.$refs.label.clientWidth || fallbackLabelWidth;
-    this.tooltipOffset = this.getNewTooltipPosition();
+    this.checkInputWidth();
+    this.checkTooltipLabelWidth();
   },
   watch: {
     sliderVal: {
@@ -146,8 +144,13 @@ export default {
   },
   methods: {
     configureTooltip() {
-      this.sliderWidth = this.$refs.input.clientWidth;
-      this.labelWidth = this.$refs.tooltip.$refs.label.clientWidth;
+      if (this.$refs.input) {
+        this.sliderWidth = this.$refs.input.clientWidth;
+      }
+      const tooltipLabel = this.$refs.tooltip?.$refs.label;
+      if (tooltipLabel) {
+        this.labelWidth = tooltipLabel.clientWidth || 32;
+      }
       this.tooltipOffset = this.getNewTooltipPosition();
     },
     handleResize() {
@@ -162,9 +165,40 @@ export default {
 
       this.handleValueChange();
     },
+    checkInputWidth() {
+      const intervalId = setInterval(() => {
+        const inputElement = this.$refs.input;
+        if (inputElement) {
+          const { offsetWidth } = inputElement;
+          if (offsetWidth > 0) {
+            this.sliderWidth = offsetWidth;
+            this.configureTooltip();
+            clearInterval(intervalId);
+          }
+        }
+      }, 100);
+    },
+    checkTooltipLabelWidth() {
+      const intervalId = setInterval(() => {
+        const tooltipLabel = this.$refs.tooltip?.$refs.label;
+        if (!tooltipLabel) {
+          return;
+        }
+
+        const { clientWidth } = tooltipLabel;
+        if (clientWidth > 0) {
+          this.labelWidth = clientWidth;
+          this.configureTooltip();
+          clearInterval(intervalId);
+        }
+      }, 100);
+    },
     getNewTooltipPosition() {
-      const haldThumbWidth = 12 / 2;
-      const halfLabelWidth = (this.labelWidth === 0 ? 32 : this.labelWidth) / 2;
+      if (this.sliderWidth === 0 || this.labelWidth === 0) {
+        return 0;
+      }
+      const halfThumbWidth = 12 / 2;
+      const halfLabelWidth = this.labelWidth / 2 || 16;
       const centerPosition = this.sliderWidth / 2;
 
       let percentOfRange = (this.sliderVal - this.minValue) / (this.maxValue - this.minValue);
@@ -175,7 +209,7 @@ export default {
       const valuePXPosition = percentOfRange * this.sliderWidth;
       const distFromCenter = valuePXPosition - centerPosition;
       const percentDistFromCenter = distFromCenter / centerPosition;
-      const offset = percentDistFromCenter * haldThumbWidth;
+      const offset = percentDistFromCenter * halfThumbWidth;
 
       const finalLabelPosition = valuePXPosition - halfLabelWidth - offset;
       return finalLabelPosition;