@weni/unnnic-system 2.34.1-alpha.3 → 2.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "2.34.1-alpha.3",
+  "version": "2.35.0",
   "type": "commonjs",
   "files": [
     "dist",
@@ -87,4 +87,4 @@
     "vitest": "^1.6.0",
     "vue-eslint-parser": "^9.4.2"
   }
-}
+}

package/src/components/DatePicker/DatePicker.vue

@@ -9,7 +9,7 @@
           <div :class="['header', `header--${size}`]">
             <UnnnicButton
               size="small"
-              :iconCenter="`arrow-${index === 0 ? 'left' : 'right'}-1-1`"
+              :iconCenter="`keyboard_arrow_${index === 0 ? 'left' : 'right'}`"
               :type="size === 'large' ? 'secondary' : 'tertiary'"
               class="button-space"
               :style="{ gridArea: `${index === 0 ? 'left' : 'right'}-button` }"
@@ -72,7 +72,7 @@
           <div :class="['header', `header--${size}`]">
             <UnnnicButton
               size="small"
-              iconCenter="arrow-left-1-1"
+              iconCenter="keyboard_arrow_left"
               :type="size === 'large' ? 'secondary' : 'tertiary'"
               class="button-space"
               :style="{ gridArea: 'left-button' }"
@@ -85,7 +85,7 @@
 
             <UnnnicButton
               size="small"
-              iconCenter="arrow-right-1-1"
+              iconCenter="keyboard_arrow_right"
               :type="size === 'large' ? 'secondary' : 'tertiary'"
               class="button-space"
               :style="{ gridArea: 'right-button' }"
@@ -183,8 +183,14 @@
         <div
           v-for="(option, index) in periodsLocale"
           :key="index"
-          :class="['option', { selected: optionSelected === option.id }]"
-          @click="autoSelect(option.id)"
+          :class="[
+            'option',
+            {
+              selectable: option.id !== 'custom',
+              selected: optionSelected === option.id,
+            },
+          ]"
+          @click="option.id === 'custom' ? null : autoSelect(option.id)"
         >
           {{ option.name }}
         </div>
@@ -203,7 +209,7 @@
           size="small"
           :text="filterText"
           type="secondary"
-          @click="$emit('submit', value)"
+          @click="submit"
         />
       </div>
     </div>
@@ -215,6 +221,7 @@ import {
   months as translationMonths,
   days as translationDays,
   periods as translationPeriods,
+  buttons as translationButtons,
 } from './translations.js';
 
 import UnnnicI18n from '../../mixins/i18n';
