kiosk-autocomplete - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

package.json

 {
   "name": "kiosk-autocomplete",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A custom Vue autocomplete component compatible kiosk touchscreen keyboard",
@@ -5,0 +5,0 @@ "main": "src/Autocomplete.vue",

README.md

 # kiosk-autocomplete
-This is a library for autocomplete component compatible with Kiosk Touchscreen Keyboard
 
-## Getting started
-<kiosk-autocomplete
-    v-model="value"
-    id="language"
-    name="language"
-    label="Language"
-    :items="items"
-    :item-props="(item: any) => ({ title: item.label, value: item.code, shortCode: item.shortCode })"
-    kiosk-class="virtual-keyboard-input"
-    :custom-filter="(query: string, item: any) => (item.title.toLowerCase().includes(query.toLowerCase()) || item.value.toLowerCase() === query.toLowerCase() || (item.shortCode && item.shortCode.toLowerCase() === query.toLowerCase()))"
-/>
+**kiosk-autocomplete** is a Vue.js library that provides an autocomplete component designed specifically for compatibility with Kiosk Touchscreen Keyboards. This component allows users to easily search and select items from a predefined list using a touchscreen interface, making it ideal for kiosk applications.
 
-## Installation
-npm install kiosk-autocomplete
+## Features
+
+- **Touchscreen Compatibility**: Designed to work seamlessly with touchscreen keyboards, enabling intuitive input for kiosk users.
+  
+- **Customizable Item Props**: Customize how autocomplete items are displayed and mapped to values using the `item-props` property.
+
+- **Flexible Filtering**: Implement custom filtering logic using the `custom-filter` property to match items based on specific criteria.
+
+## Getting Started
+
+To integrate **kiosk-autocomplete** into your Vue.js project, follow these steps:
+
+1. Install the package from npm:
+
+   ```bash
+   npm install kiosk-autocomplete
+   ```
+2. Import the component into your Vue.js application:
+   ```bash
+   import KioskAutocomplete from 'kiosk-autocomplete';
+   ```
+3. Use the component in your Vue template:
+    ```javascript
+    <template>
+      <div>
+        <kiosk-autocomplete
+          v-model="value"
+          id="language"
+          name="language"
+          label="Language"
+          :items="items"
+          :item-props="(item: any) => ({ title: item.label, value: item.code, shortCode: item.shortCode })"
+          kiosk-class="virtual-keyboard-input"
+          :custom-filter="(query: string, item: any) => (item.title.toLowerCase().includes(query.toLowerCase()) || item.value.toLowerCase() === query.toLowerCase() || (item.shortCode && item.shortCode.toLowerCase() === query.toLowerCase()))"
+        />
+      </div>
+    </template>
+
+    <script>
+    import KioskAutocomplete from 'kiosk-autocomplete';
+
+    export default {
+      components: {
+        KioskAutocomplete,
+      },
+      data() {
+        return {
+          value: '',
+          items: [/* Your autocomplete items here */],
+        };
+      },
+    };
+    </script>
+    ```
+4. Customize the component properties (items, item-props, custom-filter, etc.) to suit your specific requirements.
+
+## Usage
+
+- **v-model**: Bind the selected value to a data property using `v-model`.
+
+- **id, name, label**: Provide metadata for the autocomplete input field.
+
+- **items**: Pass an array of items to be displayed in the autocomplete dropdown.
+
+- **item-props**: Define a function to customize how items are displayed and mapped to values.
+
+- **custom-filter**: Implement custom filtering logic to match items based on specific criteria.
+
+- **kiosk-class**: Apply a CSS class to style the autocomplete input for kiosk compatibility.
+
+For more details on component usage and customization options, refer to the documentation provided with the library.
+
+With **kiosk-autocomplete**, enhance your Vue.js kiosk applications with an intuitive and user-friendly autocomplete component tailored for touchscreen interactions.

No alert changes

Improved metrics

Total package byte prevSize

7843

increased by43.41%

Number of lines in readme file

78

increased by358.82%

No dependency changes