chore: checkbox mini

packages/mini-demo/order.json

@@ -1 +1 @@
-{"input":{"AutoHeight":"6","Basic":"1","Clearable":"2","Disabled":"5","Native":"3","ReadOnly":"4","ShowLength":"7","Vertical":"8","Readonly":"4","Disable":0},"swipe-action":{"Basic":0}}
+{"input":{"AutoHeight":"6","Basic":"1","Clearable":"2","Disabled":"5","Native":"3","ReadOnly":"4","ShowLength":"7","Vertical":"8","Readonly":"4","Disable":0},"swipe-action":{"Basic":0},"checkbox":{"Controlled":"3","Custom":"6","Basic":"1","Buttton":"2","List":"4","CustomIcon":"6"}}

packages/mini-demo/src/app.config.ts

@@ -8,6 +8,7 @@ export default defineAppConfig({
     'pages/tabs/index',
     'pages/input/index',
     'pages/swipe-action/index',
+    'pages/checkbox/index',
   ],
   window: {
     backgroundTextStyle: 'light',

packages/mini-demo/src/pages/checkbox/component/basic.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Checkbox, List, Panel } from 'zarm/mini';
+
+/* order: 1 */
+
+function Demo() {
+  return (
+    <Panel title="基础用法">
+      <List>
+        <List.Item>
+          <Checkbox onChange={(e) => console.log(e)}>普通</Checkbox>
+        </List.Item>
+        <List.Item>
+          <Checkbox defaultChecked type="button">
+            默认选中
+          </Checkbox>
+        </List.Item>
+        <List.Item>
+          <Checkbox disabled>禁用</Checkbox>
+        </List.Item>
+      </List>
+    </Panel>
+  );
+}
+
+export default Demo;

packages/mini-demo/src/pages/checkbox/component/buttton.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Checkbox, List, Panel } from 'zarm/mini';
+
+/* order: 2 */
+
+function Demo() {
+  return (
+    <Panel title="按钮样式">
+      <List>
+        <List.Item>
+          <Checkbox.Group type="button" onChange={(e) => console.log(e)} block>
+            <Checkbox value="0">选项一</Checkbox>
+            <Checkbox value="1">选项二</Checkbox>
+            <Checkbox value="2">选项三</Checkbox>
+          </Checkbox.Group>
+        </List.Item>
+      </List>
+    </Panel>
+  );
+}
+
+export default Demo;

packages/mini-demo/src/pages/checkbox/component/controlled.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { showModal } from '@tarojs/taro';
+import { Checkbox, List, Panel } from 'zarm/mini';
+
+/* order: 3 */
+
+const Demo = () => {
+  const [checked, setChecked] = useState(false);
+
+  const onChange = (e) => {
+    if (!e.target.checked) {
+      showModal({
+        content: '是否要取消选择',
+        cancelText: '不取消',
+        success: ({ confirm }) => {
+          if (confirm) {
+            setChecked(false);
+          }
+        },
+      });
+      return false;
+    }
+    setChecked(true);
+  };
+
+  return (
+    <Panel title="取消勾选前确认">
+      <List>
+        <List.Item>
+          <Checkbox checked={checked} onChange={onChange}>
+            取消勾选前确认
+          </Checkbox>
+        </List.Item>
+      </List>
+    </Panel>
+  );
+};
+
+export default Demo;

packages/mini-demo/src/pages/checkbox/component/custom-icon.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { List, Checkbox, Panel } from 'zarm/mini';
+import { Star, StarFill, Success, Close } from '@zarm-design/icons';
+
+/* order: 6 */
+
+function Demo() {
+  return (
+    <Panel title="自定义icon">
+      <List>
+        <List.Item>
+          <Checkbox.Group>
+            <Checkbox
+              value="0"
+              renderIcon={({ checked }) =>
+                checked ? <Success theme="primary" /> : <Close theme="danger" />
+              }
+            >
+              选项一
+            </Checkbox>
+            <Checkbox
+              value="1"
+              renderIcon={({ checked }) =>
+                checked ? <StarFill theme="primary" /> : <Star theme="primary" />
+              }
+            >
+              选项二
+            </Checkbox>
+            <Checkbox value="2">选项三</Checkbox>
+          </Checkbox.Group>
+        </List.Item>
+      </List>
+    </Panel>
+  )
+}
+
+export default Demo;