@@ -234,6 +241,8 @@ export default {
     minDate: { type: String, default: '' },
     maxDate: { type: String, default: '' },
 
+    equivalentOption: { type: String, default: '' },
+
     type: {
       type: String,
       default: 'day',
@@ -287,7 +296,7 @@ export default {
     },
   },
 
-  emits: ['change', 'submit'],
+  emits: ['change', 'submit', 'update:equivalentOption'],
 
   data() {
     const today = new Date();
@@ -313,6 +322,10 @@ export default {
     };
   },
 
+  mounted() {
+    this.updateOptionSelected();
+  },
+
   computed: {
     openMonths() {
       return [this.addMonth(this.referenceDate, -1), this.referenceDate];
@@ -343,22 +356,58 @@ export default {
     },
 
     clearText() {
-      return this.clearLabel || this.i18n('clean');
+      return this.clearLabel || translationButtons[this.i18nLocale].clear;
     },
     filterText() {
-      return this.actionLabel || this.i18n('filter');
+      return this.actionLabel || translationButtons[this.i18nLocale].filter;
     },
   },
 
   watch: {
-    value({ startDate, endDate }) {
-      this.optionSelected = startDate || endDate ? 'custom' : '';
+    value() {
+      this.updateOptionSelected();
 
       this.$emit('change', this.value);
     },
   },
 
   methods: {
+    submit() {
+      this.$emit('submit', this.value);
+
+      if (this.optionSelected === 'custom') {
+        this.$emit('update:equivalentOption', '');
+      } else {
+        this.$emit(
+          'update:equivalentOption',
+          this.periodsLocale.find(
+            ({ id: periodId }) => periodId === this.optionSelected,
+          )?.name || '',
+        );
+      }
+    },
+
+    updateOptionSelected() {
+      const { startDate, endDate } = this.value;
+
+      function isSameTime(date1, date2) {
+        return new Date(date1).getTime() === new Date(date2).getTime();
+      }
+
+      const period = this.periodsLocale.find(({ id: periodId }) => {
+        const { startDate: periodStartDate, endDate: periodEndDate } =
+          this.getStartAndEndDateByPeriod(periodId);
+
+        return (
+          isSameTime(startDate, periodStartDate) &&
+          isSameTime(endDate, periodEndDate)
+        );
+      });
+
+      this.optionSelected =
+        startDate || endDate ? (period ? period.id : 'custom') : '';
+    },
+
     dateToString(date) {
       return `${date.getMonth() + 1} ${date.getDate()} ${date.getFullYear()}`;
     },
@@ -725,41 +774,53 @@ export default {
       this.optionSelected = '';
     },
 
-    autoSelect(method) {
+    getStartAndEndDateByPeriod(period) {
+      let startDate;
+      let endDate;
+
       const today = new Date();
 
-      const days = method.match(/^last-(\d+)-days$/);
-      const months = method.match(/^last-(\d+)-months$/);
+      const days = period.match(/^last-(\d+)-days$/);
+      const months = period.match(/^last-(\d+)-months$/);
 
       if (days) {
         const howMuch = Number(days[1]);
 
-        this.endDate = this.dateToString(today);
+        endDate = this.dateToString(today);
         today.setDate(today.getDate() - howMuch + 1);
-        this.startDate = this.dateToString(today);
+        startDate = this.dateToString(today);
       } else if (months) {
         const howMuch = Number(months[1]);
 
-        this.endDate = this.dateToString(today);
+        endDate = this.dateToString(today);
         today.setDate(today.getDate() + 1);
         today.setMonth(today.getMonth() - howMuch);
-        this.startDate = this.dateToString(today);
-      } else if (method === 'current-month') {
+        startDate = this.dateToString(today);
+      } else if (period === 'current-month') {
         const referenceDate = new Date();
         today.setDate(1);
-        this.startDate = this.dateToString(today);
+        startDate = this.dateToString(today);
         const referenceDay = referenceDate.getDate();
         today.setDate(referenceDay);
-        this.endDate = this.dateToString(today);
-      } else if (method === 'previous-month') {
+        endDate = this.dateToString(today);
+      } else if (period === 'previous-month') {
         today.setDate(1);
         today.setMonth(today.getMonth() - 1);
-        this.startDate = this.dateToString(today);
+        startDate = this.dateToString(today);
         today.setMonth(today.getMonth() + 1);
         today.setDate(0);
-        this.endDate = this.dateToString(today);
+        endDate = this.dateToString(today);
       }
 
+      return { startDate, endDate };
+    },
+
+    autoSelect(method) {
+      const { startDate, endDate } = this.getStartAndEndDateByPeriod(method);
+
+      this.startDate = startDate;
+      this.endDate = endDate;
+
       if (this.endDate) {
         const secondMonth = this.addMonth(this.referenceDate, 1);
 
@@ -922,9 +983,15 @@ export default {
 
         padding: $unnnic-spacing-stack-xs $unnnic-spacing-inline-sm;
         user-select: none;
-        cursor: pointer;
 
-        &:hover,
+        &.selectable {
+          cursor: pointer;
+
+          &:hover {
+            background-color: $unnnic-color-background-sky;
+          }
+        }
+
         &.selected {
           background-color: $unnnic-color-background-sky;
         }

package/src/components/DatePicker/translations.js

@@ -65,6 +65,23 @@ export const days = {
   es: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
 };
 
+export const buttons = {
+  'pt-br': {
+    clear: 'Limpar',
+    filter: 'Filtrar',
+  },
+  'en-us': {
+    clear: 'Clear',
+    filter: 'Filter',
+  },
+  es: {
+    clear: 'Limpiar',
+    filter: 'Filtrar',
+  },
+};
+
+buttons.en = buttons['en-us'];
+
 export const periods = {
   'pt-br': [
     {

package/src/components/Input/Input.vue

@@ -118,6 +118,9 @@ export default {
       return !!this.$slots.label;
     },
   },
+  methods: {
+    fullySanitize,
+  },
   watch: {
     val() {
       this.$emit('update:modelValue', fullySanitize(this.val));
@@ -129,9 +132,6 @@ export default {
   mounted() {
     this.val = this.modelValue;
   },
-  methods: {
-    fullySanitize,
-  },
 };
 </script>
 

package/src/components/InputDatePicker/InputDatePicker.vue

@@ -10,7 +10,7 @@
       :iconRight="iconPosition === 'right' && 'calendar_month'"
       hasCloudyColor
       readonly
-      :modelValue="filterText"
+      :modelValue="overwrittenValue || filterText"
       @focus="showCalendarFilter = true"
     />
 
@@ -31,6 +31,7 @@
         :minDate="minDate"
         :maxDate="maxDate"
         :disableClear="disableClear"
+        v-model:equivalentOption="overwrittenValue"
         @change="emitSelectDate"
         @submit="changeDate"
       />
@@ -139,6 +140,7 @@ export default {
   data() {
     return {
       showCalendarFilter: false,
+      overwrittenValue: '',
     };
   },
 

package/src/components/index.js

@@ -86,7 +86,6 @@ import ModalNext from './ModalNext/ModalNext.vue';
 import ModalDialog from './ModalDialog/ModalDialog.vue';
 import Tour from './Tour/Tour.vue';
 import Navigator from './Navigator/index.vue';
-import SelectTime from './SelectTime/index.vue';
 
 export const components = {
   unnnicFormElement: formElement,
@@ -178,7 +177,6 @@ export const components = {
   unnnicTableNext: TableNext,
   unnnicTour: Tour,
   unnnicNavigator: Navigator,
-  unnnicSelectTime: SelectTime,
 };
 
 export const unnnicFontSize = fontSize;
@@ -271,4 +269,3 @@ export const unnnicDrawer = Drawer;
 export const unnnicTableNext = TableNext;
 export const unnnicTour = Tour;
 export const unnnicNavigator = Navigator;
-export const unnnicSelectTime = SelectTime;

package/src/components/SelectTime/index.vue

@@ -1,219 +0,0 @@
-<template>
-  <section
-    v-onClickOutside="() => (active = false)"
-    class="unnnic-select-time"
-  >
-    <DropdownSkeleton
-      ref="dropdown-skeleton"
-      type="manual"
-      :modelValue="active"
-      position="bottom"
-    >
-      <TextInput
-        :modelValue="modelValue"
-        :iconRight="active ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
-        nativeType="time"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        class="unnnic-select-time__input"
-        @focus="active = true"
-        @blur="handleBlur"
-        @update:model-value="handleInput"
-        @keydown.enter="handleBlur({ close: true })"
-      />
-
-      <template #inside="props">
-        <section
-          :style="{ width: props.width }"
-          class="unnnic-select-time__options"
-        >
-          <section
-            v-for="hour in options"
-            :ref="`hour-${hour.value}`"
-            :key="hour.value"
-            :class="{
-              'unnnic-select-time__options__item': true,
-              'unnnic-select-time__options__item--selected':
-                modelValue === hour.value,
-            }"
-            @click="handleClickTimeOption(hour.value)"
-          >
-            {{ hour.label }}
-          </section>
-        </section>
-      </template>
-    </DropdownSkeleton>
-  </section>
-</template>
-
-<script>
-import { vOnClickOutside } from '@vueuse/components';
-
-import DropdownSkeleton from '../Dropdown/DropdownSkeleton.vue';
-import TextInput from '../Input/TextInput.vue';
-
-import { hoursTimesOptions } from '../../utils/hours';
-
-export default {
-  name: 'SelectTime',
-  components: {
-    DropdownSkeleton,
-    TextInput,
-  },
-
-  directives: {
-    onClickOutside: vOnClickOutside,
-  },
-  props: {
-    modelValue: {
-      type: String,
-      default: '',
-    },
-    options: {
-      type: Array,
-      default: () => hoursTimesOptions,
-    },
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      active: false,
-    };
-  },
-  methods: {
-    handleInput(text) {
-      const { value } =
-        this.options.find((hour) => hour.value.includes(text)) || {};
-
-      if (value) {
-        const hourRef = this.$refs[`hour-${value}`][0];
-        if (hourRef) {
-          hourRef.scrollIntoView({ behavior: 'smooth' });
-        }
-      }
-
-      this.$emit('update:modelValue', text);
-    },
-
-    handleBlur({ close = false } = {}) {
-      if (this.modelValue) {
-        const cleanValue = this.modelValue.replace(/[^0-9]/g, '');
-
-        if (cleanValue.length > 0) {
-          let formattedTime = '';
-
-          if (cleanValue.length === 4) {
-            // Format: 0101 -> 01:01, 1310 -> 13:10
-            const hours = cleanValue.substring(0, 2);
-            const minutes = cleanValue.substring(2, 4);
-
-            if (parseInt(hours) <= 23 && parseInt(minutes) <= 59) {
-              formattedTime = `${hours}:${minutes}`;
-            }
-          } else if (cleanValue.length === 3) {
-            // Format: 123 -> 01:23
-            const hours = `0${cleanValue.substring(0, 1)}`;
-            const minutes = cleanValue.substring(1, 3);
-
-            if (parseInt(minutes) <= 59) {
-              formattedTime = `${hours}:${minutes}`;
-            }
-          } else if (cleanValue.length === 2) {
-            // Format: 12 -> 12:00
-            const hours = cleanValue;
-            formattedTime = `${hours}:00`;
-          } else if (cleanValue.length === 1) {
-            // Format: 1 -> 01:00
-            const hours = `0${cleanValue}`;
-            formattedTime = `${hours}:00`;
-          }
-
-          this.$emit('update:modelValue', formattedTime);
-        }
-      }
-
-      if (close) {
-        this.active = false;
-      }
-    },
-    handleClickTimeOption(value) {
-      this.$emit('update:modelValue', value);
-      this.active = false;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-:deep(.unnnic-select-time__input) {
-  &::-webkit-calendar-picker-indicator {
-    background: none;
-    display: none;
-  }
-}
-
-.unnnic-select-time {
-  &__options {
-    @function calc-max-height($value) {
-      @return ($value * $unnnic-font-size) - ($unnnic-spacing-xs * 2);
-    }
-    margin-top: $unnnic-spacing-nano;
-    border-radius: $unnnic-border-radius-sm;
-    box-shadow: $unnnic-shadow-level-near;
-    background-color: $unnnic-color-background-snow;
-    cursor: pointer;
-    display: grid;
-    max-height: calc-max-height(9.25);
-    overflow-y: auto;
-
-    &__item {
-      margin: 0px $unnnic-spacing-nano;
-      background-color: $unnnic-color-background-snow;
-      padding: $unnnic-spacing-stack-nano $unnnic-inline-xs;
-      max-width: 100%;
-      font-family: $unnnic-font-family-secondary;
-      color: $unnnic-color-neutral-darkest;
-      font-weight: $unnnic-font-weight-regular;
-
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      -webkit-line-clamp: 1;
-
-      &:hover {
-        border-radius: $unnnic-border-radius-sm;
-        background-color: $unnnic-color-neutral-light;
-      }
-
-      &--selected {
-        color: $unnnic-color-weni-600;
-        font-weight: $unnnic-font-weight-bold;
-      }
-    }
-
-    &::-webkit-scrollbar {
-      width: $unnnic-spacing-inline-nano;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: $unnnic-color-neutral-cleanest;
-      border-radius: $unnnic-border-radius-pill;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: $unnnic-color-neutral-soft;
-      border-radius: $unnnic-border-radius-pill;
-    }
-  }
-}
-</style>

package/src/stories/SelectTime.stories.js

@@ -1,25 +0,0 @@
-import unnnicSelectTime from '../components/SelectTime/index.vue';
-
-export default {
-  title: 'Select/SelectTime',
-  component: unnnicSelectTime,
-  argTypes: {},
-  render: (args) => ({
-    components: {
-      unnnicSelectTime,
-    },
-    setup() {
-      return { args };
-    },
-    data() {
-      return {
-        exampleValue: '',
-      };
-    },
-    template: `
-      <unnnicSelectTime v-bind="args" v-model="exampleValue" />
-    `,
-  }),
-};
-
-export const Default = {};

package/src/utils/hours.js

@@ -1,100 +0,0 @@
-const hoursTimesOptions = [
-  {
-    label: '00:00',
-    value: '00:00',
-  },
-  {
-    label: '01:00',
-    value: '01:00',
-  },
-  {
-    label: '02:00',
-    value: '02:00',
-  },
-  {
-    label: '03:00',
-    value: '03:00',
-  },
-  {
-    label: '04:00',
-    value: '04:00',
-  },
-  {
-    label: '05:00',
-    value: '05:00',
-  },
-  {
-    label: '06:00',
-    value: '06:00',
-  },
-  {
-    label: '07:00',
-    value: '07:00',
-  },
-  {
-    label: '08:00',
-    value: '08:00',
-  },
-  {
-    label: '09:00',
-    value: '09:00',
-  },
-  {
-    label: '10:00',
-    value: '10:00',
-  },
-  {
-    label: '11:00',
-    value: '11:00',
-  },
-  {
-    label: '12:00',
-    value: '12:00',
-  },
-  {
-    label: '13:00',
-    value: '13:00',
-  },
-  {
-    label: '14:00',
-    value: '14:00',
-  },
-  {
-    label: '15:00',
-    value: '15:00',
-  },
-  {
-    label: '16:00',
-    value: '16:00',
-  },
-  {
-    label: '17:00',
-    value: '17:00',
-  },
-  {
-    label: '18:00',
-    value: '18:00',
-  },
-  {
-    label: '19:00',
-    value: '19:00',
-  },
-  {
-    label: '20:00',
-    value: '20:00',
-  },
-  {
-    label: '21:00',
-    value: '21:00',
-  },
-  {
-    label: '22:00',
-    value: '22:00',
-  },
-  {
-    label: '23:00',
-    value: '23:00',
-  },
-];
-
-export { hoursTimesOptions };