feat: adjust 1.0props

demo/pages/Checkbox/index.axml

@@ -11,9 +11,6 @@
         <label class="wrapper"><checkbox/><text>自定义布局</text>
         </label>
       </list-item>
-      <list-item className="demo-item">
-        <checkbox color="#00b578" checked>指定颜色</checkbox>
-      </list-item>
     </list>
   </demo-block>
   <demo-block title="默认选中" padding="0">
@@ -28,10 +25,15 @@
   </demo-block>
   <demo-block title="自定义图标" padding="0">
     <list-item className="demo-item demo-item-icon">
-      <checkbox icon="SmileOutline" checkedIcon="SmileFill">自定义图标（Icon）</checkbox>
+      <checkbox>自定义图标（Icon）
+        <am-icon type="SmileOutline" style="color:#1677ff" slot="icon"/>
+        <am-icon type="SmileFill" style="color:#1677ff"  slot="checkedIcon"/>
+      </checkbox>
     </list-item>
     <list-item className="demo-item demo-item-image">
-      <checkbox color="transparent" checked checkedIcon="https://gw.alipayobjects.com/mdn/rms_ffbcbf/afts/img/A*2oqcRL38fWwAAAAAAAAAAAAAARQnAQ">自定义图标（图片）</checkbox>
+      <checkbox checked>自定义图标（图片）
+        <image style="width:100%;height:100%;border-radius:50%;" slot="checkedIcon" src="https://gw.alipayobjects.com/mdn/rms_ffbcbf/afts/img/A*2oqcRL38fWwAAAAAAAAAAAAAARQnAQ"/>
+      </checkbox>
     </list-item>
   </demo-block>
 </view>

demo/pages/Checkbox/index.json

