Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vue3-simple-typeahead
Advanced tools
vue3-simple-typeahead - npm Package Compare versions
Comparing version 0.0.1 to 0.0.2
| { | ||
| "name": "vue3-simple-typeahead", | ||
| "version": "0.0.1", | ||
| "version": "0.0.2", | ||
| "description": "Simple Vue3 typeahead component that show a suggested list of elements while the user types in.", | ||
@@ -5,0 +5,0 @@ "author": "frikinside", |
@@ -6,2 +6,4 @@ # vue3-simple-typeahead | ||
| The component includes it's own input and when the user types on it (at least two characters) the suggested options appear. | ||
| ## Demo | ||
@@ -13,3 +15,3 @@ | ||
| ### NPM | ||
| ### [NPM](https://www.npmjs.com/package/vue3-simple-typeahead) | ||
@@ -25,3 +27,3 @@ ```js | ||
| ```html | ||
| <script src="https://unpkg.com/@frikinside/vue3-simple-typeahead"></script> | ||
| <script src="https://unpkg.com/vue3-simple-typeahead"></script> | ||
| ``` | ||
@@ -34,7 +36,10 @@ | ||
| ```js | ||
| import Vue from 'vue' | ||
| import SimpleTypeahead from 'vue3-simple-typeahead' | ||
| import 'vue3-simple-typeahead/dist/vue3-simple-typeahead.css' | ||
| import { createApp } from 'vue'; | ||
| import App from './App.vue'; | ||
| import SimpleTypeahead from 'vue3-simple-typeahead'; | ||
| import 'vue3-simple-typeahead/dist/vue3-simple-typeahead.css'; //Optional default CSS | ||
| Vue.use(SimpleTypeahead) | ||
| let app = createApp(App); | ||
| app.use(SimpleTypeahead); | ||
| app.mount('#app'); | ||
| ``` | ||
@@ -46,5 +51,6 @@ | ||
| import SimpleTypeahead from 'vue3-simple-typeahead' | ||
| import 'vue3-simple-typeahead/dist/vue3-simple-typeahead.css' //Optional default CSS | ||
| export default { | ||
| name: 'my-component', | ||
| name: 'my-vue-component', | ||
| ... | ||
@@ -61,11 +67,12 @@ components: { | ||
| ```html | ||
| <simple-typeahead | ||
| id="typeahead_id" | ||
| placeholder="Start writing..." | ||
| :items="['One','Two','Three',...]" | ||
| @selectItem="selectItemEventHandler" | ||
| @onInput="onInputEventHandler" | ||
| @onFocus="onInputEventHandler" | ||
| @onBlur="onInputEventHandler"> | ||
| </simple-typeahead> | ||
| <vue3-simple-typeahead | ||
| id="typeahead_id" | ||
| placeholder="Start writing..." | ||
| :items="['One','Two','Three',...]" | ||
| @selectItem="selectItemEventHandler" | ||
| @onInput="onInputEventHandler" | ||
| @onFocus="onInputEventHandler" | ||
| @onBlur="onInputEventHandler" | ||
| > | ||
| </vue3-simple-typeahead> | ||
| ``` | ||
@@ -75,16 +82,15 @@ | ||
| | Prop | Type | Default | Description | | ||
| | :---------------------------------- | :------------------ | :------------------- | :-------------------------------------------------------------------------- | | ||
| | [`id`](#id) | String | Random id generation | The id for the input control. Can be useful to link with a `label for=""` | | ||
| | [`placeholder`](#placeholder) | String | `''` | Placeholder text for the input | | ||
| | [`items`](#items) | Array (Required) | | List of strings with the elements for suggestions | | ||
| | Prop | Type | Default | Description | | ||
| | :---------------------------- | :--------------- | :------------------- | :------------------------------------------------------------------------ | | ||
| | [`id`](#id) | String | Random id generation | The id for the input control. Can be useful to link with a `label for=""` | | ||
| | [`placeholder`](#placeholder) | String | `''` | Placeholder text for the input | | ||
| | [`items`](#items) | Array (Required) | | List of strings with the elements for suggestions | | ||
| ### Events | ||
| | Event | Signature | Description | | ||
| | :-------------------------- | :------------------------------------------------------- | :-------------------------------------------------------------------------------------------------- | | ||
| | [`selectItem`](#selectItem) | `function (item: String): void` | Emitted when the user selects an item from the suggestion list | | ||
| | [`onInput`](#onInput) | `function (input: String): void` | Emitted when the user types anything | | ||
| | [`onFocus`](#onFocus) | `function (input: String): void` | Emitted when the input control get the focus | | ||
| | [`onBlur`](#onBlur) | `function (input: String): void` | Emitted when the input control lost the focus [When the user select an item, the focus is lost too] | | ||
| | Event | Signature | Description | | ||
| | :-------------------------- | :------------------------------- | :-------------------------------------------------------------------------------------------------- | | ||
| | [`selectItem`](#selectItem) | `function (item: String): void` | Emitted when the user selects an item from the suggestion list | | ||
| | [`onInput`](#onInput) | `function (input: String): void` | Emitted when the user types anything | | ||
| | [`onFocus`](#onFocus) | `function (input: String): void` | Emitted when the input control get the focus | | ||
| | [`onBlur`](#onBlur) | `function (input: String): void` | Emitted when the input control lost the focus [When the user select an item, the focus is lost too] | |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.55%
28946
- Number of lines in readme file
- increased by7.14%
90
No dependency changes