@weni/unnnic-system 3.2.7-alpha.0 → 3.2.8

package/src/components/Chip/__tests__/Chip.spec.js

@@ -37,10 +37,10 @@ describe('Chip', () => {
   describe('Selection state', () => {
     it('should apply selected styling when isSelected is true', async () => {
       await wrapper.setProps({ isSelected: true });
-      
+
       expect(wrapper.classes()).toContain('chip--is-selected');
       expect(wrapper.classes()).not.toContain('chip--border');
-      
+
       const textElement = wrapper.find('.chip__text');
       expect(textElement.classes()).toContain('chip__text--is-selected');
     });
@@ -49,7 +49,7 @@ describe('Chip', () => {
   describe('Count functionality', () => {
     it('should render count when provided', async () => {
       await wrapper.setProps({ count: 5 });
-      
+
       const countElement = wrapper.find('.chip__count');
       expect(countElement.exists()).toBe(true);
       expect(countElement.text()).toBe('5');
@@ -57,14 +57,14 @@ describe('Chip', () => {
 
     it('should not render count when not provided or zero', async () => {
       expect(wrapper.find('.chip__count').exists()).toBe(false);
-      
+
       await wrapper.setProps({ count: 0 });
       expect(wrapper.find('.chip__count').exists()).toBe(false);
     });
 
     it('should apply selected styling to count when chip is selected', async () => {
       await wrapper.setProps({ count: 3, isSelected: true });
-      
+
       const countElement = wrapper.find('.chip__count');
       expect(countElement.classes()).toContain('chip__count--is-selected');
     });
@@ -78,7 +78,7 @@ describe('Chip', () => {
 
     it('should render correct icons for multiple type', async () => {
       await wrapper.setProps({ type: 'multiple', isSelected: false });
-      
+
       let icon = wrapper.findComponent({ name: 'UnnnicIcon' });
       expect(icon.exists()).toBe(true);
       expect(icon.props('icon')).toBe('add');
@@ -86,7 +86,7 @@ describe('Chip', () => {
       expect(icon.props('size')).toBe('sm');
 
       await wrapper.setProps({ isSelected: true });
-      
+
       icon = wrapper.findComponent({ name: 'UnnnicIcon' });
       expect(icon.props('icon')).toBe('close');
       expect(icon.props('scheme')).toBe('teal-600');
@@ -95,21 +95,21 @@ describe('Chip', () => {
 
   describe('Combined functionality', () => {
     it('should render all elements correctly when combined', async () => {
-      await wrapper.setProps({ 
+      await wrapper.setProps({
         text: 'Complete Chip',
         count: 42,
         type: 'multiple',
-        isSelected: true
+        isSelected: true,
       });
 
       expect(wrapper.text()).toContain('Complete Chip');
       expect(wrapper.classes()).toContain('chip--is-selected');
-      
+
       const countElement = wrapper.find('.chip__count');
       expect(countElement.exists()).toBe(true);
       expect(countElement.text()).toBe('42');
       expect(countElement.classes()).toContain('chip__count--is-selected');
-      
+
       const icon = wrapper.findComponent({ name: 'UnnnicIcon' });
       expect(icon.exists()).toBe(true);
       expect(icon.props('icon')).toBe('close');
@@ -119,16 +119,16 @@ describe('Chip', () => {
   describe('Click functionality', () => {
     it('should emit click event when clicked', async () => {
       await wrapper.setProps({ isClickable: true });
-      
+
       await wrapper.trigger('click');
-      
+
       expect(wrapper.emitted().click).toBeTruthy();
       expect(wrapper.emitted().click).toHaveLength(1);
     });
 
     it('should apply clickable styling when isClickable is true', async () => {
       await wrapper.setProps({ isClickable: true });
-      
+
       expect(wrapper.classes()).toContain('chip--is-clickable');
     });
 
@@ -138,7 +138,7 @@ describe('Chip', () => {
 
     it('should emit click event even when not marked as clickable', async () => {
       await wrapper.trigger('click');
-      
+
       expect(wrapper.emitted().click).toBeTruthy();
       expect(wrapper.emitted().click).toHaveLength(1);
     });
@@ -147,7 +147,7 @@ describe('Chip', () => {
   describe('Edge cases', () => {
     it('should handle negative count', async () => {
       await wrapper.setProps({ count: -5 });
-      
+
       const countElement = wrapper.find('.chip__count');
       expect(countElement.exists()).toBe(true);
       expect(countElement.text()).toBe('-5');
@@ -155,10 +155,10 @@ describe('Chip', () => {
 
     it('should handle empty text', async () => {
       await wrapper.setProps({ text: '' });
-      
+
       const textElement = wrapper.find('.chip__text');
       expect(textElement.exists()).toBe(true);
       expect(textElement.text()).toBe('');
     });
   });
-});
+});

package/src/components/DataTable/index.vue

@@ -69,7 +69,7 @@
           'unnnic-data-table__body-row--loading',
         ]"
       >
-        <td 
+        <td
           :class="[
             'unnnic-data-table__body-cell',
             `unnnic-data-table__body-cell--${size}`,
@@ -132,7 +132,7 @@
           v-if="slots['without-results']"
           :class="[
             'unnnic-data-table__body-cell',
-            `unnnic-data-table__body-cell--${size}`
+            `unnnic-data-table__body-cell--${size}`,
           ]"
         >
           <slot name="without-results" />
@@ -212,8 +212,6 @@ const emit = defineEmits<{
   'update:page': [page: number];
 }>();
 
-
-
 const props = withDefaults(defineProps<Props>(), {
   isLoading: false,
   size: 'md',
@@ -292,7 +290,12 @@ const handleClickHeader = (header: DataTableHeader) => {
       ? 'asc'
       : nextSortOrderMapper[sort.value.order];
 
-  handleSort(nextSort === '' ? { header: '', itemKey: '', order: '' } : { header: header.title, itemKey: header.itemKey, order: nextSort }, nextSort);
+  handleSort(
+    nextSort === ''
+      ? { header: '', itemKey: '', order: '' }
+      : { header: header.title, itemKey: header.itemKey, order: nextSort },
+    nextSort,
+  );
 };
 
 const handleClickRow = (item: DataTableItem) => {

package/src/components/DatePicker/DatePicker.vue

@@ -50,8 +50,8 @@
               }"
               @click="
                 date.properties.includes('inside month') &&
-                  !date.properties.includes('out of range') &&
-                  selectDate(date)
+                !date.properties.includes('out of range') &&
+                selectDate(date)
               "
             >
               {{ getDate(date) }}
@@ -183,7 +183,13 @@
         <div
           v-for="(option, index) in periodsLocale"
           :key="index"
-          :class="['option', { selectable: option.id !== 'custom', selected: optionSelected === option.id }]"
+          :class="[
+            'option',
+            {
+              selectable: option.id !== 'custom',
+              selected: optionSelected === option.id,
+            },
+          ]"
           @click="option.id === 'custom' ? null : autoSelect(option.id)"
         >
           {{ option.name }}
@@ -316,10 +322,6 @@ export default {
     };
   },
 
-  mounted() {
-    this.updateOptionSelected();
-  },
-
   computed: {
     openMonths() {
       return [this.addMonth(this.referenceDate, -1), this.referenceDate];
@@ -365,6 +367,10 @@ export default {
     },
   },
 
+  mounted() {
+    this.updateOptionSelected();
+  },
+
   methods: {
     submit() {
       this.$emit('submit', this.value);
@@ -372,7 +378,12 @@ export default {
       if (this.optionSelected === 'custom') {
         this.$emit('update:equivalentOption', '');
       } else {
-        this.$emit('update:equivalentOption', this.periodsLocale.find(({ id: periodId }) => periodId === this.optionSelected)?.name || '');
+        this.$emit(
+          'update:equivalentOption',
+          this.periodsLocale.find(
+            ({ id: periodId }) => periodId === this.optionSelected,
+          )?.name || '',
+        );
       }
     },
 
@@ -382,19 +393,21 @@ export default {
       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);
+        const { startDate: periodStartDate, endDate: periodEndDate } =
+          this.getStartAndEndDateByPeriod(periodId);
 
-        return isSameTime(startDate, periodStartDate) && isSameTime(endDate, periodEndDate);
+        return (
+          isSameTime(startDate, periodStartDate) &&
+          isSameTime(endDate, periodEndDate)
+        );
       });
 
-      this.optionSelected = startDate || endDate ? period ? period.id : 'custom' : '';
+      this.optionSelected =
+        startDate || endDate ? (period ? period.id : 'custom') : '';
     },
-    
+
     dateToString(date) {
       return `${date.getMonth() + 1} ${date.getDate()} ${date.getFullYear()}`;
     },

package/src/components/Drawer/Drawer.vue

@@ -24,7 +24,10 @@
       >
         <header class="unnnic-drawer__header">
           <section class="unnnic-drawer__title-container">
-            <slot v-if="$slots.title" name="title"/>
+            <slot
+              v-if="$slots.title"
+              name="title"
+            />
 
             <template v-else>
               <h1

package/src/components/Drawer/__tests__/Drawer.spec.js

@@ -96,8 +96,12 @@ describe('Drawer.vue', () => {
         });
 
         expect(title().exists()).toBe(false);
-        expect(wrapper.find('[data-testid="custom-title"]').exists()).toBe(true);
-        expect(wrapper.find('[data-testid="custom-title"]').text()).toBe('Custom Title Content');
+        expect(wrapper.find('[data-testid="custom-title"]').exists()).toBe(
+          true,
+        );
+        expect(wrapper.find('[data-testid="custom-title"]').text()).toBe(
+          'Custom Title Content',
+        );
       });
 
       it('should prioritize title slot over title prop', () => {
@@ -112,7 +116,9 @@ describe('Drawer.vue', () => {
         });
 
         expect(title().exists()).toBe(false);
-        expect(wrapper.find('[data-testid="custom-title"]').text()).toBe('Slot Title');
+        expect(wrapper.find('[data-testid="custom-title"]').text()).toBe(
+          'Slot Title',
+        );
       });
     });
   });

package/src/components/DropArea/DropArea.vue

@@ -116,7 +116,7 @@ const props = defineProps({
   disabled: {
     type: Boolean,
     default: false,
-  }
+  },
 });
 
 const emit = defineEmits([

package/src/components/Dropdown/__tests__/Dropdown.spec.js

@@ -100,10 +100,10 @@ describe('Dropdown.vue', () => {
     it('should not toggle dropdown on trigger click when forceOpen is true', async () => {
       await wrapper.setProps({ forceOpen: true, open: false });
       const initialActiveState = wrapper.vm.active;
-      
+
       const trigger = wrapper.find('[data-testid="dropdown-trigger"]');
       await trigger.trigger('click');
-      
+
       expect(wrapper.vm.active).toBe(initialActiveState);
       expect(wrapper.emitted('update:open')).toBeFalsy();
     });
@@ -113,41 +113,41 @@ describe('Dropdown.vue', () => {
       expect(wrapper.vm.active).toBe(true);
 
       await wrapper.vm.onClickOutside();
-      
+
       expect(wrapper.vm.active).toBe(true);
     });
 
     it('should not emit update:open when forceOpen is true and useOpenProp is true', async () => {
-      await wrapper.setProps({ 
-        forceOpen: true, 
-        useOpenProp: true, 
-        open: false 
+      await wrapper.setProps({
+        forceOpen: true,
+        useOpenProp: true,
+        open: false,
       });
-      
+
       const trigger = wrapper.find('[data-testid="dropdown-trigger"]');
       await trigger.trigger('click');
-      
+
       expect(wrapper.emitted('update:open')).toBeFalsy();
     });
 
     it('should not close dropdown via onClickOutside when forceOpen is true and useOpenProp is true', async () => {
-      await wrapper.setProps({ 
-        forceOpen: true, 
-        useOpenProp: true, 
-        open: true 
+      await wrapper.setProps({
+        forceOpen: true,
+        useOpenProp: true,
+        open: true,
       });
-      
+
       await wrapper.vm.onClickOutside();
-      
+
       expect(wrapper.emitted('update:open')).toBeFalsy();
     });
 
     it('should allow normal behavior when forceOpen is false', async () => {
       await wrapper.setProps({ forceOpen: false, open: false });
-      
+
       const trigger = wrapper.find('[data-testid="dropdown-trigger"]');
       await trigger.trigger('click');
-      
+
       expect(wrapper.vm.active).toBe(true);
       expect(wrapper.emitted('update:open')).toBeTruthy();
     });

package/src/components/EmojiPicker/EmojiPicker.vue

@@ -14,9 +14,9 @@
       :showPreview="true"
       showSkinTones
       :search="true"
-      nav-position="bottom"
-      no-results-emoji="cry"
-      :max-frequent-rows="3"
+      navPosition="bottom"
+      noResultsEmoji="cry"
+      :maxFrequentRows="3"
       :i18n="translations"
       :color="accentColor"
       @select="onEmojiSelect"
@@ -25,56 +25,62 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, onUnmounted } from 'vue'
-import { get } from 'lodash'
-import i18n from '../../utils/plugins/i18n'
-import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src'
-import data from 'emoji-mart-vue-fast/data/all.json'
-import 'emoji-mart-vue-fast/css/emoji-mart.css'
-import UnnnicI18n from '../../mixins/i18n'
+import { computed, ref, onMounted, onUnmounted } from 'vue';
+import { get } from 'lodash';
+import i18n from '../../utils/plugins/i18n';
+import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src';
+import data from 'emoji-mart-vue-fast/data/all.json';
+import 'emoji-mart-vue-fast/css/emoji-mart.css';
+import UnnnicI18n from '../../mixins/i18n';
 
 defineOptions({
   mixins: [UnnnicI18n],
-})
+});
 
 interface Emoji {
-  id: string
-  native: string
+  id: string;
+  native: string;
 }
 
 export interface Props {
-  returnName?: boolean
-  position?: 'top' | 'bottom'
-  locale?: string
+  returnName?: boolean;
+  position?: 'top' | 'bottom';
+  locale?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   returnName: false,
   position: 'top',
-  locale: 'pt-br'
-})
+  locale: 'pt-br',
+});
 
 const emit = defineEmits<{
-  close: []
-  emojiSelected: [emoji: string]
-}>()
+  close: [];
+  emojiSelected: [emoji: string];
+}>();
 
-const emojiPickerRef = ref<HTMLElement>()
-const emojiIndex = computed(() => new EmojiIndex(data))
+const emojiPickerRef = ref<HTMLElement>();
+const emojiIndex = computed(() => new EmojiIndex(data));
 
-const accentColor = '#00A49F' // $unnnic-color-weni-600
+const accentColor = '#00A49F'; // $unnnic-color-weni-600
 
-const currentLocale = computed(() => props.locale || 'pt-br')
+const currentLocale = computed(() => props.locale || 'pt-br');
 
 const translation = (key: string) => {
-  const messages: Record<string, unknown> = i18n.global.messages as Record<string, unknown>
-  const loc = currentLocale.value
-  const localeMsgs = messages?.[loc] || messages?.[loc?.toLowerCase?.()] || messages?.[loc?.toUpperCase?.()]
-  const enMsgs = messages?.['en']
-  return get(localeMsgs, key) || get(enMsgs, key) || key
-}
-
-const title = computed(() => translation('emoji_picker.title'))
+  const messages: Record<string, unknown> = i18n.global.messages as Record<
+    string,
+    unknown
+  >;
+  const loc = currentLocale.value;
+  const localeMsgs =
+    messages?.[loc] ||
+    messages?.[loc?.toLowerCase?.()] ||
+    messages?.[loc?.toUpperCase?.()];
+  const enMsgs = messages?.['en'];
+  return get(localeMsgs, key) || get(enMsgs, key) || key;
+};
+
+const title = computed(() => translation('emoji_picker.title'));
 
 const translations = computed(() => ({
   search: translation('emoji_picker.search'),
@@ -91,27 +97,30 @@ const translations = computed(() => ({
     objects: translation('emoji_picker.categories.objects'),
     symbols: translation('emoji_picker.categories.symbols'),
     flags: translation('emoji_picker.categories.flags'),
-    custom: translation('emoji_picker.categories.custom')
-  }
-}))
+    custom: translation('emoji_picker.categories.custom'),
+  },
+}));
 
 const handleClickOutside = (event: Event) => {
-  if (emojiPickerRef.value && !emojiPickerRef.value.contains(event.target as Node)) {
-    emit('close')
+  if (
+    emojiPickerRef.value &&
+    !emojiPickerRef.value.contains(event.target as Node)
+  ) {
+    emit('close');
   }
-}
+};
 
 onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-})
+  document.addEventListener('click', handleClickOutside);
+});
 
 onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-})
+  document.removeEventListener('click', handleClickOutside);
+});
 
 const onEmojiSelect = (emoji: Emoji) => {
-  emit('emojiSelected', props.returnName ? emoji.id : emoji.native)
-}
+  emit('emojiSelected', props.returnName ? emoji.id : emoji.native);
+};
 </script>
 
 <style lang="scss" scoped>
@@ -137,7 +146,7 @@ const onEmojiSelect = (emoji: Emoji) => {
     border: 1px solid rgb(244, 246, 248);
     box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
     cursor: default;
-    color: #3B4151; // $unnnic-color-neutral-darkest
+    color: #3b4151; // $unnnic-color-neutral-darkest
   }
 
   :deep(.emoji-mart-emoji) {
@@ -155,11 +164,11 @@ const onEmojiSelect = (emoji: Emoji) => {
 
   :deep(.emoji-mart-anchor:hover),
   :deep(.emoji-mart-anchor-selected) {
-    color: #00A49F; // $unnnic-color-weni-600
+    color: #00a49f; // $unnnic-color-weni-600
   }
 
   :deep(.emoji-mart-anchor-bar) {
-    background-color: #00A49F; // $unnnic-color-weni-600
+    background-color: #00a49f; // $unnnic-color-weni-600
   }
 
   :deep(.emoji-type-image.emoji-set-apple) {