{"id":15024834,"url":"https://github.com/dreambo8563/bpit-vue","last_synced_at":"2025-04-12T13:03:38.664Z","repository":{"id":97401373,"uuid":"150579820","full_name":"dreambo8563/bpit-vue","owner":"dreambo8563","description":"vue effects component package 🚀","archived":false,"fork":false,"pushed_at":"2024-10-23T01:03:08.000Z","size":2389,"stargazers_count":15,"open_issues_count":9,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-26T07:42:44.342Z","etag":null,"topics":["components","css3","vue2"],"latest_commit_sha":null,"homepage":"https://dreambo8563.github.io/bpit-vue/","language":"Vue","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/dreambo8563.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-09-27T12:00:22.000Z","updated_at":"2022-11-24T05:24:38.000Z","dependencies_parsed_at":"2023-03-13T16:14:23.091Z","dependency_job_id":null,"html_url":"https://github.com/dreambo8563/bpit-vue","commit_stats":{"total_commits":40,"total_committers":3,"mean_commits":"13.333333333333334","dds":0.09999999999999998,"last_synced_commit":"f5584e9519fa7bc14cc56248a72624ee3a383212"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreambo8563%2Fbpit-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreambo8563%2Fbpit-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreambo8563%2Fbpit-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreambo8563%2Fbpit-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dreambo8563","download_url":"https://codeload.github.com/dreambo8563/bpit-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248571888,"owners_count":21126522,"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":["components","css3","vue2"],"created_at":"2024-09-24T20:01:02.460Z","updated_at":"2025-04-12T13:03:38.638Z","avatar_url":"https://github.com/dreambo8563.png","language":"Vue","funding_links":[],"categories":["Components \u0026 Libraries","Frameworks","Frameworks [🔝](#readme)"],"sub_categories":["Frameworks","Component Collections"],"readme":"# bpit-vue\n\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/ac3d1624c93b435cbfe519aeb0511617)](https://app.codacy.com/app/dreambo8563/bpit-vue?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=dreambo8563/bpit-vue\u0026utm_campaign=Badge_Grade_Dashboard) [![Greenkeeper badge](https://badges.greenkeeper.io/dreambo8563/bpit-vue.svg)](https://greenkeeper.io/)\n[![Build Status](https://travis-ci.com/dreambo8563/bpit-vue.svg?branch=master)](https://travis-ci.com/dreambo8563/bpit-vue)\n[![Known Vulnerabilities](https://snyk.io/test/github/dreambo8563/bpit-vue/badge.svg?targetFile=package.json)](https://snyk.io/test/github/dreambo8563/bpit-vue?targetFile=package.json)\n\n![](https://raw.githubusercontent.com/dreambo8563/static-assets/master/bpit/100*100.png)\n\n## Intro\n\n### What is bpit/vue?\n\nbpit/vue is not a component UI kit, we didn't have the consistent theme for these components, it's just a collection of effects components.\n\nbpit/vue is a good place for beginners to learn How to create their UI Kits. Now, it's just a showcase of the effects I can gather from the Internet (codepen, github...) and transfered to vue `things`\n\n### What we focus?\n\nWe focus on the effects of these components other than functionailties. That's why it's not a ui kit.\n\nWe take more time on css part and hope to make it more general and easy to use, so we encapsulate them into vue component/directives.\n\n### Why we need it?\n\nThere are so many resources on the Internet, we can make use of them to save time and to be more efficient. bpit/vue collects them, encapsulates them, imporves them.\n\nInstall easy \u0026\u0026 Import on demand \u0026\u0026 Everything in one place\n\n## import on demand\n\n\u003e npm install babel-plugin-import --save-dev\n\nbabel.config.js\n\n```js\nplugins: [\n  [\n    \"import\",\n    {\n      libraryName: \"@bpit/vue\",\n      camel2DashComponentName: false,\n      customName: name =\u003e {\n        return `@bpit/vue/src/components/${name}`\n      }\n    }\n  ]\n]\n```\n\n#### import components\n\n```js\nimport { FlockBanner, FAB, FlockButton } from \"@bpit/vue\"\n\nconst FABItem = FAB.FABItem\nconst FABTrigger = FAB.FABTrigger\nconst FABContainer = FAB.FABContainer\n```\n\n### sample\n\n```html\n\u003cFlockBanner\u003eThis is a banner!\u003c/FlockBanner\u003e\n\u003cFlockButton\u003eSubmit\u003c/FlockButton\u003e\n\u003cFABContainer :expand=\"expand\"\u003e\n  \u003cFABItem @click=\"test\" href=\"#\" style=\"background-color:red\" tooltip=\"Google+\"\n    \u003eA\u003c/FABItem\n  \u003e\n  \u003cFABItem href=\"#\" tooltip=\"Google+\"\u003eB\u003c/FABItem\u003e\n  \u003cFABItem href=\"#\" tooltip=\"Google+\"\u003eC\u003c/FABItem\u003e\n  \u003cFABItem href=\"#\" tooltip=\"Google+\"\u003eD\u003c/FABItem\u003e\n  \u003cFABTrigger @click=\"test\" class=\"trigger\" tooltip=\"share\"\u003e\u003c/FABTrigger\u003e\n\u003c/FABContainer\u003e\n```\n\n## Project setup\n\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n\n```\nnpm run serve\n```\n\n### Compiles and minifies for production\n\n```\nnpm run build\n```\n\n### Run your tests\n\n```\nnpm run test\n```\n\n### Lints and fixes files\n\n```\nnpm run lint\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdreambo8563%2Fbpit-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdreambo8563%2Fbpit-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdreambo8563%2Fbpit-vue/lists"}