@weni/unnnic-system 3.12.6-alpha-teleports.0 → 3.12.8-alpha.0

package/src/components/Checkbox/Checkbox.vue

@@ -1,7 +1,12 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <section class="unnnic-checkbox">
-    <label :class="['unnnic-checkbox__input-wrapper', {'unnnic-checkbox__input-wrapper--disabled': disabled}]">
+    <label
+      :class="[
+        'unnnic-checkbox__input-wrapper',
+        { 'unnnic-checkbox__input-wrapper--disabled': disabled },
+      ]"
+    >
       <input
         :class="[
           'unnnic-checkbox__input',
@@ -10,8 +15,8 @@
         type="checkbox"
         :disabled="disabled"
         :checked="modelValue === 'less' || modelValue"
-        @change="click"
         v-bind="pick($attrs, ['id', 'name'])"
+        @change="click"
       />
 
       <p
@@ -150,7 +155,8 @@ $checkbox-size: 21px;
       }
     }
 
-    &:disabled, &:disabled:checked {
+    &:disabled,
+    &:disabled:checked {
       background-color: $unnnic-color-bg-muted;
       border: 1px solid $unnnic-color-border-muted;
 

package/src/components/CheckboxGroup/CheckboxGroup.vue

@@ -1,8 +1,10 @@
 <template>
-  <section :class="[
-    'unnnic-checkbox-group__container',
-    `unnnic-checkbox-group--state-${state}`,
-  ]">
+  <section
+    :class="[
+      'unnnic-checkbox-group__container',
+      `unnnic-checkbox-group--state-${state}`,
+    ]"
+  >
     <UnnnicLabel
       v-if="label"
       :label="label"
@@ -52,7 +54,7 @@ const props = defineProps({
   },
 });
 </script>
-  
+
 <style lang="scss" scoped>
 @use '@/assets/scss/unnnic' as *;
 

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/Drawer/Drawer.vue

@@ -10,11 +10,15 @@
       :showOverlay="!withoutOverlay"
       data-testid="drawer-container"
       :size="mappedSize"
-      :class="[
-        'unnnic-drawer__container',
-        `unnnic-drawer__container--${size}`,
-        props.class,
-      ].filter(Boolean).join(' ')"
+      :class="
+        [
+          'unnnic-drawer__container',
+          `unnnic-drawer__container--${size}`,
+          props.class,
+        ]
+          .filter(Boolean)
+          .join(' ')
+      "
     >
       <DrawerHeader class="unnnic-drawer__header">
         <section class="unnnic-drawer__title-container">
@@ -91,7 +95,7 @@
 import { computed } from 'vue';
 
 import UnnnicButton from '../Button/Button.vue';
-import { 
+import {
   Drawer,
   DrawerContent,
   DrawerHeader,
@@ -172,15 +176,22 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['primaryButtonClick', 'secondaryButtonClick', 'close', 'back']);
-const showFooter = computed(() => !!(props.primaryButtonText || props.secondaryButtonText));
+const emit = defineEmits([
+  'primaryButtonClick',
+  'secondaryButtonClick',
+  'close',
+  'back',
+]);
+const showFooter = computed(
+  () => !!(props.primaryButtonText || props.secondaryButtonText),
+);
 const mappedSize = computed(() => {
   const sizes = {
     md: 'medium',
     lg: 'large',
     xl: 'extra-large',
     gt: 'giant',
-  }
+  };
   return sizes[props.size] || 'medium';
 });
 

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

