{"id":22160202,"url":"https://github.com/anuva312/web-components","last_synced_at":"2026-04-10T12:01:55.228Z","repository":{"id":263000299,"uuid":"854461595","full_name":"anuva312/Web-Components","owner":"anuva312","description":"Web Components I develop for learning!","archived":false,"fork":false,"pushed_at":"2024-12-01T13:34:04.000Z","size":29,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-29T20:27:25.521Z","etag":null,"topics":["css3","html5","javascript","web-components"],"latest_commit_sha":null,"homepage":"https://anuva312.github.io/Web-Components/","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/anuva312.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":"2024-09-09T08:05:44.000Z","updated_at":"2024-12-01T13:34:07.000Z","dependencies_parsed_at":"2024-12-01T04:50:36.895Z","dependency_job_id":null,"html_url":"https://github.com/anuva312/Web-Components","commit_stats":null,"previous_names":["anuva312/web-components"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anuva312%2FWeb-Components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anuva312%2FWeb-Components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anuva312%2FWeb-Components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anuva312%2FWeb-Components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anuva312","download_url":"https://codeload.github.com/anuva312/Web-Components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245294718,"owners_count":20591909,"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":["css3","html5","javascript","web-components"],"created_at":"2024-12-02T04:06:44.383Z","updated_at":"2025-12-30T23:27:42.822Z","avatar_url":"https://github.com/anuva312.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Components\n\nThe Web Components I made for learning!\n\nYou can find the components in action [here](https://anuva312.github.io/Web-Components/).\n\n## Components\n\n1. [Modal](#modal-component)\n2. [Drawer](#drawer-component)\n3. [Tree](#tree-component)\n\n## Modal Component\n\nContains a modal element with a header, content along with confirm and cancel buttons.\n\nOnce the modal is opened a backdrop (blurred background) will be added behind it. Clicking on it will close the modal.\n\n### HTML Tag\n\n`\u003cuc-modal\u003e`\n\n### Slots\n\n- modal-header\n\n  The heading/title of the modal.\n\n- Default slot\n  Anything else will go inside the default slot which is the content of the modal.\n\n### Attributes\n\n- opened\n\n  Its presence determines whether the modal is opened or closed.\n\n### Events Fired\n\n- confirm\n\n  Fired when user clicks on the confirm button. Will also close the modal.\n\n- cancel\n\n  Fired when user clicks on the cancel button. Will also close the modal. Clicking on the backdrop will also fire the cancel button and close the modal.\n\n### Methods Supported\n\n- open\n\n  Opens the modal.\n\n- close\n\n  Closes the modal.\n\n## Drawer Component\n\nA drawer with fixed positioning that can slide in from either top, right, bottom or left.\n\nOnce the drawer is opened a backdrop (blurred background) will be added behind it. Clicking on it will close the drawer.\n\n### HTML Tag\n\n`\u003cuc-drawer\u003e`\n\n### Slots\n\n- Default slot: Anything inside the opening and closing `\u003cuc-drawer\u003e` will go inside the default slot.\n\n### Attributes\n\n- opened\n\n  Its presence determines whether the drawer is opened or closed.\n\n- position\n\n  Determines from where the drawer will slide in from once it's opened. Possible values are:\n\n  - top\n  - right\n  - bottom\n  - left\n\n### Events Fired\n\nNone\n\n### Methods Supported\n\n- open\n\n  Opens the drawer.\n\n- close\n\n  Closes the drawer.\n\n## Tree Component\n\nA component that can display data provided to it in a hierarchical tree structure.\n\n### HTML Tag\n\n`\u003cuc-tree\u003e`\n\n### Slots\n\nNone\n\n### Attributes\n\n- selectable\n\n  Determines whether the individual node items are selectable either by clicking or using methods provided by the component.\n\n### Properties\n\n- data\n\n  The data used to populate the tree. Should be a list of objects of the form:\n\n  ```\n  [\n      {\n          name: \"Node 1\",\n          id: \"00001\",\n          children: [\n              ...\n          ],\n          disabled: true,\n      },\n      ...\n  ]\n  ```\n\n  - name : The name of the node. This will be the name displayed in the strucutre. Required attribute.\n  - id: Used to uniquely identify a node. Used for selection. Required attribute.\n  - children: A list of object of the same structure. Used to develop the hierarchical structure of the tree. Required attribute.\n  - disabled: Whether or not the particular node is clickable. Only applicable if `selectable` attribute is set. Is optional.\n\n### Events Fired\n\n- node-click\n\n  The event fired when user clicks on the node in the tree strcuture. Returns the `event` argument. The selected node object can be found in `event.details`.\n\n### Methods Supported\n\n- setSelected(nodeId)\n\n  Takes the _nodeId_ (the `id` property in the data) and sets it as the selected node. If `selectable` attribute is not set, results in a warning in the console saying _The nodes are not selectable_.\n\n- getSelected\n\n  Returns the currently selected node object. If `selectable` attribute is not set, results in a warning in the console saying _The nodes are not selectable_ and returns null.\n\n- clearSelected\n\n  Clears the current selection if any. If `selectable` attribute is not set, results in a warning in the console saying _The nodes are not selectable_.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanuva312%2Fweb-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanuva312%2Fweb-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanuva312%2Fweb-components/lists"}