@weni/unnnic-system 3.2.9-alpha.10 → 3.2.9-alpha.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.2.9-alpha.10",
-  "type": "module",
+  "version": "3.2.9-alpha.12",
+  "type": "commonjs",
   "files": [
     "dist",
     "src",

package/src/components/Button/Button.vue

@@ -133,11 +133,9 @@ const isSizePropValid = computed(() => {
 });
 
 const buttonType = computed(() => {
-  return (
-    {
-      alternative: 'tertiary',
-    }[props.type] || props.type
-  );
+  return {
+    'alternative': 'tertiary',
+  }[props.type] || props.type;
 });
 
 const isTypePropValid = computed(() => {
@@ -162,8 +160,7 @@ const validateProps = () => {
 
     if (!isTypePropValid.value) {
       errorMessage += ' Invalid type prop.';
-      errorMessage +=
-        ' Please provide one of the following types: primary, secondary, tertiary, warning, attention. Alternative is discontinued and it was forced renamed to tertiary.';
+      errorMessage += ' Please provide one of the following types: primary, secondary, tertiary, warning, attention. Alternative is discontinued and it was forced renamed to tertiary.';
     }
 
     throw new Error(errorMessage);

package/src/components/ChartFunnel/ChartFunnel.vue

@@ -6,6 +6,7 @@
 </template>
 
 <script>
+import ChartFunnelTwoRows from './SvgFunnel/ChartFunnelTwoRows.vue';
 import ChartFunnelThreeRows from './SvgFunnel/ChartFunnelThreeRows.vue';
 import ChartFunnelFourRows from './SvgFunnel/ChartFunnelFourRows.vue';
 import ChartFunnelFiveRows from './SvgFunnel/ChartFunnelFiveRows.vue';
@@ -15,6 +16,7 @@ export default {
   name: 'UnnnicChartFunnel',
 
   components: {
+    ChartFunnelTwoRows,
     ChartFunnelThreeRows,
     ChartFunnelFourRows,
     ChartFunnelFiveRows,
@@ -36,11 +38,13 @@ export default {
     chartComponent() {
       const componentMap = {
         default: {
+          2: ChartDefaultFunnelBase,
           3: ChartDefaultFunnelBase,
           4: ChartDefaultFunnelBase,
           5: ChartDefaultFunnelBase,
         },
         basic: {
+          2: 'ChartFunnelTwoRows',
           3: 'ChartFunnelThreeRows',
           4: 'ChartFunnelFourRows',
           5: 'ChartFunnelFiveRows',

package/src/components/ChartFunnel/DefaultFunnel/ChartDefaultFunnelBase.vue

@@ -44,6 +44,8 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+
 interface FunnelStep {
   percentage: number | string;
   value: number | string;
@@ -52,9 +54,14 @@ interface FunnelStep {
   color: string;
 }
 
-defineProps<{
+const props = defineProps<{
   data: FunnelStep[];
 }>();
+
+const calculatedTransform = computed(() => {
+  return `skew(${props.data.length === 2 ? '-8deg': '-12deg'}, 0deg) translateX(-20px)`;
+});
+
 </script>
 
 <style lang="scss" scoped>
@@ -76,7 +83,7 @@ defineProps<{
   &__card {
     height: 100%;
     transition: background-color 0.3s ease;
-    transform: skew(-12deg, 0deg) translateX(-20px);
+    transform: v-bind(calculatedTransform);
     border-radius: 0 0 $unnnic-spacing-xs 0;
 
     &.first-item {

package/src/components/ChartFunnel/SvgFunnel/ChartFunnelBaseRow.vue

@@ -34,7 +34,7 @@
 
 <script>
 export default {
-  name: 'UnnnicChartFunnelThreeRows',
+  name: 'UnnnicChartFunnelBaseRow',
 
   props: {
     rows: {

package/src/components/ChartFunnel/SvgFunnel/ChartFunnelTwoRows.vue

@@ -0,0 +1,65 @@
+<template>
+    <ChartFunnelBaseRow
+      class="unnnic-chart-funnel-two-rows"
+      :rows="rows"
+      viewBox="0 0 250 148"
+    />
+  </template>
+  
+  <script>
+  import ChartFunnelBaseRow from './ChartFunnelBaseRow.vue';
+  export default {
+    name: 'UnnnicChartFunnelTwoRows',
+  
+    components: {
+      ChartFunnelBaseRow,
+    },
+  
+    props: {
+      data: {
+        type: Array,
+        required: true,
+      },
+    },
+  
+    computed: {
+      rows() {
+        const { data } = this;
+        return [
+          {
+            pathD:
+              'M362.938 0H12.025C6.30976 0 2.43799 5.81972 4.64626 11.0911L31 74H343.75L370.307 11.1122C372.535 5.83818 368.663 0 362.938 0Z',
+            titleX: '50%',
+            titleY: '32',
+            descriptionX: '50%',
+            descriptionY: '52',
+            title: data[0].title,
+            description: data[0].description,
+          },
+          {
+            pathD: 'M344 74H31L63.4654 148H311.535L344 74Z',
+            titleX: '50%',
+            titleY: '106',
+            descriptionX: '50%',
+            descriptionY: '126',
+            title: data[1].title,
+            description: data[1].description,
+          }
+        ];
+      },
+    },
+  };
+  </script>
+  
+  <style lang="scss">
+  @use '@/assets/scss/unnnic' as *;
+  .unnnic-chart-funnel-two-rows {
+    [class$='row']:nth-child(1) {
+      fill: $unnnic-color-weni-950;
+    }
+    [class$='row']:nth-child(2) {
+      fill: $unnnic-color-weni-800;
+    }
+  }
+  </style>
+  

package/src/components/Chip/Chip.vue

@@ -80,7 +80,7 @@ const chipClass = computed(() => {
   border-radius: 600px;
   background-color: $unnnic-color-bg-base;
   border: 1px solid transparent;
-
+  
   &:hover {
     background-color: $unnnic-color-bg-soft;
   }

package/src/components/Input/BaseInput.vue

@@ -4,7 +4,7 @@
     v-mask="mask"
     v-bind="attributes"
     :value="fullySanitize(modelValue)"
-    :class="[classes, { focus: forceActiveStatus }]"
+    :class="[classes, { 'focus': forceActiveStatus }]"
     :type="nativeType"
     :readonly="readonly"
   />
@@ -12,7 +12,7 @@
     v-else
     v-bind="attributes"
     :value="fullySanitize(modelValue)"
-    :class="[classes, { focus: forceActiveStatus }]"
+    :class="[classes, { 'focus': forceActiveStatus }]"
     :type="nativeType"
     :maxlength="maxlength"
     :readonly="readonly"
@@ -133,8 +133,8 @@ export default {
   }
 
   &.input--has-clear-icon {
-    padding-right: $unnnic-space-10;
-  }
+      padding-right: $unnnic-space-10;
+    }
 
   &.error {
     @include input-error;

package/src/components/Input/Input.vue

@@ -159,7 +159,7 @@ export default {
       default: false,
     },
   },
-
+  
   emits: ['update:modelValue', 'clear'],
 
   data() {

package/src/components/Input/TextInput.vue

@@ -52,6 +52,7 @@
         @click="onIconRightClick"
       />
     </section>
+    
   </div>
 </template>
 
@@ -131,7 +132,7 @@ export default {
     showClear: {
       type: Boolean,
       default: false,
-    },
+    }
   },
   emits: ['icon-left-click', 'icon-right-click', 'clear'],
   data() {
@@ -232,7 +233,7 @@ export default {
     top: 50%;
     transform: translateY(-50%);
     right: $unnnic-space-4;
-
+    
     display: flex;
     align-items: center;
     gap: $unnnic-space-2;

package/src/components/ModalDialog/ModalDialog.vue

@@ -24,10 +24,7 @@
       </section>
 
       <section class="unnnic-modal-dialog__container__body">
-        <header
-          v-if="title"
-          class="unnnic-modal-dialog__container__header"
-        >
+        <header v-if="title" class="unnnic-modal-dialog__container__header">
           <section class="unnnic-modal-dialog__container__title-container">
             <UnnnicIcon
               v-if="icon || type"
@@ -99,12 +96,12 @@
 </template>
 
 <script>
-import UnnnicIcon from '../Icon.vue';
-import UnnnicButton from '../Button/Button.vue';
-import UnnnicI18n from '../../mixins/i18n';
+import UnnnicIcon from "../Icon.vue";
+import UnnnicButton from "../Button/Button.vue";
+import UnnnicI18n from "../../mixins/i18n";
 
 export default {
-  name: 'UnnnicModalDialog',
+  name: "UnnnicModalDialog",
   components: {
     UnnnicIcon,
     UnnnicButton,
@@ -121,29 +118,29 @@ export default {
     },
     type: {
       type: String,
-      default: '',
+      default: "",
       validate(type) {
-        return ['success', 'warning', 'attention'].includes(type);
+        return ["success", "warning", "attention"].includes(type);
       },
     },
     size: {
       type: String,
-      default: 'md',
+      default: "md",
       validate(size) {
-        return ['sm', 'md', 'lg'].includes(size);
+        return ["sm", "md", "lg"].includes(size);
       },
     },
     title: {
       type: String,
-      default: '',
+      default: "",
     },
     icon: {
       type: String,
-      default: '',
+      default: "",
     },
     iconScheme: {
       type: String,
-      default: '',
+      default: "",
     },
     showCloseIcon: {
       type: Boolean,
@@ -166,26 +163,26 @@ export default {
       default: () => ({}),
     },
   },
-  emits: ['primaryButtonClick', 'secondaryButtonClick', 'update:modelValue'],
+  emits: ["primaryButtonClick", "secondaryButtonClick", "update:modelValue"],
 
   data() {
     return {
       defaultTranslations: {
         cancel: {
-          'pt-br': 'Cancelar',
-          en: 'Cancel',
-          es: 'Cancelar',
+          "pt-br": "Cancelar",
+          en: "Cancel",
+          es: "Cancelar",
         },
       },
       iconsMapper: {
-        success: { icon: 'check_circle', scheme: 'aux-green-500' },
-        warning: { icon: 'warning', scheme: 'aux-red-500' },
-        attention: { icon: 'error', scheme: 'aux-yellow-500' },
+        success: { icon: "check_circle", scheme: "aux-green-500" },
+        warning: { icon: "warning", scheme: "aux-red-500" },
+        attention: { icon: "error", scheme: "aux-yellow-500" },
       },
       primaryButtonTypeMapper: {
-        success: 'primary',
-        warning: 'warning',
-        attention: 'attention',
+        success: "primary",
+        warning: "warning",
+        attention: "attention",
       },
     };
   },
@@ -196,17 +193,17 @@ export default {
   },
   methods: {
     close() {
-      this.$emit('update:modelValue', false);
+      this.$emit("update:modelValue", false);
     },
     updateBodyOverflow(isHidden) {
-      document.body.style.overflow = isHidden ? 'hidden' : '';
+      document.body.style.overflow = isHidden ? "hidden" : "";
     },
   },
 };
 </script>
 
 <style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
+@use "@/assets/scss/unnnic" as *;
 * {
   margin: 0;
   padding: 0;
@@ -313,7 +310,7 @@ export default {
   &__actions {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-template-areas: 'secondary-button primary-button';
+    grid-template-areas: "secondary-button primary-button";
     gap: $unnnic-spacing-sm;
     padding: $unnnic-spacing-md;
     flex-shrink: 0;

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

@@ -4,7 +4,7 @@ import UnnnicPopover from '@/components/Popover/index.vue';
 
 vi.mock('@vueuse/core', () => ({
   onClickOutside: vi.fn(),
-  useResizeObserver: vi.fn(),
+  useResizeObserver: vi.fn()
 }));
 
 describe('UnnnicPopover.vue', () => {
@@ -12,7 +12,7 @@ describe('UnnnicPopover.vue', () => {
 
   const defaultSlots = {
     trigger: '<button data-testid="trigger-button">Click me</button>',
-    content: '<div data-testid="popover-content">Popover content</div>',
+    content: '<div data-testid="popover-content">Popover content</div>'
   };
 
   const mountWrapper = (props) => {
@@ -20,9 +20,9 @@ describe('UnnnicPopover.vue', () => {
       slots: defaultSlots,
       props: {
         ...props,
-      },
+      }
     });
-  };
+  }
 
   beforeEach(() => {
     wrapper = mountWrapper();
@@ -40,7 +40,7 @@ describe('UnnnicPopover.vue', () => {
   test('renders trigger slot', () => {
     const trigger = wrapper.find('[data-testid="popover-trigger"]');
     const triggerButton = wrapper.find('[data-testid="trigger-button"]');
-
+    
     expect(trigger.exists()).toBe(true);
     expect(triggerButton.exists()).toBe(true);
     expect(triggerButton.text()).toBe('Click me');
@@ -51,7 +51,7 @@ describe('UnnnicPopover.vue', () => {
     await wrapper.vm.$nextTick();
     const balloon = wrapper.find('[data-testid="popover-balloon"]');
     const content = wrapper.find('[data-testid="popover-content"]');
-
+    
     expect(balloon.exists()).toBe(true);
     expect(content.exists()).toBe(true);
     expect(content.text()).toBe('Popover content');
@@ -64,9 +64,9 @@ describe('UnnnicPopover.vue', () => {
 
   test('toggles balloon visibility when trigger is clicked', async () => {
     const trigger = wrapper.find('[data-testid="popover-trigger"]');
-
+    
     let balloon = wrapper.find('[data-testid="popover-balloon"]');
-
+    
     expect(balloon.exists()).toBe(false);
 
     await trigger.trigger('click');
@@ -85,10 +85,10 @@ describe('UnnnicPopover.vue', () => {
 
   test('emits update:modelValue when open state changes', async () => {
     await wrapper.setProps({ modelValue: false });
-
+    
     const trigger = wrapper.find('[data-testid="popover-trigger"]');
     await trigger.trigger('click');
-
+    
     expect(wrapper.emitted('update:modelValue')).toBeTruthy();
     expect(wrapper.emitted('update:modelValue')[0]).toEqual([true]);
   });
@@ -96,7 +96,7 @@ describe('UnnnicPopover.vue', () => {
   test('does not emit update:modelValue when modelValue is undefined', async () => {
     const trigger = wrapper.find('[data-testid="popover-trigger"]');
     await trigger.trigger('click');
-
+    
     expect(wrapper.emitted('update:modelValue')).toBeFalsy();
   });
 
@@ -108,24 +108,24 @@ describe('UnnnicPopover.vue', () => {
   test('open ref can be controlled programmatically', async () => {
     wrapper.vm.open = true;
     await wrapper.vm.$nextTick();
-
+    
     const balloon = wrapper.find('[data-testid="popover-balloon"]');
     expect(balloon.isVisible()).toBe(true);
   });
 
   test('persistent prop prevents closing on outside click', async () => {
     await wrapper.setProps({ persistent: true });
-
+    
     const { onClickOutside } = await import('@vueuse/core');
     const mockOnClickOutside = vi.mocked(onClickOutside);
-
+    
     const callback = mockOnClickOutside.mock.calls[0][1];
-
+    
     wrapper.vm.open = true;
     await wrapper.vm.$nextTick();
-
+    
     callback();
-
+    
     const balloon = wrapper.find('[data-testid="popover-balloon"]');
     expect(balloon.isVisible()).toBe(true);
   });
@@ -136,7 +136,7 @@ describe('UnnnicPopover.vue', () => {
 
     const popover = wrapper.find('.unnnic-popover');
     const balloon = wrapper.find('.unnnic-popover__balloon');
-
+    
     expect(popover.exists()).toBe(true);
     expect(balloon.exists()).toBe(true);
   });