@weni/unnnic-system 2.0.0 → 2.0.2

package/src/components/DatePicker/DatePicker.vue

@@ -1,16 +1,21 @@
 <template>
   <div class="unnnic-date-picker">
     <template v-if="type === 'day'">
-      <template v-for="(openMonth, index) in openMonths">
-        <div :key="openMonth" class="month-container">
+      <template
+        v-for="(openMonth, index) in openMonths"
+        :key="openMonth"
+      >
+        <div class="month-container">
           <div :class="['header', `header--${size}`]">
-            <unnnic-button
+            <UnnnicButton
               size="small"
-              :icon-center="`arrow-${index === 0 ? 'left' : 'right'}-1-1`"
-              :type="size === 'large' ? 'secondary' : 'terciary'"
+              :iconCenter="`arrow-${index === 0 ? 'left' : 'right'}-1-1`"
+              :type="size === 'large' ? 'secondary' : 'tertiary'"
               class="button-space"
               :style="{ gridArea: `${index === 0 ? 'left' : 'right'}-button` }"
-              @click="referenceDate = addMonth(referenceDate, index === 0 ? -1 : 1)"
+              @click.stop="
+                referenceDate = addMonth(referenceDate, index === 0 ? -1 : 1)
+              "
             />
 
             <div :class="['label', `label--${size}`]">
@@ -20,7 +25,13 @@
           </div>
 
           <div :class="['days', `days--${size}`]">
-            <div v-for="(day, index) in days" :key="index" class="name">{{ day }}</div>
+            <div
+              v-for="(day, index) in days"
+              :key="index"
+              class="name"
+            >
+              {{ day }}
+            </div>
             <div
               v-for="(date, index) in getDatesOfTheMonth(openMonth)"
               :key="`${openMonth}-${index}`"
@@ -33,25 +44,30 @@
                 left: date.properties.includes('left-highlighted'),
                 right: date.properties.includes('right-highlighted'),
               }"
-              @click="date.properties.includes('inside month') && selectDate(date)"
+              @click="
+                date.properties.includes('inside month') && selectDate(date)
+              "
             >
               {{ getDate(date) }}
             </div>
           </div>
         </div>
 
-        <div :key="`divider-${openMonth}`" class="divider"></div>
+        <div class="divider"></div>
       </template>
     </template>
 
     <template v-else-if="type === 'month'">
-      <template v-for="openMonth in [referenceDate]">
-        <div :key="openMonth" class="month-container">
+      <template
+        v-for="openMonth in [referenceDate]"
+        :key="openMonth"
+      >
+        <div class="month-container">
           <div :class="['header', `header--${size}`]">
-            <unnnic-button
+            <UnnnicButton
               size="small"
-              icon-center="arrow-left-1-1"
-              :type="size === 'large' ? 'secondary' : 'terciary'"
+              iconCenter="arrow-left-1-1"
+              :type="size === 'large' ? 'secondary' : 'tertiary'"
               class="button-space"
               :style="{ gridArea: 'left-button' }"
               @click="referenceDate = addMonth(referenceDate, -12)"
@@ -61,10 +77,10 @@
               {{ getFullYear(openMonth) }}
             </div>
 
-            <unnnic-button
+            <UnnnicButton
               size="small"
-              icon-center="arrow-right-1-1"
-              :type="size === 'large' ? 'secondary' : 'terciary'"
+              iconCenter="arrow-right-1-1"
+              :type="size === 'large' ? 'secondary' : 'tertiary'"
               class="button-space"
               :style="{ gridArea: 'right-button' }"
               @click="referenceDate = addMonth(referenceDate, 12)"
@@ -84,25 +100,30 @@
                 left: date.properties.includes('left-highlighted'),
                 right: date.properties.includes('right-highlighted'),
               }"
-              @click="date.properties.includes('inside month') && selectDate(date)"
+              @click="
+                date.properties.includes('inside month') && selectDate(date)
+              "
             >
               {{ months[getMonth(date)].substr(0, 3) }}
             </div>
           </div>
         </div>
 
