Initial commit

Author: mariomka

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "env"
+  ],
+  "plugins": [
+    "transform-runtime"
+  ]
+}

.gitignore

@@ -0,0 +1,3 @@
+/node_modules
+/yarn.lock
+/dist

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016 Mario Juárez <[email protected]> (http://www.mjp.one)
+
+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,3 @@
+# A Vue component to easily style checkbox and radio inputs
+
+## WIP

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "vue-checkbox-radio-component",
+  "version": "0.1.0",
+  "description": "Checkbox and radio component for Vue.js",
+  "keywords": [
+    "checkbox",
+    "radio",
+    "vue"
+  ],
+  "main": "dist/index.js",
+  "author": {
+    "name": "Mario Juárez",
+    "email": "[email protected]",
+    "url": "http://www.mjp.one"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "babel-core": "^6.24.1",
+    "babel-loader": "^7.0.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "^1.5.1",
+    "css-loader": "^0.28.2",
+    "vue-loader": "^12.1.0",
+    "vue-template-compiler": "^2.3.3",
+    "webpack": "^2.6.0"
+  }
+}

src/components/Checkbox.vue

@@ -0,0 +1,85 @@
+<style>
+    .checkbox-component > input {
+        opacity: 0;
+        position: absolute;
+    }
+
+    .checkbox-component > input + label:before {
+        content: '✓';
+        display: inline-block;
+        cursor: pointer;
+        border: 1px solid #000;
+        margin: 0;
+        padding: 0;
+        width: 16px;
+        height: 16px;
+        font-size: 14px;
+        text-align: center;
+        line-height: 1;
+        color: transparent;
+        background: #fff;
+    }
+
+    .checkbox-component > input:checked + label:before {
+        color: #000;
+    }
+
+    .checkbox-component > input:focus + label:before {
+        outline-color: #73b9ff;
+    }
+</style>
+
+<template>
+    <div class="checkbox-component">
+        <input type="checkbox"
+               :id="id"
+               :name="name"
+               :value="value"
+               :class="className"
+               :checked="checked"
+               :required="required"
+               @change="onChange">
+        <label :for="id">
+            <slot></slot>
+        </label>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            id: {
+                type: String,
+                default: function () {
+                    return 'checkbox-id-' + this._uid;
+                },
+            },
+            name: {
+                type: String,
+                default: null,
+            },
+            value: {
+                type: String,
+                default: null,
+            },
+            className: {
+                type: String,
+                default: null,
+            },
+            checked: {
+                type: Boolean,
+                default: false,
+            },
+            required: {
+                type: Boolean,
+                default: false,
+            },
+        },
+
+        methods: {
+            onChange: function (event) {
+                this.$emit('change', event);
+            },
+        },
+    };
+</script>

src/components/Radio.vue

@@ -0,0 +1,85 @@
+<style>
+    .radio-component > input {
+        opacity: 0;
+        position: absolute;
+    }
+
+    .radio-component > input + label:before {
+        content: '✓';
+        display: inline-block;
+        cursor: pointer;
+        border: 1px solid #000;
+        margin: 0;
+        padding: 0;
+        width: 16px;
+        height: 16px;
+        font-size: 14px;
+        text-align: center;
+        line-height: 1;
+        color: transparent;
+        background: #fff;
+    }
+
+    .radio-component > input:checked + label:before {
+        color: #000;
+    }
+
+    .radio-component > input:focus + label:before {
+        outline-color: #73b9ff;
+    }
+</style>
+
+<template>
+    <div class="radio-component">
+        <input type="radio"
+               :id="id"
+               :name="name"
+               :value="value"
+               :class="className"
+               :checked="checked"
+               :required="required"
+               @change="onChange">
+        <label :for="id">
+            <slot></slot>
+        </label>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            id: {
+                type: String,
+                default: function () {
+                    return 'radio-id-' + this._uid;
+                }
+            },
+            name: {
+                type: String,
+                default: null
+            },
+            value: {
+                type: String,
+                default: null
+            },
+            className: {
+                type: String,
+                default: null
+            },
+            checked: {
+                type: Boolean,
+                default: false
+            },
+            required: {
+                type: Boolean,
+                default: false
+            },
+        },
+
+        methods: {
+            onChange: function (event) {
+                this.$emit('change', event);
+            }
+        },
+    }
+</script>

src/index.js

@@ -0,0 +1,2 @@
+export { default as Checkbox } from './components/Checkbox.vue';
+export { default as Radio } from './components/Radio.vue';

webpack.config.js

@@ -0,0 +1,31 @@
+const path = require('path');
+
+module.exports = {
+    entry: './src/index.js',
+
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'index.js',
+        library: 'vue-checkbox-radio',
+        libraryTarget: 'umd',
+    },
+
+    externals: {
+        vue: 'vue',
+    },
+
+    module: {
+        rules: [
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader',
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.js$/,
+                loader: 'babel-loader',
+                exclude: /node_modules/,
+            },
+        ]
+    },
+};