From 85b0a74e135ee0026a162583fdcb0ff9ee452c23 Mon Sep 17 00:00:00 2001
From: AC-0308 <pzzxtyh@qq.com>
Date: Tue, 22 Jul 2025 11:05:14 +0800
Subject: [PATCH] =?UTF-8?q?doc:=20=F0=9F=93=9D=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=9D=97(toggle)=E7=9A=84=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__docs__/__case__/ToggleCheckbox.vue      | 40 ++++++++++++++++
 .../__docs__/__case__/ToggleMinAndMax.vue     | 48 +++++++++++++++++++
 .../toggle/__docs__/__case__/ToggleOnly.vue   | 21 ++++++++
 .../toggle/__docs__/__case__/ToggleRadio.vue  | 40 ++++++++++++++++
 .../toggle/__docs__/__case__/toggleUsage.ts   | 48 +++++++++++++++++++
 .../src/toggle/__docs__/index.en-US.md        | 20 ++++++++
 .../src/toggle/__docs__/index.zh-CN.md        | 20 ++++++++
 packages/opendesign/src/toggle/index.ts       |  1 +
 8 files changed, 238 insertions(+)
 create mode 100644 packages/opendesign/src/toggle/__docs__/__case__/ToggleCheckbox.vue
 create mode 100644 packages/opendesign/src/toggle/__docs__/__case__/ToggleMinAndMax.vue
 create mode 100644 packages/opendesign/src/toggle/__docs__/__case__/ToggleOnly.vue
 create mode 100644 packages/opendesign/src/toggle/__docs__/__case__/ToggleRadio.vue
 create mode 100644 packages/opendesign/src/toggle/__docs__/__case__/toggleUsage.ts
 create mode 100644 packages/opendesign/src/toggle/__docs__/index.en-US.md
 create mode 100644 packages/opendesign/src/toggle/__docs__/index.zh-CN.md

