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
modelValue	object	true	-
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
displayShortcuts	boolean	false	false
id	string	false	-

Collection component

The collection component will display data fetched.

props

key	type	required	default
model	string	true	-
columns	array	true	-
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
requestTimezone	string	false	UTC
requester	function or object	false	-

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