{"id":13430559,"url":"https://github.com/panteng/vue-filters-kit","last_synced_at":"2025-07-25T11:36:26.691Z","repository":{"id":57395914,"uuid":"52950627","full_name":"panteng/vue-filters-kit","owner":"panteng","description":"A collection of useful custom filters for Vue.js(v2.x.x) apps.","archived":false,"fork":false,"pushed_at":"2018-10-14T13:33:58.000Z","size":154,"stargazers_count":122,"open_issues_count":0,"forks_count":21,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-07-06T16:08:44.393Z","etag":null,"topics":["filter","formatter","vuejs"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/panteng.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-02T09:28:26.000Z","updated_at":"2023-11-13T11:30:08.000Z","dependencies_parsed_at":"2022-09-09T17:00:33.496Z","dependency_job_id":null,"html_url":"https://github.com/panteng/vue-filters-kit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/panteng/vue-filters-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/panteng%2Fvue-filters-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/panteng%2Fvue-filters-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/panteng%2Fvue-filters-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/panteng%2Fvue-filters-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/panteng","download_url":"https://codeload.github.com/panteng/vue-filters-kit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/panteng%2Fvue-filters-kit/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266998778,"owners_count":24018955,"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","status":"online","status_checked_at":"2025-07-25T02:00:09.625Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["filter","formatter","vuejs"],"created_at":"2024-07-31T02:00:55.170Z","updated_at":"2025-07-25T11:36:26.662Z","avatar_url":"https://github.com/panteng.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"# Vue-Filters-Kit\n\nA collection of useful custom filters for Vue.js(v2.x.x) apps.\n\n## Demo\n\n[Click Here](https://panteng.github.io/vue-filters-kit/)\n\nThis demo uses Bootstrap.css for styling. But you should know that no stylesheets are needed for using these filters in your webapps.\n\n## Filters\n\nFor now, vue-filters-kit contains 4 custom filters.\n\n1. [Boolean Formatter](#boolean-formatter) - converts boolean values into human-readable texts, eg: true--\u003eYES, 0--\u003eDisabled.\n2. [Byte Formatter](#byte-formatter) - converts bytes to kilobytes or megabytes or gigabytes or terabytes, eg: 1000000--\u003e976.56K.\n3. [Percentage Formatter](#percentage-formatter) - converts numbers into percentage, eg: 0.1567--\u003e15.67%.\n4. [Timestamp Formatter](#timestamp-formatter) - converts timestamps into human-readable time, eg: 1456989887000--\u003eThursday, March 3rd, 2016\n\n## Getting Started\n\n1. Install via npm:\n\n        npm install vue-filters-kit --save\n\n2. Register these filters in your Vue.js app:\n\n        const App = new Vue({\n            el: '#app',\n            // register filters\n            filters: {\n                booleanFormat: require('vue-filters-kit/filters/booleanFormatter'),\n                percentageFormat: require('vue-filters-kit/filters/percentageFormatter'),\n                byteFormat: require('vue-filters-kit/filters/byteFormatter'),\n                timestampFormat: require('vue-filters-kit/filters/timestampFormatter')\n            }\n        });\n\n## Usage\n\n#### Boolean Formatter\n\n`{{ rawValue | booleanFormat([trueText], [falseText]) }}`\n\n`[trueText]` is the text that will show if rawValue equals to true.\n\n`[falseText]` is the text that will show if rawValue equals to false.\n\nFor example:\n\n    \u003cspan\u003e{{ isActive | booleanFormat('Yes', 'No') }}\u003c/span\u003e\n\nIf `isActive` equals to true, the rendered html will be:\n\n    \u003cspan\u003eYes\u003c/span\u003e\n\nElse if `isActive` equals to false, the result will will be:\n\n    \u003cspan\u003eNo\u003c/span\u003e\n\nBy default, `[trueText]` is 'Yes' and `[falseText]` is 'No'.\n\n#### Byte Formatter\n\n`{{ rawValue | byteFormat }}`\n\n`rawValue` is a number whose unit is byte.\n\nFor example:\n\n    \u003cspan\u003e{{ size | byteFormat }}\u003c/span\u003e\n\nIf `size` equals to 1000000, the rendered html will be:\n\n    \u003cspan\u003e976.56 K\u003c/span\u003e\n\n#### Percentage Formatter\n\n`{{ rawValue | percentageFormat([digit]) }}`\n\n`[digit]` is the number of digits to keep after decimal.\n\nFor example:\n\n    \u003cspan\u003e{{ ratio | percentageFormat(4) }}\u003c/span\u003e\n    \u003cspan\u003e{{ ratio | percentageFormat(2) }}\u003c/span\u003e\n\nIf `ratio` equals to 0.15666666, the rendered html will be:\n\n    \u003cspan\u003e15.6667%\u003c/span\u003e\n    \u003cspan\u003e15.67%\u003c/span\u003e\n\nBy default, `[digit]` is 2.\n\n#### Timestamp Formatter\n\nTimestamp Formatter depends on [Moment.js](http://momentjs.com/). Make sure you have installed Moment.js via NPM.\n\n`{{ rawValue | timestampFormat([format]) }}`\n\n`rawValue` is a timestamp in milliseconds.\n\n`[format]` is the format of the output time string.\n\nFor example:\n\n    \u003cspan\u003e{{ startTime | timestampFormat('YYYY/MM/DD') }}\u003c/span\u003e\n\nIf `startTime` equals to 1456989887000, the rendered html will be:\n\n    \u003cspan\u003e2016/03/03\u003c/span\u003e\n\nBy default, `[format]` is 'YYYY-MM-DD HH:mm:ss'. You can see more about `[format]` in [Moment.js Documentation](http://momentjs.com/docs/#/parsing/string-format/).\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpanteng%2Fvue-filters-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpanteng%2Fvue-filters-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpanteng%2Fvue-filters-kit/lists"}