@weni/unnnic-system 3.31.1-alpha.2 → 3.32.0

package/src/components/Input/Input.scss

@@ -0,0 +1,43 @@
+@use '@/assets/scss/unnnic' as *;
+
+@mixin input-base {
+  background: $unnnic-color-bg-base;
+  border: 1px solid $unnnic-color-border-base;
+  outline: none;
+  border-radius: $unnnic-radius-2;
+  color: $unnnic-color-fg-emphasized;
+  caret-color: $unnnic-color-fg-muted;
+  font: $unnnic-font-body;
+
+  transition: border-color 0.1s ease-in-out;
+
+  &:focus:not(.use-focus-prop),
+  &.focus {
+    border-color: $unnnic-color-border-accent-strong;
+  }
+
+  &::placeholder {
+    color: $unnnic-color-fg-muted;
+    opacity: 1;
+    /* Firefox */
+  }
+
+  &:disabled {
+    border-color: $unnnic-color-border-muted;
+    background-color: $unnnic-color-bg-muted;
+    cursor: not-allowed;
+    color: $unnnic-color-fg-muted;
+  }
+}
+
+@mixin input-sm-font {
+  font: $unnnic-font-body;
+}
+
+@mixin input-md-font {
+  font: $unnnic-font-body;
+}
+
+@mixin input-error {
+  border-color: $unnnic-color-border-critical;
+}

package/src/components/Input/Input.vue

