Switch instead of checkbox

resources/components/ui/switch.html

@@ -0,0 +1,4 @@
+<div class="ui-switch" :class="[ value && 'ui-switch--checked' ]" v-bind="$attrs" @click="update">
+    <div class="ui-switch__track"><div class="ui-switch__thumb"></div></div>
+    <input type="checkbox" class="ui-switch__checkbox" :id="id" :checked="value" @input="update"/>
+</div>

resources/styles/ui/_switch.scss

@@ -0,0 +1,48 @@
+$ui-switch-marker-size: .7rem;
+$ui-switch-spacing: 1px;
+$ui-switch-duration: 150ms;
+$ui-switch-width-factor: 2.25;
+
+.ui-switch {
+  padding: 3px;
+}
+
+.ui-switch__checkbox {
+  display: none;
+}
+
+.ui-switch__track {
+  border: 1px solid $dark;
+  border-radius: $ui-switch-marker-size;
+  padding: $ui-switch-spacing;
+  width: $ui-switch-width-factor * $ui-switch-marker-size;
+  height: $ui-switch-marker-size;
+  position: relative;
+  box-sizing: content-box;
+  background: white;
+  transition: background-color $ui-switch-duration ease-in-out;
+  cursor: pointer;
+}
+
+.ui-switch__thumb {
+  border-radius: 100%;
+  width: $ui-switch-marker-size;
+  height: $ui-switch-marker-size;
+  background: $dark;
+  position: absolute;
+  transition: all $ui-switch-duration ease-in-out;
+  transition-property: background-color, left;
+  margin-left: $ui-switch-spacing;
+  left: 0;
+}
+
+.ui-switch--checked {
+  .ui-switch__thumb {
+    background: white;
+    left: ($ui-switch-width-factor - 1) * $ui-switch-marker-size;
+  }
+
+  .ui-switch__track {
+    background: $dark;
+  }
+}

resources/ts/components/index.ts

@@ -9,3 +9,4 @@ export * from './map'
 export * from './app'
 export * from './favourites'
 export * from './trip'
+export * from './ui'

resources/ts/components/ui/index.ts

@@ -0,0 +1 @@
+export * from './switch';

resources/ts/components/ui/switch.ts

@@ -0,0 +1,24 @@
+import Vue from 'vue'
+import { Component, Prop } from 'vue-property-decorator'
+import * as uuid from "uuid";
+
+@Component({
+    template: require('@templates/ui/switch.html'),
+    inheritAttrs: false
+})
+export class UiSwitch extends Vue {
+    @Prop({
+        type: String,
+        default: () => `uuid-${uuid.v4()}`
+    })
+    id: string;
+
+    @Prop(Boolean)
+    value: boolean;
+
+    update(ev) {
+        this.$emit('input', !this.value);
+    }
+}
+
+Vue.component('UiSwitch', UiSwitch);

webpack.config.js

@@ -20,7 +20,8 @@ const config = {
         extensions: ['.tsx', '.ts', '.js'],
         alias: {
             'vue$': 'vue/dist/vue.esm.js',
-            'mapbox-gl$': 'mapbox-gl/dist/mapbox-gl-unminified'
+            'mapbox-gl$': 'mapbox-gl/dist/mapbox-gl-unminified',
+            '@templates': path.resolve(__dirname, './resources/components/'),
         }
     },
     module: {