feat(switch): add switch component

.changeset/bright-impalas-fetch.md

@@ -0,0 +1,6 @@
+---
+'@banana-ui/react': minor
+'@banana-ui/banana': minor
+---
+
+add switch component

.dumirc.ts

@@ -124,6 +124,10 @@ export default defineConfig({
               link: '/example/stepper',
               title: 'Stepper 数量选择器',
             },
+            {
+              link: '/example/switch',
+              title: 'Switch 开关',
+            },
           ],
         },
         {

docs/example/Switch/demos/basicUsage.tsx

@@ -0,0 +1,9 @@
+/**
+ * title: 基本使用
+ */
+
+import { Switch } from '@banana-ui/react';
+
+export default function BasicUsage() {
+  return <Switch />;
+}

docs/example/Switch/demos/disabled.tsx

@@ -0,0 +1,20 @@
+/**
+ * title: 禁用状态
+ */
+
+import { Switch } from '@banana-ui/react';
+
+export default function Disabled() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '6px',
+      }}
+    >
+      <Switch disabled />
+      <Switch disabled checked />
+    </div>
+  );
+}

docs/example/Switch/demos/size.tsx

@@ -0,0 +1,31 @@
+/**
+ * title: 尺寸
+ * description: Switch 组件提供了`small`、`default`、默认为 `default`两种尺寸。还可以通过修改CSS变量来自定义大小。
+ */
+
+import { Switch } from '@banana-ui/react';
+
+export default function BasicUsage() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '6px',
+      }}
+    >
+      <Switch size="small" />
+      <Switch />
+      <span>自定义尺寸</span>
+      <Switch
+        style={
+          {
+            '--banana-switch-width': '60px',
+            '--banana-switch-height': '28px',
+            '--banana-switch-control-size': '24px',
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+}

docs/example/Switch/demos/withContent.tsx

@@ -0,0 +1,83 @@
+/**
+ * title: 携带内容
+ */
+
+import { Switch } from '@banana-ui/react';
+
+export default function WithContent() {
+  const checkedSvg = (
+    <svg
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      //@ts-ignore
+      t="1711257906171"
+      className="icon"
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      p-id="7150"
+      width="18"
+      height="18"
+    >
+      <path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="7151"></path>
+      <path
+        d="M955.733333 512c0 245.077333-198.656 443.733333-443.733333 443.733333S68.266667 757.077333 68.266667 512 266.922667 68.266667 512 68.266667s443.733333 198.656 443.733333 443.733333z"
+        fill="#11AA66"
+        p-id="7152"
+      ></path>
+      <path
+        d="M512 102.4C285.7984 102.4 102.4 285.7984 102.4 512s183.3984 409.6 409.6 409.6 409.6-183.3984 409.6-409.6S738.2016 102.4 512 102.4zM34.133333 512C34.133333 248.081067 248.081067 34.133333 512 34.133333s477.866667 213.947733 477.866667 477.866667-213.947733 477.866667-477.866667 477.866667S34.133333 775.918933 34.133333 512z"
+        fill="#11AA66"
+        p-id="7153"
+      ></path>
+      <path
+        d="M787.114667 339.285333a51.2 51.2 0 0 1 0 72.362667l-307.2 307.2a51.2 51.2 0 0 1-72.362667 0l-170.666667-170.666667a51.2 51.2 0 0 1 72.362667-72.362666L443.733333 610.235733l271.018667-271.018666a51.2 51.2 0 0 1 72.362667 0z"
+        fill="#FFFFFF"
+        p-id="7154"
+      ></path>
+    </svg>
+  );
+
+  const uncheckedSvg = (
+    <svg
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      //@ts-ignore
+      t="1711257880605"
+      className="icon"
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      p-id="5963"
+      width="18"
+      height="18"
+    >
+      <path
+        d="M512 981.333333C252.8 981.333333 42.666667 771.2 42.666667 512S252.8 42.666667 512 42.666667s469.333333 210.133333 469.333333 469.333333-210.133333 469.333333-469.333333 469.333333z m44.245333-469.333333l159.914667-159.914667a31.274667 31.274667 0 1 0-44.245333-44.245333L512 467.754667 352.085333 307.84a31.274667 31.274667 0 1 0-44.245333 44.245333L467.754667 512l-159.914667 159.914667a31.274667 31.274667 0 1 0 44.245333 44.245333L512 556.245333l159.914667 159.914667a31.274667 31.274667 0 1 0 44.245333-44.245333L556.245333 512z"
+        fill="#F5222D"
+        p-id="5964"
+      ></path>
+    </svg>
+  );
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '6px',
+      }}
+    >
+      <Switch>
+        <span slot="checked">开启</span>
+        <span slot="unchecked">关闭</span>
+      </Switch>
+      <Switch>
+        <span slot="checked">1</span>
+        <span slot="unchecked">0</span>
+      </Switch>
+      <Switch>
+        <span slot="checked">{checkedSvg}</span>
+        <span slot="unchecked">{uncheckedSvg}</span>
+      </Switch>
+    </div>
+  );
+}

