@weni/unnnic-system 3.9.1-alpha.1 → 3.9.1-alpha.3

package/dist/components/ui/dialog/index.d.ts

@@ -1,8 +0,0 @@
-export { default as Dialog } from './Dialog.vue';
-export { default as DialogClose } from './DialogClose.vue';
-export { default as DialogContent } from './DialogContent.vue';
-export { default as DialogFooter } from './DialogFooter.vue';
-export { default as DialogHeader } from './DialogHeader.vue';
-export { default as DialogTitle } from './DialogTitle.vue';
-export { default as DialogTrigger } from './DialogTrigger.vue';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/dialog/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/src/components/Alert/SIMPLE_MIGRATION_GUIDE.md

@@ -1,152 +0,0 @@
-# 🚀 Guia de Migração: Alert → Toast
-
-## 📦 Importação
-
-**ANTES:**
-
-```javascript
-import Unnnic from '@weni/unnnic-system';
-
-Unnnic.unnnicCallAlert(...);
-```
-
-**DEPOIS:**
-
-```javascript
-import { toast } from "@weni/unnnic-system";
-```
-
----
-
-## 📋 Mapeamento de Propriedades
-
-| Alert               | Toast               | Alteração                       |
-| ------------------- | ------------------- | ------------------------------- |
-| `text`              | `title`             | Propriedade renomeada           |
-| `seconds`           | `timeout`           | Agora em **milissegundos (ms)** |
-| `type: 'success'`   | `toast.success()`   | Substituído por método direto   |
-| `type: 'error'`     | `toast.error()`     | Substituído por método direto   |
-| `type: 'attention'` | `toast.attention()` | Substituído por método direto   |
-| `type: 'default'`   | `toast.info()`      | Substituído por método direto   |
-
----
-
-## 🔄 Exemplos de Uso
-
-### Exemplo 1 – Uso com Função
-
-**ANTES:**
-
-```javascript
-// callAlert
-alert.callAlert({
-  props: {
-    text: "Dados salvos com sucesso!",
-    type: "success",
-  },
-  seconds: 3,
-});
-```
-
-**DEPOIS:**
-
-```javascript
-// toast
-toast.success("Dados salvos com sucesso!");
-```
-
----
-
-### Exemplo 2 – Uso com Componente
-
-**ANTES:**
-
-```vue
-<!-- UnnnicAlert -->
-<UnnnicAlert
-  text="Dados salvos com sucesso!"
-  type="success"
-  @close="handleClose"
-/>
-```
-
-**DEPOIS:**
-
-```vue
-<!-- UnnnicToast -->
-<UnnnicToast
-  title="Dados salvos com sucesso!"
-  type="success"
-  @close="handleClose"
-/>
-```
-
----
-
-## 📚 Casos Comuns
-
-### ✅ Sucesso
-
-**ANTES:**
-
-```javascript
-alert.callAlert({
-  props: {
-    text: "Dados salvos com sucesso!",
-    type: "success",
-  },
-  seconds: 5,
-});
-```
-
-**DEPOIS:**
-
-```javascript
-toast.success("Dados salvos com sucesso!");
-```
-
----
-
-### ❌ Erro
-
-**ANTES:**
-
-```javascript
-alert.callAlert({
-  props: {
-    text: "Erro ao salvar dados",
-    type: "error",
-  },
-  seconds: 5,
-});
-```
-
-**DEPOIS:**
-
-```javascript
-toast.error("Erro ao salvar dados");
-```
-
----
-
-### ⏱ Timeout Personalizado
-
-**ANTES:**
-
-```javascript
-alert.callAlert({
-  props: {
-    text: "Mensagem importante",
-    type: "success",
-  },
-  seconds: 10, // 10 segundos
-});
-```
-
-**DEPOIS:**
-
-```javascript
-toast.success("Mensagem importante", "", {
-  timeout: 10000, // 10 segundos em ms
-});
-```

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

