@weni/unnnic-system 2.0.0 → 2.0.1

package/src/components/MoodRating/MoodRating.vue

@@ -2,21 +2,29 @@
   <div class="unnnic-mood-rating">
     <div class="title">{{ title }}</div>
 
-    <div :class="['moods', { selected: value !== null }]">
-      <div v-for="(mood, index) in moods" :key="index" class="mood">
-        <unnnic-tool-tip
+    <div :class="['moods', { selected: modelValue !== null }]">
+      <div
+        v-for="(mood, index) in moods"
+        :key="index"
+        class="mood"
+      >
+        <UnnnicToolTip
           side="bottom"
           :text="titlesMoods[index]"
           enabled
         >
           <img
             :src="mood.image"
-            @click="value && index === value - 1 ? $emit('input', null) : $emit('input', index + 1)"
+            @click="
+              modelValue && index === modelValue - 1
+                ? $emit('update:model-value', null)
+                : $emit('update:model-value', index + 1)
+            "
             :class="{
-              active: value && index === value - 1
+              active: modelValue && index === modelValue - 1,
             }"
-          >
-        </unnnic-tool-tip>
+          />
+        </UnnnicToolTip>
       </div>
     </div>
   </div>
@@ -37,7 +45,7 @@ export default {
   },
 
   props: {
-    value: {
+    modelValue: {
       type: Number,
     },
 
@@ -55,24 +63,30 @@ export default {
 
   data() {
     return {
-      moods: [{
-        image: mood1,
-      }, {
-        image: mood2,
-      }, {
-        image: mood3,
-      }, {
-        image: mood4,
-      }, {
-        image: mood5,
-      }],
+      moods: [
+        {
+          image: mood1,
+        },
+        {
+          image: mood2,
+        },
+        {
+          image: mood3,
+        },
+        {
+          image: mood4,
+        },
+        {
+          image: mood5,
+        },
+      ],
     };
   },
 };
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-mood-rating {
   text-align: center;
@@ -104,7 +118,8 @@ export default {
         width: $unnnic-icon-size-lg;
         transition: all 300ms;
 
-        &:hover, &.active {
+        &:hover,
+        &.active {
           opacity: 1;
           width: $unnnic-icon-size-xl;
         }

package/src/components/MultiSelect/MultiSelect.vue

@@ -1,6 +1,13 @@
 <template>
-  <div :class="expand ? 'expand-multiselect' : 'normal-multiselect'" tabindex="-1">
-    <span class="select-permission-label" v-if="label">{{ label }}</span>
+  <div
+    :class="expand ? 'expand-multiselect' : 'normal-multiselect'"
+    tabindex="-1"
+  >
+    <span
+      class="select-permission-label"
+      v-if="label"
+      >{{ label }}</span
+    >
     <div
       @keypress="handleIsOpenKeyboard"
       @click="active = !active"
@@ -14,20 +21,35 @@
         scheme="neutral-dark"
       />
     </div>
-    <div v-if="active" class="select-content" v-click-outside="onClickOutside" tabindex="0">
+    <div
+      v-if="active"
+      class="select-content"
+      v-on-click-outside="onClickOutside"
+      tabindex="0"
+    >
       <div>
-        <template v-for="(group, indexGroup) in groups">
-          <h6 v-if="!hideGroupTitle" class="title" :key="`title-${indexGroup}`">
+        <template
+          v-for="(group, indexGroup) in modelValue"
+          :key="`group-${indexGroup}`"
+        >
+          <h6
+            v-if="!hideGroupTitle"
+            class="title"
+            :key="`title-${indexGroup}`"
+          >
             {{ group.title }}
           </h6>
-          <section :key="`section-${indexGroup}`">
-            <template v-for="(item, indexItem) in group.items">
+          <section>
+            <template
+              v-for="(item, indexItem) in group.items"
+              :key="`item-${indexItem}`"
+            >
               <div
                 @click="change(indexGroup, indexItem)"
                 :key="indexItem + 'input'"
                 v-if="hideRadio"
                 class="unnnic-radio-container unnnic-radio-container--sm"
-                style="cursor: pointer;"
+                style="cursor: pointer"
               >
                 <strong>{{ item.title }}</strong>
                 <span>{{ item.description }}</span>
@@ -35,12 +57,12 @@
               <UnnnicRadio
                 v-else
                 name=""
-                :globalValue="group.selected"
-                @change="change(indexGroup, $event)"
+                :modelValue="group.selected"
+                @update:model-value="change(indexGroup, $event)"
                 :value="indexItem"
                 id=""
                 size="sm"
-                :key="indexItem + 'input'"
+                :key="'else' + indexItem + 'input'"
                 class=""
               >
                 <strong>{{ item.title }}</strong>
@@ -55,22 +77,18 @@
 </template>
 
 <script>
-import vClickOutside from 'v-click-outside';
+import { vOnClickOutside } from '@vueuse/components';
 import UnnnicIcon from '../Icon.vue';
 import UnnnicRadio from '../Radio/Radio.vue';
 
 export default {
-  name: 'UnnicMultiSelect',
+  name: 'UnnnicMultiSelect',
   components: {
     UnnnicIcon,
     UnnnicRadio,
   },
-  model: {
-    prop: 'groups',
-    event: 'change',
-  },
   directives: {
-    clickOutside: vClickOutside.directive,
+    onClickOutside: vOnClickOutside,
   },
   props: {
     isOpen: {
@@ -83,7 +101,7 @@ export default {
       type: String,
       default: '',
     },
-    groups: {
+    modelValue: {
       type: Array,
       default: () => [],
     },
@@ -118,7 +136,10 @@ export default {
   },
   methods: {
     handleIsOpenKeyboard(event) {
-      if (document.querySelector('.select-permission:focus-visible') && event.keyCode === 32) {
+      if (
+        document.querySelector('.select-permission:focus-visible') &&
+        event.keyCode === 32
+      ) {
         this.active = !this.active;
       }
     },
@@ -130,8 +151,8 @@ export default {
 
     change(indexGroup, indexSelected) {
       this.$emit(
-        'change',
-        this.groups.map((item, index) => {
+        'update:model-value',
+        this.modelValue.map((item, index) => {
           if (index === indexGroup) {
             let selected = indexSelected;
             if (this.unselectable && item.selected === indexSelected) {
@@ -240,7 +261,8 @@ export default {
       & + h6 {
         margin-top: $unnnic-spacing-stack-sm;
         padding-top: $unnnic-spacing-stack-sm;
-        border-top: $unnnic-border-width-thinner solid $unnnic-color-neutral-darkest;
+        border-top: $unnnic-border-width-thinner solid
+          $unnnic-color-neutral-darkest;
       }
 
       strong,
@@ -261,10 +283,11 @@ export default {
         & + .unnnic-radio-container {
           margin-top: $unnnic-spacing-stack-sm;
           padding-top: $unnnic-spacing-stack-sm;
-          border-top: $unnnic-border-width-thinner solid $unnnic-color-neutral-lightest;
+          border-top: $unnnic-border-width-thinner solid
+            $unnnic-color-neutral-lightest;
         }
 
-        ::v-deep .unnnic-icon {
+        :deep(.unnnic-icon) {
           margin-right: $unnnic-inline-xs;
         }
       }

package/src/components/Pagination/Pagination.vue

@@ -1,27 +1,30 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="pagination">
-    <unnnic-button
-      type="terciary"
+    <UnnnicButton
+      type="tertiary"
       size="small"
-      icon-center="arrow-left-1-1"
+      iconCenter="arrow-left-1-1"
       :disabled="!canPrevious || disabled"
       @click="previousPage"
     />
 
-    <unnnic-button
+    <UnnnicButton
       v-for="(page, index) in pages"
       :key="index"
-      :type="page === value ? 'secondary' : 'terciary'"
+      :type="page === value ? 'secondary' : 'tertiary'"
       size="small"
-      :text="['left-hidden', 'right-hidden'].includes(page) ? '...' : String(page)"
+      :text="
+        ['left-hidden', 'right-hidden'].includes(page) ? '...' : String(page)
+      "
       @click="selectPage(page)"
       :disabled="disabled"
     />
 
-    <unnnic-button
-      type="terciary"
+    <UnnnicButton
+      type="tertiary"
       size="small"
-      icon-center="arrow-right-1-1"
+      iconCenter="arrow-right-1-1"
       :disabled="!canNext || disabled"
       @click="nextPage"
     />
@@ -76,13 +79,13 @@ export default {
       const maxToRemove = this.max - plus - 3;
 
       if (this.reference > 3) {
-        const toRemove = (this.reference - 2);
+        const toRemove = this.reference - 2;
         const maxRemove = toRemove > maxToRemove ? maxToRemove : toRemove;
         pages.splice(1, maxRemove, 'left-hidden');
       }
 
       if (this.reference < this.max - plus - 1) {
-        const toRemove = (this.max - plus - this.reference);
+        const toRemove = this.max - plus - this.reference;
         const maxRemove = toRemove > maxToRemove ? maxToRemove : toRemove;
         pages.splice(-(maxRemove + 1), maxRemove, 'right-hidden');
       }
@@ -102,17 +105,21 @@ export default {
   methods: {
     selectPage(page) {
       if (page === 'left-hidden') {
-        const pageNumber = this.pages[this.pages.indexOf('left-hidden') + 1] - 1;
+        const pageNumber =
+          this.pages[this.pages.indexOf('left-hidden') + 1] - 1;
 
         this.$emit('input', pageNumber);
         this.setReference(pageNumber);
       } else if (page === 'right-hidden') {
-        const pageNumber = this.pages[this.pages.indexOf('right-hidden') - 1] + 1;
+        const pageNumber =
+          this.pages[this.pages.indexOf('right-hidden') - 1] + 1;
 
         this.$emit('input', pageNumber);
 
         if (this.pages.includes('left-hidden')) {
-          this.setReference(this.pages[this.pages.indexOf('left-hidden') + 1] + 1);
+          this.setReference(
+            this.pages[this.pages.indexOf('left-hidden') + 1] + 1,
+          );
         } else {
           this.setReference(4);
         }
@@ -153,7 +160,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .pagination {
   display: flex;

package/src/components/ProgressBar/ProgressBar.vue

@@ -5,18 +5,25 @@
       type,
       {
         inline,
-        'has-subtitle':
-        subtitle,
+        'has-subtitle': subtitle,
         'can-close': canClose,
-      }
+      },
     ]"
   >
     <div class="main">
-      <div v-if="title && !subtitle" class="title">{{ title }}</div>
+      <div
+        v-if="title && !subtitle"
+        class="title"
+      >
+        {{ title }}
+      </div>
 
       <div class="progress-bar-container">
         <div class="progress-container">
-          <div class="bar" :style="{ width: `${value}%` }">
+          <div
+            class="bar"
+            :style="{ width: `${value}%` }"
+          >
             <div
               v-if="type === 'secondary' && !subtitle"
               class="percentage"
@@ -34,25 +41,27 @@
         </div>
       </div>
 
-      <div v-if="type === 'primary' && subtitle" class="footer">
+      <div
+        v-if="type === 'primary' && subtitle"
+        class="footer"
+      >
         <div class="subtitle">{{ subtitle }}</div>
 
-        <div
-          class="percentage"
-        >
-          {{ percentage }}%
-        </div>
+        <div class="percentage">{{ percentage }}%</div>
       </div>
     </div>
 
-    <div v-if="type === 'primary' && subtitle && canClose" class="close">
-      <unnnic-icon
+    <div
+      v-if="type === 'primary' && subtitle && canClose"
+      class="close"
+    >
+      <UnnnicIcon
         icon="close-1"
         scheme="neutral-clean"
         size="sm"
         clickable
         @click="$emit('close')"
-      ></unnnic-icon>
+      ></UnnnicIcon>
     </div>
   </div>
 </template>
@@ -101,10 +110,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-progress-bar {
-  &.primary, &.secondary {
+  &.primary,
+  &.secondary {
     background-color: $unnnic-color-background-carpet;
     border-radius: $unnnic-border-radius-sm;
     padding: $unnnic-squish-md;
@@ -140,7 +150,10 @@ export default {
       align-items: center;
 
       .progress-container {
-        background-color: rgba($unnnic-color-aux-blue, $unnnic-opacity-level-light);
+        background-color: rgba(
+          $unnnic-color-aux-blue,
+          $unnnic-opacity-level-light
+        );
         height: 1.25 * $unnnic-font-size;
         min-width: 14 * $unnnic-font-size;
         border-radius: $unnnic-border-radius-pill;

package/src/components/Radio/Radio.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div
     @click="click"
@@ -7,7 +8,7 @@
       disabled ? 'disabled' : null,
     ]"
   >
-    <unnnic-icon-svg
+    <UnnnicIconSvg
       class="unnnic-radio"
       :icon="icon"
       :scheme="color"
@@ -15,84 +16,63 @@
     />
 
     <span class="label">
-      <slot/>
+      <slot />
     </span>
   </div>
 </template>
 
-<script>
-import unnnicIconSvg from '../Icon.vue';
+<script setup>
+import { computed } from 'vue';
 
-export default {
-  model: {
-    prop: 'globalValue',
-    event: 'change',
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
   },
-
-  props: {
-    value: {
-      type: [String, Number],
-    },
-
-    globalValue: {
-      type: [String, Number],
-    },
-
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    size: {
-      type: String,
-      default: 'md',
-      validator(value) {
-        return ['md', 'sm'].includes(value);
-      },
-    },
+  value: {
+    type: [String, Number],
   },
-
-  components: {
-    unnnicIconSvg,
+  disabled: {
+    type: Boolean,
+    default: false,
   },
-
-  computed: {
-    valueName() {
-      return this.globalValue === this.value
-        ? 'selected'
-        : 'default';
-    },
-
-    icon() {
-      return {
-        selected: 'radio-selected',
-        default: this.disabled ? 'radio-disable' : 'radio-default',
-      }[this.valueName];
-    },
-
-    color() {
-      if (this.disabled) {
-        return 'brand-sec';
-      }
-
-      return this.valueName === 'selected'
-        ? 'brand-weni'
-        : 'neutral-soft';
+  size: {
+    type: String,
+    default: 'md',
+    validator(value) {
+      return ['md', 'sm'].includes(value);
     },
   },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const valueName = computed(() =>
+  props.modelValue === props.value ? 'selected' : 'default',
+);
+const icon = computed(
+  () =>
+    ({
+      selected: 'radio-selected',
+      default: props.disabled ? 'radio-disable' : 'radio-default',
+    })[valueName.value],
+);
+const color = computed(() => {
+  if (props.disabled) {
+    return 'brand-sec';
+  }
 
-  methods: {
-    click() {
-      if (!this.disabled) {
-        this.$emit('change', this.value);
-      }
-    },
-  },
-};
+  return valueName.value === 'selected' ? 'brand-weni' : 'neutral-soft';
+});
+
+function click() {
+  if (!props.disabled) {
+    emit('update:modelValue', props.value);
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-@import "../../assets/scss/unnnic.scss";
+@import '../../assets/scss/unnnic.scss';
 
 .unnnic-radio-container {
   display: inline-flex;

package/src/components/Select/SelectItem.vue

@@ -1,17 +1,23 @@
 <template>
-    <div
-      @click="$emit('click')"
-      :class="{
-        'unnnic-select-item': true,
-        'unnnic-select-item__active': active,
-        'unnnic--clickable': selectable,
-        'unnnic-select-item--selectable': selectable,
-        'text-focused': textFocused,
-      }">
-      <span :class="['unnnic-select-item__label', `unnnic-select-item__label--${size}`]">
-        <slot/>
-        </span>
-    </div>
+  <div
+    @click="$emit('click')"
+    :class="{
+      'unnnic-select-item': true,
+      'unnnic-select-item__active': active,
+      'unnnic--clickable': selectable,
+      'unnnic-select-item--selectable': selectable,
+      'text-focused': textFocused,
+    }"
+  >
+    <span
+      :class="[
+        'unnnic-select-item__label',
+        `unnnic-select-item__label--${size}`,
+      ]"
+    >
+      <slot />
+    </span>
+  </div>
 </template>
 
 <script>
@@ -40,40 +46,40 @@ export default {
 
 <style lang="scss">
 @import '../../assets/scss/unnnic.scss';
-  .unnnic-select-item {
-    background-color: $unnnic-color-background-snow;
-    padding: $unnnic-spacing-stack-nano $unnnic-inline-xs;
-    margin: $unnnic-inline-xs;
+.unnnic-select-item {
+  background-color: $unnnic-color-background-snow;
+  padding: $unnnic-spacing-stack-nano $unnnic-inline-xs;
+  margin: $unnnic-inline-xs;
 
-    font-family: $unnnic-font-family-secondary;
-    color: $unnnic-color-neutral-dark;
-    font-weight: $unnnic-font-weight-regular;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    max-width: 100%;
-    -webkit-line-clamp: 1;
+  font-family: $unnnic-font-family-secondary;
+  color: $unnnic-color-neutral-dark;
+  font-weight: $unnnic-font-weight-regular;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 100%;
+  -webkit-line-clamp: 1;
 
-    &.text-focused {
-      color: $unnnic-color-brand-weni-soft;
-      font-weight: $unnnic-font-weight-bold;
-    }
+  &.text-focused {
+    color: $unnnic-color-brand-weni-soft;
+    font-weight: $unnnic-font-weight-bold;
+  }
 
-    &--selectable:hover, &__active{
-      background-color: $unnnic-color-neutral-lightest;
-      border-radius: $unnnic-border-radius-sm;
-    }
+  &--selectable:hover,
+  &__active {
+    background-color: $unnnic-color-neutral-lightest;
+    border-radius: $unnnic-border-radius-sm;
+  }
 
-    &__label{
-      &--md{
-        font-size: $unnnic-font-size-body-gt;
-        line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
-      }
-      &--sm{
-        font-size: $unnnic-font-size-body-md;
-        line-height: $unnnic-font-size-body-md + $unnnic-line-height-medium;
-      }
+  &__label {
+    &--md {
+      font-size: $unnnic-font-size-body-gt;
+      line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
+    }
+    &--sm {
+      font-size: $unnnic-font-size-body-md;
+      line-height: $unnnic-font-size-body-md + $unnnic-line-height-medium;
     }
-
   }
+}
 </style>