@weni/unnnic-system 3.5.0 → 3.5.1-alpha.1

package/src/components/TemplatePreview/TemplatePreview.vue

@@ -75,10 +75,7 @@
         {{ template?.footer }}
       </footer>
     </section>
-    <footer
-      v-if="hasButtons"
-      class="unnnic-template-preview__buttons"
-    >
+    <footer v-if="hasButtons" class="unnnic-template-preview__buttons">
       <section
         v-for="(button, index) in template?.buttons"
         :key="`button-${index}`"
@@ -99,15 +96,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed } from "vue";
 
-import type { Template } from './types';
+import type { Template } from "./types";
 
-import imagePreview from '../../assets/img/previews/image-preview.png';
-import documentPreview from '../../assets/img/previews/doc-preview.png';
-import videoPreview from '../../assets/img/previews/video-preview.png';
+import imagePreview from "../../assets/img/previews/image-preview.png";
+import documentPreview from "../../assets/img/previews/doc-preview.png";
+import videoPreview from "../../assets/img/previews/video-preview.png";
 
-import UnnnicIcon from '../Icon.vue';
+import UnnnicIcon from "../Icon.vue";
 
 interface Props {
   template?: Template | null;
@@ -118,30 +115,30 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const hasHeader = computed(
-  () => props.template?.header && props.template.header.type,
+  () => props.template?.header && props.template.header.type
 );
 const hasHeaderMedia = computed(
-  () => !!props.template?.header && props.template.header.type === 'MEDIA',
+  () => !!props.template?.header && props.template.header.type === "MEDIA"
 );
 const hasBody = computed(
-  () => !!props.template?.body && props.template.body.length > 0,
+  () => !!props.template?.body && props.template.body.length > 0
 );
 const hasFooter = computed(
-  () => !!props.template?.footer && props.template.footer.length > 0,
+  () => !!props.template?.footer && props.template.footer.length > 0
 );
 const hasButtons = computed(
-  () => !!props.template?.buttons && props.template.buttons.length > 0,
+  () => !!props.template?.buttons && props.template.buttons.length > 0
 );
 const parsedBody = computed(() => {
-  if (!hasBody.value) return '';
+  if (!hasBody.value) return "";
 
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const result = props
-    .template!.body!.replaceAll('\n', '<br/>')
-    .replaceAll(/(?:\*)([^*<\n]+)(?:\*)/g, '<strong>$1</strong>')
-    .replaceAll(/(?:_)([^_<\n]+)(?:_)/g, '<i>$1</i>')
-    .replaceAll(/(?:~)([^~<\n]+)(?:~)/g, '<s>$1</s>')
-    .replaceAll(/(?:```)([^```<\n]+)(?:```)/g, '<tt>$1</tt>')
+    .template!.body!.replaceAll("\n", "<br/>")
+    .replaceAll(/(?:\*)([^*<\n]+)(?:\*)/g, "<strong>$1</strong>")
+    .replaceAll(/(?:_)([^_<\n]+)(?:_)/g, "<i>$1</i>")
+    .replaceAll(/(?:~)([^~<\n]+)(?:~)/g, "<s>$1</s>")
+    .replaceAll(/(?:```)([^```<\n]+)(?:```)/g, "<tt>$1</tt>")
     .replaceAll(/{{.*?}}/g, (match) => `<strong>${match}</strong>`);
 
   return result;
@@ -149,19 +146,19 @@ const parsedBody = computed(() => {
 
 const getButtonIcon = (buttonType) => {
   const buttonMapper = {
-    PHONE_NUMBER: 'phone',
-    URL: 'open_in_new',
-    COPY_CODE: 'content_copy',
-    FLOW: '',
-    QUICK_REPLY: 'reply',
+    PHONE_NUMBER: "phone",
+    URL: "open_in_new",
+    COPY_CODE: "content_copy",
+    FLOW: "",
+    QUICK_REPLY: "reply",
   };
 
-  return buttonMapper[buttonType] || '';
+  return buttonMapper[buttonType] || "";
 };
 </script>
 
 <style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
+@use "@/assets/scss/unnnic" as *;
 
 .unnnic-template-preview {
   display: flex;

package/src/components/TemplatePreview/TemplatePreviewModal.vue

@@ -1,9 +1,9 @@
 <template>
   <UnnnicModalDialog
-    :modelValue="modelValue"
+    :model-value="modelValue"
     @update:modelValue="$event === false && $emit('close')"
     :title="defaultTranslations.title[props.locale]"
-    :showCloseIcon="true"
+    :show-close-icon="true"
     class="unnnic-template-preview-modal"
   >
     <UnnnicTemplatePreview :template="template" />
@@ -11,16 +11,16 @@
 </template>
 
 <script lang="ts" setup>
-import UnnnicTemplatePreview from './TemplatePreview.vue';
-import UnnnicModalDialog from '../ModalDialog/ModalDialog.vue';
+import UnnnicTemplatePreview from "./TemplatePreview.vue";
+import UnnnicModalDialog from "../ModalDialog/ModalDialog.vue";
 
-import type { Template } from './types';
+import type { Template } from "./types";
 
 const defaultTranslations = {
   title: {
-    'pt-br': 'Visualizar modelo',
-    en: 'Template preview',
-    es: 'Vista previa de plantilla',
+    "pt-br": "Visualizar modelo",
+    en: "Template preview",
+    es: "Vista previa de plantilla",
   },
 };
 
@@ -31,7 +31,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  locale: 'en',
+  locale: "en",
 });
 
 defineEmits<{
@@ -40,7 +40,7 @@ defineEmits<{
 </script>
 
 <style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
+@use "@/assets/scss/unnnic" as *;
 
 :deep(.unnnic-modal-dialog__container__content) {
   display: flex;

package/src/components/TemplatePreview/types.d.ts

@@ -1,14 +1,14 @@
 export interface Template {
   header: {
-    type: 'TEXT' | 'MEDIA';
-    mediaType?: 'IMAGE' | 'VIDEO' | 'DOCUMENT';
+    type: "TEXT" | "MEDIA";
+    mediaType?: "IMAGE" | "VIDEO" | "DOCUMENT";
     text?: string | null;
     src?: string | null;
   };
   body?: string;
   footer?: string;
   buttons?: Array<{
-    type: 'QUICK_REPLY' | 'PHONE_NUMBER';
+    type: "QUICK_REPLY" | "PHONE_NUMBER";
     text: string;
     countryCode?: string;
     phoneNumber?: string;

package/src/components/index.ts

@@ -92,6 +92,9 @@ import DataTable from './DataTable/index.vue';
 import Chip from './Chip/Chip.vue';
 import TemplatePreview from './TemplatePreview/TemplatePreview.vue';
 import TemplatePreviewModal from './TemplatePreview/TemplatePreviewModal.vue';
+import Popover from './ui/popover/Popover.vue';
+import PopoverContent from './ui/popover/PopoverContent.vue';
+import PopoverTrigger from './ui/popover/PopoverTrigger.vue';
 
 type VueComponent = Component;
 
@@ -194,6 +197,9 @@ export const components: ComponentsMap = {
   unnnicTemplatePreviewModal: TemplatePreviewModal,
   unnnicDataTable: DataTable,
   unnnicChip: Chip,
+  unnnicPopover: Popover,
+  unnnicPopoverContent: PopoverContent,
+  unnnicPopoverTrigger: PopoverTrigger,
 };
 
 export const unnnicFontSize = fontSize;
@@ -291,6 +297,9 @@ export const unnnicSelectTime = SelectTime as VueComponent;
 export const unnnicChip = Chip;
 export const unnnicTemplatePreview = TemplatePreview as VueComponent;
 export const unnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
+export const unnnicPopover = Popover;
+export const unnnicPopoverContent = PopoverContent;
+export const unnnicPopoverTrigger = PopoverTrigger;
 
 export const UnnnicFontSize = fontSize;
 export const UnnnicFormElement = formElement;
@@ -387,3 +396,6 @@ export const UnnnicSelectTime = SelectTime as VueComponent;
 export const UnnnicChip = Chip;
 export const UnnnicTemplatePreview = TemplatePreview as VueComponent;
 export const UnnnicTemplatePreviewModal = TemplatePreviewModal as VueComponent;
+export const UnnnicPopover = Popover;
+export const UnnnicPopoverContent = PopoverContent;
+export const UnnnicPopoverTrigger = PopoverTrigger;

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,98 @@
+<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 || ''}`">
+        <slot />
+      </section>
+
+      <footer
+        v-if="$slots.footer"
+        class="unnnic-popover__footer"
+      >
+        <slot name="footer" />
+      </footer>
+    </PopoverContent>
+  </PopoverPortal>
+</template>
+
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui';
+import type { HTMLAttributes } 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',
+  },
+);
+const emits = defineEmits<PopoverContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'size');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</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;
+  }
+
+  &__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,12 @@
+<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">
+    <slot />
+  </PopoverTrigger>
+</template>

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

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

package/src/stories/AvatarIcon.stories.js

@@ -1,7 +1,6 @@
 import AvatarIcon from '../components/AvatarIcon/AvatarIcon.vue';
-import icons from '../utils/icons';
 
-const iconsOptions = Object.keys(icons);
+const iconsOptions = [];
 
 const schemes = [
   'feedback-red',

package/src/stories/ButtonIcon.stories.js

@@ -1,7 +1,6 @@
 import UnnnicButtonIcon from '../components/Button/ButtonIcon.vue';
-import icons from '../utils/icons';
 
-const iconsOptions = Object.keys(icons);
+const iconsOptions = ['add'];
 
 export default {
   title: 'Form/ButtonIcon',

package/src/stories/Icon.stories.js

@@ -1,7 +1,15 @@
 import UnnnicIcon from '../components/Icon.vue';
-import icons from '../utils/icons';
 
-const iconsOptions = Object.keys(icons);
+const iconsOptions = [
+  'add',
+  'add-1',
+  'warning',
+  'bi:stars',
+  'indicator',
+  'fitness-biceps-1',
+  'close-1',
+  'check-2',
+];
 
 const schemes = [
   'background-solo',
@@ -94,27 +102,27 @@ const schemes = [
 ];
 
 export default {
-  title: 'example/Icon',
+  title: 'Misc/Icon',
   component: UnnnicIcon,
   argTypes: {
-    scheme: { control: { type: 'select', options: schemes } },
+    scheme: { control: { type: 'select' }, options: schemes },
     size: {
       control: {
         type: 'select',
-        options: [
-          'nano',
-          'xs',
-          'sm',
-          'md',
-          'lg',
-          'avatar-lg',
-          'avatar-md',
-          'avatar-sm',
-          'avatar-xs',
-          'avatar-nano',
-        ],
       },
+      options: [
+        'xs',
+        'sm',
+        'md',
+        'lg',
+        'avatar-lg',
+        'avatar-md',
+        'avatar-sm',
+        'avatar-xs',
+        'avatar-nano',
+      ],
     },
+    icon: { control: { type: 'select' }, options: iconsOptions },
   },
 };
 

package/src/stories/InputNext.stories.js

@@ -1,8 +1,7 @@
 import { action } from '@storybook/addon-actions';
 import UnnnicInputNext from '../components/InputNext/InputNext.vue';
-import icons from '../utils/icons';
 
-const iconsOptions = Object.keys(icons);
+const iconsOptions = [];
 
 export default {
   title: 'Form/InputNext',

package/src/stories/ModalNext.stories.js

@@ -1,9 +1,8 @@
 import unnnicModalNext from '../components/ModalNext/ModalNext.vue';
-import icons from '../utils/icons';
 
 import { action } from '@storybook/addon-actions';
 
-const iconsOptions = Object.keys(icons);
+const iconsOptions = [];
 
 const schemesOptions = [
   'feedback-red',