@weni/unnnic-system 2.0.16 → 2.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "2.0.16",
+  "version": "2.0.18",
   "type": "commonjs",
   "files": [
     "dist",
@@ -50,6 +50,7 @@
     "vue-the-mask": "^0.11.1"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^8.0.10",
     "@storybook/addon-essentials": "^8.0.10",
     "@storybook/addon-interactions": "^8.0.10",
     "@storybook/addon-links": "^8.0.10",
@@ -70,7 +71,7 @@
     "react-dom": "^18.2.0",
     "sass": "^1.62.1",
     "storybook": "^8.0.10",
-    "vite": "^4.3.5",
+    "vite": "4.3.5",
     "vue-eslint-parser": "^9.4.2"
   }
 }

package/src/components/AudioRecorder/AudioHandler.vue

@@ -37,6 +37,8 @@ import UnnnicIcon from '../Icon.vue';
 import UnnnicToolTip from '../ToolTip/ToolTip.vue';
 
 export default {
+  emits: ['save'],
+
   components: {
     UnnnicIcon,
     UnnnicToolTip,

package/src/components/AudioRecorder/AudioPlayer.vue

@@ -47,6 +47,8 @@
 import UnnnicIcon from '../Icon.vue';
 
 export default {
+  emits: ['play', 'pause', 'progress-bar-update', 'failed-click'],
+
   components: {
     UnnnicIcon,
   },

package/src/components/AudioRecorder/AudioRecorder.vue

@@ -1,6 +1,6 @@
 <template>
   <section
-    v-if="value || isRecording || src"
+    v-if="modelValue || isRecording || src"
     class="unnnic-audio-recorder"
   >
     <UnnnicToolTip
@@ -74,6 +74,8 @@ const normalizeData = (filteredData) => {
 export default {
   name: 'AudioRecorder',
 
+  emits: ['update:model-value', 'status', 'failed-click'],
+
   components: {
     AudioHandler,
     AudioPlayer,
@@ -82,7 +84,7 @@ export default {
   },
 
   props: {
-    value: {
+    modelValue: {
       type: HTMLAudioElement,
     },
 
@@ -278,7 +280,7 @@ export default {
 
       this.audio = null;
 
-      this.$emit('input', null);
+      this.$emit('update:model-value', null);
 
       this.status = 'idle';
     },
@@ -299,7 +301,7 @@ export default {
         this.recorder.stop();
       }
 
-      this.$emit('input', this.audio);
+      this.$emit('update:model-value', this.audio);
 
       this.stopMockMilliseconds();
     },

package/src/components/Card/CardData.vue

@@ -38,10 +38,10 @@
 </template>
 
 <script>
-import unnnicIcon from '../Icon.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
-  components: { unnnicIcon },
+  components: { UnnnicIcon },
 
   props: {
     title: {

package/src/components/CardProject/CardProject.vue

@@ -36,16 +36,16 @@
 
 <script>
 import CardStatusesContainer from '../Card/CardStatusesContainer.vue';
-import unnnicIcon from '../Icon.vue';
-import unnnicDropdown from '../Dropdown/Dropdown.vue';
-import unnnicTag from '../Tag/Tag.vue';
+import UnnnicIcon from '../Icon.vue';
+import UnnnicDropdown from '../Dropdown/Dropdown.vue';
+import UnnnicTag from '../Tag/Tag.vue';
 
 export default {
   components: {
     CardStatusesContainer,
-    unnnicIcon,
-    unnnicDropdown,
-    unnnicTag,
+    UnnnicIcon,
+    UnnnicDropdown,
+    UnnnicTag,
   },
 
   props: {

package/src/components/ChartRainbow/ChartRainbow.vue

@@ -44,7 +44,7 @@
 
     <div class="content">
       <div class="percentage">
-        <span class="number">{{ value }} </span>
+        <span class="number">{{ modelValue }} </span>
         <span class="symbol">%</span>
       </div>
 
@@ -63,7 +63,7 @@ export default {
   components: {},
 
   props: {
-    value: {
+    modelValue: {
       type: Number,
       default: 0,
     },
@@ -74,7 +74,7 @@ export default {
   },
 
   watch: {
-    value() {
+    modelValue() {
       this.updateChartSvg();
     },
   },
@@ -138,7 +138,7 @@ export default {
           139.44,
           152.72,
           -85,
-          -85 + (this.value / 100) * 170,
+          -85 + (this.modelValue / 100) * 170,
         ),
       );
     },

package/src/components/ChatsMessage/ChatsMessage.vue

@@ -61,13 +61,13 @@
         v-else-if="isMedia"
         class="unnnic-chats-message__media__container"
         :class="{ failed: failedToSendMedia }"
-        @click="$emit('click-image')"
+        @click="onClickMedia"
       >
         <slot />
         <UnnnicChatsMessageStatusBackdrop
           v-if="(sendingMedia || failedToSendMedia) && (isImage || isVideo)"
           :status="status"
-          @click="status === 'failed' ? $emit('click') : () => {}"
+          @click.stop="status === 'failed' ? $emit('click') : () => {}"
         />
       </div>
       <UnnnicIconLoading
@@ -93,6 +93,7 @@ import UnnnicIcon from '../Icon.vue';
 
 export default {
   name: 'UnnnicChatsMessage',
+  emits: ['click', 'click-image'],
   components: {
     UnnnicChatsMessageText,
     UnnnicChatsMessageStatusBackdrop,
@@ -179,6 +180,14 @@ export default {
       return (this.isImage || this.isVideo) && this.status === 'failed';
     },
   },
+
+  methods: {
+    onClickMedia() {
+      if (this.isImage || this.isVideo) {
+        this.$emit('click-image');
+      }
+    },
+  },
 };
 </script>
 

package/src/components/ChatsMessage/ChatsMessageStatusBackdrop.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="unnnic-chats-message-status-backdrop__container"
-    @click="$emit('click')"
-  >
+  <div class="unnnic-chats-message-status-backdrop__container">
     <div class="unnnic-chats-message-status-backdrop">
       <UnnnicIconLoading
         v-if="status === 'sending'"

package/src/components/DateFilter/DateFilter.vue

@@ -15,11 +15,11 @@
 
 <script>
 import moment from 'moment';
-import unnnicInput from '../Input/Input.vue';
+import UnnnicInput from '../Input/Input.vue';
 
 export default {
   name: 'unnnic-date-filter',
-  components: { unnnicInput },
+  components: { UnnnicInput },
   props: {
     size: {
       type: String,

package/src/components/DatePicker/DatePicker.vue

@@ -19,14 +19,14 @@
             />
 
             <div :class="['label', `label--${size}`]">
-              {{ months[getMonth(openMonth)] }}
+              {{ monthsLocale[getMonth(openMonth)] }}
               {{ getFullYear(openMonth) }}
             </div>
           </div>
 
           <div :class="['days', `days--${size}`]">
             <div
-              v-for="(day, index) in days"
+              v-for="(day, index) in daysLocale"
               :key="index"
               class="name"
             >
@@ -104,7 +104,7 @@
                 date.properties.includes('inside month') && selectDate(date)
               "
             >
-              {{ months[getMonth(date)].substr(0, 3) }}
+              {{ monthsLocale[getMonth(date)].substr(0, 3) }}
             </div>
           </div>
         </div>
@@ -176,7 +176,7 @@
       <div class="options">
         <div
           :class="['option', { selected: optionSelected === option.id }]"
-          v-for="(option, index) in options"
+          v-for="(option, index) in periodsLocale"
           :key="index"
           @click="autoSelect(option.id)"
         >
@@ -187,14 +187,14 @@
       <div class="actions">
         <UnnnicButton
           size="small"
-          :text="clearLabel"
+          :text="clearText"
           type="tertiary"
           @click="clear"
         />
 
         <UnnnicButton
           size="small"
-          :text="actionLabel"
+          :text="filterText"
           type="secondary"
           @click="$emit('submit', value)"
         />
@@ -204,11 +204,21 @@
 </template>
 
 <script>
-import unnnicButton from '../Button/Button.vue';
+import {
+  months as translationMonths,
+  days as translationDays,
+  periods as translationPeriods,
+} from './translations.js';
+
+import UnnnicI18n from '../../mixins/i18n';
+
+import UnnnicButton from '../Button/Button.vue';
 
 export default {
+  mixins: [UnnnicI18n],
+
   components: {
-    unnnicButton,
+    UnnnicButton,
   },
 
   props: {
@@ -241,22 +251,7 @@ export default {
 
     months: {
       type: Array,
-      default() {
-        return [
-          'Janeiro',
-          'Fevereiro',
-          'Março',
-          'Abril',
-          'Maio',
-          'Junho',
-          'Julho',
-          'Agosto',
-          'Setembro',
-          'Outubro',
-          'Novembro',
-          'Dezembro',
-        ];
-      },
+      default: () => [],
       validator(months) {
         return months.length === 12;
       },
@@ -264,9 +259,7 @@ export default {
 
     days: {
       type: Array,
-      default() {
-        return ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'];
-      },
+      default: () => [],
       validator(days) {
         return days.length === 7;
       },
@@ -274,34 +267,7 @@ 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',
-          },
-        ];
-      },
+      default: () => [],
     },
   },
 
@@ -314,6 +280,18 @@ export default {
       startDate: (this.initialStartDate || '').replace(/-/g, ' '),
       endDate: (this.initialEndDate || '').replace(/-/g, ' '),
       optionSelected: '',
+      defaultTranslations: {
+        clean: {
+          'pt-br': 'Limpar',
+          en: 'Clean',
+          es: 'Limpiar',
+        },
+        filter: {
+          'pt-br': 'Filtrar',
+          en: 'Filter',
+          es: 'Filtrar',
+        },
+      },
     };
   },
 
@@ -328,6 +306,26 @@ export default {
         endDate: this.endDate.replaceAll(' ', '-'),
       };
     },
+
+    monthsLocale() {
+      const { months } = this;
+      return months.length ? months : translationMonths[this.$i18n.locale];
+    },
+    daysLocale() {
+      const { days } = this;
+      return days.length ? days : translationDays[this.$i18n.locale];
+    },
+    periodsLocale() {
+      const { options } = this;
+      return options.length ? options : translationPeriods[this.$i18n.locale];
+    },
+
+    clearText() {
+      return this.clearLabel || this.i18n('clean');
+    },
+    filterText() {
+      return this.actionLabel || this.i18n('filter');
+    },
   },
 
   watch: {

package/src/components/DatePicker/translations.js

@@ -0,0 +1,131 @@
+export const months = {
+  'pt-br': [
+    'Janeiro',
+    'Fevereiro',
+    'Março',
+    'Abril',
+    'Maio',
+    'Junho',
+    'Julho',
+    'Agosto',
+    'Setembro',
+    'Outubro',
+    'Novembro',
+    'Dezembro',
+  ],
+  en: [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ],
+  es: [
+    'Enero',
+    'Febrero',
+    'Marzo',
+    'Abril',
+    'Mayo',
+    'Junio',
+    'Julio',
+    'Agosto',
+    'Septiembre',
+    'Octubre',
+    'Noviembre',
+    'Diciembre',
+  ],
+};
+
+export const days = {
+  'pt-br': ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
+  en: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+  es: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
+};
+
+export const periods = {
+  'pt-br': [
+    {
+      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',
+    },
+  ],
+  en: [
+    {
+      name: 'Last 7 days',
+      id: 'last-7-days',
+    },
+    {
+      name: 'Last 14 days',
+      id: 'last-14-days',
+    },
+    {
+      name: 'Last 30 days',
+      id: 'last-30-days',
+    },
+    {
+      name: 'Last 12 months',
+      id: 'last-12-months',
+    },
+    {
+      name: 'Current month',
+      id: 'current-month',
+    },
+    {
+      name: 'Custom',
+      id: 'custom',
+    },
+  ],
+  es: [
+    {
+      name: 'Últimos 7 días',
+      id: 'last-7-days',
+    },
+    {
+      name: 'Últimos 14 días',
+      id: 'last-14-days',
+    },
+    {
+      name: 'Últimos 30 días',
+      id: 'last-30-days',
+    },
+    {
+      name: 'Últimos 12 meses',
+      id: 'last-12-months',
+    },
+    {
+      name: 'Mes actual',
+      id: 'current-month',
+    },
+    {
+      name: 'Personalizar',
+      id: 'custom',
+    },
+  ],
+};

package/src/components/Dropdown/LanguageSelect.vue

@@ -106,18 +106,18 @@
 </template>
 <script>
 import { vOnClickOutside } from '@vueuse/components';
-import unnnicFlag from '../Flag.vue';
+import UnnnicFlag from '../Flag.vue';
 import UnnnicIcon from '../Icon.vue';
 import { unnnicFontSize } from '../config';
 
 export default {
   name: 'LanguageSelect',
   components: {
-    unnnicFlag,
+    UnnnicFlag,
     UnnnicIcon,
   },
   props: {
-    value: {
+    modelValue: {
       type: String,
       default: '',
     },
@@ -149,16 +149,16 @@ export default {
   data() {
     return {
       open: false,
-      val: this.value,
+      val: this.modelValue,
       unnnicFontSize,
     };
   },
   watch: {
     val() {
-      this.$emit('input', this.val);
+      this.$emit('update:model-value', this.val);
     },
-    value() {
-      this.val = this.value;
+    modelValue() {
+      this.val = this.modelValue;
     },
   },
   computed: {

package/src/components/ImportCard/ImportCard.vue

@@ -64,12 +64,12 @@
 </template>
 
 <script>
-import unnnicButton from '../Button/Button.vue';
+import UnnnicButton from '../Button/Button.vue';
 
 export default {
   name: 'ImportCard',
   components: {
-    unnnicButton,
+    UnnnicButton,
   },
   props: {
     title: {

package/src/components/ProgressBar/ProgressBar.vue

@@ -22,7 +22,7 @@
         <div class="progress-container">
           <div
             class="bar"
-            :style="{ width: `${value}%` }"
+            :style="{ width: `${modelValue}%` }"
           >
             <div
               v-if="type === 'secondary' && !subtitle"
@@ -75,7 +75,7 @@ export default {
   },
 
   props: {
-    value: {
+    modelValue: {
       type: Number,
     },
 
@@ -103,7 +103,7 @@ export default {
 
   computed: {
     percentage() {
-      return Math.floor(this.value);
+      return Math.floor(this.modelValue);
     },
   },
 };

package/src/components/Sidebar/SidebarPrimary.vue

@@ -37,7 +37,7 @@
           >
             <ToolTip
               :enabled="!expanded"
-              :text="option.label"
+              :text="`${option.label} ${option.tag || ''}`.trim()"
               side="right"
               @mouseenter="hover($event, option.id)"
               @mouseleave="mouseout"
@@ -69,6 +69,7 @@
                 />
 
                 <span class="label">{{ option.label }}</span>
+                <span v-if="option.tag" class="tag">{{ option.tag }}</span>
                 <span
                   :class="option.notify && !expanded ? 'notify' : ''"
                   v-if="option.notify"
@@ -132,14 +133,14 @@
 
 <script>
 import ToolTip from '../ToolTip/ToolTip.vue';
-import languageSelect from '../Dropdown/LanguageSelect.vue';
+import LanguageSelect from '../Dropdown/LanguageSelect.vue';
 import UnnnicIcon from '../Icon.vue';
 
 export default {
   components: {
     ToolTip,
     UnnnicIcon,
-    languageSelect,
+    LanguageSelect,
   },
 
   props: {
@@ -351,15 +352,24 @@ $transition-time: 0.4s;
         font-size: $unnnic-font-size-body-gt;
         line-height: ($unnnic-font-size-body-gt + $unnnic-line-height-md);
         float: left;
-        flex: 1;
         white-space: nowrap;
-        width: 50px;
+        width: min-content;
         overflow: hidden;
         text-overflow: ellipsis;
         user-select: none;
         margin-left: $unnnic-spacing-xs;
       }
 
+      .tag {
+        font-family: $unnnic-font-family-secondary;
+        font-size: $unnnic-font-size-body-md;
+        font-weight: $unnnic-font-weight-regular;
+        font-style: italic;
+        margin-left: $unnnic-spacing-nano;
+        color: $unnnic-color-weni-600;
+
+      }
+
       &:hover:not(.disabled) {
         background-color: rgba(
           $unnnic-color-brand-weni,