@weni/unnnic-system 2.0.17 → 2.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "2.0.17",
+  "version": "2.0.18",
   "type": "commonjs",
   "files": [
     "dist",

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,9 +204,19 @@
 </template>
 
 <script>
+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,
   },
@@ -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/stories/DatePicker.stories.js

@@ -27,50 +27,7 @@ export default {
 export const Default = {
   args: {
     size: 'large',
-    clearLabel: 'Limpar',
-    actionLabel: 'Filtrar',
-    months: [
-      'Janeiro',
-      'Fevereiro',
-      'Março',
-      'Abril',
-      'Maio',
-      'Junho',
-      'Julho',
-      'Agosto',
-      'Setembro',
-      'Outubro',
-      'Novembro',
-      'Dezembro',
-    ],
-    days: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
     initialStartDate: '12-01-2021',
     initialEndDate: '12-01-2021',
-    options: [
-      {
-        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',
-      },
-    ],
   },
 };

package/src/utils/plugins/i18n.js

@@ -15,7 +15,7 @@ const languages = {
 const messages = Object.assign(languages);
 
 export default createI18n({
-  locale: 'pt-br',
+  locale: 'es',
   fallbackLocale: 'en',
   messages,
 });