{"_id":"vue3-color-gradient-picker","_rev":"2-be6233cca216726e9cb996407dfa29c2","name":"vue3-color-gradient-picker","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"vue3-color-gradient-picker","version":"1.0.0","main":"./dist/index.js.mjs","module":"./dist/index.js.mjs","browser":"./dist/index-umd.js.umd.js","style":"./dist/style.css","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore","format":"prettier --write src/"},"dependencies":{"vue":"^3.3.4"},"devDependencies":{"@rushstack/eslint-patch":"^1.3.2","@types/node":"^20.4.9","@vitejs/plugin-vue":"^4.2.3","@vitejs/plugin-vue-jsx":"^3.0.1","@vue/eslint-config-prettier":"^8.0.0","cb-vue-color-gradient-picker":"^1.0.0","eslint":"^8.45.0","eslint-plugin-vue":"^9.15.1","prettier":"^3.0.0","sass":"^1.65.1","vite":"^4.4.6"},"description":"<!--  * @Author: bamzc  * @Date: 2023-08-16 10:02:22  * @LastEditors: bamzc  * @LastEditTime: 2023-08-16 10:11:22  * @Description:  -->","_id":"vue3-color-gradient-picker@1.0.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-CWF1uR0Tds8F8NTs3TZ0V8hUgyalbqagGGuHPq8k/4/3zqvj/ubdeEA4TZRrOVHqicLO0Qg0DhsvxWv2QQ6TTw==","shasum":"c116b62a557023102f20d7a2e6ba1846f18d5a32","tarball":"https://registry.npmjs.org/vue3-color-gradient-picker/-/vue3-color-gradient-picker-1.0.0.tgz","fileCount":7,"unpackedSize":84822,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCo7lv5p7Gs+cxDgFqXnZeHYPArPOMY4tmp9YOyZubnPAIgawK6olixhmjaQLkhSggNtLG4gi+GH4XHrcJq/++ySGE="}]},"_npmUser":{"name":"bamzc","email":"bamzc@hotmail.com"},"directories":{},"maintainers":[{"name":"bamzc","email":"bamzc@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue3-color-gradient-picker_1.0.0_1692152227032_0.2907303701037145"},"_hasShrinkwrap":false},"1.0.1":{"name":"vue3-color-gradient-picker","version":"1.0.1","author":{"name":"bamzc"},"description":"Color and gradient picker for vue3.js","main":"./dist/index.js.mjs","module":"./dist/index.js.mjs","browser":"./dist/index-umd.js.umd.js","style":"./dist/style.css","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore","format":"prettier --write src/"},"keywords":["vue","vue.js","vue3","color-picker","picker","gradient"],"tags":["vue","vue.js","vue3","color-picker","gradient"],"dependencies":{"vue":"^3.3.4"},"devDependencies":{"@rushstack/eslint-patch":"^1.3.2","@types/node":"^20.4.9","@vitejs/plugin-vue":"^4.2.3","@vitejs/plugin-vue-jsx":"^3.0.1","@vue/eslint-config-prettier":"^8.0.0","cb-vue-color-gradient-picker":"^1.0.0","eslint":"^8.45.0","eslint-plugin-vue":"^9.15.1","prettier":"^3.0.0","sass":"^1.65.1","vite":"^4.4.6"},"license":"MIT","homepage":"https://github.com/Bamzc/vue3-color-gradient-picker.git#readme","repository":{"type":"git","url":"git+https://github.com/Bamzc/vue3-color-gradient-picker.git.git"},"bugs":{"url":"https://github.com/Bamzc/vue3-color-gradient-picker.git/issues"},"_id":"vue3-color-gradient-picker@1.0.1","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-EqS9zThMVABG99EmWpSFNqW+e7/GQrw/876lJRYbvpGehnf+qiR0sNIXj2SdHzlvGkkOg61Xq//qiIw6UUobCA==","shasum":"ef84344f557df8ff3774594ece1bddc95dd9dd41","tarball":"https://registry.npmjs.org/vue3-color-gradient-picker/-/vue3-color-gradient-picker-1.0.1.tgz","fileCount":7,"unpackedSize":85290,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHYVHB5CHF21wiFqD4ookHdCCWRfUIdW/fljDZcbk1gDAiEAqbEu2g/2YC8UUOtYyGnuys++IJBPQML+T0MoCHLWCFA="}]},"_npmUser":{"name":"bamzc","email":"bamzc@hotmail.com"},"directories":{},"maintainers":[{"name":"bamzc","email":"bamzc@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue3-color-gradient-picker_1.0.1_1692153636041_0.01214450940247258"},"_hasShrinkwrap":false},"1.0.2":{"name":"vue3-color-gradient-picker","version":"1.0.2","author":{"name":"bamzc"},"description":"Color and gradient picker for vue3.js","main":"./dist/index.js.mjs","module":"./dist/index.js.mjs","browser":"./dist/index-umd.js.umd.js","style":"./dist/style.css","scripts":{"dev":"vite","build":"vite build","preview":"vite preview","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore","format":"prettier --write src/"},"keywords":["vue","vue.js","vue3","color-picker","picker","gradient"],"tags":["vue","vue.js","vue3","color-picker","gradient"],"dependencies":{"vue":"^3.3.4"},"devDependencies":{"@rushstack/eslint-patch":"^1.3.2","@types/node":"^20.4.9","@vitejs/plugin-vue":"^4.2.3","@vitejs/plugin-vue-jsx":"^3.0.1","@vue/eslint-config-prettier":"^8.0.0","cb-vue-color-gradient-picker":"^1.0.0","eslint":"^8.45.0","eslint-plugin-vue":"^9.15.1","prettier":"^3.0.0","sass":"^1.65.1","vite":"^4.4.6"},"license":"MIT","homepage":"https://github.com/Bamzc/vue3-color-gradient-picker.git#readme","repository":{"type":"git","url":"git+https://github.com/Bamzc/vue3-color-gradient-picker.git.git"},"bugs":{"url":"https://github.com/Bamzc/vue3-color-gradient-picker.git/issues"},"gitHead":"6e731363f4df7f8f1578dd4ec57e3107fe389dba","_id":"vue3-color-gradient-picker@1.0.2","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-ef9TgGjYFh6P3qPsF0hXLo2lzQDCz8glHqP8cXJ1JBozqUvsqD48eGbAxXWH39LFgDCYNyqjk18gb9aDKOwMYQ==","shasum":"93bffbf89cf1105b9a67f16cb9797c08f2be27d6","tarball":"https://registry.npmjs.org/vue3-color-gradient-picker/-/vue3-color-gradient-picker-1.0.2.tgz","fileCount":7,"unpackedSize":86923,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVBoNovN3tfLr9A41qlJGzSrTgV4HWmP+j2C6pEnJoHAIhAJIBosS+Ow6Z5TyfosnzVm9li1g16vOkYrHt/q1mnHxa"}]},"_npmUser":{"name":"bamzc","email":"bamzc@hotmail.com"},"directories":{},"maintainers":[{"name":"bamzc","email":"bamzc@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue3-color-gradient-picker_1.0.2_1705906354683_0.6198174394903604"},"_hasShrinkwrap":false}},"time":{"created":"2023-08-16T02:17:07.031Z","1.0.0":"2023-08-16T02:17:07.199Z","modified":"2024-01-22T06:52:34.995Z","1.0.1":"2023-08-16T02:40:36.284Z","1.0.2":"2024-01-22T06:52:34.852Z"},"maintainers":[{"name":"bamzc","email":"bamzc@hotmail.com"}],"description":"Color and gradient picker for vue3.js","readme":"<!--\n * @Author: bamzc\n * @Date: 2023-08-16 10:02:22\n * @LastEditors: bamzc\n * @LastEditTime: 2024-01-22 14:50:39\n * @Description: \n-->\n# vue3-color-gradient-picker\n\nThis template should help get you started developing with Vue 3 in Vite.\n\n[![npm](https://badgen.net/npm/v/vue3-color-gradient-picker)](https://www.npmjs.com/package/vue3-color-gradient-picker)\n[![downloads](https://badgen.net/npm/dt/vue3-color-gradient-picker)](https://www.npmjs.com/package/vue3-color-gradient-picker)\n\nColor and gradient picker for vue3.js. [If you use vue2， plese use color-gradient-picker](https://github.com/arthay/vue-color-gradient-picker).vue3-color-gradient-picker is an upgraded version of `color-gradient-picker`\n\n本项目仅仅是将Vue2相关api修改成Vue3 [如果想彻底的使用Vue3，请使用Qiu-Jun大佬的项目哈~ ](https://github.com/Qiu-Jun/color-gradient-picker-vue3).vue3-color-gradient-picker is an upgraded version of `color-gradient-picker`\n\n![Alt text](image.png)\n\n#### Usage\n\n```bash\nyarn add vue3-color-gradient-picker\n# or npm install vue3-color-gradient-picker or pnpm install vue3-color-gradient-picker\n```\n\n\n## Project Setup\n\n```sh\nnpm install\n```\n\n### Compile and Hot-Reload for Development\n\n```sh\nnpm run dev\n```\n\n### Compile and Minify for Production\n\n```sh\nnpm run build\n```\n\n## Examples\n\nHere is a simple examples of vue3-color-gradient-picker being used in an app:\n\n### Color Picker\n```vue\n<template>\n  <div id=\"app\">\n    <ColorPicker\n      :color=\"color\"\n      :onStartChange=\"color => onChange(color, 'start')\"\n      :onChange=\"color => onChange(color, 'change')\"\n      :onEndChange=\"color => onChange(color, 'end')\"\n    />\n  </div>\n</template>\n\n<script>\nimport { ColorPicker } from 'vue3-color-gradient-picker';\n\nexport default {\n  name: 'App',\n\n  components: {\n    ColorPicker\n  },\n\n  data()  {\n    return {\n      color: {\n        red: 255,\n        green: 0,\n        blue: 0,\n        alpha: 1\n      }\n    }\n  },   \n\n  methods: {\n    onChange(attrs, name) {\n      this.color = { ...attrs };\n    }\n  }\n}\n</script>\n\n<style src=\"vue3-color-gradient-picker/dist/index.css\" lang=\"css\" />\n```\n\n### Gradient Color Picker\n```vue\n<template>\n  <div id=\"app\">\n    <ColorPicker\n      :gradient=\"gradient\"\n      :isGradient=\"true\"\n      :onStartChange=\"color => onChange(color, 'start')\"\n      :onChange=\"color => onChange(color, 'change')\"\n      :onEndChange=\"color => onChange(color, 'end')\"\n    />\n  </div>\n</template>\n\n<script>\nimport { ColorPicker } from 'vue3-color-gradient-picker';\n\nexport default {\n  name: 'App',\n\n  components: {\n    ColorPicker\n  },\n\n  data()  {\n    return {\n      gradient: {\n        type: 'linear',\n        degree: 0,\n        points: [\n          {\n            left: 0,\n            red: 0,\n            green: 0,\n            blue: 0,\n            alpha: 1\n          },\n          {\n            left: 100,\n            red: 255,\n            green: 0,\n            blue: 0,\n            alpha: 1\n          }\n        ]      \n      }\n    }\n  },   \n\n  methods: {\n    onChange(attrs, name) {\n      console.log(name);\n    }\n  }\n}\n</script>\n\n<style src=\"vue3-color-gradient-picker/dist/index.css\" lang=\"css\" />\n```\n\n### Lint with [ESLint](https://eslint.org/)\n\n```sh\nnpm run lint\n```\n","readmeFilename":"README.md","homepage":"https://github.com/Bamzc/vue3-color-gradient-picker.git#readme","keywords":["vue","vue.js","vue3","color-picker","picker","gradient"],"repository":{"type":"git","url":"git+https://github.com/Bamzc/vue3-color-gradient-picker.git.git"},"author":{"name":"bamzc"},"bugs":{"url":"https://github.com/Bamzc/vue3-color-gradient-picker.git/issues"},"license":"MIT"}