20260720172840

code/fms/.claude/skills/antdv-next/references/components/switch/demo/_semantic.md

@@ -0,0 +1,37 @@
+# _semantic
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SemanticPreview } from '@/components/semantic'
+import { useComponentLocale } from '@/composables/use-locale'
+import { locales } from '../locales'
+
+const { t } = useComponentLocale(locales)
+
+const semantics = computed(() => [
+  { name: 'root', desc: t('root'), version: '1.0.0' },
+  { name: 'content', desc: t('content'), version: '1.0.0' },
+  { name: 'indicator', desc: t('indicator'), version: '1.0.3' },
+])
+</script>
+
+<template>
+  <SemanticPreview
+    component-name="Switch"
+    :semantics="semantics"
+  >
+    <template #default="{ classes }">
+      <a-switch
+        checked-children="on"
+        un-checked-children="off"
+        default-checked
+        disabled
+        :classes="classes"
+      />
+    </template>
+  </SemanticPreview>
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/switch/demo/basic.md

@@ -0,0 +1,23 @@
+# Basic
+
+## Description (en-US)
+
+The most basic usage.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+const checked = shallowRef(true)
+
+function onChange(checked: boolean) {
+  console.log(`switch to ${checked}`)
+}
+</script>
+
+<template>
+  <a-switch v-model:checked="checked" @change="onChange" />
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/switch/demo/component-token.md

@@ -0,0 +1,40 @@
+# Custom component token
+
+## Description (en-US)
+
+Custom component token.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+const checked = shallowRef(true)
+const theme = {
+  components: {
+    Switch: {
+      trackHeight: 14,
+      trackMinWidth: 32,
+      // opacityLoading: 0.1,
+      colorPrimary: 'rgb(25, 118, 210, 0.5)',
+      trackPadding: -3,
+      handleSize: 20,
+      handleBg: 'rgb(25, 118, 210)',
+      handleShadow:
+        'rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px',
+      // innerMinMargin: 4,
+      // innerMaxMargin: 8,
+    },
+  },
+}
+</script>
+
+<template>
+  <a-config-provider :theme="theme">
+    <a-space>
+      <a-switch v-model:checked="checked" />
+    </a-space>
+  </a-config-provider>
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/switch/demo/disabled.md

@@ -0,0 +1,29 @@
+# Disabled
+
+## Description (en-US)
+
+Disabled state of `Switch`.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const disabled = ref(true)
+const checked = ref(true)
+
+function toggle() {
+  disabled.value = !disabled.value
+}
+</script>
+
+<template>
+  <a-space vertical>
+    <a-switch v-model:checked="checked" :disabled="disabled" />
+    <a-button type="primary" @click="toggle">
+      Toggle disabled
+    </a-button>
+  </a-space>
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/switch/demo/loading.md

@@ -0,0 +1,22 @@
+# Loading
+
+## Description (en-US)
+
+Mark a pending state of switch.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+const checked1 = shallowRef(true)
+const checked2 = shallowRef(false)
+</script>
+
+<template>
+  <a-switch v-model:checked="checked1" loading />
+  <br>
+  <a-switch v-model:checked="checked2" size="small" loading />
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/switch/demo/size.md

@@ -0,0 +1,22 @@
+# Two sizes
+
+## Description (en-US)
+
+`size="small"` represents a small sized switch.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+const checked1 = shallowRef(true)
+const checked2 = shallowRef(true)
+</script>
+
+<template>
+  <a-switch v-model:checked="checked1" />
+  <br>
+  <a-switch v-model:checked="checked2" size="small" />
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/switch/demo/style-class.md

@@ -0,0 +1,54 @@
+# Custom semantic dom styling
+
+## Description (en-US)
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { theme } from 'antdv-next'
+
+const { token } = theme.useToken()
+
+const classes = {
+  root: 'custom-switch-root',
+}
+
+const stylesObject = {
+  root: {
+    backgroundColor: '#F5D2D2',
+  },
+}
+
+function stylesFn(info: any) {
+  if (info.props.size === 'medium') {
+    return {
+      root: {
+        backgroundColor: '#BDE3C3',
+      },
+    }
+  }
+  return {}
+}
+</script>
+
+<template>
+  <a-flex vertical gap="middle">
+    <a-switch
+      size="small"
+      checked-children="on"
+      un-checked-children="off"
+      :classes="classes"
+      :styles="stylesObject"
+    />
+    <a-switch :classes="classes" size="medium" :styles="stylesFn" />
+  </a-flex>
+</template>
+
+<style scoped>
+.custom-switch-root {
+  width: 40px;
+  background-color: v-bind('token.colorPrimary');
+}
+</style>
+```

code/fms/.claude/skills/antdv-next/references/components/switch/demo/text.md

@@ -0,0 +1,33 @@
+# Text & icon
+
+## Description (en-US)
+
+With text and icon.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { CheckOutlined, CloseOutlined } from '@antdv-next/icons'
+import { shallowRef } from 'vue'
+
+const checked = shallowRef(true)
+const checked1 = shallowRef(false)
+const checked2 = shallowRef(true)
+</script>
+
+<template>
+  <a-space vertical>
+    <a-switch v-model:checked="checked" checked-children="开启" un-checked-children="关闭" />
+    <a-switch v-model:checked="checked1" checked-children="1" un-checked-children="0" />
+    <a-switch v-model:checked="checked2">
+      <template #checkedChildren>
+        <CheckOutlined />
+      </template>
+      <template #unCheckedChildren>
+        <CloseOutlined />
+      </template>
+    </a-switch>
+  </a-space>
+</template>
+```

