Merge branch 'next' of https://github.com/jdf2e/nutui into next

src/packages/datepicker/demo.vue

@@ -6,12 +6,10 @@
     <nut-cell title="日期选择" :desc="desc2" @click="open(1)"></nut-cell>
     <h2>限制开始结束时间（有默认值）</h2>
     <nut-cell title="日期时间选择" :desc="desc3" @click="open(2)"></nut-cell>
-    <h2>12小时制</h2>
-    <nut-cell title="日期选择" :desc="desc4" @click="open(3)"></nut-cell>
     <h2>限制开始结束小时</h2>
-    <nut-cell title="时间选择" :desc="desc5" @click="open(4)"></nut-cell>
+    <nut-cell title="时间选择" :desc="desc4" @click="open(3)"></nut-cell>
     <h2>分钟数递增步长设置</h2>
-    <nut-cell title="时间选择" :desc="desc6" @click="open(5)"></nut-cell>
+    <nut-cell title="时间选择" :desc="desc5" @click="open(4)"></nut-cell>
 
     <nut-datepicker
       v-model="currentDate"
@@ -21,7 +19,7 @@
           confirm(0, val);
         }
       "
-      v-model:is-visible="show"
+      v-model:visible="show"
       :is-show-chinese="false"
     ></nut-datepicker>
     <nut-datepicker
@@ -34,7 +32,7 @@
           confirm(1, val);
         }
       "
-      v-model:is-visible="show2"
+      v-model:visible="show2"
       :is-show-chinese="false"
     ></nut-datepicker>
     <nut-datepicker
@@ -48,7 +46,7 @@
           confirm(2, val);
         }
       "
-      v-model:is-visible="show3"
+      v-model:visible="show3"
     ></nut-datepicker>
     <nut-datepicker
       v-model="currentDate"
@@ -56,26 +54,12 @@
       type="time"
       :min-date="minDate"
       :max-date="maxDate"
-      :is-use12-hours="true"
       @confirm="
         val => {
           confirm(3, val);
         }
       "
-      v-model:is-visible="show4"
-    ></nut-datepicker>
-    <nut-datepicker
-      v-model="currentDate"
-      title="时间选择"
-      type="time"
-      :min-date="minDate"
-      :max-date="maxDate"
-      @confirm="
-        val => {
-          confirm(4, val);
-        }
-      "
-      v-model:is-visible="show5"
+      v-model:visible="show4"
     ></nut-datepicker>
     <nut-datepicker
       v-model="currentDate"
@@ -86,10 +70,10 @@
       :max-date="maxDate"
       @confirm="
         val => {
-          confirm(5, val);
+          confirm(4, val);
         }
       "
-      v-model:is-visible="show6"
+      v-model:visible="show5"
     ></nut-datepicker>
   </div>
 </template>
