@weni/unnnic-system 3.7.1 → 3.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.7.1",
+  "version": "3.8.0",
   "type": "commonjs",
   "files": [
     "dist",
@@ -53,6 +53,7 @@
   "dependencies": {
     "@iconify/vue": "^5.0.0",
     "@vueuse/components": "^10.4.1",
+    "@vueuse/core": "^14.0.0",
     "emoji-mart-vue-fast": "^15.0.5",
     "lodash": "^4.17.21",
     "lucide-vue-next": "^0.546.0",

package/src/components/index.ts

@@ -90,6 +90,10 @@ import Navigator from './Navigator/index.vue';
 import SelectTime from './SelectTime/index.vue';
 import DataTable from './DataTable/index.vue';
 import Chip from './Chip/Chip.vue';
+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 TemplatePreview from './TemplatePreview/TemplatePreview.vue';
 import TemplatePreviewModal from './TemplatePreview/TemplatePreviewModal.vue';
 
@@ -194,6 +198,9 @@ export const components: ComponentsMap = {
   unnnicTemplatePreviewModal: TemplatePreviewModal,
   unnnicDataTable: DataTable,
   unnnicChip: Chip,
+  unnnicPopover: Popover,
+  unnnicPopoverContent: PopoverContent,
+  unnnicPopoverTrigger: PopoverTrigger,
 };
 
 export const unnnicFontSize = fontSize;
@@ -289,6 +296,10 @@ export const unnnicNavigator = Navigator;
 export const unnnicDataTable = DataTable as VueComponent;
 export const unnnicSelectTime = SelectTime as VueComponent;
 export const unnnicChip = Chip;
+export const unnnicPopover = Popover;
+export const unnnicPopoverContent = PopoverContent;
+export const unnnicPopoverTrigger = PopoverTrigger;
+export const unnnicPopoverFooter = PopoverFooter;
 export const unnnicTemplatePreview = TemplatePreview as VueComponent;
 export const unnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
 
@@ -385,5 +396,9 @@ export const UnnnicNavigator = Navigator;
 export const UnnnicDataTable = DataTable as VueComponent;
 export const UnnnicSelectTime = SelectTime as VueComponent;
 export const UnnnicChip = Chip;
+export const UnnnicPopover = Popover;
+export const UnnnicPopoverContent = PopoverContent;
+export const UnnnicPopoverTrigger = PopoverTrigger;
+export const UnnnicPopoverFooter = PopoverFooter;
 export const UnnnicTemplatePreview = TemplatePreview as VueComponent;
 export const UnnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui';
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui';
+
+defineOptions({
+  name: 'UnnnicPopover',
+});
+
+const props = defineProps<PopoverRootProps>();
+const emits = defineEmits<PopoverRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>

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

@@ -0,0 +1,109 @@
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'unnnic-popover',
+          `unnnic-popover--size-${props.size}`,
+          'bg-popover text-popover-foreground outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        )
+      "
+    >
+      <section :class="`unnnic-popover__content ${props.class || ''}`">
+        <component
+          :is="child"
+          v-for="(child, index) in contentChildren"
+          :key="index"
+        />
+      </section>
+
+      <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, 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';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<
+    PopoverContentProps & {
+      class?: HTMLAttributes['class'];
+      size?: 'small' | 'medium' | 'large';
+    }
+  >(),
+  {
+    align: 'center',
+    sideOffset: 4,
+    size: 'medium',
+    class: '',
+  },
+);
+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">
+@use '@/assets/scss/unnnic' as *;
+
+$popover-space: $unnnic-space-4;
+
+.unnnic-popover {
+  z-index: 10000;
+
+  border-radius: $unnnic-radius-2;
+  box-shadow: $unnnic-shadow-1;
+
+  &--size-small {
+    width: 240px;
+  }
+  &--size-medium {
+    width: 320px;
+  }
+  &--size-large {
+    width: 400px;
+  }
+
+  &__content {
+    padding: $popover-space;
+  }
+}
+</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/PopoverTrigger.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from 'reka-ui';
+import { PopoverTrigger } from 'reka-ui';
+
+const props = defineProps<PopoverTriggerProps>();
+</script>
+
+<template>
+  <PopoverTrigger
+    v-bind="props"
+    class="unnnic-popover-trigger"
+  >
+    <slot />
+  </PopoverTrigger>
+</template>
+
+<style scoped>
+.unnnic-popover-trigger {
+  border: none;
+  background: transparent;
+  padding: 0;
+}
+</style>

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

@@ -0,0 +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

@@ -0,0 +1,396 @@
+import {
+  Popover,
+  PopoverContent,
+  PopoverFooter,
+  PopoverTrigger,
+} from '../components/ui/popover';
+import UnnnicButton from '../components/Button/Button.vue';
+import UnnnicInput from '../components/Input/Input.vue';
+import UnnnicLabel from '../components/Label/Label.vue';
+
+export default {
+  title: 'Misc/Popover',
+  component: Popover,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      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).
+          <br/>
+          API reference: https://www.reka-ui.com/docs/components/popover
+          `,
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+      description: 'The size of the popover',
+    },
+    side: {
+      control: { type: 'select' },
+      options: ['top', 'right', 'bottom', 'left'],
+      description: 'The preferred side of the trigger to render against',
+    },
+    align: {
+      control: { type: 'select' },
+      options: ['start', 'center', 'end'],
+      description: 'The preferred alignment against the trigger',
+    },
+  },
+  args: {
+    size: 'medium',
+    side: 'bottom',
+    align: 'center',
+  },
+};
+
+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() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; justify-content: center; align-items: center; min-height: 300px;">
+        <Popover>
+          <PopoverTrigger>
+            <UnnnicButton text="Open Popover" />
+          </PopoverTrigger>
+          <PopoverContent v-bind="args">
+            <p style="margin: 0;">This is a simple popover with some content inside.</p>
+          </PopoverContent>
+        </Popover>
+      </div>
+    `,
+  }),
+};
+
+export const WithFooter = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '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,
+      PopoverFooter,
+      PopoverTrigger,
+      UnnnicButton,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; justify-content: center; align-items: center; min-height: 300px;">
+        <Popover>
+          <PopoverTrigger>
+            <UnnnicButton text="Open Popover" />
+          </PopoverTrigger>
+          <PopoverContent v-bind="args">
+            <p style="margin: 0;">This popover has a footer with action buttons.</p>
+            <PopoverFooter>
+              <UnnnicButton text="Cancel" type="tertiary" />
+              <UnnnicButton text="Save" type="primary" />
+            </PopoverFooter>
+          </PopoverContent>
+        </Popover>
+      </div>
+    `,
+  }),
+};
+
+export const WithForm = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Popover containing a form with inputs and footer actions.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: {
+      Popover,
+      PopoverContent,
+      PopoverFooter,
+      PopoverTrigger,
+      UnnnicButton,
+      UnnnicInput,
+      UnnnicLabel,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; justify-content: center; align-items: center; min-height: 400px;">
+        <Popover>
+          <PopoverTrigger>
+            <UnnnicButton text="Edit Profile" iconLeft="edit" />
+          </PopoverTrigger>
+          <PopoverContent v-bind="args">
+            <h3 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 700;">Edit Profile</h3>
+            <form>
+              <UnnnicLabel label="Name" />
+              <UnnnicInput placeholder="Enter your name" />
+              <br />
+              <UnnnicLabel label="Email" />
+              <UnnnicInput placeholder="Enter your email" type="email" />
+            </form>
+            <PopoverFooter>
+              <UnnnicButton text="Cancel" type="tertiary" />
+              <UnnnicButton text="Save" type="primary" />
+            </PopoverFooter>
+          </PopoverContent>
+        </Popover>
+      </div>
+    `,
+  }),
+};
+
+export const Sizes = {
+  parameters: {
+    docs: {
+      description: {
+        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) => ({
+    components: { Popover, PopoverContent, PopoverTrigger, UnnnicButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; justify-content: space-around; align-items: center; min-height: 400px; gap: 32px;">
+        <Popover>
+          <PopoverTrigger>
+            <UnnnicButton text="Small" />
+          </PopoverTrigger>
+          <PopoverContent size="small">
+            <p style="margin: 0;">Small popover (240px)</p>
+          </PopoverContent>
+        </Popover>
+
+        <Popover>
+          <PopoverTrigger>
+            <UnnnicButton text="Medium" />
+          </PopoverTrigger>
+          <PopoverContent size="medium">
+            <p style="margin: 0;">Medium popover (320px)</p>
+          </PopoverContent>
+        </Popover>
+
+        <Popover>
+          <PopoverTrigger>
+            <UnnnicButton text="Large" />
+          </PopoverTrigger>
+          <PopoverContent size="large">
+            <p style="margin: 0;">Large popover (400px)</p>
+          </PopoverContent>
+        </Popover>
+      </div>
+    `,
+  }),
+};
+
+export const Placements = {
+  parameters: {
+    docs: {
+      description: {
+        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) => ({
+    components: { Popover, PopoverContent, PopoverTrigger, UnnnicButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; padding: 100px;">
+        <Popover>
+          <PopoverTrigger>
+            <UnnnicButton text="Top" style="width: 100%;" />
+          </PopoverTrigger>
+          <PopoverContent side="top" align="center">
+            <p style="margin: 0;">Popover on top</p>
+          </PopoverContent>
+        </Popover>
+
+        <Popover>
+          <PopoverTrigger>
+            <UnnnicButton text="Bottom" style="width: 100%;" />
+          </PopoverTrigger>
+          <PopoverContent side="bottom" align="center">
+            <p style="margin: 0;">Popover on bottom</p>
+          </PopoverContent>
+        </Popover>
+
+        <Popover>
+          <PopoverTrigger>
+            <UnnnicButton text="Right" style="width: 100%;" />
+          </PopoverTrigger>
+          <PopoverContent side="right" align="center">
+            <p style="margin: 0;">Popover on right</p>
+          </PopoverContent>
+        </Popover>
+
+        <Popover>
+          <PopoverTrigger>
+            <UnnnicButton text="Left" style="width: 100%;" />
+          </PopoverTrigger>
+          <PopoverContent side="left" align="center">
+            <p style="margin: 0;">Popover on left</p>
+          </PopoverContent>
+        </Popover>
+      </div>
+    `,
+  }),
+};
+
+export const RichContent = {
+  args: {
+    size: 'large',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Example of a popover with rich, structured content and footer actions.',
+      },
+    },
+  },
+  render: (args) => ({
+    components: {
+      Popover,
+      PopoverContent,
+      PopoverFooter,
+      PopoverTrigger,
+      UnnnicButton,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: flex; justify-content: center; align-items: center; min-height: 400px;">
+        <Popover>
+          <PopoverTrigger>
+            <UnnnicButton text="Show Details" iconLeft="info" />
+          </PopoverTrigger>
+          <PopoverContent v-bind="args">
+            <div>
+              <h3 style="margin: 0 0 8px 0; font-size: 16px; font-weight: 700;">User Information</h3>
+              <div style="display: flex; flex-direction: column; gap: 12px;">
+                <div style="display: flex; gap: 8px;">
+                  <span style="font-weight: 600;">Name:</span>
+                  <span>John Doe</span>
+                </div>
+                <div style="display: flex; gap: 8px;">
+                  <span style="font-weight: 600;">Email:</span>
+                  <span>john.doe@example.com</span>
+                </div>
+                <div style="display: flex; gap: 8px;">
+                  <span style="font-weight: 600;">Role:</span>
+                  <span>Administrator</span>
+                </div>
+                <div style="display: flex; gap: 8px;">
+                  <span style="font-weight: 600;">Status:</span>
+                  <span style="color: #4CAF50;">Active</span>
+                </div>
+              </div>
+            </div>
+            <PopoverFooter>
+              <UnnnicButton text="View Profile" type="primary" />
+            </PopoverFooter>
+          </PopoverContent>
+        </Popover>
+      </div>
+    `,
+  }),
+};