chore: merge

src/nutui.js

@@ -119,11 +119,11 @@ const packages = {
   Avatar,
   Popup,
   LeftSlip,
-  TabSelect: TabSelect,
-  SideNavBar: SideNavBar,
-  SubSideNavBar: SubSideNavBar,
-  SideNavBarItem: SideNavBarItem,
-  Address: Address,
+  TabSelect,
+  SideNavBar,
+  SubSideNavBar,
+  SideNavBarItem,
+  Address,
   Tag,
   Swiper,
   Menu,
@@ -146,10 +146,6 @@ pkgList.map((item) => {
   if (item.type == 'component') {
     if (pkg.name) {
       components[pkg.name] = pkg;
-    } else {
-      for (let n in pkg) {
-        components[n] = pkg[n];
-      }
     }
   } else if (item.type == 'method') {
     methods[item.name] = pkg;
@@ -180,7 +176,8 @@ const install = function (Vue, opts = {}) {
 
   for (let cptName in components) {
     if (components[cptName] && components[cptName].name) {
-      Vue.component(components[cptName].name, components[cptName]);
+      components[cptName].install(Vue);
+      // Vue.component(components[cptName].name, components[cptName]);
     }
   }
 

src/packages/actionsheet/actionsheet.scss

@@ -66,11 +66,11 @@
   color: $as-confirm-btn-color;
   .confirm-btn {
     width: 100%;
-    height: 50px;
+    height: 40px;
     background: $as-confirm-btn-bg;
     border-radius: 4px;
     font-size: $as-base-font-size;
-    line-height: 50px;
+    line-height: 40px;
     text-align: center;
   }
 }

src/packages/button/button.scss

@@ -1,161 +1,161 @@
 @mixin small {
-	height: $btn-height-small;
-	padding: 0 $btn-height-small/2;
-	font-size: $font-size-small;
+  height: $btn-height-small;
+  padding: 0 $btn-height-small/2;
+  font-size: $font-size-small;
 }
 
 .nut-button {
-	display: inline-block;
-	position: relative;
-	box-sizing: border-box;
-	cursor: pointer;
-	height: $btn-height-big;
-	padding: 0 $btn-height-big;
-	outline: none;
-	font-size: $font-size-base;
-	color: $btn-gradient-color;
-	background: $btn-gradient-bg;
-	border: none;
-	border-radius: $btn-border-radius-base;
-	transition: opacity .2s;
-
-	&::before {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		width: 100%;
-		height: 100%;
-		background-color: black;
-		border: inherit;
-		border-color: black;
-		border-radius: inherit; /* inherit parent's border radius */
-		transform: translate(-50%, -50%);
-		opacity: 0;
-		content: ' ';
-	}
-
-	&:active::before {
-		opacity: .1;
-	}
-
-	&[disabled] {
-		cursor: not-allowed;
-		background: $btn-disable-bg;
-		color: $btn-gradient-color;
-	}
-
-	// type-label
-	.txt-icon {
-		vertical-align: text-top;
-		margin-right: $btn-icon-margin;
-		color: $primary-color;
-	}
-
-	&.bottom {
-		background: $btn-primary-color;
-		border: $border-width-base solid $split-line-color;
-		color: $text-black-3;
-	}
-
-	&.red {
-		background: $btn-default-bg;
-		border: $border-width-base solid $primary-color;
-		color: $primary-color;
-	}
-
-	&.gray {
-		background: $light-color;
-		color: $title-color;
-	}
-
-	&.light {
-		color: $title-color;
-		background: $btn-default-bg;
-		border: $border-width-base solid $dark-color;
-	}
-
-	&.lightred {
-		background: $btn-label-light-bg;
-		color: $title-color;
-		border: none;
-	}
-
-	&.primary {
-		background: $primary-color;
-		color: $btn-primary-color;
-	}
-
-	&.default {
-		background: $btn-default-bg;
-		color: $title-color;
-		border: $border-width-base solid $btn-default-border;
-	}
-
-	&.actived {
-		background: $btn-label-light-bg;
-		color: $primary-color;
-		border: $border-width-base solid $primary-color;
-	}
-
-	&.dashed {
-		background: $btn-default-bg;
-		color: $title-color;
-		border: $border-width-base dashed $dark-color;
-	}
-
-	// 通栏样式
-	&.block {
-		width: 100%;
-		border-radius: 0;
-	}
-	// size-大号
-	&.big {
-		height: $btn-height-big;
-		padding: 0 $btn-height-big/2;
-		font-size: $font-size-big;
-	}
-	// size-中号
-	&.middle {
-		height: $btn-height-middle;
-		padding: 0 $btn-height-middle/2;
-		font-size: $font-size-middle;
-	}
-	// size-小号
-	&.small {
-		height: $btn-height-small;
-		padding: 0 $btn-height-small/2;
-		font-size: $font-size-small;
-	}
-
-	&.no-txt-big {
-		width: $btn-height-big;
-		padding: 0;
-
-		.txt-icon {
-			margin: 0;
-		}
-	}
-
-	&.no-tx-middle {
-		width: $btn-height-middle;
-		padding: 0;
-
-		.txt-icon {
-			margin: 0;
-		}
-	}
-
-	&.no-txt-small {
-		width: $btn-height-small;
-		padding: 0;
-
-		.txt-icon {
-			margin: 0;
-		}
-	}
-
-	// shape-圆角
-	&.circle {
-		border-radius: $btn-border-radius-large;
-	}
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  cursor: pointer;
+  height: $btn-height-big;
+  padding: 0 $btn-height-big;
+  outline: none;
+  font-size: $font-size-base;
+  color: $btn-gradient-color;
+  background: $btn-gradient-bg;
+  border: none;
+  border-radius: $btn-border-radius-base;
+  transition: opacity 0.2s;
+  font-family: PingFang-SC-Medium;
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    border: inherit;
+    border-color: black;
+    border-radius: inherit; /* inherit parent's border radius */
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    content: ' ';
+  }
+
+  &:active::before {
+    opacity: 0.1;
+  }
+
+  &[disabled] {
+    cursor: not-allowed;
+    background: $btn-disable-bg;
+    color: $btn-gradient-color;
+  }
+
+  // type-label
+  .txt-icon {
+    vertical-align: text-top;
+    margin-right: $btn-icon-margin;
+    color: $primary-color;
+  }
+
+  &.bottom {
+    background: $btn-primary-color;
+    border: $border-width-base solid $split-line-color;
+    color: $text-black-3;
+  }
+
+  &.red {
+    background: $btn-default-bg;
+    border: $border-width-base solid $primary-color;
+    color: $primary-color;
+  }
+
+  &.gray {
+    background: $light-color;
+    color: $title-color;
+  }
+
+  &.light {
+    color: $title-color;
+    background: $btn-default-bg;
+    border: $border-width-base solid $dark-color;
+  }
+
+  &.lightred {
+    background: $btn-label-light-bg;
+    color: $title-color;
+    border: none;
+  }
+
+  &.primary {
+    background: $primary-color;
+    color: $btn-primary-color;
+  }
+
+  &.default {
+    background: $btn-default-bg;
+    color: $title-color;
+    border: $border-width-base solid $btn-default-border;
+  }
+
+  &.actived {
+    background: $btn-label-light-bg;
+    color: $primary-color;
+    border: $border-width-base solid $primary-color;
+  }
+
+  &.dashed {
+    background: $btn-default-bg;
+    color: $title-color;
+    border: $border-width-base dashed $dark-color;
+  }
+
+  // 通栏样式
+  &.block {
+    width: 100%;
+    border-radius: 0;
+  }
+  // size-大号
+  &.big {
+    height: $btn-height-big;
+    padding: 0 $btn-height-big/2;
+    font-size: $font-size-big;
+  }
+  // size-中号
+  &.middle {
+    height: $btn-height-middle;
+    padding: 0 $btn-height-middle/2;
+    font-size: $font-size-middle;
+  }
+  // size-小号
+  &.small {
+    height: $btn-height-small;
+    padding: 0 $btn-height-small/2;
+    font-size: $font-size-small;
+  }
+
+  &.no-txt-big {
+    width: $btn-height-big;
+    padding: 0;
+
+    .txt-icon {
+      margin: 0;
+    }
+  }
+
+  &.no-tx-middle {
+    width: $btn-height-middle;
+    padding: 0;
+
+    .txt-icon {
+      margin: 0;
+    }
+  }
+
+  &.no-txt-small {
+    width: $btn-height-small;
+    padding: 0;
+
+    .txt-icon {
+      margin: 0;
+    }
+  }
+
+  // shape-圆角
+  &.circle {
+    border-radius: $btn-border-radius-large;
+  }
 }

src/packages/switch/demo.vue

@@ -4,15 +4,21 @@
     <div>
       <nut-cell>
         <div slot="title">{{ swActive ? '开' : '关' }}</div>
-        <span slot="desc"><nut-switch :active.sync="swActive"></nut-switch></span>
+        <span slot="desc">
+          <nut-switch :active.sync="swActive"></nut-switch>
+        </span>
       </nut-cell>
       <nut-cell>
         <div slot="title">开启禁用</div>
-        <span slot="desc"><nut-switch :active="true" :disabled="true"></nut-switch></span>
+        <span slot="desc">
+          <nut-switch :active="true" :disabled="true"></nut-switch>
+        </span>
       </nut-cell>
       <nut-cell>
         <div slot="title">关闭禁用</div>
-        <span slot="desc"><nut-switch :disabled="true"></nut-switch></span>
+        <span slot="desc">
+          <nut-switch :disabled="true"></nut-switch>
+        </span>
       </nut-cell>
     </div>
 
@@ -20,28 +26,38 @@
     <div>
       <nut-cell>
         <div slot="title">{{ swActive2 ? '开' : '关' }}</div>
-        <span slot="desc"><nut-switch :active.sync="swActive2" size="small"></nut-switch></span>
+        <span slot="desc">
+          <nut-switch :active.sync="swActive2" size="small"></nut-switch>
+        </span>
       </nut-cell>
       <nut-cell>
         <div slot="title">开启禁用</div>
-        <span slot="desc"><nut-switch :active="true" :disabled="true" size="small"></nut-switch></span>
+        <span slot="desc">
+          <nut-switch :active="true" :disabled="true" size="small"></nut-switch>
+        </span>
       </nut-cell>
       <nut-cell>
         <div slot="title">关闭禁用</div>
-        <span slot="desc"><nut-switch :disabled="true" size="small"></nut-switch></span>
+        <span slot="desc">
+          <nut-switch :disabled="true" size="small"></nut-switch>
+        </span>
       </nut-cell>
     </div>
 
     <h4>change事件</h4>
     <div>
       <nut-cell>
-        <span slot="title"><nut-switch @change="onChange"></nut-switch></span>
+        <span slot="title">
+          <nut-switch @change="onChange"></nut-switch>
+        </span>
       </nut-cell>
     </div>
     <h4>自定义Class</h4>
     <div>
       <nut-cell>
-        <span slot="title"><nut-switch :active="true" class="my-switch"></nut-switch></span>
+        <span slot="title">
+          <nut-switch :active="true" class="my-switch"></nut-switch>
+        </span>
       </nut-cell>
     </div>
   </div>
@@ -74,6 +90,7 @@ export default {
     box-shadow: none;
     background-color: #fff;
     border-radius: 3px;
+    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
   }
 
   &.nut-switch-active {

src/packages/tabbar/tabbar.scss

@@ -25,7 +25,7 @@
   flex: 1;
   text-align: center;
   text-decoration: none;
-  color: $text-color;
+  color: $title-color;
   height: 100%;
   display: flex;
   justify-content: center;

src/styles/variable.scss

@@ -1,10 +1,10 @@
 // ---- color ---- 这是之前在用的颜色，后续开发中使用新的色值
-$primary-color: #f0250f !default;
+$primary-color: #e1251b !default;
 $normal-color: #848484 !default;
 $link-color: $primary-color !default;
 $link-hover-color: mix($link-color, #000, 80%) !default;
-$title-color: #2d2d2d !default;
-$text-color: #848484 !default;
+$title-color: #323232 !default;
+$text-color: #646464 !default;
 $light-color: #f6f6f6 !default;
 $dark-color: #dadada !default;