From a50999093716d8ce6db47a47b9290395456985de Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 21:13:25 -0400
Subject: [PATCH] add checkbox component

---
 src/components/checkbox/checkbox.js   | 44 ++++++++++++++++++++++++
 src/components/checkbox/checkbox.scss | 48 +++++++++++++++++++++++++++
 2 files changed, 92 insertions(+)
 create mode 100644 src/components/checkbox/checkbox.js
 create mode 100644 src/components/checkbox/checkbox.scss

diff --git a/src/components/checkbox/checkbox.js b/src/components/checkbox/checkbox.js
new file mode 100644
index 00000000..76e7e4f4
--- /dev/null
+++ b/src/components/checkbox/checkbox.js
@@ -0,0 +1,44 @@
+// 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.scss
new file mode 100644
index 00000000..4dfcfe34
--- /dev/null
+++ b/src/components/checkbox/checkbox.scss
@@ -0,0 +1,48 @@
+@import '../../_variables.scss';
+
+.checkbox {
+  position: relative;
+  display: inline-block;
+  padding-left: 1.2em;
+
+  &-indicator::before {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: block;
+    content: '✔';
+    transition: color 200ms;
+    width: 1.1em;
+    height: 1.1em;
+    border-radius: $fallback--checkboxRadius;
+    border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
+    box-shadow: 0px 0px 2px black inset;
+    box-shadow: var(--inputShadow);
+    background-color: $fallback--fg;
+    background-color: var(--input, $fallback--fg);
+    vertical-align: top;
+    text-align: center;
+    line-height: 1.1em;
+    font-size: 1.1em;
+    color: transparent;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  input[type=checkbox] {
+    display: none;
+
+    &:checked + .checkbox-indicator::before {
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
+
+    &:disabled + .checkbox-indicator::before {
+      opacity: .5;
+    }
+  }
+
+  & > span {
+    margin-left: .5em;
+  }
+}