code/fms/.claude/skills/antdv-next/references/components/switch/docs.md

@@ -0,0 +1,75 @@
+---
+title: Switch
+description: Used to toggle between two states.
+---
+
+## When To Use 
+- If you need to represent the switching between two states or on-off state.
+- The difference between `Switch` and `Checkbox` is that `Switch` will trigger a state change directly when you toggle it, while `Checkbox` is generally used for state marking, which should work in conjunction with submit operation.
+
+## Demos
+
+| Demo | Path |
+| --- | --- |
+| Basic | demo/basic.md |
+| Disabled | demo/disabled.md |
+| Text & icon | demo/text.md |
+| Two sizes | demo/size.md |
+| Loading | demo/loading.md |
+| Custom component token | demo/component-token.md |
+| Custom semantic dom styling | demo/style-class.md |
+
+## API
+
+Common props ref：[Common props](../../docs/vue/common-props.md)
+
+### Props 
+| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
+| --- | --- | --- | --- | --- | --- |
+| autoFocus | Auto focus when component mounted | boolean | false | - | × |
+| checked | Determine whether the Switch is checked, support `v-model:checked` | string \| number \| boolean \| object | false | - | × |
+| checkedChildren | The content to be shown when the state is checked | VueNode | - | - | × |
+| checkedValue | The value when checked | string \| number \| boolean \| object | true | - | × |
+| classes | Customize class for each semantic structure inside the component. Supports object or function | SwitchClassNamesType | - | - | ✓ |
+| defaultChecked | Whether to set the initial state | string \| number \| boolean \| object | false | - | × |
+| defaultValue | Alias for `defaultChecked` | string \| number \| boolean \| object | - | 5.12.0 | × |
+| disabled | Disable switch | boolean | false | - | × |
+| loading | Loading state of switch | boolean | false | - | × |
+| size | The size of the Switch, options: `default` `small` | `default` \| `small` | `default` | - | × |
+| styles | Customize inline style for each semantic structure inside the component. Supports object or function | SwitchStylesType | - | - | ✓ |
+| unCheckedChildren | The content to be shown when the state is unchecked | VueNode | - | - | × |
+| unCheckedValue | The value when unchecked | string \| number \| boolean \| object | false | - | × |
+| value | Alias for `checked`, support `v-model:value` | string \| number \| boolean \| object | - | 5.12.0 | × |
+
+### Events 
+| Event | Description | Type | Version |
+| --- | --- | --- | --- |
+| change | Trigger when the checked state is changing | (checked: boolean, event: Event) => void | - |
+| click | Trigger when clicked | (checked: boolean, event: Event) => void | - |
+
+### Slots 
+| Slot | Description | Type | Version |
+| --- | --- | --- | --- |
+| checkedChildren | The content to be shown when the state is checked | () => VueNode | - |
+| unCheckedChildren | The content to be shown when the state is unchecked | () => VueNode | - |
+
+### Methods 
+| Name | Description | Version |
+| --- | --- | --- |
+| blur() | Remove focus | - |
+| focus() | Get focus | - |
+
+## Semantic DOM
+
+| _semantic | demo/_semantic.md |
+
+## FAQ
+
+### Why not work in Form.Item? 
+Form.Item default bind value to `value` property, but Switch value property is `checked`. You can use `v-model:checked` to change bind property.
+
+```vue
+<a-form-item name="fieldA">
+  <a-switch v-model:checked="form.fieldA" />
+</a-form-item>
+```

code/fms/.claude/skills/antdv-next/references/components/switch/token.md

@@ -0,0 +1,38 @@
+# switch Token
+
+Use these variables through `theme.components.Switch`. This document lists definitions only and does not include values.
+
+```vue
+<a-config-provider
+  :theme="{
+    token: {
+      // Global token configuration
+    },
+    components: {
+      Switch: {
+        // Token name: value
+      },
+    },
+  }"
+>
+  ...
+</a-config-provider>
+```
+
+## Token List
+
+| Token | Type | Description |
+| --- | --- | --- |
+| `trackHeight` | `string \| number` | Height of Switch |
+| `trackHeightSM` | `string \| number` | Height of small Switch |
+| `trackMinWidth` | `string \| number` | Minimum width of Switch |
+| `trackMinWidthSM` | `string \| number` | Minimum width of small Switch |
+| `trackPadding` | `number` | Padding of Switch |
+| `handleBg` | `string` | Background color of Switch handle |
+| `handleShadow` | `string` | Shadow of Switch handle |
+| `handleSize` | `number` | Size of Switch handle |
+| `handleSizeSM` | `number` | Size of small Switch handle |
+| `innerMinMargin` | `number` | Minimum margin of content area |
+| `innerMaxMargin` | `number` | Maximum margin of content area |
+| `innerMinMarginSM` | `number` | Minimum margin of content area of small Switch |
+| `innerMaxMarginSM` | `number` | Maximum margin of content area of small Switch |