@weni/unnnic-system 3.31.1-alpha.2 → 3.32.0

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

@@ -0,0 +1,155 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, beforeEach } from 'vitest';
+import Dropdown from '../Dropdown.vue';
+
+describe('Dropdown.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(Dropdown, {
+      props: {
+        open: false,
+        position: 'bottom-left',
+      },
+      slots: {
+        trigger: '<button data-testid="dropdown-trigger">Trigger</button>',
+        default: '<div data-testid="dropdown-slot">Dropdown Content</div>',
+      },
+    });
+  });
+
+  describe('Render elements', () => {
+    it('should render the trigger slot', () => {
+      const trigger = wrapper.find('[data-testid="dropdown-trigger"]');
+      expect(trigger.exists()).toBe(true);
+    });
+
+    it('should not display the dropdown content initially when `open` is false', () => {
+      const slot = wrapper.find('[data-testid="dropdown-slot"]');
+      expect(slot.exists()).toBe(false);
+    });
+
+    it('should display the dropdown content initially when `open` is true', async () => {
+      await wrapper.setProps({ open: true });
+      const slot = wrapper.find('[data-testid="dropdown-slot"]');
+      expect(slot.exists()).toBe(true);
+    });
+  });
+
+  describe('Props and Positioning', () => {
+    it('should set the dropdown position based on the `position` prop', async () => {
+      await wrapper.setProps({ open: true, position: 'top-left' });
+      const content = wrapper.find('[data-testid="dropdown-content"]');
+      expect(content.classes()).toContain(
+        'unnnic-dropdown__content__position-top-left',
+      );
+    });
+
+    it('should validate the `position` prop with allowed values', () => {
+      const { validator } = Dropdown.props.position;
+
+      expect(validator('top-left')).toBe(true);
+      expect(validator('none')).toBe(true);
+      expect(validator('bottom-left')).toBe(true);
+      expect(validator('bottom-right')).toBe(true);
+      expect(validator('invalid-position')).toBe(false);
+    });
+  });
+
+  describe('Trigger Functionality', () => {
+    it('should toggle `active` state on trigger click', async () => {
+      const trigger = wrapper.find('[data-testid="dropdown-trigger"]');
+      await trigger.trigger('click');
+      expect(wrapper.vm.active).toBe(true);
+
+      await trigger.trigger('click');
+      expect(wrapper.vm.active).toBe(false);
+    });
+
+    it('should emit "update:open" event when `active` state changes', async () => {
+      await wrapper.setProps({ open: false });
+      const trigger = wrapper.find('[data-testid="dropdown-trigger"]');
+      await trigger.trigger('click');
+
+      expect(wrapper.emitted('update:open')).toBeTruthy();
+      expect(wrapper.emitted('update:open')[0]).toEqual([true]);
+
+      await trigger.trigger('click');
+      expect(wrapper.emitted('update:open')[1]).toEqual([false]);
+    });
+  });
+
+  describe('Click Outside Behavior', () => {
+    it('should close the dropdown when clicking outside', async () => {
+      await wrapper.setProps({ open: true });
+      expect(wrapper.vm.active).toBe(true);
+
+      await wrapper.vm.onClickOutside();
+      expect(wrapper.vm.active).toBe(false);
+    });
+
+    it('should not close the dropdown if `active` is already false on outside click', async () => {
+      await wrapper.setProps({ open: false });
+      await wrapper.vm.onClickOutside();
+
+      expect(wrapper.vm.active).toBe(false);
+    });
+  });
+
+  describe('ForceOpen Functionality', () => {
+    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();
+    });
+
+    it('should not close dropdown on outside click when forceOpen is true', async () => {
+      await wrapper.setProps({ forceOpen: true, open: true });
+      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,
+      });
+
+      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.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/Dropdown/__tests__/DropdownItem.spec.js

@@ -0,0 +1,25 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, beforeEach } from 'vitest';
+import DropdownItem from '../DropdownItem.vue';
+
+describe('DropdownItem.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(DropdownItem, {
+      slots: {
+        default: '<span>Dropdown Item Content</span>',
+      },
+    });
+  });
+
+  it('renders slot content', () => {
+    expect(wrapper.html()).toContain('Dropdown Item Content');
+  });
+
+  it('has the correct classes applied', () => {
+    const dropdownItem = wrapper.find('[data-testid="dropdown-item"]');
+    expect(dropdownItem.classes()).toContain('unnnic-dropdown-item');
+    expect(dropdownItem.classes()).toContain('unnnic--clickable');
+  });
+});

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

