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: {