Usage

Query builder component

The query builder component will permit to user to build its request by defining some filters.

Usage

<script setup>
import { ref } from "vue";
import { Builder } from '@query-kit/vue';

const filter = ref({});
</script>

<template>
  <Builder model="user" v-model="filter"/>
</template>

Props

key	type	required	default	description
modelValue	object	true	-	The query to build (use v-model). Given object will be updated when user will make changes.
model	string	true	-	The model name
allowReset	boolean	false	true	Display a button to permit user to reset query to original state.
computedScopes	object	false	-	Build and inject filters in query. More information here.
allowedScopes	object	false	-	Restrict allowed scopes that may be part of query. More information here.
allowedProperties	object	false	-	Restrict allowed properties that may be part of query. More information here.
allowedOperators	object	false	-	Restrict allowed operators that may be part of query. More information here.
displayOperator	boolean or object	false	true	Display operators.
userTimezone	string	false	UTC	Display time in given timezone and time inputs are considered in given timezone.
requestTimezone	string	false	UTC	Timezone to use when requesting server.
deferred	number	false	1000	Time to wait after a user input to compute the query.
displayShortcuts	boolean	false	false	Display shortcuts (buttons for keyboard users)
id	string	false	-	The html element id.

Computed scopes

Build and inject filters in query.

Allowed scopes

Restrict allowed scopes that may be part of query.

Allowed properties

Restrict allowed properties that may be part of query.

Allowed operators

Restrict allowed operators that may be part of query.

Events

Computed

A computed event is triggered when user update query filter (the event is deferred according deferred props). The computed filter format may be different than the original filter. It is the computed filter that will be used when requesting sever. The computed filter is given to the event listener as first parameter.

<Builder @computed="(computedFilter) => handle(computedFilter)" />

Go to collection

A go-to-collection event is triggered when the user want to scroll to the collection (when use "go to collection" shortcut for keyboard users).

<Builder @go-to-collection="scrollToCollection" />

Collection component

The collection component will display data fetched.

Usage

<script setup>
import { Collection } from '@query-kit/vue';
</script>

<template>
  <Collection model="user" :columns="['first_name', 'last_name']" :limit="20" :direct-query="true"/>
</template>

Props

key	type	required	default	description
model	string	true	-	The model name
columns	array	true	-	Columns to display in collection table. More information here.
filter	object	false	-	The filter to apply when requesting server.
directQuery	boolean	true	-	Request server and display results when component is mounted.
limit	integer	true	-	The count limit of fetched items
offset	string	false	0	The offset of items to fetch
quickSort	boolean	false	true	Display quick sort (permit to sort results when click on collection column header).
postRequest	function	false	-	Function called just after querying server (permit to modify fetched items).
allowedCollectionTypes	array	false	['pagination']	Determine if collection is paginated or with infinite scroll. Allowed values are pagination and infinite. if both are given, user will be able to switch from one to the other.
displayCount	boolean	false	-	Display total items count that match query.
displayShortcuts	boolean	false	false	Display shortcuts (buttons for keyboard users)
userTimezone	string	false	UTC	Display time in given timezone and time inputs are considered in given timezone.
requestTimezone	string	false	UTC	Timezone to use when requesting server.
requester	function or object	false	-	permit to override requester defined in global plugin configuration.
id	string	false	-	The html element id.

Columns

Columns to display in collection table.

Events

Row click

The row-click event is triggered on collection row click.

• The current row item is injected as first parameter.
• The html event is injected as second parameter.

<Collection /* ... */ @row-click="(item, e) => handleRowClick(item, e)" />

Export

The export event is triggered on export button click. The export button is displayed only if there is a given event listener.

<Collection /* ... */ @export="exportToExcel" />

Go to filter

The go-to-filter event is triggered when the user want to scroll to the filter (when use "go to filter" shortcut for keyboard users).

<Collection /* ... */ @go-to-filter="scrollToFilter" />

Search component

The search component combine both previous components. That permit you to load the search very easily with only one component.

Usage

<script setup>
import { Search } from '@query-kit/vue';
</script>

<template>
  <Search model="user" :columns="['first_name', 'last_name']" :limit="20"/>
</template>

Props

key	type	required	default	description
model	string	true	-	The model name
allowReset	boolean	false	true	Display a button to permit user to reset query to original state.
computedScopes	object	false	-	Build and inject filters in query. More information here.
allowedScopes	object	false	-	Restrict allowed scopes that may be part of query. More information here.
allowedProperties	object	false	-	Restrict allowed properties that may be part of query. More information here.
allowedOperators	object	false	-	Restrict allowed operators that may be part of query. More information here.
displayOperator	boolean or object	false	true	Display operators.
userTimezone	string	false	UTC	Display time in given timezone and time inputs are considered in given timezone.
requestTimezone	string	false	UTC	Timezone to use when requesting server.
manually	boolean	false	true	If true user must click on a button to request server with new filter. Otherwise the server is requested automatically after user update.
deferred	number	false	1000	Time to wait after a user input to request server (only if manually is false).
columns	array	true	-	Columns to display in collection table. More information here.
filter	object	false	-	The filter to apply when requesting server.
directQuery	boolean	false	true	Request server and display results when component is mounted.
limit	integer	true	-	The count limit of fetched items
offset	string	false	0	The offset of items to fetch
quickSort	boolean	false	true	Display quick sort (permit to sort results when click on collection column header).
postRequest	function	false	-	Function called just after querying server (permit to modify fetched items).
allowedCollectionTypes	array	false	['pagination']	Determine if collection is paginated or with infinite scroll. Allowed values are pagination and infinite. if both are given, user will be able to switch from one to the other.
displayCount	boolean	false	-	Display total items count that match query.
requester	function or object	false	-	permit to override requester defined in global plugin configuration.

Events

Row click

More details here.

Export

More details here.