{"id":15640161,"url":"https://github.com/zachleat/filter-container","last_synced_at":"2025-04-05T11:08:01.864Z","repository":{"id":57170196,"uuid":"331812435","full_name":"zachleat/filter-container","owner":"zachleat","description":"Filtering visible child elements based on form field values.","archived":false,"fork":false,"pushed_at":"2025-01-08T19:52:19.000Z","size":27,"stargazers_count":89,"open_issues_count":2,"forks_count":5,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-29T10:06:47.754Z","etag":null,"topics":["web-components"],"latest_commit_sha":null,"homepage":"https://zachleat.github.io/filter-container/demo.html","language":"HTML","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/zachleat.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-22T02:19:37.000Z","updated_at":"2025-02-06T02:47:33.000Z","dependencies_parsed_at":"2024-06-19T01:29:45.267Z","dependency_job_id":"3b6b6a8c-4892-44ac-b8cb-ec552763af60","html_url":"https://github.com/zachleat/filter-container","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachleat%2Ffilter-container","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachleat%2Ffilter-container/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachleat%2Ffilter-container/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachleat%2Ffilter-container/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zachleat","download_url":"https://codeload.github.com/zachleat/filter-container/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247325693,"owners_count":20920714,"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":["web-components"],"created_at":"2024-10-03T11:31:47.870Z","updated_at":"2025-04-05T11:08:01.828Z","avatar_url":"https://github.com/zachleat.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Filter Container\n\nA themeless zero-dependency web component to filter visible child elements based on form field values.\n\n* [Demo](https://zachleat.github.io/filter-container/demo.html)\n* [Demo on jamstack.org](https://jamstack.org/generators/) (Filter by Language, Template, or License)\n* [Demo on zachleat.com](https://www.zachleat.com/web/) (Filter by blog post category)\n\n## Installation\n\n```\nnpm install @zachleat/filter-container\n```\n\nPlease see the demo for sample code. Use:\n\n* `\u003cfilter-container\u003e`\n  * `\u003cselect data-filter-key=\"KEY_NAME\"\u003e` for the form element and `\u003coption value=\"CATEGORY_VALUE\"\u003e` for categories.\n  * (New in v3) `\u003cinput value=\"CATEGORY_VALUE\" data-filter-key=\"KEY_NAME\"\u003e` (try text, radio, checkbox, etc)\n* Add a `data-filter-KEY_NAME=\"CATEGORY_VALUE\"` attribute to _any_ child element of `\u003cfilter-container\u003e` to assign both a filter key and category to match on.\n\n### Optional Features\n\n* You can add the CSS for each `KEY_NAME` yourself if you’re server rendering (or not happy with the [browser support of `replaceSync`](https://caniuse.com/mdn-api_cssstylesheet_replacesync)). Prepopulate the server-rendered content on each individual item using this too if you’d like (maybe your page has a server-rendered filter applied).\n\n```css\n.filter-KEY_NAME--hide {\n  display: none;\n}\n```\n\n* This component will not filter on initialization unless you use `\u003cfilter-container oninit\u003e`. By default the form field needs to change for filtering to take place.\n* Add the `data-filter-results` attribute to any child element of the component if you’d like us to populate it with the number of results.\n  * Add a string to this attribute value to customize your Results labels (delimited by `/`). e.g. `data-filter-results=\"Country/Countries\"`\n  * Add `aria-live=\"polite\"` to this element and screen readers will announce when the text changes.\n* Use `\u003cfilter-container delimiter=\",\"\u003e` if your content elements may have more than one filter value assigned (in this example delimited by a comma).\n  * For example, Egypt is in both Africa and Asia: `\u003cli data-filter-continent=\"africa,asia\"\u003eEgypt\u003c/li\u003e`\n\n## Changelog\n\n### v4.0.0\n\n- `filter-KEY_NAME--hide` CSS is now added automatically via the component—works alongside manually added CSS for proper progressive enhancement.\n\n### v3.0.4\n\n- Add support for `filter-mode=\"all\"` on `\u003cfilter-container\u003e` to enable AND-ing filters for all multi-select form elements (checkboxes). Use `filter-mode-KEY_NAME=\"any\"` to override back to the default.\n\n### v3.0.3\n\n- Add support for AND-ing filters across multiple checkboxes. Previously only OR operations were supported.\n  - Use `filter-mode-KEY_NAME=\"all\"` on `\u003cfilter-container\u003e` to enable.\n\n### v3.0.0\n\n- Added support for radio and checkbox inputs for filtering.\n- Renamed attributes:\n  - `data-oninit` renamed to `oninit`\n  - `data-filter-delimiter` renamed to `delimiter` (only supported on `\u003cfilter-container\u003e`)\n  - `data-filter-skip-url` renamed to `leave-url-alone` (only supported on `\u003cfilter-container\u003e`)\n\n## Credits\n\n* [MIT](./LICENSE)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzachleat%2Ffilter-container","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzachleat%2Ffilter-container","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzachleat%2Ffilter-container/lists"}