From a50999093716d8ce6db47a47b9290395456985de Mon Sep 17 00:00:00 2001 From: taehoon 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 ( + + ) + } +} 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; + } +}