@weni/unnnic-system 2.0.0 → 2.0.1

package/src/components/Input/Input.vue

@@ -1,30 +1,41 @@
 <template>
   <div :class="['unnnic-form', size]">
-    <p v-if="hasLabelSlot" class="unnnic-form__label">
+    <p
+      v-if="hasLabelSlot"
+      class="unnnic-form__label"
+    >
       <slot name="label" />
     </p>
 
-    <p v-else-if="label" class="unnnic-form__label">{{ label }}</p>
+    <p
+      v-else-if="label"
+      class="unnnic-form__label"
+    >
+      {{ label }}
+    </p>
 
-    <text-input
+    <TextInput
+      v-bind="$attrs"
       v-model="val"
-      v-on="inputListeners"
       class="unnnic-form-input"
-      :v-bind="$attrs"
       :placeholder="placeholder"
-      :icon-left="iconLeft"
-      :icon-right="iconRight"
-      :allow-toggle-password="allowTogglePassword"
+      :iconLeft="iconLeft"
+      :iconRight="iconRight"
       :type="type"
-      :icon-left-clickable="iconLeftClickable"
-      :icon-right-clickable="iconRightClickable"
-      :has-cloudy-color="hasCloudyColor"
+      :iconLeftClickable="iconLeftClickable"
+      :iconRightClickable="iconRightClickable"
+      :hasCloudyColor="hasCloudyColor"
       :size="size"
       :mask="mask"
-      :native-type="nativeType"
+      :nativeType="nativeType"
     />
 
-    <p v-if="message" class="unnnic-form__message">{{ message }}</p>
+    <p
+      v-if="message"
+      class="unnnic-form__message"
+    >
+      {{ message }}
+    </p>
   </div>
 </template>
 
@@ -46,7 +57,7 @@ export default {
         return ['normal', 'error'].indexOf(value) !== -1;
       },
     },
-    value: {
+    modelValue: {
       type: String,
       default: '',
     },
@@ -97,28 +108,21 @@ export default {
   },
   data() {
     return {
-      val: this.value,
+      val: this.modelValue,
     };
   },
   watch: {
     val() {
-      this.$emit('input', this.val);
+      this.$emit('update:modelValue', this.val);
     },
-    value() {
-      this.val = this.value;
+    modelValue() {
+      this.val = this.modelValue;
     },
   },
   mounted() {
-    this.val = this.value;
+    this.val = this.modelValue;
   },
   computed: {
-    inputListeners() {
-      return {
-        ...this.$listeners,
-        input: () => {},
-      };
-    },
-
     hasLabelSlot() {
       return !!this.$slots.label;
     },

package/src/components/Input/TextInput.vue

@@ -1,34 +1,39 @@
 <template>
   <div
-    :class="['text-input', `size--${size}`, {
-      'has-icon-left': !!iconLeft,
-      'has-icon-right': !!iconRight || allowTogglePassword,
-    }]"
+    :class="[
+      'text-input',
+      `size--${size}`,
+      {
+        'has-icon-left': !!iconLeft,
+        'has-icon-right': !!iconRight || allowTogglePassword,
+      },
+    ]"
   >
-    <base-input
-      ref="base-input"
-      :value="value"
+    <BaseInput
+      :modelValue="modelValue"
       v-bind="attributes"
-      :native-type="nativeType === 'password' && showPassword ? 'text' : nativeType"
-      :type="type"
       :size="size"
-      v-on="inputListeners"
+      ref="base-input"
+      :nativeType="
+        nativeType === 'password' && showPassword ? 'text' : nativeType
+      "
+      :type="type"
       @focus="onFocus"
       @blur="onBlur"
       class="input-itself"
     />
 
-    <unnnic-icon
+    <UnnnicIcon
       v-if="iconLeft"
       :scheme="iconScheme"
       :icon="iconLeft"
       size="sm"
       :clickable="iconLeftClickable"
       @click="onIconLeftClick"
-      :class="['icon-left', { 'clickable': iconLeftClickable }]"
+      :class="['icon-left', { clickable: iconLeftClickable }]"
     />
 
-    <unnnic-icon
+    <UnnnicIcon
       v-if="iconRightSvg"
       :scheme="iconScheme"
       :icon="iconRightSvg"
@@ -37,7 +42,7 @@
       @click="onIconRightClick"
       :class="[
         'icon-right',
-        { 'clickable': iconRightClickable || allowTogglePassword }
+        { clickable: iconRightClickable || allowTogglePassword },
       ]"
     />
   </div>
@@ -71,7 +76,7 @@ export default {
         return ['normal', 'error'].indexOf(value) !== -1;
       },
     },