@@ -1,6 +1,7 @@
 {
   "defaultTitle": "CheckBox",
   "usingComponents": {
+    "am-icon": "../../../src/Icon/index",
     "checkbox": "../../../src/Checkbox/index",
     "list": "../../../src/List/index",
     "list-item": "../../../src/List/ListItem/index",

demo/pages/CheckboxGroup/index.axml

@@ -67,9 +67,10 @@
     <checkbox-item 
       a:for="{{list}}"
       value="{{item.value}}"  
-      icon="SmileOutline" checkedIcon="SmileFill"
       uid="group5">
         {{item.label}}
+        <am-icon type="SmileOutline" style="color:#1677ff" slot="icon"/>
+        <am-icon type="SmileFill" style="color:#1677ff"  slot="checkedIcon"/>
     </checkbox-item>
 
   </checkbox-group>

demo/pages/CheckboxGroup/index.json

@@ -1,6 +1,7 @@
 {
   "defaultTitle": "CheckBoxGroup",
   "usingComponents": {
+    "am-icon": "../../../src/Icon/index",
     "demo-block": "../../components/DemoBlock/index",
     "checkbox-group": "../../../src/CheckboxGroup/index",
     "checkbox-item": "../../../src/CheckboxGroup/CheckboxItem/index"

demo/pages/Checklist/index.js

@@ -58,7 +58,7 @@ Page({
       {
         value: 2,
         title: '只读列表项2',
-        readOnly: true
+        readonly: true
       },
       {
         value: 3,

demo/pages/Icon/index.axml

@@ -10,7 +10,7 @@
   <view class="icon-list">
     <view class="icon-item" a:for="{{iconTypes}}" a:if="{{item.indexOf('Outline') > 1&&item.toUpperCase().indexOf(searchValue.toUpperCase())>-1}}">
       <view class="icon-item-wrapper" onTap="handleClickIcon" data-info="{{item}}">
-        <am-icon type="{{item}}" color="#1677ff" size="small" />
+        <am-icon type="{{item}}" style="color:#1677ff;font-size:24px" />
         <text class="icon-desc">{{item}}</text>
       </view>
     </view>
@@ -21,7 +21,7 @@
   <view class="icon-list">
     <view class="icon-item" a:for="{{iconTypes}}" a:if="{{item.indexOf('Fill') > 1&&item.toUpperCase().indexOf(searchValue.toUpperCase())>-1}}">
       <view class="icon-item-wrapper" onTap="handleClickIcon" data-info="{{item}}">
-        <am-icon type="{{item}}" color="#1677ff" size="small" onTap="handleClickIcon" data-info="{{item}}" />
+        <am-icon type="{{item}}" style="color:#1677ff;font-size:24px" />
         <text class="icon-desc">{{item}}</text>
       </view>
     </view>

demo/pages/TabBar/index.axml

@@ -28,7 +28,7 @@
       tabs="{{tabs}}"
       activeKey="{{tabsColorIndex}}"
       onChange="handleChangeTabsColor"
-      activeColor="red"
+      activeStyle="color:red;"
     />
   </demo-block>
 

demo/pages/Tabs/index.axml

@@ -1,8 +1,8 @@
-<tabs uid="tab1" onChange="handleChangeTab1" index="{{tab1Index}}">
+<tabs uid="tab1" onChange="handleChangeTab1" activekey="{{tab1Index}}">
   <block a:for="{{tabTypes}}" a:for-index="idx" a:for-item="tabTypeItem">
     <tab-content uid="tab1" tab="{{tabTypeItem}}">
       <demo-block title="基础用法" padding="0">
-        <tabs uid="{{'tab2'+idx}}" type="{{tabTypeItem.type}}" onChange="handleChangeTab2" index="{{tab2Index}}">
+        <tabs uid="{{'tab2'+idx}}" type="{{tabTypeItem.type}}" onChange="handleChangeTab2" activekey="{{tab2Index}}">
           <block a:for="{{tabList}}">
             <tab-content uid="{{'tab2'+idx}}" tab="{{item}}">
               <view class="content">{{item.content}}</view>
@@ -11,7 +11,7 @@
         </tabs>
       </demo-block>
       <demo-block title="手势切换" padding="0">
-        <tabs uid="{{'tab3'+idx}}" type="{{tabTypeItem.type}}" onChange="handleChangeTab3" index="{{tab3Index}}" animation swipeable>
+        <tabs uid="{{'tab3'+idx}}" type="{{tabTypeItem.type}}" onChange="handleChangeTab3" activekey="{{tab3Index}}" animation swipeable>
           <block a:for="{{tabList}}">
             <tab-content uid="{{'tab3'+idx}}" tab="{{item}}">
               <view class="content">{{item.content}}</view>
@@ -20,7 +20,7 @@
         </tabs>
       </demo-block>
       <demo-block title="禁用状态" padding="0">
-        <tabs uid="{{'tab4'+idx}}" type="{{tabTypeItem.type}}" onChange="handleChangeTab4" index="{{tab4Index}}">
+        <tabs uid="{{'tab4'+idx}}" type="{{tabTypeItem.type}}" onChange="handleChangeTab4" activekey="{{tab4Index}}">
           <block a:for="{{tabList}}">
             <tab-content a:if="{{index === 1}}" uid="{{'tab4'+idx}}" tab="{{...item, disabled: true}}">
               <view class="content">{{item.content}}</view>
@@ -32,7 +32,7 @@
         </tabs>
       </demo-block>
       <demo-block title="无内容" padding="0">
-        <tabs uid="{{'tab5'+idx}}" type="{{tabTypeItem.type}}" onChange="handleChangeTab5" index="{{tab5Index}}">
+        <tabs uid="{{'tab5'+idx}}" type="{{tabTypeItem.type}}" onChange="handleChangeTab5" activekey="{{tab5Index}}">
           <block a:for="{{tabList}}">
             <tab-content uid="{{'tab5'+idx}}" tab="{{item}}">
               <view class="content" />
@@ -41,7 +41,7 @@
         </tabs>
       </demo-block>
       <demo-block title="带有徽标" padding="0">
-        <tabs uid="{{'tab6'+idx}}" type="{{tabTypeItem.type}}" onChange="handleChangeTab6" index="{{tab6Index}}">
+        <tabs uid="{{'tab6'+idx}}" type="{{tabTypeItem.type}}" onChange="handleChangeTab6" activekey="{{tab6Index}}">
           <block a:if="{{tabTypeItem.type === 'capsule'}}">
             <tab-content uid="{{'tab6'+idx}}" tab="{{title:'水果', subTitle:'描述文案', badge: {type: 'dot', x: '-100%'}}}">
               <view class="content">西瓜</view></tab-content>
@@ -61,7 +61,7 @@
         </tabs>
       </demo-block>
       <demo-block title="超长滚动" padding="0">
-        <tabs uid="{{'tab7'+idx}}" type="{{tabTypeItem.type}}" onChange="handleChangeTab7" index="{{tab7Index}}">
+        <tabs uid="{{'tab7'+idx}}" type="{{tabTypeItem.type}}" onChange="handleChangeTab7" activekey="{{tab7Index}}">
           <block a:for="{{multiTabList}}">
             <tab-content uid="{{'tab7'+idx}}" tab="{{item}}">
               <view class="content">{{item.content}}</view>
@@ -70,7 +70,7 @@
         </tabs>
       </demo-block>
       <demo-block title="带拓展按钮" padding="0">
-        <tabs uid="{{'tab8'+idx}}" type="{{tabTypeItem.type}}" onChange="handleChangeTab8" index="{{tab8Index}}">
+        <tabs uid="{{'tab8'+idx}}" type="{{tabTypeItem.type}}" onChange="handleChangeTab8" activekey="{{tab8Index}}">
           <block a:for="{{tabList}}">
             <tab-content uid="{{'tab8'+idx}}" tab="{{item}}">
               <view class="content">{{item.content}}</view>

demo/pages/VTabs/index.axml

@@ -1,5 +1,5 @@
 <vtabs 
-  index="{{index}}"
+activekey="{{index}}"
   onChange="onChange">
   <view slot="title" slot-scope="prop">
     {{prop.tab.title}}

src/CascaderPicker/index.axml

@@ -1,6 +1,8 @@
 <picker 
     className="amd-cascader-picker {{className||''}}"
-    popClassName="amd-cascader-picker-popup"
+    style="{{style}}"
+    popClassName="amd-cascader-picker-popup {{popClassName || ''}}"
+    popStyle="{{popStyle}}"
     data="{{columns}}"
     value="{{currentValue}}"
     disabled="{{disabled}}"

src/CascaderPicker/props.d.ts

@@ -78,5 +78,13 @@ export interface ICascaderProps extends IBaseFormItemPropsWithOutFocus {
    * @default false
    */
   maskClosable?: boolean;
+  /**
+   * @description 弹出框类名
+   */
+  popClassName?: string;
+  /**
+   * @description 弹出框样式
+   */
+  popStyle?: string;
 }
 export declare const CascaderDefaultProps: Partial<ICascaderProps>;

src/Checkbox/index.axml

@@ -1,11 +1,4 @@
-<template name="icon">
-  <block a:if="{{url}}">
-    <image mode="scaleToFill" class="amd-checkbox-fake-image" src="{{url}}" a:if="{{url.indexOf('http')===0||url.indexOf('data:')===0||url.indexOf('.')===0||url.indexOf('/')===0}}"/>
-    <amd-icon  class="amd-checkbox-fake-icon"  a:else type="{{url}}"/>
-  </block>
-
-</template>
-<label class="amd-checkbox {{disabled?'amd-checkbox-disabled':''}} {{cValue?'amd-checkbox-checked':''}} {{className ? className : ''}} ">
+<label class="amd-checkbox {{disabled?'amd-checkbox-disabled':''}} {{cValue?'amd-checkbox-checked':''}} {{className ? className : ''}} " style="{{style||''}}">
   <checkbox
     class="amd-checkbox-base"
     controlled="{{controlled}}"
@@ -16,20 +9,19 @@
     checked="{{cValue}}"
     value="{{value}}"
   />
-  <view 
-    style="{{!disabled&&cValue&&color?'color:'+color + '; border-color:' + color:''}}"
-    class="amd-checkbox-fake 
-    {{disabled 
-        ? cValue
-          ? 'amd-checkbox-fake-disabled-checked' + (disabledCheckedIcon? ' amd-checkbox-fake-custom' : '')
-          : 'amd-checkbox-fake-disabled-not-checked' + (disabledIcon? ' amd-checkbox-fake-custom' : '')
-        : cValue
-          ? 'amd-checkbox-fake-not-disabled-checked' + (checkedIcon? ' amd-checkbox-fake-custom' : '')
-          : 'amd-checkbox-fake-not-disabled-not-checked' + (icon? ' amd-checkbox-fake-custom' : '')}}">
-      <template is="icon"  a:if="{{!cValue && !disabled}}" data="{{url:icon}}"/>
-      <template is="icon"  a:if="{{!cValue && disabled}}" data="{{url:disabledIcon}}"/>
-      <template is="icon"  a:if="{{cValue && !disabled}}" data="{{url:checkedIcon||'CheckCircleFill'}}"/>
-      <template is="icon"  a:if="{{cValue && disabled}}" data="{{url:disabledCheckedIcon||'CheckOutline'}}"/>
+  <view class="amd-checkbox-fake">
+      <slot name="icon" a:if="{{ !cValue && !disabled }}">
+        <view class="amd-checkbox-fake-icon"></view>
+      </slot>
+      <slot name="checkedIcon" a:if="{{ cValue && !disabled }}">
+        <amd-icon  class="amd-checkbox-fake-checkedIcon" type="CheckCircleFill"/>
+      </slot>
+      <slot name="disbaledIcon" a:if="{{ !cValue && disabled }}">
+        <view class="amd-checkbox-fake-disbaledIcon"></view>
+      </slot>
+      <slot name="disabledCheckedIcon" a:if="{{ cValue && disabled }}">
+        <view class="amd-checkbox-fake-disabledCheckedIcon"/>
+      </slot>
   </view>
   <view class="amd-checkbox-content">
     <slot />

src/Checkbox/index.less

@@ -26,56 +26,49 @@
     overflow: hidden;
     z-index: 1;
     pointer-events: none;
-    border: @checkbox-border-width solid @checkbox-border-color;
-    border-radius: @checkbox-corner-radius;
     background-color: #fff;
-    box-sizing: border-box;
     transition: background-color 200ms ease-out;
     display: flex;
     justify-content: center;
     align-items: center;
-    &-image {
-      height: 100%;
+    font-size: 48 * @rpx;
+    &-icon {
+      box-sizing: border-box;
+      border: @checkbox-border-width solid @checkbox-border-color;
+      border-radius: @checkbox-corner-radius;
       width: 100%;
-      position: absolute;
-      top: 0;
-      right: 0;
+      height: 100%;
     }
-    &-icon {
-      font-size: 48 * @rpx;
+    &-checkedIcon {
+      color: #1677ff;
     }
-    &-disabled {
-      &-checked {
-        background-color: @checkbox-disabled-background;
-        border: none;
-        color: #b7b7b7;
-        &:not(.amd-checkbox-fake-custom) {
-          border: @checkbox-border-width solid #d0d0d0;
-          .amd-checkbox-fake-icon {
-            font-size: 26 * @rpx;
-            color: #aaa;
-          }
-        }
-      }
-      &-not-checked {
-        background-color: @checkbox-disabled-background;
-        border-color: #d0d0d0;
-        color: #f5f5f5;
-      }
+    &-disbaledIcon {
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      border: @checkbox-border-width solid #d0d0d0;
+      border-radius: @checkbox-corner-radius;
+      background-color: @checkbox-disabled-background;
     }
-    &-not-disabled {
-      &-checked {
-        border: none;
-        color: @color-fill-primary;
-      }
-      &-not-checked {
-        color: #d0d0d0;
+    &-disabledCheckedIcon {
+      background-color: #f5f5f5;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      border: @checkbox-border-width solid #d0d0d0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: @checkbox-corner-radius;
+      &::after {
+        content: '';
+        display: block;
+        width: 24 * @rpx;
+        height: 24 * @rpx;
+        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjNweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgMjMgMTUiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+UGF0aDwvdGl0bGU+CiAgICA8ZyBpZD0i6aG16Z2iLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtb3BhY2l0eT0iMC4yNSI+CiAgICAgICAgPGcgaWQ9IuWNlemAieahhi1SYWRpbyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE5NS4wMDAwMDAsIC0yMDEyLjAwMDAwMCkiIGZpbGw9IiMwMDAwMDAiPgogICAgICAgICAgICA8ZyBpZD0i57yW57uELTUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2MC4wMDAwMDAsIDE5NzIuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0ic2VsZWN0ZWRfY2lyY2xlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNC4wMDAwMDAsIDI2LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zMy41MjM4MDk1LDE1LjA3Njg2NzQgQzMzLjUyMzgwOTUsMTUuMTg1OTM1NCAzMy40ODA5OTkxLDE1LjI5MDU1NDQgMzMuNDA0NTkwOCwxNS4zNjc2MzQ0IEwyMS4wNjA0Mzk1LDI3LjgzNDE0MSBDMjAuODAwMjg0NiwyOC4wOTY4NzQ1IDIwLjQ2ODk5MzMsMjguMjQ0NjYyMiAyMC4xMjg1NTQ2LDI4LjI3ODUzMDIgTDE5Ljk4MzIzMzQsMjguMjg1NzE0MyBDMTkuNTkzMDAwOSwyOC4yODU3MTQzIDE5LjIwMjc2ODUsMjguMTM0ODQ3NyAxOC45MDUwMTEzLDI3LjgzNDE0MDcgTDExLjY0MzAyODUsMjAuNDk5MTY2OCBDMTEuNDg0MTk1LDIwLjMzODkzNzQgMTEuNDg0MDUxNiwyMC4wNzkwMSAxMS42NDI3MDg0LDE5LjkxODU5OTggQzExLjcxOTAzMiwxOS44NDE0MzQxIDExLjgyMjYyNDEsMTkuNzk4MTEzNCAxMS45MzA2MjE2LDE5Ljc5ODE5OTUgTDE1LjA5MTA5OTksMTkuNzk4MTk5NSBDMTUuMTk4NTg4NywxOS43OTgzODU2IDE1LjMwMTYyODcsMTkuODQxNTYgMTUuMzc3Njc2OSwxOS45MTgyNzcgTDE5Ljk4MjIxNTUsMjQuNTY3NDMxMSBMMjkuNjY4OTA4MywxNC43ODY3NDQzIEMyOS43NDUyMDU2LDE0LjcwOTc3NjMgMjkuODQ4NjYwNiwxNC42NjY2NjYgMjkuOTU2NTAxNCwxNC42NjY2NjYgTDMzLjExNjk3OTcsMTQuNjY2NjY2IEMzMy4zNDE0OTY3LDE0LjY2NjQ5MDcgMzMuNTIzODA5NSwxNC44NTAxNDI4IDMzLjUyMzgwOTUsMTUuMDc2ODY3NCBaIiBpZD0iUGF0aCI+PC9wYXRoPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
+        background-size: 100% 100%;
       }
     }
-    &-custom {
-      border: none;
-      background-color: #fff;
-    }
   }
   &-disabled {
     .@{checkBoxPrefix}-content {

src/Checkbox/index.md

@@ -21,43 +21,19 @@ toc: 'content'
 <code src='../../demo/pages/Checkbox'></code>
 
 ## 属性
-    
-| 属性 |  说明 | 类型 | 默认值 |
+
+| 属性 | 说明 | 类型 | 默认值 |
 | -----|-----|-----|-----|
-| checked | 是否选中  | boolean | false |
-| disabled | 是否禁用  | boolean | false |
-| color | 选中的颜色，同 CSS 色值 | string | false |
-| value | checkbox 携带的 value 值, 在原生 form 表单提交的时候有用 | string | - |
-| icon | 自定义未选中图标，支持[Icon](./icon#代码示例)和图片路径 | string | - |
-| checkedIcon | 自定义选中状态的图标，支持[Icon](./icon#代码示例)和图片路径  | string | - |
-| disabledIcon | 自定义禁用状态的图标，支持[Icon](./icon#代码示例)和图片路径 | string | - |
-| disabledCheckedIcon | 自定义禁用选中状态的图标，支持[Icon](./icon#代码示例)和图片路径 | string | - |
-| id | 表单元素 id | string | - |
-| name | 表单元素 name  | string | - | 
-| className | 类名| string | - |
-
-
-
-## 事件
-
-| 事件名 | 说明 | 类型 |
-| -----|-----|-----|
-| onChange | 选中状态改变，触发回调 | (checked: boolean, event:  [`Event`](https://opendocs.alipay.com/mini/framework/event-object)) => void|
-
-## 插槽
-
-| 名称 | 说明 |
-| ----|----|
-| default | 内容区 |
-
-## 样式类
-
-| 类名 | 说明 |
-| -----|-----|
-| amd-checkbox | 标签样式 |
-| amd-checkbox-disabled | checkbox 组件禁用样式 |
-| amd-checkbox-checked | checkbox 组件禁用样式 |
-| amd-checkbox-base | 原始 checkbox 样式 |
-| amd-checkbox-fake | checkbox 组件未选中样式 |
-| amd-checkbox-fake-custom | 自定义图标时的样式 |
-| amd-checkbox-content | 内容区样式 |
+| checked | 是否选中 | `boolean` | false |
+| checkedIcon | 勾选状态图标插槽 | `slot`| - |
+| className | 类名| `string` | - |
+| disabled | 是否禁用  | `boolean` | false | 
+| disbaledIcon | 禁用时未勾选状态图标插槽 | `slot` | - |
+| disabledCheckedIcon | 禁用时勾选状态图标 插槽| `slot` | - |
+| name |  表单元素name | `string` | - |
+| icon | 未勾选状态图标插槽 | `slot` | - |
+| id | 表单元素id | `string` | - |
+| style | 样式| `string` | - |
+| value | checkbox 携带的 value 值, 在原生 form 表单提交的时候有用 | `string` | - |
+| onChange | 选中状态改变，触发回调 | (checked: `boolean`, event:  [`Event`](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
+

src/CheckboxGroup/CheckboxItem/index.axml

@@ -15,6 +15,10 @@
       checked="{{_checked}}"
       value="{{value}}">  
       <slot />
+      <slot name="icon" slot="icon"/>
+      <slot name="checkedIcon" slot="checkedIcon"/>
+      <slot name="disbaledIcon" slot="disbaledIcon"/>
+      <slot name="disabledCheckedIcon" slot="disabledCheckedIcon"/>
     </checkbox> 
   </list-item>
 </label>