{"_id":"@bipeishan/vue-colorpicker","_rev":"1-1ef55681c20e88d4cee4018e17b3558d","name":"@bipeishan/vue-colorpicker","dist-tags":{"latest":"1.2.5"},"versions":{"1.2.4":{"name":"@bipeishan/vue-colorpicker","version":"1.2.4","description":"Colorpicker of Vue Components","main":"src/index.js","scripts":{"hot":"webpack-dev-server --env.config local --env.local","pro":"rm -rf dist && webpack --env.config pro --env.pro","gh":"node build/gh.js"},"keywords":["vue","colorpicker","color"],"repository":{"type":"git","url":"git+https://github.com/bippeishan/vue-colorpicker.git"},"author":{"name":"bipeishan","email":"bipeishan666@163.com"},"license":"MIT","devDependencies":{"autoprefixer":"^9.7.4","css-loader":"^3.2.0","eslint":"^6.2.2","eslint-plugin-vue":"^6.1.2","file-loader":"^4.2.0","gh-pages":"^2.0.1","html-webpack-plugin":"^3.2.0","mini-css-extract-plugin":"^0.9.0","node-sass":"^4.11.0","optimize-css-assets-webpack-plugin":"^5.0.3","postcss-loader":"^3.0.0","sass-loader":"^7.1.0","url-loader":"^2.1.0","vue-loader":"^15.5.1","vue-template-compiler":"^2.5.22","webpack":"^4.41.6","webpack-cli":"^3.2.1","webpack-dev-server":"^3.1.14"},"gitHead":"2d951bb22ea406eaf3287d1751b51663b6b73f6e","bugs":{"url":"https://github.com/bippeishan/vue-colorpicker/issues"},"homepage":"https://github.com/bippeishan/vue-colorpicker#readme","_id":"@bipeishan/vue-colorpicker@1.2.4","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-WHRlPD/xtETMiX5XEPHqANcWz8Xl6ni2E6fjBlwept3Pt3b3m1FswZgyVaoxHxREaT5+y9J1K+4u9p87urBa1g==","shasum":"03247ef8287c36957cb9ddc112392e71019753e7","tarball":"https://registry.npmjs.org/@bipeishan/vue-colorpicker/-/vue-colorpicker-1.2.4.tgz","fileCount":15,"unpackedSize":78691,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH9QRIiqHH6rnfY5BCvjFxE4niAStxxiyjQr1Hrdy4gQAiEA9AlcrkDQ/knNZ2LgMfEopPkqegtgu0ieofwZE7Rv+F0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiVjpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7jQ//S4JX2OeBclmuxFy/KEg4hdczthjmc1oLfBZVxoXFyqRPsGih\r\nRZba5beknkxmrDXKsbk6O9eBrQsIn9LZzIX+U8S3MZ02f74KM+DHiTo/TA+f\r\nfRnP/nM9wAMc655VQOaI0/HYIxtrdyVVYfaYWRocS6OIXHwtrFR8W3o2OWTj\r\noDksOeMand7/MC+6P4CW8+iTTW0QlU/25T3rmWPwDamLdQUsuIg1rOx3zMPh\r\nd+gQFdbIDPgpKWmdTRwsZBl3FVMQ9+tAmvQqky2jsdFfFOuSxr2NC/OB0qfG\r\nOxk4j1GMeQKdd9o7QbNTZtB0FA097d5n5UgYDacHHKmsAyQGc3wGB0L7fryf\r\nTU3kwrUia21CuMgT1kFSAOYp+l6b2DiJxOGu4cRbQCkbj2qdLHcWUYLgLEfs\r\nmYDrjkzp4o9vV4mzLCvj7nuLaUrubwU0Lszwn7L5Td7yd3Fyb+uoI3dfEwo3\r\nSwPmYjuXkziS1JVAh0vh13rwKUjQub8MAnSHldFjfkRzD7aWzCoEBKdHu7mh\r\nKCFnw67IZ9A0sOK4KAKBB483roxTLGBzvmPovubhznvsG4vJekkJBYxEtrNr\r\nPFtk7prmUCLbHamfnMsjGn3pVGLBLtrdaXUY+igNjXlLuWlHfsAZNN55TiSh\r\nmNV+/o/9x3vARFDVOYPRF9z3Xe3VniIRZBk=\r\n=Jn79\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bipeishan","email":"bipeishan666@163.com"},"directories":{},"maintainers":[{"name":"bipeishan","email":"bipeishan666@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-colorpicker_1.2.4_1669945577222_0.004460189722363506"},"_hasShrinkwrap":false},"1.2.5":{"name":"@bipeishan/vue-colorpicker","version":"1.2.5","description":"Colorpicker of Vue Components","main":"src/index.js","scripts":{"hot":"webpack-dev-server --env.config local --env.local","pro":"rm -rf dist && webpack --env.config pro --env.pro","gh":"node build/gh.js"},"keywords":["vue","colorpicker","color"],"repository":{"type":"git","url":"git+https://github.com/bippeishan/vue-colorpicker.git"},"author":{"name":"bipeishan","email":"bipeishan666@163.com"},"license":"MIT","devDependencies":{"autoprefixer":"^9.7.4","css-loader":"^3.2.0","eslint":"^6.2.2","eslint-plugin-vue":"^6.1.2","file-loader":"^4.2.0","gh-pages":"^2.0.1","html-webpack-plugin":"^3.2.0","mini-css-extract-plugin":"^0.9.0","node-sass":"^4.11.0","optimize-css-assets-webpack-plugin":"^5.0.3","postcss-loader":"^3.0.0","less-loader":"^7.1.0","url-loader":"^2.1.0","vue-loader":"^15.5.1","vue-template-compiler":"^2.5.22","webpack":"^4.41.6","webpack-cli":"^3.2.1","webpack-dev-server":"^3.1.14"},"gitHead":"231338b9a042a9b616fa3e7a2516d5fa9360e126","bugs":{"url":"https://github.com/bippeishan/vue-colorpicker/issues"},"homepage":"https://github.com/bippeishan/vue-colorpicker#readme","_id":"@bipeishan/vue-colorpicker@1.2.5","_nodeVersion":"14.18.0","_npmVersion":"6.14.15","dist":{"integrity":"sha512-deWxzQluucRkzYOPUlVEgJJRvl9wTukVvD+V9JJj1R7YnVgPYBB6em7CWoMN+HQsdcY6lU/9y+S4AtrA9kfrnw==","shasum":"4fc7325f93001b28327cb760f73d76a7609faa59","tarball":"https://registry.npmjs.org/@bipeishan/vue-colorpicker/-/vue-colorpicker-1.2.5.tgz","fileCount":15,"unpackedSize":78691,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHwnY7Eh00oVQsYU2Zor9jK+BodU600S4bppbJut36lBAiBSZWtFhH0cYcgY0MX76MtTxWyY/LOHXR2lcCLCSm2B/Q=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjjUJqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhQBAAi4whTFExm+JOMGgvpr95RfEFgmzRUexJe4j9RJwEtW5nIPxc\r\nlGOBnexKZZ844j8y/DFQJuSjBuYx2E5bIMmSsr7dchvwPhcTPwwHxTC/GlpU\r\n9DpvKDsH4U5eNShfDIDWkhj5yLiypc7RpFwYq4YTtFqfnchJI/1KAeZ3TWuY\r\nfqEHKtr25JX7iBhayq/nlKaOY0td1K7VL/JassPUJtWwRCt3ohFb1RVey2zW\r\nKZZs8H/nm3UFKpx/0giMrhXb8P1i9HrClWdWWZRzhAgKNyElg4c57zgGKPs6\r\nnu+U3GD0CvP/VVD+gF7cusfNyTuKUKU7YqW/b/urN5o7rpKPaLavmEeMoeUx\r\n5A/Nxh6JfuD3C+MElL3cVq9u5GaYxfb64Axi/LGxNBlIT80JdXIkEiiU62BC\r\nTz/nkcCAcEn9UPJaLb9RS2DJbQXM4NTbI5Od78KWDCRwzSepqbjzHP5TcYdt\r\njYLib7TWmhMxyowYvPEg+77B278wrYdYAHuc+9gt//fhN7ZXDUUCYkOX/xBY\r\nqrjLgkCgrjcybLJz7kGSqmWR2se5OK5k6ZeVbnTJcsWEelAGwGpiBbwSJtQM\r\n4t++SheqerfV6BVsl/oShsWDtTbILeKzaq2VrK770ynbCla9ggSXrbp5wS2g\r\nrmqaZyd8Pc1PdEbPE8+4StLXrGfL7GIEnco=\r\n=/hyS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bipeishan","email":"bipeishan666@163.com"},"directories":{},"maintainers":[{"name":"bipeishan","email":"bipeishan666@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-colorpicker_1.2.5_1670201962354_0.4263264941850762"},"_hasShrinkwrap":false}},"time":{"created":"2022-12-02T01:46:17.155Z","1.2.4":"2022-12-02T01:46:17.421Z","modified":"2022-12-05T00:59:22.699Z","1.2.5":"2022-12-05T00:59:22.610Z"},"maintainers":[{"name":"bipeishan","email":"bipeishan666@163.com"}],"description":"Colorpicker of Vue Components","homepage":"https://github.com/bippeishan/vue-colorpicker#readme","keywords":["vue","colorpicker","color"],"repository":{"type":"git","url":"git+https://github.com/bippeishan/vue-colorpicker.git"},"author":{"name":"bipeishan","email":"bipeishan666@163.com"},"bugs":{"url":"https://github.com/bippeishan/vue-colorpicker/issues"},"license":"MIT","readme":"# vue-colorpicker\n\n## [LiveDemo](https://caohenghu.github.io/vue-colorpicker/)\n\n![preview-dark](https://raw.githubusercontent.com/caohenghu/vue-colorpicker/master/src/img/preview-dark.jpg)\n![preview-light](https://raw.githubusercontent.com/caohenghu/vue-colorpicker/master/src/img/preview-light.jpg)\n\n## Install\n\n```bash\n$ yarn add @caohenghu/vue-colorpicker\n```\n\n## Example\n\n```html\n<template>\n    <div :style=\"{background: color}\">\n        <color-picker\n            theme=\"light\"\n            :color=\"color\"\n            :sucker-hide=\"false\"\n            :sucker-canvas=\"suckerCanvas\"\n            :sucker-area=\"suckerArea\"\n            @changeColor=\"changeColor\"\n            @openSucker=\"openSucker\"\n        />\n    </div>\n</template>\n\n<script>\n    import colorPicker from '@caohenghu/vue-colorpicker'\n\n    export default {\n        components: {\n            colorPicker\n        },\n        data() {\n            return {\n                color: '#59c7f9',\n                suckerCanvas: null,\n                suckerArea: [],\n                isSucking: false\n            }\n        },\n        methods: {\n            changeColor(color) {\n                const { r, g, b, a } = color.rgba\n                this.color = `rgba(${r}, ${g}, ${b}, ${a})`\n            },\n            openSucker(isOpen) {\n                if (isOpen) {\n                    // ... canvas be created\n                    // this.suckerCanvas = canvas\n                    // this.suckerArea = [x1, y1, x2, y2]\n                } else {\n                    // this.suckerCanvas && this.suckerCanvas.remove\n                }\n            }\n        }\n    }\n</script>\n```\n\n## Options\n\n| Name               | Type              | Default                                                                                                                                                                                  | Description                             |\n| ------------------ | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |\n| theme              | String            | `dark`                                                                                                                                                                                   | `dark` or `light`                       |\n| color              | String            | `#000000`                                                                                                                                                                                | `rgba` or `hex`                         |\n| colors-default     | Array             | `['#000000', '#FFFFFF', '#FF1900', '#F47365', '#FFB243', '#FFE623', '#6EFF2A', '#1BC7B1', '#00BEFF', '#2E81FF', '#5D61FF', '#FF89CF', '#FC3CAD', '#BF3DCE', '#8E00A7', 'rgba(0,0,0,0)']` | like `['#ff00ff', '#0f0f0f', ...]`      |\n| colors-history-key | String            | `vue-colorpicker-history`                                                                                                                                                                |\n| sucker-hide        | Boolean           | `true`                                                                                                                                                                                   | `true` or `false`                       |\n| sucker-canvas      | HTMLCanvasElement | `null`                                                                                                                                                                                   | like `document.createElement('canvas')` |\n| sucker-area        | Array             | `[]`                                                                                                                                                                                     | like `[x1, y1, x2, y2]`                 |\n\n> `color` is one-way data flow, so you can't use `v-model`. why? because you'll listen `changeColor` event do more things, so i think it's not necessary here.\n\n## Events\n\n| Name        | Type     | Args   | Description                     |\n| ----------- | -------- | ------ | ------------------------------- |\n| changeColor | Function | color  | `{ rgba: {}, hsv: {}, hex: ''}` |\n| openSucker  | Function | isOpen | `true` or `false`               |\n\n> if you want use sucker, then `openSucker`, `sucker-hide`, `sucker-canvas`, `sucker-area` is necessary. when you click sucker button, you can click it again or press key of `esc` to exit.\n","readmeFilename":"README.md"}