@weni/unnnic-system 3.11.3-alpha.1 → 3.11.3-alpha.3

package/package.json

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

package/src/components/Drawer/Drawer.vue

@@ -6,6 +6,7 @@
     @update:open="$event ? () => {} : back()"
   >
     <DrawerContent
+      v-bind="$attrs"
       :showOverlay="!withoutOverlay"
       data-testid="drawer-container"
       :size="mappedSize"
@@ -106,6 +107,7 @@ import {
 
 defineOptions({
   name: 'UnnnicDrawer',
+  inheritAttrs: false,
 });
 
 const props = defineProps({

package/src/components/Drawer/__tests__/Drawer.spec.js

@@ -10,6 +10,12 @@ describe('Drawer.vue', () => {
     UnnnicIcon: true,
     UnnnicButton: true,
     Teleport: templateSlot,
+    UnnnicDrawerNext: templateSlot,
+    UnnnicDrawerContent: templateSlot,
+    UnnnicDrawerFooter: templateSlot,
+    UnnnicDrawerClose: templateSlot,
+    UnnnicDrawerTitle: templateSlot,
+    UnnnicDrawerDescription: templateSlot,
   };
 
   beforeEach(() => {

package/src/components/ModalDialog/ModalDialog.vue

@@ -4,6 +4,7 @@
     @update:open="$emit('update:modelValue', $event)"
   >
     <UnnnicDialogContent
+      v-bind="$attrs"
       :size="size === 'sm' ? 'small' : size === 'lg' ? 'large' : 'medium'"
       :parentClass="['unnnic-modal-dialog', $attrs.class]"
       class="unnnic-modal-dialog__container"
@@ -101,6 +102,7 @@ export default {
     UnnnicDialogTitle,
     UnnnicDialogFooter,
   },
+  inheritAttrs: false,
   mixins: [UnnnicI18n],
   props: {
     modelValue: {

package/src/components/ui/dialog/Dialog.vue

@@ -2,6 +2,10 @@
 import type { DialogRootEmits, DialogRootProps } from 'reka-ui';
 import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
 
+defineOptions({
+  name: 'UnnnicDialog',
+});
+
 const props = defineProps<DialogRootProps>();
 const emits = defineEmits<DialogRootEmits>();
 

package/src/components/ui/dialog/DialogClose.vue

@@ -2,6 +2,10 @@
 import type { DialogCloseProps } from 'reka-ui';
 import { DialogClose } from 'reka-ui';
 
+defineOptions({
+  name: 'UnnnicDialogClose',
+});
+
 const props = defineProps<DialogCloseProps>();
 </script>
 

package/src/components/ui/dialog/DialogContent.vue

@@ -11,6 +11,10 @@ import {
 } from 'reka-ui';
 import { cn } from '@/lib/utils';
 
+defineOptions({
+  name: 'UnnnicDialogContent',
+});
+
 const props = withDefaults(
   defineProps<
     DialogContentProps & {

package/src/components/ui/dialog/DialogFooter.vue

@@ -2,6 +2,10 @@
 import type { HTMLAttributes } from 'vue';
 import { cn } from '@/lib/utils';
 
+defineOptions({
+  name: 'UnnnicDialogFooter',
+});
+
 const props = withDefaults(
   defineProps<{ class?: HTMLAttributes['class']; divider?: boolean }>(),
   {

package/src/components/ui/dialog/DialogHeader.vue

@@ -5,6 +5,10 @@ import UnnnicButton from '@/components/Button/Button.vue';
 import DialogClose from './DialogClose.vue';
 import UnnnicIcon, { SchemeColor } from '@/components/Icon.vue';
 
+defineOptions({
+  name: 'UnnnicDialogHeader',
+});
+
 const props = withDefaults(
   defineProps<{
     class?: HTMLAttributes['class'];

package/src/components/ui/dialog/DialogTitle.vue

@@ -5,6 +5,10 @@ import { reactiveOmit } from '@vueuse/core';
 import { DialogTitle, useForwardProps } from 'reka-ui';
 import { cn } from '@/lib/utils';
 
+defineOptions({
+  name: 'UnnnicDialogTitle',
+});
+
 const props = defineProps<
   DialogTitleProps & { class?: HTMLAttributes['class'] }
 >();

package/src/components/ui/dialog/DialogTrigger.vue

@@ -2,6 +2,10 @@
 import type { DialogTriggerProps } from 'reka-ui';
 import { DialogTrigger } from 'reka-ui';
 
+defineOptions({
+  name: 'UnnnicDialogTrigger',
+});
+
 const props = defineProps<DialogTriggerProps>();
 </script>
 

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

@@ -0,0 +1,116 @@
+<template>
+  <div
+    :class="[
+      'unnnic-popover-option',
+      {
+        'unnnic-popover-option--disabled': props.disabled,
+        'unnnic-popover-option--active': props.active,
+        'unnnic-popover-option--focused': props.focused,
+      },
+    ]"
+  >
+    <UnnnicIcon
+      v-if="props.icon"
+      :icon="props.icon"
+      :scheme="schemeColor"
+      size="ant"
+    />
+    <p
+      :class="[
+        'unnnic-popover-option__label',
+        `unnnic-popover-option__label--${schemeColor}`,
+        `unnnic-popover-option--disabled: ${props.disabled}`,
+      ]"
+    >
+      {{ props.label }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import UnnnicIcon from '@/components/Icon.vue';
+
+import type { SchemeColor } from '@/types/scheme-colors';
+import { computed } from 'vue';
+
+defineOptions({
+  name: 'UnnnicPopoverOption',
+});
+
+interface PopoverOptionProps {
+  label: string;
+  disabled?: boolean;
+  active?: boolean;
+  focused?: boolean;
+  scheme?: SchemeColor;
+  icon?: string;
+}
+
+const props = withDefaults(defineProps<PopoverOptionProps>(), {
+  disabled: false,
+  active: false,
+  focused: false,
+  scheme: 'fg-emphasized',
+  icon: '',
+});
+
+const schemeColor = computed(() => {
+  if (props.active) {
+    return 'fg-inverted';
+  }
+  if (props.disabled) {
+    return 'fg-muted';
+  }
+  return props.scheme;
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.unnnic-popover-option {
+  cursor: pointer;
+  border-radius: $unnnic-radius-1;
+  padding: $unnnic-space-2 $unnnic-space-4;
+  font: $unnnic-font-emphasis;
+  display: flex;
+  gap: $unnnic-space-2;
+  align-items: center;
+
+  &:hover:not(&--active):not(&--disabled),
+  &--focused {
+    background-color: $unnnic-color-bg-soft;
+  }
+
+  &--active {
+    background-color: $unnnic-color-bg-active;
+  }
+
+  &--disabled {
+    color: $unnnic-color-fg-muted;
+    background-color: $unnnic-color-bg-muted;
+    cursor: not-allowed;
+  }
+
+  &__label {
+    @each $name, $color in $unnnic-scheme-colors {
+      &.unnnic-popover-option__label--#{$name} {
+        color: $color;
+      }
+    }
+
+    &--disabled {
+      color: $unnnic-color-fg-muted;
+    }
+
+    &--active {
+      color: $unnnic-color-fg-inverted;
+    }
+  }
+}
+</style>

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

@@ -2,4 +2,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 { default as PopoverOption } from './PopoverOption.vue';
 export { PopoverAnchor } from 'reka-ui';

package/src/stories/Popover.stories.js

@@ -3,6 +3,7 @@ import {
   PopoverContent,
   PopoverFooter,
   PopoverTrigger,
+  PopoverOption,
 } from '../components/ui/popover';
 import UnnnicButton from '../components/Button/Button.vue';
 import UnnnicInput from '../components/Input/Input.vue';
@@ -88,6 +89,60 @@ export const Default = {
   }),
 };
 
+export const WithOptions = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Popover with options',
+      },
+      source: {
+        code: `
+<UnnnicPopover>
+  <UnnnicPopoverTrigger>
+    <UnnnicButton text="Open Popover with options" />
+  </UnnnicPopoverTrigger>
+  <UnnnicPopoverContent v-bind="args">
+    <UnnnicPopoverOption label="Option 1" />
+    <UnnnicPopoverOption label="Option 2" />
+    <UnnnicPopoverOption label="Option 3" />
+  </UnnnicPopoverContent>
+</UnnnicPopover>
+        `,
+      },
+    },
+  },
+  render: (args) => ({
+    components: {
+      Popover,
+      PopoverContent,
+      PopoverTrigger,
+      UnnnicButton,
+      PopoverOption,
+    },
+    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">
+            <section style="display: flex; flex-direction: column; gap: 8px;">
+              <PopoverOption label="View details" icon="info" scheme="fg-info" />
+              <PopoverOption label="Edit" icon="edit" scheme="fg-warning" />
+              <PopoverOption label="Delete" icon="delete" scheme="fg-critical" />
+              <PopoverOption label="Disable" icon="close" disabled />
+              <PopoverOption label="Active" icon="check" active />
+            </section>
+          </PopoverContent>
+        </Popover>
+      </div>
+    `,
+  }),
+};
+
 export const WithFooter = {
   parameters: {
     docs: {

package/src/stories/PopoverOption.stories.js

@@ -0,0 +1,77 @@
+import { PopoverOption } from '../components/ui/popover';
+import colorsList from '../utils/colorsList';
+
+export default {
+  title: 'Misc/PopoverOption',
+  component: PopoverOption,
+  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: {
+    label: {
+      control: { type: 'text' },
+      description: 'The label of the popover option',
+    },
+    disabled: {
+      control: { type: 'select' },
+      options: [true, false],
+      description: 'Whether the option is disabled',
+    },
+    active: {
+      control: { type: 'select' },
+      options: [true, false],
+      description: 'Whether the option is active',
+    },
+    focused: {
+      control: { type: 'select' },
+      options: [true, false],
+      description:
+        'Whether the option is focused (when the popover is open, the focused option is highlighted)',
+    },
+    scheme: {
+      control: { type: 'select' },
+      options: colorsList,
+      description: 'The scheme of the option',
+    },
+    icon: {
+      control: { type: 'text' },
+      description: 'The icon of the option',
+    },
+  },
+  args: {
+    label: 'Option',
+    disabled: false,
+    active: false,
+    scheme: 'fg-emphasized',
+    icon: '',
+  },
+};
+
+export const Default = {
+  render: (args) => ({
+    components: { PopoverOption },
+    setup() {
+      return { args };
+    },
+    template: `
+    <section style="display: flex; flex-direction: column; gap: 8px;">
+      <PopoverOption v-bind="args" />
+      <PopoverOption v-bind="args" disabled />
+      <PopoverOption v-bind="args" active />
+      <PopoverOption v-bind="args" focused />
+      <PopoverOption v-bind="args" icon="delete" scheme="fg-critical" />
+      <PopoverOption v-bind="args" icon="info" />
+    </section>
+    `,
+  }),
+};