button bug and checkbox bug

package.json

@@ -1,7 +1,7 @@
 {
   "name": "neumorphic-ui-vue",
-  "version": "1.0.1",
-  "description": "Neumorphic Style UI By Vue.js --Test",
+  "version": "1.0.2",
+  "description": "Neumorphic Style UI By Vue",
   "main": "lib/neumorphic.common.js",
   "private": false,
   "files": [
@@ -11,7 +11,8 @@
   "keywords": [
     "neumorphic",
     "vue",
-    "components"
+    "components",
+    "ui"
   ],
   "author": "Titto",
   "license": "ISC",

packages/anchor/src/anchor.vue

@@ -49,7 +49,7 @@ export default class Anchor extends Vue {
 </script>
 <style scoped>
 .neumorphic-anchor {
-  display: flex;
+  display: inline-flex;
   font-size: var(--primary-font-size);
   opacity: .5;
   box-shadow: none;

packages/backToHead/src/backToHead.vue

@@ -18,7 +18,7 @@ import neumorphicButton from '../../button/src/button.vue';
     'neumorphic-button': neumorphicButton
   }
 })
-export default class BackToHead extends Vue {
+export default class BackToTop extends Vue {
 
    @Prop({type: Number, default: 50})
    right!: number;
@@ -40,6 +40,7 @@ export default class BackToHead extends Vue {
 
   mounted(){
     let lastScrollPosition = window.pageYOffset;
+    
     let button = this.$refs.neumorphicBackToHead as any;
     window.addEventListener("scroll",() => {
       const watchButtonPos = () => {

packages/button/src/button.vue

@@ -5,15 +5,14 @@
     :style="neumorphicButtonStyle"
     :disabled="disabled"
     @click="$emit('click', $event)">
-    <i :class="icon" v-if="icon"></i>  
-     <slot></slot>
+    <i :class="icon" v-if="icon"></i> <slot></slot>
   </button>
 </template>
 <script lang='ts'>
 import { Component, Vue, Prop, Emit, Watch } from 'vue-property-decorator'
 import { ButtonSizeType, ColorType, AnchorSizeType, RadiusType } from '../../utils/config/neumorphic-type'
 @Component
-export default class NeumorphicBtn extends Vue {
+export default class Button extends Vue {
   @Prop({ type: Boolean, default: false })
   circle!: boolean;
 
@@ -79,6 +78,7 @@ export default class NeumorphicBtn extends Vue {
 .neumorphic-btn {
   border: none;
   outline: none;
+  display: inline;
   /* padding: 12px 40px; */
   letter-spacing: 0.1em;
   color: var(--primary-color);

packages/checkbox/src/checkbox.vue

@@ -9,7 +9,7 @@
           :name="name"
           :disabled="disabled"
           @click="change($event)">
-        <i class="fa fa-check-square"></i>
+        <i class="fa fa-check"></i>
       </span>
       <neumorphic-label class="neumorphic-checkbox-slot">
         <slot></slot>
@@ -129,9 +129,10 @@ export default class Checkbox extends Vue {
   margin-left: 10px;
   display: inline-block;
 }
+.neumorphic-checkbox-input:disabled,
 .neumorphic-checkbox-input-disabled,
 .neumorphic-checkbox-disabled {
   cursor: not-allowed !important;
-  color: var(--disabled-color);
+  color: var(--disabled-color) !important;
 }
 </style>

packages/checkbox/src/checkboxGroup.vue

@@ -9,7 +9,7 @@
 import { Component, Vue, Model, Provide, Watch, Prop, Inject } from 'vue-property-decorator'
 
 @Component
-export default class ChechboxGroup extends Vue {
+export default class CheckboxGroup extends Vue {
 
   @Provide('checkboxGroup')
   checkboxGroup = this;

packages/hr/src/hr.vue

@@ -27,7 +27,7 @@ export default class Divider extends Vue {
 </script>
 <style scoped>
 .neumorphic-hr {
-  width: 50%;
+  width: 100%;
   height: 7px;
   border: 0;
   border-radius: var(--divider-radius);

packages/nav/src/nav-item.vue

@@ -60,5 +60,6 @@ export default class NavItem extends Vue {
   display: flex;
   list-style: none;
   margin-bottom: .3rem;
+  margin-right: .3rem;
 }
 </style>

packages/radio/src/radio.vue

@@ -31,7 +31,7 @@ export default class Radio extends Vue {
   checked: boolean = false;
 
   @Prop()
-  label!: string | number;
+  label!: string | number | boolean;
 
   @Prop({type: Boolean, default: false})
   disabled!: boolean;
@@ -40,7 +40,7 @@ export default class Radio extends Vue {
   value!: string;
 
   @Watch('value')
-  noEquel(newValue: string | number, oldValue: string | number): void{
+  noEquel(newValue: string | number | boolean, oldValue: string | number | boolean): void{
     if(this.label !== newValue) {
       this.checked = false;
     } else {
@@ -132,10 +132,10 @@ export default class Radio extends Vue {
   background: var(--second-color);
 }
 .neumorphic-radio-disabled {
-  cursor: not-allowed;
+  cursor: not-allowed !important;
 }
 .neumorphic-radio-disabled::after {
-  background: var(--radio-circle-disabled-bgcolor);
+  background: var(--radio-circle-disabled-bgcolor) !important;
 }
 
 </style>

packages/select/src/option.vue

@@ -1,6 +1,5 @@
 <template>
   <li 
-    ref="neumorphicOption"
     :class="neumorphicOptionClass"
     :type="value"
     :disabled="disabled"
@@ -9,35 +8,37 @@
   </li>
 </template>
 <script lang='ts'>
-import { Component, Vue, Prop, Model, Watch } from 'vue-property-decorator'
+import { Component, Vue, Prop, Model, Watch, Inject } from 'vue-property-decorator'
 
 @Component
 export default class Option extends Vue {
 
   checked: boolean = false;
 
-  @Prop({required: true})
-  value?: string | number | boolean;
+  @Inject('selectValue')
+  selectValue?: string | number | boolean;
 
-  @Prop({type:Boolean, default: false})
-  disabled!: boolean;
+  tmpSelectValue?: string | number | boolean = this.selectValue;
+
+  @Inject('selector')
+  selector: any;
 
-  @Model('change', {})
-  checked_value!: Record<string, any>;
+  @Prop()
+  value!: string | number | boolean;
+
+  @Prop({type: Boolean, default: false})
+  disabled!: boolean;
 
-  @Watch('checked_value')
-  watchValueChange(newValue: Record<string, any>) {
-    this.checked = newValue.value === (this.$refs.neumorphicOption as HTMLUListElement).type;
+  @Watch('tmpSelectValue')
+  watchValueChange(newValue: string | number) {
+    this.checked = newValue === this.$el.getAttribute('type');
     this.neumorphicOptionClass['neumorphic-option-checked'] = this.checked;
   }
 
   change(event: any) {
     this.checked = true;
     this.neumorphicOptionClass['neumorphic-option-checked'] = this.checked;
-    this.$emit('change', {
-      value: event.target.type,
-      label: event.target.innerText
-    });
+    this.selector.emitChange(this.value);
   }
 
   neumorphicOptionClass = {
@@ -47,7 +48,7 @@ export default class Option extends Vue {
   }
 
   mounted(){
-    this.checked = this.checked_value.value === (this.$refs.neumorphicOption as HTMLUListElement).type;
+    this.checked = this.selectValue === this.$el.getAttribute('type');
     this.neumorphicOptionClass['neumorphic-option-checked'] = this.checked;
     this.neumorphicOptionClass['neumorphic-option-disabled'] = this.disabled;
   }
@@ -71,6 +72,7 @@ export default class Option extends Vue {
 .neumorphic-option:hover {
   background-color: var(--option-bgcolor);
 }
+.neumorphic-option:disabled
 .neumorphic-option-disabled {
   background-color: var(--option-disabled-bgcolor);
   color: var(--disabled-color);

packages/select/src/select.vue

@@ -18,24 +18,17 @@
         @blur="activate($event)"
         :placeholder="placeholder"
         :disabled="disabled"
-        v-model="tmp_value.label">
+        v-model="tmp_value">
       <ul
         ref="neumorphicSelectList"
         class="neumorphic-select neumorphic-select-list">
-        <neumorphic-option 
-          v-for="option in optionList"
-          v-model="tmp_value" 
-          :key="option.value"
-          :value="option.value"
-          :disabled="option.disabled">
-          {{ option.label }}
-        </neumorphic-option>
+        <slot></slot>
       </ul>
     </div>
   </div>
 </template>
 <script lang='ts'>
-import { Component, Vue, Prop, Watch, Model } from 'vue-property-decorator';
+import { Component, Vue, Prop, Watch, Model, Provide } from 'vue-property-decorator';
 import neumorphicOption from './option.vue';
 import neumorphicLabel from '../../label/src/label.vue';
 @Component({
@@ -46,38 +39,46 @@ import neumorphicLabel from '../../label/src/label.vue';
 })
 export default class Select extends Vue {
 
-  arrow_back: boolean = true;
+  public arrow_back: boolean = true;
 
-  @Prop()
-  label?: string;
+  public lastLiElemCheckIndex: number = 0;
 
   @Prop()
-  optionList?: Array<Record<string, any>>;
+  public label?: string;
 
   @Prop({type: String, default: '请选择'})
-  placeholder!: string;
+  public placeholder!: string;
 
   @Prop({default: false})
-  disabled!: boolean;
+  public disabled!: boolean;
 
   @Model('change')
-  value!: string | number | boolean;
+  @Provide('selectValue')
+  public value!: string | number | boolean;
 
-  tmp_value: Record<string, any> = {
-    value: this.value,
-    label: '',
-  }
+  @Provide('selector')
+  public selector = this;
+
+  public tmp_value: string | number | boolean = this.value;
 
   @Watch('value')
   watchValueChange(newValue: string | number | boolean) {
-    this.tmp_value.value = newValue;
+    this.tmp_value = newValue;
+  }
+
+  public emitChange(changeValue: string | number | boolean) {
+    this.$emit('change', changeValue);
+    const children = this.$children.slice(1);
+    for(let child of children) {
+      (child as any).tmpSelectValue = changeValue;
+    }
   }
 
-  activate(event: any) {
+  public activate(event: any) {
     let arrow = this.$refs.neumorphicSelectArrow as HTMLSpanElement;
     let list = this.$refs.neumorphicSelectList as HTMLUListElement;
     const type = event.type;
-    if(type === 'click' && this.arrow_back) {
+    if (type === 'click' && this.arrow_back) {
       arrow.style.transform = "rotate(90deg) translate(0, -50%)";
       this.optionListStyleChange(list, true);
       this.arrow_back = false;
@@ -86,14 +87,14 @@ export default class Select extends Vue {
       // 给予一定缓冲时间，留给 li 响应 click 事件
       setTimeout(() => {
         this.optionListStyleChange(list, false);
-        this.$emit('change', this.tmp_value.value);
       }, 200)
       this.arrow_back = true;
     }
+    
   }
 
-  optionListStyleChange(list: HTMLUListElement, extent: boolean) {
-    if(extent) {
+  private optionListStyleChange(list: HTMLUListElement, extend: boolean) {
+    if(extend) {
       list.style.opacity = '1';
       list.style.height = 'auto';
       list.style.padding = '10px 0';

packages/slider/src/slider.vue

@@ -101,7 +101,7 @@ export default class Slider extends Vue {
   height: 1rem;
   cursor: pointer;
   box-shadow: var(--slider-shadow);
-  border-radius: var(--primary-shadow);
+  border-radius: var(--primary-radius);
   position: relative;
   display: flex;
   justify-content: center;

packages/switch/src/switch.vue

@@ -55,12 +55,14 @@ export default class Switcher extends Vue {
   change(event: any) {
     this.checked = !this.checked;
     this.neumorphicSwitchLabelClass['neumorphic-switch-label-checked'] = this.checked;
+    
     this.$emit('change', this.checked);
   }
 
   mounted(){
     this.checked = this.value === true;
     this.neumorphicSwitchLabelClass['neumorphic-switch-label-checked'] = this.checked;
+    this.neumorphicSwitchInputClass['neumorphic-switch-input-disabled'] = this.disabled;
   }
   
 }
@@ -123,11 +125,13 @@ export default class Switcher extends Vue {
   left: 57%;
   background: var(--switch-on-circle-bgcolor);
 }
+.neumorphic-switch-input:disabled,
 .neumorphic-switch-input-disabled, 
 .neumorphic-switch-label-disabled {
   cursor: not-allowed !important;
-  background: var(--disabled-bgcolor);
+  background: var(--disabled-bgcolor) !important;
 }
+
 .neumorphic-switch-label-disabled::before {
   opacity: 0;
 }

packages/tabs/src/tabPane.vue

@@ -29,7 +29,7 @@ export default class TabPane extends Vue {
 <style scoped>
 .neumorphic-tab-pane {
   width: 100%;
-  height: 100%;
+  height: 70%;
   min-height: 10rem;
   padding: 20px;
   color: var(--primary-color);