npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@webbytes/vue-jpql-autocomplete

v0.4.3

Published

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 configuratio

Downloads

36

Readme

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

|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|

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:

|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 stringsORFunction (string value, string field) : Promise|Array of string values that are matched with the user text to provide the suggestions. E.g. ['Open','Closed']ORFunction that accepts entered value and field name as strings and returns a Promise object that will be resolved|

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.