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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.27.2",
+  "version": "3.28.2-alpha.0",
   "type": "commonjs",
   "files": [
     "dist",
@@ -140,4 +140,4 @@
     "vue-eslint-parser": "^10.4.0",
     "vue-tsc": "^3.0.5"
   }
-}
+}

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

@@ -73,20 +73,34 @@ const getComponentName = (vnode: VNode): string | undefined => {
   return componentType?.name || componentType?.__name;
 };
 
-const contentChildren = computed(() => {
-  const defaultSlot = slots.default?.() || [];
-  return defaultSlot.filter(
-    (vnode: VNode) => getComponentName(vnode) !== 'UnnnicPopoverFooter',
-  );
-});
+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;
 
-const footerChildren = computed(() => {
-  const defaultSlot = slots.default?.() || [];
-  return defaultSlot.filter(
-    (vnode: VNode) => getComponentName(vnode) === 'UnnnicPopoverFooter',
-  );
+      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 contentWidth = computed(() => {
   if (props.width) return props.width;
 

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

@@ -21,12 +21,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/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>
+    `,
+  }),
+};