-        <div :key="`divider-${openMonth}`" class="divider"></div>
+        <div class="divider"></div>
       </template>
     </template>
 
     <template v-else-if="type === 'year'">
-      <template v-for="openMonth in [referenceDate]">
-        <div :key="openMonth" class="month-container">
+      <template
+        v-for="openMonth in [referenceDate]"
+        :key="openMonth"
+      >
+        <div class="month-container">
           <div :class="['header', `header--${size}`]">
-            <unnnic-button
+            <UnnnicButton
               size="small"
-              icon-center="arrow-left-1-1"
-              :type="size === 'large' ? 'secondary' : 'terciary'"
+              iconCenter="arrow-left-1-1"
+              :type="size === 'large' ? 'secondary' : 'tertiary'"
               class="button-space"
               :style="{ gridArea: 'left-button' }"
               @click="referenceDate = addMonth(referenceDate, -12 * 12)"
@@ -112,10 +133,10 @@
               {{ getFullYear(openMonth) }}
             </div>
 
-            <unnnic-button
+            <UnnnicButton
               size="small"
-              icon-center="arrow-right-1-1"
-              :type="size === 'large' ? 'secondary' : 'terciary'"
+              iconCenter="arrow-right-1-1"
+              :type="size === 'large' ? 'secondary' : 'tertiary'"
               class="button-space"
               :style="{ gridArea: 'right-button' }"
               @click="referenceDate = addMonth(referenceDate, 12 * 12)"
@@ -135,18 +156,23 @@
                 left: date.properties.includes('left-highlighted'),
                 right: date.properties.includes('right-highlighted'),
               }"
-              @click="date.properties.includes('inside month') && selectDate(date)"
+              @click="
+                date.properties.includes('inside month') && selectDate(date)
+              "
             >
               {{ date.date }}
             </div>
           </div>
         </div>
 
-        <div :key="`divider-${openMonth}`" class="divider"></div>
+        <div class="divider"></div>
       </template>
     </template>
 
-    <div v-if="size !== 'small'" class="options-container">
+    <div
+      v-if="size !== 'small'"
+      class="options-container"
+    >
       <div class="options">
         <div
           :class="['option', { selected: optionSelected === option.id }]"
@@ -159,14 +185,14 @@
       </div>
 
       <div class="actions">
-        <unnnic-button
+        <UnnnicButton
           size="small"
           :text="clearLabel"
-          type="terciary"
+          type="tertiary"
           @click="clear"
         />
 
-        <unnnic-button
+        <UnnnicButton
           size="small"
           :text="actionLabel"
           type="secondary"
@@ -249,25 +275,32 @@ export default {
     options: {
       type: Array,
       default() {
-        return [{
-          name: 'Últimos 7 dias',
-          id: 'last-7-days',
-        }, {
-          name: 'Últimos 14 dias',
-          id: 'last-14-days',
-        }, {
-          name: 'Últimos 30 dias',
-          id: 'last-30-days',
-        }, {
-          name: 'Últimos 12 meses',
-          id: 'last-12-months',
-        }, {
-          name: 'Mês Atual',
-          id: 'current-month',
-        }, {
-          name: 'Personalizar',
-          id: 'custom',
-        }];
+        return [
+          {
+            name: 'Últimos 7 dias',
+            id: 'last-7-days',
+          },
+          {
+            name: 'Últimos 14 dias',
+            id: 'last-14-days',
+          },
+          {
+            name: 'Últimos 30 dias',
+            id: 'last-30-days',
+          },
+          {
+            name: 'Últimos 12 meses',
+            id: 'last-12-months',
+          },
+          {
+            name: 'Mês Atual',
+            id: 'current-month',
+          },
+          {
+            name: 'Personalizar',
+            id: 'custom',
+          },
+        ];
       },
     },
   },
