@weni/unnnic-system 3.2.7 → 3.2.8

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) {

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

@@ -5,33 +5,45 @@ import UnnnicEmojiPicker from '../EmojiPicker.vue';
 vi.mock('emoji-mart-vue-fast/src', () => ({
   Picker: {
     name: 'Picker',
-    props: ['data', 'set', 'theme', 'preview', 'search', 'navPosition', 'noResultsEmoji', 'maxFrequentRows', 'i18n', 'color'],
+    props: [
+      'data',
+      'set',
+      'theme',
+      'preview',
+      'search',
+      'navPosition',
+      'noResultsEmoji',
+      'maxFrequentRows',
+      'i18n',
+      'color',
+    ],
     emits: ['select', 'click-outside'],
-    template: '<div class="emoji-mart-picker"></div>'
+    template: '<div class="emoji-mart-picker"></div>',
   },
-  EmojiIndex: vi.fn().mockImplementation(() => ({}))
+  EmojiIndex: vi.fn().mockImplementation(() => ({})),
 }));
 
 vi.mock('emoji-mart-vue-fast/data/all.json', () => ({
-  default: {}
+  default: {},
 }));
 
 vi.mock('emoji-mart-vue-fast/css/emoji-mart.css', () => ({}));
 
 vi.mock('../../utils/plugins/i18n', () => {
-  const current = 'pt-br'
+  const current = 'pt-br';
   return {
     default: {
       global: {
-        get locale() { return current },
+        get locale() {
+          return current;
+        },
         set locale(_v) {},
         t: (key) => `${key}`,
       },
     },
-  }
+  };
 });
 
-
 describe('UnnnicEmojiPicker', () => {
   let wrapper;
 
@@ -50,12 +62,26 @@ describe('UnnnicEmojiPicker', () => {
         stubs: {
           Picker: {
             name: 'Picker',
-            props: ['data', 'set', 'theme', 'emoji', 'title', 'showPreview', 'search', 'navPosition', 'noResultsEmoji', 'maxFrequentRows', 'i18n', 'color'],
+            props: [
+              'data',
+              'set',
+              'theme',
+              'emoji',
+              'title',
+              'showPreview',
+              'search',
+              'navPosition',
+              'noResultsEmoji',
+              'maxFrequentRows',
+              'i18n',
+              'color',
+            ],
             emits: ['select', 'click-outside'],
-            template: '<div class="emoji-mart-picker" @select="$emit(\'select\', $event)" @click-outside="$emit(\'click-outside\')"></div>'
-          }
-        }
-      }
+            template:
+              '<div class="emoji-mart-picker" @select="$emit(\'select\', $event)" @click-outside="$emit(\'click-outside\')"></div>',
+          },
+        },
+      },
     });
   });
 
@@ -96,12 +122,26 @@ describe('UnnnicEmojiPicker', () => {
         stubs: {
           Picker: {
             name: 'Picker',
-            props: ['data', 'set', 'theme', 'emoji', 'title', 'showPreview', 'search', 'navPosition', 'noResultsEmoji', 'maxFrequentRows', 'i18n', 'color'],
+            props: [
+              'data',
+              'set',
+              'theme',
+              'emoji',
+              'title',
+              'showPreview',
+              'search',
+              'navPosition',
+              'noResultsEmoji',
+              'maxFrequentRows',
+              'i18n',
+              'color',
+            ],
             emits: ['select', 'click-outside'],
-            template: '<div class="emoji-mart-picker" @select="$emit(\'select\', $event)"></div>'
-          }
-        }
-      }
+            template:
+              '<div class="emoji-mart-picker" @select="$emit(\'select\', $event)"></div>',
+          },
+        },
+      },
     });
 
     const emojiMock = { id: 'smile', native: '😊' };
@@ -117,15 +157,15 @@ describe('UnnnicEmojiPicker', () => {
     // Simula um click fora do componente
     const outsideElement = document.createElement('div');
     document.body.appendChild(outsideElement);
-    
+
     const clickEvent = new Event('click', { bubbles: true });
     Object.defineProperty(clickEvent, 'target', { value: outsideElement });
-    
+
     document.dispatchEvent(clickEvent);
-    
+
     await wrapper.vm.$nextTick();
     expect(wrapper.emitted('close')).toBeTruthy();
-    
+
     // Cleanup
     document.body.removeChild(outsideElement);
   });