@@ -0,0 +1,147 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import DropdownSkeleton from '../DropdownSkeleton.vue';
+
+describe('DropdownSkeleton.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(DropdownSkeleton, {
+      props: {
+        type: 'automatic',
+        modelValue: false,
+        position: 'bottom-left',
+      },
+      slots: {
+        default: '<div data-testid="default-slot">Default Slot Content</div>',
+        inside: '<div data-testid="inside-slot">Inside Slot Content</div>',
+      },
+    });
+  });
+
+  const dropdown = () => wrapper.find('[data-testid="dropdown-skeleton"]');
+  const dropdownData = () => wrapper.find('[data-testid="dropdown-data"]');
+
+  describe('Rendering', () => {
+    it('should render the dropdown with the correct default classes', () => {
+      expect(dropdown().exists()).toBe(true);
+      expect(dropdown().classes()).toContain('dropdown');
+      expect(dropdown().classes()).not.toContain('active');
+    });
+
+    it('should render the default slot content inside the dropdown', () => {
+      const defaultSlot = wrapper.find('[data-testid="default-slot"]');
+      expect(defaultSlot.exists()).toBe(true);
+      expect(defaultSlot.text()).toBe('Default Slot Content');
+    });
+
+    it('should apply active class when modelValue is true and type is "manual"', async () => {
+      await wrapper.setProps({ modelValue: true, type: 'manual' });
+      expect(dropdown().classes()).toContain('active');
+    });
+  });
+
+  describe('Active State Management', () => {
+    it('should set active class to false when type is "automatic"', () => {
+      expect(dropdown().classes()).not.toContain('active');
+    });
+
+    it('should set active class to true when type is "manual" and modelValue is true', async () => {
+      await wrapper.setProps({ type: 'manual', modelValue: true });
+      expect(dropdown().classes()).toContain('active');
+    });
+
+    it('should set active class to false when type is "manual" and modelValue is false', async () => {
+      await wrapper.setProps({ type: 'manual', modelValue: false });
+      expect(dropdown().classes()).not.toContain('active');
+    });
+
+    it('should not change active class when type is "manual" and modelValue is not changed', () => {
+      expect(dropdown().classes()).not.toContain('active');
+    });
+  });
+
+  describe('Position Calculation', () => {
+    it('should calculate position as bottom-left by default', () => {
+      const positions = wrapper.vm.positions;
+
+      expect(dropdownData().attributes('style')).toContain(
+        `left: ${positions.left}`,
+      );
+      expect(dropdownData().attributes('style')).toContain(
+        `top: ${positions.top}`,
+      );
+    });
+
+    it('should adjust position to avoid overflow on bottom-right', async () => {
+      await wrapper.setProps({ position: 'bottom-right' });
+
+      Object.defineProperty(wrapper.vm, 'clientHeight', { value: 500 });
+      Object.defineProperty(wrapper.vm, 'clientWidth', { value: 500 });
+
+      wrapper.vm.data.width = 600;
+      wrapper.vm.data.height = 600;
+
+      wrapper.vm.calculatePosition();
+
+      const positions = wrapper.vm.positions;
+
+      expect(dropdownData().attributes('style')).toContain(
+        `left: ${positions.left}`,
+      );
+      expect(dropdownData().attributes('style')).toContain(
+        `top: ${positions.top}`,
+      );
+      expect(parseInt(positions.left, 10)).toBeLessThanOrEqual(
+        wrapper.vm.clientWidth,
+      );
+      expect(parseInt(positions.top, 10)).toBeLessThanOrEqual(
+        wrapper.vm.clientHeight,
+      );
+    });
+
+    it('should correctly position on top-left when specified', async () => {
+      await wrapper.setProps({ position: 'top-left' });
+
+      wrapper.vm.data.width = 100;
+      wrapper.vm.data.height = 100;
+
+      wrapper.vm.calculatePosition();
+
+      const positions = wrapper.vm.positions;
+
+      expect(dropdownData().attributes('style')).toContain(
+        `left: ${positions.left}`,
+      );
+      expect(dropdownData().attributes('style')).toContain(
+        `top: ${positions.top}`,
+      );
+    });
+  });
+
+  describe('Lifecycle', () => {
+    it('should clean up event listeners on beforeUnmount', async () => {
+      const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener');
+
+      await wrapper.unmount();
+
+      expect(removeEventListenerSpy).toHaveBeenCalledWith(
+        'scroll',
+        wrapper.vm.calculatePosition,
+      );
+      expect(removeEventListenerSpy).toHaveBeenCalledWith(
+        'resize',
+        wrapper.vm.calculatePosition,
+      );
+    });
+
+    it('should set initial data properties on mount', () => {
+      expect(wrapper.vm.clientHeight).toBe(0);
+      expect(wrapper.vm.clientWidth).toBe(0);
+      expect(wrapper.vm.x).toBe(0);
+      expect(wrapper.vm.y).toBe(0);
+      expect(wrapper.vm.width).toBe(0);
+      expect(wrapper.vm.height).toBe(0);
+    });
+  });
+});

package/src/components/EmojiPicker/EmojiPicker.vue