@@ -286,10 +319,7 @@ export default {
 
   computed: {
     openMonths() {
-      return [
-        this.referenceDate,
-        this.addMonth(this.referenceDate, 1),
-      ];
+      return [this.referenceDate, this.addMonth(this.referenceDate, 1)];
     },
 
     value() {
@@ -302,7 +332,7 @@ export default {
 
   watch: {
     value({ startDate, endDate }) {
-      this.optionSelected = (startDate || endDate) ? 'custom' : '';
+      this.optionSelected = startDate || endDate ? 'custom' : '';
 
       this.$emit('change', this.value);
     },
@@ -348,14 +378,20 @@ export default {
     isDateBetween(internalDate) {
       if (this.startDate && this.endDate) {
         if (
-          internalDate >= this.stringToTime(this.startDate)
-          && internalDate <= this.stringToTime(this.endDate)
+          internalDate >= this.stringToTime(this.startDate) &&
+          internalDate <= this.stringToTime(this.endDate)
         ) {
           return true;
         }
-      } else if (this.startDate && internalDate >= this.stringToTime(this.startDate)) {
+      } else if (
+        this.startDate &&
+        internalDate >= this.stringToTime(this.startDate)
+      ) {
         return true;
-      } else if (this.endDate && internalDate <= this.stringToTime(this.endDate)) {
+      } else if (
+        this.endDate &&
+        internalDate <= this.stringToTime(this.endDate)
+      ) {
         return true;
       }
 
@@ -369,14 +405,17 @@ export default {
 
       if (this.startDate && this.endDate) {
         if (
-          internalDate >= startDateTime
-          && internalDate <= this.stringToTime(this.endDate)
+          internalDate >= startDateTime &&
+          internalDate <= this.stringToTime(this.endDate)
         ) {
           return true;
         }
       } else if (this.startDate && internalDate >= startDateTime) {
         return true;
-      } else if (this.endDate && internalDate <= this.stringToTime(this.endDate)) {
+      } else if (
+        this.endDate &&
+        internalDate <= this.stringToTime(this.endDate)
+      ) {
         return true;
       }
 
@@ -391,14 +430,17 @@ export default {
 
       if (this.startDate && this.endDate) {
         if (
-          internalDate >= startDateTime
-          && internalDate <= this.stringToTime(this.endDate)
+          internalDate >= startDateTime &&
+          internalDate <= this.stringToTime(this.endDate)
         ) {
           return true;
         }
       } else if (this.startDate && internalDate >= startDateTime) {
         return true;
-      } else if (this.endDate && internalDate <= this.stringToTime(this.endDate)) {
+      } else if (
+        this.endDate &&
+        internalDate <= this.stringToTime(this.endDate)
+      ) {
         return true;
       }
 
@@ -436,7 +478,10 @@ export default {
               properties.push('right-highlighted');
             }
 
-            if (properties.includes('left-highlighted') || properties.includes('right-highlighted')) {
+            if (
+              properties.includes('left-highlighted') ||
+              properties.includes('right-highlighted')
+            ) {
               properties.push('highlighted');
             }
           }
@@ -491,12 +536,17 @@ export default {
             properties.push('right-highlighted');
           }
 
-          if (properties.includes('left-highlighted') || properties.includes('right-highlighted')) {
+          if (
+            properties.includes('left-highlighted') ||
+            properties.includes('right-highlighted')
+          ) {
             properties.push('highlighted');
           }
         }
 
-        if (this.dateToStringMonth(date) === this.dateToStringMonth(new Date())) {
+        if (
+          this.dateToStringMonth(date) === this.dateToStringMonth(new Date())
+        ) {
           properties.push('today');
         }
 
@@ -546,7 +596,10 @@ export default {
             properties.push('right-highlighted');
           }
 
-          if (properties.includes('left-highlighted') || properties.includes('right-highlighted')) {
+          if (
+            properties.includes('left-highlighted') ||
+            properties.includes('right-highlighted')
+          ) {
             properties.push('highlighted');
           }
         }
@@ -626,7 +679,9 @@ export default {
 
       if (this.endDate) {
         const secondMonth = this.addMonth(this.referenceDate, 1);
-        const firstDateOfEndDate = `${this.getMonth(this.endDate) + 1} 1 ${this.getFullYear(this.endDate)}`;
+        const firstDateOfEndDate = `${
+          this.getMonth(this.endDate) + 1
+        } 1 ${this.getFullYear(this.endDate)}`;
 
         if (![this.referenceDate, secondMonth].includes(firstDateOfEndDate)) {
           this.referenceDate = firstDateOfEndDate;
@@ -642,7 +697,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-date-picker {
   display: inline-flex;
@@ -661,7 +716,7 @@ export default {
     .header {
       display: grid;
       align-items: center;
-      grid-template-areas: "left-button label right-button";
+      grid-template-areas: 'left-button label right-button';
 
       &--small {
         grid-template-columns: 32px auto 32px;
@@ -713,7 +768,8 @@ export default {
         line-height: 32px;
       }
 
-      &.months--small, &.months--large {
+      &.months--small,
+      &.months--large {
         grid-template-columns: repeat(3, 4.75 * $unnnic-font-size);
         grid-template-rows: repeat(4, 3.3125 * $unnnic-font-size);
         font-size: $unnnic-font-size-body-md;
@@ -784,7 +840,8 @@ export default {
         user-select: none;
         cursor: pointer;
 
-        &:hover, &.selected {
+        &:hover,
+        &.selected {
           background-color: $unnnic-color-background-sky;
         }
 

package/src/components/Dropdown/Dropdown.vue

@@ -1,23 +1,27 @@
 <template>
-    <div class="unnnic-dropdown" @click.stop="onClickTrigger">
-        <div class="unnnic-dropdown__trigger">
-          <slot name="trigger" />
-          <div
-            v-if="active"
-            :class="[
-              'unnnic-dropdown__content',
-              active ? '' : 'unnnic-dropdown__content--hidden',
-              `unnnic-dropdown__content__position-${position}` ]"
-            v-click-outside="onClickOutside"
-          >
-            <slot />
-          </div>
-        </div>
+  <div
+    class="unnnic-dropdown"
+    @click.stop="onClickTrigger"
+  >
+    <div class="unnnic-dropdown__trigger">
+      <slot name="trigger" />
+      <div
+        v-if="active"
+        :class="[
+          'unnnic-dropdown__content',
+          active ? '' : 'unnnic-dropdown__content--hidden',
+          `unnnic-dropdown__content__position-${position}`,
+        ]"
+        v-on-click-outside="onClickOutside"
+      >
+        <slot />
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import vClickOutside from 'v-click-outside';
+import { vOnClickOutside } from '@vueuse/components';
 
 export default {
   name: 'unnnicDropdown',
@@ -30,7 +34,15 @@ export default {
       type: String,
       default: 'bottom-left',
       validator(value) {
-        return ['top-left', 'none', 'bottom-left', 'bottom-left', 'bottom-right'].indexOf(value) !== -1;
+        return (
+          [
+            'top-left',
+            'none',
+            'bottom-left',
+            'bottom-left',
+            'bottom-right',
+          ].indexOf(value) !== -1
+        );
       },
     },
   },
@@ -40,7 +52,7 @@ export default {
     };
   },
   directives: {
-    clickOutside: vClickOutside.directive,
+    onClickOutside: vOnClickOutside,
   },
   methods: {
     onClickTrigger() {
@@ -64,46 +76,46 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../assets/scss/unnnic.scss';
-  .unnnic-dropdown {
-    &__trigger {
-      position: relative;
-      display: inline-block;
-    }
+.unnnic-dropdown {
+  &__trigger {
+    position: relative;
+    display: inline-block;
+  }
 
-    &__content {
-        background-color: $unnnic-color-neutral-snow;
-        box-shadow: $unnnic-shadow-level-near;
-        border-radius: $unnnic-border-radius-sm;
-        position: absolute;
-        display: flex;
-        flex-direction: column;
-        padding: $unnnic-squish-xs;
-        z-index: 2;
-      &--hidden {
-        display: none !important;
+  &__content {
+    background-color: $unnnic-color-neutral-snow;
+    box-shadow: $unnnic-shadow-level-near;
+    border-radius: $unnnic-border-radius-sm;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    padding: $unnnic-squish-xs;
+    z-index: 2;
+    &--hidden {
+      display: none !important;
+    }
+    &__position {
+      &-top-left {
+        bottom: 100%;
+        right: 1 * $unnnic-font-size;
+        margin-bottom: $unnnic-spacing-stack-xs;
+      }
+      &-top-right {
+        bottom: 100%;
+        left: 1 * $unnnic-font-size;
+        margin-bottom: $unnnic-inline-xs;
+      }
+      &-bottom-left {
+        margin-top: $unnnic-spacing-stack-xs;
+        top: 100%;
+        right: 0;
       }
-      &__position {
-          &-top-left {
-            bottom: 100%;
-            right: 1 * $unnnic-font-size;
-            margin-bottom: $unnnic-spacing-stack-xs;
-          }
-          &-top-right {
-            bottom: 100%;
-            left: 1 * $unnnic-font-size;
-            margin-bottom: $unnnic-inline-xs;
-          }
-          &-bottom-left {
-            margin-top: $unnnic-spacing-stack-xs;
-            top: 100%;
-            right: 0;
-          }
-          &-bottom-right {
-            margin-top: $unnnic-inline-xs;
-            top: 100%;
-            left: 1 * $unnnic-font-size;
-          }
+      &-bottom-right {
+        margin-top: $unnnic-inline-xs;
+        top: 100%;
+        left: 1 * $unnnic-font-size;
       }
     }
   }
+}
 </style>

package/src/components/Dropdown/DropdownItem.vue

@@ -1,9 +1,7 @@
 <template>
-    <a
-      @click="$emit('click')"
-      class="unnnic-dropdown-item unnnic--clickable">
-      <slot />
-    </a>
+  <a class="unnnic-dropdown-item unnnic--clickable">
+    <slot />
+  </a>
 </template>
 
 <script>
@@ -14,18 +12,18 @@ export default {
 
 <style lang="scss">
 @import '../../assets/scss/unnnic.scss';
-  .unnnic-dropdown-item {
-    color: $unnnic-color-neutral-dark;
-    text-decoration: none;
-    font-family: $unnnic-font-family-secondary;
-    font-size: $unnnic-font-size-body-md;
+.unnnic-dropdown-item {
+  color: $unnnic-color-neutral-dark;
+  text-decoration: none;
+  font-family: $unnnic-font-family-secondary;
+  font-size: $unnnic-font-size-body-md;
 
-    + .unnnic-dropdown-item::before {
-        height: 0;
-        content: '';
-        display: block;
-        border: 1px solid $unnnic-color-neutral-lightest;
-        margin: $unnnic-spacing-stack-xs 0;
-    }
+  + .unnnic-dropdown-item::before {
+    height: 0;
+    content: '';
+    display: block;
+    border: 1px solid $unnnic-color-neutral-lightest;
+    margin: $unnnic-spacing-stack-xs 0;
   }
+}
 </style>

package/src/components/Dropdown/DropdownSkeleton.vue

@@ -1,12 +1,19 @@
 <template>
-  <span :class="['dropdown', { active }]" ref="dropdown">
-    <slot>
-    </slot><div
+  <span
+    :class="['dropdown', { active }]"
+    ref="dropdown"
+  >
+    <slot> </slot>
+    <div
       class="dropdown-data"
       :style="{ position: 'fixed', ...positions }"
       ref="dropdown-data"
     >
-      <slot name="inside" :width="`${width}px`" :height="`${height}px`"></slot>
+      <slot
+        name="inside"
+        :width="`${width}px`"
+        :height="`${height}px`"
+      ></slot>
     </div>
   </span>
 </template>
@@ -19,7 +26,7 @@ export default {
       default: 'automatic',
     },
 
-    value: Boolean,
+    modelValue: Boolean,
 
     position: {
       type: String,
@@ -49,7 +56,7 @@ export default {
   computed: {
     active() {
       if (this.type === 'manual') {
-        return this.value;
+        return this.modelValue;
       }
 
       return false;
@@ -117,7 +124,7 @@ export default {
     window.addEventListener('resize', this.calculatePosition);
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener('scroll', this.calculatePosition);
     window.removeEventListener('resize', this.calculatePosition);
   },
@@ -145,7 +152,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .dropdown {
   position: relative;