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

package/dist/components/ui/popover/PopoverOption.vue.d.ts

@@ -0,0 +1,18 @@
+import { SchemeColor } from '../../../types/scheme-colors';
+interface PopoverOptionProps {
+    label: string;
+    disabled?: boolean;
+    active?: boolean;
+    focused?: boolean;
+    scheme?: SchemeColor;
+    icon?: string;
+}
+declare const _default: import('vue').DefineComponent<PopoverOptionProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<PopoverOptionProps> & Readonly<{}>, {
+    disabled: boolean;
+    icon: string;
+    scheme: SchemeColor;
+    active: boolean;
+    focused: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=PopoverOption.vue.d.ts.map

package/dist/components/ui/popover/PopoverOption.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverOption.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/popover/PopoverOption.vue"],"names":[],"mappings":"AAwHA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAOzD,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;;cALY,OAAO;UAIX,MAAM;YADJ,WAAW;YAFX,OAAO;aACN,OAAO;;AAwGnB,wBAQG"}

package/dist/components/ui/popover/index.d.ts

@@ -2,5 +2,6 @@ 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';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ui/popover/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/package.json

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

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>
+    `,
+  }),
+};