{"id":19064824,"url":"https://github.com/cloudbit-interactive/cuppajs-elements","last_synced_at":"2025-02-22T02:44:26.214Z","repository":{"id":57152439,"uuid":"460099894","full_name":"cloudbit-interactive/cuppajs-elements","owner":"cloudbit-interactive","description":"Standard and light web components based on lit-html and free of dependencies.","archived":false,"fork":false,"pushed_at":"2022-02-17T01:43:17.000Z","size":25,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-03T02:48:06.718Z","etag":null,"topics":["accordion","angular","collapsible","component","cuppajs","element-collection","javascript","lit-html","reactive","reactjs","stencil","svelte","utility","vanilla","web","web-component"],"latest_commit_sha":null,"homepage":"https://cuppajs.cloudbit.co/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cloudbit-interactive.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":"2022-02-16T17:06:35.000Z","updated_at":"2023-07-24T22:13:09.000Z","dependencies_parsed_at":"2022-08-27T16:52:12.967Z","dependency_job_id":null,"html_url":"https://github.com/cloudbit-interactive/cuppajs-elements","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudbit-interactive%2Fcuppajs-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudbit-interactive%2Fcuppajs-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudbit-interactive%2Fcuppajs-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudbit-interactive%2Fcuppajs-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloudbit-interactive","download_url":"https://codeload.github.com/cloudbit-interactive/cuppajs-elements/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240118329,"owners_count":19750471,"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":["accordion","angular","collapsible","component","cuppajs","element-collection","javascript","lit-html","reactive","reactjs","stencil","svelte","utility","vanilla","web","web-component"],"created_at":"2024-11-09T00:47:28.981Z","updated_at":"2025-02-22T02:44:26.194Z","avatar_url":"https://github.com/cloudbit-interactive.png","language":null,"readme":"# Cuppa Elements\nStandard and light web components based on lit-html and free of dependencies.\n\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/cuppajs-elements)\n\n\n# Documentation\n\nDoc [http://cuppajs.cloudbit.co/](https://cuppajs.cloudbit.co/) \u003cbr /\u003e\nGit [https://github.com/cloudbit-interactive/cuppajs](https://github.com/cloudbit-interactive/cuppajs) \u003cbr /\u003e\nNpm [https://www.npmjs.com/package/cuppajs](https://www.npmjs.com/package/cuppajs) \u003cbr /\u003e\nWebComponents [https://www.webcomponents.org/element/cuppajs-elements](https://www.webcomponents.org/element/cuppajs-elements)\n\n# cuppa-alert (~9kB)\n\u003c!--\n```\n\u003ccustom-element-demo height=\"300\"\u003e\n  \u003ctemplate\u003e\n    \u003cstyle\u003e body, html{ font-family:arial; } \u003c/style\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/cuppajs/libs/components/cuppa.alert.min.js\" type=\"module\"\u003e\u003c/script\u003e\n    \u003ccuppa-alert \n        title=\"Message\" \n        message=\"What is your name?\" \n        input-text=\"\" \n        cancel-text=\"Cancel\" \n        onclose=\"console.log(this.value, this.inputText)\" \u003e\n    \u003c/cuppa-alert\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n\n# cuppa-switch (~6.3kB)\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/cuppajs/libs/components/cuppa.switch.min.js\" type=\"module\"\u003e\u003c/script\u003e\n    \u003ccuppa-switch name=\"switch\" onchange=\"console.log(this.checked, this.name)\"\u003e\u003c/cuppa-switch\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n\n# cuppa-tabs (~6.3kB)\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cstyle\u003e body, html{ font-family:arial; } \u003c/style\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/cuppajs/libs/components/cuppa.tabs.min.js\" type=\"module\"\u003e\u003c/script\u003e\n    \u003ccuppa-tabs selected=\"microsoft\" onchange=\"console.log(this.selected)\" \u003e\n      \u003ccuppa-tab value=\"apple\" \u003eApple\u003c/cuppa-tab\u003e\n      \u003ccuppa-tab value=\"microsoft\" \u003eMicrosoft\u003c/cuppa-tab\u003e\n      \u003ccuppa-tab value=\"google\" \u003eGoogle\u003c/cuppa-tab\u003e\n    \u003c/cuppa-tabs\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n# cuppa.collapsible (~40kB)\n\u003c!--\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cstyle\u003e body, html{ font-family:arial; } \u003c/style\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/cuppajs/libs/components/cuppa.collapsible.min.js\" type=\"module\"\u003e\u003c/script\u003e\n    \n    \u003ccuppa-collapsible \n      header=\"Collapsible Title 1\"\n      content=\"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\"\n      group=\"collapsible-group-1\"\n      name=\"collapsible-1\"\n    \u003e\u003c/cuppa-collapsible\u003e\n    \u003ccuppa-collapsible \n      group=\"collapsible-group-1\"\n      name=\"collapsible-2\"\n    \u003e\n      \u003ccuppa-collapsible-header\u003eCollapsible Title 2\u003c/cuppa-collapsible-header\u003e\n      \u003ccuppa-collapsible-content\u003e\n        \u003ch3 class=\"title-3\"\u003eMy Title Content\u003c/h3\u003e\n        \u003cp\u003eLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\u003c/p\u003e\n      \u003c/cuppa-collapsible-content\u003e\n    \u003c/cuppa-collapsible\u003e\n    \u003ccuppa-collapsible\n      group=\"collapsible-group-1\"\n      name=\"collapsible-3\"\n    \u003e\n      \u003ccuppa-collapsible-header\u003eCollapsible Title 3\u003c/cuppa-collapsible-header\u003e\n      \u003ccuppa-collapsible-content\u003e\n        \u003cimg width=\"100%\" height=\"auto\" src=\"https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313__340.jpg\" /\u003e\n      \u003c/cuppa-collapsible-content\u003e\n    \u003c/cuppa-collapsible\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n# cuppa.drawer (~42kB)\n\u003c!--\n```\n\u003ccustom-element-demo height=\"300\"\u003e\n  \u003ctemplate\u003e\n    \u003cstyle\u003e body, html{ font-family:arial; } \u003c/style\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/cuppajs/libs/components/cuppa.drawer.min.js\" type=\"module\"\u003e\u003c/script\u003e\n    \u003ccuppa-drawer id=\"drawer\" position=\"right\"\u003e\n      \u003ccuppa-drawer-content style=\"display:flex; height: 100%; flex-direction: column; padding:10px; background:#1A1D21; color:#FFF;\"\u003e\n        \u003ch1 style=\"margin:0\"\u003eMenu\u003c/h1\u003e\n        \u003cul\u003e\n          \u003cli\u003eItem 1\u003c/li\u003e\n          \u003cli\u003eItem 2\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/cuppa-drawer-content\u003e\n    \u003c/cuppa-drawer\u003e\n\n    \u003cbutton id=\"btnOpen\"\u003eOpen Drawer\u003c/button\u003e\n    \u003cscript\u003e\n    \tlet drawer = document.getElementById(\"drawer\");\n    \tdocument.getElementById(\"btnOpen\").onclick = ()=\u003edrawer.open();\n    \u003c/script\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudbit-interactive%2Fcuppajs-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloudbit-interactive%2Fcuppajs-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudbit-interactive%2Fcuppajs-elements/lists"}