diff --git a/packages/opendesign/src/toggle/__docs__/__case__/ToggleCheckbox.vue b/packages/opendesign/src/toggle/__docs__/__case__/ToggleCheckbox.vue
new file mode 100644
index 00000000..13133edd
--- /dev/null
+++ b/packages/opendesign/src/toggle/__docs__/__case__/ToggleCheckbox.vue
@@ -0,0 +1,40 @@
+<docs lang="md">
+<!--zh-CN-->
+### 多选
+
+<!--en-US-->
+### Multiple
+</docs>
+
+<script setup lang="ts">
+import { OToggle, OCheckboxGroup, OCheckbox } from '@opensig/opendesign';
+import { ref } from 'vue';
+const checkboxVal = ref([1]);
+</script>
+
+<template>
+  <section>
+    <OCheckboxGroup v-model="checkboxVal" :style="{ '--checkbox-group-gap': '8px' }">
+      <OCheckbox :value="1">
+        <template #checkbox="{ checked }">
+          <OToggle :checked="checked">筛选条件1</OToggle>
+        </template>
+      </OCheckbox>
+      <OCheckbox :value="2">
+        <template #checkbox="{ checked }">
+          <OToggle :checked="checked">筛选条件2</OToggle>
+        </template>
+      </OCheckbox>
+      <OCheckbox :value="3">
+        <template #checkbox="{ checked }">
+          <OToggle :checked="checked">筛选条件3</OToggle>
+        </template>
+      </OCheckbox>
+      <OCheckbox :value="4">
+        <template #checkbox="{ checked }">
+          <OToggle :checked="checked">筛选条件4</OToggle>
+        </template>
+      </OCheckbox>
+    </OCheckboxGroup>
+  </section>
+</template>
diff --git a/packages/opendesign/src/toggle/__docs__/__case__/ToggleMinAndMax.vue b/packages/opendesign/src/toggle/__docs__/__case__/ToggleMinAndMax.vue
new file mode 100644
index 00000000..32f70820
--- /dev/null
+++ b/packages/opendesign/src/toggle/__docs__/__case__/ToggleMinAndMax.vue
@@ -0,0 +1,48 @@
+<docs lang="md">
+<!--zh-CN-->
+### 最少选择1个，最多选择3个
+
+<!--en-US-->
+### Number limited
+</docs>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OToggle, OCheckbox, OCheckboxGroup, OIconAdd } from '@opensig/opendesign';
+
+const checkboxVal = ref([1, 2]);
+</script>
+
+<template>
+  <section>
+    <OCheckboxGroup v-model="checkboxVal" :min="1" :max="3" :style="{ '--checkbox-group-gap': '8px' }">
+      <OCheckbox :value="1">
+        <template #checkbox="{ checked, disabled }">
+          <OToggle :checked="checked" :disabled="disabled" :icon="OIconAdd">筛选条件1</OToggle>
+        </template>
+      </OCheckbox>
+      <OCheckbox :value="2">
+        <template #checkbox="{ checked, disabled }">
+          <OToggle :checked="checked" :disabled="disabled" :icon="OIconAdd">筛选条件2</OToggle>
+        </template>
+      </OCheckbox>
+      <OCheckbox :value="3">
+        <template #checkbox="{ checked, disabled }">
+          <OToggle :checked="checked" :disabled="disabled" :icon="OIconAdd">筛选条件3</OToggle>
+        </template>
+      </OCheckbox>
+      <OCheckbox :value="4">
+        <template #checkbox="{ checked, disabled }">
+          <OToggle :checked="checked" :disabled="disabled" :icon="OIconAdd">筛选条件4</OToggle>
+        </template>
+      </OCheckbox>
+      <OCheckbox :value="5">
+        <template #checkbox="{ checked, disabled }">
+          <OToggle :checked="checked" :disabled="disabled" :icon="OIconAdd">筛选条件5</OToggle>
+        </template>
+      </OCheckbox>
+    </OCheckboxGroup>
+  </section>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/packages/opendesign/src/toggle/__docs__/__case__/ToggleOnly.vue b/packages/opendesign/src/toggle/__docs__/__case__/ToggleOnly.vue
new file mode 100644
index 00000000..f83bfcf1
--- /dev/null
+++ b/packages/opendesign/src/toggle/__docs__/__case__/ToggleOnly.vue
@@ -0,0 +1,21 @@
+<docs lang="md">
+<!--zh-CN-->
+### 单独使用
+
+<!--en-US-->
+### standalone
+</docs>
+
+<script setup lang="ts">
+import { OToggle } from '@opensig/opendesign';
+import { ref } from 'vue';
+const checked1 = ref(true);
+</script>
+
+<template>
+  <section>
+    <OToggle v-model:checked="checked1">Checked: {{ checked1 }}</OToggle>
+    <OToggle disabled>Disabled</OToggle>
+    <OToggle>3</OToggle>
+  </section>
+</template>
diff --git a/packages/opendesign/src/toggle/__docs__/__case__/ToggleRadio.vue b/packages/opendesign/src/toggle/__docs__/__case__/ToggleRadio.vue
new file mode 100644
index 00000000..65a6313d
--- /dev/null
+++ b/packages/opendesign/src/toggle/__docs__/__case__/ToggleRadio.vue
@@ -0,0 +1,40 @@
+<docs lang="md">
+<!--zh-CN-->
+### 单选
+
+<!--en-US-->
+### exclusive
+</docs>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OToggle, ORadio, ORadioGroup } from '@opensig/opendesign';
+const radioVal = ref(1);
+</script>
+
+<template>
+  <section>
+    <ORadioGroup v-model="radioVal" :style="{ '--radio-group-gap': '8px' }">
+      <ORadio :value="1">
+        <template #radio="{ checked }">
+          <OToggle :checked="checked">筛选条件1</OToggle>
+        </template>
+      </ORadio>
+      <ORadio :value="2">
+        <template #radio="{ checked }">
+          <OToggle :checked="checked">筛选条件2</OToggle>
+        </template>
+      </ORadio>
+      <ORadio :value="3">
+        <template #radio="{ checked }">
+          <OToggle :checked="checked">筛选条件3</OToggle>
+        </template>
+      </ORadio>
+      <ORadio :value="4">
+        <template #radio="{ checked }">
+          <OToggle :checked="checked">筛选条件4</OToggle>
+        </template>
+      </ORadio>
+    </ORadioGroup>
+  </section>
+</template>
diff --git a/packages/opendesign/src/toggle/__docs__/__case__/toggleUsage.ts b/packages/opendesign/src/toggle/__docs__/__case__/toggleUsage.ts
new file mode 100644
index 00000000..effa1489
--- /dev/null
+++ b/packages/opendesign/src/toggle/__docs__/__case__/toggleUsage.ts
@@ -0,0 +1,48 @@
+import { propsToAttrStr } from '../../../_demo/utils';
+import { reactive } from 'vue';
+import { DocDemoSchema, DocDemoTemplate } from '../../../_demo/types.ts';
+
+export const docs = {
+  'zh-CN':
+    '选择块是指示当前状态并提供切换操作的表单控件，并支持插槽以实现自定义显示。可设置项包含：  \n  \n' +
+    '- 双向绑定状态`checked`  \n' +
+    '- 非受控状态时是否选中`defaultChecked`  \n' +
+    '- 圆角值`round`  \n' +
+    '- 前缀图标`icon`  \n' +
+    '- 是否禁用`disabled`  \n' +
+    '还可以配合`ORadio`、`ORadioGroup`等组件达到唯一选择的目的',
+  'en-US':
+    'Select block is a form control that indicates the current state and provides toggle operations, supporting slots for custom display. Configurable items include：  \n  \n' +
+    '- Two-way bound state`checked`  \n' +
+    '- Whether selected in uncontrolled state `defaultChecked`  \n' +
+    '- Round corner value `round`  \n' +
+    '- Prefix icon `icon`  \n' +
+    '- Disabled state `disabled`  \n' +
+    'It can also be combined with components like `ORadio`、`ORadioGroup`  to achieve single selection',
+};
+
+export const ctx = reactive({ checked1: true });
+
+export const schema = {
+  checked: {
+    type: 'boolean',
+    default: true,
+  },
+  round: {
+    type: 'string',
+    default: 'pill'
+  },
+  disabled: {
+    type: 'boolean',
+    default: false
+  }
+} satisfies Record<string, DocDemoSchema>;
+
+export const template:DocDemoTemplate<typeof schema> = (_props) => {
+  return `
+<section>
+  <OToggle ${propsToAttrStr(_props)}>Checked: ${_props.checked}</OToggle>
+  <OToggle>3</OToggle>
+</section>  
+  `;
+};
diff --git a/packages/opendesign/src/toggle/__docs__/index.en-US.md b/packages/opendesign/src/toggle/__docs__/index.en-US.md
new file mode 100644
index 00000000..ace57f69
--- /dev/null
+++ b/packages/opendesign/src/toggle/__docs__/index.en-US.md
@@ -0,0 +1,20 @@
+---
+sidebar: OToggle
+---
+
+# toggle
+
+## Usage
+
+<!-- @usage toggleUsage -->
+
+## Cases
+
+<!-- @case ToggleCheckbox -->
+<!-- @case ToggleMinAndMax -->
+<!-- @case ToggleOnly -->
+<!-- @case ToggleRadio -->
+
+## Api
+
+<!-- @api OToggle -->
\ No newline at end of file
diff --git a/packages/opendesign/src/toggle/__docs__/index.zh-CN.md b/packages/opendesign/src/toggle/__docs__/index.zh-CN.md
new file mode 100644
index 00000000..2de82ad3
--- /dev/null
+++ b/packages/opendesign/src/toggle/__docs__/index.zh-CN.md
@@ -0,0 +1,20 @@
+---
+sidebar: OToggle 选择块
+---
+
+# 选择块
+
+## 使用
+
+<!-- @usage toggleUsage -->
+
+## 示例
+
+<!-- @case ToggleCheckbox -->
+<!-- @case ToggleMinAndMax -->
+<!-- @case ToggleOnly -->
+<!-- @case ToggleRadio -->
+
+## Api
+
+<!-- @api OToggle -->
\ No newline at end of file
diff --git a/packages/opendesign/src/toggle/index.ts b/packages/opendesign/src/toggle/index.ts
index 4c112877..7765c952 100644
--- a/packages/opendesign/src/toggle/index.ts
+++ b/packages/opendesign/src/toggle/index.ts
@@ -4,6 +4,7 @@ import type { App } from 'vue';
 const OToggle = Object.assign(_OButtonToggle, {
   install(app: App) {
     app.component('OButtonToggle', _OButtonToggle);
+    app.component('OToggle', _OButtonToggle);
   },
 });
 
-- 
Gitee