@@ -1,147 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { beforeEach, describe, expect, afterEach, test, vi } from 'vitest';
-import UnnnicPopover from '@/components/Popover/index.vue';
-
-vi.mock('@vueuse/core', () => ({
-  onClickOutside: vi.fn(),
-  useResizeObserver: vi.fn(),
-}));
-
-describe('UnnnicPopover.vue', () => {
-  let wrapper;
-
-  const defaultSlots = {
-    trigger: '<button data-testid="trigger-button">Click me</button>',
-    content: '<div data-testid="popover-content">Popover content</div>',
-  };
-
-  const mountWrapper = (props) => {
-    return mount(UnnnicPopover, {
-      slots: defaultSlots,
-      props: {
-        ...props,
-      },
-    });
-  };
-
-  beforeEach(() => {
-    wrapper = mountWrapper();
-  });
-
-  afterEach(() => {
-    wrapper?.unmount();
-  });
-
-  test('renders correctly', () => {
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.find('.unnnic-popover').exists()).toBe(true);
-  });
-
-  test('renders trigger slot', () => {
-    const trigger = wrapper.find('[data-testid="popover-trigger"]');
-    const triggerButton = wrapper.find('[data-testid="trigger-button"]');
-
-    expect(trigger.exists()).toBe(true);
-    expect(triggerButton.exists()).toBe(true);
-    expect(triggerButton.text()).toBe('Click me');
-  });
-
-  test('renders content slot inside balloon', async () => {
-    wrapper.vm.open = true;
-    await wrapper.vm.$nextTick();
-    const balloon = wrapper.find('[data-testid="popover-balloon"]');
-    const content = wrapper.find('[data-testid="popover-content"]');
-
-    expect(balloon.exists()).toBe(true);
-    expect(content.exists()).toBe(true);
-    expect(content.text()).toBe('Popover content');
-  });
-
-  test('balloon is hidden by default', () => {
-    const balloon = wrapper.find('[data-testid="popover-balloon"]');
-    expect(balloon.exists()).toBe(false);
-  });
-
-  test('toggles balloon visibility when trigger is clicked', async () => {
-    const trigger = wrapper.find('[data-testid="popover-trigger"]');
-
-    let balloon = wrapper.find('[data-testid="popover-balloon"]');
-
-    expect(balloon.exists()).toBe(false);
-
-    await trigger.trigger('click');
-    await wrapper.vm.$nextTick();
-
-    balloon = wrapper.find('[data-testid="popover-balloon"]');
-
-    expect(balloon.exists()).toBe(true);
-  });
-
-  test('uses modelValue when provided', async () => {
-    const wrapper = mountWrapper({ modelValue: true });
-    const balloon = wrapper.find('[data-testid="popover-balloon"]');
-    expect(balloon.isVisible()).toBe(true);
-  });
-
-  test('emits update:modelValue when open state changes', async () => {
-    await wrapper.setProps({ modelValue: false });
-
-    const trigger = wrapper.find('[data-testid="popover-trigger"]');
-    await trigger.trigger('click');
-
-    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
-    expect(wrapper.emitted('update:modelValue')[0]).toEqual([true]);
-  });
-
-  test('does not emit update:modelValue when modelValue is undefined', async () => {
-    const trigger = wrapper.find('[data-testid="popover-trigger"]');
-    await trigger.trigger('click');
-
-    expect(wrapper.emitted('update:modelValue')).toBeFalsy();
-  });
-
-  test('exposes open ref', () => {
-    expect(wrapper.vm.open).toBeDefined();
-    expect(typeof wrapper.vm.open).toBe('boolean');
-  });
-
-  test('open ref can be controlled programmatically', async () => {
-    wrapper.vm.open = true;
-    await wrapper.vm.$nextTick();
-
-    const balloon = wrapper.find('[data-testid="popover-balloon"]');
-    expect(balloon.isVisible()).toBe(true);
-  });
-
-  test('persistent prop prevents closing on outside click', async () => {
-    await wrapper.setProps({ persistent: true });
-
-    const { onClickOutside } = await import('@vueuse/core');
-    const mockOnClickOutside = vi.mocked(onClickOutside);
-
-    const callback = mockOnClickOutside.mock.calls[0][1];
-
-    wrapper.vm.open = true;
-    await wrapper.vm.$nextTick();
-
-    callback();
-
-    const balloon = wrapper.find('[data-testid="popover-balloon"]');
-    expect(balloon.isVisible()).toBe(true);
-  });
-
-  test('applies correct CSS classes', async () => {
-    wrapper.vm.open = true;
-    await wrapper.vm.$nextTick();
-
-    const popover = wrapper.find('.unnnic-popover');
-    const balloon = wrapper.find('.unnnic-popover__balloon');
-
-    expect(popover.exists()).toBe(true);
-    expect(balloon.exists()).toBe(true);
-  });
-
-  test('matches the snapshot', () => {
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-});

package/src/components/Popover/__tests__/__snapshots__/Popover.spec.js.snap

@@ -1,8 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`UnnnicPopover.vue > matches the snapshot 1`] = `
-"<section data-v-5a3125ac="" class="unnnic-popover">
-  <div data-v-5a3125ac="" class="unnnic-popover__trigger" data-testid="popover-trigger"><button data-testid="trigger-button">Click me</button></div>
-  <!--v-if-->
-</section>"
-`;

