[
  {
    "path": ".eslintignore",
    "content": "dist/\nlibs/\nwebsite/\nnode_modules/"
  },
  {
    "path": ".eslintrc.cjs",
    "content": "module.exports = {\n  extends: [\n    '@antfu',\n  ],\n  rules: {\n    'semi': 'off',\n    '@typescript-eslint/semi': ['error', 'always'],\n    'no-console': 'off',\n    'vue/require-explicit-emits': 'off',\n    'unused-imports/no-unused-vars': 'off',\n  },\n};\n"
  },
  {
    "path": ".gitattributes",
    "content": "# Auto detect text files and perform LF normalization\n* text=auto\n"
  },
  {
    "path": ".github/workflows/npm-publish.yml",
    "content": "# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created\n# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages\n\nname: Node.js Package\n\non:\n  push:\n    tags:\n      - '*'\n\njobs:\n\n  publish-npm:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v2\n      - uses: actions/setup-node@v1\n        with:\n          node-version: 18\n          registry-url: https://registry.npmjs.org/\n      - run: npm install --force\n      - run: npm run build\n      - run: npm publish --access=public\n        env:\n          NODE_AUTH_TOKEN: ${{secrets.npm_token}}\n      - name: deploy\n        uses: peaceiris/actions-gh-pages@v3\n        with:\n          github_token: ${{ secrets.GITHUB_TOKEN }}\n          publish_dir: ./example\n"
  },
  {
    "path": ".gitignore",
    "content": "node_modules/\ndist/\nlibs/\nwebsite/\n\n"
  },
  {
    "path": ".husky/.gitignore",
    "content": "_\n"
  },
  {
    "path": ".husky/commit-msg",
    "content": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nnpx --no-install commitlint --edit \"$1\"\n"
  },
  {
    "path": ".husky/pre-commit",
    "content": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nnpx lint-staged\n"
  },
  {
    "path": "CHANGELOG.md",
    "content": "# Changelog\n\nAll notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.\n\n## [1.6.0](https://github.com/ckpack/vue-color/compare/v1.5.2...v1.6.0) (2024-07-19)\n\n\n### Features\n\n* exported ColorMixin ([dbbe373](https://github.com/ckpack/vue-color/commit/dbbe373cfcc901f5e9a72cae2f6758bcc16dad53))\n\n### [1.5.2](https://github.com/ckpack/vue-color/compare/v1.5.0...v1.5.2) (2024-07-18)\n\n### [1.5.1](https://github.com/ckpack/vue-color/compare/v1.5.0...v1.5.1) (2024-07-18)\n\n### Features\nAdded `MIT` license to the `package.json`\n\n## [1.5.0](https://github.com/ckpack/vue-color/compare/v1.4.1...v1.5.0) (2023-06-15)\n\n\n### Features\n\n* chrome compoent add a props named format (hex, rgb, etc) and an event update:format; fix [#28](https://github.com/ckpack/vue-color/issues/28) ([c9f3a5c](https://github.com/ckpack/vue-color/commit/c9f3a5cb1df733246f9b99c06088417c363a7d22))\n\n### [1.4.1](https://github.com/ckpack/vue-color/compare/v1.4.0...v1.4.1) (2023-02-16)\n\n\n### Bug Fixes\n\n* update package.json ([aec3072](https://github.com/ckpack/vue-color/commit/aec30723de33d9366f3c1d1cd6cc18a18eb44b0b))\n\n## [1.4.0](https://github.com/ckpack/vue-color/compare/v1.3.0...v1.4.0) (2023-02-16)\n\n\n### Features\n\n* add Type declarations ([213b3e2](https://github.com/ckpack/vue-color/commit/213b3e20451f4f177ec16ab3c7d0356a46cbcd61))\n\n## [1.3.0](https://github.com/ckpack/vue-color/compare/v1.2.4...v1.3.0) (2022-11-30)\n\n\n### Features\n\n* add keyboard navigation support for swatches and twitter ([a0ff7aa](https://github.com/ckpack/vue-color/commit/a0ff7aa7cc0afe450e01416250cd61d512093dd2))\n\n### [1.2.4](https://github.com/ckpack/vue-color/compare/v1.2.3...v1.2.4) (2022-10-17)\n\n\n### Bug Fixes\n\n* update github_token ([2c78f05](https://github.com/ckpack/vue-color/commit/2c78f055498aba5815625bf677f3b76a9fc37299))\n\n### [1.2.3](https://github.com/ckpack/vue-color/compare/v1.2.2...v1.2.3) (2022-10-17)\n\n\n### Bug Fixes\n\n* change yarn to npm ([2ef2928](https://github.com/ckpack/vue-color/commit/2ef292831439c407de8d2218a0df0c6f3c74dd23))\n\n### [1.2.2](https://github.com/ckpack/vue-color/compare/v1.2.1...v1.2.2) (2022-10-17)\n\n\n### Bug Fixes\n\n* upgrade node version ([2ecf716](https://github.com/ckpack/vue-color/commit/2ecf716ea1995c4af524bb7df7149464dfb20875))\n\n### [1.2.1](https://github.com/ckpack/vue-color/compare/v1.2.0...v1.2.1) (2022-10-17)\n\n## [1.2.0](https://github.com/ckpack/vue-color/compare/v1.1.9...v1.2.0) (2022-07-11)\n\n\n### Features\n\n* explicitly export the type as module ([5fbf273](https://github.com/ckpack/vue-color/commit/5fbf27390cb3cf7be5fedc6e8dcda3c9e9317636))\n\n### [1.1.9](https://github.com/ckpack/vue-color/compare/v1.1.8...v1.1.9) (2022-04-12)\n\n\n### Bug Fixes\n\n* sketch presetColors alpha not work ([93ec741](https://github.com/ckpack/vue-color/commit/93ec7413e6785e19b31e5c3760001cbd3e5be91c))\n\n### [1.1.8](https://github.com/ckpack/vue-color/compare/v1.1.7...v1.1.8) (2022-02-22)\n\n\n### Bug Fixes\n\n* tinycolor(...).isValid is not a function ([7831c54](https://github.com/ckpack/vue-color/commit/7831c54654a702b587f03007a6d4539287cdb91d))\n\n### [1.1.7](https://github.com/ckpack/vue-color/compare/v1.1.6...v1.1.7) (2022-02-16)\n\n\n### Bug Fixes\n\n* replace CommonJS package ([6f1292f](https://github.com/ckpack/vue-color/commit/6f1292f3fe95fee68aff30e3ea45e5799247b2a1))\n\n### [1.1.6](https://github.com/ckpack/vue-color/compare/v1.1.5...v1.1.6) (2022-02-14)\n\n\n### Bug Fixes\n\n* use replace tinycolor2 with @ctrl/tinycolor ([09bb612](https://github.com/ckpack/vue-color/commit/09bb612c50467fda655e8b6b36c16d7b120263d6))\n\n### [1.1.5](https://github.com/ckpack/vue-color/compare/v1.1.4...v1.1.5) (2021-12-08)\n\n\n### Bug Fixes\n\n* esm result exclude vue module ([d61b120](https://github.com/ckpack/vue-color/commit/d61b120542fbf531b22a73dbfe814b99bc4ad828))\n* **hue:** emit color on mouseup just like saturation does ([9d8c798](https://github.com/ckpack/vue-color/commit/9d8c798728dfd985dac3f5ef8331adadf5de929c))\n\n### [1.1.4](https://github.com/ckpack/vue-color/compare/v1.1.3...v1.1.4) (2021-10-21)\n\n\n### Bug Fixes\n\n* repair production mode component import error ([c6aa16f](https://github.com/ckpack/vue-color/commit/c6aa16f638a72beffdf493f531cd85da85ecdfa5))\n\n### [1.1.3](https://github.com/ckpack/vue-color/compare/v1.1.2...v1.1.3) (2021-10-15)\n\n### [1.1.2](https://github.com/ckpack/vue-color/compare/v1.1.1...v1.1.2) (2021-10-15)\n\n\n### Bug Fixes\n\n* update peerDependencies vue version ([22d57bf](https://github.com/ckpack/vue-color/commit/22d57bf7a5fc789a357dd7f2c43870a15db48d38))\n\n### [1.1.1](https://github.com/ckpack/vue-color/compare/v1.1.0...v1.1.1) (2021-10-14)\n\n\n### Bug Fixes\n\n* excluded dependencies module when build libs ([6b0d860](https://github.com/ckpack/vue-color/commit/6b0d860c2b2f6d07f31c195b4a93c1e7a58fc941))\n* update dev serve.js ([915233d](https://github.com/ckpack/vue-color/commit/915233dc2c6602aac00d7acbf4142dfb2b2f9112))\n\n## [1.1.0](https://github.com/ckpack/vue-color/compare/v1.0.1...v1.1.0) (2021-09-09)\n\n\n### Features\n\n* add standard-version gen changelog ([43cb18b](https://github.com/ckpack/vue-color/commit/43cb18b00b5a9f3d4a2921db6b5dcb98b47e81a8))\n* pre-commit add lint-staged ([d0e7ddb](https://github.com/ckpack/vue-color/commit/d0e7ddbe7dd0ed29ce13ba23af8c766df33798cb))\n* pre-commit add lint-staged ([2c63fff](https://github.com/ckpack/vue-color/commit/2c63fffcb15eefc278e3c6b2ab54622238664730))\n* pre-commit add lint-staged ([31602b5](https://github.com/ckpack/vue-color/commit/31602b5d06c561392115b3d6b43f91aca9449b34))\n\n# [1.0.0] - 2021-08-26\n\n## Feature\nNow we can import on Demand (Tree Shaking)\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2021 chenkai0520\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# vue-color \n\n> Modified based on [https://github.com/xiaokaike/vue-color](https://github.com/xiaokaike/vue-color) to support vue3.0\n\n🎨 Vue Color Pickers for Sketch, Photoshop, Chrome & more\n\n![image](https://user-images.githubusercontent.com/30174970/114983369-1e5aa380-9ec3-11eb-9e77-b122d19f1ebd.png)\n\n## [Demo](https://ckpack.github.io/vue-color)\n\n## Use case\n\n#### On demand\n\nWe can import components we actually need, making the project smaller than otherwise.\n\n##### Import Directly\n\n```html\n<template>\n  <Sketch v-model=\"colors\"/>\n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { Sketch } from '@ckpack/vue-color';\n\nconst colors = ref('#194D33A8'); // etc: { h: 150, s: 0.66, v: 0.30 }, { r: 255, g: 0, b: 0 }, '#194d33' \n</script>\n```\n\n##### Install on Demand Globally\n\n```js\nimport { createApp } from 'vue';\nimport App from '@/App.vue';\nimport { Sketch, create } from '@ckpack/vue-color';\n\nconst app = createApp(App);\napp.use(create({\n  components: [Sketch],\n}));\napp.mount('#app');\n```\n\n#### Fully import\n\n```js\nimport { createApp } from 'vue';\nimport App from '@/App.vue';\nimport VueColor from '@ckpack/vue-color';\n\nconst app = createApp(App);\n\napp.use(VueColor);\napp.mount('#app');\n```\n\n## [CHANGELOG](/CHANGELOG.md)\n\n## License\n\nvue-color is licensed under [The MIT License](LICENSE).\n"
  },
  {
    "path": "build/build.config.js",
    "content": "import path from 'path';\n\nimport resolve from '@rollup/plugin-node-resolve';\nimport alias from '@rollup/plugin-alias';\nimport vue from 'rollup-plugin-vue';\nimport terser from '@rollup/plugin-terser';\nimport postcss from 'rollup-plugin-postcss';\nimport commonjs from '@rollup/plugin-commonjs';\n\nimport prefixer from 'postcss-prefixer';\n\nimport { cssPrefix, name } from '../src/defaultConfig.js';\nimport packageJson from '../package.json' assert { type: 'json' };\n\nconst { dependencies } = packageJson;\nconst projectRoot = path.resolve(__dirname, '../src');\nconst globals = {\n  // Provide global variable names to replace your external imports, eg. jquery: '$'\n  vue: 'Vue',\n};\n\nconst postcssPlugin = (options = {}) => {\n  const minimize = options.minimize !== false;\n  const exclude = options.exclude || /node_modules/;\n  const include = options.include || /(?<!&module=.*)\\.css$/;\n  return postcss({\n    minimize,\n    plugins: [prefixer({\n      prefix: cssPrefix,\n    })],\n    exclude,\n    include,\n    extract: options.extract,\n  });\n};\n\nconst plugins = {\n  alias: alias({\n    entries: [\n      {\n        find: '@',\n        replacement: projectRoot,\n      },\n    ],\n  }),\n  resolve: resolve(),\n  terser: terser(),\n  vue: vue({\n    include: /\\.vue$/,\n    target: 'browser',\n    css: false,\n    exposeFilename: false,\n    preprocessStyles: false,\n    cssModulesOptions: {\n      generateScopedName: '[local]___[hash:base64:5]',\n    },\n  }),\n  postcss: postcssPlugin,\n  commonjs: commonjs(),\n};\n\nconst output = {\n  name,\n  globals,\n};\n\nconst external = {\n  vue: ['vue'],\n  dependencies: Object.keys(dependencies),\n};\n\nexport {\n  projectRoot,\n  plugins,\n  output,\n  external,\n};\n"
  },
  {
    "path": "build/build.dist.js",
    "content": "import {\n  external, output, plugins, projectRoot,\n} from './build.config.js';\n\nconst input = `${projectRoot}/index.js`;\n\nconst basePlugins = [\n  plugins.alias,\n  plugins.vue,\n  plugins.resolve,\n  plugins.commonjs,\n];\n\nexport default [\n  {\n    input,\n    output: {\n      format: 'esm',\n      file: 'dist/index.js',\n      globals: output.globals,\n    },\n    plugins: [\n      ...basePlugins,\n      plugins.postcss(),\n    ],\n    external: external.vue,\n  },\n  {\n    input,\n    output: {\n      format: 'iife',\n      file: 'dist/index.min.js',\n      exports: 'named',\n      name: output.name,\n      globals: output.globals,\n    },\n    plugins: [\n      ...basePlugins,\n      plugins.postcss(),\n      plugins.terser,\n    ],\n    external: external.vue,\n  },\n];\n"
  },
  {
    "path": "build/build.libs.js",
    "content": "import glob from 'glob';\nimport {\n  external, output, plugins, projectRoot,\n} from './build.config.js';\n\nconst input = glob.sync('src/**/*.js', {\n  nodir: true,\n});\n\nconst basePlugins = [\n  plugins.alias,\n  plugins.vue,\n  plugins.resolve,\n];\n\nexport default [\n  {\n    input,\n    output: {\n      format: 'esm',\n      dir: 'libs/',\n      entryFileNames: ({ facadeModuleId }) => facadeModuleId.replace(`${projectRoot}/`, ''),\n      globals: output.globals,\n    },\n    plugins: [\n      ...basePlugins,\n      plugins.postcss(),\n    ],\n    external: [...external.vue, ...external.dependencies],\n  },\n];\n"
  },
  {
    "path": "commitlint.config.cjs",
    "content": "module.exports = {\n  extends: ['@commitlint/config-conventional'],\n};\n"
  },
  {
    "path": "dev/serve.js",
    "content": "import { createApp } from 'vue';\n\nimport Dev from './serve.vue';\n\nconst app = createApp(Dev);\n\napp.mount('#app');\n"
  },
  {
    "path": "dev/serve.vue",
    "content": "<script setup>\nimport { ref } from 'vue';\nimport {\n  Chrome, Compact, Grayscale, Material, Photoshop, Sketch, Slider, Swatches, Twitter,\n} from '../src';\n\nconst format = ref('rgb');\nconst colors = ref({ hsl: { h: 150, s: 0.5098039215686275, l: 0.19999999999999998, a: 0.6588235294117647 }, hex: '#194D33', hex8: '#194D33A8', rgba: { r: 25, g: 77, b: 51, a: 0.6588235294117647 }, hsv: { h: 150, s: 0, v: 0, a: 0.6588235294117647 }, oldHue: 150, a: 0.6588235294117647 });\n\nconst c = (v) => {\n  console.log(v);\n};\n</script>\n\n<template>\n  <div id=\"app\" :style=\"{ 'background-color': typeof colors === 'object' ? colors.hex8 : colors }\">\n    <Chrome v-model=\"colors\" :format=\"format\" @update:format=\"c\" />\n    <Sketch v-model=\"colors\" />\n    <Compact v-model=\"colors\" />\n    <Grayscale v-model=\"colors\" />\n    <Material v-model=\"colors\" />\n    <Photoshop v-model=\"colors\" />\n    <Slider v-model=\"colors\" />\n    <Swatches v-model=\"colors\" />\n    <Twitter v-model=\"colors\" />\n  </div>\n</template>\n\n<style>\n#app > div {\n  margin: 30px 0;\n}\n</style>\n"
  },
  {
    "path": "example/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>vue-color</title>\n  <script src=\"https://unpkg.com/vue@latest/dist/vue.global.prod.js\"></script>\n  <script src=\"https://unpkg.com/@ckpack/vue-color@latest/dist/index.min.js\"></script>\n</head>\n<style>\n  html,body,#app{\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n  }\n  .color-wrapper > div {\n    margin: 24px 0;\n  }\n</style>\n<body>\n  <div id=\"app\">\n    <div class=\"color-wrapper\" :style=\"{'background-color': typeof colors === 'object' ? colors.hex8 : colors}\">\n      <Chrome v-model=\"colors\"></Chrome>\n      <Compact v-model=\"colors\"></Compact>\n      <Grayscale v-model=\"colors\"></Grayscale>\n      <Material v-model=\"colors\"></Material>\n      <Photoshop v-model=\"colors\"></Photoshop>\n      <Sketch v-model=\"colors\"></Sketch>\n      <Slider v-model=\"colors\"></Slider>\n      <Swatches v-model=\"colors\"></Swatches>\n      <Twitter v-model=\"colors\"></Twitter>\n    </div>\n  </div>\n</body>\n<script>\n  const app = Vue.createApp({\n    data() {\n      return {\n        colors: '#194D33A8',\n      };\n    },\n  });\n  app.use(VueColor);\n  app.mount('#app');\n</script>\n</html>"
  },
  {
    "path": "jsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"checkJs\": false,\n    \"paths\": {\n      \"@/*\": [\"src/*\"]\n    }\n  },\n  \"include\": [\"src/**/*\"],\n  \"exclude\": [\"node_modules\", \"dist\", \"libs\", \"website\"]\n}"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"@ckpack/vue-color\",\n  \"version\": \"1.6.0\",\n  \"description\": \"(vue3.0) 🎨 Vue Color Pickers for Sketch, Photoshop, Chrome & more\",\n  \"repository\": \"https://github.com/ckpack/vue-color\",\n  \"sideEffects\": false,\n  \"type\": \"module\",\n  \"types\": \"./types.d.ts\",\n  \"main\": \"dist/index.js\",\n  \"module\": \"libs/index.js\",\n  \"unpkg\": \"dist/index.min.js\",\n  \"author\": \"chenkai\",\n  \"license\": \"MIT\",\n  \"keywords\": [\n    \"vue-color\",\n    \"color\",\n    \"vuejs\"\n  ],\n  \"files\": [\n    \"dist/*\",\n    \"src/*\",\n    \"libs/*\",\n    \"types.d.ts\"\n  ],\n  \"scripts\": {\n    \"dev\": \"vue-cli-service serve dev/serve.js\",\n    \"build\": \"npm run build:libs && npm run build:dist\",\n    \"build:libs\": \"rm -rf ./libs && rollup --bundleConfigAsCjs --config ./build/build.libs.js\",\n    \"build:dist\": \"rm -rf ./dist && rollup --bundleConfigAsCjs --config ./build/build.dist.js\",\n    \"build:style\": \"\",\n    \"build:website\": \"vue-cli-service build --dest website dev/serve.js\",\n    \"lint\": \"eslint --fix --ext .js,.vue ./\",\n    \"gen\": \"node ./scripts/gen.js\",\n    \"gen:compoents\": \"node ./scripts/gen-compoents.js\",\n    \"prepare\": \"husky install\",\n    \"release\": \"standard-version\"\n  },\n  \"devDependencies\": {\n    \"@commitlint/cli\": \"^17.4.3\",\n    \"@commitlint/config-conventional\": \"^17.4.3\",\n    \"@rollup/plugin-alias\": \"^4.0.3\",\n    \"@rollup/plugin-commonjs\": \"^24.0.1\",\n    \"@rollup/plugin-node-resolve\": \"^15.0.1\",\n    \"@vue/cli-service\": \"^5.0.8\",\n    \"@vue/compiler-sfc\": \"^3.2.47\",\n    \"eslint\": \"^8.34.0\",\n    \"@antfu/eslint-config\": \"0.35.2\",\n    \"glob\": \"^8.1.0\",\n    \"husky\": \"^8.0.3\",\n    \"lint-staged\": \"^13.1.2\",\n    \"postcss\": \"^8.4.21\",\n    \"postcss-prefixer\": \"^2.1.3\",\n    \"rollup\": \"^3.15.0\",\n    \"rollup-plugin-postcss\": \"^4.0.2\",\n    \"@rollup/plugin-terser\": \"^0.4.0\",\n    \"rollup-plugin-vue\": \"^6.0.0\",\n    \"standard-version\": \"^9.5.0\",\n    \"vue\": \"3.2.41\"\n  },\n  \"peerDependencies\": {\n    \"vue\": \"^3.2.0\"\n  },\n  \"dependencies\": {\n    \"material-colors\": \"^1.2.6\",\n    \"@ctrl/tinycolor\": \"^3.6.0\"\n  },\n  \"engines\": {\n    \"node\": \">=12\"\n  },\n  \"lint-staged\": {\n    \"*.{js,jsx,vue}\": [\n      \"eslint --fix\"\n    ]\n  }\n}\n"
  },
  {
    "path": "scripts/gen-compoents.js",
    "content": "import fs from 'fs';\n\nconst basePath = process.cwd();\n\nfunction formatComponent(component) {\n  return component.split('-').map(name => name.slice(0, 1).toUpperCase() + name.slice(1)).join('');\n}\n\nfunction getCompoentsJS() {\n  const components = fs.readdirSync(`${basePath}/src/components`);\n  let componentsJS = '/* Do not modify the automatically generated code */\\n';\n  componentsJS += components.map(name => `import ${formatComponent(name)} from '@/components/${name}';\\n`).join('');\n  componentsJS += `\\nconst components = [\\n${components.map(name => `  ${formatComponent(name)},\\n`).join('')}];\\n`;\n  componentsJS += `\\nexport {\\n  components,\\n${components.map(name => `  ${formatComponent(name)},\\n`).join('')}};\\n`;\n  return componentsJS;\n}\n\nfs.writeFileSync(`${basePath}/src/components.js`, getCompoentsJS());\n"
  },
  {
    "path": "scripts/gen.js",
    "content": "import fs from 'fs';\n\nfunction formatComponent(component) {\n  return component.split('-').map(name => name.slice(0, 1).toUpperCase() + name.slice(1)).join('');\n}\n\nconst basePath = process.cwd();\nconst componentName = process.argv.slice(2).join(' ');\nconst formatComponentName = formatComponent(componentName);\n\nif (!/^[a-z]+(-[a-z]+){0,}$/.test(componentName)) {\n  console.error(`component name is incorrect: ${componentName}\\netc:\\nbutton\\nsome-button\\nsome-button-group`);\n  process.exit(1);\n}\nif (fs.existsSync(`${basePath}/src/components/${componentName}`)) {\n  console.error(`component name is already exist: ${componentName}`);\n  process.exit(1);\n}\n\nfs.mkdirSync(`${basePath}/src/components/${componentName}`);\n\nfs.writeFileSync(`${basePath}/src/components/${componentName}/${componentName}.vue`, `<template>\n<div :class=\"\\`\\${cssPrefix}${componentName}\\`\">\n</div>\n</template>\n\n<script>\nimport { cssPrefix } from '@/defaultConfig';\n\nexport default {\n  name: '${formatComponentName}',\n  setup() {\n    return {\n      cssPrefix,\n    };\n  },\n};\n</script>\n\n<style lang=\"scss\">\n@import './${componentName}.scss';\n</style>\n`);\nfs.writeFileSync(`${basePath}/src/components/${componentName}/${componentName}.scss`, `@import '../../styles/var.scss';\n\n.${componentName} {}`);\nfs.writeFileSync(`${basePath}/src/components/${componentName}/index.js`, `import ${formatComponentName} from './${componentName}.vue';\n\nexport default ${formatComponentName};\n`);\n\n// require('./gen-compoents');\n"
  },
  {
    "path": "src/components/alpha/alpha.vue",
    "content": "<script>\nimport checkboard from '@/components/checkboard';\n\nexport default {\n  name: 'Alpha',\n  components: {\n    Checkboard: checkboard,\n  },\n  props: {\n    value: Object,\n    onChange: Function,\n  },\n  computed: {\n    colors() {\n      return this.value;\n    },\n    gradientColor() {\n      const { rgba } = this.colors;\n      const rgbStr = [rgba.r, rgba.g, rgba.b].join(',');\n      return `linear-gradient(to right, rgba(${rgbStr}, 0) 0%, rgba(${rgbStr}, 1) 100%)`;\n    },\n  },\n  methods: {\n    handleChange(e, skip) {\n      !skip && e.preventDefault();\n      const { container } = this.$refs;\n      if (!container) {\n        // for some edge cases, container may not exist. see #220\n        return;\n      }\n      const containerWidth = container.clientWidth;\n\n      const xOffset = container.getBoundingClientRect().left + window.pageXOffset;\n      const pageX = e.pageX || (e.touches ? e.touches[0].pageX : 0);\n      const left = pageX - xOffset;\n\n      let a;\n      if (left < 0)\n        a = 0;\n      else if (left > containerWidth)\n        a = 1;\n      else\n        a = Math.round(left * 100 / containerWidth) / 100;\n\n      if (this.colors.a !== a) {\n        this.$emit('change', {\n          h: this.colors.hsl.h,\n          s: this.colors.hsl.s,\n          l: this.colors.hsl.l,\n          a,\n          source: 'rgba',\n        });\n      }\n    },\n    handleMouseDown(e) {\n      this.handleChange(e, true);\n      window.addEventListener('mousemove', this.handleChange);\n      window.addEventListener('mouseup', this.handleMouseUp);\n    },\n    handleMouseUp() {\n      this.unbindEventListeners();\n    },\n    unbindEventListeners() {\n      window.removeEventListener('mousemove', this.handleChange);\n      window.removeEventListener('mouseup', this.handleMouseUp);\n    },\n  },\n};\n</script>\n\n<template>\n  <div class=\"vc-alpha\">\n    <div class=\"vc-alpha-checkboard-wrap\">\n      <Checkboard />\n    </div>\n    <div class=\"vc-alpha-gradient\" :style=\"{ background: gradientColor }\" />\n    <div\n      ref=\"container\"\n      class=\"vc-alpha-container\"\n      @mousedown=\"handleMouseDown\"\n      @touchmove=\"handleChange\"\n      @touchstart=\"handleChange\"\n    >\n      <div class=\"vc-alpha-pointer\" :style=\"{ left: `${colors.a * 100}%` }\">\n        <div class=\"vc-alpha-picker\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n.vc-alpha {\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n}\n.vc-alpha-checkboard-wrap {\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n  overflow: hidden;\n}\n.vc-alpha-gradient {\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n}\n.vc-alpha-container {\n  cursor: pointer;\n  position: relative;\n  z-index: 2;\n  height: 100%;\n  margin: 0 3px;\n}\n.vc-alpha-pointer {\n  z-index: 2;\n  position: absolute;\n}\n.vc-alpha-picker {\n  cursor: pointer;\n  width: 4px;\n  border-radius: 1px;\n  height: 8px;\n  box-shadow: 0 0 2px rgba(0, 0, 0, .6);\n  background: #fff;\n  margin-top: 1px;\n  transform: translateX(-2px);\n}\n</style>\n"
  },
  {
    "path": "src/components/alpha/index.js",
    "content": "import Alpha from './alpha.vue';\nimport { install } from '@/utils/compoent';\n\nAlpha.install = install;\nexport default Alpha;\n"
  },
  {
    "path": "src/components/checkboard/checkboard.vue",
    "content": "<script>\nconst _checkboardCache = {};\n\nexport default {\n  name: 'Checkboard',\n  props: {\n    size: {\n      type: [Number, String],\n      default: 8,\n    },\n    white: {\n      type: String,\n      default: '#fff',\n    },\n    grey: {\n      type: String,\n      default: '#e6e6e6',\n    },\n  },\n  computed: {\n    bgStyle() {\n      return {\n        'background-image': `url(${getCheckboard(this.white, this.grey, this.size)})`,\n      };\n    },\n  },\n};\n\n/**\n * get base 64 data by canvas\n *\n * @param {String} c1 hex color\n * @param {String} c2 hex color\n * @param {Number} size\n */\n\nfunction renderCheckboard(c1, c2, size) {\n  // Dont Render On Server\n  if (typeof document === 'undefined')\n    return null;\n\n  const canvas = document.createElement('canvas');\n  canvas.width = canvas.height = size * 2;\n  const ctx = canvas.getContext('2d');\n  // If no context can be found, return early.\n  if (!ctx)\n    return null;\n\n  ctx.fillStyle = c1;\n  ctx.fillRect(0, 0, canvas.width, canvas.height);\n  ctx.fillStyle = c2;\n  ctx.fillRect(0, 0, size, size);\n  ctx.translate(size, size);\n  ctx.fillRect(0, 0, size, size);\n  return canvas.toDataURL();\n}\n\n/**\n * get checkboard base data and cache\n *\n * @param {String} c1 hex color\n * @param {String} c2 hex color\n * @param {Number} size\n */\n\nfunction getCheckboard(c1, c2, size) {\n  const key = `${c1},${c2},${size}`;\n\n  if (_checkboardCache[key])\n    return _checkboardCache[key];\n\n  const checkboard = renderCheckboard(c1, c2, size);\n  _checkboardCache[key] = checkboard;\n  return checkboard;\n}\n</script>\n\n<template>\n  <div class=\"vc-checkerboard\" :style=\"bgStyle\" />\n</template>\n\n<style>\n.vc-checkerboard {\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n  background-size: contain;\n}\n</style>\n"
  },
  {
    "path": "src/components/checkboard/index.js",
    "content": "import Checkboard from './checkboard.vue';\nimport { install } from '@/utils/compoent';\n\nCheckboard.install = install;\nexport default Checkboard;\n"
  },
  {
    "path": "src/components/chrome/chrome.vue",
    "content": "<script>\nimport colorMixin from '@/mixin/color';\nimport editableInput from '@/components/editable-input';\nimport saturation from '@/components/saturation';\nimport hue from '@/components/hue';\nimport alpha from '@/components/alpha';\nimport checkboard from '@/components/checkboard';\n\nexport default {\n  name: 'Chrome',\n  components: {\n    Saturation: saturation,\n    Hue: hue,\n    Alpha: alpha,\n    EdIn: editableInput,\n    Checkboard: checkboard,\n  },\n  mixins: [colorMixin],\n  props: {\n    disableAlpha: {\n      type: Boolean,\n      default: false,\n    },\n    disableFields: {\n      type: Boolean,\n      default: false,\n    },\n    format: {\n      type: String,\n      default: 'hex',\n    },\n  },\n  data() {\n    return {\n      fieldsIndex: 'hex',\n      highlight: false,\n    };\n  },\n  computed: {\n    hsl() {\n      const { h, s, l } = this.colors.hsl;\n      return {\n        h: h.toFixed(),\n        s: `${(s * 100).toFixed()}%`,\n        l: `${(l * 100).toFixed()}%`,\n      };\n    },\n    activeColor() {\n      const { rgba } = this.colors;\n      return `rgba(${[rgba.r, rgba.g, rgba.b, rgba.a].join(',')})`;\n    },\n    hasAlpha() {\n      return this.colors.a < 1;\n    },\n  },\n  watch: {\n    format: {\n      handler(val) {\n        this.fieldsIndex = val;\n      },\n      immediate: true,\n    },\n  },\n  methods: {\n    childChange(data) {\n      this.colorChange(data);\n    },\n    inputChange(data) {\n      if (!data)\n        return;\n\n      if (data.hex) {\n        this.isValidHex(data.hex) && this.colorChange({\n          hex: data.hex,\n          source: 'hex',\n        });\n      }\n      else if (data.r || data.g || data.b || data.a) {\n        this.colorChange({\n          r: data.r || this.colors.rgba.r,\n          g: data.g || this.colors.rgba.g,\n          b: data.b || this.colors.rgba.b,\n          a: data.a || this.colors.rgba.a,\n          source: 'rgba',\n        });\n      }\n      else if (data.h || data.s || data.l) {\n        const s = data.s ? (data.s.replace('%', '') / 100) : this.colors.hsl.s;\n        const l = data.l ? (data.l.replace('%', '') / 100) : this.colors.hsl.l;\n\n        this.colorChange({\n          h: data.h || this.colors.hsl.h,\n          s,\n          l,\n          source: 'hsl',\n        });\n      }\n    },\n    toggleViews() {\n      switch (this.fieldsIndex) {\n        case 'hex':\n          this.fieldsIndex = `rgb${this.disableAlpha ? '' : 'a'}`;\n          break;\n        case 'rgb':\n        case 'rgba':\n          this.fieldsIndex = `hsl${this.disableAlpha ? '' : 'a'}`;\n          break;\n        default:\n          this.fieldsIndex = 'hex';\n          break;\n      }\n      this.$emit('update:format', this.fieldsIndex);\n    },\n    showHighlight() {\n      this.highlight = true;\n    },\n    hideHighlight() {\n      this.highlight = false;\n    },\n  },\n};\n</script>\n\n<template>\n  <div role=\"application\" aria-label=\"Chrome color picker\" class=\"vc-chrome\" :class=\"[disableAlpha ? 'vc-chrome__disable-alpha' : '']\">\n    <div class=\"vc-chrome-saturation-wrap\">\n      <Saturation :value=\"colors\" @change=\"childChange\" />\n    </div>\n    <div class=\"vc-chrome-body\">\n      <div class=\"vc-chrome-controls\">\n        <div class=\"vc-chrome-color-wrap\">\n          <div :aria-label=\"`current color is ${colors.hex}`\" class=\"vc-chrome-active-color\" :style=\"{ background: activeColor }\" />\n          <Checkboard v-if=\"!disableAlpha\" />\n        </div>\n\n        <div class=\"vc-chrome-sliders\">\n          <div class=\"vc-chrome-hue-wrap\">\n            <Hue :value=\"colors\" @change=\"childChange\" />\n          </div>\n          <div v-if=\"!disableAlpha\" class=\"vc-chrome-alpha-wrap\">\n            <Alpha :value=\"colors\" @change=\"childChange\" />\n          </div>\n        </div>\n      </div>\n\n      <div v-if=\"!disableFields\" class=\"vc-chrome-fields-wrap\">\n        <div v-show=\"fieldsIndex === 'hex'\" class=\"vc-chrome-fields\">\n          <!-- hex -->\n          <div class=\"vc-chrome-field\">\n            <EdIn v-if=\"!hasAlpha\" label=\"hex\" :value=\"colors.hex\" @change=\"inputChange\" />\n            <EdIn v-if=\"hasAlpha\" label=\"hex\" :value=\"colors.hex8\" @change=\"inputChange\" />\n          </div>\n        </div>\n        <div v-show=\"['rgb', 'rgba'].includes(fieldsIndex)\" class=\"vc-chrome-fields\">\n          <!-- rgba -->\n          <div class=\"vc-chrome-field\">\n            <EdIn label=\"r\" :value=\"colors.rgba.r\" @change=\"inputChange\" />\n          </div>\n          <div class=\"vc-chrome-field\">\n            <EdIn label=\"g\" :value=\"colors.rgba.g\" @change=\"inputChange\" />\n          </div>\n          <div class=\"vc-chrome-field\">\n            <EdIn label=\"b\" :value=\"colors.rgba.b\" @change=\"inputChange\" />\n          </div>\n          <div v-if=\"!disableAlpha\" class=\"vc-chrome-field\">\n            <EdIn label=\"a\" :value=\"colors.a\" :arrow-offset=\"0.01\" :max=\"1\" @change=\"inputChange\" />\n          </div>\n        </div>\n        <div v-show=\"['hsl', 'hsla'].includes(fieldsIndex)\" class=\"vc-chrome-fields\">\n          <!-- hsla -->\n          <div class=\"vc-chrome-field\">\n            <EdIn label=\"h\" :value=\"hsl.h\" @change=\"inputChange\" />\n          </div>\n          <div class=\"vc-chrome-field\">\n            <EdIn label=\"s\" :value=\"hsl.s\" @change=\"inputChange\" />\n          </div>\n          <div class=\"vc-chrome-field\">\n            <EdIn label=\"l\" :value=\"hsl.l\" @change=\"inputChange\" />\n          </div>\n          <div v-if=\"!disableAlpha\" class=\"vc-chrome-field\">\n            <EdIn label=\"a\" :value=\"colors.a\" :arrow-offset=\"0.01\" :max=\"1\" @change=\"inputChange\" />\n          </div>\n        </div>\n        <!-- btn -->\n        <div class=\"vc-chrome-toggle-btn\" role=\"button\" aria-label=\"Change another color definition\" @click=\"toggleViews\">\n          <div class=\"vc-chrome-toggle-icon\">\n            <svg\n              style=\"width:24px; height:24px\"\n              viewBox=\"0 0 24 24\"\n              @mouseover=\"showHighlight\"\n              @mouseenter=\"showHighlight\"\n              @mouseout=\"hideHighlight\"\n            >\n              <path fill=\"#333\" d=\"M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z\" />\n            </svg>\n          </div>\n          <div v-show=\"highlight\" class=\"vc-chrome-toggle-icon-highlight\" />\n        </div>\n        <!-- btn -->\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n.vc-chrome {\n  background: #fff;\n  border-radius: 2px;\n  box-shadow: 0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3);\n  box-sizing: initial;\n  width: 225px;\n  font-family: Menlo;\n  background-color: #fff;\n}\n.vc-chrome-controls {\n  display: flex;\n}\n.vc-chrome-color-wrap {\n  position: relative;\n  width: 36px;\n}\n.vc-chrome-active-color {\n  position: relative;\n  width: 30px;\n  height: 30px;\n  border-radius: 15px;\n  overflow: hidden;\n  z-index: 1;\n}\n.vc-chrome-color-wrap .vc-checkerboard {\n  width: 30px;\n  height: 30px;\n  border-radius: 15px;\n  background-size: auto;\n}\n.vc-chrome-sliders {\n  flex: 1;\n}\n.vc-chrome-fields-wrap {\n  display: flex;\n  padding-top: 16px;\n}\n.vc-chrome-fields {\n  display: flex;\n  margin-left: -6px;\n  flex: 1;\n}\n.vc-chrome-field {\n  padding-left: 6px;\n  width: 100%;\n}\n.vc-chrome-toggle-btn {\n  width: 32px;\n  text-align: right;\n  position: relative;\n}\n.vc-chrome-toggle-icon {\n  margin-right: -4px;\n  margin-top: 12px;\n  cursor: pointer;\n  position: relative;\n  z-index: 2;\n}\n.vc-chrome-toggle-icon-highlight {\n  position: absolute;\n  width: 24px;\n  height: 28px;\n  background: #eee;\n  border-radius: 4px;\n  top: 10px;\n  left: 12px;\n}\n.vc-chrome-hue-wrap {\n  position: relative;\n  height: 10px;\n  margin-bottom: 8px;\n}\n.vc-chrome-alpha-wrap {\n  position: relative;\n  height: 10px;\n}\n.vc-chrome-hue-wrap .vc-hue {\n  border-radius: 2px;\n}\n.vc-chrome-alpha-wrap .vc-alpha-gradient {\n  border-radius: 2px;\n}\n.vc-chrome-hue-wrap .vc-hue-picker, .vc-chrome-alpha-wrap .vc-alpha-picker {\n  width: 12px;\n  height: 12px;\n  border-radius: 6px;\n  transform: translate(-6px, -2px);\n  background-color: rgb(248, 248, 248);\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);\n}\n.vc-chrome-body {\n  padding: 16px 16px 12px;\n  background-color: #fff;\n}\n.vc-chrome-saturation-wrap {\n  width: 100%;\n  padding-bottom: 55%;\n  position: relative;\n  border-radius: 2px 2px 0 0;\n  overflow: hidden;\n}\n.vc-chrome-saturation-wrap .vc-saturation-circle {\n  width: 12px;\n  height: 12px;\n}\n\n.vc-chrome-fields .vc-input__input {\n  font-size: 11px;\n  color: #333;\n  width: 100%;\n  border-radius: 2px;\n  border: none;\n  box-shadow: inset 0 0 0 1px #dadada;\n  height: 21px;\n  text-align: center;\n}\n.vc-chrome-fields .vc-input__label {\n  text-transform: uppercase;\n  font-size: 11px;\n  line-height: 11px;\n  color: #969696;\n  text-align: center;\n  display: block;\n  margin-top: 12px;\n}\n\n.vc-chrome__disable-alpha .vc-chrome-active-color {\n  width: 18px;\n  height: 18px;\n}\n.vc-chrome__disable-alpha .vc-chrome-color-wrap {\n  width: 30px;\n}\n.vc-chrome__disable-alpha .vc-chrome-hue-wrap {\n  margin-top: 4px;\n  margin-bottom: 4px;\n}\n</style>\n"
  },
  {
    "path": "src/components/chrome/index.js",
    "content": "import Chrome from './chrome.vue';\nimport { install } from '@/utils/compoent';\n\nChrome.install = install;\nexport default Chrome;\n"
  },
  {
    "path": "src/components/compact/compact.vue",
    "content": "<script>\nimport colorMixin from '@/mixin/color';\n\nconst defaultColors = [\n  '#4D4D4D', '#999999', '#FFFFFF', '#F44E3B', '#FE9200', '#FCDC00',\n  '#DBDF00', '#A4DD00', '#68CCCA', '#73D8FF', '#AEA1FF', '#FDA1FF',\n  '#333333', '#808080', '#CCCCCC', '#D33115', '#E27300', '#FCC400',\n  '#B0BC00', '#68BC00', '#16A5A5', '#009CE0', '#7B64FF', '#FA28FF',\n  '#000000', '#666666', '#B3B3B3', '#9F0500', '#C45100', '#FB9E00',\n  '#808900', '#194D33', '#0C797D', '#0062B1', '#653294', '#AB149E',\n];\n\nexport default {\n  name: 'Compact',\n  mixins: [colorMixin],\n  props: {\n    palette: {\n      type: Array,\n      default() {\n        return defaultColors;\n      },\n    },\n  },\n  computed: {\n    pick() {\n      return this.colors.hex.toUpperCase();\n    },\n  },\n  methods: {\n    handlerClick(c) {\n      this.colorChange({\n        hex: c,\n        source: 'hex',\n      });\n    },\n  },\n};\n</script>\n\n<template>\n  <div role=\"application\" aria-label=\"Compact color picker\" class=\"vc-compact\">\n    <ul class=\"vc-compact-colors\" role=\"listbox\">\n      <li\n        v-for=\"c in paletteUpperCase(palette)\"\n        :key=\"c\"\n        role=\"option\"\n        :aria-label=\"`color:${c}`\"\n        :aria-selected=\"c === pick\"\n        class=\"vc-compact-color-item\"\n        :class=\"{ 'vc-compact-color-item--white': c === '#FFFFFF' }\"\n        :style=\"{ background: c }\"\n        @click=\"handlerClick(c)\"\n      >\n        <div v-show=\"c === pick\" class=\"vc-compact-dot\" />\n      </li>\n    </ul>\n  </div>\n</template>\n\n<style>\n.vc-compact {\n  padding-top: 5px;\n  padding-left: 5px;\n  width: 245px;\n  border-radius: 2px;\n  box-sizing: border-box;\n  box-shadow: 0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);\n  background-color: #fff;\n}\n.vc-compact-colors {\n  overflow: hidden;\n  padding: 0;\n  margin: 0;\n}\n.vc-compact-color-item {\n  list-style: none;\n  width: 15px;\n  height: 15px;\n  float: left;\n  margin-right: 5px;\n  margin-bottom: 5px;\n  position: relative;\n  cursor: pointer;\n}\n.vc-compact-color-item--white {\n  box-shadow: inset 0 0 0 1px #ddd;\n}\n.vc-compact-color-item--white .vc-compact-dot {\n  background: #000;\n}\n\n.vc-compact-dot {\n  position: absolute;\n  top: 5px;\n  right: 5px;\n  bottom: 5px;\n  left: 5px;\n  border-radius: 50%;\n  opacity: 1;\n  background: #fff;\n}\n</style>\n"
  },
  {
    "path": "src/components/compact/index.js",
    "content": "import Compact from './compact.vue';\nimport { install } from '@/utils/compoent';\n\nCompact.install = install;\nexport default Compact;\n"
  },
  {
    "path": "src/components/editable-input/editable-input.vue",
    "content": "<script>\nexport default {\n  name: 'EditableInput',\n  props: {\n    label: String,\n    labelText: String,\n    desc: String,\n    value: [String, Number],\n    max: Number,\n    min: Number,\n    arrowOffset: {\n      type: Number,\n      default: 1,\n    },\n  },\n  computed: {\n    val: {\n      get() {\n        return this.value;\n      },\n      set(v) {\n        // TODO: min\n        if (!(this.max === undefined) && +v > this.max)\n          this.$refs.input.value = this.max;\n        else\n          return v;\n      },\n    },\n    labelId() {\n      return `input__label__${this.label}__${Math.random().toString().slice(2, 5)}`;\n    },\n    labelSpanText() {\n      return this.labelText || this.label;\n    },\n  },\n  methods: {\n    update(e) {\n      this.handleChange(e.target.value);\n    },\n    handleChange(newVal) {\n      const data = {};\n      data[this.label] = newVal;\n      if (data.hex === undefined && data['#'] === undefined)\n        this.$emit('change', data);\n      else if (newVal.length > 5)\n        this.$emit('change', data);\n    },\n    // **** unused\n    // handleBlur (e) {\n    //   console.log(e)\n    // },\n    handleKeyDown(e) {\n      let { val } = this;\n      const number = Number(val);\n\n      if (number) {\n        const amount = this.arrowOffset || 1;\n\n        // Up\n        if (e.keyCode === 38) {\n          val = number + amount;\n          this.handleChange(val);\n          e.preventDefault();\n        }\n\n        // Down\n        if (e.keyCode === 40) {\n          val = number - amount;\n          this.handleChange(val);\n          e.preventDefault();\n        }\n      }\n    },\n    // **** unused\n    // handleDrag (e) {\n    //   console.log(e)\n    // },\n    // handleMouseDown (e) {\n    //   console.log(e)\n    // }\n  },\n};\n</script>\n\n<template>\n  <div class=\"vc-editable-input\">\n    <input\n      ref=\"input\"\n      v-model=\"val\"\n      :aria-labelledby=\"labelId\"\n      class=\"vc-input__input\"\n      @keydown=\"handleKeyDown\"\n      @input=\"update\"\n    >\n    <span :id=\"labelId\" :for=\"label\" class=\"vc-input__label\">{{ labelSpanText }}</span>\n    <span class=\"vc-input__desc\">{{ desc }}</span>\n  </div>\n</template>\n\n<style>\n.vc-editable-input {\n  position: relative;\n}\n.vc-input__input {\n  padding: 0;\n  border: 0;\n  outline: none;\n}\n.vc-input__label {\n  text-transform: capitalize;\n}\n</style>\n"
  },
  {
    "path": "src/components/editable-input/index.js",
    "content": "import EditableInput from './editable-input.vue';\nimport { install } from '@/utils/compoent';\n\nEditableInput.install = install;\nexport default EditableInput;\n"
  },
  {
    "path": "src/components/grayscale/grayscale.vue",
    "content": "<script>\nimport colorMixin from '@/mixin/color';\n\nconst defaultColors = [\n  '#FFFFFF', '#F2F2F2', '#E6E6E6', '#D9D9D9', '#CCCCCC', '#BFBFBF', '#B3B3B3',\n  '#A6A6A6', '#999999', '#8C8C8C', '#808080', '#737373', '#666666', '#595959',\n  '#4D4D4D', '#404040', '#333333', '#262626', '#0D0D0D', '#000000',\n];\n\nexport default {\n  name: 'Grayscale',\n  components: {\n\n  },\n  mixins: [colorMixin],\n  props: {\n    palette: {\n      type: Array,\n      default() {\n        return defaultColors;\n      },\n    },\n  },\n  computed: {\n    pick() {\n      return this.colors.hex.toUpperCase();\n    },\n  },\n  methods: {\n    handlerClick(c) {\n      this.colorChange({\n        hex: c,\n        source: 'hex',\n      });\n    },\n  },\n};\n</script>\n\n<template>\n  <div role=\"application\" aria-label=\"Grayscale color picker\" class=\"vc-grayscale\">\n    <ul class=\"vc-grayscale-colors\" role=\"listbox\">\n      <li\n        v-for=\"c in paletteUpperCase(palette)\"\n        :key=\"c\"\n        role=\"option\"\n        :aria-label=\"`Color:${c}`\"\n        :aria-selected=\"c === pick\"\n        class=\"vc-grayscale-color-item\"\n        :class=\"{ 'vc-grayscale-color-item--white': c === '#FFFFFF' }\"\n        :style=\"{ background: c }\"\n        @click=\"handlerClick(c)\"\n      >\n        <div v-show=\"c === pick\" class=\"vc-grayscale-dot\" />\n      </li>\n    </ul>\n  </div>\n</template>\n\n<style>\n.vc-grayscale {\n  width: 125px;\n  border-radius: 2px;\n  box-shadow: 0 2px 15px rgba(0,0,0,.12), 0 2px 10px rgba(0,0,0,.16);\n  background-color: #fff;\n}\n.vc-grayscale-colors {\n  border-radius: 2px;\n  overflow: hidden;\n  padding: 0;\n  margin: 0;\n}\n.vc-grayscale-color-item {\n  list-style: none;\n  width: 25px;\n  height: 25px;\n  float: left;\n  position: relative;\n  cursor: pointer;\n}\n.vc-grayscale-color-item--white .vc-grayscale-dot {\n  background: #000;\n}\n\n.vc-grayscale-dot {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 6px;\n  height: 6px;\n  margin: -3px 0 0 -2px;\n  border-radius: 50%;\n  opacity: 1;\n  background: #fff;\n}\n</style>\n"
  },
  {
    "path": "src/components/grayscale/index.js",
    "content": "import Grayscale from './grayscale.vue';\nimport { install } from '@/utils/compoent';\n\nGrayscale.install = install;\nexport default Grayscale;\n"
  },
  {
    "path": "src/components/hue/hue.vue",
    "content": "<script>\nexport default {\n  name: 'Hue',\n  props: {\n    value: Object,\n    direction: {\n      type: String,\n      // [horizontal | vertical]\n      default: 'horizontal',\n    },\n  },\n  data() {\n    return {\n      oldHue: 0,\n      pullDirection: '',\n    };\n  },\n  computed: {\n    colors() {\n      return this.value;\n    },\n    directionClass() {\n      return {\n        'vc-hue--horizontal': this.direction === 'horizontal',\n        'vc-hue--vertical': this.direction === 'vertical',\n      };\n    },\n    pointerTop() {\n      if (this.direction === 'vertical') {\n        if (this.colors.hsl.h === 0 && this.pullDirection === 'right')\n          return 0;\n        return `${-((this.colors.hsl.h * 100) / 360) + 100}%`;\n      }\n      return 0;\n    },\n    pointerLeft() {\n      if (this.direction === 'vertical')\n        return 0;\n\n      if (this.colors.hsl.h === 0 && this.pullDirection === 'right')\n        return '100%';\n      return `${(this.colors.hsl.h * 100) / 360}%`;\n    },\n  },\n  watch: {\n    value: {\n      handler(value, oldVal) {\n        const { h } = value.hsl;\n        if (h !== 0 && h - this.oldHue > 0)\n          this.pullDirection = 'right';\n        if (h !== 0 && h - this.oldHue < 0)\n          this.pullDirection = 'left';\n        this.oldHue = h;\n      },\n      deep: true,\n      immediate: true,\n    },\n  },\n  methods: {\n    handleChange(e, skip) {\n      !skip && e.preventDefault();\n\n      const { container } = this.$refs;\n      if (!container) {\n        // for some edge cases, container may not exist. see #220\n        return;\n      }\n      const containerWidth = container.clientWidth;\n      const containerHeight = container.clientHeight;\n\n      const xOffset = container.getBoundingClientRect().left + window.pageXOffset;\n      const yOffset = container.getBoundingClientRect().top + window.pageYOffset;\n      const pageX = e.pageX || (e.touches ? e.touches[0].pageX : 0);\n      const pageY = e.pageY || (e.touches ? e.touches[0].pageY : 0);\n      const left = pageX - xOffset;\n      const top = pageY - yOffset;\n\n      let h;\n      let percent;\n\n      if (this.direction === 'vertical') {\n        if (top < 0) {\n          h = 360;\n        }\n        else if (top > containerHeight) {\n          h = 0;\n        }\n        else {\n          percent = -(top * 100 / containerHeight) + 100;\n          h = (360 * percent / 100);\n        }\n\n        if (this.colors.hsl.h !== h) {\n          this.$emit('change', {\n            h,\n            s: this.colors.hsl.s,\n            l: this.colors.hsl.l,\n            a: this.colors.hsl.a,\n            source: 'hsl',\n          });\n        }\n      }\n      else {\n        if (left < 0) {\n          h = 0;\n        }\n        else if (left > containerWidth) {\n          h = 360;\n        }\n        else {\n          percent = left * 100 / containerWidth;\n          h = (360 * percent / 100);\n        }\n\n        if (this.colors.hsl.h !== h) {\n          this.$emit('change', {\n            h,\n            s: this.colors.hsl.s,\n            l: this.colors.hsl.l,\n            a: this.colors.hsl.a,\n            source: 'hsl',\n          });\n        }\n      }\n    },\n    handleMouseDown(e) {\n      this.handleChange(e, true);\n      window.addEventListener('mousemove', this.handleChange);\n      window.addEventListener('mouseup', this.handleChange);\n      window.addEventListener('mouseup', this.handleMouseUp);\n    },\n    handleMouseUp(e) {\n      this.unbindEventListeners();\n    },\n    unbindEventListeners() {\n      window.removeEventListener('mousemove', this.handleChange);\n      window.removeEventListener('mouseup', this.handleChange);\n      window.removeEventListener('mouseup', this.handleMouseUp);\n    },\n  },\n};\n</script>\n\n<template>\n  <div class=\"vc-hue\" :class=\"[directionClass]\">\n    <div\n      ref=\"container\"\n      class=\"vc-hue-container\"\n      role=\"slider\"\n      :aria-valuenow=\"colors.hsl.h\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"360\"\n      @mousedown=\"handleMouseDown\"\n      @touchmove=\"handleChange\"\n      @touchstart=\"handleChange\"\n    >\n      <div class=\"vc-hue-pointer\" :style=\"{ top: pointerTop, left: pointerLeft }\" role=\"presentation\">\n        <div class=\"vc-hue-picker\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n.vc-hue {\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n  border-radius: 2px;\n}\n.vc-hue--horizontal {\n  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n}\n.vc-hue--vertical {\n  background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n}\n.vc-hue-container {\n  cursor: pointer;\n  margin: 0 2px;\n  position: relative;\n  height: 100%;\n}\n.vc-hue-pointer {\n  z-index: 2;\n  position: absolute;\n}\n.vc-hue-picker {\n  cursor: pointer;\n  margin-top: 1px;\n  width: 4px;\n  border-radius: 1px;\n  height: 8px;\n  box-shadow: 0 0 2px rgba(0, 0, 0, .6);\n  background: #fff;\n  transform: translateX(-2px) ;\n}\n</style>\n"
  },
  {
    "path": "src/components/hue/index.js",
    "content": "import Hue from './hue.vue';\nimport { install } from '@/utils/compoent';\n\nHue.install = install;\nexport default Hue;\n"
  },
  {
    "path": "src/components/material/index.js",
    "content": "import Material from './material.vue';\nimport { install } from '@/utils/compoent';\n\nMaterial.install = install;\nexport default Material;\n"
  },
  {
    "path": "src/components/material/material.vue",
    "content": "<script>\nimport editableInput from '@/components/editable-input';\nimport colorMixin from '@/mixin/color';\n\nexport default {\n  name: 'Material',\n  components: {\n    EdIn: editableInput,\n  },\n  mixins: [colorMixin],\n  methods: {\n    onChange(data) {\n      if (!data)\n        return;\n\n      if (data.hex) {\n        this.isValidHex(data.hex) && this.colorChange({\n          hex: data.hex,\n          source: 'hex',\n        });\n      }\n      else if (data.r || data.g || data.b) {\n        this.colorChange({\n          r: data.r || this.colors.rgba.r,\n          g: data.g || this.colors.rgba.g,\n          b: data.b || this.colors.rgba.b,\n          a: data.a || this.colors.rgba.a,\n          source: 'rgba',\n        });\n      }\n    },\n  },\n};\n</script>\n\n<template>\n  <div role=\"application\" aria-label=\"Material color picker\" class=\"vc-material\">\n    <EdIn\n      class=\"vc-material-hex\"\n      label=\"hex\"\n      :value=\"colors.hex\"\n      :style=\"{ borderColor: colors.hex }\"\n      @change=\"onChange\"\n    />\n\n    <div class=\"vc-material-split\">\n      <div class=\"vc-material-third\">\n        <EdIn\n          label=\"r\"\n          :value=\"colors.rgba.r\"\n          @change=\"onChange\"\n        />\n      </div>\n      <div class=\"vc-material-third\">\n        <EdIn\n          label=\"g\"\n          :value=\"colors.rgba.g\"\n          @change=\"onChange\"\n        />\n      </div>\n      <div class=\"vc-material-third\">\n        <EdIn\n          label=\"b\"\n          :value=\"colors.rgba.b\"\n          @change=\"onChange\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n.vc-material {\n  width: 98px;\n  height: 98px;\n  padding: 16px;\n  font-family: \"Roboto\";\n  position: relative;\n  border-radius: 2px;\n  box-shadow: 0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);\n  background-color: #fff;\n}\n\n.vc-material .vc-input__input {\n  width: 100%;\n  margin-top: 12px;\n  font-size: 15px;\n  color: #333;\n  height: 30px;\n}\n\n.vc-material .vc-input__label {\n  position: absolute;\n  top: 0;\n  left: 0;\n  font-size: 11px;\n  color: #999;\n  text-transform: capitalize;\n}\n\n.vc-material-hex {\n  border-bottom-width: 2px;\n  border-bottom-style: solid;\n}\n.vc-material-split {\n  display: flex;\n  margin-right: -10px;\n  padding-top: 11px;\n}\n.vc-material-third {\n  flex: 1;\n  padding-right: 10px;\n}\n</style>\n"
  },
  {
    "path": "src/components/photoshop/index.js",
    "content": "import Photoshop from './photoshop.vue';\nimport { install } from '@/utils/compoent';\n\nPhotoshop.install = install;\nexport default Photoshop;\n"
  },
  {
    "path": "src/components/photoshop/photoshop.vue",
    "content": "<script>\nimport colorMixin from '@/mixin/color';\nimport editableInput from '@/components/editable-input';\nimport saturation from '@/components/saturation';\nimport hue from '@/components/hue';\n\nexport default {\n  name: 'Photoshop',\n  components: {\n    Saturation: saturation,\n    Hue: hue,\n    EdIn: editableInput,\n  },\n  mixins: [colorMixin],\n  props: {\n    head: {\n      type: String,\n      default: 'Color Picker',\n    },\n    disableFields: {\n      type: Boolean,\n      default: false,\n    },\n    hasResetButton: {\n      type: Boolean,\n      default: false,\n    },\n    acceptLabel: {\n      type: String,\n      default: 'OK',\n    },\n    cancelLabel: {\n      type: String,\n      default: 'Cancel',\n    },\n    resetLabel: {\n      type: String,\n      default: 'Reset',\n    },\n    newLabel: {\n      type: String,\n      default: 'new',\n    },\n    currentLabel: {\n      type: String,\n      default: 'current',\n    },\n  },\n  data() {\n    return {\n      currentColor: '#FFF',\n    };\n  },\n  computed: {\n    hsv() {\n      const { hsv } = this.colors;\n      return {\n        h: hsv.h.toFixed(),\n        s: (hsv.s * 100).toFixed(),\n        v: (hsv.v * 100).toFixed(),\n      };\n    },\n    hex() {\n      const { hex } = this.colors;\n      return hex && hex.replace('#', '');\n    },\n  },\n  created() {\n    this.currentColor = this.colors.hex;\n  },\n  methods: {\n    childChange(data) {\n      this.colorChange(data);\n    },\n    inputChange(data) {\n      if (!data)\n        return;\n\n      if (data['#']) {\n        this.isValidHex(data['#']) && this.colorChange({\n          hex: data['#'],\n          source: 'hex',\n        });\n      }\n      else if (data.r || data.g || data.b || data.a) {\n        this.colorChange({\n          r: data.r || this.colors.rgba.r,\n          g: data.g || this.colors.rgba.g,\n          b: data.b || this.colors.rgba.b,\n          a: data.a || this.colors.rgba.a,\n          source: 'rgba',\n        });\n      }\n      else if (data.h || data.s || data.v) {\n        this.colorChange({\n          h: data.h || this.colors.hsv.h,\n          s: (data.s / 100) || this.colors.hsv.s,\n          v: (data.v / 100) || this.colors.hsv.v,\n          source: 'hsv',\n        });\n      }\n    },\n    clickCurrentColor() {\n      this.colorChange({\n        hex: this.currentColor,\n        source: 'hex',\n      });\n    },\n    handleAccept() {\n      this.$emit('ok');\n    },\n    handleCancel() {\n      this.$emit('cancel');\n    },\n    handleReset() {\n      this.$emit('reset');\n    },\n  },\n\n};\n</script>\n\n<template>\n  <div role=\"application\" aria-label=\"PhotoShop color picker\" class=\"vc-photoshop\" :class=\"[disableFields ? 'vc-photoshop__disable-fields' : '']\">\n    <div role=\"heading\" class=\"vc-ps-head\">\n      {{ head }}\n    </div>\n    <div class=\"vc-ps-body\">\n      <div class=\"vc-ps-saturation-wrap\">\n        <Saturation :value=\"colors\" @change=\"childChange\" />\n      </div>\n      <div class=\"vc-ps-hue-wrap\">\n        <Hue :value=\"colors\" direction=\"vertical\" @change=\"childChange\">\n          <div class=\"vc-ps-hue-pointer\">\n            <i class=\"vc-ps-hue-pointer--left\" /><i class=\"vc-ps-hue-pointer--right\" />\n          </div>\n        </Hue>\n      </div>\n      <div class=\"vc-ps-controls\" :class=\"[disableFields ? 'vc-ps-controls__disable-fields' : '']\">\n        <div class=\"vc-ps-previews\">\n          <div class=\"vc-ps-previews__label\">\n            {{ newLabel }}\n          </div>\n          <div class=\"vc-ps-previews__swatches\">\n            <div class=\"vc-ps-previews__pr-color\" :aria-label=\"`New color is ${colors.hex}`\" :style=\"{ background: colors.hex }\" />\n            <div class=\"vc-ps-previews__pr-color\" :aria-label=\"`Current color is ${currentColor}`\" :style=\"{ background: currentColor }\" @click=\"clickCurrentColor\" />\n          </div>\n          <div class=\"vc-ps-previews__label\">\n            {{ currentLabel }}\n          </div>\n        </div>\n        <div v-if=\"!disableFields\" class=\"vc-ps-actions\">\n          <div class=\"vc-ps-ac-btn\" role=\"button\" :aria-label=\"acceptLabel\" @click=\"handleAccept\">\n            {{ acceptLabel }}\n          </div>\n          <div class=\"vc-ps-ac-btn\" role=\"button\" :aria-label=\"cancelLabel\" @click=\"handleCancel\">\n            {{ cancelLabel }}\n          </div>\n\n          <div class=\"vc-ps-fields\">\n            <!-- hsla -->\n            <EdIn label=\"h\" desc=\"°\" :value=\"hsv.h\" @change=\"inputChange\" />\n            <EdIn label=\"s\" desc=\"%\" :value=\"hsv.s\" :max=\"100\" @change=\"inputChange\" />\n            <EdIn label=\"v\" desc=\"%\" :value=\"hsv.v\" :max=\"100\" @change=\"inputChange\" />\n            <div class=\"vc-ps-fields__divider\" />\n            <!-- rgba -->\n            <EdIn label=\"r\" :value=\"colors.rgba.r\" @change=\"inputChange\" />\n            <EdIn label=\"g\" :value=\"colors.rgba.g\" @change=\"inputChange\" />\n            <EdIn label=\"b\" :value=\"colors.rgba.b\" @change=\"inputChange\" />\n            <div class=\"vc-ps-fields__divider\" />\n            <!-- hex -->\n            <EdIn label=\"#\" class=\"vc-ps-fields__hex\" :value=\"hex\" @change=\"inputChange\" />\n          </div>\n\n          <div v-if=\"hasResetButton\" class=\"vc-ps-ac-btn\" aria-label=\"reset\" @click=\"handleReset\">\n            {{ resetLabel }}\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n.vc-photoshop {\n  background: #DCDCDC;\n  border-radius: 4px;\n  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15);\n  box-sizing: initial;\n  width: 513px;\n  font-family: Roboto;\n}\n.vc-photoshop__disable-fields {\n  width: 390px;\n}\n.vc-ps-head {\n  background-image: linear-gradient(-180deg, #F0F0F0 0%, #D4D4D4 100%);\n  border-bottom: 1px solid #B1B1B1;\n  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 rgba(0,0,0,.02);\n  height: 23px;\n  line-height: 24px;\n  border-radius: 4px 4px 0 0;\n  font-size: 13px;\n  color: #4D4D4D;\n  text-align: center;\n}\n.vc-ps-body {\n  padding: 15px;\n  display: flex;\n}\n\n.vc-ps-saturation-wrap {\n  width: 256px;\n  height: 256px;\n  position: relative;\n  border: 2px solid #B3B3B3;\n  border-bottom: 2px solid #F0F0F0;\n  overflow: hidden;\n}\n.vc-ps-saturation-wrap .vc-saturation-circle {\n  width: 12px;\n  height: 12px;\n}\n\n.vc-ps-hue-wrap {\n  position: relative;\n  height: 256px;\n  width: 19px;\n  margin-left: 10px;\n  border: 2px solid #B3B3B3;\n  border-bottom: 2px solid #F0F0F0;\n}\n.vc-ps-hue-pointer {\n  position: relative;\n}\n.vc-ps-hue-pointer--left,\n.vc-ps-hue-pointer--right {\n  position: absolute;\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 5px 0 5px 8px;\n  border-color: transparent transparent transparent #555;\n}\n.vc-ps-hue-pointer--left:after,\n.vc-ps-hue-pointer--right:after {\n  content: \"\";\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 4px 0 4px 6px;\n  border-color: transparent transparent transparent #fff;\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  transform: translate(-8px, -5px);\n}\n.vc-ps-hue-pointer--left {\n  transform: translate(-13px, -4px);\n}\n.vc-ps-hue-pointer--right {\n  transform: translate(20px, -4px) rotate(180deg);\n}\n\n.vc-ps-controls {\n  width: 180px;\n  margin-left: 10px;\n  display: flex;\n}\n.vc-ps-controls__disable-fields {\n  width: auto;\n}\n\n.vc-ps-actions {\n  margin-left: 20px;\n  flex: 1;\n}\n.vc-ps-ac-btn {\n  cursor: pointer;\n  background-image: linear-gradient(-180deg, #FFFFFF 0%, #E6E6E6 100%);\n  border: 1px solid #878787;\n  border-radius: 2px;\n  height: 20px;\n  box-shadow: 0 1px 0 0 #EAEAEA;\n  font-size: 14px;\n  color: #000;\n  line-height: 20px;\n  text-align: center;\n  margin-bottom: 10px;\n}\n.vc-ps-previews {\n  width: 60px;\n}\n.vc-ps-previews__swatches {\n  border: 1px solid #B3B3B3;\n  border-bottom: 1px solid #F0F0F0;\n  margin-bottom: 2px;\n  margin-top: 1px;\n}\n.vc-ps-previews__pr-color {\n  height: 34px;\n  box-shadow: inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000;\n}\n.vc-ps-previews__label {\n  font-size: 14px;\n  color: #000;\n  text-align: center;\n}\n\n.vc-ps-fields {\n  padding-top: 5px;\n  padding-bottom: 9px;\n  width: 80px;\n  position: relative;\n}\n.vc-ps-fields .vc-input__input {\n  margin-left: 40%;\n  width: 40%;\n  height: 18px;\n  border: 1px solid #888888;\n  box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;\n  margin-bottom: 5px;\n  font-size: 13px;\n  padding-left: 3px;\n  margin-right: 10px;\n}\n.vc-ps-fields .vc-input__label, .vc-ps-fields .vc-input__desc {\n  top: 0;\n  text-transform: uppercase;\n  font-size: 13px;\n  height: 18px;\n  line-height: 22px;\n  position: absolute;\n}\n.vc-ps-fields .vc-input__label {\n  left: 0;\n  width: 34px;\n}\n.vc-ps-fields .vc-input__desc {\n  right: 0;\n  width: 0;\n}\n\n.vc-ps-fields__divider {\n  height: 5px;\n}\n\n.vc-ps-fields__hex .vc-input__input {\n  margin-left: 20%;\n  width: 80%;\n  height: 18px;\n  border: 1px solid #888888;\n  box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;\n  margin-bottom: 6px;\n  font-size: 13px;\n  padding-left: 3px;\n}\n.vc-ps-fields__hex .vc-input__label {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 14px;\n  text-transform: uppercase;\n  font-size: 13px;\n  height: 18px;\n  line-height: 22px;\n}\n</style>\n"
  },
  {
    "path": "src/components/saturation/index.js",
    "content": "import Saturation from './saturation.vue';\nimport { install } from '@/utils/compoent';\n\nSaturation.install = install;\nexport default Saturation;\n"
  },
  {
    "path": "src/components/saturation/saturation.vue",
    "content": "<script>\nimport { clamp } from '@/utils/utils';\n\nexport default {\n  name: 'Saturation',\n  props: {\n    value: Object,\n  },\n  computed: {\n    colors() {\n      return this.value;\n    },\n    bgColor() {\n      return `hsl(${this.colors.hsv.h}, 100%, 50%)`;\n    },\n    pointerTop() {\n      return `${(-(this.colors.hsv.v * 100) + 1) + 100}%`;\n    },\n    pointerLeft() {\n      return `${this.colors.hsv.s * 100}%`;\n    },\n  },\n  methods: {\n    handleChange(e, skip) {\n      !skip && e.preventDefault();\n      const { container } = this.$refs;\n      if (!container) {\n        // for some edge cases, container may not exist. see #220\n        return;\n      }\n      const containerWidth = container.clientWidth;\n      const containerHeight = container.clientHeight;\n\n      const xOffset = container.getBoundingClientRect().left + window.pageXOffset;\n      const yOffset = container.getBoundingClientRect().top + window.pageYOffset;\n      const pageX = e.pageX || (e.touches ? e.touches[0].pageX : 0);\n      const pageY = e.pageY || (e.touches ? e.touches[0].pageY : 0);\n      const left = clamp(pageX - xOffset, 0, containerWidth);\n      const top = clamp(pageY - yOffset, 0, containerHeight);\n      const saturation = left / containerWidth;\n      const bright = clamp(-(top / containerHeight) + 1, 0, 1);\n\n      this.onChange({\n        h: this.colors.hsv.h,\n        s: saturation,\n        v: bright,\n        a: this.colors.hsv.a,\n        source: 'hsva',\n      });\n    },\n    onChange(param) {\n      this.$emit('change', param);\n    },\n    handleMouseDown(e) {\n      // this.handleChange(e, true)\n      window.addEventListener('mousemove', this.handleChange);\n      window.addEventListener('mouseup', this.handleChange);\n      window.addEventListener('mouseup', this.handleMouseUp);\n    },\n    handleMouseUp(e) {\n      this.unbindEventListeners();\n    },\n    unbindEventListeners() {\n      window.removeEventListener('mousemove', this.handleChange);\n      window.removeEventListener('mouseup', this.handleChange);\n      window.removeEventListener('mouseup', this.handleMouseUp);\n    },\n  },\n};\n</script>\n\n<template>\n  <div\n    ref=\"container\"\n    class=\"vc-saturation\"\n    :style=\"{ background: bgColor }\"\n    @mousedown=\"handleMouseDown\"\n    @touchmove=\"handleChange\"\n    @touchstart=\"handleChange\"\n  >\n    <div class=\"vc-saturation--white\" />\n    <div class=\"vc-saturation--black\" />\n    <div class=\"vc-saturation-pointer\" :style=\"{ top: pointerTop, left: pointerLeft }\">\n      <div class=\"vc-saturation-circle\" />\n    </div>\n  </div>\n</template>\n\n<style>\n.vc-saturation,\n.vc-saturation--white,\n.vc-saturation--black {\n  cursor: pointer;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n\n.vc-saturation--white {\n  background: linear-gradient(to right, #fff, rgba(255,255,255,0));\n}\n.vc-saturation--black {\n  background: linear-gradient(to top, #000, rgba(0,0,0,0));\n}\n.vc-saturation-pointer {\n  cursor: pointer;\n  position: absolute;\n}\n.vc-saturation-circle {\n  cursor: head;\n  width: 4px;\n  height: 4px;\n  box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);\n  border-radius: 50%;\n  transform: translate(-2px, -2px);\n}\n</style>\n"
  },
  {
    "path": "src/components/sketch/index.js",
    "content": "import Sketch from './sketch.vue';\nimport { install } from '@/utils/compoent';\n\nSketch.install = install;\nexport default Sketch;\n"
  },
  {
    "path": "src/components/sketch/sketch.vue",
    "content": "<script>\nimport colorMixin from '@/mixin/color';\nimport editableInput from '@/components/editable-input';\nimport saturation from '@/components/saturation';\nimport hue from '@/components/hue';\nimport alpha from '@/components/alpha';\nimport checkboard from '@/components/checkboard';\n\nconst presetColors = [\n  '#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321',\n  '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2',\n  '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF',\n  'rgba(0,0,0,0)',\n];\n\nexport default {\n  name: 'Sketch',\n  components: {\n    Saturation: saturation,\n    Hue: hue,\n    Alpha: alpha,\n    EdIn: editableInput,\n    Checkboard: checkboard,\n  },\n  mixins: [colorMixin],\n  props: {\n    presetColors: {\n      type: Array,\n      default() {\n        return presetColors;\n      },\n    },\n    disableAlpha: {\n      type: Boolean,\n      default: false,\n    },\n    disableFields: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  computed: {\n    hex() {\n      let hex;\n      if (this.colors.a < 1)\n        hex = this.colors.hex8;\n      else\n        hex = this.colors.hex;\n\n      return hex.replace('#', '');\n    },\n    activeColor() {\n      const { rgba } = this.colors;\n      return `rgba(${[rgba.r, rgba.g, rgba.b, rgba.a].join(',')})`;\n    },\n  },\n  methods: {\n    handlePreset(c) {\n      this.colorChange(c);\n    },\n    childChange(data) {\n      this.colorChange(data);\n    },\n    inputChange(data) {\n      if (!data)\n        return;\n\n      if (data.hex) {\n        this.isValidHex(data.hex) && this.colorChange({\n          hex: data.hex,\n          source: 'hex',\n        });\n      }\n      else if (data.r || data.g || data.b || data.a) {\n        this.colorChange({\n          r: data.r || this.colors.rgba.r,\n          g: data.g || this.colors.rgba.g,\n          b: data.b || this.colors.rgba.b,\n          a: data.a || this.colors.rgba.a,\n          source: 'rgba',\n        });\n      }\n    },\n  },\n};\n</script>\n\n<template>\n  <div role=\"application\" aria-label=\"Sketch color picker\" class=\"vc-sketch\" :class=\"[disableAlpha ? 'vc-sketch__disable-alpha' : '']\">\n    <div class=\"vc-sketch-saturation-wrap\">\n      <Saturation :value=\"colors\" @change=\"childChange\" />\n    </div>\n    <div class=\"vc-sketch-controls\">\n      <div class=\"vc-sketch-sliders\">\n        <div class=\"vc-sketch-hue-wrap\">\n          <Hue :value=\"colors\" @change=\"childChange\" />\n        </div>\n        <div v-if=\"!disableAlpha\" class=\"vc-sketch-alpha-wrap\">\n          <Alpha :value=\"colors\" @change=\"childChange\" />\n        </div>\n      </div>\n      <div class=\"vc-sketch-color-wrap\">\n        <div :aria-label=\"`Current color is ${activeColor}`\" class=\"vc-sketch-active-color\" :style=\"{ background: activeColor }\" />\n        <Checkboard />\n      </div>\n    </div>\n    <div v-if=\"!disableFields\" class=\"vc-sketch-field\">\n      <!-- rgba -->\n      <div class=\"vc-sketch-field--double\">\n        <EdIn label=\"hex\" :value=\"hex\" @change=\"inputChange\" />\n      </div>\n      <div class=\"vc-sketch-field--single\">\n        <EdIn label=\"r\" :value=\"colors.rgba.r\" @change=\"inputChange\" />\n      </div>\n      <div class=\"vc-sketch-field--single\">\n        <EdIn label=\"g\" :value=\"colors.rgba.g\" @change=\"inputChange\" />\n      </div>\n      <div class=\"vc-sketch-field--single\">\n        <EdIn label=\"b\" :value=\"colors.rgba.b\" @change=\"inputChange\" />\n      </div>\n      <div v-if=\"!disableAlpha\" class=\"vc-sketch-field--single\">\n        <EdIn label=\"a\" :value=\"colors.a\" :arrow-offset=\"0.01\" :max=\"1\" @change=\"inputChange\" />\n      </div>\n    </div>\n    <div class=\"vc-sketch-presets\" role=\"group\" aria-label=\"A color preset, pick one to set as current color\">\n      <template v-for=\"c in presetColors\">\n        <div\n          v-if=\"!isTransparent(c)\"\n          :key=\"`!${c}`\"\n          class=\"vc-sketch-presets-color\"\n          :aria-label=\"`Color:${c}`\"\n          :style=\"{ background: c }\"\n          @click=\"handlePreset(c)\"\n        />\n        <div\n          v-else\n          :key=\"c\"\n          :aria-label=\"`Color:${c}`\"\n          class=\"vc-sketch-presets-color\"\n          @click=\"handlePreset(c)\"\n        >\n          <Checkboard />\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style>\n.vc-sketch {\n  position: relative;\n  width: 200px;\n  padding: 10px 10px 0;\n  box-sizing: initial;\n  background: #fff;\n  border-radius: 4px;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15), 0 8px 16px rgba(0, 0, 0, .15);\n}\n\n.vc-sketch-saturation-wrap {\n  width: 100%;\n  padding-bottom: 75%;\n  position: relative;\n  overflow: hidden;\n}\n\n.vc-sketch-controls {\n  display: flex;\n}\n\n.vc-sketch-sliders {\n  padding: 4px 0;\n  flex: 1;\n}\n\n.vc-sketch-sliders .vc-hue,\n.vc-sketch-sliders .vc-alpha-gradient {\n  border-radius: 2px;\n}\n\n.vc-sketch-hue-wrap {\n  position: relative;\n  height: 10px;\n}\n\n.vc-sketch-alpha-wrap {\n  position: relative;\n  height: 10px;\n  margin-top: 4px;\n  overflow: hidden;\n}\n\n.vc-sketch-color-wrap {\n  width: 24px;\n  height: 24px;\n  position: relative;\n  margin-top: 4px;\n  margin-left: 4px;\n  border-radius: 3px;\n}\n\n.vc-sketch-active-color {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 2px;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), inset 0 0 4px rgba(0, 0, 0, .25);\n  z-index: 2;\n}\n\n.vc-sketch-color-wrap .vc-checkerboard {\n  background-size: auto;\n}\n\n.vc-sketch-field {\n  display: flex;\n  padding-top: 4px;\n}\n\n.vc-sketch-field .vc-input__input {\n  width: 90%;\n  padding: 4px 0 3px 10%;\n  border: none;\n  box-shadow: inset 0 0 0 1px #ccc;\n  font-size: 10px;\n}\n\n.vc-sketch-field .vc-input__label {\n  display: block;\n  text-align: center;\n  font-size: 11px;\n  color: #222;\n  padding-top: 3px;\n  padding-bottom: 4px;\n  text-transform: capitalize;\n}\n\n.vc-sketch-field--single {\n  flex: 1;\n  padding-left: 6px;\n}\n\n.vc-sketch-field--double {\n  flex: 2;\n}\n\n.vc-sketch-presets {\n  margin-right: -10px;\n  margin-left: -10px;\n  padding-left: 10px;\n  padding-top: 10px;\n  border-top: 1px solid #eee;\n}\n\n.vc-sketch-presets-color {\n  border-radius: 3px;\n  overflow: hidden;\n  position: relative;\n  display: inline-block;\n  margin: 0 10px 10px 0;\n  vertical-align: top;\n  cursor: pointer;\n  width: 16px;\n  height: 16px;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);\n}\n\n.vc-sketch-presets-color .vc-checkerboard {\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);\n  border-radius: 3px;\n}\n\n.vc-sketch__disable-alpha .vc-sketch-color-wrap {\n  height: 10px;\n}\n</style>\n"
  },
  {
    "path": "src/components/slider/index.js",
    "content": "import Slider from './slider.vue';\nimport { install } from '@/utils/compoent';\n\nSlider.install = install;\nexport default Slider;\n"
  },
  {
    "path": "src/components/slider/slider.vue",
    "content": "<script>\nimport colorMixin from '@/mixin/color';\nimport hue from '@/components/hue';\n\nconst DEFAULT_SATURATION = 0.5;\n\nexport default {\n  name: 'Slider',\n  components: {\n    Hue: hue,\n  },\n  mixins: [colorMixin],\n  props: {\n    swatches: {\n      type: Array,\n      default() {\n        // also accepts: ['.80', '.65', '.50', '.35', '.20']\n        return [\n          { s: DEFAULT_SATURATION, l: 0.8 },\n          { s: DEFAULT_SATURATION, l: 0.65 },\n          { s: DEFAULT_SATURATION, l: 0.5 },\n          { s: DEFAULT_SATURATION, l: 0.35 },\n          { s: DEFAULT_SATURATION, l: 0.2 },\n        ];\n      },\n    },\n  },\n  computed: {\n    normalizedSwatches() {\n      const { swatches } = this;\n      return swatches.map((swatch) => {\n        // to be compatible with another data format ['.80', '.65', '.50', '.35', '.20']\n        if (typeof swatch !== 'object') {\n          return {\n            s: DEFAULT_SATURATION,\n            l: swatch,\n          };\n        }\n        return swatch;\n      });\n    },\n  },\n  methods: {\n    isActive(swatch, index) {\n      const { hsl } = this.colors;\n      if (hsl.l === 1 && swatch.l === 1)\n        return true;\n\n      if (hsl.l === 0 && swatch.l === 0)\n        return true;\n\n      return (\n        Math.abs(hsl.l - swatch.l) < 0.01 && Math.abs(hsl.s - swatch.s) < 0.01\n      );\n    },\n    hueChange(data) {\n      this.colorChange(data);\n    },\n    handleSwClick(index, swatch) {\n      this.colorChange({\n        h: this.colors.hsl.h,\n        s: swatch.s,\n        l: swatch.l,\n        source: 'hsl',\n      });\n    },\n  },\n};\n</script>\n\n<template>\n  <div role=\"application\" aria-label=\"Slider color picker\" class=\"vc-slider\">\n    <div class=\"vc-slider-hue-warp\">\n      <Hue :value=\"colors\" @change=\"hueChange\" />\n    </div>\n    <div class=\"vc-slider-swatches\" role=\"group\">\n      <div\n        v-for=\"(swatch, index) in normalizedSwatches\"\n        :key=\"index\"\n        class=\"vc-slider-swatch\"\n        :data-index=\"index\"\n        :aria-label=\"`color:${colors.hex}`\"\n        role=\"button\"\n        @click=\"handleSwClick(index, swatch)\"\n      >\n        <div\n          class=\"vc-slider-swatch-picker\"\n          :class=\"{ 'vc-slider-swatch-picker--active': isActive(swatch, index), 'vc-slider-swatch-picker--white': swatch.l === 1 }\"\n          :style=\"{ background: `hsl(${colors.hsl.h}, ${swatch.s * 100}%, ${swatch.l * 100}%)` }\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n.vc-slider {\n  position: relative;\n  width: 410px;\n}\n.vc-slider-hue-warp {\n  height: 12px;\n  position: relative;\n}\n.vc-slider-hue-warp .vc-hue-picker {\n  width: 14px;\n  height: 14px;\n  border-radius: 6px;\n  transform: translate(-7px, -2px);\n  background-color: rgb(248, 248, 248);\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);\n}\n.vc-slider-swatches {\n  display: flex;\n  margin-top: 20px;\n}\n.vc-slider-swatch {\n  margin-right: 1px;\n  flex: 1;\n  width: 20%;\n}\n.vc-slider-swatch:first-child {\n  margin-right: 1px;\n}\n.vc-slider-swatch:first-child .vc-slider-swatch-picker {\n  border-radius: 2px 0px 0px 2px;\n}\n.vc-slider-swatch:last-child {\n  margin-right: 0;\n}\n.vc-slider-swatch:last-child .vc-slider-swatch-picker {\n  border-radius: 0px 2px 2px 0px;\n}\n.vc-slider-swatch-picker {\n  cursor: pointer;\n  height: 12px;\n}\n.vc-slider-swatch:nth-child(n) .vc-slider-swatch-picker.vc-slider-swatch-picker--active {\n  transform: scaleY(1.8);\n  border-radius: 3.6px/2px;\n}\n.vc-slider-swatch-picker--white {\n  box-shadow: inset 0 0 0 1px #ddd;\n}\n.vc-slider-swatch-picker--active.vc-slider-swatch-picker--white {\n  box-shadow: inset 0 0 0 0.6px #ddd;\n}\n</style>\n"
  },
  {
    "path": "src/components/swatches/index.js",
    "content": "import Swatches from './swatches.vue';\nimport { install } from '@/utils/compoent';\n\nSwatches.install = install;\nexport default Swatches;\n"
  },
  {
    "path": "src/components/swatches/swatches.vue",
    "content": "<script>\nimport material from 'material-colors';\nimport colorMixin from '@/mixin/color';\n\nconst colorMap = [\n  'red', 'pink', 'purple', 'deepPurple',\n  'indigo', 'blue', 'lightBlue', 'cyan',\n  'teal', 'green', 'lightGreen', 'lime',\n  'yellow', 'amber', 'orange', 'deepOrange',\n  'brown', 'blueGrey', 'black',\n];\nconst colorLevel = ['900', '700', '500', '300', '100'];\nconst defaultColors = (() => {\n  const colors = [];\n  colorMap.forEach((type) => {\n    let typeColor = [];\n    if (type.toLowerCase() === 'black' || type.toLowerCase() === 'white') {\n      typeColor = typeColor.concat(['#000000', '#FFFFFF']);\n    }\n    else {\n      colorLevel.forEach((level) => {\n        const color = material[type][level];\n        typeColor.push(color.toUpperCase());\n      });\n    }\n    colors.push(typeColor);\n  });\n  return colors;\n})();\n\nexport default {\n  name: 'Swatches',\n  mixins: [colorMixin],\n  props: {\n    palette: {\n      type: Array,\n      default() {\n        return defaultColors;\n      },\n    },\n  },\n  computed: {\n    pick() {\n      return this.colors.hex;\n    },\n  },\n  methods: {\n    equal(color) {\n      return color.toLowerCase() === this.colors.hex.toLowerCase();\n    },\n    handlerClick(c) {\n      this.colorChange({\n        hex: c,\n        source: 'hex',\n      });\n    },\n  },\n\n};\n</script>\n\n<template>\n  <div role=\"application\" aria-label=\"Swatches color picker\" class=\"vc-swatches\" :data-pick=\"pick\">\n    <div class=\"vc-swatches-box\" role=\"listbox\">\n      <div v-for=\"(group, $idx) in palette\" :key=\"$idx\" class=\"vc-swatches-color-group\">\n        <div\n          v-for=\"c in group\" :key=\"c\"\n          class=\"vc-swatches-color-it\"\n          :class=\"[{ 'vc-swatches-color--white': c === '#FFFFFF' }]\"\n          role=\"option\"\n          :aria-label=\"`Color:${c}`\"\n          :aria-selected=\"equal(c)\"\n          :data-color=\"c\"\n          :style=\"{ background: c }\"\n          tabindex=\"0\"\n          @keyup.enter=\"handlerClick(c)\"\n          @click=\"handlerClick(c)\"\n        >\n          <div v-show=\"equal(c)\" class=\"vc-swatches-pick\">\n            <svg style=\"width: 24px; height:24px;\" viewBox=\"0 0 24 24\">\n              <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n            </svg>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n.vc-swatches {\n  width: 320px;\n  height: 240px;\n  overflow-y: scroll;\n  background-color: #fff;\n  box-shadow: 0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);\n }\n.vc-swatches-box {\n  padding: 16px 0 6px 16px;\n  overflow: hidden;\n}\n.vc-swatches-color-group {\n  padding-bottom: 10px;\n  width: 40px;\n  float: left;\n  margin-right: 10px;\n}\n.vc-swatches-color-it {\n  box-sizing: border-box;\n  width: 40px;\n  height: 24px;\n  cursor: pointer;\n  background: #880e4f;\n  margin-bottom: 1px;\n  overflow: hidden;\n  -ms-border-radius: 2px 2px 0 0;\n  -moz-border-radius: 2px 2px 0 0;\n  -o-border-radius: 2px 2px 0 0;\n  -webkit-border-radius: 2px 2px 0 0;\n  border-radius: 2px 2px 0 0;\n}\n.vc-swatches-color--white {\n  border: 1px solid #DDD;\n}\n.vc-swatches-pick {\n  fill: rgb(255, 255, 255);\n  margin-left: 8px;\n  display: block;\n}\n.vc-swatches-color--white .vc-swatches-pick {\n  fill: rgb(51, 51, 51);\n}\n</style>\n"
  },
  {
    "path": "src/components/twitter/index.js",
    "content": "import Twitter from './twitter.vue';\nimport { install } from '@/utils/compoent';\n\nTwitter.install = install;\nexport default Twitter;\n"
  },
  {
    "path": "src/components/twitter/twitter.vue",
    "content": "<script>\nimport editableInput from '@/components/editable-input';\nimport colorMixin from '@/mixin/color';\n\nconst defaultColors = [\n  '#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3',\n  '#EB144C', '#F78DA7', '#9900EF',\n];\n\nexport default {\n  name: 'Twitter',\n  components: {\n    EditableInput: editableInput,\n  },\n  mixins: [colorMixin],\n  props: {\n    width: {\n      type: [String, Number],\n      default: 276,\n    },\n    defaultColors: {\n      type: Array,\n      default() {\n        return defaultColors;\n      },\n    },\n    triangle: {\n      default: 'top-left',\n      validator(value) {\n        return ['hide', 'top-left', 'top-right'].includes(value);\n      },\n    },\n  },\n  computed: {\n    hsv() {\n      const { hsv } = this.colors;\n      return {\n        h: hsv.h.toFixed(),\n        s: (hsv.s * 100).toFixed(),\n        v: (hsv.v * 100).toFixed(),\n      };\n    },\n    hex() {\n      const { hex } = this.colors;\n      return hex && hex.replace('#', '');\n    },\n  },\n  methods: {\n    equal(color) {\n      return color.toLowerCase() === this.colors.hex.toLowerCase();\n    },\n    handlerClick(color) {\n      this.colorChange({\n        hex: color,\n        source: 'hex',\n      });\n    },\n    inputChange(data) {\n      if (!data)\n        return;\n\n      if (data['#']) {\n        this.isValidHex(data['#']) && this.colorChange({\n          hex: data['#'],\n          source: 'hex',\n        });\n      }\n      else if (data.r || data.g || data.b || data.a) {\n        this.colorChange({\n          r: data.r || this.colors.rgba.r,\n          g: data.g || this.colors.rgba.g,\n          b: data.b || this.colors.rgba.b,\n          a: data.a || this.colors.rgba.a,\n          source: 'rgba',\n        });\n      }\n      else if (data.h || data.s || data.v) {\n        this.colorChange({\n          h: data.h || this.colors.hsv.h,\n          s: (data.s / 100) || this.colors.hsv.s,\n          v: (data.v / 100) || this.colors.hsv.v,\n          source: 'hsv',\n        });\n      }\n    },\n  },\n};\n</script>\n\n<template>\n  <div\n    class=\"vc-twitter\"\n    :class=\"{\n      'vc-twitter-hide-triangle ': triangle === 'hide',\n      'vc-twitter-top-left-triangle ': triangle === 'top-left',\n      'vc-twitter-top-right-triangle ': triangle === 'top-right',\n    }\"\n    :style=\"{\n      width: typeof width === 'number' ? `${width}px` : width,\n    }\"\n  >\n    <div class=\"vc-twitter-triangle-shadow\" />\n    <div class=\"vc-twitter-triangle\" />\n\n    <div class=\"vc-twitter-body\">\n      <span\n        v-for=\"(color, index) in defaultColors\"\n        :key=\"index\"\n        class=\"vc-twitter-swatch\"\n        :style=\"{\n          background: color,\n          boxShadow: `0 0 4px ${equal(color) ? color : 'transparent'}`,\n        }\"\n        role=\"button\"\n        tabindex=\"0\"\n        @keyup.enter=\"handlerClick(color)\"\n        @click=\"handlerClick(color)\"\n      />\n      <div class=\"vc-twitter-hash\">\n        #\n      </div>\n      <EditableInput label=\"#\" :value=\"hex\" @change=\"inputChange\" />\n      <div class=\"vc-twitter-clear\" />\n    </div>\n  </div>\n</template>\n\n<style>\n.vc-twitter {\nbackground: #fff;\nborder: 0 solid rgba(0,0,0,0.25);\nbox-shadow: 0 1px 4px rgba(0,0,0,0.25);\nborder-radius: 4px;\nposition: relative;\n}\n.vc-twitter-triangle {\nwidth: 0px;\nheight: 0px;\nborder-style: solid;\nborder-width: 0 9px 10px 9px;\nborder-color: transparent transparent #fff transparent;\nposition: absolute;\n}\n.vc-twitter-triangle-shadow {\nwidth: 0px;\nheight: 0px;\nborder-style: solid;\nborder-width: 0 9px 10px 9px;\nborder-color: transparent transparent rgba(0, 0, 0, .1) transparent;\nposition: absolute;\n}\n.vc-twitter-body {\npadding: 15px 9px 9px 15px;\n}\n.vc-twitter .vc-editable-input {\nposition: relative;\n}\n.vc-twitter .vc-editable-input input {\nwidth: 100px;\nfont-size: 14px;\ncolor: #666;\nborder: 0px;\noutline: none;\nheight: 28px;\nbox-shadow: inset 0 0 0 1px #F0F0F0;\nbox-sizing: content-box;\nborder-radius: 0 4px 4px 0;\nfloat: left;\npadding: 1px;\npadding-left: 8px;\n}\n.vc-twitter .vc-editable-input span {\ndisplay: none;\n}\n.vc-twitter-hash {\nbackground: #F0F0F0;\nheight: 30px;\nwidth: 30px;\nborder-radius: 4px 0 0 4px;\nfloat: left;\ncolor: #98A1A4;\ndisplay: flex;\nalign-items: center;\njustify-content: center;\n}\n.vc-twitter-swatch {\nwidth: 30px;\nheight: 30px;\nfloat: left;\nborder-radius: 4px;\nmargin: 0 6px 6px 0;\ncursor: pointer;\nposition: relative;\n}\n.vc-twitter-clear {\nclear: both;\n}\n.vc-twitter-hide-triangle .vc-twitter-triangle {\ndisplay: none;\n}\n.vc-twitter-hide-triangle .vc-twitter-triangle-shadow {\ndisplay: none;\n}\n.vc-twitter-top-left-triangle .vc-twitter-triangle{\ntop: -10px;\nleft: 12px;\n}\n.vc-twitter-top-left-triangle .vc-twitter-triangle-shadow{\ntop: -11px;\nleft: 12px;\n}\n.vc-twitter-top-right-triangle .vc-twitter-triangle{\ntop: -10px;\nright: 12px;\n}\n.vc-twitter-top-right-triangle .vc-twitter-triangle-shadow{\ntop: -11px;\nright: 12px;\n}\n</style>\n"
  },
  {
    "path": "src/components.js",
    "content": "/* Do not modify the automatically generated code */\nimport Alpha from '@/components/alpha';\nimport Checkboard from '@/components/checkboard';\nimport Chrome from '@/components/chrome';\nimport Compact from '@/components/compact';\nimport EditableInput from '@/components/editable-input';\nimport Grayscale from '@/components/grayscale';\nimport Hue from '@/components/hue';\nimport Material from '@/components/material';\nimport Photoshop from '@/components/photoshop';\nimport Saturation from '@/components/saturation';\nimport Sketch from '@/components/sketch';\nimport Slider from '@/components/slider';\nimport Swatches from '@/components/swatches';\nimport Twitter from '@/components/twitter';\n\nconst components = [\n  Alpha,\n  Checkboard,\n  Chrome,\n  Compact,\n  EditableInput,\n  Grayscale,\n  Hue,\n  Material,\n  Photoshop,\n  Saturation,\n  Sketch,\n  Slider,\n  Swatches,\n  Twitter,\n];\n\nexport {\n  components,\n  Alpha,\n  Checkboard,\n  Chrome,\n  Compact,\n  EditableInput,\n  Grayscale,\n  Hue,\n  Material,\n  Photoshop,\n  Saturation,\n  Sketch,\n  Slider,\n  Swatches,\n  Twitter,\n};\n"
  },
  {
    "path": "src/create.js",
    "content": "import { prefix, size } from '@/defaultConfig';\n\nfunction create(params = {}) {\n  return (app) => {\n    const { components, componentPrefix = prefix, componentSize = size } = params;\n\n    app.config.globalProperties.$VUI = {\n      size: componentSize,\n      prefix: componentPrefix,\n    };\n    (Array.isArray(components) ? components : Object.values(components)).forEach((component) => {\n      app.component(`${componentPrefix}${component.name}`, component);\n    });\n  };\n}\n\nexport default create;\n"
  },
  {
    "path": "src/defaultConfig.js",
    "content": "const name = 'VueColor';\n// 自定义组件前缀\nconst prefix = '';\nconst cssPrefix = '';\nconst size = 'medium';\n\nexport {\n  name,\n  prefix,\n  size,\n  cssPrefix,\n};\n"
  },
  {
    "path": "src/index.js",
    "content": "import preset from '@/preset';\nimport create from '@/create';\nimport ColorMixin from '@/mixin/color';\n\nexport * from '@/components';\nexport {\n  preset as default,\n  preset as install,\n  create,\n  ColorMixin,\n};\n"
  },
  {
    "path": "src/mixin/color.js",
    "content": "import { TinyColor } from '@ctrl/tinycolor';\n\nfunction tinycolor(...args) {\n  return new TinyColor(...args);\n}\n\nfunction _colorChange(data, oldHue) {\n  const alpha = data && data.a;\n  let color;\n\n  // hsl is better than hex between conversions\n  if (data && data.hsl)\n    color = tinycolor(data.hsl);\n  else if (data && data.hex && data.hex.length > 0)\n    color = tinycolor(data.hex);\n  else if (data && data.hsv)\n    color = tinycolor(data.hsv);\n  else if (data && data.rgba)\n    color = tinycolor(data.rgba);\n  else if (data && data.rgb)\n    color = tinycolor(data.rgb);\n  else\n    color = tinycolor(data);\n\n  if (color && (color._a === undefined || color._a === null))\n    color.setAlpha(alpha || color.getAlpha());\n\n  const hsl = color.toHsl();\n  const hsv = color.toHsv();\n\n  if (hsl.s === 0)\n    hsv.h = hsl.h = data.h || (data.hsl && data.hsl.h) || oldHue || 0;\n\n  /* --- comment this block to fix #109, may cause #25 again --- */\n  // when the hsv.v is less than 0.0164 (base on test)\n  // because of possible loss of precision\n  // the result of hue and saturation would be miscalculated\n  if (hsv.v < 0.0164) {\n    hsv.h = data.h || (data.hsv && data.hsv.h) || 0;\n    hsv.s = data.s || (data.hsv && data.hsv.s) || 0;\n  }\n\n  if (hsl.l < 0.01) {\n    hsl.h = data.h || (data.hsl && data.hsl.h) || 0;\n    hsl.s = data.s || (data.hsl && data.hsl.s) || 0;\n  }\n  /* ------ */\n\n  return {\n    hsl,\n    hex: color.toHexString().toUpperCase(),\n    hex8: color.toHex8String().toUpperCase(),\n    rgba: color.toRgb(),\n    hsv,\n    oldHue: data.h || oldHue || hsl.h,\n    source: data.source,\n    a: color.getAlpha(),\n  };\n}\n\nexport default {\n  model: {\n    prop: 'modelValue',\n    event: 'update:modelValue',\n  },\n  props: ['modelValue'],\n  data() {\n    return {\n      val: _colorChange(this.modelValue),\n    };\n  },\n  computed: {\n    colors: {\n      get() {\n        return this.val;\n      },\n      set(newVal) {\n        this.val = newVal;\n        this.$emit('update:modelValue', newVal);\n      },\n    },\n  },\n  watch: {\n    modelValue(newVal) {\n      this.val = _colorChange(newVal);\n    },\n  },\n  methods: {\n    colorChange(data, oldHue) {\n      this.oldHue = this.colors.hsl.h;\n      this.colors = _colorChange(data, oldHue || this.oldHue);\n    },\n    isValidHex(hex) {\n      return tinycolor(hex).isValid;\n    },\n    simpleCheckForValidColor(data) {\n      const keysToCheck = ['r', 'g', 'b', 'a', 'h', 's', 'l', 'v'];\n      let checked = 0;\n      let passed = 0;\n\n      for (let i = 0; i < keysToCheck.length; i++) {\n        const letter = keysToCheck[i];\n        if (data[letter]) {\n          checked++;\n          if (!isNaN(data[letter]))\n            passed++;\n        }\n      }\n\n      if (checked === passed)\n        return data;\n    },\n    paletteUpperCase(palette) {\n      return palette.map(c => c.toUpperCase());\n    },\n    isTransparent(color) {\n      return tinycolor(color).getAlpha() === 0;\n    },\n  },\n};\n"
  },
  {
    "path": "src/preset.js",
    "content": "import create from '@/create';\nimport { components } from '@/components';\n\nconst preset = create({\n  components,\n});\n\nexport default preset;\n"
  },
  {
    "path": "src/utils/compoent.js",
    "content": "import { prefix } from '@/defaultConfig';\n\nexport const install = function (app, options) {\n  const { componentPrefix = prefix } = options || {};\n  app.component(`${componentPrefix}${this.name}`, this);\n};\n"
  },
  {
    "path": "src/utils/utils.js",
    "content": "export function clamp(value, min, max) {\n  return min < max\n    ? (value < min ? min : value > max ? max : value)\n    : (value < max ? max : value > min ? min : value);\n}\n"
  },
  {
    "path": "types.d.ts",
    "content": "declare module '@ckpack/vue-color' {\n    import type { DefineComponent } from 'vue';\n    import type { ColorInput, HSV, HSL, RGBA } from '@ctrl/tinycolor';\n\n    interface Payload {\n        a: number\n        hex: string\n        hex8: string\n        hsl: HSL\n        hsv: HSV\n        oldHue: number\n        rgba: RGBA\n        source: 'rgba' | 'hsl' | 'hex' | 'hsv' | 'hsva'\n    }\n\n    interface Props {\n        modelValue?: ColorInput\n        'onUpdate:modelValue'?: (data: Payload) => void\n    }\n\n    interface Context {\n        colorChange: Function;\n        isValidHex: Function\n        simpleCheckForValidColor: Function\n        paletteUpperCase: Function\n        isTransparent: Function\n    }\n\n    const Chrome: DefineComponent<Props & {\n        disableAlpha?: boolean\n        disableFields?: boolean\n    }, Context>;\n\n    const Compact: DefineComponent<Props & {\n        palette?: ColorInput[]\n    }, Context>;\n\n    const Grayscale: DefineComponent<Props & {\n        palette?: ColorInput[]\n    }, Context>;\n\n    const Material: DefineComponent<Props & {\n        value?: 'horizontal' | 'vertical'\n    }, Context>;\n\n    const Photoshop: DefineComponent<Props & {\n        head?: string\n        disableFields?: boolean\n        hasResetButton?: boolean\n        acceptLabel?: string\n        cancelLabel?: string\n        resetLabel?: string\n        newLabel?: string\n        currentLabel?: string\n    }, Context>;\n\n    const Sketch: DefineComponent<Props & {\n        presetColors?: ColorInput[]\n        disableAlpha?: boolean\n        disableFields?: boolean\n    }, Context>;\n\n    const Slider: DefineComponent<Props & {\n        swatches?: string[] | { s: number, l: number }[]\n    }, Context>;\n\n    const Swatches: DefineComponent<Props & {\n        palette?: ColorInput[]\n    }, Context>;\n\n    const Twitter: DefineComponent<Props & {\n        width?: string | number\n        defaultColors?: ColorInput[]\n        triangle?: 'hide' | 'top-left' | 'top-right'\n    }, Context>;\n}"
  }
]