open-index/open-npm huggingface dataset:
npm package: @jtekt/iss-query-filters
Description: A reusable QueryFilter component built with Vue 3 + Vuetify 3.
Author: Leah
Latest version: 0.2.6

# @jtekt/iss-query-filters

A reusable QueryFilter component built with Vue 3 + Vuetify 3.

It lets users build nested AND/OR filter trees and outputs a query object via `v-model`.

## Install

```bash
npm install @jtekt/iss-query-filters
# peer deps
npm install vue vuetify
```

## Usage

```ts
// main.ts
import { createApp } from "vue";
import App from "./App.vue";

import "vuetify/styles";
import { createVuetify } from "vuetify";

import { QueryFilterPlugin } from "@jtekt/iss-query-filters";
import "@jtekt/iss-query-filters/style.css";

const vuetify = createVuetify();

createApp(App).use(vuetify).use(QueryFilterPlugin).mount("#app");
```

```ts
<script setup lang="ts">
import { ref } from "vue";

const query = ref<Record<string, any>>({});
const loading = ref(false);
</script>

<template>
  <QueryFilter
    v-model="query"
    :fields="['_id', 'description', 'title']"
    :loading="loading"
  />
</template>
```

![QueryFilter-without-limitField](http://10.115.1.14/leahishiguro/iss-query-filters/-/raw/main/playground/assets/QueryFilter-withoutLimit.png)

### `show-limit-field`

Controls whether the **Limit** field is displayed in the QueryFilter component.

Use this when your page **does not already manage pagination or items-per-page**.  
If your table or data list already handles page size, keep this set to `false` to avoid duplicate limit controls.

**Type:** `boolean`  
**Default:** `false`

```ts
// It can also be imported it directly as a component not plugin
import { QueryFilter } from "@jtekt/iss-query-filters";

<QueryFilter
  v-model="query"
  :fields="['_id', 'description', 'title']"
  :loading="loading"
  :show-limit-field="true"
/>
```

![QueryFilter-with-limitField](http://10.115.1.14/leahishiguro/iss-query-filters/-/raw/main/playground/assets/QueryFilter-withLimit.png)

`query` will contain keys like `from`, `to`, `limit`, `regex`, and `filter` (JSON string with your nested AND/OR Mongo-like query).