@@ -0,0 +1,191 @@
+<template>
+  <UnnnicFormElement
+    :label="label || $slots.label"
+    :size="size"
+    :disabled="disabled"
+    :message="message"
+    :tooltip="tooltip"
+    :error="computedError"
+    :class="['unnnic-form', size]"
+    data-testid="form-element"
+  >
+    <TextInput
+      v-bind="$attrs"
+      v-model="val"
+      class="unnnic-form-input"
+      :useFocusProp="useFocusProp"
+      :focus="focus"
+      :placeholder="placeholder"
+      :iconLeft="iconLeft"
+      :iconRight="iconRight"
+      :type="errors.length > 0 && !disabled ? 'error' : type"
+      :iconLeftClickable="iconLeftClickable"
+      :iconRightClickable="iconRightClickable"
+      :hasCloudyColor="hasCloudyColor"
+      :size="size"
+      :mask="mask"
+      :nativeType="nativeType"
+      :maxlength="maxlength"
+      :disabled="disabled"
+      :readonly="readonly"
+      :showClear="showClear"
+      @clear="$emit('clear')"
+    />
+
+    <template
+      v-if="maxlength && showMaxlengthCounter"
+      #rightMessage
+    >
+      {{ (val || '').length }} / {{ maxlength }}
+    </template>
+  </UnnnicFormElement>
+</template>
+
+<script>
+import { fullySanitize } from '../../utils/sanitize';
+import TextInput from './TextInput.vue';
+import UnnnicFormElement from '../FormElement/FormElement.vue';
+
+export default {
+  name: 'UnnnicInput',
+  components: {
+    TextInput,
+    UnnnicFormElement,
+  },
+  props: {
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    type: {
+      type: String,
+      default: 'normal',
+      validator(value) {
+        return ['normal', 'error'].indexOf(value) !== -1;
+      },
+    },
+    modelValue: {
+      type: String,
+      default: '',
+    },
+    nativeType: {
+      type: String,
+      default: 'text',
+    },
+    message: {
+      type: String,
+      default: '',
+    },
+    errors: {
+      type: [String, Array],
+      default: '',
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    iconLeft: {
+      type: String,
+      default: '',
+    },
+    iconRight: {
+      type: String,
+      default: '',
+    },
+    allowTogglePassword: {
+      type: Boolean,
+      default: false,
+    },
+    iconLeftClickable: {
+      type: Boolean,
+      default: false,
+    },
+    iconRightClickable: {
+      type: Boolean,
+      default: false,
+    },
+    hasCloudyColor: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: 'md',
+    },
+    mask: {
+      type: [String, Array],
+      default: '',
+    },
+    tooltip: {
+      type: Object,
+      default: undefined,
+    },
+    maxlength: {
+      type: [Number, null],
+      default: null,
+    },
+    showMaxlengthCounter: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      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', 'clear'],
+
+  data() {
+    return {
+      val: this.modelValue,
+    };
+  },
+  computed: {
+    computedError() {
+      if (Array.isArray(this.errors)) {
+        return this.errors.join(', ') || this.type === 'error';
+      }
+
+      return this.errors || this.type === 'error';
+    },
+  },
+  watch: {
+    val() {
+      this.$emit('update:modelValue', fullySanitize(this.val));
+    },
+    modelValue() {
+      this.val = this.modelValue;
+    },
+  },
+  mounted() {
+    this.val = this.modelValue;
+  },
+  methods: {
+    fullySanitize,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+</style>

package/src/components/Input/TextInput.vue

@@ -0,0 +1,233 @@
+<template>
+  <div :class="['text-input', `size--${size}`]">
+    <BaseInput
+      v-bind="attributes"
+      ref="base-input"
+      :modelValue="modelValue"
+      :size="size"
+      :nativeType="
+        nativeType === 'password' && showPassword ? 'text' : nativeType
+      "
+      :type="type"
+      class="input-itself"
+      :hasIconLeft="!!iconLeft"
+      :hasIconRight="!!iconRight || allowTogglePassword"
+      :hasClearIcon="showClear"
+      :maxlength="maxlength"
+      :readonly="readonly"
+      :useFocusProp="useFocusProp"
+      :focus="focus"
+    />
+
+    <UnnnicIcon
+      v-if="iconLeft"
+      :scheme="iconScheme"
+      :icon="iconLeft"
+      size="ant"
+      :clickable="iconLeftClickable"
+      :class="['icon-left', { clickable: iconLeftClickable }]"
+      @click="onIconLeftClick"
+    />
+
+    <section class="icon-right-container">
+      <UnnnicIcon
+        v-if="showClear"
+        class="icon-clear"
+        scheme="fg-base"
+        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>
+
+<script>
+import BaseInput from './BaseInput.vue';
+import UnnnicIcon from '../Icon.vue';
+
+export default {
+  components: {
+    BaseInput,
+    UnnnicIcon,
+  },
+  props: {
+    placeholder: {
+      type: String,
+      default: null,
+    },
+    type: {
+      type: String,
+      default: 'normal',
+      validator(value) {
+        return ['normal', 'error'].indexOf(value) !== -1;
+      },
+    },
+    modelValue: {
+      type: String,
+      default: '',
+    },
+    nativeType: {
+      type: String,
+      default: '',
+    },
+    iconLeft: {
+      type: String,
+      default: null,
+    },
+    iconRight: {
+      type: String,
+      default: null,
+    },
+    iconLeftClickable: {
+      type: Boolean,
+      default: null,
+    },
+    iconRightClickable: {
+      type: Boolean,
+      default: null,
+    },
+    allowTogglePassword: {
+      type: Boolean,
+      default: null,
+    },
+    size: {
+      type: String,
+      default: 'md',
+    },
+    maxlength: {
+      type: Number,
+      default: null,
+    },
+    disabled: {
+      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', 'clear'],
+  data() {
+    return {
+      isFocused: false,
+      showPassword: false,
+    };
+  },
+  computed: {
+    isDisabled() {
+      return this.$attrs.disabled || this.disabled;
+    },
+
+    iconRightSvg() {
+      if (this.allowTogglePassword) {
+        return this.showPassword ? 'view-off-1' : 'view-1-1';
+      }
+
+      return this.iconRight;
+    },
+
+    iconScheme() {
+      if (this.isDisabled) {
+        return 'fg-muted';
+      }
+      return 'fg-base';
+    },
+
+    attributes() {
+      return { ...this.$attrs, ...this.$attrs['v-bind'], ...this.$props };
+    },
+  },
+
+  methods: {
+    focusInput() {
+      this.$refs['base-input'].$el.focus();
+    },
+
+    onFocus() {
+      this.isFocused = true;
+    },
+
+    onBlur() {
+      this.isFocused = false;
+    },
+
+    onIconLeftClick() {
+      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;
+      else if (this.iconRightClickable) this.$emit('icon-right-click');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.text-input {
+  position: relative;
+}
+
+.icon {
+  &-left {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: $unnnic-space-4;
+
+    &:not(.clickable) {
+      pointer-events: none;
+    }
+  }
+
+  &-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__/BaseInput.spec.js

@@ -0,0 +1,107 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, afterEach, test, vi } from 'vitest';
+import BaseInput from '@/components/Input/BaseInput.vue';
+import { mask } from 'vue-the-mask';
+
+describe('BaseInput.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(BaseInput, {
+      props: {
+        type: 'normal',
+        modelValue: '',
+        nativeType: 'text',
+        size: 'md',
+        mask: '',
+      },
+      global: {
+        directives: {
+          mask,
+        },
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.unmount();
+  });
+
+  test('renders correctly', () => {
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  test('applies the correct classes', async () => {
+    expect(wrapper.classes()).toContain('input');
+    expect(wrapper.classes()).toContain('size-md');
+    expect(wrapper.classes()).toContain('normal');
+
+    await wrapper.setProps({ type: 'error', size: 'sm' });
+    expect(wrapper.classes()).toContain('size-sm');
+    expect(wrapper.classes()).toContain('error');
+  });
+
+  test('renders input element with correct attributes and value', async () => {
+    const input = wrapper.find('input');
+    expect(input.exists()).toBe(true);
+    expect(input.attributes('type')).toBe('text');
+    expect(input.element.value).toBe('');
+
+    await wrapper.setProps({
+      modelValue: 'test value',
+      nativeType: 'password',
+    });
+    expect(input.element.value).toBe('test value');
+    expect(input.attributes('type')).toBe('password');
+  });
+
+  test('emits update:modelValue on input', async () => {
+    const input = wrapper.find('input');
+    await input.setValue('new value');
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual(['new value']);
+  });
+
+  test('applies the correct mask if provided', async () => {
+    const maskedWrapper = mount(BaseInput, {
+      props: {
+        mask: '####-####',
+        modelValue: '12345678',
+      },
+    });
+
+    const input = maskedWrapper.find('input');
+
+    expect(input.element.value).toBe('1234-5678');
+
+    maskedWrapper.unmount();
+  });
+
+  test('does not apply mask if mask prop is empty', () => {
+    const input = wrapper.find('input');
+    expect(input.attributes('v-mask')).toBeUndefined();
+  });
+
+  test('focuses on input when focus method is called', () => {
+    const input = wrapper.find('input');
+    const focusSpy = vi.spyOn(input.element, 'focus');
+
+    input.element.focus();
+
+    expect(focusSpy).toHaveBeenCalled();
+    focusSpy.mockRestore();
+  });
+
+  test('updates the attributes computed property correctly', async () => {
+    await wrapper.setProps({ placeholder: 'Enter text', disabled: true });
+    const attributes = wrapper.vm.attributes;
+
+    expect(attributes.placeholder).toBe('Enter text');
+    expect(attributes.disabled).toBe(true);
+  });
+
+  test('matches the snapshot', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,103 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, afterEach, test } from 'vitest';
+import Input from '@/components/Input/Input.vue';
+import TextInput from '@/components/Input/TextInput.vue';
+
+describe('Input.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(Input, {
+      props: {
+        placeholder: 'Enter text',
+        type: 'normal',
+        modelValue: '',
+        nativeType: 'text',
+        label: 'Sample Label',
+        message: 'Error message',
+        iconLeft: 'search',
+        iconRight: 'clear',
+        iconLeftClickable: true,
+        iconRightClickable: true,
+        allowTogglePassword: false,
+        hasCloudyColor: false,
+        size: 'md',
+        mask: '####-####',
+      },
+      global: {
+        components: {
+          TextInput,
+        },
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.unmount();
+  });
+
+  test('renders correctly', () => {
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  test('renders form element correctly', async () => {
+    const formElement = wrapper.findComponent('[data-testid="form-element"]');
+    expect(formElement.exists()).toBe(true);
+    expect(formElement.props('label')).toBe('Sample Label');
+    expect(formElement.props('size')).toBe('md');
+    expect(formElement.props('message')).toBe('Error message');
+    expect(formElement.props('disabled')).toBe(false);
+    expect(formElement.props('tooltip')).toBe(undefined);
+    expect(formElement.props('error')).toBe(false);
+  });
+
+  test('renders maxlength counter correctly', async () => {
+    expect(wrapper.text()).not.toContain('0 / 10');
+    await wrapper.setProps({ maxlength: 10, showMaxlengthCounter: true });
+    expect(wrapper.text()).toContain('0 / 10');
+  });
+
+  test('renders TextInput component', () => {
+    const textInput = wrapper.findComponent(TextInput);
+    expect(textInput.exists()).toBe(true);
+  });
+
+  test('emits update:modelValue when val changes', async () => {
+    const textInput = wrapper.findComponent(TextInput);
+    await textInput.setValue('new value');
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual(['new value']);
+  });
+
+  test('watch modelValue updates val', async () => {
+    const wrapper = mount(Input, {
+      props: {
+        modelValue: 'initial value',
+      },
+      global: {
+        components: {
+          TextInput,
+        },
+      },
+    });
+
+    expect(wrapper.vm.val).toBe('initial value');
+
+    await wrapper.setProps({ modelValue: 'new value' });
+
+    expect(wrapper.vm.val).toBe('new value');
+  });
+
+  test('correctly mounts with initial modelValue', async () => {
+    wrapper = mount(Input, {
+      props: {
+        modelValue: 'initial value',
+      },
+    });
+    expect(wrapper.vm.val).toBe('initial value');
+  });
+
+  test('matches the snapshot', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});