@weni/unnnic-system 3.28.2-alpha.0 → 3.28.2-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.28.2-alpha.0",
+  "version": "3.28.2-alpha.2",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/Disclaimer/Disclaimer.vue

@@ -3,13 +3,15 @@
     :class="['unnnic-disclaimer', `unnnic-disclaimer--${type}`]"
     data-testid="disclaimer"
   >
-    <UnnnicIcon
-      class="unnnic-disclaimer__icon"
-      size="ant"
-      :icon="variant.icon"
-      :scheme="variant.scheme"
-      data-testid="disclaimer-icon"
-    />
+    <slot name="icon">
+      <UnnnicIcon
+        class="unnnic-disclaimer__icon"
+        size="ant"
+        :icon="variant.icon"
+        :scheme="variant.scheme"
+        data-testid="disclaimer-icon"
+      />
+    </slot>
 
     <section class="unnnic-disclaimer__content">
       <p
@@ -57,7 +59,7 @@ const slots = useSlots();
 const hasDescription = computed(() => {
   return (
     Boolean(props.description) ||
-    (slots.description && slots.description().length > 0)
+    (slots.description && slots.description({}).length > 0)
   );
 });
 

package/src/components/IconLoading/IconLoading.vue

@@ -44,6 +44,10 @@ const props = defineProps({
     type: String,
     default: 'lg',
   },
+  strokeWidth: {
+    type: Number,
+    default: 5,
+  },
 });
 
 defineOptions({ name: 'UnnnicIconLoading' });
