@weni/unnnic-system 2.0.0 → 2.0.1

package/src/components/CardImage/CardImage.vue

@@ -1,41 +1,68 @@
 <template>
-  <div :class="['unnnic-card-image', { checked }]">
+  <div :class="['unnnic-card-image', { checked: modelValue }]">
     <div class="header">
       <div class="content">
-        <div v-if="title" class="u font secondary body-lg bold color-neutral-darkest">
+        <div
+          v-if="title"
+          class="u font secondary body-lg bold color-neutral-darkest"
+        >
           {{ title }}
         </div>
 
-        <div v-if="description" class="u font secondary body-md color-neutral-cloudy">
+        <div
+          v-if="description"
+          class="u font secondary body-md color-neutral-cloudy"
+        >
           {{ description }}
         </div>
       </div>
 
-      <unnnic-checkbox :value="checked" @change="$emit('change', $event)" />
-
-      <unnnic-dropdown v-if="$slots.actions" position="bottom-left">
-        <unnnic-icon
-          slot="trigger"
-          icon="navigation-menu-vertical-1"
-          size="sm"
-          scheme="neutral-cleanest"
-          clickable
-        />
+      <UnnnicCheckbox
+        :modelValue="modelValue"
+        @change="$emit('update:model-value', $event)"
+      />
+
+      <UnnnicDropdown
+        v-if="$slots.actions"
+        position="bottom-left"
+      >
+        <template v-slot:trigger>
+          <UnnnicIcon
+            icon="navigation-menu-vertical-1"
+            size="sm"
+            scheme="neutral-cleanest"
+            clickable
+          />
+        </template>
 
         <slot name="actions" />
-      </unnnic-dropdown>
+      </UnnnicDropdown>
     </div>
 
-    <img class="image" :src="image" />
-
-    <div v-if="data.length" class="details">
-      <div class="data" v-for="(item, index) in data" :key="index">
+    <img
+      class="image"
+      :src="image"
+    />
+
+    <div
+      v-if="data.length"
+      class="details"
+    >
+      <div
+        class="data"
+        v-for="(item, index) in data"
+        :key="index"
+      >
         <div class="u font secondary body-gt color-neutral-dark">
           {{ item.name }}
         </div>
 
         <div class="value-container">
-          <unnnic-avatar-icon :icon="item.icon" size="xs" :scheme="item.scheme" />
+          <UnnnicAvatarIcon
+            :icon="item.icon"
+            size="xs"
+            :scheme="item.scheme"
+          />
 
           <div class="u font secondary body-gt black color-neutral-darkest">
             {{ item.value }}