docs/example/Switch/index.md

@@ -0,0 +1,72 @@
+---
+group: 组件
+demo:
+  cols: 2
+---
+
+# Switch 开关 <Badge>表单组件</Badge>
+
+```
+<b-switch> | Switch
+```
+
+表示开关状态/两种状态之间的切换时；
+
+## 代码演示
+
+<code src="./demos/basicUsage.tsx"></code>
+<code src="./demos/withContent.tsx"></code>
+<code src="./demos/disabled.tsx"></code>
+<code src="./demos/size.tsx"></code>
+<code src="./demos/formTest.tsx"></code>
+
+## 属性 - Attributes & Properties
+
+| 属性           | 说明                              | 类型                     | 默认值      |
+| -------------- | --------------------------------- | ------------------------ | ----------- |
+| checked        | 是否选中                          | `boolean`                | false       |
+| defaultChecked | 默认是否选中                      | `boolean`                | false       |
+| disabled       | 是否禁用                          | `boolean`                | false       |
+| readonly       | 是否只读                          | `boolean`                | false       |
+| name           | 用于表单提交的字段名              | `string`                 | -           |
+| size           | 尺寸                              | `'small'` \| `'default'` | `'default'` |
+| required       | 是否必填                          | `boolean`                | false       |
+| controlled     | 是否受控                          | `boolean`                | false       |
+| form           | 可以传入一个 id, 用于指定所属表单 | `string`                 | -           |
+
+## 事件 - Events
+
+| 事件   | 说明               | Event Detail           |
+| ------ | ------------------ | ---------------------- |
+| change | checked 变化时触发 | `{ checked: boolean }` |
+
+## 插槽 - Slots
+
+| 插槽      | 说明                              |
+| --------- | --------------------------------- |
+| checked   | 开关为 checked 状态时展示的内容   |
+| unchecked | 开关为 unchecked 状态时展示的内容 |
+
+## CSS Parts
+
+| Part    | 说明                                        |
+| ------- | ------------------------------------------- |
+| base    | 包裹组件的容器                              |
+| control | 开关的 control 部分，也就是开关移动的小圆点 |
+| inner   | 开关有内容的时候，存放内容的容器            |
+
+## 样式变量
+
+| 变量                                        | 说明                                     | 默认值              |
+| ------------------------------------------- | ---------------------------------------- | ------------------- |
+| --banana-switch-gap                         | 开关的 control 与容器的 padding          | 2px                 |
+| --banana-color-text                         | 开关的文字的颜色                         | #fff                |
+| --banana-font-size                          | 开关的字体大小                           | 14px                |
+| --banana-font-family                        | 开关的字体                               | inherit             |
+| --banana-switch-width                       | 开关容器的最小宽度                       | 44px                |
+| --banana-switch-height                      | 开关容器的高度                           | 22px                |
+| --banana-switch-background-no-checked       | 开关不是 checked 状态时的背景颜色        | rgba(0, 0, 0, 0.25) |
+| --banana-switch-background-no-checked-hover | 开关不是 checked 状态时 hover 的背景颜色 | rgba(0, 0, 0, 0.45) |
+| --banana-switch-background-checked          | 开关是 checked 状态背景颜色              | #1677ff             |
+| --banana-switch-control-size                | 开关的 control 的大小                    | 18px                |
+| --banana-inner-gap                          | 开关的 control 与容器间的间距            | 2px                 |

packages/banana-react/src/index.ts

@@ -20,6 +20,7 @@ import { Rating } from './rating';
 import { Select } from './select';
 import { SelectOption } from './select-option';
 import { Stepper } from './stepper';
+import { Switch } from './switch';
 import { Tooltip } from './tooltip';
 
 export {
@@ -45,5 +46,6 @@ export {
   Select,
   SelectOption,
   Stepper,
+  Switch,
   Tooltip,
 };

packages/banana-react/src/switch/index.ts

@@ -0,0 +1,18 @@
+import { BSwitch } from '@banana-ui/banana';
+import { EventName, createComponent } from '@lit-labs/react';
+import * as React from 'react';
+
+const events = {
+  onChange: 'change' as EventName<
+    CustomEvent<{
+      value: boolean;
+    }>
+  >,
+};
+
+export const Switch = createComponent({
+  tagName: 'b-switch',
+  react: React,
+  elementClass: BSwitch,
+  events,
+});

packages/banana/src/index.ts

@@ -20,6 +20,7 @@ import BRating from './rating';
 import BSelect from './select';
 import BSelectOption from './select-option';
 import BStepper from './stepper';
+import BSwitch from './switch';
 import BTooltip from './tooltip';
 
 export {
@@ -45,5 +46,6 @@ export {
   BSelect,
   BSelectOption,
   BStepper,
+  BSwitch,
   BTooltip,
 };