@@ -106,31 +90,28 @@ export default createDemo({
     const show3 = ref(false);
     const show4 = ref(false);
     const show5 = ref(false);
-    const show6 = ref(false);
-    const showList = [show, show2, show3, show4, show5, show6];
+
+    const showList = [show, show2, show3, show4, show5];
     const currentDate = new Date(2020, 0, 1);
 
     const today = currentDate;
     const desc1 = ref('2020-1-1');
     const desc2 = ref('2020-1-1');
     const desc3 = ref('2020年-1月-1日-0时-0分');
-    const desc4 = ref('0时-0分-上午');
+    const desc4 = ref('0时-0分-0秒');
     const desc5 = ref('0时-0分-0秒');
-    const desc6 = ref('0时-0分-0秒');
-    const descList = [desc1, desc2, desc3, desc4, desc5, desc6];
+    const descList = [desc1, desc2, desc3, desc4, desc5];
     return {
       show,
       show2,
       show3,
       show4,
       show5,
-      show6,
       desc1,
       desc2,
       desc3,
       desc4,
       desc5,
-      desc6,
       currentDate,
       minDate: new Date(2020, 0, 1),
       maxDate: new Date(2025, 10, 1),

src/packages/datepicker/doc.md

@@ -21,7 +21,7 @@ app.use(DatePicker);
 <nut-datepicker
     v-model="currentDate"
     @confirm="confirm"
-    v-model:is-visible="show"
+    v-model:visible="show"
     :is-show-chinese="false"
 ></nut-datepicker> 
 ```
@@ -53,7 +53,7 @@ export default createDemo({
     :min-date="minDate"
     :max-date="maxDate"
     @confirm="confirm"
-    v-model:is-visible="show"
+    v-model:visible="show"
     :is-show-chinese="false"
 ></nut-datepicker> 
 ```
@@ -88,7 +88,7 @@ export default createDemo({
     :max-date="maxDate"
     type="datetime"
     @confirm="confirm"
-    v-model:is-visible="show" 
+    v-model:visible="show" 
 ></nut-datepicker> 
 ```
 ```javascript
@@ -123,7 +123,7 @@ export default createDemo({
     :max-date="maxDate"
     :is-use12-hours="true"
     @confirm="confirm"
-    v-model:is-visible="show"
+    v-model:visible="show"
 ></nut-datepicker>
 ``` 
 ### 时间选择-分钟数递增步长设置
@@ -136,7 +136,7 @@ export default createDemo({
     :max-date="maxDate"
     :is-use12-hours="true"
     @confirm="confirm"
-    v-model:is-visible="show"
+    v-model:visible="show"
 ></nut-datepicker>
 ```  
 
@@ -148,7 +148,7 @@ export default createDemo({
 |--------------|----------------------------------|--------|------------------|
 |  v-model        |    初始值 | Date |`null`  |
 |  type        |    类型，日期'date'， 日期时间'datetime'，时间'time' | String |`'date'`  |
-|  is-visible     |     是否可见    |  Boolean | `false`  |
+|  visible     |     是否可见    |  Boolean | `false`  |
 |  is-use12-hours     | 是否十二小时制度，只限类型为'time'时使用 | Boolean | `false` |
 |  minute-step | 分钟步进值  | Number | `1` |
 |  is-show-chinese  | 每列是否展示中文 | Boolean | `false`           |

src/packages/datepicker/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view-block>
     <nut-picker
-      :is-visible="show"
+      :visible="show"
       @close="closeHandler"
       :list-data="columns"
       @change="changeHandler"
@@ -35,7 +35,7 @@ export default create({
   children: [picker],
   props: {
     modelValue: null,
-    isVisible: {
+    visible: {
       type: Boolean,
       default: false
     },
@@ -47,10 +47,6 @@ export default create({
       type: String,
       default: 'date'
     },
-    isUse12Hours: {
-      type: Boolean,
-      default: false
-    },
     isShowChinese: {
       type: Boolean,
       default: true
@@ -70,7 +66,7 @@ export default create({
       validator: isDate
     }
   },
-  emits: ['click', 'update:isVisible', 'confirm'],
+  emits: ['click', 'update:visible', 'confirm'],
 
   setup(props, { emit }) {
     const state = reactive({
@@ -183,11 +179,7 @@ export default create({
           result = result.slice(0, 5);
           break;
         case 'time':
-          if (props.isUse12Hours) {
-            result = result.slice(3, 5);
-          } else {
-            result = result.slice(3, 6);
-          }
+          result = result.slice(3, 6);
           break;
         case 'month-day':
           result = result.slice(1, 3);
@@ -269,9 +261,6 @@ export default create({
           res.type
         );
       });
-      if (props.type === 'time' && props.isUse12Hours) {
-        val.push({ values: ['上午', '下午'], defaultIndex: 0 });
-      }
       return val;
     });
     const handleClick = (event: Event) => {
@@ -279,11 +268,11 @@ export default create({
     };
 
     const closeHandler = () => {
-      emit('update:isVisible', false);
+      emit('update:visible', false);
     };
 
     const confirm = (val: Event) => {
-      emit('update:isVisible', false);
+      emit('update:visible', false);
       emit('confirm', val);
     };
 
@@ -299,7 +288,7 @@ export default create({
     );
 
     watch(
-      () => props.isVisible,
+      () => props.visible,
       val => {
         state.show = val;
       }

src/packages/picker/Column.vue

@@ -155,7 +155,7 @@ export default create({
     const momentum = (distance: number, duration: number) => {
       const speed = Math.abs(distance / duration);
 
-      distance = state.offset + (speed / 0.003) * (distance < 0 ? -1 : 1);
+      distance = state.offset + (speed / 0.03) * (distance < 0 ? -1 : 1);
 
       const index = getIndexByOffset(distance);
 

src/packages/picker/demo.vue

@@ -8,21 +8,21 @@
     <nut-cell title="请选择地址" :desc="desc3" @click="open(3)"></nut-cell>
 
     <nut-picker
-      v-model:is-visible="show"
+      v-model:visible="show"
       :list-data="listData1"
       title="城市选择"
       @confirm="confirm"
       @close="close"
     ></nut-picker>
     <nut-picker
-      v-model:is-visible="show2"
+      v-model:visible="show2"
       :list-data="listData2"
       title="多列选择"
       @confirm="confirm2"
       @close="close"
     ></nut-picker>
     <nut-picker
-      v-model:is-visible="show3"
+      v-model:visible="show3"
       :list-data="listData3"
       title="地址选择"
       @confirm="confirm3"

src/packages/picker/doc.md

@@ -20,7 +20,7 @@ app.use(Picker);
 ```html
 <nut-cell title="请选择城市" :desc="desc" @click="open"></nut-cell>
 <nut-picker
-    v-model:is-visible="show"
+    v-model:visible="show"
     :list-data="listData"
     title="城市选择"
     @confirm="confirm" 
@@ -59,7 +59,7 @@ export default createDemo({
 ```html
 <nut-cell title="请选择时间" :desc="desc" @click="open"></nut-cell>
 <nut-picker
-    v-model:is-visible="show"
+    v-model:visible="show"
     :list-data="listData"
     title="多列选择"
     @confirm="confirm"
@@ -100,7 +100,7 @@ export default createDemo({
 ```html
 <nut-cell title="地址" :desc="desc" @click="open"></nut-cell>
 <nut-picker
-    v-model:is-visible="show"
+    v-model:visible="show"
     :list-data="listData"
     title="地址选择"
     @confirm="confirm" 
@@ -162,7 +162,7 @@ export default createDemo({
     
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
-| is-visible   | 是否可见               | Boolean | false             |
+| visible   | 是否可见               | Boolean | false             |
 | title        | 设置标题                         | String | -                |
 | list-data         | 列表数据 | Array | -                |
 | default-value-index         | 初始选中项的索引，默认为 0 | number | 0                |

src/packages/picker/index.scss

@@ -46,6 +46,9 @@
     color: #fa2c19;
     font-size: 16px;
   }
+  &__button {
+    cursor: pointer;
+  }
   &__item {
     display: flex;
     justify-content: center;

src/packages/picker/index.vue

@@ -7,9 +7,13 @@
       @close="close"
     >
       <view-block class="nut-picker__bar">
-        <view-block class="nut-picker__left" @click="close">取消</view-block>
+        <view-block class="nut-picker__left nut-picker__button" @click="close"
+          >取消</view-block
+        >
         <view-block> {{ title }}</view-block>
-        <view-block @click="confirm()">确定</view-block>
+        <view-block class="nut-picker__button" @click="confirm()"
+          >确定</view-block
+        >
       </view-block>
 
       <view-block class="nut-picker__column">
@@ -61,7 +65,7 @@ const { create, componentName } = createComponent('picker');
 export default create({
   children: [column, popup],
   props: {
-    isVisible: {
+    visible: {
       type: Boolean,
       default: false
     },
@@ -71,8 +75,7 @@ export default create({
     },
     ...commonProps
   },
-  emits: ['close', 'change', 'confirm', 'update:isVisible'],
-
+  emits: ['close', 'change', 'confirm', 'update:visible'],
   setup(props, { emit }) {
     const childrenKey = 'children';
     const valuesKey = 'values';
@@ -172,7 +175,7 @@ export default create({
 
     const close = () => {
       emit('close');
-      emit('update:isVisible', false);
+      emit('update:visible', false);
     };
 
     const changeHandler = (columnIndex: number, dataIndex: number) => {
@@ -223,11 +226,11 @@ export default create({
         );
       }
 
-      emit('update:isVisible', false);
+      emit('update:visible', false);
     };
 
     watch(
-      () => props.isVisible,
+      () => props.visible,
       val => {
         state.show = val;
       }

src/packages/tabbar/index.vue

@@ -34,7 +34,7 @@ export default create({
     },
     activeColor: {
       type: String,
-      default: '#fa2c19'
+      default: ''
     }
   },
   emits: ['tab-switch', 'update:show'],

src/packages/tabbaritem/index.scss

@@ -1,58 +1,60 @@
-.tabbar-item {
+.nut-tabbar-item {
   flex: 1;
   text-align: center;
   text-decoration: none;
-  color: $text-color;
+  color: $primary-color;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
-}
-.icon-box {
-  padding: 0px;
-  display: inline-block;
-  position: relative;
-
-  .tips {
-    position: absolute;
-    background: $tabbar-active-color;
-    border: 1px solid $white;
-    border-radius: 7px;
-    text-align: center;
 
-    top: -2px;
-    right: -7px;
-    box-shadow: 0 0 0 1px $white;
-    font-size: $font-size-1;
-    color: $white;
+  &__icon--unactive {
+    color: $black;
   }
 
-  .num {
-    line-height: 1;
-    font-size: $font-size-0;
-    color: $white;
-    padding: 1px 2px 2px 3px;
-  }
-  .nums {
-    line-height: 1;
-    font-size: $font-size-0;
-    color: $white;
-    padding: 2px 1px 2px 2px;
-  }
-}
+  &_icon-box {
+    padding: 0px;
+    display: inline-block;
+    position: relative;
 
-.icon-box .icon {
-  display: block;
-  background-size: 100% 100%;
-  background-position: center center;
-}
+    &_tips {
+      position: absolute;
+      background: $tabbar-active-color;
+      border: 1px solid $white;
+      border-radius: 7px;
+      text-align: center;
+      top: -2px;
+      right: -7px;
+      box-shadow: 0 0 0 1px $white;
+      font-size: $font-size-1;
+      color: $white;
+    }
 
-.icon-box .tabbar-nav-word {
-  font-size: $font-size-0;
-  display: block;
-}
+    &_num {
+      line-height: 1;
+      font-size: $font-size-0;
+      color: $white;
+      padding: 1px 2px 2px 3px;
+    }
 
-.icon-box .big-word {
-  font-size: $font-size-large;
-  line-height: 1;
+    &_nums {
+      line-height: 1;
+      font-size: $font-size-0;
+      color: $white;
+      padding: 2px 1px 2px 2px;
+    }
+    &_icon {
+      display: block;
+      background-size: 100% 100%;
+      background-position: center center;
+    }
+    &_nav-word {
+      font-size: $font-size-0;
+      display: block;
+    }
+    &_big-word {
+      font-size: $font-size-large;
+      line-height: 1;
+    }
+  }
 }

src/packages/tabbaritem/index.vue

@@ -1,23 +1,39 @@
 <template>
   <div
-    class="tabbar-item"
+    class="nut-tabbar-item"
+    :class="{ 'nut-tabbar-item__icon--unactive': state.active != state.index }"
     :style="{
       color:
         state.active == state.index ? state.activeColor : state.unactiveColor
     }"
     @click="change(state.index)"
   >
-    <view class="icon-box">
-      <view class="tips num" v-if="num && num <= 99">
+    <view class="nut-tabbar-item_icon-box">
+      <view
+        class="nut-tabbar-item_icon-box_tips nut-tabbar-item_icon-box_num"
+        v-if="num && num <= 99"
+      >
         {{ num }}
       </view>
-      <view class="tips nums" v-else-if="num && num > 100">{{ '99+' }}</view>
+      <view
+        class="nut-tabbar-item_icon-box_tips nut-tabbar-item_icon-box_nums"
+        v-else-if="num && num > 100"
+        >{{ '99+' }}</view
+      >
       <view v-if="icon">
-        <nut-icon class="icon" :size="state.size" :name="icon"></nut-icon>
+        <nut-icon
+          class="nut-tabbar-item_icon-box_icon"
+          :size="state.size"
+          :name="icon"
+        ></nut-icon>
       </view>
-      <view :class="['tabbar-nav-word', { 'big-word': !icon }]">{{
-        tabTitle
-      }}</view>
+      <view
+        :class="[
+          'nut-tabbar-item_icon-box_nav-word',
+          { 'nut-tabbar-item_icon-box_big-word': !icon }
+        ]"
+        >{{ tabTitle }}</view
+      >
     </view>
   </div>
 </template>