@weni/unnnic-system 2.6.1-alpha.2 → 2.6.2

package/src/components/DropArea/DropArea.vue

@@ -1,349 +0,0 @@
-<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 setup>
-import { ref, computed, getCurrentInstance } from 'vue';
-import mime from 'mime';
-
-import UnnnicIcon from '../Icon.vue';
-
-const isDragging = ref(false);
-const hasError = ref(false);
-const dragEnterCounter = ref(0);
-const file = ref();
-
-const props = defineProps({
-  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: '',
-  },
-});
-
-const emit = defineEmits([
-  'update:currentFiles',
-  'fileChange',
-  'unsupportedFormat',
-  'exceededTheMaximumFileSizeLimit',
-]);
-
-const instance = getCurrentInstance();
-
-function isEventDefined(eventName) {
-  return !!instance?.vnode?.props?.[eventName];
-}
-
-const formattedSupportedFormats = computed(() => {
-  const formats = props.supportedFormats
-    .split(',')
-    .map((format) => format.toUpperCase());
-
-  return formats.join(', ');
-});
-
-function dragenter() {
-  dragEnterCounter.value += 1;
-  isDragging.value = true;
-}
-
-function dragover() {
-  isDragging.value = true;
-}
-
-function dragleave() {
-  dragEnterCounter.value -= 1;
-  if (dragEnterCounter.value === 0) {
-    isDragging.value = false;
-  }
-}
-
-function dragend() {
-  isDragging.value = false;
-}
-
-function drop(event) {
-  isDragging.value = false;
-
-  const { files } = event.dataTransfer;
-
-  if (validateFiles(files)) {
-    addFiles(files);
-  }
-}
-
-function handleFileChange(event) {
-  const { files } = event.target;
-
-  if (validateFiles(files)) {
-    addFiles(files);
-  }
-
-  file.value.value = '';
-}
-
-function setErrorState() {
-  hasError.value = true;
-
-  setTimeout(() => {
-    hasError.value = false;
-  }, 5000);
-}
-
-function validateFiles(files) {
-  if (!props.acceptMultiple && files.length > 1) {
-    setErrorState();
-    return false;
-  }
-
-  if (!validFormat(files)) {
-    if (isEventDefined('onUnsupportedFormat')) {
-      emit('unsupportedFormat');
-    } else {
-      setErrorState();
-    }
-
-    return false;
-  }
-
-  if (!validSize(files)) {
-    if (isEventDefined('onExceededTheMaximumFileSizeLimit')) {
-      emit('exceededTheMaximumFileSizeLimit');
-    } else {
-      setErrorState();
-    }
-
-    return false;
-  }
-
-  return true;
-}
-
-function validFormat(files) {
-  if (props.supportedFormats === '*') {
-    return true;
-  }
-
-  const formats = props.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.getType(fileName);
-
-    return isValidFileExtension && isValidFileType;
-  });
-
-  return isValid;
-}
-
-function validSize(files) {
-  if (!props.maxFileSize) {
-    return true;
-  }
-
-  const isValid = Array.from(files).find((file) => {
-    const sizeInMB = (file.size / (1024 * 1024)).toFixed(2);
-
-    return sizeInMB <= props.maxFileSize;
-  });
-
-  return isValid;
-}
-
-function addFiles(files) {
-  let totalLength = files.length;
-
-  if (!props.shouldReplace) {
-    totalLength += props.currentFiles.length;
-  }
-
-  if (totalLength > props.maximumUploads) {
-    setErrorState();
-    return;
-  }
-
-  const validFiles = Array.from(files).filter((file) => {
-    if (validFormat([file]) && validSize([file])) {
-      return true;
-    }
-    return false;
-  });
-
-  let currentFiles;
-
-  if (props.shouldReplace) {
-    currentFiles = validFiles;
-  } else {
-    currentFiles = props.currentFiles.concat(validFiles);
-  }
-
-  emit('update:currentFiles', currentFiles);
-  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/Tour/Tour.vue

@@ -1,126 +0,0 @@
-<template>
-  <TourMask
-    v-if="isTourActive"
-    :maskRect="maskRect"
-  />
-
-  <TourPopover
-    v-if="isTourActive"
-    :step="currentStepOptions"
-    :stepsLength="steps.length"
-    :currentStep="currentStep"
-    :attachedElement="currentStepOptions.attachedElement"
-    @end="end"
-    @next-step="nextStep"
-  />
-</template>
-
-<script>
-import TourMask from './TourMask.vue';
-import TourPopover from './TourPopover.vue';
-
-export default {
-  name: 'UnnnicTour',
-
-  components: {
-    TourMask,
-    TourPopover,
-  },
-
-  props: {
-    steps: {
-      required: true,
-      type: Array,
-    },
-  },
-
-  data() {
-    return {
-      isTourActive: false,
-      currentStep: 1,
-      maskRect: {
-        x: 0,
-        y: 0,
-        width: 0,
-        height: 0,
-      },
-    };
-  },
-
-  computed: {
-    currentStepOptions() {
-      return this.steps[this.currentStep - 1];
-    },
-    stepStyle() {
-      const attachedElement = this.currentStepOptions.attachedElement;
-
-      if (!this.isTourActive || !attachedElement) {
-        return {};
-      }
-
-      const { top, left, width, height } =
-        attachedElement.getBoundingClientRect();
-      return {
-        top: `${top}px`,
-        left: `${left}px`,
-        width: `${width}px`,
-        height: `${height}px`,
-      };
-    },
-  },
-
-  watch: {
-    currentStep() {
-      this.updateMaskRect();
-    },
-    isTourActive(isTourActive) {
-      if (isTourActive) {
-        this.updateMaskRect();
-      }
-    },
-  },
-
-  methods: {
-    start() {
-      this.isTourActive = true;
-      this.currentStep = 1;
-    },
-    end() {
-      this.isTourActive = false;
-      this.currentStep = 1;
-    },
-    handleStep(step) {
-      if (this.currentStep < this.steps.length) {
-        this.currentStep = step;
-      }
-    },
-    nextStep() {
-      const { handleStep, steps, currentStep, end } = this;
-
-      if (currentStep === steps.length) {
-        end();
-        return;
-      }
-
-      handleStep(currentStep + 1);
-    },
-    updateMaskRect() {
-      const attachedElement = this.currentStepOptions?.attachedElement;
-      const { padding } = this.currentStepOptions;
-
-      if (!attachedElement) {
-        return;
-      }
-
-      const { top, left, width, height } =
-        attachedElement.getBoundingClientRect();
-      this.maskRect = {
-        x: left - (padding?.horizontal || 0) / 2,
-        y: top - (padding?.vertical || 0) / 2,
-        width: width + (padding?.horizontal || 0),
-        height: height + (padding?.vertical || 0),
-      };
-    },
-  },
-};
-</script>

package/src/components/Tour/TourMask.vue

@@ -1,135 +0,0 @@
-<template>
-  <section class="unnnic-tour__mask">
-    <svg
-      class="mask__svg"
-      width="100%"
-      height="100%"
-    >
-      <defs>
-        <mask
-          id="svgTourMask"
-          x="0"
-          y="0"
-          width="100%"
-          height="100%"
-        >
-          <rect
-            x="0"
-            y="0"
-            width="100vw"
-            height="100vh"
-            fill="white"
-          />
-          <rect
-            :x="maskRect.x"
-            :y="maskRect.y"
-            :width="maskRect.width"
-            :height="maskRect.height"
-            rx="4"
-            fill="black"
-            class="unnnic-tour__step"
-          />
-        </mask>
-      </defs>
-      <rect
-        x="0"
-        y="0"
-        width="100%"
-        height="100%"
-        mask="url(#svgTourMask)"
-        class="unnnic-tour__overlay"
-      />
-      <rect
-        v-for="(rect, index) of clickBlockerRects"
-        :key="index"
-        :x="rect.x"
-        :y="rect.y"
-        :width="rect.width"
-        :height="rect.height"
-        :style="rect.style"
-        fill="transparent"
-        pointer-events="auto"
-      />
-    </svg>
-  </section>
-</template>
-
-<script>
-export default {
-  name: 'TourMask',
-
-  props: {
-    maskRect: {
-      type: Object,
-      required: true,
-    },
-  },
-
-  computed: {
-    clickBlockerRects() {
-      const { maskRect } = this;
-      return [
-        {
-          x: '0',
-          y: '0',
-          width: '100%',
-          height: maskRect.y,
-        },
-        {
-          x: '0',
-          y: '0',
-          width: maskRect.x,
-          height: '100%',
-        },
-        {
-          x: '0',
-          y: maskRect.y + maskRect.height,
-          style: { height: `calc(100vh - ${maskRect.y}px)` },
-          width: '100%',
-        },
-        {
-          x: maskRect.x + maskRect.width,
-          y: '0',
-          style: { width: `calc(100vw - ${maskRect.x}px)` },
-          height: '100%',
-        },
-      ];
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
-
-.unnnic-tour {
-  &__mask {
-    position: fixed;
-    z-index: 1000;
-
-    inset: 0;
-
-    pointer-events: none;
-
-    width: 100%;
-    height: 100%;
-
-    &__svg {
-      position: absolute;
-      top: 0;
-      left: 0;
-
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &__step {
-    transition: all 0.2s ease;
-  }
-
-  &__overlay {
-    fill: rgba($unnnic-color-neutral-black, $unnnic-opacity-level-overlay);
-  }
-}
-</style>