{"id":20795548,"url":"https://github.com/zepdev/zeppelin-element-library-vue","last_synced_at":"2026-04-20T08:05:12.752Z","repository":{"id":38051414,"uuid":"229024009","full_name":"zepdev/zeppelin-element-library-vue","owner":"zepdev","description":"Vue Components for Zeppelin Element Library","archived":false,"fork":false,"pushed_at":"2023-09-15T14:34:38.000Z","size":54412,"stargazers_count":0,"open_issues_count":21,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-10-13T09:18:55.782Z","etag":null,"topics":["design-system"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/zepdev.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-19T09:48:48.000Z","updated_at":"2023-09-18T13:39:27.000Z","dependencies_parsed_at":"2024-11-18T00:47:26.088Z","dependency_job_id":null,"html_url":"https://github.com/zepdev/zeppelin-element-library-vue","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zepdev/zeppelin-element-library-vue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zepdev%2Fzeppelin-element-library-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zepdev%2Fzeppelin-element-library-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zepdev%2Fzeppelin-element-library-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zepdev%2Fzeppelin-element-library-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zepdev","download_url":"https://codeload.github.com/zepdev/zeppelin-element-library-vue/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zepdev%2Fzeppelin-element-library-vue/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32038456,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T00:18:06.643Z","status":"online","status_checked_at":"2026-04-20T02:00:06.527Z","response_time":94,"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":["design-system"],"created_at":"2024-11-17T16:22:22.242Z","updated_at":"2026-04-20T08:05:12.732Z","avatar_url":"https://github.com/zepdev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# zeppelin-element-library-vue\n\nVue Components for Zeppelin Element Library (Legacy)\n\n## ⚠️ This Design System is deprecated and no longer maintained. npm packges will stay available, but please make sure to opt out until 2025 ⚠️\n\n## Installation and Usage\n\n```bash\nnpm install --save @zlab-de/zel-vue\n\nyarn add @zlab-de/zel-vue\n\n```### Components\n\n1. Zelbutton\n2. Zelcheckbox\n3. ZelInput\n4. Zelnotification\n5. Zelnumberinput\n6. Zelpagination\n7. Zelradiobutton\n8. zelsearchinput\n9. zelselect\n10. zeltab\n11. zeltabs\n12. zeltable\n13. zelpagination\n\n````javascript\nimport Vue from 'vue';\nimport \"path/to/zeppelin-element-library.css\";\nimport {\n  ZelVueButton,\n  ZelVueCheckbox,\n  ZelVueInput,\n  ZelVueBulletList,\n  ZelVueAttributeList,\n  ZelVueNotifications,\n  ZelVueNumberInput,\n  ZelVueRadioButton,\n  ZelVueSearchInput,\n  ZelVueSelect,\n  ZelVueTable,\n  ZelVueTabs,\n  ZelVueTab,\n  ZelVueTag,\n  ZelVuePagination\n  }\"@zlab-de/zel-vue\";\n\n  Vue.use(ZelVueButton);\n  Vue.use(ZelVueCheckbox);\n  Vue.use(ZelVueInput);\n\nAlternatively you can\n``` html \u003ca href=https://github.com/zepdev/zeppelin-element-library-vue/archive/master.zip\" target=\"_blank\" rel=\"noopener\"\u003edownload\u003c/a\u003e ```  and reference the script and the stylesheet in your HTML:\n\n``` html\n\u003clink rel=\"stylesheet\" href=\"path/to/zeppelin-element-library.css\"\u003e\n\u003cscript src=\"path/to/dist/zel-vue.min.js\"\u003e\u003c/script\u003e\n````\n\n### Components and Props\n\nEach components are it's associated properties that can be added to it\n\n#### Button (ZelVueButton) Component\n\n| Prop Name |   Type   | Default | Description                                                                                       |\n| --------- | :------: | ------: | ------------------------------------------------------------------------------------------------- |\n| variant   |  String  | primary | Other options tertiary, secondary                                                                 |\n| @click    | Function |         | Callback function attached to the component when the button click event is triggered.             |\n| disabled  | Boolean  |   false |\n| fullWidth | Boolean  |   false | Set the button width to occupy the full width of it's parent container                            |\n| icon      |  String  |         | A string of icon name, see zeppelin element libary for more information about available icons set |\n| size      |  String  |         | Sets the size of component eg: small                                                              |\n\n#### Checkbox (ZelVueCheckbox) Component\n\n| Prop Name | Type    | Default | Description                                  |\n| --------- | :------ | :------ | :------------------------------------------- |\n| disabled  | Boolean | false   | disables and/or enables a checkbox component |\n| value     | Boolean | false   | checkstate                                   |\n| label     | String  |         | label for the checkbox                       |\n\n#### Input (ZelVueInput) Component\n\n| Prop Name    | Type    | Default    | Description                               |\n| ------------ | :------ | :--------- | :---------------------------------------- |\n| id           | String  |            | element ID                                |\n| placeholder  | String  |            | placeholder text                          |\n| disabled     | Boolean | false      | enable or disable component               |\n| label        | String  | label text | label for input component                 |\n| value        | String  |            | value of input component                  |\n| error        | Boolean |            | set the error state on component          |\n| errorMessage | String  | Required   | Message to display when there is an error |\n\n#### List (ZelVueBulletlist) Component\n\n| Prop Name  | Type  | Default | Description                                                                                                      |\n| ---------- | :---- | :------ | :--------------------------------------------------------------------------------------------------------------- |\n| dataSource | Array |         | An array of objects containing items to use as bullet list eg:` [{id:1,text: 'bullet1'},{id:1, text:'bullet2'}]` |\n\n#### List (ZelVueAttributeListItem) Component\n\n| Prop Name  | Type  | Default | Description                                                                                                                                      |\n| ---------- | :---- | :------ | :----------------------------------------------------------------------------------------------------------------------------------------------- |\n| dataSource | Array |         | An array of objects containing items to use as bullet list eg:` [{id:1,text: 'bullet1', label:'label1'},{id:1, text:'bullet2', label:'label2'}]` |\n\n#### Notification (ZelVueNotification) Component\n\n| Prop Name        | Type                | Default | Description                                                            |\n| ---------------- | :------------------ | :------ | :--------------------------------------------------------------------- |\n| variant          | String              | info    | Indicates the type of notification eg (info, warning, danger, success) |\n| message          | String **required** |         | Message to display on notifcation component                            |\n| autoHideDuration | Number              | 600     | duration to show the notification component                            |\n| onClose          | Function            |         | callback executed when close is clicked                                |\n\n#### NumberInput (ZelVueNumberInput) Component\n\n| Prop Name  | Type   | Default | Description                            |\n| ---------- | :----- | :------ | :------------------------------------- |\n| plustitle  | String |         | The text shown on the plust icon       |\n| minustitle | String |         | The text shown on the minus icon       |\n| max        | Number |         | Maximum number for the input component |\n| min        | Number |         | Minimum number for the input component |\n| step       | Number | 1       | Increment per step                     |\n| value      | Number | 0       | value of the input element             |\n\n#### RadioButton (ZelVueRadioButton) Component\n\n| Prop Name     | Type                | Default | Description                     |\n| ------------- | :------------------ | :------ | :------------------------------ |\n| name          | String              |         | name of radio component         |\n| classNameProp | String              |         | custom class name               |\n| label         | String              |         | label for the radio             |\n| id            | String              |         | element id of radio component   |\n| value         | String              |         | value of radio component        |\n| required      | Boolean             | false   | required attribute of component |\n| checked       | Boolean             | false   | check state of component        |\n| label         | String **required** |         | label of radio compoonent       |\n\n#### Search (ZelVueSearchInput) Component\n\n| Prop Name   | Type   | Default         | Description                    |\n| ----------- | :----- | :-------------- | :----------------------------- |\n| className   | String |                 | custom class name              |\n| label       | String |                 | label for the search           |\n| id          | String | searchbar       | element id of search component |\n| titlelabel  | String | zepicons-search | search input label             |\n| placeholder | String | search          | Placeholder for search         |\n| dataSource  | Array  |                 | Array or Array of Objects      |\n| value       | String |                 | value of search input          |\n\n#### Select (ZelVueSelect) Component\n\n| Prop Name   | Type                | Default    | Description               |\n| ----------- | :------------------ | :--------- | :------------------------ |\n| label       | String **required** |            | label for the select      |\n| placeholder | String **required** | Select One | Placeholder for select    |\n| dataSource  | Array **required**  | [ ]        | Array or Array of Objects |\n| value       | String              |            | value of select input     |\n\n#### Table (ZelVueTable) Component\n\n| Prop Name               | Type                | Default | Description                                       |\n| ----------------------- | :------------------ | :------ | :------------------------------------------------ |\n| className               | String              |         | class name for table                              |\n| titleHeaderClassName    | String              |         | class name for table title header                 |\n| subtitleHeaderClassName | String              |         | class name for sub-title header                   |\n| tableBodyClassName      | String              |         | class name for table body                         |\n| tableHeaderClassName    | String              |         | class name for table header                       |\n| title                   | String **required** |         | title for table                                   |\n| subtitle                | String              |         | sub-tile for table                                |\n| tableHeaderData         | Array               | []      | Array of object containing table header text/data |\n| tableBodyData           | Array               | []      | Array of object containing table body text/data   |\n| tableFooterData         | Array               | []      | Array of object containing table footer text/data |\n\n#### Tab (ZelVueTab) Component\n\n\u003csmall\u003eExpect ZelVueTabs\u003c/small\u003e\n\n| Prop Name | Type                | Default | Description              |\n| --------- | :------------------ | :------ | :----------------------- |\n| name      | String **required** |         | name of tab container    |\n| selected  | Boolean             | false   | select state of tab item |\n\n#### Tabs (ZelVueTabs) Component\n\n\u003csmall\u003eYou are required to nest a ZelVueTabs inside a ZelVueTab\u003c/small\u003e\n\n| Prop Name    | Type    | Default | Description                                        |\n| ------------ | :------ | :------ | :------------------------------------------------- |\n| className    | String  |         | class name for tab container                       |\n| tabsizeSmall | Boolean | true    | size of tab                                        |\n| id           | String  |         | element id                                         |\n| tabindex     | Number  |         | tabindex for each tab                              |\n| tabsItems    | Array   | []      | Array of object containing id and name of tab item |\n\n#### Tag (ZelVueTag) Component\n\n| Prop Name | Type                | Default        | Description        |\n| --------- | :------------------ | :------------- | :----------------- |\n| tagname   | String **required** |                | tag name           |\n| tagtitle  | String              | zepicons-close | title of tab close |\n\n#### Pagination (ZelVuePagination) Component\n\n| Prop Name      | Type                | Default | Description                                                                           |\n| -------------- | :------------------ | :------ | :------------------------------------------------------------------------------------ |\n| className      | String **required** |         | class name for pagination component                                                   |\n| visiblebuttons | Number **required** | 5       | number of visible button to show at a time                                            |\n| perpage        | Number **required** |         | number of items per page                                                              |\n| currentpage    | Number **required** |         | current page                                                                          |\n| items          | Array of Objects    | []      | Array of items to paginate                                                            |\n| onPagechanged  | function            |         | Callback function attached to the component when the page changed event is triggered. |\n\n## Questions\n\nIf you have any questions, ideas or you want to discuss with Zel-element-library-vue community, use [Issues](https://github.com/zepdev/zeppelin-element-library-vue/issues) to send any issue or note to us we will be happy to pick it up.\n\n\u003csmall\u003eMay work in other browsers but it's untested.\u003c/small\u003e\n\n## Credits and Thanks\n\n- \u003ca href=\"https://github.com/cabutler10\" target=\"_blank\"\u003eAlyssa\u003c/a\u003e for the support and contribution towards the project\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzepdev%2Fzeppelin-element-library-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzepdev%2Fzeppelin-element-library-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzepdev%2Fzeppelin-element-library-vue/lists"}