{"id":13424061,"url":"https://github.com/xiaokaike/vue-color","last_synced_at":"2025-03-18T17:02:05.208Z","repository":{"id":41045191,"uuid":"56842017","full_name":"xiaokaike/vue-color","owner":"xiaokaike","description":":art: Vue Color Pickers for Sketch, Photoshop, Chrome \u0026 more   http://vue-color.surge.sh","archived":false,"fork":false,"pushed_at":"2025-03-11T06:47:29.000Z","size":6712,"stargazers_count":2540,"open_issues_count":43,"forks_count":354,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-03-11T16:02:00.707Z","etag":null,"topics":["color-pickers","photoshop","vue","vue-color"],"latest_commit_sha":null,"homepage":"https://xiaokaike.github.io/vue-color/","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/xiaokaike.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":"2016-04-22T09:02:18.000Z","updated_at":"2025-03-07T07:22:25.000Z","dependencies_parsed_at":"2024-12-31T06:07:35.858Z","dependency_job_id":"8dabd062-9e28-49bc-916e-32ce59ad1bec","html_url":"https://github.com/xiaokaike/vue-color","commit_stats":{"total_commits":324,"total_committers":38,"mean_commits":8.526315789473685,"dds":0.5401234567901234,"last_synced_commit":"b0d364ff63957ee5253e42d270663c537631337e"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaokaike%2Fvue-color","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaokaike%2Fvue-color/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaokaike%2Fvue-color/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaokaike%2Fvue-color/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xiaokaike","download_url":"https://codeload.github.com/xiaokaike/vue-color/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244124607,"owners_count":20401763,"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-pickers","photoshop","vue","vue-color"],"created_at":"2024-07-31T00:00:47.719Z","updated_at":"2025-03-18T17:02:05.173Z","avatar_url":"https://github.com/xiaokaike.png","language":"Vue","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Vue","UI组件","Components \u0026 Libraries","UI Components","Awesome Vue.js","Table of Contents","UI Components [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","形成","UI Components","Form","Color Libraries"],"readme":"# vue-color \n\n[![npm](https://img.shields.io/npm/v/vue-color.svg)](https://www.npmjs.com/package/vue-color)\n\nColor Pickers for Sketch, Photoshop, Chrome \u0026 more with Vue.js(vue2.0).  \n\n## [Live demo](http://xiaokaike.github.io/vue-color/)\n\n![intro](./intro.png)\n\n## Installation\n\n### NPM\n```bash\n$ npm install vue-color\n```\n\n### CommonJS\n```js\nvar Photoshop = require('vue-color/src/Photoshop.vue');\n\nnew Vue({\n  components: {\n    'Photoshop': Photoshop\n  }\n})\n```\n\n### ES6\n```js\nimport { Photoshop } from 'vue-color'\n\nnew Vue({\n  components: {\n    'photoshop-picker': Photoshop\n  }\n})\n```\n\n### Browser globals\nThe `dist` folder contains `vue-color.js` and `vue-color.min.js` with all components exported in the \u003ccode\u003ewindow.VueColor\u003c/code\u003e object. These bundles are also available on NPM packages.\n\n```html\n\u003cscript src=\"path/to/vue.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/vue-color.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  var Photoshop = VueColor.Photoshop\n\u003c/script\u003e\n```\n\n## Local setup\n\n```\nnpm install\nnpm run dev\n```\n\n## Usage\n\n```js\n\nvar colors = {\n  hex: '#194d33',\n  hex8: '#194D33A8',\n  hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },\n  hsv: { h: 150, s: 0.66, v: 0.30, a: 1 },\n  rgba: { r: 25, g: 77, b: 51, a: 1 },\n  a: 1\n}\n// or\nvar colors = '#194d33'\n// or\nvar colors = '#194D33A8'\n// or \nvar colors = { h: 150, s: 0.66, v: 0.30 }\n// or \nvar colors = { r: 255, g: 0, b: 0 }\n// etc...\n\nnew Vue({\n  el: '#app',\n  components: {\n    'material-picker': material,\n    'compact-picker': compact,\n    'swatches-picker': swatches,\n    'slider-picker': slider,\n    'sketch-picker': sketch,\n    'chrome-picker': chrome,\n    'photoshop-picker': photoshop\n  },\n  data () {\n    return {\n      colors\n    }\n  }\n})\n\n```\n\n`colors` accepts either a string of a hex color '#333' or a object of rgb or hsl values `{ r: 51, g: 51, b: 51 }` or `{ h: 0, s: 0, l: .10 }`, whatever [tinycolor2](https://www.npmjs.com/package/tinycolor2) accepts as an input.\n\n```html\n\u003c!-- suppose you have the data 'colors' in your component --\u003e\n\u003cmaterial-picker v-model=\"colors\" /\u003e\n\u003ccompact-picker v-model=\"colors\" /\u003e\n\u003cswatches-picker v-model=\"colors\" /\u003e\n\u003cslider-picker v-model=\"colors\" /\u003e\n\u003csketch-picker v-model=\"colors\" /\u003e\n\u003cchrome-picker v-model=\"colors\" /\u003e\n\u003cphotoshop-picker v-model=\"colors\" /\u003e\n```\n\nOR\n\n```html\n\u003cchrome-picker :value=\"colors\" @input=\"updateValue\"\u003e\u003c/chrome-picker\u003e\n```\n\nIn some cases you can give the component a predefined set of colors with the property `presetColors` (for `Sketch` only) or `palette` (for `Compact` and `Grayscale`), by simply passing it an array with the color values as strings in any css compatible format.\n\n```html\n\u003csketch-picker \n  @input=\"updateValue\"\n  :value=\"colors\"\n  :preset-colors=\"[ \n    '#f00', '#00ff00', '#00ff0055', 'rgb(201, 76, 76)', 'rgba(0,0,255,1)', 'hsl(89, 43%, 51%)', 'hsla(89, 43%, 51%, 0.6)'\n  ]\"\n\u003e\u003c/sketch-picker\u003e\n\n\u003ccompact-picker \n  @input=\"updateValue\"\n  :value=\"colors\"\n  :palette=\"[ \n    '#f00', '#00ff00', '#00ff0055', 'rgb(201, 76, 76)', 'rgba(0,0,255,1)', 'hsl(89, 43%, 51%)', 'hsla(89, 43%, 51%, 0.6)'\n  ]\"\n\u003e\u003c/compact-picker\u003e\n```\n\n## License\n\nvue-color is licensed under [The MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaokaike%2Fvue-color","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxiaokaike%2Fvue-color","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaokaike%2Fvue-color/lists"}