{"id":19018712,"url":"https://github.com/svar-widgets/toolbar","last_synced_at":"2025-04-23T04:38:54.400Z","repository":{"id":257809931,"uuid":"867782773","full_name":"svar-widgets/toolbar","owner":"svar-widgets","description":"Svelte toolbar component. Lightweight, customizable, easy-to-use.","archived":false,"fork":false,"pushed_at":"2025-03-21T09:54:58.000Z","size":345,"stargazers_count":18,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-17T19:19:13.200Z","etag":null,"topics":["svelte","svelte-component","svelte-ui-components","sveltejs","toolbar","toolbar-button","ui-component"],"latest_commit_sha":null,"homepage":"","language":"Svelte","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/svar-widgets.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","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,"zenodo":null}},"created_at":"2024-10-04T17:56:44.000Z","updated_at":"2025-03-30T12:46:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"74acf9d0-d829-4574-9833-e0b165331ce6","html_url":"https://github.com/svar-widgets/toolbar","commit_stats":{"total_commits":5,"total_committers":2,"mean_commits":2.5,"dds":0.4,"last_synced_commit":"316b6e0ee7d173aa9cf7e3dd7ee1eccd61ea8735"},"previous_names":["svar-widgets/toolbar"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svar-widgets%2Ftoolbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svar-widgets%2Ftoolbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svar-widgets%2Ftoolbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svar-widgets%2Ftoolbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/svar-widgets","download_url":"https://codeload.github.com/svar-widgets/toolbar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249466352,"owners_count":21277189,"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":["svelte","svelte-component","svelte-ui-components","sveltejs","toolbar","toolbar-button","ui-component"],"created_at":"2024-11-08T20:09:59.863Z","updated_at":"2025-04-23T04:38:54.374Z","avatar_url":"https://github.com/svar-widgets.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\t\n# SVAR Svelte Toolbar\n\n[![npm](https://img.shields.io/npm/v/wx-svelte-toolbar.svg)](https://www.npmjs.com/package/wx-svelte-toolbar)\n[![License](https://img.shields.io/github/license/svar-widgets/toolbar)](https://github.com/svar-widgets/toolbar/blob/main/license.txt)\n[![npm downloads](https://img.shields.io/npm/dm/wx-svelte-toolbar.svg)](https://www.npmjs.com/package/wx-svelte-toolbar)\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[Documentation](https://docs.svar.dev/svelte/core/toolbar/) • [Demos](https://docs.svar.dev/svelte/core/samples-toolbar/#/base/willow)\n\n\u003c/div\u003e\n\nA Svelte UI component for building flexible button panels, from simple button sets to complex structures with numerous buttons and select boxes. It provides an easy way to organize and display multiple toolbar items, with support for multiline layouts and collapsible item groups that can be shown on demand.\n\n### How to Use\n\nTo use the widget, simply import the package and include the component in your Svelte file:\n\n```svelte\n\u003cscript\u003e\n\timport { Toolbar } from \"wx-svelte-toolbar\";\n\n\tfunction onClick(item) {\n\t\tmessage = \"Button '\" + item.id + \"' clicked\";\n\t}\n\n\tlet items = [\n\t\t{ id: \"label\", text: \"Toolbar with icon buttons\" },\n\t\t{\n\t\t\tid: \"search\",\n\t\t\tcomp: \"button\",\n\t\t\ticon: \"wxi-search\",\n\t\t\thandler: onClick,\n\t\t},\n\t];\n\u003c/script\u003e\n\n\u003cToolbar {items} /\u003e\n```\n\n### Svelte 4 and Svelte 5 versions\n\nThere are two versions of the library: the 1.x version, designed to work with Svelte 4, and the 2.x version, created for Svelte 5. Please note that the 2.x version is in beta and may contain some instabilities.\n\nTo use the SVAR Toolbar beta for Svelte 5, install it as follows:\n\n```\nnpm install wx-svelte-toolbar\n```\n\nTo use the SVAR Toolbar for Svelte 4:\n\n```\nnpm install wx-svelte-toolbar@1.3.0\n```\n\n### How to Modify\n\nTypically, you don't need to modify the code. However, if you wish to do so, follow these steps:\n\n1. Run `yarn` to install dependencies. Note that this project is a monorepo using `yarn` workspaces, so npm will not work\n2. Start the project in development mode with `yarn start`\n\n### Run Tests\n\nTo run the test:\n\n1. Start the test examples with:\n    ```sh\n    yarn start:tests\n    ```\n2. In a separate console, run the end-to-end tests with:\n    ```sh\n    yarn test:cypress\n    ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvar-widgets%2Ftoolbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsvar-widgets%2Ftoolbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvar-widgets%2Ftoolbar/lists"}