@@ -133,7 +173,28 @@ describe('UnnnicEmojiPicker', () => {
   it('renders bottom position class when position is bottom', async () => {
     const custom = mount(UnnnicEmojiPicker, {
       props: { position: 'bottom' },
-      global: { stubs: { Picker: { name: 'Picker', props: ['data','set','theme','emoji','title','showPreview','search','navPosition','noResultsEmoji','maxFrequentRows','i18n','color'], template: '<div />' } } }
+      global: {
+        stubs: {
+          Picker: {
+            name: 'Picker',
+            props: [
+              'data',
+              'set',
+              'theme',
+              'emoji',
+              'title',
+              'showPreview',
+              'search',
+              'navPosition',
+              'noResultsEmoji',
+              'maxFrequentRows',
+              'i18n',
+              'color',
+            ],
+            template: '<div />',
+          },
+        },
+      },
     });
     expect(custom.classes()).toContain('emoji-picker--bottom');
     custom.unmount();

package/src/components/Flag.vue

@@ -6,7 +6,6 @@
 </template>
 
 <script>
-/* eslint-disable global-require */
 /* eslint-disable vue/multi-word-component-names */
 import UnnnicIcon from './Icon.vue';
 

package/src/components/FormElement/FormElement.vue

@@ -95,7 +95,7 @@ export default {
   },
   methods: {
     fullySanitize,
-  }
+  },
 };
 </script>
 

package/src/components/Icon/types.ts

@@ -1,9 +1,9 @@
-import type { SchemeColor } from "@/types/scheme-colors";
+import type { SchemeColor } from '@/types/scheme-colors';
 
 // Re-export SchemeColor for backward compatibility
 export type { SchemeColor };
 
-export type IconSize = 
+export type IconSize =
   | 'nano'
   | 'xs'
   | 'sm'

package/src/components/Icon.vue

@@ -74,7 +74,9 @@ const materialSymbolsName = computed(() => {
     return null;
   }
 
-  return (OldIconsMap as Record<string, string>)[props.icon as string] || props.icon;
+  return (
+    (OldIconsMap as Record<string, string>)[props.icon as string] || props.icon
+  );
 });
 
 const onClick = (event: Event) => {

package/src/components/Input/BaseInput.vue

@@ -110,8 +110,8 @@ export default {
   }
 
   &.input--has-icon-left {
-    padding-left: $unnnic-spacing-sm + $unnnic-icon-size-sm + $unnnic-spacing-xs -
-      $unnnic-border-width-thinner;
+    padding-left: $unnnic-spacing-sm + $unnnic-icon-size-sm +
+      $unnnic-spacing-xs - $unnnic-border-width-thinner;
   }
 
   &.input--has-icon-right {

package/src/components/InputDatePicker/InputDatePicker.vue

@@ -20,6 +20,7 @@
     >
       <UnnnicDatePicker
         v-if="showCalendarFilter"
+        v-model:equivalentOption="overwrittenValue"
         :type="type"
         :clearLabel="clearText"
         :actionLabel="actionText"
@@ -31,7 +32,6 @@
         :minDate="minDate"
         :maxDate="maxDate"
         :disableClear="disableClear"
-        v-model:equivalentOption="overwrittenValue"
         @change="emitSelectDate"
         @submit="changeDate"
       />

package/src/components/Label/Label.vue

@@ -13,8 +13,8 @@ export default {
     },
   },
   methods: {
-    fullySanitize
-  }
+    fullySanitize,
+  },
 };
 </script>
 

package/src/components/ModalNext/ModalNext.vue

@@ -90,7 +90,7 @@
               v-if="$slots.description?.().length"
               name="description"
             >
-          </slot>
+            </slot>
 
             <template v-else>{{ description }}</template>
           </div>
