{"_id":"@ampgroep/vuetify2-query-builder","name":"@ampgroep/vuetify2-query-builder","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@ampgroep/vuetify2-query-builder","author":{"name":"Igor Buriakov - AMP Groep"},"keywords":["vue","vuetify","vuetify2","vue2","query builder","query-builder","filter","query","builder"],"version":"0.1.0","repository":{"type":"git","url":"git+https://github.com/ampgroep/vuetify2-query-builder.git"},"publishConfig":{"access":"public"},"main":"./dist/query-builder.umd.js","module":"./dist/query-builder.mjs","types":"./dist/lib/main.d.ts","exports":{".":{"import":"./dist/query-builder.mjs","require":"./dist/query-builder.umd.js"},"./*":"./*"},"scripts":{"dev":"vue-tsc && vite","build":"vue-tsc && vite build","preview":"vite preview"},"peerDependencies":{"vue":"^2.0.0","vuetify":"^2.0.0"},"devDependencies":{"@vitejs/plugin-vue2":"^2.3.0","@vue/tsconfig":"^0.4.0","path":"^0.12.7","prettier":"^3.1.0","sass":"^1.81.0","typescript":"^5.3.2","unplugin-vue-components":"^0.27.4","vite":"5.2.6","vite-plugin-dts":"^4.0.0","vue":"^2.7.16","vue-tsc":"^2.0.29","vuetify":"^2.7.2"},"gitHead":"b32e2756c378dfd836765e500e2512111df05ae4","description":"## Usage:","bugs":{"url":"https://github.com/ampgroep/vuetify2-query-builder/issues"},"homepage":"https://github.com/ampgroep/vuetify2-query-builder#readme","_id":"@ampgroep/vuetify2-query-builder@0.1.0","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-fvP7XBcHWDDuwmphMgTXMPiMbNIkYol6ZGx3wC2byBy5OY2zIprhWPHvnTKwo4QRAL6UjL6m6bE5TqydhT+UDw==","shasum":"82ce773907af71ecb6d5d05b29d6e546dff3b165","tarball":"https://registry.npmjs.org/@ampgroep/vuetify2-query-builder/-/vuetify2-query-builder-0.1.0.tgz","fileCount":18,"unpackedSize":703716,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVntwCYi7x0so+ep/HXtLNqVlgpmMckRaKtIo5K8RUwwIhAP47DVIiW8O3NK2llZI8iUk0KSiIRVo8eyAdpHn+Nvih"}]},"_npmUser":{"name":"igorburiakov","email":"igor.buriakov@ampgroep.nl"},"directories":{},"maintainers":[{"name":"kambiz","email":"Kambiz.Khojasteh@ampgroep.nl"},{"name":"ayrthon.sadikrama","email":"ayrthon.sadikrama@ampgroep.nl"},{"name":"peter81","email":"peter.vanlaer@ampgroep.nl"},{"name":"igorburiakov","email":"igor.buriakov@ampgroep.nl"},{"name":"pascal.hartemink","email":"pascal.hartemink@ampgroep.nl"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vuetify2-query-builder_0.1.0_1732116999741_0.23247746439709283"},"_hasShrinkwrap":false}},"time":{"created":"2024-11-20T15:36:39.610Z","0.1.0":"2024-11-20T15:36:40.065Z","modified":"2024-11-20T15:36:40.410Z"},"maintainers":[{"name":"kambiz","email":"Kambiz.Khojasteh@ampgroep.nl"},{"name":"ayrthon.sadikrama","email":"ayrthon.sadikrama@ampgroep.nl"},{"name":"peter81","email":"peter.vanlaer@ampgroep.nl"},{"name":"igorburiakov","email":"igor.buriakov@ampgroep.nl"},{"name":"pascal.hartemink","email":"pascal.hartemink@ampgroep.nl"}],"description":"## Usage:","homepage":"https://github.com/ampgroep/vuetify2-query-builder#readme","keywords":["vue","vuetify","vuetify2","vue2","query builder","query-builder","filter","query","builder"],"repository":{"type":"git","url":"git+https://github.com/ampgroep/vuetify2-query-builder.git"},"author":{"name":"Igor Buriakov - AMP Groep"},"bugs":{"url":"https://github.com/ampgroep/vuetify2-query-builder/issues"},"readme":"# Vuetify Query Builder\n\n## Usage:\n\nThe query builder can be used by simply importing the component\nand using inside a vue component: \n```vue\n<template>\n  ...\n  <query-builder v-model=\"filter\" :filter-fields=\"filter_fields\" :color=\"color\" :operators='operators'>\n  </query-builder>\n  ...\n</template>\n\nOptions API:\n<script>\n  import QueryBuilder from '@ampgroep/vuetify-query-builder'\n  import '@ampgroep/vuetify-query-builder/dist/style.css'\n  export default {\n     components: { QueryBuilder },\n     data() {\n       return {\n           filter: {},\n           filter_fields: ['id', 'name', 'date', 'gender'],\n           // By default, this package will try to use your projects primary color  \n           color: 'royalblue',\n           operators: [\n              { value: 'eq', text: '=', type: 'string' },\n              { value: 'ne', text: '!=', type: 'string' }\n            ]\n         }\n     }\n  }\n</script>\n\nComposition API: \n<script setup>\n  import QueryBuilder from '@ampgroep/vuetify-query-builder'\n  import '@ampgroep/vuetify-query-builder/dist/style.css'\n  import { ref } from 'vue'\n  let query = ref({})\n  const filter_fields = ['id', 'name', 'date', 'gender']\n  const color = 'royalblue'\n</script>\n```\n## Expected parameters:\n\n```ts\nclass QueryBuilder {\n  modelValue: {} | Query\n  filterFields: Array<string>\n  color: String\n  operators: Array<Operator>\n}\n```\n### Operator:\n```ts\ntype Operator = { value: String; text: string; type: String }\n// default operators: \nconst defaultOperators: Array<Operator> = [\n  { value: 'eq', text: '=', type: 'string' },\n  { value: 'ne', text: '!=', type: 'string' },\n  { value: 'gt', text: '>', type: 'string' },\n  { value: 'lt', text: '<', type: 'string' },\n  { value: 'gte', text: '>=', type: 'string' },\n  { value: 'lte', text: '<=', type: 'string' },\n  { value: 'regexp', text: 'regexp', type: 'string' },\n  { value: 'not regexp', text: 'not regexp', type: 'string' },\n  { value: 'like', text: 'like', type: 'string' },\n  { value: 'not like', text: 'not like', type: 'string' },\n  { value: 'exists', text: 'exists', type: 'none' },\n  { value: 'not exists', text: 'not exists', type: 'none' },\n  { value: 'is null', text: 'is null', type: 'none' },\n  { value: 'not null', text: 'not null', type: 'none' },\n  { value: 'in', text: 'in', type: 'array' },\n  { value: 'not in', text: 'not in', type: 'array' },\n  // support of placeholder values, in case of the actual value being processed server side\n  // Example: a preconfigure date\n  { value: 'in', text: 'in placeholder', type: 'placeholder' },\n  { value: 'not in', text: 'not in placeholder', type: 'placeholder' }\n]\n```\n\n### 'modelValue' parameter:\n```ts\n\ninterface Query {\n    logicalOperator: LogicalOperator // \"AND\" or \"OR\"\n    children: Children<Query | QueryRule> // An array of child elements (either groups or rules)\n}\n\ninterface QueryRule {\n    rule?: string\n    operator: Operator['value']\n    operand: string\n    value: Array<string | number> | string | number | null \n}\n\n```\n### Filter object example \n```ts\nconst filter = ref({\n  logicalOperator: 'AND',\n  children: [\n    {\n      type: 'query-builder-group',\n      query: {\n        logicalOperator: 'OR',\n        children: [\n          {\n            type: 'query-builder-rule',\n            query: {\n              rule: 'type',\n              operator: 'IN',\n              operand: 'type',\n              value: [1, 2, 3, 4, 5]\n            },\n            originalIndex: 0\n          },\n          {\n            type: 'query-builder-rule',\n            query: {\n              rule: 'category',\n              operator: 'IN',\n              operand: 'category',\n              value: [1, 2, 3]\n            },\n            originalIndex: 1\n          },\n          {\n            type: 'query-builder-group',\n            query: {\n              logicalOperator: 'AND',\n              children: [\n                {\n                  type: 'query-builder-rule',\n                  query: {\n                    rule: '',\n                    operator: 'gte',\n                    operand: 'customerID',\n                    value: '12400'\n                  },\n                  originalIndex: 0\n                },\n                {\n                  type: 'query-builder-rule',\n                  query: {\n                    rule: '',\n                    operator: 'in',\n                    operand: 'deliveryDate',\n                    value: 'configured_delivery_date'\n                  },\n                  originalIndex: 1\n                }\n              ]\n            },\n            originalIndex: 2\n          }\n        ]\n      }\n    },\n    {\n      type: 'query-builder-rule',\n      query: {\n        rule: 'status',\n        operator: 'IN',\n        operand: 'status',\n        value: ['created', 'processing', 'done']\n      }\n    }\n  ]\n} as Query)\n\n```\nAdditionally, the package will accept a string with valid json as a value and will try to parse it.\n\nExample:\n![img.png](/example.png)\n\n","readmeFilename":"README.md"}