the first commit

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    ["@babel/preset-env", { "modules": false }]
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        ["@babel/preset-env", { "targets": { "node": "current" }}]
+      ]
+    }
+  }
+}

.eslintrc

@@ -0,0 +1,16 @@
+{
+  "extends": [
+    "standard",
+    "plugin:vue/essential",
+    "plugin:jest/recommended"
+  ],
+  "plugins": [
+    "jest"
+  ],
+  "rules": {
+    "semi": [
+      "error",
+      "always"
+    ]
+  }
+}

.github/ISSUE_TEMPLATE/----feature-request.md

@@ -0,0 +1,17 @@
+---
+name: "\U0001F680  Feature request"
+about: Suggest an idea for this project
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/---bug-report.md

@@ -0,0 +1,35 @@
+---
+name: "\U0001F41B Bug report"
+about: Create a report to help us improve
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Demo**
+If applicable, add a demo to demonstrate the issue. You can use [codesandbox](https://codesandbox.io/) or [jsfiddle](https://jsfiddle.net)
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/stale.yml

@@ -0,0 +1,15 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 7
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - pinned
+  - security
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false

.gitignore

@@ -0,0 +1,8 @@
+node_modules
+.vscode
+docs/.vuepress/dist
+.vscode
+dist
+*.log
+coverage
+yarn-error.*

.travis.yml

@@ -0,0 +1,9 @@
+language: node_js
+node_js: '9'
+cache: yarn
+install:
+  - npm install -g codecov
+  - yarn
+after_success:
+  - yarn cover
+  - bash <(curl -s https://codecov.io/bash)

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) Baianat <code@baianat.com>
+
+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.

README.md

@@ -0,0 +1,63 @@
+<p align="center">
+  <a href="https://baianat.github.io/verte/" target="_blank">
+    <img width="400" alt="verte" src="https://baianat.github.io/verte/verte.png">
+  </a>
+</p>
+
+[![Build Status](https://img.shields.io/travis/baianat/verte.svg?style=flat-square)](https://travis-ci.org/baianat/verte)
+[![Codecov](https://img.shields.io/codecov/c/github/baianat/verte.svg?style=flat-square)](https://codecov.io/github/baianat/verte)
+[![Codacy Badge](https://api.codacy.com/project/badge/Grade/32d598bdf1094532baf51ac7d89aebfd)](https://www.codacy.com/app/logaretm/verte?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=baianat/verte&amp;utm_campaign=Badge_Grade)
+[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/baianat/verte.svg)](http://isitmaintained.com/project/baianat/verte "Average time to resolve an issue")
+[![Percentage of issues still open](http://isitmaintained.com/badge/open/baianat/verte.svg)](http://isitmaintained.com/project/baianat/verte "Percentage of issues still open")
+[![npm](https://img.shields.io/npm/dm/verte.svg)](https://npm-stat.com/charts.html?package=verte)
+[![npm](https://img.shields.io/npm/v/verte.svg)](https://www.npmjs.com/package/verte)
+
+# Verte
+
+A Complete Vue.js Color Picker Component
+
+## Features
+
+- Multiple Color Models support: RGB, HSL, and HEX.
+- SSR Friendly.
+- Small file size, only 7kb gzipped.
+- Two way binding support.
+
+## Getting Started
+
+### Installation
+
+First step is to install it using `yarn` or `npm`:
+
+```bash
+npm install verte --save
+
+# or use yarn
+yarn add verte
+```
+
+### Basic usage
+
+```html {2,8,13}
+<template>
+  <verte picker="square" model="rgb"></verte>
+</template>
+
+<script>
+  import Verte from 'verte';
+  import 'verte/dist/verte.css';
+  // register component globally
+  Vue.component(Verte.name, Verte);
+
+  new Vue ({
+    el: '#app',
+    // OR register locally
+    components: { Verte }
+  });
+</script>
+
+```
+
+## License
+
+MIT

docs/.vuepress/config.js

@@ -0,0 +1,57 @@
+const sidebars = {
+  guide: [
+    '',
+    'getting-started',
+    'color-history',
+    'binding'
+  ],
+  api: 'api',
+  examples: 'examples'
+};
+
+function genSidebarConfig(title) {
+  return [
+    {
+      title,
+      collapsable: false,
+      children: sidebars[title.toLowerCase()]
+    }
+  ]
+}
+
+module.exports = {
+  title: 'Verte',
+  description: 'A Complete Vue.js Color Picker Component',
+  base: '/verte/',
+  serviceWorker: true,
+  head: [
+    ['meta', { charset: 'utf-8' }],
+    ['meta', { name: "theme-color", content: "#41b883" }],
+    ['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1' }],
+    ['meta', { property: 'og:image', content: '/verte/verte.png' }],
+  ],
+  themeConfig: {
+    repo: 'baianat/verte',
+    docsRepo: 'baianat/verte',
+    docsDir: 'docs',
+    docsBranch: 'master',
+    editLinks: true,
+    locales: {
+      '/': {
+        label: 'English',
+        selectText: 'Languages',
+        editLinkText: 'Help us improve this page!',
+        nav: [
+          { text: 'Guide', link: '/guide/' },
+          { text: 'API', link: '/api' },
+          { text: 'Examples', link: '/examples' },
+        ],
+        sidebar: {
+          '/guide/': genSidebarConfig('Guide'),
+          '/examples/': genSidebarConfig('Examples'),
+          '/api/': genSidebarConfig('API'),
+        }
+      }
+    }
+  }
+}

docs/.vuepress/enhanceApp.js

@@ -0,0 +1,5 @@
+import verte from '../../src/components/verte';
+
+export default ({ Vue }) => {
+  Vue.component('verte-demo', verte);
+};

docs/README.md

@@ -0,0 +1,6 @@
+---
+home: true
+heroImage: /verte.png
+actionText: Getting Started →
+actionLink: ./guide/
+---

docs/api.md

@@ -0,0 +1,57 @@
+---
+sidebar: auto
+---
+
+# API
+
+## Props
+
+|  Name  | Values | Default | Description |
+|--------|--------|---------|-------------|
+|`picker`| 'wheel' \| 'square' | 'wheel' | chose between pickers style |
+|`value` | a valid color string |'#000' | the initial color value |
+|`model` | 'rgb' \| 'hex' \| 'hsl' | 'rgb' | the output color model |
+|`menuPosition` | 'top' \| 'bottom' \| 'left' \| 'right' \| 'center' | 'bottom' | the output color model |
+|`showHistory` | boolean | true | show a list of the recent colors at the bottom of the picker |
+| `colorHistory` | `string[]` | `null` | a list of strings representing color values. If provided it will isolate the picker from other pickers and it will maintain its own list. |
+|`display` | String | 'vertical' | controls the layout of the component. [List of allowed values](#display-modes). |
+|`draggable` | Boolean | true | turn on/off dragging the picker menu |
+|`enableAlpha` | Boolean | true | turn on/off the alpha slider |
+|`rgbSliders` | Boolean | false | show/hide rgb sliders |
+
+## Display Modes
+
+Verte currently has two display layouts:
+
+- `picker`: The component is hidden until the user presses on the input, then it is displayed vertically.
+- `widget`: The component is always displayed vertically, the trigger input is hidden.
+
+We are planning for `horizontal` and `horizontal-widge` in the future. [You can view the different layouts here](/examples.md#layout-customization)
+
+## Slots
+
+you can pass to `verte` slot an element(icon) to replace the guide circle icon.
+
+::: tip
+The guide icon color and fill style will change to the current selected color, if you want parts of your icon not to change, you have add fill/color style inline.
+:::
+
+```html {4,5,6,7}
+<template>
+  <verte :picker="wheel" :model="rgb">
+
+    <svg viewBox="0 0 24 24">
+      <path d="M0 20h24v4H0z"/>
+      <path style="fill: #000" d="M11 3L5.5 17h2.25l1.12-3h6.25l1.12 3h2.25L13 3h-2zm-1.38 9L12 5.67 14.38 12H9.62z"/>
+    </svg>
+
+  </verte>
+</template>
+```
+
+## Events
+
+|  Name | Payload Type | Description |
+|:------|:------------:|:------------|
+|`input`| `string`     | Emits a string representation of the model for the selected color value |
+|`close`| `Boolean`    | Emitted when user close color picker dialog and returns model for the selected value |