Virtual-keyboard-input NPM

YVKeyboard

YVKeyboard is a code repository for a virtual keyboard designed to run on Yocto Linux. It serves as a reusable Vue component for all UVN products in the MOL team.

YVKeyboard

Installation

To install YVKeyboard, follow these steps:

Clone the repository:

git clone https://github.com/your-username/YVKeyboard.git

Install the necessary dependencies:

npm install

Build the project:

npm run build

Usage

To use virtual-keyboard-input in your UVN products, follow these steps:

Import the virtual-keyboard-input component into your Vue project:

import keyboard from 'virtual-keyboard-input';
import 'virtual-keyboard-input/dist/style.css'

Add the keyboard component to your template:

<template>
  <div>
    <!-- Your UVN product content here -->
    <keyboard type="text" v-model:value="value"></keyboard>
  </div>
</template>

The keyboard component accepts the following props:
- v-model:value (required)
- type (required): text or number
- width: number
- height: number
- disabled: boolean
- placeholder: string
- isInteger: boolean (Whether the decimal point is disabled)
- isTextCenter: boolean
- maxLength: number (Limit the maximum input character)
- isPassword: boolean (Whether to turn on the password keyboard)
- openAudio: boolean (Whether to turn on keyboard sound)
- useKeyboard: boolean (Whether to turn on the soft keyboard)
- validateFiled: Function (Custom Inspection input)
```
<template>
  <div>
    <keyboard
      v-model:value="e1000"
      width="500"
      type="number"
      placeholder="123123asdasd"
      :validateFiled="(value, callback) => {
        if (value.length > 5) {
          callback("max five");
        } else {
          callback();
        }
      }"
  ></keyboard>
  </div>
</template>
```
  Default values:
- v-model:value: ''
- type: 'text'
- width: 104
- height: 60
- disabled: false
- placeholder: ''
- isInteger: false
- isTextCenter: false
- maxLength: ''
- isPassword: false
- openAudio: true
- useKeyboard: true
- validateFiled: ''
The keyboard component accepts the following Events:
- input: Function (Triggered when the input value changes. The updated value is passed as the event payload.)
- blur: Function (blur when the input value changes. The updated value is passed as the event payload.)
- change: Function (change when the input value changes. The updated value is passed as the event payload.)