{"id":15295060,"url":"https://github.com/logue/vuetify-swatches","last_synced_at":"2025-04-13T15:56:45.594Z","repository":{"id":43187740,"uuid":"465930099","full_name":"logue/vuetify-swatches","owner":"logue","description":"Color Swatch component for Vuetify.","archived":false,"fork":false,"pushed_at":"2025-02-15T06:36:45.000Z","size":18064,"stargazers_count":5,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"next","last_synced_at":"2025-03-24T11:55:23.526Z","etag":null,"topics":["color-palette","color-picker","component","swatches","ui-components","vue","vue-components","vuejs","vuejs-components","vuejs2","vuetify-component"],"latest_commit_sha":null,"homepage":"https://logue.dev/vuetify-swatches/","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/logue.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-04T00:34:04.000Z","updated_at":"2025-02-15T06:36:49.000Z","dependencies_parsed_at":"2024-01-23T00:27:21.653Z","dependency_job_id":"24d1db7e-7557-455c-b606-3bba11f9af79","html_url":"https://github.com/logue/vuetify-swatches","commit_stats":{"total_commits":48,"total_committers":1,"mean_commits":48.0,"dds":0.0,"last_synced_commit":"31e71f533bb9b7567a2184302d422413e9037f38"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logue%2Fvuetify-swatches","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logue%2Fvuetify-swatches/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logue%2Fvuetify-swatches/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/logue%2Fvuetify-swatches/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/logue","download_url":"https://codeload.github.com/logue/vuetify-swatches/tar.gz/refs/heads/next","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248741146,"owners_count":21154251,"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":["color-palette","color-picker","component","swatches","ui-components","vue","vue-components","vuejs","vuejs-components","vuejs2","vuetify-component"],"created_at":"2024-09-30T17:08:26.920Z","updated_at":"2025-04-13T15:56:45.572Z","avatar_url":"https://github.com/logue.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vuetify Swatches\n\n[![jsdelivr CDN](https://data.jsdelivr.com/v1/package/npm/vuetify-swatches/badge)](https://www.jsdelivr.com/package/npm/vuetify-swatches)\n[![NPM Downloads](https://img.shields.io/npm/dm/vuetify-swatches.svg?style=flat)](https://www.npmjs.com/package/vuetify-swatches)\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/vuetify-swatches/file/README.md)\n[![npm version](https://img.shields.io/npm/v/vuetify-swatches.svg)](https://www.npmjs.com/package/vuetify-swatches)\n[![Open in Gitpod](https://shields.io/badge/Open%20in-Gitpod-green?logo=Gitpod)](https://gitpod.io/#https://github.com/logue/vuetify-swatches)\n[![Twitter Follow](https://img.shields.io/twitter/follow/logue256?style=plastic)](https://twitter.com/logue256)\n\n![demo](https://user-images.githubusercontent.com/480173/156681882-d3d5e868-ba9a-4a34-9e75-08272d39da64.gif)\n\n⚠ This is for Vuetify3. If you are using Vuetify2, please use 1.0.x.\n\nThis project is a remake of [saintplay's vue-swatches](https://saintplay.github.io/vue-swatches/) with [Vuetify](https://vuetifyjs.com/).\n\nUnlike the original version, it provides a UI based on Vuetify, such as ripple effects and dark mode.\n\nThis library is positioned as a complement to Vuetify and provides a minimal UI. Use the[Menu Component](https://vuetifyjs.com/components/menus/) if you want to display a pop-up menu, and the [Card component](https://vuetifyjs.com/components/cards/) if you want to display a palette.\n\n## Usage\n\nIn this example, the selected color is assigned to `selected`.\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref, type Ref } from 'vue';\n\nimport VSwatches from 'vuetify-swatches';\n\nconst selected: Ref\u003cstring\u003e = ref('#ffffff');\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cv-swatches v-model=\"selected\" /\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n@import 'vuetify-swatches/dist/style.css';\n\u003c/style\u003e\n```\n\nThe method of specifying `swatches` is the same as [nested-color of Vue Swatches](https://saintplay.github.io/vue-swatches/examples/#nested-colors).\n\nIf you want to make the color palette appear when you click it, combine it with VMenu.\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref, type Ref } from 'vue';\n\nimport VSwatches from 'vuetify-swatches';\n\nconst palette: Ref\u003cstring[] | string[][]\u003e = ref([\n  [\n    '#ffb7b7',\n    '#ffdbb7',\n    '#ffffb7',\n    '#b7ffb7',\n    '#b7ffff',\n    '#b7b7ff',\n    '#ffb7ff',\n    '#ffffff',\n  ],\n  [\n    '#ff5555',\n    '#ffa555',\n    '#ffff55',\n    '#55ff55',\n    '#55ffff',\n    '#5555ff',\n    '#ff55ff',\n    '#aaaaaa',\n  ],\n  [\n    '#ff0000',\n    '#ff7f00',\n    '#ffff00',\n    '#00ff00',\n    '#00ffff',\n    '#0000ff',\n    '#ff00ff',\n    '#555555',\n  ],\n  [\n    '#7f0000',\n    '#7f4c00',\n    '#7f7f00',\n    '#007f00',\n    '#007f7f',\n    '#00007f',\n    '#7f007f',\n    '#000000',\n  ],\n]);\nconst selected: Ref\u003cstring\u003e = ref('#ffffff');\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cv-menu offset-y\u003e\n    \u003ctemplate #activator=\"{ props }\"\u003e\n      \u003cv-btn v-bind=\"props\" class=\"mb-3\" min-width=\"auto\" :color=\"selected\"\u003e\n        \u003cv-icon\n          :color=\"selected\"\n          style=\"filter: invert(100%) grayscale(100%) contrast(100)\"\n        \u003e\n          mdi-menu-down\n        \u003c/v-icon\u003e\n      \u003c/v-btn\u003e\n    \u003c/template\u003e\n    \u003cv-swatches v-model=\"selected\" :swatches=\"palette\" /\u003e\n  \u003c/v-menu\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n@import 'vuetify-swatches/dist/style.css';\n\u003c/style\u003e\n```\n\n### Options\n\nMost props other than size and placement are the same as [v-btn](https://vuetifyjs.com/en/api/v-btn/).\n\n| Variables | Type           | Default                    | Info                                                                       |\n| --------- | -------------- | -------------------------- | -------------------------------------------------------------------------- |\n| size      | string         | 2rem                       | Swatch Button size                                                         |\n| icon      | string         | mdi-checkbox-marked-circle | checked icon                                                               |\n| icon-size | string         | 1rem                       | checked icon size                                                          |\n| disabled  | boolean        | false                      | Removes the ability to click or target the component.                      |\n| rounded   | number\\|string | undefined                  | Applies a large border radius on the button.                               |\n| variant   | string [^1]    | undefined                  | The variant prop gives you easy access to several different button styles. |\n| elevation | number\\|string | undefined                  |\n| border    | number\\|string | undefined                  |\n\n[^1] Available variants are: elevated(default), flat, tonal, outlined, text, and plain.\n\n### CDN Usage\n\n```html\n\u003c!-- Vue core --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vuetify@3.3.14/dist/vuetify.min.js\"\u003e\u003c/script\u003e\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/vuetify@3.3.14/dist/vuetify.min.js\"\n/\u003e\n\u003c!-- Markdown wasm --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vuetify-swatches@1.4.3/dist/index.iife.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const { createApp } = Vue;\n  const { createVuetify } = Vuetify;\n\n  const app = createApp();\n  app.use(vuetify).component(VSwatches).mount('#app');\n\u003c/script\u003e\n```\n\n## LICENSE\n\n©2022-2025 by Logue. Licensed under the [MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogue%2Fvuetify-swatches","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flogue%2Fvuetify-swatches","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flogue%2Fvuetify-swatches/lists"}