The very beginning

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    ["es2015", { "modules": false }],
+    "stage-0"
+  ]
+}

.eslintignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+  extends: 'standard',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  env: {
+    browser: true,
+  },
+  // add your custom rules here
+  'rules': {
+    // allow paren-less arrow functions
+    'arrow-parens': 0,
+    // allow async-await
+    'generator-star-spacing': 0,
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+  }
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+*.sublime-project

README.md

@@ -1,2 +1,175 @@
 # vue-circle-slider
+
+[![npm](https://img.shields.io/npm/v/vue-circle-slider.svg) ![npm](https://img.shields.io/npm/dm/vue-circle-slider.svg)](https://www.npmjs.com/package/vue-circle-slider)
+[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
+
 Circle slider component for Vue.js
+
+## Table of contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Example](#example)
+
+# Installation
+
+```
+npm install --save vue-circle-slider
+```
+
+## Default import
+
+Install all the components:
+
+```javascript
+import Vue from 'vue'
+import VueCircleSlider from 'vue-circle-slider'
+
+Vue.use(VueCircleSlider)
+```
+
+Use specific components:
+
+```javascript
+import Vue from 'vue'
+import { Test } from 'vue-circle-slider'
+
+Vue.component('test', Test)
+```
+
+**⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.**
+
+## Distribution import
+
+Install all the components:
+
+```javascript
+import 'vue-circle-slider/dist/vue-circle-slider.css'
+import VueCircleSlider from 'vue-circle-slider/dist/vue-circle-slider.common'
+
+Vue.use(VueCircleSlider)
+```
+
+Use specific components:
+
+```javascript
+import 'vue-circle-slider/dist/vue-circle-slider.css'
+import { Test } from 'vue-circle-slider/dist/vue-circle-slider.common'
+
+Vue.component('test', Test)
+```
+
+**⚠️ You may have to setup your bundler to embed the css file in your page.**
+
+## Browser
+
+```html
+<link rel="stylesheet" href="vue-circle-slider/dist/vue-circle-slider.css"/>
+
+<script src="vue.js"></script>
+<script src="vue-circle-slider/dist/vue-circle-slider.browser.js"></script>
+```
+
+The plugin should be auto-installed. If not, you can install it manually with the instructions below.
+
+Install all the components:
+
+```javascript
+Vue.use(VueCircleSlider)
+```
+
+Use specific components:
+
+```javascript
+Vue.component('test', VueCircleSlider.Test)
+```
+
+## Source import
+
+Install all the components:
+
+```javascript
+import Vue from 'vue'
+import VueCircleSlider from 'vue-circle-slider/src'
+
+Vue.use(VueCircleSlider)
+```
+
+Use specific components:
+
+```javascript
+import Vue from 'vue'
+import { Test } from 'vue-circle-slider/src'
+
+Vue.component('test', Test)
+```
+
+**⚠️ You need to configure your bundler to compile `.vue` files.** More info [in the official documentation](https://vuejs.org/v2/guide/single-file-components.html).
+
+# Usage
+
+> TODO
+
+# Example
+
+> TODO
+
+---
+
+# Plugin Development
+
+## Installation
+
+The first time you create or clone your plugin, you need to install the default dependencies:
+
+```
+npm install
+```
+
+## Watch and compile
+
+This will run webpack in watching mode and output the compiled files in the `dist` folder.
+
+```
+npm run dev
+```
+
+## Use it in another project
+
+While developping, you can follow the install instructions of your plugin and link it into the project that uses it.
+
+In the plugin folder:
+
+```
+npm link
+```
+
+In the other project folder:
+
+```
+npm link vue-circle-slider
+```
+
+This will install it in the dependencies as a symlink, so that it gets any modifications made to the plugin.
+
+## Publish to npm
+
+You may have to login to npm before, with `npm adduser`. The plugin will be built in production mode before getting published on npm.
+
+```
+npm publish
+```
+
+## Manual build
+
+This will build the plugin into the `dist` folder in production mode.
+
+```
+npm run build
+```
+
+---
+
+## License
+
+[MIT](http://opensource.org/licenses/MIT)

config/webpack.config.base.js

@@ -0,0 +1,42 @@
+var webpack = require('webpack')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+var outputFile = 'vue-circle-slider'
+var globalName = 'VueCircleSlider'
+
+var config = require('../package.json')
+
+module.exports = {
+  entry: './src/index.js',
+  module: {
+    rules: [
+      {
+        enforce: 'pre',
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /.js$/,
+        use: 'babel-loader',
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            css: ExtractTextPlugin.extract('css-loader'),
+            sass: ExtractTextPlugin.extract('css-loader!sass-loader'),
+            scss: ExtractTextPlugin.extract('css-loader!sass-loader'),
+          },
+        },
+      },
+    ],
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'VERSION': JSON.stringify(config.version),
+    }),
+    new ExtractTextPlugin(outputFile + '.css'),
+  ],
+}

config/webpack.config.browser.js

@@ -0,0 +1,29 @@
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var base = require('./webpack.config.base')
+var path = require('path')
+
+var outputFile = 'vue-circle-slider'
+var globalName = 'VueCircleSlider'
+
+module.exports = merge(base, {
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    filename: outputFile + '.browser.js',
+    library: globalName,
+    libraryTarget: 'umd',
+  },
+  externals: {
+    // Put external libraries like lodash here
+    // With their global name
+    // Example: 'lodash': '_'
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: true,
+      },
+      mangle: false,
+    }),
+  ],
+})

config/webpack.config.common.js

@@ -0,0 +1,29 @@
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var base = require('./webpack.config.base')
+var path = require('path')
+
+var outputFile = 'vue-circle-slider'
+var globalName = 'VueCircleSlider'
+
+module.exports = merge(base, {
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    filename: outputFile + '.common.js',
+    libraryTarget: 'commonjs2',
+  },
+  target: 'node',
+  externals: {
+    // Put external libraries like lodash here
+    // With their package name
+    // Example: 'lodash': 'lodash'
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: true,
+      },
+      mangle: false,
+    }),
+  ],
+})

config/webpack.config.dev.js

@@ -0,0 +1,16 @@
+var merge = require('webpack-merge')
+var base = require('./webpack.config.base')
+var path = require('path')
+
+var outputFile = 'vue-circle-slider'
+var globalName = 'VueCircleSlider'
+
+module.exports = merge(base, {
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    filename: outputFile + '.common.js',
+    library: globalName,
+    libraryTarget: 'umd',
+  },
+  devtool: 'eval-source-map',
+})