Repository: ckpack/vue-color
Branch: main
Commit: 053f05f462d1
Files: 59
Total size: 84.3 KB

Directory structure:
gitextract_w8xtql1h/

├── .eslintignore
├── .eslintrc.cjs
├── .gitattributes
├── .github/
│   └── workflows/
│       └── npm-publish.yml
├── .gitignore
├── .husky/
│   ├── .gitignore
│   ├── commit-msg
│   └── pre-commit
├── CHANGELOG.md
├── LICENSE
├── README.md
├── build/
│   ├── build.config.js
│   ├── build.dist.js
│   └── build.libs.js
├── commitlint.config.cjs
├── dev/
│   ├── serve.js
│   └── serve.vue
├── example/
│   └── index.html
├── jsconfig.json
├── package.json
├── scripts/
│   ├── gen-compoents.js
│   └── gen.js
├── src/
│   ├── components/
│   │   ├── alpha/
│   │   │   ├── alpha.vue
│   │   │   └── index.js
│   │   ├── checkboard/
│   │   │   ├── checkboard.vue
│   │   │   └── index.js
│   │   ├── chrome/
│   │   │   ├── chrome.vue
│   │   │   └── index.js
│   │   ├── compact/
│   │   │   ├── compact.vue
│   │   │   └── index.js
│   │   ├── editable-input/
│   │   │   ├── editable-input.vue
│   │   │   └── index.js
│   │   ├── grayscale/
│   │   │   ├── grayscale.vue
│   │   │   └── index.js
│   │   ├── hue/
│   │   │   ├── hue.vue
│   │   │   └── index.js
│   │   ├── material/
│   │   │   ├── index.js
│   │   │   └── material.vue
│   │   ├── photoshop/
│   │   │   ├── index.js
│   │   │   └── photoshop.vue
│   │   ├── saturation/
│   │   │   ├── index.js
│   │   │   └── saturation.vue
│   │   ├── sketch/
│   │   │   ├── index.js
│   │   │   └── sketch.vue
│   │   ├── slider/
│   │   │   ├── index.js
│   │   │   └── slider.vue
│   │   ├── swatches/
│   │   │   ├── index.js
│   │   │   └── swatches.vue
│   │   └── twitter/
│   │       ├── index.js
│   │       └── twitter.vue
│   ├── components.js
│   ├── create.js
│   ├── defaultConfig.js
│   ├── index.js
│   ├── mixin/
│   │   └── color.js
│   ├── preset.js
│   └── utils/
│       ├── compoent.js
│       └── utils.js
└── types.d.ts

================================================
FILE CONTENTS
================================================

================================================
FILE: .eslintignore
================================================
dist/
libs/
website/
node_modules/

================================================
FILE: .eslintrc.cjs
================================================
module.exports = {
  extends: [
    '@antfu',
  ],
  rules: {
    'semi': 'off',
    '@typescript-eslint/semi': ['error', 'always'],
    'no-console': 'off',
    'vue/require-explicit-emits': 'off',
    'unused-imports/no-unused-vars': 'off',
  },
};


================================================
FILE: .gitattributes
================================================
# Auto detect text files and perform LF normalization
* text=auto


================================================
FILE: .github/workflows/npm-publish.yml
================================================
# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages

name: Node.js Package

on:
  push:
    tags:
      - '*'

jobs:

  publish-npm:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 18
          registry-url: https://registry.npmjs.org/
      - run: npm install --force
      - run: npm run build
      - run: npm publish --access=public
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
      - name: deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./example


================================================
FILE: .gitignore
================================================
node_modules/
dist/
libs/
website/



================================================
FILE: .husky/.gitignore
================================================
_


================================================
FILE: .husky/commit-msg
================================================
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit "$1"


================================================
FILE: .husky/pre-commit
================================================
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged


================================================
FILE: CHANGELOG.md
================================================
# Changelog

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

## [1.6.0](https://github.com/ckpack/vue-color/compare/v1.5.2...v1.6.0) (2024-07-19)


### Features

* exported ColorMixin ([dbbe373](https://github.com/ckpack/vue-color/commit/dbbe373cfcc901f5e9a72cae2f6758bcc16dad53))

### [1.5.2](https://github.com/ckpack/vue-color/compare/v1.5.0...v1.5.2) (2024-07-18)

### [1.5.1](https://github.com/ckpack/vue-color/compare/v1.5.0...v1.5.1) (2024-07-18)

### Features
Added `MIT` license to the `package.json`

## [1.5.0](https://github.com/ckpack/vue-color/compare/v1.4.1...v1.5.0) (2023-06-15)


### Features

* 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))

### [1.4.1](https://github.com/ckpack/vue-color/compare/v1.4.0...v1.4.1) (2023-02-16)


### Bug Fixes

