@weni/unnnic-system 3.32.0 → 3.32.1

package/src/components/Input/Input.vue

@@ -29,7 +29,7 @@
       :disabled="disabled"
       :readonly="readonly"
       :showClear="showClear"
-      @clear="$emit('clear')"
+      @clear="emit('clear')"
     />
 
     <template
@@ -41,145 +41,97 @@
   </UnnnicFormElement>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
 import { fullySanitize } from '../../utils/sanitize';
 import TextInput from './TextInput.vue';
 import UnnnicFormElement from '../FormElement/FormElement.vue';
+import { type TooltipProps } from '../ToolTip/ToolTip.vue';
+import type { InputSize, InputVariant } from './BaseInput.vue';
 
-export default {
+defineOptions({
   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';
-      }
+export interface InputProps {
+  placeholder?: string;
+  type?: InputVariant;
+  modelValue?: string;
+  nativeType?: string;
+  message?: string;
+  errors?: string | string[];
+  label?: string;
+  iconLeft?: string;
+  iconRight?: string;
+  allowTogglePassword?: boolean;
+  iconLeftClickable?: boolean;
+  iconRightClickable?: boolean;
+  hasCloudyColor?: boolean;
+  size?: InputSize | string;
+  mask?: string | string[];
+  tooltip?: TooltipProps;
+  maxlength?: number | null;
+  showMaxlengthCounter?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  useFocusProp?: boolean;
+  focus?: boolean;
+  showClear?: boolean;
+}
 
-      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,
+const props = withDefaults(defineProps<InputProps>(), {
+  placeholder: '',
+  type: 'normal',
+  modelValue: '',
+  nativeType: 'text',
+  message: '',
+  errors: '',
+  label: '',
+  iconLeft: '',
+  iconRight: '',
+  allowTogglePassword: false,
+  iconLeftClickable: false,
+  iconRightClickable: false,
+  hasCloudyColor: false,
+  size: 'md',
+  mask: '',
+  tooltip: undefined,
+  maxlength: null,
+  showMaxlengthCounter: false,
+  disabled: false,
+  readonly: false,
+  useFocusProp: false,
+  focus: false,
+  showClear: false,
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+  clear: [];
+}>();
+
+const val = ref(props.modelValue);
+
+const computedError = computed(() => {
+  if (Array.isArray(props.errors)) {
+    return props.errors.join(', ') || props.type === 'error';
+  }
+
+  return props.errors || props.type === 'error';
+});
+
+watch(val, () => {
+  emit('update:modelValue', fullySanitize(val.value));
+});
+
+watch(
+  () => props.modelValue,
+  () => {
+    val.value = props.modelValue;
   },
-};
+);
+
+val.value = props.modelValue;
 </script>
 
 <style lang="scss" scoped>

package/src/components/Input/TextInput.vue

@@ -54,144 +54,127 @@
   </div>
 </template>
 
-<script>
-import BaseInput from './BaseInput.vue';
+<script setup lang="ts">
+import { computed, ref, useAttrs, useTemplateRef } from 'vue';
+import BaseInput, { type InputSize, type InputVariant } 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');
-    },
-  },
-};
+defineOptions({
+  name: 'UnnnicTextInput',
+});
+
+export interface TextInputProps {
+  placeholder?: string | null;
+  type?: InputVariant;
+  modelValue?: string;
+  nativeType?: string;
+  iconLeft?: string | null;
+  iconRight?: string | null;
+  iconLeftClickable?: boolean | null;
+  iconRightClickable?: boolean | null;
+  allowTogglePassword?: boolean | null;
+  size?: InputSize | string;
+  maxlength?: number | null;
+  disabled?: boolean;
+  readonly?: boolean;
+  useFocusProp?: boolean;
+  focus?: boolean;
+  showClear?: boolean;
+}
+
+const props = withDefaults(defineProps<TextInputProps>(), {
+  placeholder: null,
+  type: 'normal',
+  modelValue: '',
+  nativeType: '',
+  iconLeft: null,
+  iconRight: null,
+  iconLeftClickable: null,
+  iconRightClickable: null,
+  allowTogglePassword: null,
+  size: 'md',
+  maxlength: null,
+  disabled: false,
+  readonly: false,
+  useFocusProp: false,
+  focus: false,
+  showClear: false,
+});
+
+const emit = defineEmits<{
+  'icon-left-click': [];
+  'icon-right-click': [];
+  clear: [];
+}>();
+
+const attrs = useAttrs();
+const baseInput = useTemplateRef<{ $el: HTMLInputElement }>('base-input');
+const isFocused = ref(false);
+const showPassword = ref(false);
+
+const isDisabled = computed(() => {
+  return Boolean(attrs.disabled || props.disabled);
+});
+
+const iconRightSvg = computed(() => {
+  if (props.allowTogglePassword) {
+    return showPassword.value ? 'view-off-1' : 'view-1-1';
+  }
+
+  return props.iconRight;
+});
+
+const iconScheme = computed(() => {
+  if (isDisabled.value) {
+    return 'fg-muted';
+  }
+  return 'fg-base';
+});
+
+const attributes = computed(() => {
+  return {
+    ...attrs,
+    ...(attrs['v-bind'] as Record<string, unknown> | undefined),
+    ...props,
+  };
+});
+
+function focusInput() {
+  baseInput.value?.$el.focus();
+}
+
+function onFocus() {
+  isFocused.value = true;
+}
+
+function onBlur() {
+  isFocused.value = false;
+}
+
+function onIconLeftClick() {
+  if (props.iconLeftClickable) emit('icon-left-click');
+}
+
+function onClearClick() {
+  emit('clear');
+}
+
+function onIconRightClick() {
+  if (attributes.value.disabled) return;
+  if (props.allowTogglePassword) showPassword.value = !showPassword.value;
+  else if (props.iconRightClickable) emit('icon-right-click');
+}
+
+defineExpose({
+  focusInput,
+  onFocus,
+  onBlur,
+  showPassword,
+  isFocused,
+  iconRightSvg,
+  iconScheme,
+  attributes,
+});
 </script>
 
 <style lang="scss" scoped>

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

