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

src/config.json

@@ -27,6 +27,12 @@
         "show": true
       },
       {
+        "name": "version",
+        "cName": "4.0 更新介绍",
+        "eName": "Version",
+        "show": true
+      },
+      {
         "name": "migrate-from-v3",
         "cName": "从 v3 升级到 v4",
         "eName": "Migrate-from-v3",

src/packages/__VUE/calendar/doc.en-US.md

@@ -652,6 +652,7 @@ Through [ref](https://vuejs.org/guide/essentials/template-refs.html), you can ge
 | Name | Description             | Arguments          |
 |--------|------------------|---------------|
 | scrollToDate   | Scroll to the month of the specified date:'2021-12-30' | `string` |
+| initPosition `v4.0.1`   | Initialize scroll position |  |
 ## Theming
 
 ### CSS Variables

src/packages/__VUE/calendar/doc.md

@@ -667,6 +667,7 @@ export default {
 | 方法名          | 说明               | 参数          |
 |----------------|-------------------|---------------|
 | scrollToDate   | 滚动到指定日期所在月,如：'2021-12-30' | `string` |
+| initPosition `v4.0.1`   | 初始化滚动位置 | 无 |
 
 ## 主题定制
 

src/packages/__VUE/calendar/doc.taro.md

@@ -657,7 +657,7 @@ export default {
 | 方法名 | 说明             | 参数          |
 |--------|------------------|---------------|
 | scrollToDate   | 滚动到指定日期所在月,如：'2021-12-30' | `string` |
-
+| initPosition `v4.0.1`   | 初始化滚动位置 | 无 |
 ## 主题定制
 
 ### 样式变量

src/packages/__VUE/calendar/index.taro.vue

@@ -187,8 +187,12 @@ export default create({
     const scrollToDate = (date: string) => {
       calendarRef.value?.scrollToDate(date);
     };
+    const initPosition = () => {
+      calendarRef.value?.initPosition();
+    };
     useExpose({
-      scrollToDate
+      scrollToDate,
+      initPosition
     });
     // methods
     const update = () => {

src/packages/__VUE/calendar/index.vue

@@ -185,8 +185,12 @@ export default create({
     const scrollToDate = (date: string) => {
       calendarRef.value?.scrollToDate(date);
     };
+    const initPosition = () => {
+      calendarRef.value?.initPosition();
+    };
     useExpose({
-      scrollToDate
+      scrollToDate,
+      initPosition
     });
     // methods
     const update = () => {

src/packages/__VUE/calendaritem/index.taro.vue

@@ -671,8 +671,12 @@ export default create({
         }
       });
     };
+    const initPosition = () => {
+      state.scrollTop = Math.ceil(state.monthsData[state.currentIndex].cssScrollHeight);
+    };
     useExpose({
-      scrollToDate
+      scrollToDate,
+      initPosition
     });
     const setDefaultRange = (monthsNum: number, current: number) => {
       let rangeArr: number[] = [];

src/packages/__VUE/calendaritem/index.vue

@@ -624,8 +624,14 @@ export default create({
         }
       });
     };
+    const initPosition = () => {
+      if (months?.value) {
+        months.value.scrollTop = state.monthsData[state.currentIndex].cssScrollHeight;
+      }
+    };
     useExpose({
-      scrollToDate
+      scrollToDate,
+      initPosition
     });
     // 设置当前可见月份
     const setDefaultRange = (monthsNum: number, current: number) => {

src/packages/__VUE/calendaritem/type.ts

@@ -71,4 +71,5 @@ export interface MonthInfo {
 }
 export interface CalendarRef extends HTMLElement {
   scrollToDate: (date: string) => void;
+  initPosition: () => void;
 }

src/packages/__VUE/checkbox/__tests__/checkbox.spec.ts

@@ -97,3 +97,22 @@ test('should emit "update:modelValue" event when checkbox is clicked', async ()
   wrapper.trigger('click');
   expect(wrapper.emitted('update:modelValue')![1]).toEqual([false]);
 });
+
+test('checkbox shape test', async () => {
+  const wrapper = mount({
+    components: {
+      'nut-checkbox': Checkbox
+    },
+    template: `
+      <template>
+        <nut-checkbox shape="button"></nut-checkbox>
+        <nut-checkbox></nut-checkbox>
+      </template>
+    `
+  });
+
+  const items = wrapper.findAll('.nut-checkbox');
+
+  expect((items[0] as any).find('.nut-checkbox__button').exists()).toBeTruthy();
+  expect((items[1] as any).find('.nut-checkbox__button').exists()).toBeFalsy();
+});

src/packages/__VUE/checkbox/common.ts

@@ -28,6 +28,10 @@ export const component = (componentName: string, components: Record<string, Comp
       indeterminate: {
         type: Boolean,
         default: false
+      },
+      shape: {
+        type: String,
+        default: 'round' // button
       }
     },
     emits: ['change', 'update:modelValue'],
@@ -113,6 +117,18 @@ export const component = (componentName: string, components: Record<string, Comp
         );
       };
 
+      const renderButton = () => {
+        return h(
+          'view',
+          {
+            class: `${componentName}__button ${pValue.value && `${componentName}__button--active`} ${
+              pDisabled.value ? `${componentName}__button--disabled` : ''
+            }`
+          },
+          slots.default?.()
+        );
+      };
+
       const handleClick = (e: MouseEvent | TouchEvent) => {
         if (pDisabled.value) return;
         if (checked.value && state.partialSelect) {
@@ -150,10 +166,13 @@ export const component = (componentName: string, components: Record<string, Comp
         return h(
           'view',
           {
-            class: `${componentName} ${props.textPosition === 'left' ? `${componentName}--reverse` : ''}`,
+            class: `${componentName} ${componentName}--${props.shape} ${
+              props.textPosition === 'left' ? `${componentName}--reverse` : ''
+            }`,
+
             onClick: handleClick
           },
-          [renderIcon(), renderLabel()]
+          [props.shape == 'button' ? renderButton() : [renderIcon(), renderLabel()]]
         );
       };
     }

src/packages/__VUE/checkbox/demo.vue

@@ -126,6 +126,14 @@
         </nut-cell>
       </nut-checkbox-group>
     </nut-cell-group>
+    <nut-cell-group :title="translate('useShape')">
+      <nut-cell>
+        <nut-checkbox-group v-model="checkboxgroup6">
+          <nut-checkbox label="1" shape="button">{{ translate('useShape') }}</nut-checkbox>
+          <nut-checkbox label="2" shape="button">{{ translate('useShape') }}</nut-checkbox>
+        </nut-checkbox-group>
+      </nut-cell>
+    </nut-cell-group>
   </div>
 </template>
 <script lang="ts">
@@ -157,7 +165,8 @@ const initTranslate = () =>
       checkbox: '复选框',
       selectedDisable: '选中时禁用状态',
       unselectDisable: '未选时禁用状态',
-      useGroupInte: '全选/半选/取消'
+      useGroupInte: '全选/半选/取消',
+      useShape: '按钮形状'
     },
     'en-US': {
       basic: 'Basic usage - left and right',
@@ -179,7 +188,8 @@ const initTranslate = () =>
       checkbox: 'check box',
       selectedDisable: 'Disabled when selected',
       unselectDisable: 'Disabled when not selected',
-      useGroupInte: 'Select all / half / cancel'
+      useGroupInte: 'Select all / half / cancel',
+      useShape: 'Button shape'
     }
   });
 export default createDemo({
@@ -206,6 +216,7 @@ export default createDemo({
       checkboxgroup3: ['2'],
       checkboxgroup4: ['2'],
       checkboxgroup5: [],
+      checkboxgroup6: [],
       checkboxsource: [
         { label: '1', value: translate('combine') },
         { label: '2', value: translate('combine') },
@@ -237,6 +248,7 @@ export default createDemo({
     };
 
     const changeBox6 = (label: string[]) => {
+      console.log(11);
       if (label.length === 4) {
         data.indeterminate = false;
         data.checkbox10 = true;

src/packages/__VUE/checkbox/doc.en-US.md

@@ -417,6 +417,7 @@ When the value changes, the `change` event will be triggered
 | icon-size | [Icon Size](#/en-US/icon) | string \| number | `18` 
 | label | Text content of the check box | string | - 
 | indeterminate | Whether half selection status is currently supported. It is generally used in select all operation       | boolean                  | `false` |
+| shape | Shape, optional values：`button`、`round` | String | `round` |
 
 ### Checkbox Slots
 | Name | Description |
@@ -468,3 +469,11 @@ The component provides the following CSS variables, which can be used to customi
 | --nut-checkbox-label-font-size| _14px_ |
 | --nut-checkbox-icon-font-size| _18px_ |
 | --nut-checkbox-icon-disable-color2| _var(--nut-help-color)_ |
+| --nut-checkbox-button-padding|  _5px 18px_  |
+| --nut-checkbox-button-font-size|  _12px_  |
+| --nut-checkbox-button-border-radius|  _15px_  |
+| --nut-checkbox-button-border-color|  _#f6f7f9_  |
+| --nut-checkbox-button-background|  _#f6f7f9_  |
+| --nut-checkbox-button-font-color-active|  _var(--nut-primary-color)_  |
+| --nut-checkbox-button-border-color-active|  _var(--nut-primary-color)_  |
+| --nut-checkbox-button-background-active|  _var(--nut-primary-color)_  |

src/packages/__VUE/checkbox/doc.md

@@ -422,6 +422,8 @@ app.use(CheckboxGroup);
 | icon-size | [图标尺寸](#/zh-CN/component/icon) | string \| number | `18`
 | label | 复选框的文本内容 | string | -
 | indeterminate | 当前是否支持半选状态，一般用在全选操作中        | boolean                  | `false` |
+| shape | 形状，可选值：`button`、`round` | String | `round` |
+
 ### Checkbox Slots
 | 名称 | 说明 |
 |-|-|
@@ -473,3 +475,11 @@ app.use(CheckboxGroup);
 | --nut-checkbox-label-font-size| _14px_ |
 | --nut-checkbox-icon-font-size| _18px_ |
 | --nut-checkbox-icon-disable-color2| _var(--nut-help-color)_ |
+| --nut-checkbox-button-padding|  _5px 18px_  |
+| --nut-checkbox-button-font-size|  _12px_  |
+| --nut-checkbox-button-border-radius|  _15px_  |
+| --nut-checkbox-button-border-color|  _#f6f7f9_  |
+| --nut-checkbox-button-background|  _#f6f7f9_  |
+| --nut-checkbox-button-font-color-active|  _var(--nut-primary-color)_  |
+| --nut-checkbox-button-border-color-active|  _var(--nut-primary-color)_  |
+| --nut-checkbox-button-background-active|  _var(--nut-primary-color)_  |

src/packages/__VUE/checkbox/doc.taro.md

@@ -382,6 +382,8 @@ app.use(CheckboxGroup);
 | icon-size | [图标尺寸](#/zh-CN/component/icon) | string \| number | `18`
 | label | 复选框的文本内容 | string | -
 | indeterminate | 当前是否支持半选状态，一般用在全选操作中        | boolean                  | `false` |
+| shape | 形状，可选值：`button`、`round` | String | `round` |
+
 ### Checkbox Slots
 | 名称 | 说明 |
 |-|-|
@@ -433,3 +435,11 @@ app.use(CheckboxGroup);
 | --nut-checkbox-label-font-size| _14px_ | -  |
 | --nut-checkbox-icon-font-size| _18px_ | -  |
 | --nut-checkbox-icon-disable-color2| _var(--nut-help-color)_ | -  |
+| --nut-checkbox-button-padding|  _5px 18px_  |
+| --nut-checkbox-button-font-size|  _12px_  |
+| --nut-checkbox-button-border-radius|  _15px_  |
+| --nut-checkbox-button-border-color|  _#f6f7f9_  |
+| --nut-checkbox-button-background|  _#f6f7f9_  |
+| --nut-checkbox-button-font-color-active|  _var(--nut-primary-color)_  |
+| --nut-checkbox-button-border-color-active|  _var(--nut-primary-color)_  |
+| --nut-checkbox-button-background-active|  _var(--nut-primary-color)_  |

src/packages/__VUE/checkbox/index.scss

@@ -6,6 +6,14 @@
         color: $checkbox-label-disable-color;
       }
     }
+    &__button {
+      background: $dark-background;
+      color: $dark-color;
+      &--disabled {
+        color: $checkbox-label-disable-color;
+        border: 1px solid $checkbox-label-disable-color;
+      }
+    }
   }
 }
 .nut-checkbox {
@@ -18,6 +26,39 @@
       margin-left: 0;
     }
   }
+  &__button {
+    display: inline-flex;
+    align-items: center;
+    padding: $checkbox-button-padding;
+    font-size: $checkbox-button-font-size;
+    background: $checkbox-button-background;
+    border-radius: $checkbox-button-border-radius;
+    color: $checkbox-label-color;
+    box-sizing: border-box;
+    border: 1px solid $checkbox-button-border-color;
+    &--active {
+      background: transparent;
+      color: $checkbox-button-font-color-active;
+      border: 1px solid $checkbox-button-border-color-active;
+      position: relative;
+      &::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: $checkbox-button-background-active;
+        opacity: 0.05;
+        content: '';
+      }
+    }
+    &--disabled {
+      color: $checkbox-label-disable-color;
+      border: none;
+    }
+  }
   &__label {
     flex: 1;
     margin-left: $checkbox-label-margin-left;

src/packages/__VUE/input/index.taro.vue

@@ -247,7 +247,7 @@ export default create({
       let value = input.value;
       active.value = true;
       emit('focus', event);
-      emit('update:modelValue', value);
+      // emit('update:modelValue', value);
     };
 
     const onBlur = (event: Event) => {
@@ -265,7 +265,7 @@ export default create({
       }
       updateValue(getModelValue(), 'onBlur');
       emit('blur', event);
-      emit('update:modelValue', value);
+      // emit('update:modelValue', value);
     };
 
     const clear = (event: Event) => {

src/packages/__VUE/input/index.vue

@@ -228,7 +228,7 @@ export default create({
       let value = input.value;
       active.value = true;
       emit('focus', event);
-      emit('update:modelValue', value);
+      // emit('update:modelValue', value);
     };
 
     const onBlur = (event: Event) => {
@@ -246,7 +246,7 @@ export default create({
       }
       updateValue(getModelValue(), 'onBlur');
       emit('blur', event);
-      emit('update:modelValue', value);
+      // emit('update:modelValue', value);
     };
 
     const clear = (event: Event) => {

src/packages/__VUE/uploader/index.taro.vue

@@ -38,7 +38,12 @@
         <view class="nut-uploader__preview-img__file__name" @click="fileItemClick(item)" :class="[item.status]">
           <Link class="nut-uploader__preview-img__file__link" />
           <view class="file__name_tips">{{ item.name }}</view>
-          <Del color="#808080" class="nut-uploader__preview-img__file__del" @click="onDelete(item, index)"></Del>
+          <Del
+            v-if="isDeletable"
+            color="#808080"
+            class="nut-uploader__preview-img__file__del"
+            @click="onDelete(item, index)"
+          ></Del>
         </view>
 
         <nut-progress

src/packages/__VUE/uploader/index.vue

@@ -38,7 +38,12 @@
         <view @click="fileItemClick(item)" class="nut-uploader__preview-img__file__name" :class="[item.status]">
           <Link class="nut-uploader__preview-img__file__link" />
           <view class="file__name_tips">{{ item.name }}</view>
-          <Del color="#808080" class="nut-uploader__preview-img__file__del" @click="onDelete(item, index)"></Del>
+          <Del
+            v-if="isDeletable"
+            color="#808080"
+            class="nut-uploader__preview-img__file__del"
+            @click="onDelete(item, index)"
+          ></Del>
         </view>
 
         <nut-progress

src/packages/styles/variables-jdb.scss

@@ -504,7 +504,15 @@ $checkbox-icon-disable-color: #d6d6d6 !default;
 $checkbox-label-margin-left: 15px !default;
 $checkbox-label-font-size: 14px !default;
 $checkbox-icon-font-size: 18px !default;
-$checkbox-icon-disable-color2: $help-color !default;
+$checkbox-icon-disable-color2: var(--nut-checkbox-icon-disable-color2, $help-color) !default;
+$checkbox-button-padding: var(--nut-checkbox-button-padding, 5px 18px) !default;
+$checkbox-button-font-size: var(--nut-checkbox-button-font-size, 12px) !default;
+$checkbox-button-border-radius: var(--nut-checkbox-button-border-radius, 15px) !default;
+$checkbox-button-border-color: var(--nut-checkbox-button-border-color, #f6f7f9) !default;
+$checkbox-button-background: var(--nut-checkbox-button-background, #f6f7f9) !default;
+$checkbox-button-font-color-active: var(--nut-checkbox-button-font-color-active, $primary-color) !default;
+$checkbox-button-border-color-active: var(--nut-checkbox-button-border-color-active, $primary-color) !default;
+$checkbox-button-background-active: var(--nut-checkbox-button-background-active, $primary-color) !default;
 
 //radio
 $radio-label-font-color: #1d1e1e !default;

src/packages/styles/variables-jddkh.scss

@@ -436,7 +436,15 @@ $checkbox-icon-disable-color: #d6d6d6 !default;
 $checkbox-label-margin-left: 15px !default;
 $checkbox-label-font-size: 14px !default;
 $checkbox-icon-font-size: 18px !default;
-$checkbox-icon-disable-color2: $checkbox-icon-disable-color !default;
+$checkbox-icon-disable-color2: var(--nut-checkbox-icon-disable-color2, $help-color) !default;
+$checkbox-button-padding: var(--nut-checkbox-button-padding, 5px 18px) !default;
+$checkbox-button-font-size: var(--nut-checkbox-button-font-size, 12px) !default;
+$checkbox-button-border-radius: var(--nut-checkbox-button-border-radius, 15px) !default;
+$checkbox-button-border-color: var(--nut-checkbox-button-border-color, #f6f7f9) !default;
+$checkbox-button-background: var(--nut-checkbox-button-background, #f6f7f9) !default;
+$checkbox-button-font-color-active: var(--nut-checkbox-button-font-color-active, $primary-color) !default;
+$checkbox-button-border-color-active: var(--nut-checkbox-button-border-color-active, $primary-color) !default;
+$checkbox-button-background-active: var(--nut-checkbox-button-background-active, $primary-color) !default;
 
 //radio
 $radio-label-font-color: #1d1e1e !default;

src/packages/styles/variables-jdt.scss

@@ -442,6 +442,14 @@ $checkbox-label-margin-left: var(--nut-checkbox-label-margin-left, 8px) !default
 $checkbox-label-font-size: var(--nut-checkbox-label-font-size, 16px) !default;
 $checkbox-icon-font-size: var(--nut-checkbox-icon-font-size, 20px) !default;
 $checkbox-icon-disable-color2: var(--nut-checkbox-icon-disable-color2, $help-color) !default;
+$checkbox-button-padding: var(--nut-checkbox-button-padding, 5px 18px) !default;
+$checkbox-button-font-size: var(--nut-checkbox-button-font-size, 12px) !default;
+$checkbox-button-border-radius: var(--nut-checkbox-button-border-radius, 15px) !default;
+$checkbox-button-border-color: var(--nut-checkbox-button-border-color, #f6f7f9) !default;
+$checkbox-button-background: var(--nut-checkbox-button-background, #f6f7f9) !default;
+$checkbox-button-font-color-active: var(--nut-checkbox-button-font-color-active, $primary-color) !default;
+$checkbox-button-border-color-active: var(--nut-checkbox-button-border-color-active, $primary-color) !default;
+$checkbox-button-background-active: var(--nut-checkbox-button-background-active, $primary-color) !default;
 
 //radio
 $radio-label-font-color: var(--nut-radio-label-font-color, rgba(0, 0, 0, 0.85)) !default;

src/packages/styles/variables.scss

@@ -480,6 +480,14 @@ $checkbox-label-margin-left: var(--nut-checkbox-label-margin-left, 15px) !defaul
 $checkbox-label-font-size: var(--nut-checkbox-label-font-size, 14px) !default;
 $checkbox-icon-font-size: var(--nut-checkbox-icon-font-size, 18px) !default;
 $checkbox-icon-disable-color2: var(--nut-checkbox-icon-disable-color2, $help-color) !default;
+$checkbox-button-padding: var(--nut-checkbox-button-padding, 5px 18px) !default;
+$checkbox-button-font-size: var(--nut-checkbox-button-font-size, 12px) !default;
+$checkbox-button-border-radius: var(--nut-checkbox-button-border-radius, 15px) !default;
+$checkbox-button-border-color: var(--nut-checkbox-button-border-color, #f6f7f9) !default;
+$checkbox-button-background: var(--nut-checkbox-button-background, #f6f7f9) !default;
+$checkbox-button-font-color-active: var(--nut-checkbox-button-font-color-active, $primary-color) !default;
+$checkbox-button-border-color-active: var(--nut-checkbox-button-border-color-active, $primary-color) !default;
+$checkbox-button-background-active: var(--nut-checkbox-button-background-active, $primary-color) !default;
 
 //radio
 $radio-label-font-color: var(--nut-radio-label-font-color, #1d1e1e) !default;

src/sites/mobile-taro/vue/src/dentry/pages/checkbox/index.vue

@@ -107,6 +107,14 @@
         <nut-cell><nut-checkbox label="4">组合复选框</nut-checkbox></nut-cell>
       </nut-checkbox-group>
     </nut-cell-group>
+    <nut-cell-group title="按钮形状">
+      <nut-cell>
+        <nut-checkbox-group v-model="checkboxgroup6">
+          <nut-checkbox label="1" shape="button">按钮形状</nut-checkbox>
+          <nut-checkbox label="2" shape="button">按钮形状</nut-checkbox>
+        </nut-checkbox-group>
+      </nut-cell>
+    </nut-cell-group>
   </div>
 </template>
 <script lang="ts">
@@ -140,6 +148,7 @@ export default {
       checkboxgroup3: ['2'],
       checkboxgroup4: ['2'],
       checkboxgroup5: [],
+      checkboxgroup6: [],
       checkboxsource: [
         { label: '1', value: '组合复选框' },
         { label: '2', value: '组合复选框' },