@@ -79,6 +83,7 @@ const sizeInPixels = computed(() => SIZE_MAP[props.size] ?? props.size);
 
 .unnnic-icon-loading {
   display: inline-flex;
+  align-items: center;
   user-select: none;
 
   svg {
@@ -87,7 +92,7 @@ const sizeInPixels = computed(() => SIZE_MAP[props.size] ?? props.size);
     circle {
       fill: none;
       stroke: currentColor;
-      stroke-width: 5;
+      stroke-width: v-bind(strokeWidth);
       stroke-linecap: round;
       animation: unnnic-icon-loading-dash 1s ease-in-out infinite;
     }

package/src/components/ui/popover/PopoverContent.vue

@@ -11,17 +11,12 @@
       "
     >
       <section :class="`unnnic-popover__content ${props.class || ''}`">
-        <component
-          :is="child"
-          v-for="(child, index) in contentChildren"
-          :key="index"
-        />
+        <slot />
       </section>
 
-      <component
-        :is="child"
-        v-for="(child, index) in footerChildren"
-        :key="index"
+      <div
+        ref="footerContainer"
+        data-testid="popover-footer-container"
       />
     </PopoverContent>
   </PopoverPortal>
@@ -29,13 +24,14 @@
 
 <script setup lang="ts">
 import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui';
-import type { HTMLAttributes, Slots, VNode } from 'vue';
-import { computed, useSlots } from 'vue';
+import type { HTMLAttributes } from 'vue';
+import { computed, provide, ref } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui';
 import { cn } from '@/lib/utils';
 import { useLayerZIndex } from '@/lib/layer-manager';
 import { useTeleportTarget } from '@/lib/teleport-target';
+import { POPOVER_FOOTER_TARGET } from './context';
 
 defineOptions({
   inheritAttrs: false,
@@ -63,43 +59,11 @@ const delegatedProps = reactiveOmit(props, 'class', 'size');
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
-const slots = useSlots() as Slots;
-
 const popoverZIndex = useLayerZIndex();
 const portalTarget = useTeleportTarget();
 
-const getComponentName = (vnode: VNode): string | undefined => {
-  const componentType = vnode.type as { name?: string; __name?: string };
-  return componentType?.name || componentType?.__name;
-};
-
-const isFooter = (vnode: VNode) =>
-  getComponentName(vnode) === 'UnnnicPopoverFooter';
-
-// This function recursively checks if there is a UnnnicPopoverFooter in the slot,
-// and splits the content into content and footer
-const splitSlot = computed(() => {
-  const footers: VNode[] = [];
-
-  const content = (function extract(vnodes: VNode[]): VNode[] {
-    return vnodes.filter((vnode: VNode) => {
-      if (!vnode || typeof vnode !== 'object') return true;
-      if (isFooter(vnode)) return footers.push(vnode) && false;
-
-      if (Array.isArray(vnode.children) && vnode.children.length) {
-        vnode.children = extract(vnode.children as VNode[]);
-        return (vnode.children as VNode[]).length > 0;
-      }
-
-      return true;
-    });
-  })(slots.default?.() || []);
-
-  return { content, footers };
-});
-
-const contentChildren = computed(() => splitSlot.value.content);
-const footerChildren = computed(() => splitSlot.value.footers);
+const footerContainer = ref<HTMLElement | null>(null);
+provide(POPOVER_FOOTER_TARGET, footerContainer);
 
 const contentWidth = computed(() => {
   if (props.width) return props.width;

package/src/components/ui/popover/PopoverFooter.vue

@@ -1,13 +1,32 @@
 <template>
-  <footer class="unnnic-popover__footer">
+  <Teleport
+    v-if="target"
+    :to="target"
+  >
+    <footer class="unnnic-popover__footer">
+      <slot />
+    </footer>
+  </Teleport>
+
+  <footer
+    v-else
+    class="unnnic-popover__footer"
+  >
     <slot />
   </footer>
 </template>
 
 <script setup lang="ts">
+import { inject } from 'vue';
+import { POPOVER_FOOTER_TARGET } from './context';
+
 defineOptions({
   name: 'UnnnicPopoverFooter',
 });
+
+// When rendered inside a PopoverContent, teleport into its footer container.
+// Falls back to inline rendering when used standalone (no target provided).
+const target = inject(POPOVER_FOOTER_TARGET, null);
 </script>
 
 <style lang="scss">

package/src/components/ui/popover/__tests__/PopoverFooter.spec.js

@@ -0,0 +1,116 @@
+import { mount, flushPromises } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import PopoverContent from '../PopoverContent.vue';
+import PopoverFooter from '../PopoverFooter.vue';
+
+// Render reka-ui's portal/content inline so the component's own markup
+// (`.unnnic-popover__content` + footer container) is testable. The native
+// Teleport is kept real so we can assert the footer actually moves.
+const inlineSlot = { template: '<div><slot /></div>' };
+
+const globalStubs = {
+  PopoverPortal: inlineSlot,
+  PopoverContent: inlineSlot,
+};
+
+// A child component that renders the footer from its own template, simulating
+// a footer nested inside a consumer component rather than a direct slot child.
+const NestedFooterChild = {
+  components: { PopoverFooter },
+  template: `
+    <section data-testid="nested-wrapper">
+      <PopoverFooter>
+        <button data-testid="nested-footer-btn">Save</button>
+      </PopoverFooter>
+    </section>
+  `,
+};
+
+const mountPopover = (defaultSlot) =>
+  mount(PopoverContent, {
+    attachTo: document.body,
+    slots: { default: defaultSlot },
+    global: {
+      stubs: globalStubs,
+      components: { PopoverFooter, NestedFooterChild },
+    },
+  });
+
+const content = (wrapper) => wrapper.find('.unnnic-popover__content');
+const footerContainer = (wrapper) =>
+  wrapper.find('[data-testid="popover-footer-container"]');
+
+describe('UnnnicPopoverFooter', () => {
+  it('renders a direct footer child inside the footer container, outside the content', async () => {
+    const wrapper = mountPopover(
+      `<p data-testid="body">Body</p>
+       <PopoverFooter><button data-testid="footer-btn">Save</button></PopoverFooter>`,
+    );
+    await flushPromises();
+
+    expect(
+      footerContainer(wrapper).find('.unnnic-popover__footer').exists(),
+    ).toBe(true);
+    expect(content(wrapper).find('.unnnic-popover__footer').exists()).toBe(
+      false,
+    );
+    expect(wrapper.find('[data-testid="footer-btn"]').exists()).toBe(true);
+
+    wrapper.unmount();
+  });
+
+  it('renders a footer nested inside a child component in the footer container', async () => {
+    const wrapper = mountPopover('<NestedFooterChild />');
+    await flushPromises();
+
+    expect(
+      footerContainer(wrapper).find('.unnnic-popover__footer').exists(),
+    ).toBe(true);
+    expect(
+      footerContainer(wrapper)
+        .find('[data-testid="nested-footer-btn"]')
+        .exists(),
+    ).toBe(true);
+    expect(content(wrapper).find('.unnnic-popover__footer').exists()).toBe(
+      false,
+    );
+
+    wrapper.unmount();
+  });
+
+  it('renders no footer area when no footer is provided', async () => {
+    const wrapper = mountPopover('<p data-testid="body">Body</p>');
+    await flushPromises();
+
+    expect(wrapper.find('.unnnic-popover__footer').exists()).toBe(false);
+    expect(footerContainer(wrapper).element.children.length).toBe(0);
+
+    wrapper.unmount();
+  });
+
+  it('teleports every footer into the container when multiple are provided', async () => {
+    const wrapper = mountPopover(
+      `<PopoverFooter><span>First</span></PopoverFooter>
+       <PopoverFooter><span>Second</span></PopoverFooter>`,
+    );
+    await flushPromises();
+
+    const footers = footerContainer(wrapper).findAll('.unnnic-popover__footer');
+    expect(footers).toHaveLength(2);
+    expect(content(wrapper).find('.unnnic-popover__footer').exists()).toBe(
+      false,
+    );
+
+    wrapper.unmount();
+  });
+
+  it('renders inline as a fallback when used without a PopoverContent target', () => {
+    const wrapper = mount(PopoverFooter, {
+      slots: { default: '<button data-testid="standalone">Save</button>' },
+    });
+
+    const footer = wrapper.find('.unnnic-popover__footer');
+    expect(footer.exists()).toBe(true);
+    expect(footer.find('[data-testid="standalone"]').exists()).toBe(true);
+  });
+});

package/src/components/ui/popover/context.ts

@@ -0,0 +1,4 @@
+import type { InjectionKey, Ref } from 'vue';
+
+export const POPOVER_FOOTER_TARGET: InjectionKey<Ref<HTMLElement | null>> =
+  Symbol('unnnicPopoverFooterTarget');

package/src/stories/Disclaimer.stories.js

@@ -1,4 +1,5 @@
 import UnnnicDisclaimer from '../components/Disclaimer/Disclaimer.vue';
+import UnnnicIconLoading from '../components/IconLoading/IconLoading.vue';
 
 export default {
   title: 'Feedback/Disclaimer',
@@ -75,3 +76,18 @@ export const WithDescriptionSlot = TemplateWithDescriptionSlot.bind({});
 WithDescriptionSlot.args = {
   ...Default.args,
 };
+
+const TemplateWithCustomIcon = (args) => ({
+  components: { UnnnicDisclaimer, UnnnicIconLoading },
+  setup() {
+    return { args };
+  },
+  template:
+    '<UnnnicDisclaimer v-bind="args"><template #icon><UnnnicIconLoading size="sm" scheme="fg-emphasized" stroke-width="3" /></template></UnnnicDisclaimer>',
+});
+
+export const WithCustomIcon = TemplateWithCustomIcon.bind({});
+WithCustomIcon.args = {
+  text: '',
+  description: 'Analysis in progress · 381 of 437 items processed.',
+};

package/src/stories/IconLoading.stories.js

@@ -55,3 +55,9 @@ export const CustomSize = {
     size: '64px',
   },
 };
+
+export const CustomStrokeWidth = {
+  args: {
+    strokeWidth: 3,
+  },
+};