{"id":19255279,"url":"https://github.com/catsjuice/dockbar","last_synced_at":"2025-11-14T06:32:13.652Z","repository":{"id":181147683,"uuid":"665772239","full_name":"CatsJuice/dockbar","owner":"CatsJuice","description":"A macOS-like dock component made with WebComponents","archived":false,"fork":false,"pushed_at":"2023-08-04T02:18:34.000Z","size":1328,"stargazers_count":148,"open_issues_count":1,"forks_count":8,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-05T07:47:38.045Z","etag":null,"topics":["dock","macos-dock","macos-hack"],"latest_commit_sha":null,"homepage":"https://dock.oooo.so","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/CatsJuice.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-13T01:18:07.000Z","updated_at":"2024-10-12T02:27:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"b61000f4-0196-4019-bf0b-063b999ae420","html_url":"https://github.com/CatsJuice/dockbar","commit_stats":null,"previous_names":["catsjuice/dockbar"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CatsJuice%2Fdockbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CatsJuice%2Fdockbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CatsJuice%2Fdockbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CatsJuice%2Fdockbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CatsJuice","download_url":"https://codeload.github.com/CatsJuice/dockbar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240349410,"owners_count":19787496,"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":["dock","macos-dock","macos-hack"],"created_at":"2024-11-09T18:40:05.407Z","updated_at":"2025-11-14T06:32:13.589Z","avatar_url":"https://github.com/CatsJuice.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- Logo --\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg height=\"100\" src=\"https://dock.oooo.so/dockbar.svg\"\u003e\n\u003c/p\u003e\n\n\u003c!-- Bridge --\u003e\n\u003ch2 align=\"center\"\u003edockbar\u003c/h2\u003e\n\u003c!-- Description --\u003e\n\u003cp align=\"center\"\u003e\n  A macOS like dockbar component made with \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/Web_Components\"\u003eWeb Components\u003c/a\u003e\n  \u003cbr\u003e\n  that can be used in any framework.\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/l/dockbar\"/\u003e\n  \u003cimg src=\"https://img.shields.io/npm/dw/dockbar\"/\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/dockbar\"/\u003e\n\u003c/p\u003e\n\n\u003c!-- \u003cp align=\"center\"\u003e\n  \u003ca href=\"./docs/README.zh.md\"\u003e \n    \u003cimg src=\"https://img.shields.io/badge/language_%E4%B8%AD%E6%96%87-blue\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://cursor.oooo.so\"\u003e\n    \u003cimg src=\"./playground/public/screenshot.gif\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e --\u003e\n\n---\n\n## Install\n\n- **NPM**\n  \n  ```bash\n  npm install dockbar --save\n  ```\n\n- **CDN**\n\n  ESM([Example](./examples/esm/index.html))\n  \n  ```html\n  \u003chead\u003e\n    \u003cscript type=\"module\" src=\"https://unpkg.com/dockbar@latest/dockbar.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  ```\n\n  IIFE([Example](./examples/iife/index.html))\n\n  ```html\n  \u003chead\u003e\n    \u003cscript src=\"https://unpkg.com/dockbar@latest/dockbar.iife.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  ```\n\n  Go to [Codepen](https://codepen.io/catsjuice/pen/GRwQdza) for a quick try.\n\n## Usage\n\n### Basic usage\n\n```html\n\u003cbody\u003e\n  \u003cdock-wrapper\u003e\n    \u003cdock-item\u003e1\u003c/dock-item\u003e\n    \u003cdock-item\u003e2\u003c/dock-item\u003e\n    \u003cdock-item\u003e3\u003c/dock-item\u003e\n    \u003cdock-item\u003e4\u003c/dock-item\u003e\n  \u003c/dock-wrapper\u003e\n\u003c/body\u003e\n```\n\nIt is recommended to use a custom element inside `dock-item`, so that you can customize the content of `dock-item`.\n\n```html\n\u003cdock-wrapper\u003e\n  \u003cdock-item\u003e\n    \u003cdiv class=\"my-element\"\u003e\u003c/div\u003e\n  \u003c/dock-item\u003e\n\u003c/dock-wrapper\u003e\n```\n\nYou may need to look at docs if you are using a framework like Vue.js or React.\n- [Using Custom Elements in Vue](https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue)\n- [Custom HTML Elements in React](https://react.dev/reference/react-dom/components#custom-html-elements)\n\n### Custom Style\n\nApply `class` to `dock-wrapper` and `dock-item` and customize your own style.\n\nFor more, see [Configuration](#configuration).\n\n\n## Problems\n\nThere are some problems yet to be solved:\n\n- [ ] SSR compatibility\n  It does not work will in SSR framework like Nuxt.js. For now you have to render it inside `ClientOnly`, and import component asynchronously.\n- [ ] Style asynchronous loading causes a flash on init\n  If you are not using by `iife`, it may cause a flash on init, because the style is loaded asynchronously. For now you could resolve this by applying a style:\n  ```html\n  \u003chead\u003e\n    #dock {\n      visibility: hidden;\n    }\n    #dock:defined {\n      visibility: visible;\n    }\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdock-wrapper id=\"dock\"\u003e\n\n    \u003c/dock-wrapper\u003e\n  \u003c/body\u003e\n  ```\n\n## Configuration\n\n| Property    | Type                                   | Default      | Description                                                                              |\n| ----------- | -------------------------------------- | ------------ | ---------------------------------------------------------------------------------------- |\n| `size`      | `number`                               | `40`         | The size of `dock-item` in `px`, see [Sizes](#sizes)                                     |\n| `padding`   | `number`                               | `8`          | The padding of `dock-wrapper` in `px`, see [Sizes](#sizes)                               |\n| `gap`       | `number`                               | `8`          | The gap between `dock-item` in `px`, see [Sizes](#sizes)                                 |\n| `maxScale`  | `number`                               | `2`          | The max scale of `dock-item`, see [Sizes](#sizes)                                        |\n| `maxRange`  | `number`                               | `200`        | The max range of `dock-item` that will scale when mouseover in `px`, see [Sizes](#sizes) |\n| `disabled`  | `boolean`                              | `false`      | Disable the scale effect                                                                 |\n| `direction` | `horizontal` \\| `vertical`             | `horizontal` | The direction of `dock-item`s                                                            |\n| `position`  | `top` \\| `bottom` \\| `left` \\| `right` | `bottom`     | The position of `dock-wrapper`, will affect the scale origin                             |\n\n\n### Sizes\n\n![customize sizes](https://dock.oooo.so/prop-desc.svg)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatsjuice%2Fdockbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcatsjuice%2Fdockbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatsjuice%2Fdockbar/lists"}