From 468aec0de1b7e25a66eb9e6ef44cf9787d0c6d86 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 6 Apr 2019 13:14:43 -0400
Subject: [PATCH] rewrite checkbox component as non-functional

---
 src/components/checkbox/checkbox.js           | 44 -------------------
 .../checkbox/{checkbox.scss => checkbox.vue}  | 16 ++++++-
 2 files changed, 15 insertions(+), 45 deletions(-)
 delete mode 100644 src/components/checkbox/checkbox.js
 rename src/components/checkbox/{checkbox.scss => checkbox.vue} (76%)

diff --git a/src/components/checkbox/checkbox.js b/src/components/checkbox/checkbox.js
deleted file mode 100644
index 76e7e4f4..00000000
--- a/src/components/checkbox/checkbox.js
+++ /dev/null
@@ -1,44 +0,0 @@
-// TODO: Template-based functional component is supported in vue-loader 13.3.0+.
-// Also, somehow, props are not provided through 'context' even though they are defined.
-// Need to upgrade vue-loader
-
-import './checkbox.scss'
-
-export default {
-  functional: true,
-  name: 'Checkbox',
-  model: {
-    prop: 'checked',
-    event: 'change'
-  },
-  render (createElement, { data, children }) {
-    const { props = {}, attrs = {}, on = {}, ...rest } = data
-    const { name, checked, disabled, readonly, ...restAttrs } = attrs
-    const { change, ...restListeners } = on
-    const wrapperProps = {
-      attrs: restAttrs,
-      on: restListeners,
-      ...rest
-    }
-    const inputProps = {
-      attrs: {
-        name,
-        checked,
-        disabled,
-        readonly,
-        ...props
-      },
-      on: {}
-    }
-    if (change) {
-      inputProps.on.change = e => change(e.target.checked)
-    }
-    return (
-      <label class="checkbox" {...wrapperProps}>
-        <input type="checkbox" {...inputProps} />
-        <i class="checkbox-indicator" />
-        {children && <span>{children}</span>}
-      </label>
-    )
-  }
-}
diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.vue
similarity index 76%
rename from src/components/checkbox/checkbox.scss
rename to src/components/checkbox/checkbox.vue
index 42556d89..5f55c5bf 100644
--- a/src/components/checkbox/checkbox.scss
+++ b/src/components/checkbox/checkbox.vue
@@ -1,5 +1,18 @@
-@import '../../_variables.scss';
+<template>
+  <label class="checkbox">
+    <input type="checkbox" :checked="value" @change="$emit('input', $event.target.checked)">
+    <i class="checkbox-indicator" />
+    <span><slot></slot></span>
+  </label>
+</template>
 
+<script>
+export default {
+  props: ['value']
+}
+</script>
+
+<style lang="scss">
 .checkbox {
   position: relative;
   display: inline-block;
@@ -47,3 +60,4 @@
     margin-left: .5em;
   }
 }
+</style>