{"_id":"@brettvd/customized-vue-colorpicker","_rev":"5-308be98707e18175518f73bd09fe4c09","name":"@brettvd/customized-vue-colorpicker","dist-tags":{"latest":"1.0.6"},"versions":{"1.0.0":{"name":"@brettvd/customized-vue-colorpicker","version":"1.0.0","keywords":["vue","colorpicker","color"],"author":{"name":"brettvd"},"license":"MIT","_id":"@brettvd/customized-vue-colorpicker@1.0.0","maintainers":[{"name":"brettvd","email":"register.shmegister@gmail.com"}],"homepage":"https://github.com/brettvd/customized-vue-colorpicker#readme","bugs":{"url":"https://github.com/brettvd/customized-vue-colorpicker/issues"},"dist":{"shasum":"f026e7afaeebaee271d0eda8eeb7821e7d2bef9a","tarball":"https://registry.npmjs.org/@brettvd/customized-vue-colorpicker/-/customized-vue-colorpicker-1.0.0.tgz","fileCount":15,"integrity":"sha512-oXD+VIib3K6dBMSj57lPJDhlw+1+5ARq5WifSv+N/0H8dhhqgZdcxHlNIzcuJPCxDF7p7+lLjkCcyrBgO5Or4A==","signatures":[{"sig":"MEUCIQCtKKQLMQO3NaMU9fOP7OWxtKTh6pFU+W4SbRli8N2yHQIgK7oJ4ZvWRarsLu3pGILbVbNrJeUJdKSeIYCCVvK/j74=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":78283},"main":"src/index.js","gitHead":"39cc2353433e0fb1600aabe4d6b498cee2fb0c6f","scripts":{"gh":"node build/gh.js","hot":"webpack-dev-server --env.config local --env.local","pro":"rm -rf dist && webpack --env.config pro --env.pro"},"_npmUser":{"name":"brettvd","email":"register.shmegister@gmail.com"},"repository":{"url":"git+https://github.com/brettvd/customized-vue-colorpicker.git","type":"git"},"_npmVersion":"9.2.0","description":"Colorpicker of Vue Components","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"devDependencies":{"eslint":"^6.2.2","webpack":"^4.41.6","gh-pages":"^2.0.1","node-sass":"^4.11.0","css-loader":"^3.2.0","url-loader":"^2.1.0","vue-loader":"^15.5.1","file-loader":"^4.2.0","sass-loader":"^7.1.0","webpack-cli":"^3.2.1","autoprefixer":"^9.7.4","postcss-loader":"^3.0.0","eslint-plugin-vue":"^6.1.2","webpack-dev-server":"^3.1.14","html-webpack-plugin":"^3.2.0","vue-template-compiler":"^2.5.22","mini-css-extract-plugin":"^0.9.0","optimize-css-assets-webpack-plugin":"^5.0.3"},"_npmOperationalInternal":{"tmp":"tmp/customized-vue-colorpicker_1.0.0_1689209944159_0.4366236319888366","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@brettvd/customized-vue-colorpicker","version":"1.0.1","keywords":["vue","colorpicker","color"],"author":{"name":"brettvd"},"license":"MIT","_id":"@brettvd/customized-vue-colorpicker@1.0.1","maintainers":[{"name":"brettvd","email":"register.shmegister@gmail.com"}],"homepage":"https://github.com/brettvd/customized-vue-colorpicker#readme","bugs":{"url":"https://github.com/brettvd/customized-vue-colorpicker/issues"},"dist":{"shasum":"3aeb1e03336871756bb42f34f05a6aa7a37fe95a","tarball":"https://registry.npmjs.org/@brettvd/customized-vue-colorpicker/-/customized-vue-colorpicker-1.0.1.tgz","fileCount":15,"integrity":"sha512-3/TQVYbt7XRA3gw1ReE0bKsE8FfeiSBEtp8MiSMrXBqNmb148eMOtTgxDXkfLiNa5eUa+T67VLnl5BUqAtrXQQ==","signatures":[{"sig":"MEQCIASnnjIw9ttD6pKNjTjg9If7oQuLEaYZsW+FxocVmHp3AiBN8u3OMC3/DSLNJuBLsoldvBDAThbJibjWcKLFOIawgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":78629},"main":"src/index.js","gitHead":"58b3696ceaba962cf36972be22c0284618b90e2a","scripts":{"gh":"node build/gh.js","hot":"webpack-dev-server --env.config local --env.local","pro":"rm -rf dist && webpack --env.config pro --env.pro"},"_npmUser":{"name":"brettvd","email":"register.shmegister@gmail.com"},"repository":{"url":"git+https://github.com/brettvd/customized-vue-colorpicker.git","type":"git"},"_npmVersion":"9.2.0","description":"Colorpicker of Vue Components","directories":{},"_nodeVersion":"16.13.1","_hasShrinkwrap":false,"devDependencies":{"eslint":"^6.2.2","webpack":"^4.41.6","gh-pages":"^2.0.1","node-sass":"^4.11.0","css-loader":"^3.2.0","url-loader":"^2.1.0","vue-loader":"^15.5.1","file-loader":"^4.2.0","sass-loader":"^7.1.0","webpack-cli":"^3.2.1","autoprefixer":"^9.7.4","vue-popperjs":"^2.3.0","postcss-loader":"^3.0.0","eslint-plugin-vue":"^6.1.2","webpack-dev-server":"^3.1.14","html-webpack-plugin":"^3.2.0","vue-template-compiler":"^2.5.22","mini-css-extract-plugin":"^0.9.0","optimize-css-assets-webpack-plugin":"^5.0.3"},"_npmOperationalInternal":{"tmp":"tmp/customized-vue-colorpicker_1.0.1_1689214804165_0.473999753357464","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@brettvd/customized-vue-colorpicker","version":"1.0.2","keywords":["vue","colorpicker","color"],"author":{"name":"brettvd"},"license":"MIT","_id":"@brettvd/customized-vue-colorpicker@1.0.2","maintainers":[{"name":"brettvd","email":"register.shmegister@gmail.com"}],"homepage":"https://github.com/brettvd/customized-vue-colorpicker#readme","bugs":{"url":"https://github.com/brettvd/customized-vue-colorpicker/issues"},"dist":{"shasum":"dbbed89d16566148537113d2117504633ad5f2d1","tarball":"https://registry.npmjs.org/@brettvd/customized-vue-colorpicker/-/customized-vue-colorpicker-1.0.2.tgz","fileCount":15,"integrity":"sha512-5ypwFwkmyq0gUZcJb880OjZje8WKm43DkmVjBmw6vKYrEmNWGzIEqZZffCpeR6XDY/go6clpNDsGxUCgnKncwg==","signatures":[{"sig":"MEQCIA80rRNEbkAGy9QxGxFVMnndMBvKG/XZqKDQUNg+9aPCAiBKNVc4MxdtLHQSWywBO4tB/Sn0lEysARxggz8+7917iw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79416},"main":"src/index.js","gitHead":"09dd323e0ac7d32aa57b5e98f591776484881544","scripts":{"gh":"node build/gh.js","hot":"webpack-dev-server --env.config local --env.local","pro":"rm -rf dist && webpack --env.config pro --env.pro"},"_npmUser":{"name":"brettvd","email":"register.shmegister@gmail.com"},"repository":{"url":"git+https://github.com/brettvd/customized-vue-colorpicker.git","type":"git"},"_npmVersion":"9.2.0","description":"Colorpicker of Vue Components","directories":{},"_nodeVersion":"16.13.1","dependencies":{"vue-popperjs":"^2.3.0"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^6.2.2","webpack":"^4.41.6","gh-pages":"^2.0.1","node-sass":"^4.11.0","css-loader":"^3.2.0","url-loader":"^2.1.0","vue-loader":"^15.5.1","file-loader":"^4.2.0","sass-loader":"^7.1.0","webpack-cli":"^3.2.1","autoprefixer":"^9.7.4","postcss-loader":"^3.0.0","eslint-plugin-vue":"^6.1.2","webpack-dev-server":"^3.1.14","html-webpack-plugin":"^3.2.0","vue-template-compiler":"^2.5.22","mini-css-extract-plugin":"^0.9.0","optimize-css-assets-webpack-plugin":"^5.0.3"},"_npmOperationalInternal":{"tmp":"tmp/customized-vue-colorpicker_1.0.2_1689561048000_0.32595601022141873","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"@brettvd/customized-vue-colorpicker","version":"1.0.3","keywords":["vue","colorpicker","color"],"author":{"name":"brettvd"},"license":"MIT","_id":"@brettvd/customized-vue-colorpicker@1.0.3","maintainers":[{"name":"brettvd","email":"register.shmegister@gmail.com"}],"homepage":"https://github.com/brettvd/customized-vue-colorpicker#readme","bugs":{"url":"https://github.com/brettvd/customized-vue-colorpicker/issues"},"dist":{"shasum":"ecc0a38eee9a721e89737d83691ebbbb63fe45cb","tarball":"https://registry.npmjs.org/@brettvd/customized-vue-colorpicker/-/customized-vue-colorpicker-1.0.3.tgz","fileCount":15,"integrity":"sha512-MAWcCCtt0RffbXJNFZCoGB9dyCSqudEOBXKY5TE/UjClk/uJuL+Yq6+DQF+xtpzKavZFXla1Xls7Yqh/bz8T+w==","signatures":[{"sig":"MEUCICFY8j8W3hxbuHOYAEwMBY8zg2BDOoLreDgdLDEDD+xAAiEAgTx9EEDUAl1sW7io8JMpKtWhxtVlnxkMNIccVpTNt4c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79432},"main":"src/index.js","gitHead":"cdb689772c2ae40ffa0f753bec2e4e6b7332566b","scripts":{"gh":"node build/gh.js","hot":"webpack-dev-server --env.config local --env.local","pro":"rm -rf dist && webpack --env.config pro --env.pro"},"_npmUser":{"name":"brettvd","email":"register.shmegister@gmail.com"},"repository":{"url":"git+https://github.com/brettvd/customized-vue-colorpicker.git","type":"git"},"_npmVersion":"9.2.0","description":"Colorpicker of Vue Components","directories":{},"_nodeVersion":"16.13.1","dependencies":{"vue-popperjs":"^2.3.0"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^6.2.2","webpack":"^4.41.6","gh-pages":"^2.0.1","node-sass":"^4.11.0","css-loader":"^3.2.0","url-loader":"^2.1.0","vue-loader":"^15.5.1","file-loader":"^4.2.0","sass-loader":"^7.1.0","webpack-cli":"^3.2.1","autoprefixer":"^9.7.4","postcss-loader":"^3.0.0","eslint-plugin-vue":"^6.1.2","webpack-dev-server":"^3.1.14","html-webpack-plugin":"^3.2.0","vue-template-compiler":"^2.5.22","mini-css-extract-plugin":"^0.9.0","optimize-css-assets-webpack-plugin":"^5.0.3"},"_npmOperationalInternal":{"tmp":"tmp/customized-vue-colorpicker_1.0.3_1689996065044_0.8329732843257243","host":"s3://npm-registry-packages"}},"1.0.5":{"name":"@brettvd/customized-vue-colorpicker","version":"1.0.5","keywords":["vue","colorpicker","color"],"author":{"name":"brettvd"},"license":"MIT","_id":"@brettvd/customized-vue-colorpicker@1.0.5","maintainers":[{"name":"brettvd","email":"register.shmegister@gmail.com"}],"homepage":"https://github.com/brettvd/customized-vue-colorpicker#readme","bugs":{"url":"https://github.com/brettvd/customized-vue-colorpicker/issues"},"dist":{"shasum":"e30c90bf4c1f2b2a5c9580a62e2134a394209012","tarball":"https://registry.npmjs.org/@brettvd/customized-vue-colorpicker/-/customized-vue-colorpicker-1.0.5.tgz","fileCount":15,"integrity":"sha512-LjUCjJ57KylNsAAyRS0RCBAISGZRLFQjJi3pYe8rfruLzmDZkYhNWUApJNAQrdphdyWfaZ8rtA4V96CptRLmKw==","signatures":[{"sig":"MEQCIBTBEqed0zCDSPxGobsIsHOQyuZZy+IME4pPo7XxswQMAiBRegx3GwUtrSBJV4M19xFX5p18PP9GJFMBO7Q9RH6zbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79435},"main":"src/index.js","gitHead":"bae74f2293620ba1ec0eb72f7772d50b4cfb1eb4","scripts":{"gh":"node build/gh.js","hot":"webpack-dev-server --env.config local --env.local","pro":"rm -rf dist && webpack --env.config pro --env.pro"},"_npmUser":{"name":"brettvd","email":"register.shmegister@gmail.com"},"repository":{"url":"git+https://github.com/brettvd/customized-vue-colorpicker.git","type":"git"},"_npmVersion":"9.2.0","description":"Colorpicker of Vue Components","directories":{},"_nodeVersion":"16.13.1","dependencies":{"vue-popperjs":"^2.3.0"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^6.2.2","webpack":"^4.41.6","gh-pages":"^2.0.1","node-sass":"^4.11.0","css-loader":"^3.2.0","url-loader":"^2.1.0","vue-loader":"^15.5.1","file-loader":"^4.2.0","sass-loader":"^7.1.0","webpack-cli":"^3.2.1","autoprefixer":"^9.7.4","postcss-loader":"^3.0.0","eslint-plugin-vue":"^6.1.2","webpack-dev-server":"^3.1.14","html-webpack-plugin":"^3.2.0","vue-template-compiler":"^2.5.22","mini-css-extract-plugin":"^0.9.0","optimize-css-assets-webpack-plugin":"^5.0.3"},"_npmOperationalInternal":{"tmp":"tmp/customized-vue-colorpicker_1.0.5_1690667507267_0.11793523365987002","host":"s3://npm-registry-packages"}},"1.0.6":{"name":"@brettvd/customized-vue-colorpicker","version":"1.0.6","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/brettvd/customized-vue-colorpicker.git"},"author":{"name":"brettvd"},"license":"MIT","dependencies":{"vue-popperjs":"^2.3.0"},"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":"54ed7493c29769a7cc0445d73927fd15015408fd","bugs":{"url":"https://github.com/brettvd/customized-vue-colorpicker/issues"},"homepage":"https://github.com/brettvd/customized-vue-colorpicker#readme","_id":"@brettvd/customized-vue-colorpicker@1.0.6","_nodeVersion":"18.20.5","_npmVersion":"9.2.0","dist":{"integrity":"sha512-Emw8n2/0JdI4B8NLmhbt+50XS6nsLv6P53xPnQNqZR+UfaAOe6zUOM0F+30ukkbu6VhVK86DBJ/V00JeDroB8g==","shasum":"7ecd4267c2965aa83eb10b3d8df936bd6ca8e74f","tarball":"https://registry.npmjs.org/@brettvd/customized-vue-colorpicker/-/customized-vue-colorpicker-1.0.6.tgz","fileCount":15,"unpackedSize":79448,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTnwgFbwQX+wzvfA6PI/V7XkhRmZ8OXvWQmQ2KkiEGLwIgBybNN7hAA/uJSegPfUIrclnZAjobFRT/dLhvwJ+bwjY="}]},"_npmUser":{"name":"brettvd","email":"register.shmegister@gmail.com"},"directories":{},"maintainers":[{"name":"brettvd","email":"register.shmegister@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/customized-vue-colorpicker_1.0.6_1735852216746_0.904549403423671"},"_hasShrinkwrap":false}},"time":{"created":"2023-07-13T00:59:04.057Z","modified":"2025-01-02T21:10:17.148Z","1.0.0":"2023-07-13T00:59:04.349Z","1.0.1":"2023-07-13T02:20:04.401Z","1.0.2":"2023-07-17T02:30:48.196Z","1.0.3":"2023-07-22T03:21:05.246Z","1.0.5":"2023-07-29T21:51:47.451Z","1.0.6":"2025-01-02T21:10:16.994Z"},"bugs":{"url":"https://github.com/brettvd/customized-vue-colorpicker/issues"},"author":{"name":"brettvd"},"license":"MIT","homepage":"https://github.com/brettvd/customized-vue-colorpicker#readme","keywords":["vue","colorpicker","color"],"repository":{"type":"git","url":"git+https://github.com/brettvd/customized-vue-colorpicker.git"},"description":"Colorpicker of Vue Components","maintainers":[{"name":"brettvd","email":"register.shmegister@gmail.com"}],"readme":"# vue-colorpicker\r\n\r\nThis is a fork of the project created by @caohenghu with some enhancements for hiding certain features.\r\n\r\n## [LiveDemo](https://caohenghu.github.io/vue-colorpicker/)\r\n\r\n![preview-dark](https://raw.githubusercontent.com/caohenghu/vue-colorpicker/master/src/img/preview-dark.jpg)\r\n![preview-light](https://raw.githubusercontent.com/caohenghu/vue-colorpicker/master/src/img/preview-light.jpg)\r\n\r\n## Install\r\n\r\n```bash\r\n$ yarn add @caohenghu/vue-colorpicker\r\n```\r\n\r\n## Example\r\n\r\n```html\r\n<template>\r\n    <div :style=\"{background: color}\">\r\n        <color-picker\r\n            theme=\"light\"\r\n            :color=\"color\"\r\n            :sucker-hide=\"false\"\r\n            :sucker-canvas=\"suckerCanvas\"\r\n            :sucker-area=\"suckerArea\"\r\n            @changeColor=\"changeColor\"\r\n            @openSucker=\"openSucker\"\r\n        />\r\n    </div>\r\n</template>\r\n\r\n<script>\r\n    import colorPicker from '@caohenghu/vue-colorpicker'\r\n\r\n    export default {\r\n        components: {\r\n            colorPicker\r\n        },\r\n        data() {\r\n            return {\r\n                color: '#59c7f9',\r\n                suckerCanvas: null,\r\n                suckerArea: [],\r\n                isSucking: false\r\n            }\r\n        },\r\n        methods: {\r\n            changeColor(color) {\r\n                const { r, g, b, a } = color.rgba\r\n                this.color = `rgba(${r}, ${g}, ${b}, ${a})`\r\n            },\r\n            openSucker(isOpen) {\r\n                if (isOpen) {\r\n                    // ... canvas be created\r\n                    // this.suckerCanvas = canvas\r\n                    // this.suckerArea = [x1, y1, x2, y2]\r\n                } else {\r\n                    // this.suckerCanvas && this.suckerCanvas.remove\r\n                }\r\n            }\r\n        }\r\n    }\r\n</script>\r\n```\r\n\r\n## Options\r\n\r\n| Name               | Type              | Default                                                                                                                                                                                  | Description                             |\r\n| ------------------ | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |\r\n| theme              | String            | `dark`                                                                                                                                                                                   | `dark` or `light`                       |\r\n| color              | String            | `#000000`                                                                                                                                                                                | `rgba` or `hex`                         |\r\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', ...]`      |\r\n| colors-history-key | String            | `vue-colorpicker-history`                                                                                                                                                                |\r\n| sucker-hide        | Boolean           | `true`                                                                                                                                                                                   | `true` or `false`                       |\r\n| sucker-canvas      | HTMLCanvasElement | `null`                                                                                                                                                                                   | like `document.createElement('canvas')` |\r\n| sucker-area        | Array             | `[]`                                                                                                                                                                                     | like `[x1, y1, x2, y2]`                 |\r\n\r\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.\r\n\r\n## Events\r\n\r\n| Name        | Type     | Args   | Description                     |\r\n| ----------- | -------- | ------ | ------------------------------- |\r\n| changeColor | Function | color  | `{ rgba: {}, hsv: {}, hex: ''}` |\r\n| openSucker  | Function | isOpen | `true` or `false`               |\r\n\r\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.\r\n","readmeFilename":"README.md"}