@weni/unnnic-system 3.12.3-alpha-teleports.1 → 3.12.3-alpha.1

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 
+    <section
       class="unnnic-form-element__hints-container"
       v-if="message || error || !!$slots.rightMessage"
     >
       <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: forceActiveStatus }]"
     :type="nativeType"
+    :readonly="readonly"
   />
   <input
     v-else
     v-bind="attributes"
     :value="fullySanitize(modelValue)"
-    :class="classes"
+    :class="[classes, { focus: forceActiveStatus }]"
     :type="nativeType"
     :maxlength="maxlength"
+    :readonly="readonly"
   />
 </template>
 
@@ -49,10 +51,19 @@ export default {
     },
     hasIconLeft: Boolean,
     hasIconRight: Boolean,
+    hasClearIcon: Boolean,
     maxlength: {
       type: Number,
       default: null,
     },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    forceActiveStatus: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['update:modelValue'],
   data() {
@@ -77,6 +88,7 @@ export default {
         {
           'input--has-icon-left': this.hasIconLeft,
           'input--has-icon-right': this.hasIconRight,
+          'input--has-clear-icon': this.hasClearIcon,
         },
       ];
     },
@@ -117,6 +129,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,
+  &.focus {
     border-color: $unnnic-color-border-active;
   }
 

package/src/components/Input/Input.vue

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

package/src/components/Input/TextInput.vue

@@ -12,7 +12,10 @@
       class="input-itself"
       :hasIconLeft="!!iconLeft"
       :hasIconRight="!!iconRight || allowTogglePassword"
+      :hasClearIcon="showClear"
       :maxlength="maxlength"
+      :readonly="readonly"
+      :forceActiveStatus="forceActiveStatus"
       @focus="onFocus"
       @blur="onBlur"
     />
@@ -27,18 +30,28 @@
       @click="onIconLeftClick"
     />
 
-    <UnnnicIcon
-      v-if="iconRightSvg"
-      :scheme="iconScheme"
-      :icon="iconRightSvg"
-      size="ant"
-      :clickable="iconRightClickable || allowTogglePassword"
-      :class="[
-        'icon-right',
-        { clickable: iconRightClickable || allowTogglePassword },
-      ]"
-      @click="onIconRightClick"
-    />
+    <section class="icon-right-container">
+      <UnnnicIcon
+        v-if="showClear"
+        class="icon-clear"
+        :scheme="iconScheme"
+        icon="close"
+        size="ant"
+        clickable
+        @click.stop="onClearClick"
+      />
+
+      <UnnnicIcon
+        v-if="iconRightSvg"
+        :scheme="iconScheme"
+        :icon="iconRightSvg"
+        size="ant"
+        :clickable="iconRightClickable || allowTogglePassword"
+        class="icon-right"
+        :class="{ clickable: iconRightClickable || allowTogglePassword }"
+        @click="onIconRightClick"
+      />
+    </section>
   </div>
 </template>
 
@@ -103,8 +116,20 @@ export default {
       type: Boolean,
       default: false,
     },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    forceActiveStatus: {
+      type: Boolean,
+      default: false,
+    },
+    showClear: {
+      type: Boolean,
+      default: false,
+    },
   },
-  emits: ['icon-left-click', 'icon-right-click'],
+  emits: ['icon-left-click', 'icon-right-click', 'clear'],
   data() {
     return {
       isFocused: false,
@@ -128,7 +153,6 @@ export default {
       if (this.isDisabled) {
         return 'fg-muted';
       }
-
       return 'fg-base';
     },
 
@@ -154,6 +178,10 @@ export default {
       if (this.iconLeftClickable) this.$emit('icon-left-click');
     },
 
+    onClearClick() {
+      this.$emit('clear');
+    },
+
     onIconRightClick() {
       if (this.attributes.disabled) return;
       if (this.allowTogglePassword) this.showPassword = !this.showPassword;
@@ -171,25 +199,33 @@ export default {
 }
 
 .icon {
-  &-left,
-  &-right {
-    &:not(.clickable) {
-      pointer-events: none;
-    }
-  }
-
   &-left {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     left: $unnnic-space-4;
+
+    &:not(.clickable) {
+      pointer-events: none;
+    }
   }
 
-  &-right {
+  &-right-container {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     right: $unnnic-space-4;
+
+    display: flex;
+    align-items: center;
+    gap: $unnnic-space-2;
+
+    .icon-clear {
+      cursor: pointer;
+    }
+    .icon-right:not(.clickable) {
+      pointer-events: none;
+    }
   }
 }
 </style>