package/src/components/Popover/index.vue

@@ -1,146 +0,0 @@
-<template>
-  <section
-    ref="popover"
-    class="unnnic-popover"
-  >
-    <div
-      class="unnnic-popover__trigger"
-      data-testid="popover-trigger"
-      @click="toggleOpen()"
-    >
-      <slot name="trigger" />
-    </div>
-    <div
-      v-if="open"
-      class="unnnic-popover__balloon"
-      data-testid="popover-balloon"
-    >
-      <slot name="content" />
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, ref, useTemplateRef, watch } from 'vue';
-import { onClickOutside, useResizeObserver } from '@vueuse/core';
-
-const target = useTemplateRef<HTMLDivElement>('popover');
-
-const popoverWidth = ref<string>('');
-
-useResizeObserver(target, (entries) => {
-  const entry = entries[0];
-  const { width } = entry.contentRect;
-  popoverWidth.value = `${width}px`;
-});
-
-onClickOutside(target, () => {
-  if (props.persistent) return;
-  open.value = false;
-});
-
-defineOptions({
-  name: 'UnnnicPopover',
-});
-
-interface PopoverBalloonProps {
-  width?: string;
-  height?: string;
-  maxHeight?: string;
-}
-
-interface PopoverProps {
-  modelValue?: boolean;
-  persistent?: boolean;
-  popoverBalloonProps?: PopoverBalloonProps;
-}
-
-const props = withDefaults(defineProps<PopoverProps>(), {
-  modelValue: undefined,
-  persistent: false,
-});
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean];
-}>();
-
-const useModelValue = computed(() => props.modelValue !== undefined);
-
-const open = ref<boolean>(
-  useModelValue.value ? Boolean(props.modelValue) : false,
-);
-
-const toggleOpen = () => {
-  open.value = !open.value;
-};
-
-const calculatedPopoverWidth = computed(() => {
-  return props.popoverBalloonProps?.width || popoverWidth.value;
-});
-
-const popoverHeight = computed(() => {
-  return props.popoverBalloonProps?.height || 'unset';
-});
-
-const popoverMaxHeight = computed(() => {
-  return props.popoverBalloonProps?.maxHeight || 'unset';
-});
-
-onMounted(() => {
-  if (useModelValue.value) {
-    open.value = Boolean(props.modelValue);
-  }
-});
-
-watch(open, (value) => {
-  if (useModelValue.value) {
-    emit('update:modelValue', value);
-  }
-});
-
-watch(
-  () => props.modelValue,
-  (value) => {
-    open.value = !!value;
-  },
-);
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.unnnic-popover {
-  &__balloon {
-    border-radius: $unnnic-radius-2;
-    padding: $unnnic-space-4;
-    background: $unnnic-color-bg-base;
-    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16);
-    // margin-top: $unnnic-space-1;
-    position: fixed;
-    width: v-bind(calculatedPopoverWidth);
-    height: v-bind(popoverHeight);
-    max-height: v-bind(popoverMaxHeight);
-    overflow: auto;
-
-    &::-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/components/Select/SelectOption.vue

@@ -1,65 +0,0 @@
-<template>
-  <div
-    :class="[
-      'unnnic-select-option',
-      {
-        'unnnic-select-option--disabled': props.disabled,
-        'unnnic-select-option--active': props.active,
-        'unnnic-select-option--focused': props.focused,
-      },
-    ]"
-  >
-    <p class="unnnic-select-option__label">{{ props.label }}</p>
-  </div>
-</template>
-
-<script setup lang="ts">
-defineOptions({
-  name: 'UnnnicSelectOption',
-});
-
-interface SelectOptionProps {
-  label: string;
-  disabled?: boolean;
-  active?: boolean;
-  focused?: boolean;
-}
-
-const props = withDefaults(defineProps<SelectOptionProps>(), {
-  disabled: false,
-  active: false,
-  focused: false,
-});
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.unnnic-select-option {
-  cursor: pointer;
-  border-radius: $unnnic-radius-1;
-  padding: $unnnic-space-2 $unnnic-space-4;
-  font: $unnnic-font-emphasis;
-
-  &:hover:not(&--active):not(&--disabled),
-  &--focused {
-    background-color: $unnnic-color-bg-soft;
-  }
-
-  &--active {
-    background-color: $unnnic-color-bg-active;
-    color: $unnnic-color-fg-inverted;
-  }
-
-  &--disabled {
-    color: $unnnic-color-fg-muted;
-    background-color: $unnnic-color-bg-muted;
-    cursor: not-allowed;
-  }
-}
-</style>