From ddc7c870f401a1cb7e59cd5144b6acff65a01e7e Mon Sep 17 00:00:00 2001 From: taehoon Date: Sat, 6 Apr 2019 15:35:23 -0400 Subject: [PATCH] rewrite checkbox component --- src/components/checkbox/checkbox.js | 44 ----------------- src/components/checkbox/checkbox.scss | 48 ------------------- .../user_reporting_modal.js | 2 +- 3 files changed, 1 insertion(+), 93 deletions(-) delete mode 100644 src/components/checkbox/checkbox.js delete mode 100644 src/components/checkbox/checkbox.scss 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 ( - - ) - } -} diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss deleted file mode 100644 index 4dfcfe34..00000000 --- a/src/components/checkbox/checkbox.scss +++ /dev/null @@ -1,48 +0,0 @@ -@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; - } -} diff --git a/src/components/user_reporting_modal/user_reporting_modal.js b/src/components/user_reporting_modal/user_reporting_modal.js index 34a87720..f445f184 100644 --- a/src/components/user_reporting_modal/user_reporting_modal.js +++ b/src/components/user_reporting_modal/user_reporting_modal.js @@ -1,6 +1,6 @@ import Status from '../status/status.vue' -import Checkbox from '../checkbox/checkbox.js' +import Checkbox from '../checkbox/checkbox.vue' const UserReportingModal = { components: {