A VueJS component that can accept user input to be used to generate a SQL where condition or JPA compliant JPQL where condition. The component provides suggestions for the user to select fields, operators or values from a provided list during configuration.
- Get started using NPM
- Simple usage in vue application
- Supported properties
- Field settings object definition
- Slots
- Demo
npm install @webbytes/vue-jpql-autocomplete --save
In script:
import VueJpqlAutocomplete from '@webbytes/vue-jpql-autocomplete';
export default {
...
components: {
VueJpqlAutocomplete
},
...
}
In template:
<template>
...
<vue-jpql-autocomplete
placeholder="enter query here..."
:field-settings="[
{ name: 'status', values: ['Open','Closed'], type: 'text' },
{ name: 'id', type: 'number' },
{ name: 'description', type: 'text' },
{ name: 'category', type: 'text', values: function(val, field) {
//Ajax call or any other method that returns a Promise that will be resolved on ajax response.
...
}
}
]"
:operators="['=','<>','>','>=','<','<=']"/>
...
</template>
Property | Description | Examples |
---|---|---|
placeholder | string value that is used to provide the placeholder text when no value is entered in the autocomplete box. |
Please enter query here... |
operators | array of string operators supported. Should be a subset ['LIKE','IN','<>','<=','>=','=','<','>'] |
['=','<>','>','>=','<','<='] |
field-settings | array of field objects that can be used for providing a lookup list for the user to pick the fields or its values from. |
[{ name: 'status', values: ['Open','Closed'], type: 'text' }, { name: 'id', type: 'number' }, { name: 'description', type: 'text' }] |
suggest-on-select | boolean value used to set preference for auto suggestions to appear on selection of previous value. Defaut false. | true or false |
Fied Settings provided as a array in the field settings property is an array of field objects having the following fields:
name | type | description |
---|---|---|
name | string | name of the field. Used for matching the field with the text typed by the user. E.g. name, description, status, etc. |
type | string | the type of the field. Used in the help text shown to user if there are no values to be picked up from. E.g. text, number, etc. |
values | Array of strings OR Function (string value, string field) : Promise |
Array of string values that are matched with the user text to provide the suggestions. E.g. ['Open','Closed'] OR Function that accepts entered value and field name as strings and returns a Promise object that will be resolved |
vue-jpql-autocomplete uses another vue package vue-autosuggest for providing the search box and options. Hence many features of this component can be used as is. The most important one being the slots for providing custom content within different sections of the control. The most common ones are:
<template slot="before-input"> content before the <input /> goes here </template>
<template slot="after-input"> content after the <input /> goes here </template>
<template slot="before-suggestions"> content before the <ul> goes here </template>
<template slot="after-section"> Default footer content for all sections </template>
<template slot="after-suggestions"> content after the <ul> goes here </template>
<template slot-scope="{suggestion}">Content for each suggestion as {{suggestion.item}}</template>
For complete details on how to use slots refer here.
Using scoped slots, one can easily change the displayed options of the suggestions.
npm install
npm run serve
npm run build
npm run test
npm run lint
npm run test:unit