@weni/unnnic-system 3.27.2 → 3.28.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.27.2",
+  "version": "3.28.1",
   "type": "commonjs",
   "files": [
     "dist",

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,29 +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 contentChildren = computed(() => {
-  const defaultSlot = slots.default?.() || [];
-  return defaultSlot.filter(
-    (vnode: VNode) => getComponentName(vnode) !== 'UnnnicPopoverFooter',
-  );
-});
-
-const footerChildren = computed(() => {
-  const defaultSlot = slots.default?.() || [];
-  return defaultSlot.filter(
-    (vnode: VNode) => getComponentName(vnode) === 'UnnnicPopoverFooter',
-  );
-});
+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">
@@ -21,12 +40,8 @@ $popover-space: $unnnic-space-4;
   padding: $popover-space;
 
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
   align-items: center;
   gap: $unnnic-space-2;
-
-  > * {
-    width: 100%;
-  }
 }
 </style>

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/PopoverOption.stories.js

@@ -1,4 +1,5 @@
 import { PopoverOption } from '../components/ui/popover';
+import UnnnicTag from '../components/Tag/Tag.vue';
 import colorsList from '../utils/colorsList';
 
 export default {
@@ -73,3 +74,55 @@ export const Default = {
     `,
   }),
 };
+
+export const WithTag = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Uses the default slot to render custom content, such as a label alongside a status tag. The option keeps the `space-between` layout, so the tag stays aligned to the end.',
+      },
+      source: {
+        code: `<UnnnicPopoverOption v-for="option in options" :key="option.value">
+  <span class="popover-option__label">{{ option.label }}</span>
+  <UnnnicTag
+    type="default"
+    size="small"
+    :scheme="statusConfig[option.status].scheme"
+    :text="statusConfig[option.status].text"
+  />
+</UnnnicPopoverOption>`,
+      },
+    },
+  },
+  render: () => ({
+    components: { PopoverOption, UnnnicTag },
+    data() {
+      return {
+        options: [
+          { label: 'John Doe', value: 'john-doe', status: 'online' },
+          { label: 'Jane Doe', value: 'jane-doe', status: 'lunch' },
+          { label: 'James Smith', value: 'james-smith', status: 'offline' },
+        ],
+        statusConfig: {
+          online: { scheme: 'green', text: 'Online' },
+          lunch: { scheme: 'orange', text: 'Lunch' },
+          offline: { scheme: 'gray', text: 'Offline' },
+        },
+      };
+    },
+    template: `
+    <section style="display: flex; flex-direction: column; gap: 8px; width: 280px;">
+      <PopoverOption v-for="option in options" :key="option.value" :label="option.label">
+        <span style="flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ option.label }}</span>
+        <unnnic-tag
+          type="default"
+          size="small"
+          :scheme="statusConfig[option.status].scheme"
+          :text="statusConfig[option.status].text"
+        />
+      </PopoverOption>
+    </section>
+    `,
+  }),
+};