@weni/unnnic-system 3.7.1-alpha.2 → 3.7.1-alpha.3

package/package.json

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

package/src/components/Icon.vue

@@ -197,7 +197,6 @@ $icon-sizes:
   -webkit-font-feature-settings: 'liga';
   -webkit-font-smoothing: antialiased;
 
-  cursor: default;
   user-select: none;
 
   &--filled {

package/src/components/Input/Input.vue

@@ -6,6 +6,8 @@
     :message="message"
     :tooltip="tooltip"
     :error="computedError"
+    :class="['unnnic-form', size]"
+    data-testid="form-element"
   >
     <TextInput
       v-bind="$attrs"

package/src/components/Input/__test__/Input.spec.js

@@ -40,29 +40,21 @@ describe('Input.vue', () => {
     expect(wrapper.exists()).toBe(true);
   });
 
-  test('renders label correctly', async () => {
-    const label = wrapper.find('.unnnic-form__label');
-    expect(label.exists()).toBe(true);
-    expect(label.text()).toBe('Sample Label');
-
-    await wrapper.setProps({ label: null });
-    expect(wrapper.find('.unnnic-form__label').exists()).toBe(false);
-  });
-
-  test('renders message correctly', async () => {
-    const message = wrapper.find('.unnnic-form__message');
-    expect(message.exists()).toBe(true);
-    expect(message.text()).toBe('Error message');
-
-    await wrapper.setProps({ message: null });
-    expect(wrapper.find('.unnnic-form__message').exists()).toBe(false);
+  test('renders form element correctly', async () => {
+    const formElement = wrapper.findComponent('[data-testid="form-element"]');
+    expect(formElement.exists()).toBe(true);
+    expect(formElement.props('label')).toBe('Sample Label');
+    expect(formElement.props('size')).toBe('md');
+    expect(formElement.props('message')).toBe('Error message');
+    expect(formElement.props('disabled')).toBe(false);
+    expect(formElement.props('tooltip')).toBe('');
+    expect(formElement.props('error')).toBe(false);
   });
 
-  test('applies the correct size class', async () => {
-    expect(wrapper.classes()).toContain('md');
-
-    await wrapper.setProps({ size: 'sm' });
-    expect(wrapper.classes()).toContain('sm');
+  test('renders maxlength counter correctly', async () => {
+    expect(wrapper.text()).not.toContain('0 / 10');
+    await wrapper.setProps({ maxlength: 10, showMaxlengthCounter: true });
+    expect(wrapper.text()).toContain('0 / 10');
   });
 
   test('renders TextInput component', () => {
@@ -96,18 +88,6 @@ describe('Input.vue', () => {
     expect(wrapper.vm.val).toBe('new value');
   });
 
-  test('hasLabelSlot computed property works correctly', async () => {
-    expect(wrapper.vm.hasLabelSlot).toBe(false);
-
-    wrapper = mount(Input, {
-      slots: {
-        label: '<span>Custom Label</span>',
-      },
-    });
-
-    expect(wrapper.vm.hasLabelSlot).toBe(true);
-  });
-
   test('correctly mounts with initial modelValue', async () => {
     wrapper = mount(Input, {
       props: {

package/src/components/Input/__test__/__snapshots__/Input.spec.js.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Input.vue > matches the snapshot 1`] = `
-"<section data-v-9f8d6c86="" data-v-d890ad85="" class="unnnic-form-element">
+"<section data-v-9f8d6c86="" data-v-d890ad85="" class="unnnic-form-element unnnic-form md" data-testid="form-element">
   <section data-v-7f222291="" data-v-9f8d6c86="" class="unnnic-label unnnic-form-element__label">
     <p data-v-7f222291="" class="unnnic-label__label">Sample Label</p>
     <!--v-if-->

package/src/components/index.ts

@@ -98,6 +98,7 @@ import { toast } from './Toast/ToastManager';
 import Popover from './ui/popover/Popover.vue';
 import PopoverContent from './ui/popover/PopoverContent.vue';
 import PopoverTrigger from './ui/popover/PopoverTrigger.vue';
+import PopoverFooter from './ui/popover/PopoverFooter.vue';
 import Dialog from './ui/dialog/Dialog.vue';
 import DialogContent from './ui/dialog/DialogContent.vue';
 import DialogFooter from './ui/dialog/DialogFooter.vue';
@@ -321,6 +322,7 @@ export const unnnicChip = Chip;
 export const unnnicPopover = Popover;
 export const unnnicPopoverContent = PopoverContent;
 export const unnnicPopoverTrigger = PopoverTrigger;
+export const unnnicPopoverFooter = PopoverFooter;
 export const unnnicDialog = Dialog;
 export const unnnicDialogContent = DialogContent;
 export const unnnicDialogFooter = DialogFooter;
@@ -429,6 +431,7 @@ export const UnnnicToastManager = toast;
 export const UnnnicPopover = Popover;
 export const UnnnicPopoverContent = PopoverContent;
 export const UnnnicPopoverTrigger = PopoverTrigger;
+export const UnnnicPopoverFooter = PopoverFooter;
 export const UnnnicDialog = Dialog;
 export const UnnnicDialogContent = DialogContent;
 export const UnnnicDialogFooter = DialogFooter;

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

@@ -11,22 +11,26 @@
       "
     >
       <section :class="`unnnic-popover__content ${props.class || ''}`">
-        <slot />
+        <component
+          :is="child"
+          v-for="(child, index) in contentChildren"
+          :key="index"
+        />
       </section>
 
-      <footer
-        v-if="$slots.footer"
-        class="unnnic-popover__footer"
-      >
-        <slot name="footer" />
-      </footer>
+      <component
+        :is="child"
+        v-for="(child, index) in footerChildren"
+        :key="index"
+      />
     </PopoverContent>
   </PopoverPortal>
 </template>
 
 <script setup lang="ts">
 import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui';
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes, VNode } from 'vue';
+import { computed, useSlots } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui';
 import { cn } from '@/lib/utils';
@@ -46,6 +50,7 @@ const props = withDefaults(
     align: 'center',
     sideOffset: 4,
     size: 'medium',
+    class: '',
   },
 );
 const emits = defineEmits<PopoverContentEmits>();
@@ -53,6 +58,27 @@ const emits = defineEmits<PopoverContentEmits>();
 const delegatedProps = reactiveOmit(props, 'class', 'size');
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const slots = useSlots();
+
+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',
+  );
+});
 </script>
 
 <style lang="scss">
@@ -79,20 +105,5 @@ $popover-space: $unnnic-space-4;
   &__content {
     padding: $popover-space;
   }
-
-  &__footer {
-    border-top: 1px solid $unnnic-color-border-soft;
-
-    padding: $popover-space;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: $unnnic-space-2;
-
-    > * {
-      width: 100%;
-    }
-  }
 }
 </style>

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

@@ -0,0 +1,32 @@
+<template>
+  <footer class="unnnic-popover__footer">
+    <slot />
+  </footer>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: 'UnnnicPopoverFooter',
+});
+</script>
+
+<style lang="scss">
+@use '@/assets/scss/unnnic' as *;
+
+$popover-space: $unnnic-space-4;
+
+.unnnic-popover__footer {
+  border-top: 1px solid $unnnic-color-border-soft;
+
+  padding: $popover-space;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: $unnnic-space-2;
+
+  > * {
+    width: 100%;
+  }
+}
+</style>

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

@@ -1,4 +1,5 @@
 export { default as Popover } from './Popover.vue';
 export { default as PopoverContent } from './PopoverContent.vue';
+export { default as PopoverFooter } from './PopoverFooter.vue';
 export { default as PopoverTrigger } from './PopoverTrigger.vue';
 export { PopoverAnchor } from 'reka-ui';

package/src/stories/Popover.stories.js

@@ -1,6 +1,7 @@
 import {
   Popover,
   PopoverContent,
+  PopoverFooter,
   PopoverTrigger,
 } from '../components/ui/popover';
 import UnnnicButton from '../components/Button/Button.vue';
@@ -16,7 +17,7 @@ export default {
       description: {
         component: `A popover component that displays rich content in a portal, floating on top of other content.
           <br/>
-          It supports three sizes (small, medium, large) and optional footer slot for action buttons, for example.
+          It supports three sizes (small, medium, large).
           <br/>
           API reference: https://www.reka-ui.com/docs/components/popover
           `,
@@ -48,6 +49,25 @@ export default {
 };
 
 export const Default = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'A simple popover with some content inside.',
+      },
+      source: {
+        code: `
+<UnnnicPopover>
+  <UnnnicPopoverTrigger>
+    <UnnnicButton text="Open Popover" />
+  </UnnnicPopoverTrigger>
+  <UnnnicPopoverContent v-bind="args">
+    <p style="margin: 0;">This is a simple popover with some content inside.</p>
+  </UnnnicPopoverContent>
+</UnnnicPopover>
+        `,
+      },
+    },
+  },
   render: (args) => ({
     components: { Popover, PopoverContent, PopoverTrigger, UnnnicButton },
     setup() {
@@ -73,12 +93,34 @@ export const WithFooter = {
     docs: {
       description: {
         story:
-          'Popover with action buttons in the footer using the `#footer` slot.',
+          'Popover with action buttons in the footer using the `PopoverFooter` component.',
+      },
+      source: {
+        code: `
+<UnnnicPopover>
+  <UnnnicPopoverTrigger>
+    <UnnnicButton text="Open Popover" />
+  </UnnnicPopoverTrigger>
+  <UnnnicPopoverContent v-bind="args">
+    <p style="margin: 0;">This popover has a footer with action buttons.</p>
+    <UnnnicPopoverFooter>
+      <UnnnicButton text="Cancel" type="tertiary" />
+      <UnnnicButton text="Save" type="primary" />
+    </UnnnicPopoverFooter>
+  </UnnnicPopoverContent>
+</UnnnicPopover>
+        `,
       },
     },
   },
   render: (args) => ({
-    components: { Popover, PopoverContent, PopoverTrigger, UnnnicButton },
+    components: {
+      Popover,
+      PopoverContent,
+      PopoverFooter,
+      PopoverTrigger,
+      UnnnicButton,
+    },
     setup() {
       return { args };
     },
@@ -90,10 +132,10 @@ export const WithFooter = {
           </PopoverTrigger>
           <PopoverContent v-bind="args">
             <p style="margin: 0;">This popover has a footer with action buttons.</p>
-            <template #footer>
+            <PopoverFooter>
               <UnnnicButton text="Cancel" type="tertiary" />
               <UnnnicButton text="Save" type="primary" />
-            </template>
+            </PopoverFooter>
           </PopoverContent>
         </Popover>
       </div>
@@ -113,6 +155,7 @@ export const WithForm = {
     components: {
       Popover,
       PopoverContent,
+      PopoverFooter,
       PopoverTrigger,
       UnnnicButton,
       UnnnicInput,
@@ -136,10 +179,10 @@ export const WithForm = {
               <UnnnicLabel label="Email" />
               <UnnnicInput placeholder="Enter your email" type="email" />
             </form>
-            <template #footer>
+            <PopoverFooter>
               <UnnnicButton text="Cancel" type="tertiary" />
               <UnnnicButton text="Save" type="primary" />
-            </template>
+            </PopoverFooter>
           </PopoverContent>
         </Popover>
       </div>
@@ -154,6 +197,25 @@ export const Sizes = {
         story:
           'The popover comes in three sizes: small (240px), medium (320px), and large (400px).',
       },
+      source: {
+        code: `
+<UnnnicPopover>
+  <!-- Small popover (240px) -->
+  <UnnnicPopoverContent size="small">
+  ...
+  </UnnnicPopoverContent>
+
+  <!-- Medium popover (320px) -->
+  <UnnnicPopoverContent size="medium">
+  ...
+  </UnnnicPopoverContent>
+  <!-- Large popover (400px) -->
+  <UnnnicPopoverContent size="large">
+  ...
+  </UnnnicPopoverContent>
+</UnnnicPopover>
+        `,
+      },
     },
   },
   render: (args) => ({
@@ -201,6 +263,28 @@ export const Placements = {
         story:
           'The popover can be positioned on any side of the trigger: top, bottom, left, or right.',
       },
+      source: {
+        code: `
+<UnnnicPopover>
+  <!-- Top -->
+  <UnnnicPopoverContent side="top">
+  ...
+  </UnnnicPopoverContent>
+  <!-- Bottom -->
+  <UnnnicPopoverContent side="bottom">
+  ...
+  </UnnnicPopoverContent>
+  <!-- Right -->
+  <UnnnicPopoverContent side="right">
+  ...
+  </UnnnicPopoverContent>
+  <!-- Left -->
+  <UnnnicPopoverContent side="left">
+  ...
+  </UnnnicPopoverContent>
+</UnnnicPopover>
+        `,
+      },
     },
   },
   render: (args) => ({
@@ -263,7 +347,13 @@ export const RichContent = {
     },
   },
   render: (args) => ({
-    components: { Popover, PopoverContent, PopoverTrigger, UnnnicButton },
+    components: {
+      Popover,
+      PopoverContent,
+      PopoverFooter,
+      PopoverTrigger,
+      UnnnicButton,
+    },
     setup() {
       return { args };
     },
@@ -295,9 +385,9 @@ export const RichContent = {
                 </div>
               </div>
             </div>
-            <template #footer>
+            <PopoverFooter>
               <UnnnicButton text="View Profile" type="primary" />
-            </template>
+            </PopoverFooter>
           </PopoverContent>
         </Popover>
       </div>