{"id":15154606,"url":"https://github.com/steditor/meteor-bootstrap-keyvaluetaginput","last_synced_at":"2025-09-30T03:30:46.960Z","repository":{"id":34360910,"uuid":"177836107","full_name":"Steditor/Meteor-Bootstrap-KeyValueTagInput","owner":"Steditor","description":"Get reactive data in key-value form or as list of tags for your Meteor application.","archived":true,"fork":false,"pushed_at":"2022-12-08T19:22:52.000Z","size":497,"stargazers_count":0,"open_issues_count":10,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-14T07:34:11.641Z","etag":null,"topics":["bootstrap4","form-input","key-value","meteor","tags"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Steditor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-26T17:19:57.000Z","updated_at":"2024-03-13T08:54:19.000Z","dependencies_parsed_at":"2023-01-15T06:33:47.107Z","dependency_job_id":null,"html_url":"https://github.com/Steditor/Meteor-Bootstrap-KeyValueTagInput","commit_stats":null,"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Steditor%2FMeteor-Bootstrap-KeyValueTagInput","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Steditor%2FMeteor-Bootstrap-KeyValueTagInput/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Steditor%2FMeteor-Bootstrap-KeyValueTagInput/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Steditor%2FMeteor-Bootstrap-KeyValueTagInput/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Steditor","download_url":"https://codeload.github.com/Steditor/Meteor-Bootstrap-KeyValueTagInput/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234695592,"owners_count":18873004,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap4","form-input","key-value","meteor","tags"],"created_at":"2024-09-26T17:42:01.973Z","updated_at":"2025-09-30T03:30:41.642Z","avatar_url":"https://github.com/Steditor.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Key Value Tag Input for Meteor and Bootstrap 4\n\nGet reactive data in key-value form or as list of tags for your [Meteor](https://www.meteor.com/) application.\nThe input supports different data types with built-in input validation, generation of according mongo selectors for usage in search fields and filters, and makes it possible to specify suggestions for tag inputs.\nThe input element is styled for [Bootstrap 4](https://getbootstrap.com/) and behaves like any other `form-control`.\n\n![example input](./docs/exampleInput.png)\n\nIn standard mode, the user first types a key identifier (e.g. \"published\" in the screenshot example) followed by hitting a delimiter key (space, tab, enter, colon) and then types the value.\nIn single input mode, there is only one possible key and the user just keeps on producing values (e.g. tags).\n\n## Usage\n\nInstall the package by running `meteor npm install --save meteor-bootstrap_key-value-tag-input`.\n\nBoth on client and server, import all your needed Classes and Types from the npm package `meteor-bootstrap_key-value-tag-input`.\nIn your client-side script, you also need to import the component files once:\n\n```javascript\nimport \"meteor-bootstrap_key-value-tag-input/dist/keyValueInput.html\";\nimport \"meteor-bootstrap_key-value-tag-input/dist/keyValueInput.css\";\nimport \"meteor-bootstrap_key-value-tag-input/dist/keyValueInput.js\";\n```\n\nFor your template, setup your types and the corresponding helpers and react to input changes in your event handling, e.g.:\n\n```javascript\nimport { BooleanKeyValueType, NumberKeyValueType } from \"meteor-bootstrap_key-value-tag-input\";\n\nconst filterTypes = [\n    new BooleanKeyValueType(\"published\", \"Published\", [ \"public\" ]),\n    new NumberKeyValueType(\"number\", \"Number\", [ \"value\", \"amount\" ]),\n];\n\nTemplate.myTemplate.helpers({\n    filterTypes() {\n        return filterTypes;\n    },\n});\n\nTemplate.myTemplate.events({\n    \"keyValueEntriesChanged .filterInput\"(event) {\n        // event.detail will contain all key value entries.\n    },\n    \"keyValueEntryAdded .filterInput\"(event) {\n        // event.detail will contain added key value entry.    \n    },\n    \"keyValueEntryRemoved .filterInput\"(event) {\n        // event.detail will contain removed key value entry.    \n    },\n    \"keyValueEntriesRemoved .filterInput\"(event) {\n        // event.detail will contain all removed key value entries.    \n    },\n});\n```\n\nIn your template, setup the component:\n\n```html\n{{\u003ekeyValueInput types=filterTypes class=\"filterInput\" }}\n```\n\n## Additional configuration\n\n### Fallback types\n\nIf the input should forward all string input not matching a key to a dedicated KeyValueType, you can give the index of that fallback type to the input, e.g.:\n\n```html\n{{\u003ekeyValueInput types=filterTypes fallbackType=2 class=\"filterInput\" }}\n```\n\n### Single key mode\n\nIn order to just collect values for a single key, pass `typeKind=\"single\"` to the input and pass a single KeyValueType to `type` (instead of an array to `types`).\n\n### Single value mode\n\nPass `valueKind=\"single\"` to the input to allow only a single entry.\n\n### Default entries\n\nPass an array of `KeyValueEntryConstructionData` objects to `entries` to pre-fill the input.\n\nPass an array of `KeyValueEntryConstructionData` objects to `defaultEntries` in order to set some fixed entries (e.g. non-changable filter entries).\n\n## Input Types\n\n### General\n\nAll input types are subclasses of [`KeyValueType`](./src/keyValueTypes/KeyValueType.ts) and created using the same constructor signature:\n\n```javascript\n    constructor(id: string, label: string, aliases: string[] = [])\n```\n\nEach input type corresponds to an id (usually a key of the mongo object you want to work with), has a display label and possibly additional names it goes by.\n\nWhenever the user changes the input, the form field fires a `keyValueEntriesChanged` event, which has an array of [`KeyValueEntry`](./src/keyValueTypes/KeyValueType.ts) as `detail` property.\nEach entry consists of a reference to its `KeyValueType` (`type`) and the input `value`.\n\nIn order to clear an input, you can invoke `clearEntries(...)` on the `HTMLElement` of the input.\n\nYou can easily create your own input types by creating new subclasses of `KeyValueType`.\n\n### Boolean\n\n[`BooleanKeyValueType`](./src/keyValueTypes/BooleanKeyValueType.ts)s allow to select between `true` and `false`.\nThey accept a variety of values to be interpreted as boolean values, including true/false, yes/no, 1/0 and some german translations.\nThe value is rendered as ✓ or ✗.\n\n### Date\n\n[`DateKeyValueType`](./src/keyValueTypes/DateKeyValueType.ts)s are based on [Moment.js](https://momentjs.com/) and therefore require that library as peer dependency.\n\nDate inputs by default accept inputs in the form of `YYYY-MM-DD`, `YY-MM-DD` or `MM-DD`.\nThe default output format is `YYYY-MM-DD`.\nBoth default settings can be configured by setting the `dateFormat` and the `dateParseFormats` respectively.\nAll date inputs come with a selected comparator (\u003c/\u003e/≤/≥/≠/=).\n\nCall the static method `mongoSelectorFor` with a value to get a mongo selector for the chosen comparator and date.\n\n### Numbers\n\n[`NumberKeyValueType`](./src/keyValueTypes/NumberKeyValueType.ts)s accept floating point values combined with a comparator.\nYou can configure the input delimiters by setting `delimiters`.\nThe value defaults to `{ decimal: \".\", groups: \",\" }`.\n\nFor rendering, you can set `numberFormatter` to a [NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat) of your choice.\n\nCall the static method `mongoSelectorFor` with a value and an optional number transformation function to get a mongo selector for the chosen comparator and number.\n\n[`NumberModifierKeyValueType`](./src/keyValueTypes/NumberKeyValueType.ts) works almost the same, except it does not ask for comparators, but for modifiers (=/*/÷/+/-) to be applied with `apply` on a number (possibly with some rounding).\n\n### Regex / Text\n\n[`RegexKeyValueType`](./src/keyValueTypes/RegexKeyValueType.ts)s support regular expressions, as minimongo supports it out of the box.\n\nCall the static method `mongoSelectorFor` with a value to get a mongo selector for the input text.\n\n### Sorting\n\n[`SortKeyValueType`](./src/keyValueTypes/SortKeyValueType.ts)s are basically boolean inputs but distinguish between ascending and descending sorting for the given key.\nYou can get the corresponding mongo specifier by calling `mongoSpecifierFor` with a value.\n\n### Tags\n\n[`TagKeyValueType`](./src/keyValueTypes/TagKeyValueType.ts)s allow the user to either choose from a predefined set of tags or also input their own text.\nSet `tags` to a string array of the predefined values and `allowOther` to a boolean specifying whether other strings are accepted or not.\nYou can also pass an array of tag objects that specify how they should be rendered.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteditor%2Fmeteor-bootstrap-keyvaluetaginput","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsteditor%2Fmeteor-bootstrap-keyvaluetaginput","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteditor%2Fmeteor-bootstrap-keyvaluetaginput/lists"}