{"_id":"@databit/filters","_rev":"3-b9a05dcb077a21cb8dbfc6e41b59e4c5","name":"@databit/filters","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@databit/filters","version":"0.0.1","_id":"@databit/filters@0.0.1","maintainers":[{"name":"databit","email":"databit.plus@gmail.com"}],"dist":{"shasum":"946d0b19a2b2fe9c75f8c5285aeaa5ebb37111e4","tarball":"https://registry.npmjs.org/@databit/filters/-/filters-0.0.1.tgz","fileCount":7,"integrity":"sha512-Em5bRjl8r/VUFIuuI4iFsFGoOW0vw5gD7L7964+Z1q2hDCMFj3ROvtaex9MAuvupPsh/G6qMcBpjsZf3qxsc6w==","signatures":[{"sig":"MEQCIHs52oAD6nZYhHuZG3URLEzQ9XRJY7vZtdlHT8LGgxWyAiB60wf5glOnNpfu90jKABnhiZSOKmmfXn3bfm5ZQxAbGg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":941021},"type":"module","_from":"file:databit-filters-0.0.1.tgz","types":"./index.d.ts","exports":{".":{"types":"./index.d.ts","import":"./index.js","default":"./index.js"},"./index.css":"./index.css"},"_npmUser":{"name":"databit","email":"databit.plus@gmail.com"},"_resolved":"/tmp/e0506ec7575c226a792b2a14d39283ad/databit-filters-0.0.1.tgz","_integrity":"sha512-Em5bRjl8r/VUFIuuI4iFsFGoOW0vw5gD7L7964+Z1q2hDCMFj3ROvtaex9MAuvupPsh/G6qMcBpjsZf3qxsc6w==","_npmVersion":"11.6.1","description":"A powerful, framework-agnostic input filter component with syntax highlighting, code completion, and type validation. Build complex filter expressions with an intuitive syntax.","directories":{},"_nodeVersion":"24.11.0","dependencies":{"solid-js":"^1.9.10"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/filters_0.0.1_1764430150469_0.7545056988482322","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@databit/filters","version":"0.0.2","license":"Databit Community License","_id":"@databit/filters@0.0.2","maintainers":[{"name":"databit","email":"databit.plus@gmail.com"}],"homepage":"https://github.com/databit-plus/databit-filters#readme","bugs":{"url":"https://github.com/databit-plus/databit-filters/issues"},"dist":{"shasum":"bdb7532f6f4d7e6a152b2a2d62a9d3b8efd1d5be","tarball":"https://registry.npmjs.org/@databit/filters/-/filters-0.0.2.tgz","fileCount":7,"integrity":"sha512-RxCEB/fkoRFTBP2n3affZYX1e8C9InaPrFg0PfdgI+SgmaLxbuZTIQhukPK7n8jJSZIG783x6N+8wTqarzP77A==","signatures":[{"sig":"MEUCIQCz05Q8DiLb2gddW5D9NbTByNEWifWA5dHkbPJ+1G2JJQIgYZd9HDzAZwF9cLEYq5UpkqYfj8TUuQl99x3F/kBO7p0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":941453},"type":"module","_from":"file:databit-filters-0.0.2.tgz","types":"./index.d.ts","exports":{".":{"types":"./index.d.ts","import":"./index.js","default":"./index.js"},"./index.css":"./index.css"},"_npmUser":{"name":"databit","email":"databit.plus@gmail.com"},"_resolved":"/tmp/4e2a1545524c3cdac0c241320e9770f2/databit-filters-0.0.2.tgz","_integrity":"sha512-RxCEB/fkoRFTBP2n3affZYX1e8C9InaPrFg0PfdgI+SgmaLxbuZTIQhukPK7n8jJSZIG783x6N+8wTqarzP77A==","repository":{"url":"git+https://github.com/databit-plus/databit-filters.git","type":"git"},"_npmVersion":"11.6.1","description":"A powerful, framework-agnostic input filter component with syntax highlighting, code completion, and type validation. Build complex filter expressions with an intuitive syntax.","directories":{},"_nodeVersion":"24.11.0","dependencies":{"solid-js":"^1.9.10"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/filters_0.0.2_1764433442996_0.41438177026496303","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@databit/filters","version":"0.0.3","type":"module","dependencies":{"solid-js":"^1.9.10"},"exports":{".":{"types":"./index.d.ts","import":"./index.js","default":"./index.js"},"./index.css":"./index.css"},"repository":{"type":"git","url":"git+https://github.com/databit-plus/databit-filters.git"},"license":"Databit Community License","types":"./index.d.ts","_id":"@databit/filters@0.0.3","description":"A powerful, framework-agnostic input filter component with syntax highlighting, code completion, and type validation. Build complex filter expressions with an intuitive syntax.","bugs":{"url":"https://github.com/databit-plus/databit-filters/issues"},"homepage":"https://github.com/databit-plus/databit-filters#readme","_integrity":"sha512-WEHWLiWHrhK93kNeYlUPa9XzSQaqla0T0EVVc731TwrdQTH7GH8e3cP78e4lVyMYKIFxdpY+VP77LJzUVpqbFw==","_resolved":"/tmp/0420234d8fc11730f8adee05510cb2dc/databit-filters-0.0.3.tgz","_from":"file:databit-filters-0.0.3.tgz","_nodeVersion":"24.11.0","_npmVersion":"11.6.1","dist":{"integrity":"sha512-WEHWLiWHrhK93kNeYlUPa9XzSQaqla0T0EVVc731TwrdQTH7GH8e3cP78e4lVyMYKIFxdpY+VP77LJzUVpqbFw==","shasum":"2ccb482bb73aa0c4e9bb0a1bc27858d41d69c143","tarball":"https://registry.npmjs.org/@databit/filters/-/filters-0.0.3.tgz","fileCount":6,"unpackedSize":61862,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDBGi1DJrHaXgKL5Fi8mzhdfWkgfQT4TTnzyn0rOqxWTAiAQJcws69NAm4Hlv8KCpLBWKN1KUpNRdKDXwHnfkEXuiw=="}]},"_npmUser":{"name":"databit","email":"databit.plus@gmail.com"},"directories":{},"maintainers":[{"name":"databit","email":"databit.plus@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/filters_0.0.3_1765647030662_0.7122787312655374"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-29T15:29:10.363Z","modified":"2025-12-13T17:30:30.979Z","0.0.1":"2025-11-29T15:29:10.696Z","0.0.2":"2025-11-29T16:24:03.247Z","0.0.3":"2025-12-13T17:30:30.797Z"},"bugs":{"url":"https://github.com/databit-plus/databit-filters/issues"},"license":"Databit Community License","homepage":"https://github.com/databit-plus/databit-filters#readme","repository":{"type":"git","url":"git+https://github.com/databit-plus/databit-filters.git"},"description":"A powerful, framework-agnostic input filter component with syntax highlighting, code completion, and type validation. Build complex filter expressions with an intuitive syntax.","maintainers":[{"name":"databit","email":"databit.plus@gmail.com"}],"readme":"# @databit/filters\n\nA powerful, framework-agnostic input filter component with syntax highlighting, code completion, and type validation. Build complex filter expressions with an intuitive syntax.\n\nnpm: [@databit/filters](https://www.npmjs.com/package/@databit/filters)\n\n![Databit Filters](https://github.com/databit-plus/databit-filters/raw/master/filters.gif)\n\nDon't worry, not real data :) Data generated by https://www.mockaroo.com/\n\n## Features\n\n- 🎨 **Syntax Highlighting** - Visual feedback for filter expressions\n- 💡 **Code Completion** - Smart suggestions for variables and their values\n- ✅ **Type Validation** - Real-time error detection for syntax and type mismatches\n- 🔧 **Highly Configurable** - Custom variables, types, completion functions and styling\n- 🚀 **Framework Support** - Available for React, Vue, Solid, Svelte, and Angular\n\n## Installation\n\n```bash\nnpm install @databit/filters\n```\n\nor\n\n```bash\npnpm install @databit/filters\n```\n\nAdd styles to either JS or CSS:\n\nIn CSS:\n\n```css\n@import \"@databit/filters/index.css\";\n```\n\nor if you want to import it through JS:\n\n```ts\nimport \"@databit/filters/index.css\";\n```\n\n## Framework-Specific Packages\n\nFor better integration with your favorite framework, use one of the framework-specific packages:\n\n- **React**: [@databit/filters-react](https://www.npmjs.com/package/@databit/filters-react)\n- **Vue**: [@databit/filters-vue](https://www.npmjs.com/package/@databit/filters-vue)\n- **Solid**: [@databit/filters-solid](https://www.npmjs.com/package/@databit/filters-solid)\n- **Svelte**: [@databit/filters-svelte](https://www.npmjs.com/package/@databit/filters-svelte)\n- **Angular**: [@databit/filters-angular](https://www.npmjs.com/package/@databit/filters-angular)\n\n## Syntax\n\nThe filter supports nested boolean expressions:\n\n```\n(gender = \"Male\" and age < 30) or (gender = \"Female\" and age < 20)\n```\n\n- Comparison: `=`, `!=`, `<`, `>`, `<=`, `>=`\n- Logical: `and`, `or`\n- Grouping: `(`, `)`\n\n\n## API Reference\n\n### FiltersProps\n\n| Property | Type | Required | Description |\n|----------|------|----------|-------------|\n| `value` | `string` | No | The current filter expression value |\n| `placeholder` | `string` | No | Placeholder text shown when input is empty |\n| `errorMessage` | `string` | No | Custom error message to display under the input |\n| `onValueChange` | `(params: FiltersOnValueChangeParams) => void` | No | Callback fired when the filter value changes. `value` in params is always present, `output` will be null when the filter is invalid |\n| `variableCompletionsFn` | `(search: string) => string[]` | No | Function to provide variable name suggestions based on search input |\n| `valueCompletionsFn` | `(search: string, variable: string) => string[]` | No | Function to provide value suggestions for a specific variable |\n| `variables` | `Record<string, ValueType>` | No | Object mapping variable names to their types (e.g., integer, float, string, boolean) |\n\n### FiltersOnValueChangeParams\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `value` | `string` | The raw filter expression string |\n| `output` | `FiltersOutput \\| null` | Parsed filter output object, or `null` if invalid |\n\n### ValueType\n\nThe `ValueType` object represents the data type of a variable. Supported types include:\n\n- Integer via `integer()`\n- Float via `float()`\n- String via `string()`\n- Boolean via `boolean()`\n\n## Usage\n\n### Basic Setup\n\n```javascript\nimport { createFilters } from \"@databit/filters\";\n\n// grab an Element from the DOM\n// <div id=\"root\"></div> exists somewhere\n// in HTML\nconst rootEl = document.querySelector(\"#root\");\n\n// run the filters input\nconst filters = createFilters(rootEl, {\n  placeholder: 'e.g. (x = \"hello\") and y < 9'\n});\n```\n\n### Configuring Variables\n\n```javascript\nimport {\n  createFilters,\n  integer,\n  string,\n} from \"@databit/filters\";\n\nconst filters = createFilters(rootEl, {\n  variables: {\n    \"x\": string(),\n    \"y\": integer(),\n  },\n});\n```\n\n### Handling Value Changes\n\n```javascript\nconst filters = createFilters(rootEl, {\n  onValueChange: ({ value, output}) => {\n    if (output) {\n      // output exists so filter is valid\n    }\n  },\n});\n```\n\n### Custom Completions\n\n```javascript\nconst variables = {\n  \"x\": string(),\n  \"y\": integer(),\n};\n\n// [\"x\", \"y\"]\nconst variableList = Object.keys(variables);\n\nconst filters = createFilters(rootEl, {\n  variables,\n  variableCompletionsFn: (search) => {\n    return variableList.filter((variable) => {\n      return variables.includes(search)\n    });\n  },\n  valueCompletionsFn: (search, variable) => {\n    // will always show those 3 values\n    // when autocompleting values\n    return ['one', 'two', 'joe']\n  },\n});\n```\n\n### Updating Props\n\n```javascript\nconst filters = createFilters(rootEl);\n\n// you can also update more than one prop with\n// filters.updateProps({ ...props });\nfilters.updateProp('value', 'y = 3');\n```\n\n### Cleanup\n\n```javascript\nconst filters = createFilters(rootEl, {\n  placeholder: 'e.g. (x = \"hello\") and y < 9'\n});\n\n// ... do something ...\n\nfilters.dispose();\n```\n\n## Styling\n\n### CSS Properties\n\n| Property | Description |\n|----------|-------------|\n|`--dbi-text-font-size`|Font size of textbox, must be in `px`|\n|`--dbi-text-line-height`|Line height of textbox, must be in `px`|\n|`--dbi-text-font-family`|Font family of textbox|\n|`--dbi-border`|Border of whole input e.g. `1px solid #ccc`|\n|`--dbi-border-radius`|Border radius of whole input|\n|`--dbi-margin`|Margin of whole input|\n|`--dbi-padding`|Padding of whole input|\n|`--dbi-text-caret-color`|Color of the caret inside of textbox|\n|`--dbi-background`|Background of the input|\n|`--dbi-text-selection-background-color`|Selection color of the textbox`\n|`--dbi-text-selection-color`|Selection color of the font of the textbox|\n|`--dbi-text-color`|Default color of the text in textbox|\n|`--dbi-text-placeholder-color`|Color of the placeholder|\n\n### CSS Classes\n\n| Class | Description |\n|----------|-------------|\n|`dbf-operator`|Operators e.g. `=`, `>`, etc.|\n|`dbf-logic-operator`|Logic operator `and` `or`|\n|`dbf-value`|Values e.g. `\"string\"` or `9`|\n|`dbf-paren`|Parentheses `(``)`|\n|`dbf-paren.dbf-level-[X]`| Nested parentheses, for example in `((x = 9))` the inner parentheses would be `dbf-paren.dbf-level-1`, currently there are levels `1` to `4`|\n|`dbf-error`|Error|\n|`dbf-error-message`|Error message on the bottom of input`\n|`dbi-completion-box `|The completion box|\n|`dbi-message-box`|The message box, for example the ones with hovered errors or variable type info|\n\n## Error Handling\n\nThe component automatically detects and displays errors:\n\n- **Syntax Errors** - Invalid filter expression syntax\n- **Type Errors** - Type mismatches (e.g., comparing strings to integers)\n\nErrors are displayed by hovering the underlined part of input.\n\n`onValueChange({ value, output })` output parameter is null when there is an error in the filter query, be it syntax error or other, like unknown variables.\n\n## License\n\nDatabit Community License\n\nCopyright (c) 2025 Databit\n\nYou may use this software freely for any purpose. You must not remove or hide the \"Databit Filter\" watermark link. This software is provided as-is with no guarantees or warranties of any kind.\n\n## Support\n\nFor issues and feature requests, please use the [GitHub issue tracker](https://github.com/databit-plus/databit-filters/issues).\n","readmeFilename":"README.md"}