Added toggle component

docs/.vuepress/config.js

@@ -32,7 +32,8 @@ module.exports = {
           'components/radio-group',
           'components/spinner',
           'components/tabs',
-          'components/textbox'
+          'components/textbox',
+          'components/toggle',
         ]
       }
     ]

docs/components/toggle.md

@@ -0,0 +1,56 @@
+# Toggle 
+
+## Example
+<div class="p-3 border rounded-2 my-3 flex flex-column">
+  <v-toggle class="mb-3" v-model="visible1" />
+  <v-toggle class="mb-3" label="Visible" v-model="visible2" />
+  <v-toggle class="mb-3" disabled label="Disabled" v-model="visible3" />
+  <v-toggle vertical label="Visible" v-model="visible4" />
+</div>
+
+```html
+<v-toggle v-model="visible" />
+<!--with label-->
+<v-toggle label="Visible" v-model="visible" />
+<!--disabled-->
+<v-toggle disabled label="Visible" v-model="visible" />
+<!--vertical-->
+<v-toggle vertical label="Visible" v-model="visible" />
+```
+
+## Props
+Name       | Type     | Description | Default | Required
+---------- | -------- | ----------- | ------- | --------
+id         | [String, Number]   | Unique identifier |    | false
+Name       | String             | Name of input element |    | false
+label      | [String, Number]   | Label text        |    | true
+value, v-model      | any      | The model that the checkbox value syncs to. **If you are not using `v-model`, you should listen for the `input` event and update value.**        |    | true
+checked    | Boolean  | Whether or not the toggle is checked by default. | false | false
+trueValue	 | any	    | The value that will be written to the model when the toggle is checked | true | false
+falseValue | any	    | The value that will be written to the model when the toggle is unchecked | false | false
+tabindex	 | [Number, String]   | The toggle input tabindex | None | false
+submittedValue | any  | The value that will be submitted for the toggle when it is checked. Applied as the value attribute of the toggle input element. | 'on' | false
+vertical	 | Boolean  | Whether or not the toggle in vertical mode | false | false
+disabled	 | Boolean  | Whether or not the toggle is disabled | false | false
+
+
+## Events
+Name     | Params   | Description
+---------| ---------| -------------------
+@focus   | event    | Emitted when the toggle is focused
+@blur    | event    | Emitted when the toggle loses focus
+@input   | event    | Emitted when the toggle value is changed. The handler is called with the new value
+@change  | event    | Emitted when a change in the toggle value is committed. The handler is called with the new value
+
+## Methods
+Name       | Description
+---------- | -----------
+focus()    | Call this method to programmatically focus the toggle
+
+<script>
+export default {
+  data() {
+    return { visible1: false, visible2: false, visible3: false, visible4: false };
+  },
+};
+</script>

src/components/Toggle/index.js

@@ -0,0 +1,8 @@
+import Toggle from './main.vue';
+
+// eslint-disable-next-line func-names
+Toggle.install = function (Vue) {
+  Vue.component('VToggle', Toggle);
+};
+
+export default Toggle;

src/components/Toggle/main.vue

@@ -0,0 +1,110 @@
+<template>
+  <label :for="id" class="toggle" :class="classes">
+    <input
+      :id="id"
+      :name="name"
+      :disabled="disabled"
+      :checked.prop="isChecked"
+      :value="submittedValue"
+      :tabindex="tabindex"
+
+      ref="input"
+      type="checkbox"
+      class="toggle__input"
+
+      @blur="onBlur"
+      @focus="onFocus"
+      @change="onChange"
+    >
+    <span class="toggle__container"></span>
+    <span class="toggle__text">{{ label }}</span>
+  </label>
+</template>
+
+<script>
+import { looseEqual } from '../../helpers/util';
+
+export default {
+  name: 'VToggle',
+  props: {
+    id: {
+      type: [String, Number],
+    },
+    name: {
+      type: String,
+    },
+    label: {
+      type: [String, Number],
+    },
+    value: {
+      required: true,
+    },
+    submittedValue: {
+      type: String,
+      default: 'on', // HTML default
+    },
+    checked: {
+      type: Boolean,
+      default: false,
+    },
+    trueValue: {
+      default: true,
+    },
+    falseValue: {
+      default: false,
+    },
+    indeterminate: {
+      type: Boolean,
+      default: false,
+    },
+    tabindex: [String, Number],
+    vertical: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      isChecked: looseEqual(this.value, this.trueValue) || this.checked,
+    };
+  },
+  created() {
+    this.$emit('input', this.isChecked ? this.trueValue : this.falseValue);
+  },
+  computed: {
+    classes() {
+      return [
+        { 'toggle--vertical': this.vertical },
+      ];
+    },
+  },
+  methods: {
+    focus() {
+      this.$refs.input.focus();
+    },
+    onChange(e) {
+      const isCheckedPrevious = this.isChecked;
+      const isChecked = e.target.checked;
+      this.$emit('input', isChecked ? this.trueValue : this.falseValue, e);
+      if (isCheckedPrevious !== isChecked) {
+        this.$emit('change', isChecked ? this.trueValue : this.falseValue, e);
+      }
+    },
+    onFocus(e) {
+      this.$emit('focus', e);
+    },
+    onBlur(e) {
+      this.$emit('blur', e);
+    },
+  },
+  watch: {
+    value() {
+      this.isChecked = looseEqual(this.value, this.trueValue);
+    },
+  },
+};
+</script>

src/components/index.js

@@ -12,3 +12,4 @@ export { default as VSpinner } from './Spinner';
 export { default as VTab } from './Tab';
 export { default as VTabs } from './Tabs';
 export { default as VTextbox } from './Textbox';
+export { default as VToggle } from './Toggle';