refactor: CSwitch refactor

- change outline prop to variant,
- add square shape

Author: woothu

src/components/switch/CSwitch.vue

@@ -23,18 +23,17 @@ export default {
   inheritAttrs: false,
   props: {
     color: String,
-    outline: {
-      type: [Boolean, String],
-      default: undefined,
-      validator: value => [false, true, '', 'alt'].includes(value)
+    variant: {
+      type: String,
+      validator: value => ['', 'outline', 'opposite', '3d'].includes(value)
     },
     size: {
       type: String,
       validator: value => ['','lg', 'sm'].includes(value)
     },
     shape: {
       type: String,
-      validator: value => ['','3d', 'pill'].includes(value)
+      validator: value => ['','pill', 'square'].includes(value)
     },
     checked: Boolean,
     value: {
@@ -64,14 +63,15 @@ export default {
   },
   computed: {
     classList () {
-      const outlineString = this.outline ? '-outline' : ''
-      const outlinedAltString = this.outline === 'alt' ? '-alt' : ''
+      const havePrefix = ['opposite', 'outline'].includes(this.variant)
+      const colorPrefix = havePrefix ? `-${this.variant}` : ''
       return [
         'c-switch form-check-label',
-        `c-switch${outlineString}-${this.color}${outlinedAltString}`,
         {
           [`c-switch-${this.size}`]: this.size,
           [`c-switch-${this.shape}`]: this.shape,
+          'c-switch-3d': this.variant === '3d', 
+          [`c-switch${colorPrefix}-${this.color}`]: this.color,
           'c-switch-label': this.labelOn || this.labelOff
         }
       ]

src/components/switch/tests/CSwitch.spec.js

@@ -20,7 +20,7 @@ const customWrapper = mount(Component, {
     color: 'info',
     outline: 'alt',
     size: 'lg',
-    shape:'3d',
+    shape: 'pill',
     name:'myName',
     id:'myId',
     checked: true,

src/components/switch/tests/__snapshots__/CSwitch.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`CSwitch renders correctly 1`] = `
 <label
-  class="c-switch form-check-label c-switch-undefined"
+  class="c-switch form-check-label"
 >
   <input
     class="c-switch-input form-check-input"
@@ -18,14 +18,15 @@ exports[`CSwitch renders correctly 1`] = `
 
 exports[`CSwitch renders correctly 2`] = `
 <label
-  class="c-switch form-check-label c-switch-outline-info-alt c-switch-lg c-switch-3d"
+  class="c-switch form-check-label c-switch-lg c-switch-pill c-switch-info"
 >
   <input
     class="c-switch-input form-check-input"
     dataoff="dataOff"
     dataon="dataOn"
     id="myId"
     name="myName"
+    outline="alt"
     required="required"
     type="checkbox"
     value="checked"