* update package.json ([aec3072](https://github.com/ckpack/vue-color/commit/aec30723de33d9366f3c1d1cd6cc18a18eb44b0b))

## [1.4.0](https://github.com/ckpack/vue-color/compare/v1.3.0...v1.4.0) (2023-02-16)


### Features

* add Type declarations ([213b3e2](https://github.com/ckpack/vue-color/commit/213b3e20451f4f177ec16ab3c7d0356a46cbcd61))

## [1.3.0](https://github.com/ckpack/vue-color/compare/v1.2.4...v1.3.0) (2022-11-30)


### Features

* add keyboard navigation support for swatches and twitter ([a0ff7aa](https://github.com/ckpack/vue-color/commit/a0ff7aa7cc0afe450e01416250cd61d512093dd2))

### [1.2.4](https://github.com/ckpack/vue-color/compare/v1.2.3...v1.2.4) (2022-10-17)


### Bug Fixes

* update github_token ([2c78f05](https://github.com/ckpack/vue-color/commit/2c78f055498aba5815625bf677f3b76a9fc37299))

### [1.2.3](https://github.com/ckpack/vue-color/compare/v1.2.2...v1.2.3) (2022-10-17)


### Bug Fixes

* change yarn to npm ([2ef2928](https://github.com/ckpack/vue-color/commit/2ef292831439c407de8d2218a0df0c6f3c74dd23))

### [1.2.2](https://github.com/ckpack/vue-color/compare/v1.2.1...v1.2.2) (2022-10-17)


### Bug Fixes

* upgrade node version ([2ecf716](https://github.com/ckpack/vue-color/commit/2ecf716ea1995c4af524bb7df7149464dfb20875))

### [1.2.1](https://github.com/ckpack/vue-color/compare/v1.2.0...v1.2.1) (2022-10-17)

## [1.2.0](https://github.com/ckpack/vue-color/compare/v1.1.9...v1.2.0) (2022-07-11)


### Features

* explicitly export the type as module ([5fbf273](https://github.com/ckpack/vue-color/commit/5fbf27390cb3cf7be5fedc6e8dcda3c9e9317636))

### [1.1.9](https://github.com/ckpack/vue-color/compare/v1.1.8...v1.1.9) (2022-04-12)


### Bug Fixes

* sketch presetColors alpha not work ([93ec741](https://github.com/ckpack/vue-color/commit/93ec7413e6785e19b31e5c3760001cbd3e5be91c))

### [1.1.8](https://github.com/ckpack/vue-color/compare/v1.1.7...v1.1.8) (2022-02-22)


### Bug Fixes

* tinycolor(...).isValid is not a function ([7831c54](https://github.com/ckpack/vue-color/commit/7831c54654a702b587f03007a6d4539287cdb91d))

### [1.1.7](https://github.com/ckpack/vue-color/compare/v1.1.6...v1.1.7) (2022-02-16)


### Bug Fixes

* replace CommonJS package ([6f1292f](https://github.com/ckpack/vue-color/commit/6f1292f3fe95fee68aff30e3ea45e5799247b2a1))

### [1.1.6](https://github.com/ckpack/vue-color/compare/v1.1.5...v1.1.6) (2022-02-14)


### Bug Fixes

* use replace tinycolor2 with @ctrl/tinycolor ([09bb612](https://github.com/ckpack/vue-color/commit/09bb612c50467fda655e8b6b36c16d7b120263d6))

### [1.1.5](https://github.com/ckpack/vue-color/compare/v1.1.4...v1.1.5) (2021-12-08)


### Bug Fixes

* esm result exclude vue module ([d61b120](https://github.com/ckpack/vue-color/commit/d61b120542fbf531b22a73dbfe814b99bc4ad828))
* **hue:** emit color on mouseup just like saturation does ([9d8c798](https://github.com/ckpack/vue-color/commit/9d8c798728dfd985dac3f5ef8331adadf5de929c))

### [1.1.4](https://github.com/ckpack/vue-color/compare/v1.1.3...v1.1.4) (2021-10-21)


### Bug Fixes

* repair production mode component import error ([c6aa16f](https://github.com/ckpack/vue-color/commit/c6aa16f638a72beffdf493f531cd85da85ecdfa5))

### [1.1.3](https://github.com/ckpack/vue-color/compare/v1.1.2...v1.1.3) (2021-10-15)

### [1.1.2](https://github.com/ckpack/vue-color/compare/v1.1.1...v1.1.2) (2021-10-15)


### Bug Fixes

* update peerDependencies vue version ([22d57bf](https://github.com/ckpack/vue-color/commit/22d57bf7a5fc789a357dd7f2c43870a15db48d38))

### [1.1.1](https://github.com/ckpack/vue-color/compare/v1.1.0...v1.1.1) (2021-10-14)


### Bug Fixes

* excluded dependencies module when build libs ([6b0d860](https://github.com/ckpack/vue-color/commit/6b0d860c2b2f6d07f31c195b4a93c1e7a58fc941))
* update dev serve.js ([915233d](https://github.com/ckpack/vue-color/commit/915233dc2c6602aac00d7acbf4142dfb2b2f9112))

## [1.1.0](https://github.com/ckpack/vue-color/compare/v1.0.1...v1.1.0) (2021-09-09)


### Features

* add standard-version gen changelog ([43cb18b](https://github.com/ckpack/vue-color/commit/43cb18b00b5a9f3d4a2921db6b5dcb98b47e81a8))
* pre-commit add lint-staged ([d0e7ddb](https://github.com/ckpack/vue-color/commit/d0e7ddbe7dd0ed29ce13ba23af8c766df33798cb))
* pre-commit add lint-staged ([2c63fff](https://github.com/ckpack/vue-color/commit/2c63fffcb15eefc278e3c6b2ab54622238664730))
* pre-commit add lint-staged ([31602b5](https://github.com/ckpack/vue-color/commit/31602b5d06c561392115b3d6b43f91aca9449b34))

# [1.0.0] - 2021-08-26

## Feature
Now we can import on Demand (Tree Shaking)


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2021 chenkai0520

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
# vue-color 

> Modified based on [https://github.com/xiaokaike/vue-color](https://github.com/xiaokaike/vue-color) to support vue3.0

🎨 Vue Color Pickers for Sketch, Photoshop, Chrome & more

![image](https://user-images.githubusercontent.com/30174970/114983369-1e5aa380-9ec3-11eb-9e77-b122d19f1ebd.png)

## [Demo](https://ckpack.github.io/vue-color)

## Use case

#### On demand

We can import components we actually need, making the project smaller than otherwise.

##### Import Directly

```html
<template>
  <Sketch v-model="colors"/>
</template>
<script setup>
import { ref } from 'vue';
import { Sketch } from '@ckpack/vue-color';

const colors = ref('#194D33A8'); // etc: { h: 150, s: 0.66, v: 0.30 }, { r: 255, g: 0, b: 0 }, '#194d33' 
</script>
```

##### Install on Demand Globally

```js
import { createApp } from 'vue';
import App from '@/App.vue';
import { Sketch, create } from '@ckpack/vue-color';

const app = createApp(App);
app.use(create({
  components: [Sketch],
}));
app.mount('#app');
```

#### Fully import

```js
import { createApp } from 'vue';
import App from '@/App.vue';
import VueColor from '@ckpack/vue-color';

const app = createApp(App);

app.use(VueColor);
app.mount('#app');
```

## [CHANGELOG](/CHANGELOG.md)

## License

vue-color is licensed under [The MIT License](LICENSE).


================================================
FILE: build/build.config.js
================================================
import path from 'path';

import resolve from '@rollup/plugin-node-resolve';
import alias from '@rollup/plugin-alias';
import vue from 'rollup-plugin-vue';
import terser from '@rollup/plugin-terser';
import postcss from 'rollup-plugin-postcss';
import commonjs from '@rollup/plugin-commonjs';

import prefixer from 'postcss-prefixer';

import { cssPrefix, name } from '../src/defaultConfig.js';
import packageJson from '../package.json' assert { type: 'json' };

const { dependencies } = packageJson;
const projectRoot = path.resolve(__dirname, '../src');
const globals = {
  // Provide global variable names to replace your external imports, eg. jquery: '$'
  vue: 'Vue',
};

const postcssPlugin = (options = {}) => {
  const minimize = options.minimize !== false;
  const exclude = options.exclude || /node_modules/;
  const include = options.include || /(?<!&module=.*)\.css$/;
  return postcss({
    minimize,
    plugins: [prefixer({
      prefix: cssPrefix,
    })],
    exclude,
    include,
    extract: options.extract,
  });
};

const plugins = {
  alias: alias({
    entries: [
      {
        find: '@',
        replacement: projectRoot,
      },
    ],
  }),
  resolve: resolve(),
  terser: terser(),
  vue: vue({
    include: /\.vue$/,
    target: 'browser',
    css: false,
    exposeFilename: false,
    preprocessStyles: false,
    cssModulesOptions: {
      generateScopedName: '[local]___[hash:base64:5]',
    },
  }),
  postcss: postcssPlugin,
  commonjs: commonjs(),
};

const output = {
  name,
  globals,
};

const external = {
  vue: ['vue'],
  dependencies: Object.keys(dependencies),
};

export {
  projectRoot,
  plugins,
  output,
  external,
};


================================================
FILE: build/build.dist.js
================================================
import {
  external, output, plugins, projectRoot,
} from './build.config.js';

const input = `${projectRoot}/index.js`;

const basePlugins = [
  plugins.alias,
  plugins.vue,
  plugins.resolve,
  plugins.commonjs,
];

export default [
  {
    input,
    output: {
      format: 'esm',
      file: 'dist/index.js',
      globals: output.globals,
    },
    plugins: [
      ...basePlugins,
      plugins.postcss(),
    ],
    external: external.vue,
  },
  {
    input,
    output: {
      format: 'iife',
      file: 'dist/index.min.js',
      exports: 'named',
      name: output.name,
      globals: output.globals,
    },
    plugins: [
      ...basePlugins,
      plugins.postcss(),
      plugins.terser,
    ],
    external: external.vue,
  },
];


================================================
FILE: build/build.libs.js
================================================
import glob from 'glob';
import {
  external, output, plugins, projectRoot,
} from './build.config.js';

const input = glob.sync('src/**/*.js', {
  nodir: true,
});

const basePlugins = [
  plugins.alias,
  plugins.vue,
  plugins.resolve,
];

export default [
  {
    input,
    output: {
      format: 'esm',
      dir: 'libs/',
      entryFileNames: ({ facadeModuleId }) => facadeModuleId.replace(`${projectRoot}/`, ''),
      globals: output.globals,
    },
    plugins: [
      ...basePlugins,
      plugins.postcss(),
    ],
    external: [...external.vue, ...external.dependencies],
  },
];


================================================
FILE: commitlint.config.cjs
================================================
module.exports = {
  extends: ['@commitlint/config-conventional'],
};


================================================
FILE: dev/serve.js
================================================
import { createApp } from 'vue';

import Dev from './serve.vue';

const app = createApp(Dev);

app.mount('#app');


================================================
FILE: dev/serve.vue
================================================
<script setup>
import { ref } from 'vue';
import {
  Chrome, Compact, Grayscale, Material, Photoshop, Sketch, Slider, Swatches, Twitter,
} from '../src';

const format = ref('rgb');
const 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 });

const c = (v) => {
  console.log(v);
};
</script>

<template>
  <div id="app" :style="{ 'background-color': typeof colors === 'object' ? colors.hex8 : colors }">
    <Chrome v-model="colors" :format="format" @update:format="c" />
    <Sketch v-model="colors" />
    <Compact v-model="colors" />
    <Grayscale v-model="colors" />
    <Material v-model="colors" />
    <Photoshop v-model="colors" />
    <Slider v-model="colors" />
    <Swatches v-model="colors" />
    <Twitter v-model="colors" />
  </div>
</template>

<style>
#app > div {
  margin: 30px 0;
}
</style>


================================================
FILE: example/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue-color</title>
  <script src="https://unpkg.com/vue@latest/dist/vue.global.prod.js"></script>
  <script src="https://unpkg.com/@ckpack/vue-color@latest/dist/index.min.js"></script>
</head>
<style>
  html,body,#app{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .color-wrapper > div {
    margin: 24px 0;
  }
</style>
<body>
  <div id="app">
    <div class="color-wrapper" :style="{'background-color': typeof colors === 'object' ? colors.hex8 : colors}">
      <Chrome v-model="colors"></Chrome>
      <Compact v-model="colors"></Compact>
      <Grayscale v-model="colors"></Grayscale>
      <Material v-model="colors"></Material>
      <Photoshop v-model="colors"></Photoshop>
      <Sketch v-model="colors"></Sketch>
      <Slider v-model="colors"></Slider>
      <Swatches v-model="colors"></Swatches>
      <Twitter v-model="colors"></Twitter>
    </div>
  </div>
</body>
<script>
  const app = Vue.createApp({
    data() {
      return {
        colors: '#194D33A8',
      };
    },
  });
  app.use(VueColor);
  app.mount('#app');
</script>
</html>

================================================
FILE: jsconfig.json
================================================
{
  "compilerOptions": {
    "baseUrl": ".",
    "checkJs": false,
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "libs", "website"]
}

================================================
FILE: package.json
================================================
{
  "name": "@ckpack/vue-color",
  "version": "1.6.0",
  "description": "(vue3.0) 🎨 Vue Color Pickers for Sketch, Photoshop, Chrome & more",
  "repository": "https://github.com/ckpack/vue-color",
  "sideEffects": false,
  "type": "module",
  "types": "./types.d.ts",
  "main": "dist/index.js",
  "module": "libs/index.js",
  "unpkg": "dist/index.min.js",
  "author": "chenkai",
  "license": "MIT",
  "keywords": [
    "vue-color",
    "color",
    "vuejs"
  ],
  "files": [
    "dist/*",
    "src/*",
    "libs/*",
    "types.d.ts"
  ],
  "scripts": {
    "dev": "vue-cli-service serve dev/serve.js",
    "build": "npm run build:libs && npm run build:dist",
    "build:libs": "rm -rf ./libs && rollup --bundleConfigAsCjs --config ./build/build.libs.js",
    "build:dist": "rm -rf ./dist && rollup --bundleConfigAsCjs --config ./build/build.dist.js",
    "build:style": "",
    "build:website": "vue-cli-service build --dest website dev/serve.js",
    "lint": "eslint --fix --ext .js,.vue ./",
    "gen": "node ./scripts/gen.js",
    "gen:compoents": "node ./scripts/gen-compoents.js",
    "prepare": "husky install",
    "release": "standard-version"
  },
  "devDependencies": {
    "@commitlint/cli": "^17.4.3",
    "@commitlint/config-conventional": "^17.4.3",
    "@rollup/plugin-alias": "^4.0.3",
    "@rollup/plugin-commonjs": "^24.0.1",
    "@rollup/plugin-node-resolve": "^15.0.1",
    "@vue/cli-service": "^5.0.8",
    "@vue/compiler-sfc": "^3.2.47",
    "eslint": "^8.34.0",
    "@antfu/eslint-config": "0.35.2",
    "glob": "^8.1.0",
    "husky": "^8.0.3",
    "lint-staged": "^13.1.2",
    "postcss": "^8.4.21",
    "postcss-prefixer": "^2.1.3",
    "rollup": "^3.15.0",
    "rollup-plugin-postcss": "^4.0.2",
    "@rollup/plugin-terser": "^0.4.0",
    "rollup-plugin-vue": "^6.0.0",
    "standard-version": "^9.5.0",
    "vue": "3.2.41"
  },
  "peerDependencies": {
    "vue": "^3.2.0"
  },
  "dependencies": {
    "material-colors": "^1.2.6",
    "@ctrl/tinycolor": "^3.6.0"
  },
  "engines": {
    "node": ">=12"
  },
  "lint-staged": {
    "*.{js,jsx,vue}": [
      "eslint --fix"
    ]
  }
}


================================================
FILE: scripts/gen-compoents.js
================================================
import fs from 'fs';

const basePath = process.cwd();

function formatComponent(component) {
  return component.split('-').map(name => name.slice(0, 1).toUpperCase() + name.slice(1)).join('');
}

function getCompoentsJS() {
  const components = fs.readdirSync(`${basePath}/src/components`);
  let componentsJS = '/* Do not modify the automatically generated code */\n';
  componentsJS += components.map(name => `import ${formatComponent(name)} from '@/components/${name}';\n`).join('');
  componentsJS += `\nconst components = [\n${components.map(name => `  ${formatComponent(name)},\n`).join('')}];\n`;
  componentsJS += `\nexport {\n  components,\n${components.map(name => `  ${formatComponent(name)},\n`).join('')}};\n`;
  return componentsJS;
}

fs.writeFileSync(`${basePath}/src/components.js`, getCompoentsJS());


================================================
FILE: scripts/gen.js
================================================
import fs from 'fs';

function formatComponent(component) {
  return component.split('-').map(name => name.slice(0, 1).toUpperCase() + name.slice(1)).join('');
}

const basePath = process.cwd();
const componentName = process.argv.slice(2).join(' ');
const formatComponentName = formatComponent(componentName);

if (!/^[a-z]+(-[a-z]+){0,}$/.test(componentName)) {
  console.error(`component name is incorrect: ${componentName}\netc:\nbutton\nsome-button\nsome-button-group`);
  process.exit(1);
}
if (fs.existsSync(`${basePath}/src/components/${componentName}`)) {
  console.error(`component name is already exist: ${componentName}`);
  process.exit(1);
}

fs.mkdirSync(`${basePath}/src/components/${componentName}`);

fs.writeFileSync(`${basePath}/src/components/${componentName}/${componentName}.vue`, `<template>
<div :class="\`\${cssPrefix}${componentName}\`">
</div>
</template>

<script>
import { cssPrefix } from '@/defaultConfig';

export default {
  name: '${formatComponentName}',
  setup() {
    return {
      cssPrefix,
    };
  },
};
</script>

<style lang="scss">
@import './${componentName}.scss';
</style>
`);
fs.writeFileSync(`${basePath}/src/components/${componentName}/${componentName}.scss`, `@import '../../styles/var.scss';

.${componentName} {}`);
fs.writeFileSync(`${basePath}/src/components/${componentName}/index.js`, `import ${formatComponentName} from './${componentName}.vue';

export default ${formatComponentName};
`);

// require('./gen-compoents');


================================================
FILE: src/components/alpha/alpha.vue
================================================
<script>
import checkboard from '@/components/checkboard';

export default {
  name: 'Alpha',
  components: {
    Checkboard: checkboard,
  },
  props: {
    value: Object,
    onChange: Function,
  },
  computed: {
    colors() {
      return this.value;
    },
    gradientColor() {
      const { rgba } = this.colors;
      const rgbStr = [rgba.r, rgba.g, rgba.b].join(',');
      return `linear-gradient(to right, rgba(${rgbStr}, 0) 0%, rgba(${rgbStr}, 1) 100%)`;
    },
  },
  methods: {
    handleChange(e, skip) {
      !skip && e.preventDefault();
      const { container } = this.$refs;
      if (!container) {
        // for some edge cases, container may not exist. see #220
        return;
      }
      const containerWidth = container.clientWidth;

      const xOffset = container.getBoundingClientRect().left + window.pageXOffset;
      const pageX = e.pageX || (e.touches ? e.touches[0].pageX : 0);
      const left = pageX - xOffset;

      let a;
      if (left < 0)
        a = 0;
      else if (left > containerWidth)
        a = 1;
      else
        a = Math.round(left * 100 / containerWidth) / 100;

      if (this.colors.a !== a) {
        this.$emit('change', {
          h: this.colors.hsl.h,
          s: this.colors.hsl.s,
          l: this.colors.hsl.l,
          a,
          source: 'rgba',
        });
      }
    },
    handleMouseDown(e) {
      this.handleChange(e, true);
      window.addEventListener('mousemove', this.handleChange);
      window.addEventListener('mouseup', this.handleMouseUp);
    },
    handleMouseUp() {
      this.unbindEventListeners();
    },
    unbindEventListeners() {
      window.removeEventListener('mousemove', this.handleChange);
      window.removeEventListener('mouseup', this.handleMouseUp);
    },
  },
};
</script>

<template>
  <div class="vc-alpha">
    <div class="vc-alpha-checkboard-wrap">
      <Checkboard />
    </div>
    <div class="vc-alpha-gradient" :style="{ background: gradientColor }" />
    <div
      ref="container"
      class="vc-alpha-container"
      @mousedown="handleMouseDown"
      @touchmove="handleChange"
      @touchstart="handleChange"
    >
      <div class="vc-alpha-pointer" :style="{ left: `${colors.a * 100}%` }">
        <div class="vc-alpha-picker" />
      </div>
    </div>
  </div>
</template>

<style>
.vc-alpha {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}
.vc-alpha-checkboard-wrap {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow: hidden;
}
.vc-alpha-gradient {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}
.vc-alpha-container {
  cursor: pointer;
  position: relative;
  z-index: 2;
  height: 100%;
  margin: 0 3px;
}
.vc-alpha-pointer {
  z-index: 2;
  position: absolute;
}
.vc-alpha-picker {
  cursor: pointer;
  width: 4px;
  border-radius: 1px;
  height: 8px;
  box-shadow: 0 0 2px rgba(0, 0, 0, .6);
  background: #fff;
  margin-top: 1px;
  transform: translateX(-2px);
}
</style>


================================================
FILE: src/components/alpha/index.js
================================================
import Alpha from './alpha.vue';
import { install } from '@/utils/compoent';

Alpha.install = install;
export default Alpha;


================================================
FILE: src/components/checkboard/checkboard.vue
================================================
<script>
const _checkboardCache = {};

export default {
  name: 'Checkboard',
  props: {
    size: {
      type: [Number, String],
      default: 8,
    },
    white: {
      type: String,
      default: '#fff',
    },
    grey: {
      type: String,
      default: '#e6e6e6',
    },
  },
  computed: {
    bgStyle() {
      return {
        'background-image': `url(${getCheckboard(this.white, this.grey, this.size)})`,
      };
    },
  },
};

/**
 * get base 64 data by canvas
 *
 * @param {String} c1 hex color
 * @param {String} c2 hex color
 * @param {Number} size
 */

function renderCheckboard(c1, c2, size) {
  // Dont Render On Server
  if (typeof document === 'undefined')
    return null;

  const canvas = document.createElement('canvas');
  canvas.width = canvas.height = size * 2;
  const ctx = canvas.getContext('2d');
  // If no context can be found, return early.
  if (!ctx)
    return null;

  ctx.fillStyle = c1;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = c2;
  ctx.fillRect(0, 0, size, size);
  ctx.translate(size, size);
  ctx.fillRect(0, 0, size, size);
  return canvas.toDataURL();
}

/**
 * get checkboard base data and cache
 *
 * @param {String} c1 hex color
 * @param {String} c2 hex color
 * @param {Number} size
 */

function getCheckboard(c1, c2, size) {
  const key = `${c1},${c2},${size}`;

  if (_checkboardCache[key])
    return _checkboardCache[key];

  const checkboard = renderCheckboard(c1, c2, size);
  _checkboardCache[key] = checkboard;
  return checkboard;
}
</script>

<template>
  <div class="vc-checkerboard" :style="bgStyle" />
</template>

<style>
.vc-checkerboard {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-size: contain;
}
</style>


================================================
FILE: src/components/checkboard/index.js
================================================
import Checkboard from './checkboard.vue';
import { install } from '@/utils/compoent';

Checkboard.install = install;
export default Checkboard;


================================================
FILE: src/components/chrome/chrome.vue
================================================
<script>
import colorMixin from '@/mixin/color';
import editableInput from '@/components/editable-input';
import saturation from '@/components/saturation';
import hue from '@/components/hue';
import alpha from '@/components/alpha';
import checkboard from '@/components/checkboard';

export default {
  name: 'Chrome',
  components: {
    Saturation: saturation,
    Hue: hue,
    Alpha: alpha,
    EdIn: editableInput,
    Checkboard: checkboard,
  },
  mixins: [colorMixin],
  props: {
    disableAlpha: {
      type: Boolean,
      default: false,
    },
    disableFields: {
      type: Boolean,
      default: false,
    },
    format: {
      type: String,
      default: 'hex',
    },
  },
  data() {
    return {
      fieldsIndex: 'hex',
      highlight: false,
    };
  },
  computed: {
    hsl() {
      const { h, s, l } = this.colors.hsl;
      return {
        h: h.toFixed(),
        s: `${(s * 100).toFixed()}%`,
        l: `${(l * 100).toFixed()}%`,
      };
    },
    activeColor() {
      const { rgba } = this.colors;
      return `rgba(${[rgba.r, rgba.g, rgba.b, rgba.a].join(',')})`;
    },
    hasAlpha() {
      return this.colors.a < 1;
    },
  },
  watch: {
    format: {
      handler(val) {
        this.fieldsIndex = val;
      },
      immediate: true,
    },
  },
  methods: {
    childChange(data) {
      this.colorChange(data);
    },
    inputChange(data) {
      if (!data)
        return;

      if (data.hex) {
        this.isValidHex(data.hex) && this.colorChange({
          hex: data.hex,
          source: 'hex',
        });
      }
      else if (data.r || data.g || data.b || data.a) {
        this.colorChange({
          r: data.r || this.colors.rgba.r,
          g: data.g || this.colors.rgba.g,
          b: data.b || this.colors.rgba.b,
          a: data.a || this.colors.rgba.a,
          source: 'rgba',
        });
      }
      else if (data.h || data.s || data.l) {
        const s = data.s ? (data.s.replace('%', '') / 100) : this.colors.hsl.s;
        const l = data.l ? (data.l.replace('%', '') / 100) : this.colors.hsl.l;

        this.colorChange({
          h: data.h || this.colors.hsl.h,
          s,
          l,
          source: 'hsl',
        });
      }
    },
    toggleViews() {
      switch (this.fieldsIndex) {
        case 'hex':
          this.fieldsIndex = `rgb${this.disableAlpha ? '' : 'a'}`;
          break;
        case 'rgb':
        case 'rgba':
          this.fieldsIndex = `hsl${this.disableAlpha ? '' : 'a'}`;
          break;
        default:
          this.fieldsIndex = 'hex';
          break;
      }
      this.$emit('update:format', this.fieldsIndex);
    },
    showHighlight() {
      this.highlight = true;
    },
    hideHighlight() {
      this.highlight = false;
    },
  },
};
</script>

<template>
  <div role="application" aria-label="Chrome color picker" class="vc-chrome" :class="[disableAlpha ? 'vc-chrome__disable-alpha' : '']">
    <div class="vc-chrome-saturation-wrap">
      <Saturation :value="colors" @change="childChange" />
    </div>
    <div class="vc-chrome-body">
      <div class="vc-chrome-controls">
        <div class="vc-chrome-color-wrap">
          <div :aria-label="`current color is ${colors.hex}`" class="vc-chrome-active-color" :style="{ background: activeColor }" />
          <Checkboard v-if="!disableAlpha" />
        </div>

        <div class="vc-chrome-sliders">
          <div class="vc-chrome-hue-wrap">
            <Hue :value="colors" @change="childChange" />
          </div>
          <div v-if="!disableAlpha" class="vc-chrome-alpha-wrap">
            <Alpha :value="colors" @change="childChange" />
          </div>
        </div>
      </div>

      <div v-if="!disableFields" class="vc-chrome-fields-wrap">
        <div v-show="fieldsIndex === 'hex'" class="vc-chrome-fields">
          <!-- hex -->
          <div class="vc-chrome-field">
            <EdIn v-if="!hasAlpha" label="hex" :value="colors.hex" @change="inputChange" />
            <EdIn v-if="hasAlpha" label="hex" :value="colors.hex8" @change="inputChange" />
          </div>
        </div>
        <div v-show="['rgb', 'rgba'].includes(fieldsIndex)" class="vc-chrome-fields">
          <!-- rgba -->
          <div class="vc-chrome-field">
            <EdIn label="r" :value="colors.rgba.r" @change="inputChange" />
          </div>
          <div class="vc-chrome-field">
            <EdIn label="g" :value="colors.rgba.g" @change="inputChange" />
          </div>
          <div class="vc-chrome-field">
            <EdIn label="b" :value="colors.rgba.b" @change="inputChange" />
          </div>
          <div v-if="!disableAlpha" class="vc-chrome-field">
            <EdIn label="a" :value="colors.a" :arrow-offset="0.01" :max="1" @change="inputChange" />
          </div>
        </div>
        <div v-show="['hsl', 'hsla'].includes(fieldsIndex)" class="vc-chrome-fields">
          <!-- hsla -->
          <div class="vc-chrome-field">
            <EdIn label="h" :value="hsl.h" @change="inputChange" />
          </div>
          <div class="vc-chrome-field">
            <EdIn label="s" :value="hsl.s" @change="inputChange" />
          </div>
          <div class="vc-chrome-field">
            <EdIn label="l" :value="hsl.l" @change="inputChange" />
          </div>
          <div v-if="!disableAlpha" class="vc-chrome-field">
            <EdIn label="a" :value="colors.a" :arrow-offset="0.01" :max="1" @change="inputChange" />
          </div>
        </div>
        <!-- btn -->
        <div class="vc-chrome-toggle-btn" role="button" aria-label="Change another color definition" @click="toggleViews">
          <div class="vc-chrome-toggle-icon">
            <svg
              style="width:24px; height:24px"
              viewBox="0 0 24 24"
              @mouseover="showHighlight"
              @mouseenter="showHighlight"
              @mouseout="hideHighlight"
            >
              <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" />
            </svg>
          </div>
          <div v-show="highlight" class="vc-chrome-toggle-icon-highlight" />
        </div>
        <!-- btn -->
      </div>
    </div>
  </div>
</template>

<style>
.vc-chrome {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3);
  box-sizing: initial;
  width: 225px;
  font-family: Menlo;
  background-color: #fff;
}
.vc-chrome-controls {
  display: flex;
}
.vc-chrome-color-wrap {
  position: relative;
  width: 36px;
}
.vc-chrome-active-color {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  overflow: hidden;
  z-index: 1;
}
.vc-chrome-color-wrap .vc-checkerboard {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-size: auto;
}
.vc-chrome-sliders {
  flex: 1;
}
.vc-chrome-fields-wrap {
  display: flex;
  padding-top: 16px;
}
.vc-chrome-fields {
  display: flex;
  margin-left: -6px;
  flex: 1;
}
.vc-chrome-field {
  padding-left: 6px;
  width: 100%;
}
.vc-chrome-toggle-btn {
  width: 32px;
  text-align: right;
  position: relative;
}
.vc-chrome-toggle-icon {
  margin-right: -4px;
  margin-top: 12px;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.vc-chrome-toggle-icon-highlight {
  position: absolute;
  width: 24px;
  height: 28px;
  background: #eee;
  border-radius: 4px;
  top: 10px;
  left: 12px;
}
.vc-chrome-hue-wrap {
  position: relative;
  height: 10px;
  margin-bottom: 8px;
}
.vc-chrome-alpha-wrap {
  position: relative;
  height: 10px;
}
.vc-chrome-hue-wrap .vc-hue {
  border-radius: 2px;
}
.vc-chrome-alpha-wrap .vc-alpha-gradient {
  border-radius: 2px;
}
.vc-chrome-hue-wrap .vc-hue-picker, .vc-chrome-alpha-wrap .vc-alpha-picker {
  width: 12px;
  height: 12px;
  border-radius: 6px;
  transform: translate(-6px, -2px);
  background-color: rgb(248, 248, 248);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
}
.vc-chrome-body {
  padding: 16px 16px 12px;
  background-color: #fff;
}
.vc-chrome-saturation-wrap {
  width: 100%;
  padding-bottom: 55%;
  position: relative;
  border-radius: 2px 2px 0 0;
  overflow: hidden;
}
.vc-chrome-saturation-wrap .vc-saturation-circle {
  width: 12px;
  height: 12px;
}

.vc-chrome-fields .vc-input__input {
  font-size: 11px;
  color: #333;
  width: 100%;
  border-radius: 2px;
  border: none;
  box-shadow: inset 0 0 0 1px #dadada;
  height: 21px;
  text-align: center;
}
.vc-chrome-fields .vc-input__label {
  text-transform: uppercase;
  font-size: 11px;
  line-height: 11px;
  color: #969696;
  text-align: center;
  display: block;
  margin-top: 12px;
}

.vc-chrome__disable-alpha .vc-chrome-active-color {
  width: 18px;
  height: 18px;
}
.vc-chrome__disable-alpha .vc-chrome-color-wrap {
  width: 30px;
}
.vc-chrome__disable-alpha .vc-chrome-hue-wrap {
  margin-top: 4px;
  margin-bottom: 4px;
}
</style>


================================================
FILE: src/components/chrome/index.js
================================================
import Chrome from './chrome.vue';
import { install } from '@/utils/compoent';

Chrome.install = install;
export default Chrome;


================================================
FILE: src/components/compact/compact.vue
================================================
<script>
import colorMixin from '@/mixin/color';

const defaultColors = [
  '#4D4D4D', '#999999', '#FFFFFF', '#F44E3B', '#FE9200', '#FCDC00',
  '#DBDF00', '#A4DD00', '#68CCCA', '#73D8FF', '#AEA1FF', '#FDA1FF',
  '#333333', '#808080', '#CCCCCC', '#D33115', '#E27300', '#FCC400',
  '#B0BC00', '#68BC00', '#16A5A5', '#009CE0', '#7B64FF', '#FA28FF',
  '#000000', '#666666', '#B3B3B3', '#9F0500', '#C45100', '#FB9E00',
  '#808900', '#194D33', '#0C797D', '#0062B1', '#653294', '#AB149E',
];

export default {
  name: 'Compact',
  mixins: [colorMixin],
  props: {
    palette: {
      type: Array,
      default() {
        return defaultColors;
      },
    },
  },
  computed: {
    pick() {
      return this.colors.hex.toUpperCase();
    },
  },
  methods: {
    handlerClick(c) {
      this.colorChange({
        hex: c,
        source: 'hex',
      });
    },
  },
};
</script>

<template>
  <div role="application" aria-label="Compact color picker" class="vc-compact">
    <ul class="vc-compact-colors" role="listbox">
      <li
        v-for="c in paletteUpperCase(palette)"
        :key="c"
        role="option"
        :aria-label="`color:${c}`"
        :aria-selected="c === pick"
        class="vc-compact-color-item"
        :class="{ 'vc-compact-color-item--white': c === '#FFFFFF' }"
        :style="{ background: c }"
        @click="handlerClick(c)"
      >
        <div v-show="c === pick" class="vc-compact-dot" />
      </li>
    </ul>
  </div>
</template>

<style>
.vc-compact {
  padding-top: 5px;
  padding-left: 5px;
  width: 245px;
  border-radius: 2px;
  box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);
  background-color: #fff;
}
.vc-compact-colors {
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.vc-compact-color-item {
  list-style: none;
  width: 15px;
  height: 15px;
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
  position: relative;
  cursor: pointer;
}
.vc-compact-color-item--white {
  box-shadow: inset 0 0 0 1px #ddd;
}
.vc-compact-color-item--white .vc-compact-dot {
  background: #000;
}

.vc-compact-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  border-radius: 50%;
  opacity: 1;
  background: #fff;
}
</style>


================================================
FILE: src/components/compact/index.js
================================================
import Compact from './compact.vue';
import { install } from '@/utils/compoent';

Compact.install = install;
export default Compact;


================================================
FILE: src/components/editable-input/editable-input.vue
================================================
<script>
export default {
  name: 'EditableInput',
  props: {
    label: String,
    labelText: String,
    desc: String,
    value: [String, Number],
    max: Number,
    min: Number,
    arrowOffset: {
      type: Number,
      default: 1,
    },
  },
  computed: {
    val: {
      get() {
        return this.value;
      },
      set(v) {
        // TODO: min
        if (!(this.max === undefined) && +v > this.max)
          this.$refs.input.value = this.max;
        else
          return v;
      },
    },
    labelId() {
      return `input__label__${this.label}__${Math.random().toString().slice(2, 5)}`;
    },
    labelSpanText() {
      return this.labelText || this.label;
    },
  },
  methods: {
    update(e) {
      this.handleChange(e.target.value);
    },
    handleChange(newVal) {
      const data = {};
      data[this.label] = newVal;
      if (data.hex === undefined && data['#'] === undefined)
        this.$emit('change', data);
      else if (newVal.length > 5)
        this.$emit('change', data);
    },
    // **** unused
    // handleBlur (e) {
    //   console.log(e)
    // },
    handleKeyDown(e) {
      let { val } = this;
      const number = Number(val);

      if (number) {
        const amount = this.arrowOffset || 1;

        // Up
        if (e.keyCode === 38) {
          val = number + amount;
          this.handleChange(val);
          e.preventDefault();
        }

        // Down
        if (e.keyCode === 40) {
          val = number - amount;
          this.handleChange(val);
          e.preventDefault();
        }
      }
    },
    // **** unused
    // handleDrag (e) {
    //   console.log(e)
    // },
    // handleMouseDown (e) {
    //   console.log(e)
    // }
  },
};
</script>

<template>
  <div class="vc-editable-input">
    <input
      ref="input"
      v-model="val"
      :aria-labelledby="labelId"
      class="vc-input__input"
      @keydown="handleKeyDown"
      @input="update"
    >
    <span :id="labelId" :for="label" class="vc-input__label">{{ labelSpanText }}</span>
    <span class="vc-input__desc">{{ desc }}</span>
  </div>
</template>

<style>
.vc-editable-input {
  position: relative;
}
.vc-input__input {
  padding: 0;
  border: 0;
  outline: none;
}
.vc-input__label {
  text-transform: capitalize;
}
</style>


================================================
FILE: src/components/editable-input/index.js
================================================
import EditableInput from './editable-input.vue';
import { install } from '@/utils/compoent';

EditableInput.install = install;
export default EditableInput;


================================================
FILE: src/components/grayscale/grayscale.vue
================================================
<script>
import colorMixin from '@/mixin/color';

const defaultColors = [
  '#FFFFFF', '#F2F2F2', '#E6E6E6', '#D9D9D9', '#CCCCCC', '#BFBFBF', '#B3B3B3',
  '#A6A6A6', '#999999', '#8C8C8C', '#808080', '#737373', '#666666', '#595959',
  '#4D4D4D', '#404040', '#333333', '#262626', '#0D0D0D', '#000000',
];

export default {
  name: 'Grayscale',
  components: {

  },
  mixins: [colorMixin],
  props: {
    palette: {
      type: Array,
      default() {
        return defaultColors;
      },
    },
  },
  computed: {
    pick() {
      return this.colors.hex.toUpperCase();
    },
  },
  methods: {
    handlerClick(c) {
      this.colorChange({
        hex: c,
        source: 'hex',
      });
    },
  },
};
</script>

<template>
  <div role="application" aria-label="Grayscale color picker" class="vc-grayscale">
    <ul class="vc-grayscale-colors" role="listbox">
      <li
        v-for="c in paletteUpperCase(palette)"
        :key="c"
        role="option"
        :aria-label="`Color:${c}`"
        :aria-selected="c === pick"
        class="vc-grayscale-color-item"
        :class="{ 'vc-grayscale-color-item--white': c === '#FFFFFF' }"
        :style="{ background: c }"
        @click="handlerClick(c)"
      >
        <div v-show="c === pick" class="vc-grayscale-dot" />
      </li>
    </ul>
  </div>
</template>

<style>
.vc-grayscale {
  width: 125px;
  border-radius: 2px;
  box-shadow: 0 2px 15px rgba(0,0,0,.12), 0 2px 10px rgba(0,0,0,.16);
  background-color: #fff;
}
.vc-grayscale-colors {
  border-radius: 2px;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.vc-grayscale-color-item {
  list-style: none;
  width: 25px;
  height: 25px;
  float: left;
  position: relative;
  cursor: pointer;
}
.vc-grayscale-color-item--white .vc-grayscale-dot {
  background: #000;
}

.vc-grayscale-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -2px;
  border-radius: 50%;
  opacity: 1;
  background: #fff;
}
</style>


================================================
FILE: src/components/grayscale/index.js
================================================
import Grayscale from './grayscale.vue';
import { install } from '@/utils/compoent';

Grayscale.install = install;
export default Grayscale;


================================================
FILE: src/components/hue/hue.vue
================================================
<script>
export default {
  name: 'Hue',
  props: {
    value: Object,
    direction: {
      type: String,
      // [horizontal | vertical]
      default: 'horizontal',
    },
  },
  data() {
    return {
      oldHue: 0,
      pullDirection: '',
    };
  },
  computed: {
    colors() {
      return this.value;
    },
    directionClass() {
      return {
        'vc-hue--horizontal': this.direction === 'horizontal',
        'vc-hue--vertical': this.direction === 'vertical',
      };
    },
    pointerTop() {
      if (this.direction === 'vertical') {
        if (this.colors.hsl.h === 0 && this.pullDirection === 'right')
          return 0;
        return `${-((this.colors.hsl.h * 100) / 360) + 100}%`;
      }
      return 0;
    },
    pointerLeft() {
      if (this.direction === 'vertical')
        return 0;

      if (this.colors.hsl.h === 0 && this.pullDirection === 'right')
        return '100%';
      return `${(this.colors.hsl.h * 100) / 360}%`;
    },
  },
  watch: {
    value: {
      handler(value, oldVal) {
        const { h } = value.hsl;
        if (h !== 0 && h - this.oldHue > 0)
          this.pullDirection = 'right';
        if (h !== 0 && h - this.oldHue < 0)
          this.pullDirection = 'left';
        this.oldHue = h;
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    handleChange(e, skip) {
      !skip && e.preventDefault();

      const { container } = this.$refs;
      if (!container) {
        // for some edge cases, container may not exist. see #220
        return;
      }
      const containerWidth = container.clientWidth;
      const containerHeight = container.clientHeight;

      const xOffset = container.getBoundingClientRect().left + window.pageXOffset;
      const yOffset = container.getBoundingClientRect().top + window.pageYOffset;
      const pageX = e.pageX || (e.touches ? e.touches[0].pageX : 0);
      const pageY = e.pageY || (e.touches ? e.touches[0].pageY : 0);
      const left = pageX - xOffset;
      const top = pageY - yOffset;

      let h;
      let percent;

      if (this.direction === 'vertical') {
        if (top < 0) {
          h = 360;
        }
        else if (top > containerHeight) {
          h = 0;
        }
        else {
          percent = -(top * 100 / containerHeight) + 100;
          h = (360 * percent / 100);
        }

        if (this.colors.hsl.h !== h) {
          this.$emit('change', {
            h,
            s: this.colors.hsl.s,
            l: this.colors.hsl.l,
            a: this.colors.hsl.a,
            source: 'hsl',
          });
        }
      }
      else {
        if (left < 0) {
          h = 0;
        }
        else if (left > containerWidth) {
          h = 360;
        }
        else {
          percent = left * 100 / containerWidth;
          h = (360 * percent / 100);
        }

        if (this.colors.hsl.h !== h) {
          this.$emit('change', {
            h,
            s: this.colors.hsl.s,
            l: this.colors.hsl.l,
            a: this.colors.hsl.a,
            source: 'hsl',
          });
        }
      }
    },
    handleMouseDown(e) {
      this.handleChange(e, true);
      window.addEventListener('mousemove', this.handleChange);
      window.addEventListener('mouseup', this.handleChange);
      window.addEventListener('mouseup', this.handleMouseUp);
    },
    handleMouseUp(e) {
      this.unbindEventListeners();
    },
    unbindEventListeners() {
      window.removeEventListener('mousemove', this.handleChange);
      window.removeEventListener('mouseup', this.handleChange);
      window.removeEventListener('mouseup', this.handleMouseUp);
    },
  },
};
</script>

<template>
  <div class="vc-hue" :class="[directionClass]">
    <div
      ref="container"
      class="vc-hue-container"
      role="slider"
      :aria-valuenow="colors.hsl.h"
      aria-valuemin="0"
      aria-valuemax="360"
      @mousedown="handleMouseDown"
      @touchmove="handleChange"
      @touchstart="handleChange"
    >
      <div class="vc-hue-pointer" :style="{ top: pointerTop, left: pointerLeft }" role="presentation">
        <div class="vc-hue-picker" />
      </div>
    </div>
  </div>
</template>

<style>
.vc-hue {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  border-radius: 2px;
}
.vc-hue--horizontal {
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.vc-hue--vertical {
  background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.vc-hue-container {
  cursor: pointer;
  margin: 0 2px;
  position: relative;
  height: 100%;
}
.vc-hue-pointer {
  z-index: 2;
  position: absolute;
}
.vc-hue-picker {
  cursor: pointer;
  margin-top: 1px;
  width: 4px;
  border-radius: 1px;
  height: 8px;
  box-shadow: 0 0 2px rgba(0, 0, 0, .6);
  background: #fff;
  transform: translateX(-2px) ;
}
</style>


================================================
FILE: src/components/hue/index.js
================================================
import Hue from './hue.vue';
import { install } from '@/utils/compoent';

Hue.install = install;
export default Hue;


================================================
FILE: src/components/material/index.js
================================================
import Material from './material.vue';
import { install } from '@/utils/compoent';

Material.install = install;
export default Material;


================================================
FILE: src/components/material/material.vue
================================================
<script>
import editableInput from '@/components/editable-input';
import colorMixin from '@/mixin/color';

export default {
  name: 'Material',
  components: {
    EdIn: editableInput,
  },
  mixins: [colorMixin],
  methods: {
    onChange(data) {
      if (!data)
        return;

      if (data.hex) {
        this.isValidHex(data.hex) && this.colorChange({
          hex: data.hex,
          source: 'hex',
        });
      }
      else if (data.r || data.g || data.b) {
        this.colorChange({
          r: data.r || this.colors.rgba.r,
          g: data.g || this.colors.rgba.g,
          b: data.b || this.colors.rgba.b,
          a: data.a || this.colors.rgba.a,
          source: 'rgba',
        });
      }
    },
  },
};
</script>

<template>
  <div role="application" aria-label="Material color picker" class="vc-material">
    <EdIn
      class="vc-material-hex"
      label="hex"
      :value="colors.hex"
      :style="{ borderColor: colors.hex }"
      @change="onChange"
    />

    <div class="vc-material-split">
      <div class="vc-material-third">
        <EdIn
          label="r"
          :value="colors.rgba.r"
          @change="onChange"
        />
      </div>
      <div class="vc-material-third">
        <EdIn
          label="g"
          :value="colors.rgba.g"
          @change="onChange"
        />
      </div>
      <div class="vc-material-third">
        <EdIn
          label="b"
          :value="colors.rgba.b"
          @change="onChange"
        />
      </div>
    </div>
  </div>
</template>

<style>
.vc-material {
  width: 98px;
  height: 98px;
  padding: 16px;
  font-family: "Roboto";
  position: relative;
  border-radius: 2px;
  box-shadow: 0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);
  background-color: #fff;
}

.vc-material .vc-input__input {
  width: 100%;
  margin-top: 12px;
  font-size: 15px;
  color: #333;
  height: 30px;
}

.vc-material .vc-input__label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 11px;
  color: #999;
  text-transform: capitalize;
}

.vc-material-hex {
  border-bottom-width: 2px;
  border-bottom-style: solid;
}
.vc-material-split {
  display: flex;
  margin-right: -10px;
  padding-top: 11px;
}
.vc-material-third {
  flex: 1;
  padding-right: 10px;
}
</style>


================================================
FILE: src/components/photoshop/index.js
================================================
import Photoshop from './photoshop.vue';
import { install } from '@/utils/compoent';

Photoshop.install = install;
export default Photoshop;


================================================
FILE: src/components/photoshop/photoshop.vue
================================================
<script>
import colorMixin from '@/mixin/color';
import editableInput from '@/components/editable-input';
import saturation from '@/components/saturation';
import hue from '@/components/hue';

export default {
  name: 'Photoshop',
  components: {
    Saturation: saturation,
    Hue: hue,
    EdIn: editableInput,
  },
  mixins: [colorMixin],
  props: {
    head: {
      type: String,
      default: 'Color Picker',
    },
    disableFields: {
      type: Boolean,
      default: false,
    },
    hasResetButton: {
      type: Boolean,
      default: false,
    },
    acceptLabel: {
      type: String,
      default: 'OK',
    },
    cancelLabel: {
      type: String,
      default: 'Cancel',
    },
    resetLabel: {
      type: String,
      default: 'Reset',
    },
    newLabel: {
      type: String,
      default: 'new',
    },
    currentLabel: {
      type: String,
      default: 'current',
    },
  },
  data() {
    return {
      currentColor: '#FFF',
    };
  },
  computed: {
    hsv() {
      const { hsv } = this.colors;
      return {
        h: hsv.h.toFixed(),
        s: (hsv.s * 100).toFixed(),
        v: (hsv.v * 100).toFixed(),
      };
    },
    hex() {
      const { hex } = this.colors;
      return hex && hex.replace('#', '');
    },
  },
  created() {
    this.currentColor = this.colors.hex;
  },
  methods: {
    childChange(data) {
      this.colorChange(data);
    },
    inputChange(data) {
      if (!data)
        return;

      if (data['#']) {
        this.isValidHex(data['#']) && this.colorChange({
          hex: data['#'],
          source: 'hex',
        });
      }
      else if (data.r || data.g || data.b || data.a) {
        this.colorChange({
          r: data.r || this.colors.rgba.r,
          g: data.g || this.colors.rgba.g,
          b: data.b || this.colors.rgba.b,
          a: data.a || this.colors.rgba.a,
          source: 'rgba',
        });
      }
      else if (data.h || data.s || data.v) {
        this.colorChange({
          h: data.h || this.colors.hsv.h,
          s: (data.s / 100) || this.colors.hsv.s,
          v: (data.v / 100) || this.colors.hsv.v,
          source: 'hsv',
        });
      }
    },
    clickCurrentColor() {
      this.colorChange({
        hex: this.currentColor,
        source: 'hex',
      });
    },
    handleAccept() {
      this.$emit('ok');
    },
    handleCancel() {
      this.$emit('cancel');
    },
    handleReset() {
      this.$emit('reset');
    },
  },

};
</script>

<template>
  <div role="application" aria-label="PhotoShop color picker" class="vc-photoshop" :class="[disableFields ? 'vc-photoshop__disable-fields' : '']">
    <div role="heading" class="vc-ps-head">
      {{ head }}
    </div>
    <div class="vc-ps-body">
      <div class="vc-ps-saturation-wrap">
        <Saturation :value="colors" @change="childChange" />
      </div>
      <div class="vc-ps-hue-wrap">
        <Hue :value="colors" direction="vertical" @change="childChange">
          <div class="vc-ps-hue-pointer">
            <i class="vc-ps-hue-pointer--left" /><i class="vc-ps-hue-pointer--right" />
          </div>
        </Hue>
      </div>
      <div class="vc-ps-controls" :class="[disableFields ? 'vc-ps-controls__disable-fields' : '']">
        <div class="vc-ps-previews">
          <div class="vc-ps-previews__label">
            {{ newLabel }}
          </div>
          <div class="vc-ps-previews__swatches">
            <div class="vc-ps-previews__pr-color" :aria-label="`New color is ${colors.hex}`" :style="{ background: colors.hex }" />
            <div class="vc-ps-previews__pr-color" :aria-label="`Current color is ${currentColor}`" :style="{ background: currentColor }" @click="clickCurrentColor" />
          </div>
          <div class="vc-ps-previews__label">
            {{ currentLabel }}
          </div>
        </div>
        <div v-if="!disableFields" class="vc-ps-actions">
          <div class="vc-ps-ac-btn" role="button" :aria-label="acceptLabel" @click="handleAccept">
            {{ acceptLabel }}
          </div>
          <div class="vc-ps-ac-btn" role="button" :aria-label="cancelLabel" @click="handleCancel">
            {{ cancelLabel }}
          </div>

          <div class="vc-ps-fields">
            <!-- hsla -->
            <EdIn label="h" desc="°" :value="hsv.h" @change="inputChange" />
            <EdIn label="s" desc="%" :value="hsv.s" :max="100" @change="inputChange" />
            <EdIn label="v" desc="%" :value="hsv.v" :max="100" @change="inputChange" />
            <div class="vc-ps-fields__divider" />
            <!-- rgba -->
            <EdIn label="r" :value="colors.rgba.r" @change="inputChange" />
            <EdIn label="g" :value="colors.rgba.g" @change="inputChange" />
            <EdIn label="b" :value="colors.rgba.b" @change="inputChange" />
            <div class="vc-ps-fields__divider" />
            <!-- hex -->
            <EdIn label="#" class="vc-ps-fields__hex" :value="hex" @change="inputChange" />
          </div>

          <div v-if="hasResetButton" class="vc-ps-ac-btn" aria-label="reset" @click="handleReset">
            {{ resetLabel }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.vc-photoshop {
  background: #DCDCDC;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15);
  box-sizing: initial;
  width: 513px;
  font-family: Roboto;
}
.vc-photoshop__disable-fields {
  width: 390px;
}
.vc-ps-head {
  background-image: linear-gradient(-180deg, #F0F0F0 0%, #D4D4D4 100%);
  border-bottom: 1px solid #B1B1B1;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 rgba(0,0,0,.02);
  height: 23px;
  line-height: 24px;
  border-radius: 4px 4px 0 0;
  font-size: 13px;
  color: #4D4D4D;
  text-align: center;
}
.vc-ps-body {
  padding: 15px;
  display: flex;
}

.vc-ps-saturation-wrap {
  width: 256px;
  height: 256px;
  position: relative;
  border: 2px solid #B3B3B3;
  border-bottom: 2px solid #F0F0F0;
  overflow: hidden;
}
.vc-ps-saturation-wrap .vc-saturation-circle {
  width: 12px;
  height: 12px;
}

.vc-ps-hue-wrap {
  position: relative;
  height: 256px;
  width: 19px;
  margin-left: 10px;
  border: 2px solid #B3B3B3;
  border-bottom: 2px solid #F0F0F0;
}
.vc-ps-hue-pointer {
  position: relative;
}
.vc-ps-hue-pointer--left,
.vc-ps-hue-pointer--right {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #555;
}
.vc-ps-hue-pointer--left:after,
.vc-ps-hue-pointer--right:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 1px;
  left: 1px;
  transform: translate(-8px, -5px);
}
.vc-ps-hue-pointer--left {
  transform: translate(-13px, -4px);
}
.vc-ps-hue-pointer--right {
  transform: translate(20px, -4px) rotate(180deg);
}

.vc-ps-controls {
  width: 180px;
  margin-left: 10px;
  display: flex;
}
.vc-ps-controls__disable-fields {
  width: auto;
}

.vc-ps-actions {
  margin-left: 20px;
  flex: 1;
}
.vc-ps-ac-btn {
  cursor: pointer;
  background-image: linear-gradient(-180deg, #FFFFFF 0%, #E6E6E6 100%);
  border: 1px solid #878787;
  border-radius: 2px;
  height: 20px;
  box-shadow: 0 1px 0 0 #EAEAEA;
  font-size: 14px;
  color: #000;
  line-height: 20px;
  text-align: center;
  margin-bottom: 10px;
}
.vc-ps-previews {
  width: 60px;
}
.vc-ps-previews__swatches {
  border: 1px solid #B3B3B3;
  border-bottom: 1px solid #F0F0F0;
  margin-bottom: 2px;
  margin-top: 1px;
}
.vc-ps-previews__pr-color {
  height: 34px;
  box-shadow: inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000;
}
.vc-ps-previews__label {
  font-size: 14px;
  color: #000;
  text-align: center;
}

.vc-ps-fields {
  padding-top: 5px;
  padding-bottom: 9px;
  width: 80px;
  position: relative;
}
.vc-ps-fields .vc-input__input {
  margin-left: 40%;
  width: 40%;
  height: 18px;
  border: 1px solid #888888;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;
  margin-bottom: 5px;
  font-size: 13px;
  padding-left: 3px;
  margin-right: 10px;
}
.vc-ps-fields .vc-input__label, .vc-ps-fields .vc-input__desc {
  top: 0;
  text-transform: uppercase;
  font-size: 13px;
  height: 18px;
  line-height: 22px;
  position: absolute;
}
.vc-ps-fields .vc-input__label {
  left: 0;
  width: 34px;
}
.vc-ps-fields .vc-input__desc {
  right: 0;
  width: 0;
}

.vc-ps-fields__divider {
  height: 5px;
}

.vc-ps-fields__hex .vc-input__input {
  margin-left: 20%;
  width: 80%;
  height: 18px;
  border: 1px solid #888888;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC;
  margin-bottom: 6px;
  font-size: 13px;
  padding-left: 3px;
}
.vc-ps-fields__hex .vc-input__label {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  text-transform: uppercase;
  font-size: 13px;
  height: 18px;
  line-height: 22px;
}
</style>


================================================
FILE: src/components/saturation/index.js
================================================
import Saturation from './saturation.vue';
import { install } from '@/utils/compoent';

Saturation.install = install;
export default Saturation;


================================================
FILE: src/components/saturation/saturation.vue
================================================
<script>
import { clamp } from '@/utils/utils';

export default {
  name: 'Saturation',
  props: {
    value: Object,
  },
  computed: {
    colors() {
      return this.value;
    },
    bgColor() {
      return `hsl(${this.colors.hsv.h}, 100%, 50%)`;
    },
    pointerTop() {
      return `${(-(this.colors.hsv.v * 100) + 1) + 100}%`;
    },
    pointerLeft() {
      return `${this.colors.hsv.s * 100}%`;
    },
  },
  methods: {
    handleChange(e, skip) {
      !skip && e.preventDefault();
      const { container } = this.$refs;
      if (!container) {
        // for some edge cases, container may not exist. see #220
        return;
      }
      const containerWidth = container.clientWidth;
      const containerHeight = container.clientHeight;

      const xOffset = container.getBoundingClientRect().left + window.pageXOffset;
      const yOffset = container.getBoundingClientRect().top + window.pageYOffset;
      const pageX = e.pageX || (e.touches ? e.touches[0].pageX : 0);
      const pageY = e.pageY || (e.touches ? e.touches[0].pageY : 0);
      const left = clamp(pageX - xOffset, 0, containerWidth);
      const top = clamp(pageY - yOffset, 0, containerHeight);
      const saturation = left / containerWidth;
      const bright = clamp(-(top / containerHeight) + 1, 0, 1);

      this.onChange({
        h: this.colors.hsv.h,
        s: saturation,
        v: bright,
        a: this.colors.hsv.a,
        source: 'hsva',
      });
    },
    onChange(param) {
      this.$emit('change', param);
    },
    handleMouseDown(e) {
      // this.handleChange(e, true)
      window.addEventListener('mousemove', this.handleChange);
      window.addEventListener('mouseup', this.handleChange);
      window.addEventListener('mouseup', this.handleMouseUp);
    },
    handleMouseUp(e) {
      this.unbindEventListeners();
    },
    unbindEventListeners() {
      window.removeEventListener('mousemove', this.handleChange);
      window.removeEventListener('mouseup', this.handleChange);
      window.removeEventListener('mouseup', this.handleMouseUp);
    },
  },
};
</script>

<template>
  <div
    ref="container"
    class="vc-saturation"
    :style="{ background: bgColor }"
    @mousedown="handleMouseDown"
    @touchmove="handleChange"
    @touchstart="handleChange"
  >
    <div class="vc-saturation--white" />
    <div class="vc-saturation--black" />
    <div class="vc-saturation-pointer" :style="{ top: pointerTop, left: pointerLeft }">
      <div class="vc-saturation-circle" />
    </div>
  </div>
</template>

<style>
.vc-saturation,
.vc-saturation--white,
.vc-saturation--black {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.vc-saturation--white {
  background: linear-gradient(to right, #fff, rgba(255,255,255,0));
}
.vc-saturation--black {
  background: linear-gradient(to top, #000, rgba(0,0,0,0));
}
.vc-saturation-pointer {
  cursor: pointer;
  position: absolute;
}
.vc-saturation-circle {
  cursor: head;
  width: 4px;
  height: 4px;
  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);
  border-radius: 50%;
  transform: translate(-2px, -2px);
}
</style>


================================================
FILE: src/components/sketch/index.js
================================================
import Sketch from './sketch.vue';
import { install } from '@/utils/compoent';

Sketch.install = install;
export default Sketch;


================================================
FILE: src/components/sketch/sketch.vue
================================================
<script>
import colorMixin from '@/mixin/color';
import editableInput from '@/components/editable-input';
import saturation from '@/components/saturation';
import hue from '@/components/hue';
import alpha from '@/components/alpha';
import checkboard from '@/components/checkboard';

const presetColors = [
  '#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321',
  '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2',
  '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF',
  'rgba(0,0,0,0)',
];

export default {
  name: 'Sketch',
  components: {
    Saturation: saturation,
    Hue: hue,
    Alpha: alpha,
    EdIn: editableInput,
    Checkboard: checkboard,
  },
  mixins: [colorMixin],
  props: {
    presetColors: {
      type: Array,
      default() {
        return presetColors;
      },
    },
    disableAlpha: {
      type: Boolean,
      default: false,
    },
    disableFields: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    hex() {
      let hex;
      if (this.colors.a < 1)
        hex = this.colors.hex8;
      else
        hex = this.colors.hex;

      return hex.replace('#', '');
    },
    activeColor() {
      const { rgba } = this.colors;
      return `rgba(${[rgba.r, rgba.g, rgba.b, rgba.a].join(',')})`;
    },
  },
  methods: {
    handlePreset(c) {
      this.colorChange(c);
    },
    childChange(data) {
      this.colorChange(data);
    },
    inputChange(data) {
      if (!data)
        return;

      if (data.hex) {
        this.isValidHex(data.hex) && this.colorChange({
          hex: data.hex,
          source: 'hex',
        });
      }
      else if (data.r || data.g || data.b || data.a) {
        this.colorChange({
          r: data.r || this.colors.rgba.r,
          g: data.g || this.colors.rgba.g,
          b: data.b || this.colors.rgba.b,
          a: data.a || this.colors.rgba.a,
          source: 'rgba',
        });
      }
    },
  },
};
</script>

<template>
  <div role="application" aria-label="Sketch color picker" class="vc-sketch" :class="[disableAlpha ? 'vc-sketch__disable-alpha' : '']">
    <div class="vc-sketch-saturation-wrap">
      <Saturation :value="colors" @change="childChange" />
    </div>
    <div class="vc-sketch-controls">
      <div class="vc-sketch-sliders">
        <div class="vc-sketch-hue-wrap">
          <Hue :value="colors" @change="childChange" />
        </div>
        <div v-if="!disableAlpha" class="vc-sketch-alpha-wrap">
          <Alpha :value="colors" @change="childChange" />
        </div>
      </div>
      <div class="vc-sketch-color-wrap">
        <div :aria-label="`Current color is ${activeColor}`" class="vc-sketch-active-color" :style="{ background: activeColor }" />
        <Checkboard />
      </div>
    </div>
    <div v-if="!disableFields" class="vc-sketch-field">
      <!-- rgba -->
      <div class="vc-sketch-field--double">
        <EdIn label="hex" :value="hex" @change="inputChange" />
      </div>
      <div class="vc-sketch-field--single">
        <EdIn label="r" :value="colors.rgba.r" @change="inputChange" />
      </div>
      <div class="vc-sketch-field--single">
        <EdIn label="g" :value="colors.rgba.g" @change="inputChange" />
      </div>
      <div class="vc-sketch-field--single">
        <EdIn label="b" :value="colors.rgba.b" @change="inputChange" />
      </div>
      <div v-if="!disableAlpha" class="vc-sketch-field--single">
        <EdIn label="a" :value="colors.a" :arrow-offset="0.01" :max="1" @change="inputChange" />
      </div>
    </div>
    <div class="vc-sketch-presets" role="group" aria-label="A color preset, pick one to set as current color">
      <template v-for="c in presetColors">
        <div
          v-if="!isTransparent(c)"
          :key="`!${c}`"
          class="vc-sketch-presets-color"
          :aria-label="`Color:${c}`"
          :style="{ background: c }"
          @click="handlePreset(c)"
        />
        <div
          v-else
          :key="c"
          :aria-label="`Color:${c}`"
          class="vc-sketch-presets-color"
          @click="handlePreset(c)"
        >
          <Checkboard />
        </div>
      </template>
    </div>
  </div>
</template>

<style>
.vc-sketch {
  position: relative;
  width: 200px;
  padding: 10px 10px 0;
  box-sizing: initial;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15), 0 8px 16px rgba(0, 0, 0, .15);
}

.vc-sketch-saturation-wrap {
  width: 100%;
  padding-bottom: 75%;
  position: relative;
  overflow: hidden;
}

.vc-sketch-controls {
  display: flex;
}

.vc-sketch-sliders {
  padding: 4px 0;
  flex: 1;
}

.vc-sketch-sliders .vc-hue,
.vc-sketch-sliders .vc-alpha-gradient {
  border-radius: 2px;
}

.vc-sketch-hue-wrap {
  position: relative;
  height: 10px;
}

.vc-sketch-alpha-wrap {
  position: relative;
  height: 10px;
  margin-top: 4px;
  overflow: hidden;
}

.vc-sketch-color-wrap {
  width: 24px;
  height: 24px;
  position: relative;
  margin-top: 4px;
  margin-left: 4px;
  border-radius: 3px;
}

.vc-sketch-active-color {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), inset 0 0 4px rgba(0, 0, 0, .25);
  z-index: 2;
}

.vc-sketch-color-wrap .vc-checkerboard {
  background-size: auto;
}

.vc-sketch-field {
  display: flex;
  padding-top: 4px;
}

.vc-sketch-field .vc-input__input {
  width: 90%;
  padding: 4px 0 3px 10%;
  border: none;
  box-shadow: inset 0 0 0 1px #ccc;
  font-size: 10px;
}

.vc-sketch-field .vc-input__label {
  display: block;
  text-align: center;
  font-size: 11px;
  color: #222;
  padding-top: 3px;
  padding-bottom: 4px;
  text-transform: capitalize;
}

.vc-sketch-field--single {
  flex: 1;
  padding-left: 6px;
}

.vc-sketch-field--double {
  flex: 2;
}

.vc-sketch-presets {
  margin-right: -10px;
  margin-left: -10px;
  padding-left: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.vc-sketch-presets-color {
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 10px 10px 0;
  vertical-align: top;
  cursor: pointer;
  width: 16px;
  height: 16px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

.vc-sketch-presets-color .vc-checkerboard {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  border-radius: 3px;
}

.vc-sketch__disable-alpha .vc-sketch-color-wrap {
  height: 10px;
}
</style>


================================================
FILE: src/components/slider/index.js
================================================
import Slider from './slider.vue';
import { install } from '@/utils/compoent';

Slider.install = install;
export default Slider;


================================================
FILE: src/components/slider/slider.vue
================================================
<script>
import colorMixin from '@/mixin/color';
import hue from '@/components/hue';

const DEFAULT_SATURATION = 0.5;

export default {
  name: 'Slider',
  components: {
    Hue: hue,
  },
  mixins: [colorMixin],
  props: {
    swatches: {
      type: Array,
      default() {
        // also accepts: ['.80', '.65', '.50', '.35', '.20']
        return [
          { s: DEFAULT_SATURATION, l: 0.8 },
          { s: DEFAULT_SATURATION, l: 0.65 },
          { s: DEFAULT_SATURATION, l: 0.5 },
          { s: DEFAULT_SATURATION, l: 0.35 },
          { s: DEFAULT_SATURATION, l: 0.2 },
        ];
      },
    },
  },
  computed: {
    normalizedSwatches() {
      const { swatches } = this;
      return swatches.map((swatch) => {
        // to be compatible with another data format ['.80', '.65', '.50', '.35', '.20']
        if (typeof swatch !== 'object') {
          return {
            s: DEFAULT_SATURATION,
            l: swatch,
          };
        }
        return swatch;
      });
    },
  },
  methods: {
    isActive(swatch, index) {
      const { hsl } = this.colors;
      if (hsl.l === 1 && swatch.l === 1)
        return true;

      if (hsl.l === 0 && swatch.l === 0)
        return true;

      return (
        Math.abs(hsl.l - swatch.l) < 0.01 && Math.abs(hsl.s - swatch.s) < 0.01
      );
    },
    hueChange(data) {
      this.colorChange(data);
    },
    handleSwClick(index, swatch) {
      this.colorChange({
        h: this.colors.hsl.h,
        s: swatch.s,
        l: swatch.l,
        source: 'hsl',
      });
    },
  },
};
</script>

<template>
  <div role="application" aria-label="Slider color picker" class="vc-slider">
    <div class="vc-slider-hue-warp">
      <Hue :value="colors" @change="hueChange" />
    </div>
    <div class="vc-slider-swatches" role="group">
      <div
        v-for="(swatch, index) in normalizedSwatches"
        :key="index"
        class="vc-slider-swatch"
        :data-index="index"
        :aria-label="`color:${colors.hex}`"
        role="button"
        @click="handleSwClick(index, swatch)"
      >
        <div
          class="vc-slider-swatch-picker"
          :class="{ 'vc-slider-swatch-picker--active': isActive(swatch, index), 'vc-slider-swatch-picker--white': swatch.l === 1 }"
          :style="{ background: `hsl(${colors.hsl.h}, ${swatch.s * 100}%, ${swatch.l * 100}%)` }"
        />
      </div>
    </div>
  </div>
</template>

<style>
.vc-slider {
  position: relative;
  width: 410px;
}
.vc-slider-hue-warp {
  height: 12px;
  position: relative;
}
.vc-slider-hue-warp .vc-hue-picker {
  width: 14px;
  height: 14px;
  border-radius: 6px;
  transform: translate(-7px, -2px);
  background-color: rgb(248, 248, 248);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
}
.vc-slider-swatches {
  display: flex;
  margin-top: 20px;
}
.vc-slider-swatch {
  margin-right: 1px;
  flex: 1;
  width: 20%;
}
.vc-slider-swatch:first-child {
  margin-right: 1px;
}
.vc-slider-swatch:first-child .vc-slider-swatch-picker {
  border-radius: 2px 0px 0px 2px;
}
.vc-slider-swatch:last-child {
  margin-right: 0;
}
.vc-slider-swatch:last-child .vc-slider-swatch-picker {
  border-radius: 0px 2px 2px 0px;
}
.vc-slider-swatch-picker {
  cursor: pointer;
  height: 12px;
}
.vc-slider-swatch:nth-child(n) .vc-slider-swatch-picker.vc-slider-swatch-picker--active {
  transform: scaleY(1.8);
  border-radius: 3.6px/2px;
}
.vc-slider-swatch-picker--white {
  box-shadow: inset 0 0 0 1px #ddd;
}
.vc-slider-swatch-picker--active.vc-slider-swatch-picker--white {
  box-shadow: inset 0 0 0 0.6px #ddd;
}
</style>


================================================
FILE: src/components/swatches/index.js
================================================
import Swatches from './swatches.vue';
import { install } from '@/utils/compoent';

Swatches.install = install;
export default Swatches;


================================================
FILE: src/components/swatches/swatches.vue
================================================
<script>
import material from 'material-colors';
import colorMixin from '@/mixin/color';

const colorMap = [
  'red', 'pink', 'purple', 'deepPurple',
  'indigo', 'blue', 'lightBlue', 'cyan',
  'teal', 'green', 'lightGreen', 'lime',
  'yellow', 'amber', 'orange', 'deepOrange',
  'brown', 'blueGrey', 'black',
];
const colorLevel = ['900', '700', '500', '300', '100'];
const defaultColors = (() => {
  const colors = [];
  colorMap.forEach((type) => {
    let typeColor = [];
    if (type.toLowerCase() === 'black' || type.toLowerCase() === 'white') {
      typeColor = typeColor.concat(['#000000', '#FFFFFF']);
    }
    else {
      colorLevel.forEach((level) => {
        const color = material[type][level];
        typeColor.push(color.toUpperCase());
      });
    }
    colors.push(typeColor);
  });
  return colors;
})();

export default {
  name: 'Swatches',
  mixins: [colorMixin],
  props: {
    palette: {
      type: Array,
      default() {
        return defaultColors;
      },
    },
  },
  computed: {
    pick() {
      return this.colors.hex;
    },
  },
  methods: {
    equal(color) {
      return color.toLowerCase() === this.colors.hex.toLowerCase();
    },
    handlerClick(c) {
      this.colorChange({
        hex: c,
        source: 'hex',
      });
    },
  },

};
</script>

<template>
  <div role="application" aria-label="Swatches color picker" class="vc-swatches" :data-pick="pick">
    <div class="vc-swatches-box" role="listbox">
      <div v-for="(group, $idx) in palette" :key="$idx" class="vc-swatches-color-group">
        <div
          v-for="c in group" :key="c"
          class="vc-swatches-color-it"
          :class="[{ 'vc-swatches-color--white': c === '#FFFFFF' }]"
          role="option"
          :aria-label="`Color:${c}`"
          :aria-selected="equal(c)"
          :data-color="c"
          :style="{ background: c }"
          tabindex="0"
          @keyup.enter="handlerClick(c)"
          @click="handlerClick(c)"
        >
          <div v-show="equal(c)" class="vc-swatches-pick">
            <svg style="width: 24px; height:24px;" viewBox="0 0 24 24">
              <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.vc-swatches {
  width: 320px;
  height: 240px;
  overflow-y: scroll;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16);
 }
.vc-swatches-box {
  padding: 16px 0 6px 16px;
  overflow: hidden;
}
.vc-swatches-color-group {
  padding-bottom: 10px;
  width: 40px;
  float: left;
  margin-right: 10px;
}
.vc-swatches-color-it {
  box-sizing: border-box;
  width: 40px;
  height: 24px;
  cursor: pointer;
  background: #880e4f;
  margin-bottom: 1px;
  overflow: hidden;
  -ms-border-radius: 2px 2px 0 0;
  -moz-border-radius: 2px 2px 0 0;
  -o-border-radius: 2px 2px 0 0;
  -webkit-border-radius: 2px 2px 0 0;
  border-radius: 2px 2px 0 0;
}
.vc-swatches-color--white {
  border: 1px solid #DDD;
}
.vc-swatches-pick {
  fill: rgb(255, 255, 255);
  margin-left: 8px;
  display: block;
}
.vc-swatches-color--white .vc-swatches-pick {
  fill: rgb(51, 51, 51);
}
</style>


================================================
FILE: src/components/twitter/index.js
================================================
import Twitter from './twitter.vue';
import { install } from '@/utils/compoent';

Twitter.install = install;
export default Twitter;


================================================
FILE: src/components/twitter/twitter.vue
================================================
<script>
import editableInput from '@/components/editable-input';
import colorMixin from '@/mixin/color';

const defaultColors = [
  '#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3',
  '#EB144C', '#F78DA7', '#9900EF',
];

export default {
  name: 'Twitter',
  components: {
    EditableInput: editableInput,
  },
  mixins: [colorMixin],
  props: {
    width: {
      type: [String, Number],
      default: 276,
    },
    defaultColors: {
      type: Array,
      default() {
        return defaultColors;
      },
    },
    triangle: {
      default: 'top-left',
      validator(value) {
        return ['hide', 'top-left', 'top-right'].includes(value);
      },
    },
  },
  computed: {
    hsv() {
      const { hsv } = this.colors;
      return {
        h: hsv.h.toFixed(),
        s: (hsv.s * 100).toFixed(),
        v: (hsv.v * 100).toFixed(),
      };
    },
    hex() {
      const { hex } = this.colors;
      return hex && hex.replace('#', '');
    },
  },
  methods: {
    equal(color) {
      return color.toLowerCase() === this.colors.hex.toLowerCase();
    },
    handlerClick(color) {
      this.colorChange({
        hex: color,
        source: 'hex',
      });
    },
    inputChange(data) {
      if (!data)
        return;

      if (data['#']) {
        this.isValidHex(data['#']) && this.colorChange({
          hex: data['#'],
          source: 'hex',
        });
      }
      else if (data.r || data.g || data.b || data.a) {
        this.colorChange({
          r: data.r || this.colors.rgba.r,
          g: data.g || this.colors.rgba.g,
          b: data.b || this.colors.rgba.b,
          a: data.a || this.colors.rgba.a,
          source: 'rgba',
        });
      }
      else if (data.h || data.s || data.v) {
        this.colorChange({
          h: data.h || this.colors.hsv.h,
          s: (data.s / 100) || this.colors.hsv.s,
          v: (data.v / 100) || this.colors.hsv.v,
          source: 'hsv',
        });
      }
    },
  },
};
</script>

<template>
  <div
    class="vc-twitter"
    :class="{
      'vc-twitter-hide-triangle ': triangle === 'hide',
      'vc-twitter-top-left-triangle ': triangle === 'top-left',
      'vc-twitter-top-right-triangle ': triangle === 'top-right',
    }"
    :style="{
      width: typeof width === 'number' ? `${width}px` : width,
    }"
  >
    <div class="vc-twitter-triangle-shadow" />
    <div class="vc-twitter-triangle" />

    <div class="vc-twitter-body">
      <span
        v-for="(color, index) in defaultColors"
        :key="index"
        class="vc-twitter-swatch"
        :style="{
          background: color,
          boxShadow: `0 0 4px ${equal(color) ? color : 'transparent'}`,
        }"
        role="button"
        tabindex="0"
        @keyup.enter="handlerClick(color)"
        @click="handlerClick(color)"
      />
      <div class="vc-twitter-hash">
        #
      </div>
      <EditableInput label="#" :value="hex" @change="inputChange" />
      <div class="vc-twitter-clear" />
    </div>
  </div>
</template>

<style>
.vc-twitter {
background: #fff;
border: 0 solid rgba(0,0,0,0.25);
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
border-radius: 4px;
position: relative;
}
.vc-twitter-triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 9px 10px 9px;
border-color: transparent transparent #fff transparent;
position: absolute;
}
.vc-twitter-triangle-shadow {
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 9px 10px 9px;
border-color: transparent transparent rgba(0, 0, 0, .1) transparent;
position: absolute;
}
.vc-twitter-body {
padding: 15px 9px 9px 15px;
}
.vc-twitter .vc-editable-input {
position: relative;
}
.vc-twitter .vc-editable-input input {
width: 100px;
font-size: 14px;
color: #666;
border: 0px;
outline: none;
height: 28px;
box-shadow: inset 0 0 0 1px #F0F0F0;
box-sizing: content-box;
border-radius: 0 4px 4px 0;
float: left;
padding: 1px;
padding-left: 8px;
}
.vc-twitter .vc-editable-input span {
display: none;
}
.vc-twitter-hash {
background: #F0F0F0;
height: 30px;
width: 30px;
border-radius: 4px 0 0 4px;
float: left;
color: #98A1A4;
display: flex;
align-items: center;
justify-content: center;
}
.vc-twitter-swatch {
width: 30px;
height: 30px;
float: left;
border-radius: 4px;
margin: 0 6px 6px 0;
cursor: pointer;
position: relative;
}
.vc-twitter-clear {
clear: both;
}
.vc-twitter-hide-triangle .vc-twitter-triangle {
display: none;
}
.vc-twitter-hide-triangle .vc-twitter-triangle-shadow {
display: none;
}
.vc-twitter-top-left-triangle .vc-twitter-triangle{
top: -10px;
left: 12px;
}
.vc-twitter-top-left-triangle .vc-twitter-triangle-shadow{
top: -11px;
left: 12px;
}
.vc-twitter-top-right-triangle .vc-twitter-triangle{
top: -10px;
right: 12px;
}
.vc-twitter-top-right-triangle .vc-twitter-triangle-shadow{
top: -11px;
right: 12px;
}
</style>


================================================
FILE: src/components.js
================================================
/* Do not modify the automatically generated code */
import Alpha from '@/components/alpha';
import Checkboard from '@/components/checkboard';
import Chrome from '@/components/chrome';
import Compact from '@/components/compact';
import EditableInput from '@/components/editable-input';
import Grayscale from '@/components/grayscale';
import Hue from '@/components/hue';
import Material from '@/components/material';
import Photoshop from '@/components/photoshop';
import Saturation from '@/components/saturation';
import Sketch from '@/components/sketch';
import Slider from '@/components/slider';
import Swatches from '@/components/swatches';
import Twitter from '@/components/twitter';

const components = [
  Alpha,
  Checkboard,
  Chrome,
  Compact,
  EditableInput,
  Grayscale,
  Hue,
  Material,
  Photoshop,
  Saturation,
  Sketch,
  Slider,
  Swatches,
  Twitter,
];

export {
  components,
  Alpha,
  Checkboard,
  Chrome,
  Compact,
  EditableInput,
  Grayscale,
  Hue,
  Material,
  Photoshop,
  Saturation,
  Sketch,
  Slider,
  Swatches,
  Twitter,
};


================================================
FILE: src/create.js
================================================
import { prefix, size } from '@/defaultConfig';

function create(params = {}) {
  return (app) => {
    const { components, componentPrefix = prefix, componentSize = size } = params;

    app.config.globalProperties.$VUI = {
      size: componentSize,
      prefix: componentPrefix,
    };
    (Array.isArray(components) ? components : Object.values(components)).forEach((component) => {
      app.component(`${componentPrefix}${component.name}`, component);
    });
  };
}

export default create;


================================================
FILE: src/defaultConfig.js
================================================
const name = 'VueColor';
// 自定义组件前缀
const prefix = '';
const cssPrefix = '';
const size = 'medium';

export {
  name,
  prefix,
  size,
  cssPrefix,
};


================================================
FILE: src/index.js
================================================
import preset from '@/preset';
import create from '@/create';
import ColorMixin from '@/mixin/color';

export * from '@/components';
export {
  preset as default,
  preset as install,
  create,
  ColorMixin,
};


================================================
FILE: src/mixin/color.js
================================================
import { TinyColor } from '@ctrl/tinycolor';

function tinycolor(...args) {
  return new TinyColor(...args);
}

function _colorChange(data, oldHue) {
  const alpha = data && data.a;
  let color;

  // hsl is better than hex between conversions
  if (data && data.hsl)
    color = tinycolor(data.hsl);
  else if (data && data.hex && data.hex.length > 0)
    color = tinycolor(data.hex);
  else if (data && data.hsv)
    color = tinycolor(data.hsv);
  else if (data && data.rgba)
    color = tinycolor(data.rgba);
  else if (data && data.rgb)
    color = tinycolor(data.rgb);
  else
    color = tinycolor(data);

  if (color && (color._a === undefined || color._a === null))
    color.setAlpha(alpha || color.getAlpha());

  const hsl = color.toHsl();
  const hsv = color.toHsv();

  if (hsl.s === 0)
    hsv.h = hsl.h = data.h || (data.hsl && data.hsl.h) || oldHue || 0;

  /* --- comment this block to fix #109, may cause #25 again --- */
  // when the hsv.v is less than 0.0164 (base on test)
  // because of possible loss of precision
  // the result of hue and saturation would be miscalculated
  if (hsv.v < 0.0164) {
    hsv.h = data.h || (data.hsv && data.hsv.h) || 0;
    hsv.s = data.s || (data.hsv && data.hsv.s) || 0;
  }

  if (hsl.l < 0.01) {
    hsl.h = data.h || (data.hsl && data.hsl.h) || 0;
    hsl.s = data.s || (data.hsl && data.hsl.s) || 0;
  }
  /* ------ */

  return {
    hsl,
    hex: color.toHexString().toUpperCase(),
    hex8: color.toHex8String().toUpperCase(),
    rgba: color.toRgb(),
    hsv,
    oldHue: data.h || oldHue || hsl.h,
    source: data.source,
    a: color.getAlpha(),
  };
}

export default {
  model: {
    prop: 'modelValue',
    event: 'update:modelValue',
  },
  props: ['modelValue'],
  data() {
    return {
      val: _colorChange(this.modelValue),
    };
  },
  computed: {
    colors: {
      get() {
        return this.val;
      },
      set(newVal) {
        this.val = newVal;
        this.$emit('update:modelValue', newVal);
      },
    },
  },
  watch: {
    modelValue(newVal) {
      this.val = _colorChange(newVal);
    },
  },
  methods: {
    colorChange(data, oldHue) {
      this.oldHue = this.colors.hsl.h;
      this.colors = _colorChange(data, oldHue || this.oldHue);
    },
    isValidHex(hex) {
      return tinycolor(hex).isValid;
    },
    simpleCheckForValidColor(data) {
      const keysToCheck = ['r', 'g', 'b', 'a', 'h', 's', 'l', 'v'];
      let checked = 0;
      let passed = 0;

      for (let i = 0; i < keysToCheck.length; i++) {
        const letter = keysToCheck[i];
        if (data[letter]) {
          checked++;
          if (!isNaN(data[letter]))
            passed++;
        }
      }

      if (checked === passed)
        return data;
    },
    paletteUpperCase(palette) {
      return palette.map(c => c.toUpperCase());
    },
    isTransparent(color) {
      return tinycolor(color).getAlpha() === 0;
    },
  },
};


================================================
FILE: src/preset.js
================================================
import create from '@/create';
import { components } from '@/components';

const preset = create({
  components,
});

export default preset;


================================================
FILE: src/utils/compoent.js
================================================
import { prefix } from '@/defaultConfig';

export const install = function (app, options) {
  const { componentPrefix = prefix } = options || {};
  app.component(`${componentPrefix}${this.name}`, this);
};


================================================
FILE: src/utils/utils.js
================================================
export function clamp(value, min, max) {
  return min < max
    ? (value < min ? min : value > max ? max : value)
    : (value < max ? max : value > min ? min : value);
}


================================================
FILE: types.d.ts
================================================
declare module '@ckpack/vue-color' {
    import type { DefineComponent } from 'vue';
    import type { ColorInput, HSV, HSL, RGBA } from '@ctrl/tinycolor';

    interface Payload {
        a: number
        hex: string
        hex8: string
        hsl: HSL
        hsv: HSV
        oldHue: number
        rgba: RGBA
        source: 'rgba' | 'hsl' | 'hex' | 'hsv' | 'hsva'
    }

    interface Props {
        modelValue?: ColorInput
        'onUpdate:modelValue'?: (data: Payload) => void
    }

    interface Context {
        colorChange: Function;
        isValidHex: Function
        simpleCheckForValidColor: Function
        paletteUpperCase: Function
        isTransparent: Function
    }

    const Chrome: DefineComponent<Props & {
        disableAlpha?: boolean
        disableFields?: boolean
    }, Context>;

    const Compact: DefineComponent<Props & {
        palette?: ColorInput[]
    }, Context>;

    const Grayscale: DefineComponent<Props & {
        palette?: ColorInput[]
    }, Context>;

    const Material: DefineComponent<Props & {
        value?: 'horizontal' | 'vertical'
    }, Context>;

    const Photoshop: DefineComponent<Props & {
        head?: string
        disableFields?: boolean
        hasResetButton?: boolean
        acceptLabel?: string
        cancelLabel?: string
        resetLabel?: string
        newLabel?: string
        currentLabel?: string
    }, Context>;

    const Sketch: DefineComponent<Props & {
        presetColors?: ColorInput[]
        disableAlpha?: boolean
        disableFields?: boolean
    }, Context>;

    const Slider: DefineComponent<Props & {
        swatches?: string[] | { s: number, l: number }[]
    }, Context>;

    const Swatches: DefineComponent<Props & {
        palette?: ColorInput[]
    }, Context>;

    const Twitter: DefineComponent<Props & {
        width?: string | number
        defaultColors?: ColorInput[]
        triangle?: 'hide' | 'top-left' | 'top-right'
    }, Context>;
}