@webbytes/vue-jpql-autocomplete

vue-jpql-autocomplete

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.

Table of contents

1. Get started using NPM
2. Simple usage in vue application
3. Supported properties
4. Field settings object definition
5. Slots
6. Demo

Get started using NPM

npm install @webbytes/vue-jpql-autocomplete --save

Simple Usage in vue application

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>

Supported properties

Field Settings Object definition

Fied Settings provided as a array in the field settings property is an array of field objects having the following fields:

Slots

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.

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Run your unit tests

npm run test:unit

Customize configuration

See Configuration Reference.