libj-vue-comp-autocompletes

Part of libj tools

Provides vue components for phone input, autocomplete and country selection using libj-vue-comp-dropdown

Usage

npm install libj-vue-comp-autocompletes

import 'libj-vue-comp-autocompletes/dist/libj-vue-comp-autocompletes.default.min.css'
import 'libj-vue-comp-autocompletes'
//Now, j-phone-input, j-phone-display, j-autocomplete components are available globally

j-autocomplete

props

• value (Object) | default: null selected option
• visible (Boolean) | default: false if dropdown is visible or not
• id (String|Number) | default: null id of selected option
• getId(Function(item) => [id of item]) | default: a => a a function to get the id from an item
• serverSide (Boolean) | default: false whether the autocomplete needs to connect to server or not
• getItems Function(query: String, done: Function(result: Array)) | default: (query, done) => { done([]); } when serverSide prop is set to true, then set this prop to a function to get items from server
• options (Array) | default: [] when serverSide is set to false, set this prop to all items to be searched for
• searchProperties(Array) | default: [] when set to a value other than null or undefined or empty array, will indicate property names of objects that we want to search (in options prop) the user's input
• placeholder
• delay (Number) | default: 500 debouncing delay for searching user's input
• clearable (Boolean) | default: false whether or not the user can remove the selected item
• disabled (Boolean) | default: false set to true to disable the component

events

• input which updates the value
• searched (items: Array) is called when searching (both client-side or server-side) is done. returned items are passed to event handler
• searchTextChanged (query: String) is called when user is typing to search. the user input is passed to event handler
• change (id: (String|Number)) is called when user selects an item. the id of that item is passed to event handler

slots

• placeholder slot for placeholder. default value is the placeholder prop
• result slot for the selected item. slot-scope is: { option, id }. option is the item and id is its id extracted via getId prop
• header header slot for dropdown
• footer footer slot for dropdown
• option slot for an item in dropdown. slot-scope is: { option, id }. option is the item and id is its id extracted via getId prop

methods

• toggle() toggles the visibility of dropdown
• clear() clears the selected item

j-country-select

props

• value (String) | default: '' selected country code (two-letter country code)
• displayField (String) | default: null it can be 'code', 'name' or null. 'code' and 'name' are country properties and null indicates that a fullname property must be shown for a country. country fullname is 'code' - 'name'
• placeholder (String) | default: null placeholder for underlying autocomplete
• delay (Number) | default: 500 debounce delay
• clearable (Boolean) | default: false if set to true, the user can clear selected country
• disabled (Boolean) | default: false if set to true, the component is disabled

j-phone-input

props

• value (Object) | default: {phone: '', countryCode: 'US'} selected phone object
• inputName (String) | default: '' phone input name
• countryCodeInputName (String) | default: '' phone country code input name
• disabled (Boolean) | default: false if set to true, the component is disabled

Test

• Run this in a separate command line to start node server

node server.js

• Run one of the following to re-create bundles

npm run dev
npm run dev:watch

• Navigate to http://localhost:3000

Build

npm run build
npm run build:watch