@@ -158,7 +158,7 @@ import UnnnicInput from '../Input/Input.vue';
 import UnnnicButton from '../Button/Button.vue';
 
 export default {
-  name: "UnnnicModalNext",
+  name: 'UnnnicModalNext',
   components: {
     UnnnicIcon,
     UnnnicInput,

package/src/components/SelectSmart/SelectSmart.vue

@@ -214,7 +214,12 @@ export default {
     },
   },
 
-  emits: ['update:searchValue', 'onChange', 'update:modelValue', 'onActiveChange'],
+  emits: [
+    'update:searchValue',
+    'onChange',
+    'update:modelValue',
+    'onActiveChange',
+  ],
 
   data() {
     return {
@@ -383,11 +388,18 @@ export default {
           return;
         }
 
-        if(this.multiple && option.disableRemove && this.optionIsSelected(option)) {
+        if (
+          this.multiple &&
+          option.disableRemove &&
+          this.optionIsSelected(option)
+        ) {
           return;
         }
 
-        if (this.multipleLimit && this.modelValue.length >= this.multipleLimit) {
+        if (
+          this.multipleLimit &&
+          this.modelValue.length >= this.multipleLimit
+        ) {
           return;
         }
 
@@ -561,7 +573,6 @@ export default {
         const focusedOptionIndex = this.getOptionIndex('focused');
         let newIndex;
 
-        // eslint-disable-next-line default-case
         switch (key) {
           case 'Escape':
             this.active = false;

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

@@ -260,14 +260,14 @@ describe('SelectSmart.vue', () => {
     it('should emit onActiveChange when toggling dropdown visibility', async () => {
       // Open dropdown
       await input().trigger('click');
-      
+
       // Close dropdown
       await input().trigger('click');
 
       const emittedEvents = wrapper.emitted('onActiveChange');
       expect(emittedEvents).toBeTruthy();
       expect(emittedEvents.length).toBe(2);
-      expect(emittedEvents[0][0]).toBe(true);  // opened
+      expect(emittedEvents[0][0]).toBe(true); // opened
       expect(emittedEvents[1][0]).toBe(false); // closed
     });
 

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

@@ -61,10 +61,14 @@ describe('Switch', () => {
 
   it('should render the correct icon size based on the size prop', async () => {
     await wrapper.setProps({ size: 'small' });
-    expect(wrapper.findComponent({ name: 'UnnnicIcon' }).props('size')).toBe('sm');
+    expect(wrapper.findComponent({ name: 'UnnnicIcon' }).props('size')).toBe(
+      'sm',
+    );
 
     await wrapper.setProps({ size: 'medium' });
-    expect(wrapper.findComponent({ name: 'UnnnicIcon' }).props('size')).toBe('md');
+    expect(wrapper.findComponent({ name: 'UnnnicIcon' }).props('size')).toBe(
+      'md',
+    );
   });
 
   it('should change the icon color based on the state', async () => {

package/src/components/Tag/TagNext.vue

@@ -1,10 +1,5 @@
 <template>
-  <section 
-    :class="[
-      'unnnic-tag-next',
-      `unnnic-tag-next--${scheme}`
-    ]"
-  >
+  <section :class="['unnnic-tag-next', `unnnic-tag-next--${scheme}`]">
     <p class="unnnic-tag-next__text">
       {{ text }}
     </p>
@@ -61,6 +56,5 @@ export default {
     background-color: $unnnic-color-weni-100;
     color: $unnnic-color-weni-600;
   }
-
 }
-</style> 
+</style>

package/src/components/Tour/TourPopover.vue

@@ -128,7 +128,7 @@ export default {
         left: attachedTop - popoverHeight / 2 + attachedHeight / 2,
       };
 
-      let style = {
+      const style = {
         transform: `translate(${translateXMap[step.popoverPosition]}px, ${translateYMap[step.popoverPosition]}px)`,
         transition: 'transform .3s ease',
       };

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

@@ -35,8 +35,8 @@ const commonTests = async (wrapper) => {
 describe('Icon', () => {
   it('should accept valid lineHeight props', () => {
     const validValues = ['sm', 'md', 'lg', null];
-    
-    validValues.forEach(value => {
+
+    validValues.forEach((value) => {
       const wrapper = createWrapper({ lineHeight: value });
       expect(wrapper.exists()).toBe(true);
     });