salix-front/docs/components/vnInput.md

VnInput

VnInput is a custom input component that provides various useful features such as validation, input clearing, and more.

Props

modelValue

• Type: String | Number
• Default: null
• Description: The value of the model bound to the component.

isOutlined

• Type: Boolean
• Default: false
• Description: If true, the component is rendered with an outlined style.

info

• Type: String
• Default: ''
• Description: Additional information displayed alongside the component.

clearable

• Type: Boolean
• Default: true
• Description: If true, the component shows a button to clear the input.

emptyToNull

• Type: Boolean
• Default: true
• Description: If true, converts empty inputs to null.

insertable

• Type: Boolean
• Default: false
• Description: If true, allows the insertion of new values.

maxlength

• Type: Number
• Default: null
• Description: The maximum number of characters allowed in the input.

uppercase

• Type: Boolean
• Default: false
• Description: If true, converts the input text to uppercase.

Emits

update:modelValue

• Description: Emits the updated model value.
• Behavior: This event is emitted whenever the input value changes. It is used to update the model value bound to the component.

update:options

• Description: Emits the updated options.
• Behavior: This event is emitted when the component's options change. It is useful for components with dynamic options.

keyup.enter

• Description: Emits an event when the Enter key is pressed.
• Behavior: This event is emitted whenever the Enter key is pressed while the input is focused. It can be used to handle specific actions when the input is confirmed.

remove

• Description: Emits an event to remove the current value.
• Behavior: This event is emitted when the clear button (close icon) is clicked. It is used to handle the removal of the current input value.

Functions

focus

• Description: Focuses the input.
• Behavior: This function is exposed so it can be called from outside the component. It uses vnInputRef.value.focus() to focus the input.

handleKeydown

• Description: Handles the keydown event of the input.
• Behavior: This function is called whenever a key is pressed while the input is focused. If the pressed key is Backspace, it does nothing. If insertable is true and the pressed key is a number, it calls handleInsertMode.

handleInsertMode

• Description: Handles the insertion mode of values.
• Behavior: This function is called when insertable is true and a numeric key is pressed. It inserts the value at the cursor position and updates the input value. Then, it moves the cursor to the correct position.

handleUppercase

• Description: Converts the input value to uppercase.
• Behavior: This function is called when the uppercase icon is clicked. It converts the current input value to uppercase.

Usage

<template>
    <VnInput
        v-model="inputValue"
        :isOutlined="true"
        info="Additional information"
        :clearable="true"
        :emptyToNull="true"
        :insertable="false"
        :maxlength="50"
        :uppercase="true"
        @update:modelValue="handleUpdate"
        @keyup.enter="handleEnter"
        @remove="handleRemove"
    />
</template>

<script setup>
import { ref } from 'vue';
import VnInput from 'src/components/common/VnInput.vue';

const inputValue = ref('');

const handleUpdate = (value) => {
    console.log('Updated value:', value);
};

const handleEnter = () => {
    console.log('Enter pressed');
};

const handleRemove = () => {
    console.log('Value removed');
};
</script>