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

```vue
<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>
```