Usage

Query builder component

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

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.

Collection component

The collection component will display data fetched.

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	-
directQuery	boolean	true	-
limit	integer	true	-
offset	string	false	0
id	string	false	-
onRowClick	function	false	-
quickSort	boolean	false	true
postRequest	function	false	-
allowedCollectionTypes	array	false	['pagination']
displayCount	boolean	false	-
displayShortcuts	boolean	false	false
onExport	function	false	-
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	-

Columns

Columns to display in collection table.

Search component

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

props

key	type	required	default	description
model	string	true	-
allowReset	boolean	false	true
computedScopes	object	false	-
allowedScopes	object	false	-
allowedProperties	object	false	-
allowedOperators	object	false	-
displayOperator	boolean or object	false	true
userTimezone	string	false	UTC
requestTimezone	string	false	UTC
deferred	number	false	1000
columns	array	true	-
filter	object	false	-
directQuery	boolean	true	-
limit	integer	true	-
offset	string	false	0
onRowClick	function	false	-
quickSort	boolean	false	true
postRequest	function	false	-
allowedCollectionTypes	array	false	['pagination']
displayCount	boolean	false	-
onExport	function	false	-
requester	function or object	false	-
manually	boolean	false	true

Example

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

<template>
  <Search model="user" />
</template>