@@ -35,7 +35,7 @@ describe('Drawer.vue', () => {
 
   const element = (id) => wrapper.find(`[data-testid="${id}"]`);
   const component = (id) => wrapper.findComponent(`[data-testid="${id}"]`);
-  const drawer = () => element('drawer');
+  const drawerRoot = () => wrapper.findComponent({ name: 'UnnnicDrawerNext' });
   const title = () => element('drawer-title');
   const description = () => element('drawer-description');
   const primaryButton = () => component('primary-button');
@@ -43,6 +43,8 @@ describe('Drawer.vue', () => {
   const footer = () => element('footer');
   const closeIcon = () => component('close-icon');
   const drawerContainer = () => element('drawer-container');
+  const drawerContentComponent = () =>
+    wrapper.findComponent({ name: 'UnnnicDrawerContent' });
 
   describe('Component Rendering', () => {
     describe('Component Rendering', () => {
@@ -51,23 +53,21 @@ describe('Drawer.vue', () => {
       });
 
       it('should render the drawer when modelValue is true', () => {
-        expect(drawer().attributes('open')).toBe('true');
+        expect(drawerRoot().props('open')).toBe(true);
       });
 
       it('should not render the drawer when modelValue is false', async () => {
         await wrapper.setProps({ modelValue: false });
-        expect(drawer().attributes('open')).toBe('false');
+        expect(drawerRoot().props('open')).toBe(false);
       });
 
       it('should render the overlay when withoutOverlay is false', () => {
-        console.log('wrapper.html()', wrapper.html());
-
-        expect(drawerContainer().attributes('showoverlay')).toBe('true');
+        expect(drawerContentComponent().props('showOverlay')).toBe(true);
       });
 
       it('should not render the overlay when withoutOverlay is true', async () => {
         await wrapper.setProps({ withoutOverlay: true });
-        expect(drawerContainer().attributes('showoverlay')).toBe('false');
+        expect(drawerContentComponent().props('showOverlay')).toBe(false);
       });
 
       it('should display the title and description correctly', () => {
@@ -217,14 +217,16 @@ describe('Drawer.vue', () => {
   describe('Props and Computed Properties', () => {
     it('should render the correct size class based on size prop', async () => {
       await wrapper.setProps({ size: 'lg' });
-      expect(drawerContainer().classes()).toContain(
+      expect(drawerContentComponent().props('class')).toContain(
         'unnnic-drawer__container--lg',
       );
+      expect(drawerContentComponent().props('size')).toBe('large');
 
       await wrapper.setProps({ size: 'xl' });
-      expect(drawerContainer().classes()).toContain(
+      expect(drawerContentComponent().props('class')).toContain(
         'unnnic-drawer__container--xl',
       );
+      expect(drawerContentComponent().props('size')).toBe('extra-large');
     });
 
     it('should display footer if either primaryButtonText or secondaryButtonText is provided', async () => {

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

@@ -1,22 +1,22 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Drawer.vue > Component Rendering > Component Rendering > matches the snapshot 1`] = `
-"<div data-v-196de012="" class="unnnic-drawer" data-testid="drawer" open="true">
-  <div data-v-196de012="" showoverlay="true" data-testid="drawer-container" size="medium" class="unnnic-drawer__container unnnic-drawer__container--md">
+"<div data-v-e761d31f="" data-v-196de012="" disabled="false" defer="false" forcemount="false" data-testid="drawer-container">
+  <div data-v-7f241b30="" data-v-e761d31f="" data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="unnnic-drawer__overlay"></div>
+  <div data-v-e761d31f="" data-dismissable-layer="" style="--snap-point-height: 0; --initial-transform: calc(100% + 8px); pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" size="medium" showoverlay="true" class="unnnic-drawer__content unnnic-drawer__content--medium unnnic-drawer__container unnnic-drawer__container--md" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
     <header data-v-39d0dfb8="" data-v-196de012="" class="unnnic-drawer__header unnnic-drawer__header">
       <section data-v-196de012="" class="unnnic-drawer__title-container">
-        <div data-v-196de012="" class="unnnic-drawer__title" data-testid="drawer-title">Test Title</div>
-        <div data-v-196de012="" class="unnnic-drawer__description" data-testid="drawer-description">Test Description</div>
-      </section>
-      <div data-v-196de012="">
+        <h2 data-v-97709962="" data-v-196de012="" id="reka-dialog-title-v-0" class="unnnic-drawer__title unnnic-drawer__title" data-testid="drawer-title">Test Title</h2>
+        <p data-v-750ea255="" data-v-196de012="" id="reka-dialog-description-v-1" class="unnnic-drawer__description unnnic-drawer__description" data-testid="drawer-description">Test Description</p>
+      </section><button data-v-4a771f40="" data-v-196de012="" type="button" class="unnnic-drawer__close">
         <unnnic-button-stub data-v-196de012="" size="small" text="" type="tertiary" float="false" iconleft="" iconright="" iconcenter="arrow_forward" iconsfilled="false" disabled="false" loading="false" class="unnnic-drawer__close-icon" data-testid="close-icon"></unnnic-button-stub>
-      </div>
+      </button>
     </header>
     <section data-v-196de012="" class="unnnic-drawer__content"></section>
-    <div data-v-196de012="" class="unnnic-drawer__footer" data-testid="footer">
+    <footer data-v-02ebc5b4="" data-v-196de012="" class="unnnic-drawer__footer unnnic-drawer__footer" data-testid="footer">
       <unnnic-button-stub data-v-196de012="" size="large" text="Secondary Action" type="tertiary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" disabled="false" loading="false" data-testid="secondary-button"></unnnic-button-stub>
       <unnnic-button-stub data-v-196de012="" size="large" text="Primary Action" type="primary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" disabled="false" loading="false" data-testid="primary-button"></unnnic-button-stub>
-    </div>
+    </footer>
   </div>
 </div>"
 `;

package/src/components/FormElement/FormElement.vue

@@ -1,28 +1,37 @@
 <template>
-  <section class="unnnic-form-element" :class="{ 'unnnic-form-element--disabled': disabled }">
-    <UnnnicLabel 
-      v-if="label" 
-      :label="label" 
+  <section
+    class="unnnic-form-element"
+    :class="{ 'unnnic-form-element--disabled': disabled }"
+  >
+    <UnnnicLabel
+      v-if="label"
+      :label="label"
       :tooltip="tooltip"
       :class="[
         'unnnic-form-element__label',
         {
           'unnnic-form-element__label--fixed': fixedLabel,
         },
-      ]" 
+      ]"
     />
 
     <slot></slot>
 
-    <section 
-      class="unnnic-form-element__hints-container"
+    <section
       v-if="message || error || !!$slots.rightMessage"
+      class="unnnic-form-element__hints-container"
     >
       <section class="unnnic-form-element__message-container">
-        <p v-if="message" class="unnnic-form-element__message">
+        <p
+          v-if="message"
+          class="unnnic-form-element__message"
+        >
           {{ fullySanitize(message) }}
         </p>
-        <p v-if="!!error?.length" class="unnnic-form-element__message error">
+        <p
+          v-if="!!error?.length"
+          class="unnnic-form-element__message error"
+        >
           {{ Array.isArray(error) ? error.join(', ') : error }}
         </p>
       </section>
@@ -34,104 +43,104 @@
 </template>
 
 <script lang="js">
-  import { fullySanitize } from '../../utils/sanitize';
-  import UnnnicLabel from '../Label/Label.vue';
-
-  export default {
-    components: {
-      UnnnicLabel,
+import { fullySanitize } from '../../utils/sanitize';
+import UnnnicLabel from '../Label/Label.vue';
+
+export default {
+  components: {
+    UnnnicLabel,
+  },
+  props: {
+    size: {
+      type: String,
+      default: 'md',
+      validator: (size) => ['md', 'sm'].includes(size),
     },
-    props: {
-      size: {
-        type: String,
-        default: 'md',
-        validator: (size) => ['md', 'sm'].includes(size),
-      },
 
-      label: { type: String, default: '' },
+    label: { type: String, default: '' },
 
-      fixedLabel: { type: Boolean, default: false },
+    fixedLabel: { type: Boolean, default: false },
 
-      error: {
-        type: [Boolean, String],
-        default: false,
-      },
+    error: {
+      type: [Boolean, String],
+      default: false,
+    },
 
-      message: { type: String, default: '' },
+    message: { type: String, default: '' },
 
-      disabled: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
 
-      tooltip: { type: String, default: '' },
-    },
-    methods: {
-      fullySanitize,
-    },
-  };
+    tooltip: { type: String, default: '' },
+  },
+  methods: {
+    fullySanitize,
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  @use '@/assets/scss/unnnic' as *;
-
-  * {
-    margin: $unnnic-space-0;
-    padding: $unnnic-space-0;
-    box-sizing: border-box;
-  }
+@use '@/assets/scss/unnnic' as *;
+
+* {
+  margin: $unnnic-space-0;
+  padding: $unnnic-space-0;
+  box-sizing: border-box;
+}
+
+.unnnic-form-element {
+  &__label {
+    font: $unnnic-font-body;
+    color: $unnnic-color-neutral-cloudy;
+    margin-bottom: $unnnic-space-1;
+    display: flex;
+    align-items: center;
+    gap: $unnnic-space-2;
+
+    &--fixed {
+      margin-top: -$unnnic-font-size-body-gt - $unnnic-space-2 + $unnnic-space-1;
+    }
 
-  .unnnic-form-element {
-    &__label {
-      font: $unnnic-font-body;
-      color: $unnnic-color-neutral-cloudy;
-      margin-bottom: $unnnic-space-1;
-      display: flex;
-      align-items: center;
-      gap: $unnnic-space-2;
-
-      &--fixed {
-        margin-top: -$unnnic-font-size-body-gt - $unnnic-space-2 + $unnnic-space-1;
-      }
+    &--fixed {
+      margin-bottom: $unnnic-space-0;
+      position: absolute;
+      padding: $unnnic-space-0 $unnnic-space-1;
+      margin-left: $unnnic-space-2;
 
-      &--fixed {
-        margin-bottom: $unnnic-space-0;
+      &:after {
+        content: ' ';
         position: absolute;
-        padding: $unnnic-space-0 $unnnic-space-1;
-        margin-left: $unnnic-space-2;
-
-        &:after {
-          content: ' ';
-          position: absolute;
-          left: $unnnic-space-0;
-          bottom: $unnnic-space-1 - $unnnic-border-width-thinner;
-          width: 100%;
-          height: $unnnic-border-width-thinner;
-          background-color: $unnnic-color-white;
-        }
+        left: $unnnic-space-0;
+        bottom: $unnnic-space-1 - $unnnic-border-width-thinner;
+        width: 100%;
+        height: $unnnic-border-width-thinner;
+        background-color: $unnnic-color-white;
       }
     }
+  }
 
-    &__message {
-      &.error {
-        color: $unnnic-color-fg-critical;
-      }
+  &__message {
+    &.error {
+      color: $unnnic-color-fg-critical;
     }
+  }
 
-    &__hints-container {
-      display: flex;
-      justify-content: space-between;
-      margin-top: $unnnic-space-1;
-      font: $unnnic-font-caption-2;
-      color: $unnnic-color-fg-base;
-    }
+  &__hints-container {
+    display: flex;
+    justify-content: space-between;
+    margin-top: $unnnic-space-1;
+    font: $unnnic-font-caption-2;
+    color: $unnnic-color-fg-base;
+  }
 
-    &__message-container {
-      display: flex;
-      flex-direction: column;
-      gap: $unnnic-space-1;
-    }
+  &__message-container {
+    display: flex;
+    flex-direction: column;
+    gap: $unnnic-space-1;
+  }
 
-    &--disabled .unnnic-form-element__label,
-    &--disabled .unnnic-form-element__message {
-      user-select: none;
-    }
+  &--disabled .unnnic-form-element__label,
+  &--disabled .unnnic-form-element__message {
+    user-select: none;
   }
+}
 </style>

package/src/components/Input/BaseInput.vue

@@ -4,16 +4,18 @@
     v-mask="mask"
     v-bind="attributes"
     :value="fullySanitize(modelValue)"
-    :class="classes"
+    :class="[classes, { focus, 'use-focus-prop': useFocusProp }]"
     :type="nativeType"
+    :readonly="readonly"
   />
   <input
     v-else
     v-bind="attributes"
     :value="fullySanitize(modelValue)"
-    :class="classes"
+    :class="[classes, { focus, 'use-focus-prop': useFocusProp }]"
     :type="nativeType"
     :maxlength="maxlength"
+    :readonly="readonly"
   />
 </template>
 
@@ -49,15 +51,25 @@ export default {
     },
     hasIconLeft: Boolean,
     hasIconRight: Boolean,
+    hasClearIcon: Boolean,
     maxlength: {
       type: Number,
       default: null,
     },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    useFocusProp: {
+      type: Boolean,
+      default: false,
+    },
+    focus: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['update:modelValue'],
-  data() {
-    return {};
-  },
   computed: {
     attributes() {
       return {
@@ -77,6 +89,7 @@ export default {
         {
           'input--has-icon-left': this.hasIconLeft,
           'input--has-icon-right': this.hasIconRight,
+          'input--has-clear-icon': this.hasClearIcon,
         },
       ];
     },
@@ -117,6 +130,13 @@ export default {
 
   &.input--has-icon-right {
     padding-right: $unnnic-space-10;
+    &.input--has-clear-icon {
+      padding-right: $unnnic-space-10 + $unnnic-space-6;
+    }
+  }
+
+  &.input--has-clear-icon {
+    padding-right: $unnnic-space-10;
   }
 
   &.error {

package/src/components/Input/Input.scss

@@ -9,9 +9,8 @@
   caret-color: $unnnic-color-fg-muted;
   font: $unnnic-font-body;
 
-  transition: border-color 0.1s ease-in-out;
-
-  &:focus {
+  &:focus:not(.use-focus-prop),
+  &.focus {
     border-color: $unnnic-color-border-active;
   }
 

package/src/components/Input/Input.vue

@@ -13,6 +13,8 @@
       v-bind="$attrs"
       v-model="val"
       class="unnnic-form-input"
+      :useFocusProp="useFocusProp"
+      :focus="focus"
       :placeholder="placeholder"
       :iconLeft="iconLeft"
       :iconRight="iconRight"
@@ -25,6 +27,9 @@
       :nativeType="nativeType"
       :maxlength="maxlength"
       :disabled="disabled"
+      :readonly="readonly"
+      :showClear="showClear"
+      @clear="$emit('clear')"
     />
 
     <template
@@ -43,8 +48,8 @@ import UnnnicFormElement from '../FormElement/FormElement.vue';
 
 export default {
   name: 'UnnnicInput',
-  components: { 
-    TextInput, 
+  components: {
+    TextInput,
     UnnnicFormElement,
   },
   props: {
@@ -127,8 +132,26 @@ export default {
       type: Boolean,
       default: false,
     },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    useFocusProp: {
+      type: Boolean,
+      default: false,
+    },
+    focus: {
+      type: Boolean,
+      default: false,
+    },
+    showClear: {
+      type: Boolean,
+      default: false,
+    },
   },
-  emits: ['update:modelValue'],
+
+  emits: ['update:modelValue', 'clear'],
+
   data() {
     return {
       val: this.modelValue,