packages/mini-demo/src/pages/checkbox/component/custom.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { List, Checkbox, Panel } from 'zarm/mini';
+import { Success } from '@zarm-design/icons';
+import { View } from '@tarojs/components';
+
+/* order: 6 */
+
+const items = ['选项一', '选项二', '选项三'];
+
+const Demo = () => {
+  const [value, setValue] = useState(['0']);
+
+  const onChange = (v) => {
+    console.log('onChange', v);
+    setValue(v);
+  };
+
+  const CustomCheckbox = (props) => {
+    return (
+      <Checkbox
+        value={props.value}
+      >
+        {({ checked }) => (
+          <View
+            style={{
+              position: 'relative',
+              padding: '4px 8px',
+              fontSize: 14,
+              borderWidth: '1px',
+              borderStyle: 'solid',
+              borderColor: checked ? 'var(--za-theme-primary)' : 'var(--za-theme-default)',
+            }}
+          >
+            <View
+              style={{
+                display: checked ? 'inline-block' : 'none',
+                position: 'absolute',
+                right: 0,
+                top: 0,
+                fontSize: 0,
+              }}
+            >
+              <Success style={{ fontSize: 10 }} theme="primary" />
+            </View>
+            {props.label}
+          </View>
+      )}
+    </Checkbox>
+    );
+  };
+  return (
+    <Panel title="自定义">
+      <List>
+        <List.Item>
+          <Checkbox.Group
+            value={value}
+            onChange={onChange}
+            style={{
+              '--group-spacing-horizontal': '8px',
+              '--group-spacing-vertical': '6px',
+            }}
+          >
+            {items.map((item, index) => (
+              <CustomCheckbox key={+index} value={String(index)} label={item} />
+            ))}
+          </Checkbox.Group>
+        </List.Item>
+      </List>
+    </Panel>
+  );
+};
+
+export default Demo;

packages/mini-demo/src/pages/checkbox/component/list.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Checkbox, Panel } from 'zarm/mini';
+
+/* order: 4 */
+
+function Demo() {
+  return (
+    <Panel title="列表样式">
+      <Checkbox.Group type="list" onChange={(e) => console.log(e)}>
+        <Checkbox value="0">选项一</Checkbox>
+        <Checkbox value="1">选项二</Checkbox>
+        <Checkbox value="2">选项三</Checkbox>
+      </Checkbox.Group>
+    </Panel>
+  );
+}
+
+export default Demo;

packages/mini-demo/src/pages/checkbox/index.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: 'Checkbox',
+});

packages/mini-demo/src/pages/checkbox/index.scss

@@ -0,0 +1,3 @@
+view {
+  box-sizing: border-box;
+}

packages/mini-demo/src/pages/checkbox/index.tsx

@@ -0,0 +1,23 @@
+
+import * as React from 'react';
+import Basic from './component/basic';
+import Buttton from './component/buttton';
+import Controlled from './component/controlled';
+import CustomIcon from './component/custom-icon';
+import Custom from './component/custom';
+import List from './component/list';
+
+import './index.scss';
+
+export default () => {
+  return (
+    <>
+      <Basic />
+      <Buttton />
+      <Controlled />
+      <List />
+      <CustomIcon />
+      <Custom />
+    </>
+  )
+}

packages/mini-demo/src/site.ts

@@ -28,6 +28,17 @@ const siteMap = {
         page: '/pages/input/index',
       },
       // {
+      {
+        key: 'Checkbox',
+        name: '复选框',
+        page: '/pages/checkbox/index',
+      },
+      // {
+      //   key: 'Input',
+      //   name: '输入框',
+      //   page: '/pages/input/index',
+      // },
+      // {
       //   key: 'Keyboard',
       //   name: '键盘',
       //   page: '/pages/keyboard/index',

packages/zarm/src/button/Button.mini.tsx

@@ -7,7 +7,7 @@
 
 export interface ButtonProps extends BaseButtonProps, Omit<TaroButtonProps, 'size'> {}
 
-const Button: React.FC = (props: ButtonProps) => {
+const Button = (props: ButtonProps) => {
   const {
     className,
     theme,