@@ -53,11 +80,6 @@ import UnnnicAvatarIcon from '../AvatarIcon/AvatarIcon.vue';
 import UnnnicDropdown from '../Dropdown/Dropdown.vue';
 
 export default {
-  model: {
-    prop: 'checked',
-    event: 'change',
-  },
-
   components: {
     UnnnicIcon,
     UnnnicCheckbox,
@@ -66,7 +88,7 @@ export default {
   },
 
   props: {
-    checked: Boolean,
+    modelValue: Boolean,
     title: String,
     description: String,
     image: String,
@@ -81,7 +103,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-card-image {
   display: flex;

package/src/components/CardInformation/CardInformation.vue

@@ -1,15 +1,15 @@
 <template>
-  <card-statuses-container
+  <CardStatusesContainer
     class="unnnic-card-information"
     :name="name"
     :subtitle="subtitle"
     :description="description"
-    :description-row="descriptionRow"
-    :description-row-info="descriptionRowInfo"
+    :descriptionRow="descriptionRow"
+    :descriptionRowInfo="descriptionRowInfo"
     :statuses="statuses"
-    :min-status-width="8.75 * unnnicFontSize + 'px'"
+    :minStatusWidth="8.75 * unnnicFontSize + 'px'"
   >
-  </card-statuses-container>
+  </CardStatusesContainer>
 </template>
 
 <script>
@@ -61,5 +61,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 </style>

package/src/components/CardNumber/CardNumber.vue

@@ -27,7 +27,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-card-number {
   background-color: $unnnic-color-background-carpet;

package/src/components/CardProject/CardProject.vue

@@ -1,27 +1,37 @@
 <template>
-  <card-statuses-container class="unnnic-card-project" :name="name" :statuses="statuses">
-    <div slot="header-buttons" class="buttons">
-      <unnnic-tag
-        class="action"
-        @click.native="$emit('action')"
-        clickable
-        :text="actionText"
-        scheme="aux-blue"
-      />
-
-      <unnnic-dropdown v-if="$slots.actions" position="bottom-left">
-        <unnnic-icon
-          slot="trigger"
-          size="sm"
-          icon="navigation-menu-vertical-1"
+  <CardStatusesContainer
+    class="unnnic-card-project"
+    :name="name"
+    :statuses="statuses"
+  >
+    <template v-slot:header-buttons>
+      <div class="buttons">
+        <UnnnicTag
+          class="action"
+          @click="$emit('action')"
           clickable
-          scheme="neutral-cleanest"
+          :text="actionText"
+          scheme="aux-blue"
         />
 
-        <slot name="actions" />
-      </unnnic-dropdown>
-    </div>
-  </card-statuses-container>
+        <UnnnicDropdown
+          v-if="$slots.actions"
+          position="bottom-left"
+        >
+          <template v-slot:trigger>
+            <UnnnicIcon
+              size="sm"
+              icon="navigation-menu-vertical-1"
+              clickable
+              scheme="neutral-cleanest"
+            />
+          </template>
+
+          <slot name="actions" />
+        </UnnnicDropdown>
+      </div>
+    </template>
+  </CardStatusesContainer>
 </template>
 
 <script>
@@ -56,7 +66,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-card-project {
   .header {

package/src/components/Carousel/Carousel.vue

@@ -1,14 +1,14 @@
 <template>
-    <component
-      class="unnnic-carousel-component"
-      :is="currentComponent"
-      :v-bind="$attrs"
-      :name="name"
-      :clickable="clickable"
-      :tagItems="tagItems"
-      @selected="$emit('change-selected', $event)"
-      :value="value"
-    />
+  <component
+    class="unnnic-carousel-component"
+    :is="currentComponent"
+    v-bind="$attrs"
+    :name="name"
+    :clickable="clickable"
+    :tagItems="tagItems"
+    @selected="$emit('update:model-value', $event)"
+    :modelValue="modelValue"
+  />
 </template>
 
 <script>
@@ -16,12 +16,12 @@ import TagCarousel from './TagCarousel.vue';
 
 export default {
   model: {
-    event: 'change-selected',
+    event: 'update:model-value',
   },
 
   name: 'unnnic-carousel',
   props: {
-    value: {
+    modelValue: {
       type: Array,
       default() {
         return [];
@@ -31,9 +31,7 @@ export default {
       type: String,
       default: 'brand',
       validator(value) {
-        return (
-          ['brand'].indexOf(value) !== -1
-        );
+        return ['brand'].indexOf(value) !== -1;
       },
     },
     tagItems: {

package/src/components/Carousel/TagCarousel.vue

@@ -1,12 +1,14 @@
 <template>
   <div class="unnnic-card-tag-carousel">
-    <div class="unnnic-card-tag-carousel__button unnnic-card-tag-carousel__button--left">
+    <div
+      class="unnnic-card-tag-carousel__button unnnic-card-tag-carousel__button--left"
+    >
       <div class="unnnic-card-tag-carousel__button__icon">
-        <unnnic-icon-svg
+        <UnnnicIconSvg
           icon="arrow-left-1-1"
           size="sm"
-          @click.native="previous()"
-          :scheme="[hasPrev ? 'neutral-black' : 'neutral-cleanest']"
+          @click="previous()"
+          :scheme="hasPrev ? 'neutral-black' : 'neutral-cleanest'"
           clickable
         />
       </div>
@@ -16,30 +18,39 @@
       />
     </div>
 
-    <div class="unnnic-card-tag-carousel__container" id="scroll">
-      <div v-for="tag in slides" :key="tag.id" class="unnnic-card-tag-carousel__container__slide">
-        <unnnic-tag
+    <div
+      class="unnnic-card-tag-carousel__container"
+      id="scroll"
+    >
+      <div
+        v-for="tag in slides"
+        :key="tag.id"
+        class="unnnic-card-tag-carousel__container__slide"
+      >
+        <UnnnicTag
           :text="tag.name"
           clickable
           type="brand"
           :disabled="checkIsInclude(tag)"
-          @click.native="save(tag)"
+          @click="save(tag)"
           class="unnnic-card-tag-carousel__container__slide__item"
         />
       </div>
     </div>
 
-    <div class="unnnic-card-tag-carousel__button unnnic-card-tag-carousel__button--right">
+    <div
+      class="unnnic-card-tag-carousel__button unnnic-card-tag-carousel__button--right"
+    >
       <span
         class="unnnic-card-tag-carousel__button__blur unnnic-card-tag-carousel__button__blur--right"
         v-show="hasNext"
       />
       <div class="unnnic-card-tag-carousel__button__icon">
-        <unnnic-icon-svg
+        <UnnnicIconSvg
           icon="arrow-right-1-1"
-          @click.native="next()"
+          @click="next()"
           size="sm"
-          :scheme="[hasNext ? 'neutral-black' : 'neutral-cleanest']"
+          :scheme="hasNext ? 'neutral-black' : 'neutral-cleanest'"
           clickable
         />
       </div>
@@ -65,7 +76,7 @@ export default {
     UnnnicIconSvg,
   },
   props: {
-    value: {
+    modelValue: {
       type: Array,
       default() {
         return [];
@@ -81,7 +92,7 @@ export default {
   },
   methods: {
     save(tagItem) {
-      let valueLocal = this.value;
+      let valueLocal = this.modelValue;
       if (this.checkIsInclude(tagItem)) {
         valueLocal = valueLocal.filter((id) => id !== tagItem.id);
       } else {
@@ -90,7 +101,7 @@ export default {
       this.$emit('selected', valueLocal);
     },
     checkIsInclude(tagItem) {
-      return this.value.some((id) => id === tagItem.id);
+      return this.modelValue.some((id) => id === tagItem.id);
     },
     next() {
       const element = document.querySelector('#scroll');
@@ -122,7 +133,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-card-tag-carousel {
   display: flex;

package/src/components/ChartBar/ChartBar.vue

@@ -1,10 +1,15 @@
 <template>
   <div :class="['unnnic-chart-bar', { condensed }]">
     <div
-      v-if="title || description || $listeners.update || $listeners.previous || $listeners.next"
+      v-if="
+        title || description || $attrs.update || $attrs.previous || $attrs.next
+      "
       class="header"
     >
-      <div v-if="title || description" class="content">
+      <div
+        v-if="title || description"
+        class="content"
+      >
         <div
           v-if="title"
           @click="$emit('update')"
@@ -21,9 +26,20 @@
         </div>
       </div>
 
-      <div v-if="$listeners.update || $listeners.previous || $listeners.next" class="actions">
-        <div v-if="$listeners.update" class="update-button" @click="$emit('update')">
-          <unnnic-icon icon="button-refresh-arrow-1" size="sm" scheme="neutral-darkest" />
+      <div
+        v-if="$attrs.update || $attrs.previous || $attrs.next"
+        class="actions"
+      >
+        <div
+          v-if="$attrs.update"
+          class="update-button"
+          @click="$emit('update')"
+        >
+          <UnnnicIcon
+            icon="button-refresh-arrow-1"
+            size="sm"
+            scheme="neutral-darkest"
+          />
 
           <span
             v-if="updateText"
@@ -33,24 +49,27 @@
           </span>
         </div>
 
-        <div v-if="$listeners.previous || $listeners.next" class="navigation-container">
-          <unnnic-button
-            v-if="$listeners.previous"
+        <div
+          v-if="$attrs.previous || $attrs.next"
+          class="navigation-container"
+        >
+          <UnnnicButton
+            v-if="$attrs.previous"
             @click="$emit('previous')"
             size="small"
-            type="terciary"
-            icon-center="arrow-left-1-1"
+            type="tertiary"
+            iconCenter="arrow-left-1-1"
             :disabled="previousDisabled"
-          ></unnnic-button>
+          ></UnnnicButton>
 
-          <unnnic-button
-            v-if="$listeners.next"
+          <UnnnicButton
+            v-if="$attrs.next"
             @click="$emit('next')"
             size="small"
-            type="terciary"
-            icon-center="arrow-right-1-1"
+            type="tertiary"
+            iconCenter="arrow-right-1-1"
             :disabled="nextDisabled"
-          ></unnnic-button>
+          ></UnnnicButton>
         </div>
       </div>
     </div>
@@ -59,7 +78,11 @@
       <div class="reference">
         <div class="values">
           <div
-            v-for="(value, index) in [value(maxValue), value(maxValue / 2), value(0)]"
+            v-for="(value, index) in [
+              value(maxValue),
+              value(maxValue / 2),
+              value(0),
+            ]"
             :key="index"
             class="value unnnic-font secondary body-md color-neutral-cleanest"
           >
@@ -67,15 +90,21 @@
           </div>
         </div>
 
-        <div class="unnnic-font secondary body-md color-neutral-cleanest">&nbsp;</div>
+        <div class="unnnic-font secondary body-md color-neutral-cleanest">
+          &nbsp;
+        </div>
       </div>
 
       <div class="groups">
-        <div v-for="(group, index) in groups" :key="index" class="group">
+        <div
+          v-for="(group, index) in groups"
+          :key="index"
+          class="group"
+        >
           <div class="bars">
-            <unnnic-tool-tip
+            <UnnnicToolTip
               enabled
-              v-for="({ legend, index }) in legends
+              v-for="{ legend, index } in legends
                 .map((legend, index) => ({ legend, index }))
                 .filter(({ legend }) => group.values[legend])"
               :key="index"
@@ -83,24 +112,35 @@
               side="top"
               :style="{ height: `${(group.values[legend] / maxValue) * 100}%` }"
             >
-              <div
-                :class="['bar', `color-${index}`]"
-
-              ></div>
-            </unnnic-tool-tip>
+              <div :class="['bar', `color-${index}`]"></div>
+            </UnnnicToolTip>
           </div>
 
-          <div class="title unnnic-font secondary body-md color-neutral-cleanest">
+          <div
+            class="title unnnic-font secondary body-md color-neutral-cleanest"
+          >
             {{ group.title }}
           </div>
         </div>
       </div>
     </div>
 
-    <div v-if="showFooterLegend" class="footer">
-      <div v-for="(legend, index) in legends" :key="index" class="legend">
-        <unnnic-icon icon="indicator" :scheme="colors[index]" />
-        <div class="unnnic-font secondary body-gt color-neutral-cloudy">{{ legend }}</div>
+    <div
+      v-if="showFooterLegend"
+      class="footer"
+    >
+      <div
+        v-for="(legend, index) in legends"
+        :key="index"
+        class="legend"
+      >
+        <UnnnicIcon
+          icon="indicator"
+          :scheme="colors[index]"
+        />
+        <div class="unnnic-font secondary body-gt color-neutral-cloudy">
+          {{ legend }}
+        </div>
       </div>
     </div>
   </div>
@@ -156,10 +196,11 @@ export default {
     },
 
     maxValue() {
-      return this.fixedMaxValue || Math.max(
-        ...this.groups
-          .map(({ values }) => Object.values(values))
-          .flat(),
+      return (
+        this.fixedMaxValue ||
+        Math.max(
+          ...this.groups.map(({ values }) => Object.values(values)).flat(),
+        )
       );
     },
   },
@@ -177,7 +218,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-chart-bar {
   background-color: $unnnic-color-background-snow;
@@ -278,17 +319,16 @@ export default {
             border-radius: $unnnic-border-radius-sm;
 
             $colors:
-              "0" $unnnic-color-aux-blue,
-              "1" $unnnic-color-aux-purple,
-              "2" $unnnic-color-aux-orange,
-              "3" $unnnic-color-aux-lemon,
-              "4" $unnnic-color-aux-pink,
-
-              "5" $unnnic-color-aux-baby-blue,
-              "6" $unnnic-color-aux-baby-yellow,
-              "7" $unnnic-color-aux-baby-red,
-              "8" $unnnic-color-aux-baby-green,
-              "9" $unnnic-color-aux-baby-pink;
+              '0' $unnnic-color-aux-blue,
+              '1' $unnnic-color-aux-purple,
+              '2' $unnnic-color-aux-orange,
+              '3' $unnnic-color-aux-lemon,
+              '4' $unnnic-color-aux-pink,
+              '5' $unnnic-color-aux-baby-blue,
+              '6' $unnnic-color-aux-baby-yellow,
+              '7' $unnnic-color-aux-baby-red,
+              '8' $unnnic-color-aux-baby-green,
+              '9' $unnnic-color-aux-baby-pink;
 
             @each $name, $color in $colors {
               &.color-#{$name} {
@@ -355,24 +395,22 @@ export default {
   font-family: $unnnic-font-family-primary;
 
   $font-sizes:
-    "body-sm" $unnnic-font-size-body-sm,
-    "body-md" $unnnic-font-size-body-md,
-    "body-gt" $unnnic-font-size-body-gt,
-    "body-lg" $unnnic-font-size-body-lg,
-
-    "title-sm" $unnnic-font-size-title-sm,
-    "title-md" $unnnic-font-size-title-md,
-    "title-lg" $unnnic-font-size-title-lg,
-
-    "h4" $unnnic-font-size-h4,
-    "h3" $unnnic-font-size-h3,
-    "h2" $unnnic-font-size-h2,
-    "h1" $unnnic-font-size-h1;
+    'body-sm' $unnnic-font-size-body-sm,
+    'body-md' $unnnic-font-size-body-md,
+    'body-gt' $unnnic-font-size-body-gt,
+    'body-lg' $unnnic-font-size-body-lg,
+    'title-sm' $unnnic-font-size-title-sm,
+    'title-md' $unnnic-font-size-title-md,
+    'title-lg' $unnnic-font-size-title-lg,
+    'h4' $unnnic-font-size-h4,
+    'h3' $unnnic-font-size-h3,
+    'h2' $unnnic-font-size-h2,
+    'h1' $unnnic-font-size-h1;
 
   $font-weights:
-    "black" $unnnic-font-weight-black,
-    "bold" $unnnic-font-weight-bold,
-    "light" $unnnic-font-weight-light;
+    'black' $unnnic-font-weight-black,
+    'bold' $unnnic-font-weight-bold,
+    'light' $unnnic-font-weight-light;
 
   &.secondary {
     font-family: $unnnic-font-family-secondary;
@@ -391,5 +429,4 @@ export default {
     }
   }
 }
-
 </style>