@@ -67,7 +67,8 @@ describe('TextInput.vue', () => {
     await wrapper.setProps({ allowTogglePassword: true });
     expect(wrapper.vm.iconRightSvg).toBe('view-1-1');
 
-    await wrapper.setData({ showPassword: true });
+    wrapper.vm.showPassword = true;
+    await wrapper.vm.$nextTick();
     expect(wrapper.vm.iconRightSvg).toBe('view-off-1');
   });
 
@@ -76,14 +77,13 @@ describe('TextInput.vue', () => {
     expect(wrapper.vm.iconScheme).toBe('fg-base');
 
     await wrapper.setProps({ type: 'normal' });
-    await wrapper.setData({ isDisabled: true });
     expect(wrapper.vm.iconScheme).toBe('fg-base');
 
-    await wrapper.setData({ isDisabled: false });
     await wrapper.setProps({ modelValue: 'text' });
     expect(wrapper.vm.iconScheme).toBe('fg-base');
 
-    await wrapper.setData({ isFocused: true });
+    wrapper.vm.isFocused = true;
+    await wrapper.vm.$nextTick();
     expect(wrapper.vm.iconScheme).toBe('fg-base');
 
     await wrapper.setProps({ disabled: true });
@@ -106,9 +106,7 @@ describe('TextInput.vue', () => {
 
     await wrapper.find('.icon-right').trigger('click');
     expect(wrapper.vm.showPassword).toBe(true);
-    expect(
-      wrapper.findComponent({ name: 'BaseInput' }).attributes('type'),
-    ).toBe('text');
+    expect(wrapper.findComponent(BaseInput).props('nativeType')).toBe('text');
 
     await wrapper.find('.icon-right').trigger('click');
     expect(wrapper.vm.showPassword).toBe(false);
@@ -145,7 +143,7 @@ describe('TextInput.vue', () => {
   });
 
   test('onBlur method sets isFocused to false', async () => {
-    wrapper.setData({ isFocused: true });
+    wrapper.vm.isFocused = true;
     await wrapper.vm.$nextTick();
     expect(wrapper.vm.isFocused).toBe(true);
 
@@ -191,16 +189,14 @@ describe('TextInput.vue', () => {
   });
 
   test('onIconRightClick method does nothing if the input is disabled', async () => {
-    await wrapper.setData({ attributes: { disabled: true } });
-
-    const iconRightClickSpy = vi.spyOn(wrapper.vm, 'onIconRightClick');
+    await wrapper.setProps({
+      disabled: true,
+      allowTogglePassword: true,
+    });
 
     wrapper.vm.onIconRightClick();
 
-    expect(iconRightClickSpy).toHaveBeenCalled();
     expect(wrapper.vm.showPassword).toBe(false);
-
-    iconRightClickSpy.mockRestore();
   });
 
   test('matches the snapshot', () => {