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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.2.9-alpha.12",
+  "version": "3.2.9-alpha.13",
   "type": "commonjs",
   "files": [
     "dist",
@@ -84,7 +84,7 @@
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@weni/eslint-config": "^2.0.0",
-    "eslint": "^9.33.0",
+    "eslint": "^9.37.0",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-vue": "10.4.0",
     "jsdom": "^24.1.1",

package/src/components/Button/Button.vue

@@ -133,9 +133,11 @@ const isSizePropValid = computed(() => {
 });
 
 const buttonType = computed(() => {
-  return {
-    'alternative': 'tertiary',
-  }[props.type] || props.type;
+  return (
+    {
+      alternative: 'tertiary',
+    }[props.type] || props.type
+  );
 });
 
 const isTypePropValid = computed(() => {
@@ -160,7 +162,8 @@ 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/DefaultFunnel/ChartDefaultFunnelBase.vue

@@ -59,9 +59,8 @@ const props = defineProps<{
 }>();
 
 const calculatedTransform = computed(() => {
-  return `skew(${props.data.length === 2 ? '-8deg': '-12deg'}, 0deg) translateX(-20px)`;
+  return `skew(${props.data.length === 2 ? '-8deg' : '-12deg'}, 0deg) translateX(-20px)`;
 });
-
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,65 +1,64 @@
 <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,
+  <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,
     },
-  
-    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,
+        },
+      ];
     },
-  
-    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;
-    }
+  },
+};
+</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>
-  
+}
+</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,7 +52,6 @@
         @click="onIconRightClick"
       />
     </section>
-    
   </div>
 </template>
 
@@ -132,7 +131,7 @@ export default {
     showClear: {
       type: Boolean,
       default: false,
-    }
+    },
   },
   emits: ['icon-left-click', 'icon-right-click', 'clear'],
   data() {
@@ -233,7 +232,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,7 +24,10 @@
       </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"
@@ -96,12 +99,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,
@@ -118,29 +121,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,
@@ -163,26 +166,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',
       },
     };
   },
@@ -193,17 +196,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;
@@ -310,7 +313,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);
   });