@@ -0,0 +1,244 @@
+<template>
+  <div
+    ref="emojiPickerRef"
+    :class="['emoji-picker', `emoji-picker--${position}`]"
+    @click.stop
+    @keypress.enter.stop
+  >
+    <Picker
+      :data="emojiIndex"
+      set="apple"
+      theme="light"
+      emoji="point_up"
+      :title="title"
+      :showPreview="true"
+      showSkinTones
+      :search="true"
+      navPosition="bottom"
+      noResultsEmoji="cry"
+      :maxFrequentRows="3"
+      :i18n="translations"
+      :color="accentColor"
+      @select="onEmojiSelect"
+    />
+  </div>
+</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';
+
+defineOptions({
+  mixins: [UnnnicI18n],
+});
+
+interface Emoji {
+  id: string;
+  native: string;
+}
+
+export interface Props {
+  returnName?: boolean;
+  position?: 'top' | 'bottom';
+  locale?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  returnName: false,
+  position: 'top',
+  locale: 'pt-br',
+});
+
+const emit = defineEmits<{
+  close: [];
+  emojiSelected: [emoji: string];
+}>();
+
+const emojiPickerRef = ref<HTMLElement>();
+const emojiIndex = computed(() => new EmojiIndex(data));
+
+const accentColor = 'var(--unnnic-color-fg-accent)';
+
+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 translations = computed(() => ({
+  search: translation('emoji_picker.search'),
+  notfound: translation('emoji_picker.notfound'),
+  categories: {
+    search: translation('emoji_picker.categories.search'),
+    recent: translation('emoji_picker.categories.recent'),
+    smileys: translation('emoji_picker.categories.smileys'),
+    people: translation('emoji_picker.categories.people'),
+    nature: translation('emoji_picker.categories.nature'),
+    foods: translation('emoji_picker.categories.foods'),
+    activity: translation('emoji_picker.categories.activity'),
+    places: translation('emoji_picker.categories.places'),
+    objects: translation('emoji_picker.categories.objects'),
+    symbols: translation('emoji_picker.categories.symbols'),
+    flags: translation('emoji_picker.categories.flags'),
+    custom: translation('emoji_picker.categories.custom'),
+  },
+}));
+
+const handleClickOutside = (event: Event) => {
+  if (
+    emojiPickerRef.value &&
+    !emojiPickerRef.value.contains(event.target as Node)
+  ) {
+    emit('close');
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+
+const onEmojiSelect = (emoji: Emoji) => {
+  emit('emojiSelected', props.returnName ? emoji.id : emoji.native);
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+@use '@/components/Input/Input.scss' as *;
+
+.emoji-picker {
+  position: absolute;
+  z-index: 1;
+
+  animation-duration: 0.3s;
+
+  &--top {
+    bottom: 100%;
+    animation-name: slideInUp;
+  }
+
+  &--bottom {
+    top: 100%;
+    animation-name: slideInDown;
+  }
+
+  :deep(.emoji-mart) {
+    border-radius: $unnnic-radius-4;
+    font-family: $unnnic-font-family;
+    border: 1px solid $unnnic-color-border-base;
+    background-color: $unnnic-color-bg-base;
+    box-shadow: $unnnic-shadow-1;
+    cursor: default;
+    color: $unnnic-color-fg-emphasized;
+  }
+
+  :deep(.emoji-mart-emoji) {
+    cursor: pointer;
+
+    &::before {
+      background-color: $unnnic-color-bg-base-soft;
+    }
+  }
+
+  :deep(.emoji-mart-search) {
+    margin: $unnnic-space-2 0;
+
+    input {
+      @include input-base;
+    }
+  }
+
+  :deep(.emoji-mart-category) {
+    .emoji-mart-emoji span {
+      cursor: pointer;
+    }
+
+    .emoji-mart-category-label {
+      background-color: transparent;
+    }
+  }
+
+  :deep(.emoji-mart-anchor) {
+    cursor: pointer;
+    color: $unnnic-color-fg-base;
+  }
+
+  :deep(.emoji-mart-anchor:hover),
+  :deep(.emoji-mart-anchor-selected) {
+    color: $unnnic-color-fg-accent;
+  }
+
+  :deep(.emoji-mart-anchor-bar) {
+    background-color: $unnnic-color-fg-accent;
+  }
+
+  :deep(.emoji-type-image.emoji-set-apple) {
+    background-image: url('https://cdn.cloud.weni.ai/emojis-apple-64.png') !important;
+  }
+
+  :deep(.emoji-type-image.emoji-set-facebook),
+  :deep(.emoji-type-image.emoji-set-google),
+  :deep(.emoji-type-image.emoji-set-twitter) {
+    background-image: none !important;
+  }
+
+  :deep(.emoji-mart-scroll) {
+    &::-webkit-scrollbar {
+      width: $unnnic-space-2;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: $unnnic-color-border-emphasized;
+      border-radius: $unnnic-radius-full;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: $unnnic-color-border-muted;
+      border-radius: $unnnic-radius-full;
+    }
+  }
+}
+
+@keyframes slideInUp {
+  0% {
+    transform: translateY(5%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes slideInDown {
+  0% {
+    transform: translateY(-5%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}
+</style>