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

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

@@ -1,23 +1,22 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Drawer.vue > Component Rendering > Component Rendering > matches the snapshot 1`] = `
-"<aside data-v-196de012="" class="unnnic-drawer" data-testid="drawer">
-  <section data-v-196de012="" class="unnnic-drawer__overlay" data-testid="overlay"></section>
-  <transition-stub data-v-196de012="" name="drawer" appear="true" persisted="false" css="true">
-    <section data-v-196de012="" data-testid="drawer-container" class="unnnic-drawer__container unnnic-drawer__container--md">
-      <header data-v-196de012="" class="unnnic-drawer__header">
-        <section data-v-196de012="" class="unnnic-drawer__title-container">
-          <h1 data-v-196de012="" class="unnnic-drawer__title" data-testid="drawer-title">Test Title</h1>
-          <p data-v-196de012="" class="unnnic-drawer__description" data-testid="drawer-description">Test Description</p>
-        </section>
-        <unnnic-icon-stub data-v-196de012="" filled="false" icon="arrow_back" clickable="true" size="avatar-nano" scheme="neutral-darkest" class="unnnic-drawer__close" data-testid="close-icon"></unnnic-icon-stub>
-      </header>
-      <section data-v-196de012="" class="unnnic-drawer__content"></section>
-      <footer data-v-196de012="" class="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>
-      </footer>
-    </section>
-  </transition-stub>
-</aside>"
+"<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">
+    <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="">
+        <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>
+    </header>
+    <section data-v-196de012="" class="unnnic-drawer__content"></section>
+    <div data-v-196de012="" class="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>
+  </div>
+</div>"
 `;

package/src/components/FormElement/FormElement.vue

@@ -1,37 +1,28 @@
 <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>
@@ -43,104 +34,104 @@
 </template>
 
 <script lang="js">
-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),
+  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),
+      },
 
-    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;
-}
-
-.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;
-    }
+  @use '@/assets/scss/unnnic' as *;
+
+  * {
+    margin: $unnnic-space-0;
+    padding: $unnnic-space-0;
+    box-sizing: border-box;
+  }
 
-    &--fixed {
-      margin-bottom: $unnnic-space-0;
-      position: absolute;
-      padding: $unnnic-space-0 $unnnic-space-1;
-      margin-left: $unnnic-space-2;
+  .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;
+      }
 
-      &:after {
-        content: ' ';
+      &--fixed {
+        margin-bottom: $unnnic-space-0;
         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;
+        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;
+        }
       }
     }
-  }
 
-  &__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

@@ -11,7 +11,8 @@
 
   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
@@ -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,

package/src/components/Input/TextInput.vue

@@ -12,9 +12,11 @@
       class="input-itself"
       :hasIconLeft="!!iconLeft"
       :hasIconRight="!!iconRight || allowTogglePassword"
+      :hasClearIcon="showClear"
       :maxlength="maxlength"
-      @focus="onFocus"
-      @blur="onBlur"
+      :readonly="readonly"
+      :useFocusProp="useFocusProp"
+      :focus="focus"
     />
 
     <UnnnicIcon
@@ -27,18 +29,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 +115,24 @@ 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: ['icon-left-click', 'icon-right-click'],
+  emits: ['icon-left-click', 'icon-right-click', 'clear'],
   data() {
     return {
       isFocused: false,
@@ -128,7 +156,6 @@ export default {
       if (this.isDisabled) {
         return 'fg-muted';
       }
-
       return 'fg-base';
     },
 
@@ -138,7 +165,7 @@ export default {
   },
 
   methods: {
-    focus() {
+    focusInput() {
       this.$refs['base-input'].$el.focus();
     },
 
@@ -154,6 +181,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 +202,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>

package/src/components/Input/__test__/TextInput.spec.js

@@ -129,7 +129,7 @@ describe('TextInput.vue', () => {
 
   test('focus method calls focus on base input element', () => {
     const focusSpy = vi.spyOn(wrapper.vm.$refs['base-input'].$el, 'focus');
-    wrapper.vm.focus();
+    wrapper.vm.focusInput();
 
     expect(focusSpy).toHaveBeenCalled();
     focusSpy.mockRestore();

package/src/components/Input/__test__/__snapshots__/Input.spec.js.snap

@@ -6,7 +6,11 @@ exports[`Input.vue > matches the snapshot 1`] = `
     <p data-v-7f222291="" class="unnnic-label__label">Sample Label</p>
     <!--v-if-->
   </section>
-  <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-form-input" hascloudycolor="false" mask="####-####"><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-form-input input-itself input size-md normal input--has-icon-left input--has-icon-right unnnic-form-input input-itself" hascloudycolor="false" placeholder="Enter text" iconleft="search" iconright="clear" iconleftclickable="true" iconrightclickable="true" type="text" value=""><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable icon-left clickable" data-testid="material-icon" translate="no">search</span><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable icon-right clickable" data-testid="material-icon" translate="no">clear</span></div>
+  <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-form-input" hascloudycolor="false" mask="####-####"><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-form-input input-itself input size-md normal input--has-icon-left input--has-icon-right unnnic-form-input input-itself" hascloudycolor="false" placeholder="Enter text" iconleft="search" iconright="clear" iconleftclickable="true" iconrightclickable="true" showclear="false" type="text" value=""><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable icon-left clickable" data-testid="material-icon" translate="no">search</span>
+    <section data-v-a0d36167="" class="icon-right-container">
+      <!--v-if--><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable icon-right clickable" data-testid="material-icon" translate="no">clear</span>
+    </section>
+  </div>
   <section data-v-9f8d6c86="" class="unnnic-form-element__hints-container">
     <section data-v-9f8d6c86="" class="unnnic-form-element__message-container">
       <p data-v-9f8d6c86="" class="unnnic-form-element__message">Error message</p>

package/src/components/Input/__test__/__snapshots__/TextInput.spec.js.snap

@@ -1,3 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`TextInput.vue > matches the snapshot 1`] = `"<div data-v-a0d36167="" class="text-input size--md"><input data-v-86533b41="" data-v-a0d36167="" placeholder="Enter text" iconleft="search" iconright="clear" iconleftclickable="true" iconrightclickable="true" allowtogglepassword="false" class="input-itself input size-md normal input--has-icon-left input--has-icon-right input-itself" type="text" value=""><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable icon-left clickable" data-testid="material-icon" translate="no">search</span><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable icon-right clickable" data-testid="material-icon" translate="no">clear</span></div>"`;
+exports[`TextInput.vue > matches the snapshot 1`] = `
+"<div data-v-a0d36167="" class="text-input size--md"><input data-v-86533b41="" data-v-a0d36167="" placeholder="Enter text" iconleft="search" iconright="clear" iconleftclickable="true" iconrightclickable="true" allowtogglepassword="false" showclear="false" class="input-itself input size-md normal input--has-icon-left input--has-icon-right input-itself" type="text" value=""><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable icon-left clickable" data-testid="material-icon" translate="no">search</span>
+  <section data-v-a0d36167="" class="icon-right-container">
+    <!--v-if--><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable icon-right clickable" data-testid="material-icon" translate="no">clear</span>
+  </section>
+</div>"
+`;