-    value: {
+    modelValue: {
       type: String,
       default: '',
     },
@@ -96,11 +101,11 @@ export default {
     },
     allowTogglePassword: {
       type: Boolean,
-      default: false,
+      default: null,
     },
     hasCloudyColor: {
       type: Boolean,
-      default: false,
+      default: null,
     },
     size: {
       type: String,
@@ -125,7 +130,7 @@ export default {
         return 'neutral-cleanest';
       }
 
-      if (this.value || this.isFocused) {
+      if (this.modelValue || this.isFocused) {
         return 'neutral-dark';
       }
 
@@ -136,14 +141,6 @@ export default {
       return 'neutral-cloudy';
     },
 
-    inputListeners() {
-      return {
-        ...this.$listeners,
-        input: (event) => {
-          this.$emit('input', event);
-        },
-      };
-    },
     attributes() {
       return { ...this.$attrs, ...this.$attrs['v-bind'], ...this.$props };
     },
@@ -181,7 +178,8 @@ export default {
 @import '../../assets/scss/unnnic.scss';
 
 .icon {
-  &-left, &-right {
+  &-left,
+  &-right {
     &:not(.clickable) {
       pointer-events: none;
     }
@@ -202,18 +200,22 @@ export default {
 .text-input {
   position: relative;
 
-  &.size--md, &.size--sm {
+  &.size--md,
+  &.size--sm {
     &.has-icon-left .input-itself {
-      padding-left: $unnnic-spacing-sm + $unnnic-icon-size-sm + $unnnic-spacing-xs;
+      padding-left: $unnnic-spacing-sm + $unnnic-icon-size-sm +
+        $unnnic-spacing-xs;
     }
 
     &.has-icon-right .input-itself {
-      padding-right: $unnnic-spacing-sm + $unnnic-icon-size-sm + $unnnic-spacing-xs;
+      padding-right: $unnnic-spacing-sm + $unnnic-icon-size-sm +
+        $unnnic-spacing-xs;
     }
   }
 
   &.size--sm {
-    .icon-left, .icon-right {
+    .icon-left,
+    .icon-right {
       top: $unnnic-spacing-xs + 0.125 * $unnnic-font-size;
     }
   }

package/src/components/InputDatePicker/InputDatePicker.vue

@@ -1,16 +1,22 @@
 <template>
-  <div ref="dropdown" :class="['dropdown', { active: showCalendarFilter }]">
-    <unnnic-input
+  <div
+    ref="dropdown"
+    :class="['dropdown', { active: showCalendarFilter }]"
+  >
+    <UnnnicInput
       class="input"
       :size="size"
-      icon-left="notes-1"
+      iconLeft="notes-1"
       @focus="showCalendarFilter = true"
       readonly
-      :value="filterText"
-    ></unnnic-input>
-
-    <div class="dropdown-data" :style="{ [position]: '0' }">
-      <unnnic-date-picker
+      :modelValue="filterText"
+    ></UnnnicInput>
+
+    <div
+      class="dropdown-data"
+      :style="{ [position]: '0' }"
+    >
+      <UnnnicDatePicker
         v-if="showCalendarFilter"
         :type="type"
         :clearLabel="clearText"
@@ -19,8 +25,8 @@
         :days="days"
         :options="options"
         @submit="changeDate"
-        :initial-start-date="initialStartDate"
-        :initial-end-date="initialEndDate"
+        :initialStartDate="initialStartDate"
+        :initialEndDate="initialEndDate"
       />
     </div>
   </div>
@@ -42,7 +48,7 @@ export default {
   },
 
   props: {
-    value: {
+    modelValue: {
       type: Object,
     },
 
@@ -104,12 +110,16 @@ export default {
     filterText() {
       const dates = [];
 
-      if (this.value.start) {
-        dates.push(moment(this.value.start, this.format).format(this.inputFormat));
+      if (this.modelValue?.start) {
+        dates.push(
+          moment(this.modelValue?.start, this.format).format(this.inputFormat),
+        );
       }
 
-      if (this.value.end) {
-        dates.push(moment(this.value.end, this.format).format(this.inputFormat));
+      if (this.modelValue?.end) {
+        dates.push(
+          moment(this.modelValue?.end, this.format).format(this.inputFormat),
+        );
       }
 
       if (!dates.length) {
@@ -120,11 +130,15 @@ export default {
     },
 
     initialStartDate() {
-      return this.value.start ? moment(this.value.start, this.format).format('MM DD YYYY') : null;
+      return this.modelValue.start
+        ? moment(this.modelValue.start, this.format).format('MM DD YYYY')
+        : null;
     },
 
     initialEndDate() {
-      return this.value.end ? moment(this.value.end, this.format).format('MM DD YYYY') : null;
+      return this.modelValue.end
+        ? moment(this.modelValue.end, this.format).format('MM DD YYYY')
+        : null;
     },
   },
 
@@ -132,13 +146,13 @@ export default {
     window.document.body.addEventListener('click', this.mouseout);
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     window.document.body.removeEventListener('click', this.mouseout);
   },
 
   methods: {
     mouseout(event) {
-      if (this.$refs.dropdown.contains(event.target)) {
+      if (this.$refs.dropdown?.contains(event.target)) {
         return;
       }
 
@@ -155,8 +169,10 @@ export default {
 
       this.showCalendarFilter = false;
 
-      this.$emit('changed', {
-        start: startDate ? moment(startDate, 'YYYY-MM-DD').format(this.format) : null,
+      this.$emit('update:model-value', {
+        start: startDate
+          ? moment(startDate, 'YYYY-MM-DD').format(this.format)
+          : null,
         end: endDate ? moment(endDate, 'YYYY-MM-DD').format(this.format) : null,
       });
     },
@@ -165,7 +181,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .dropdown {
   position: relative;

package/src/components/Label/Label.vue

@@ -15,7 +15,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-label {
   &__label {

package/src/components/Modal/CallModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <button @click="onClick()"> click me </button>
+  <button @click="onClick()">click me</button>
 </template>
 
 <script>

package/src/components/Modal/Modal.vue

@@ -1,11 +1,25 @@
 <template>
-  <transition name="modal" v-if="showModal">
-    <div ref="modalContainer" v-bind="$attrs" :class="['unnnic-modal']" v-on="$listeners">
-      <div class="unnnic-modal-container" @click.self="onOutsideCloseClick">
-        <div ref="modal" class="unnnic-modal-container-background">
+  <Transition name="modal">
+    <div
+      v-if="showModal"
+      v-bind="$attrs"
+      ref="modalContainer"
+      :class="['unnnic-modal']"
+    >
+      <div
+        class="unnnic-modal-container"
+        @click.self="onOutsideCloseClick"
+      >
+        <div
+          ref="modal"
+          class="unnnic-modal-container-background"
+        >
           <div class="unnnic-modal-container-background-body">
-            <div v-if="closeIcon" class="unnnic-modal-container-background-body-close_icon">
-              <unnnic-icon-svg
+            <div
+              v-if="closeIcon"
+              class="unnnic-modal-container-background-body-close_icon"
+            >
+              <UnnnicIconSvg
                 icon="close-1"
                 scheme="neutral-dark"
                 size="sm"
@@ -13,36 +27,56 @@
                 @click="onCloseClick"
               />
             </div>
+            <div
+              v-if="$slots.icon"
+              class="unnnic-modal-container-background-body__icon-slot"
+            >
+              <slot name="icon"></slot>
+            </div>
             <div
               v-if="modalIcon"
               :class="[
                 'unnnic-modal-container-background-body-alert_icon',
                 `unnnic-card-scheme--${scheme}--icon`,
-                closeIcon ? '' : 'unnnic-modal-container-background-body-spacing_header',
+                closeIcon
+                  ? ''
+                  : 'unnnic-modal-container-background-body-spacing_header',
               ]"
             >
-              <unnnic-icon-svg :scheme="scheme" :icon="modalIcon" size="xl" />
+              <UnnnicIconSvg
+                :scheme="scheme"
+                :icon="modalIcon"
+                size="xl"
+              />
             </div>
             <div class="unnnic-modal-container-background-body-title">
               {{ text }}
             </div>
           </div>
-          <div class="unnnic-modal-container-background-body-description-container">
+          <div
+            class="unnnic-modal-container-background-body-description-container"
+          >
             <div class="unnnic-modal-container-background-body-description">
               {{ description }} <slot name="message" />
               <slot name="default" />
             </div>
           </div>
-          <div class="unnnic-modal-container-background-report" v-if="hasAlertMessage">
+          <div
+            class="unnnic-modal-container-background-report"
+            v-if="hasAlertMessage"
+          >
             {{ alertMessage }}
           </div>
-          <div v-if="hasButton" class="unnnic-modal-container-background-button">
+          <div
+            v-if="hasButton"
+            class="unnnic-modal-container-background-button"
+          >
             <slot name="options" />
           </div>
         </div>
       </div>
     </div>
-  </transition>
+  </Transition>
 </template>
 
 <script>
@@ -103,7 +137,8 @@ export default {
         this.$refs.modalContainer.style.transition = 'none';
         this.$refs.modalContainer.style.backgroundColor = 'transparent';
         this.$refs.modal.style.transition = 'none';
-        this.$refs.modal.style.marginBottom = `${-this.$refs.modal.offsetHeight}px`;
+        this.$refs.modal.style.marginBottom = `${-this.$refs.modal
+          .offsetHeight}px`;
 
         setTimeout(() => {
           this.$refs.modalContainer.style.transition = 'background-color 0.2s';
@@ -123,7 +158,8 @@ export default {
         this.$refs.modalContainer.style.transition = 'background-color 0.2s';
         this.$refs.modalContainer.style.backgroundColor = 'transparent';
         this.$refs.modal.style.transition = 'margin-bottom 0.2s';
-        this.$refs.modal.style.marginBottom = `${-this.$refs.modal.offsetHeight}px`;
+        this.$refs.modal.style.marginBottom = `${-this.$refs.modal
+          .offsetHeight}px`;
 
         setTimeout(() => {
           this.mobileAnimateReset();
@@ -162,7 +198,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/scss/unnnic.scss';
+@import '../../assets/scss/unnnic';
 
 .unnnic-modal {
   position: fixed;
@@ -192,6 +228,7 @@ export default {
         background-color: $unnnic-color-background-carpet;
         padding: 0 $unnnic-inline-md;
         text-align: center;
+        padding-top: $unnnic-spacing-sm;
 
         &-title {
           text-align: center;
@@ -199,7 +236,9 @@ export default {
           color: $unnnic-color-neutral-darkest;
           font-weight: $unnnic-font-weight-black;
           font-size: $unnnic-font-size-title-sm;
-          line-height: ($unnnic-font-size-title-sm + $unnnic-line-height-medium);
+          line-height: (
+            $unnnic-font-size-title-sm + $unnnic-line-height-medium
+          );
           padding-bottom: $unnnic-spacing-stack-md;
         }
 
@@ -207,9 +246,13 @@ export default {
           width: 100%;
           display: flex;
           justify-content: flex-end;
-          padding-top: $unnnic-spacing-stack-sm;
           padding-bottom: $unnnic-spacing-stack-xs;
         }
+
+        &__icon-slot {
+          margin-bottom: $unnnic-spacing-md;
+        }
+
         &-alert_icon {
           width: 100%;
           display: flex;
@@ -218,7 +261,7 @@ export default {
         }
 
         &-spacing_header {
-          padding-top: $unnnic-spacing-stack-giant;
+          padding-top: $unnnic-spacing-stack-giant - $unnnic-spacing-sm;
         }
 
         &-description {
@@ -259,7 +302,7 @@ export default {
         line-height: ($unnnic-font-size-body-md + $unnnic-line-height-medium);
       }
 
-      &-button /deep/ {
+      &-button {
         display: flex;
         width: 100%;
         padding: $unnnic-inset-md;

package/src/components/ModalUpload/ModalUpload.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="modal-upload">
     <div class="close-button-container">
-      <unnnic-icon
+      <UnnnicIcon
         class="close-button"
         icon="close-1"
         scheme="neutral-dark"
@@ -14,29 +14,29 @@
       {{ textTitle }}
     </div>
 
-    <unnnic-upload-area
-      :accept-multiple="acceptMultiple"
-      :supported-formats="supportedFormats"
-      :maximum-uploads="maximumUploads"
-      :files-progress="filesProgress"
-      :is-uploading="isUploading"
-      :can-import="canImport"
-      :can-delete="canDelete"
-      :max-file-size="maxFileSize"
+    <UnnnicUploadArea
+      :acceptMultiple="acceptMultiple"
+      :supportedFormats="supportedFormats"
+      :maximumUploads="maximumUploads"
+      :filesProgress="filesProgress"
+      :isUploading="isUploading"
+      :canImport="canImport"
+      :canDelete="canDelete"
+      :maxFileSize="maxFileSize"
       :files="files"
       :subtitle="subtitle"
       @fileChange="$emit('file-change', $event)"
     />
 
     <div class="footer">
-      <unnnic-button
+      <UnnnicButton
         size="large"
-        type="terciary"
+        type="tertiary"
         :text="textCancel"
         @click="$emit('cancel')"
       />
 
-      <unnnic-button
+      <UnnnicButton
         size="large"
         type="primary"
         :text="textAction"
@@ -86,7 +86,7 @@ export default {
 
     supportedFormats: {
       type: String,
-      default: 'png',
+      default: '.png',
     },
 
     maximumUploads: {
@@ -137,7 +137,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .modal-upload {
   background-color: $unnnic-color-background-carpet;
@@ -171,7 +171,10 @@ export default {
     margin-bottom: -$unnnic-spacing-stack-sm;
     display: grid;
     grid-gap: $unnnic-spacing-inline-lg;
-    grid-template-columns: repeat(auto-fit, minmax(10 * $unnnic-font-size, 1fr));
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(10 * $unnnic-font-size, 1fr)
+    );
   }
 }
 </style>