niuma-ui 1.0.2 → 1.1.0

package/CHANGELOG.md

@@ -6,6 +6,32 @@
 
 ## [Unreleased]
 
+## [1.1.0] - 2026-08-14
+
+### 新增
+
+- `RsFormItem`：对标 Ant Design Form.Item / Element `ElFormItem`。声明 `name` 后成为字段唯一注册点；内置 `RsInput` 等在 Item 内不再重复注册。支持 `help` / `extra` / `validateStatus` / `#label` / `noStyle`。
+- `RsForm.model`、NamePath（`user.email`）、`getFieldsValue` / `setFieldsValue` / `scrollToField`、`validateMessages`。
+- `RsFormList`：动态数组字段（`add` / `remove` / `move`），子 Item 相对 name 自动拼前缀。
+- `RsFormItem.dependencies`：依赖字段变化时重校验；`validator(value, { getFieldValue, getFieldsValue })` 可读整表。
+- `RsSwitch.checkedValue` / `uncheckedValue`：自定义打开/关闭写入 v-model 的值（默认 `true` / `false`，既有 boolean 用法不变）。
+- `RsDatePicker` / `RsDateTimePicker`：`valueFormat` 对齐 Element Plus / Ant Design Vue——展示仍为墙钟，绑定可选用 `string`（默认）、`timestamp`、`iso`（本地偏移 RFC3339），或任意 dayjs 模板。`iso` 空值为 `null`。
+- `RsSelect`：`option.value` / `v-model` 支持 `string | number`（数字 `0` 可回显）；`filterOption` / `optionFilterProp` / `filterSort`；多选 `maxTagCount` / `maxTagTextLength` / `multipleLimit` / `tokenSeparators`；`labelInValue`；`fieldNames` / `optionLabelProp`；`v-model:searchValue`；`listHeight` / `placement` / `popupClassName` / `status` / `showArrow` / `getPopupContainer`；事件 `select` / `deselect` / `clear`；插槽 `#prefix` `#option` `#tag` `#header` `#footer` `#dropdownRender` `#suffixIcon` `#clearIcon` `#empty` `#loading`。选择逻辑抽到 `use-rs-select.ts`。
+- `RsInput`：框内 affix 顺序固定为字数 / 清除 / 密码显隐 / 自定义 `suffix`；新增框外连体 `addonBefore` / `addonAfter`（及同名插槽）；IME `compositionstart/end` 期间不触发校验与 `pressEnter`。
+- `RsInput.addonAfterIcon` / `addonAfterIconLabel` / `addonAfterClick`：选择器等后置图标按钮走连体 `addonAfter`，由组件自绘；连体外壳统一外边框，避免 input/addon 拼缝。
+- `hasByNamePath`：判断 NamePath 是否已存在于对象树（含叶子为 null / undefined）。
+- 排版子系统 token：`--rs-font-serif`、`--rs-code-font-*`、`--rs-prose-font-*`、`--rs-terminal-font-*`。JS 导出 `readCssVar` / `readCssLengthPx` / `readCodeFontFamily` / `readTerminalFontFamily` 等，供 Monaco / xterm 读取。
+
+### 变更
+
+- Form 校验 / `resetFields` 只收集带 `name` 的字段（无 name 不进字段表，避免弹层搜索框误校验）。请给控件加 `name` 或包 `RsFormItem`。
+- 封装开源组件排版对齐 token：CodeMirror / Monaco / xterm / marked / vue-sonner 不再硬编码字体栈或 px。`RsTerminal` 未传 `fontFamily` / `fontSize` / `fontWeight` 时改为读 CSS token（默认 `--rs-font-size-sm` / regular，不再写死 13px / 300）。组件字重改为 `--rs-font-weight-*`。
+- `.rs-field--label-left`：有 `--rs-field-label-width` 时固定标签列宽（不再 `max-content` 撑开），栅格内控件起点对齐；过长标签省略。
+- `RsFormItem`：子控件已绑定 v-model 时不再覆盖（避免 switch 的 Y/N 被注入成非 boolean）。
+- `RsDatePicker` / `RsTimePicker` / `RsSelect`：校验失败时红框画在 trigger 上（与 `RsInput` 一致）。未声明的 attrs（`class` / `style` / `aria-*`）同样落到 trigger；`v-model` 与事件签名不变。
+- `RsTooltip` / `RsTooltipProvider`：默认开启 `ignoreNonKeyboardFocus`（仅 `:focus-visible` 因焦点打开 tip），避免 Dialog/Popover 关闭回焦后误开提示；悬停与键盘聚焦行为不变。
+- `RsInputNumber` / `RsTabs`：用 `v-on` 条件对象绑定 `wheel`（避免 `@wheel="cond ? fn : undefined"` 被编译成常驻包装函数仍挂非 passive 监听）；Tabs 导航 `@scroll` 改为 passive。
+
 ## [1.0.2] - 2026-08-13
 
 ### 新增
@@ -72,7 +98,8 @@
 
 - 1.0 之前的私有 tag（如 `v0.1.0`）仅作历史记录；新接入请依赖 `v1.0.0` 及之后版本。
 
-[Unreleased]: https://github.com/Blair-Shang/niuma-ui/compare/v1.0.2...HEAD
+[Unreleased]: https://github.com/Blair-Shang/niuma-ui/compare/v1.1.0...HEAD
+[1.1.0]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.1.0
 [1.0.2]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.0.2
 [1.0.1]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.0.1
 [1.0.0]: https://github.com/Blair-Shang/niuma-ui/releases/tag/v1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "niuma-ui",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "license": "Apache-2.0",
   "type": "module",
   "description": "Vue 3 设计系统与 Rs* 组件库（--rs-* token）",

package/src/__tests__/RsDatePicker.spec.ts

@@ -10,6 +10,18 @@ describe('RsDatePicker', () => {
     expect(wrapper.classes()).toContain('rs-field')
   })
 
+  it('displays iso v-model as wall-clock text', () => {
+    const wrapper = mount(RsDatePicker, {
+      props: {
+        modelValue: '2025-06-16T14:30:00+08:00',
+        withTime: true,
+        valueFormat: 'iso',
+      },
+    })
+    expect(wrapper.find('.rs-date-picker__trigger--placeholder').exists()).toBe(false)
+    expect(wrapper.find('.rs-date-picker__value').text()).toBe('2025-06-16 14:30:00')
+  })
+
   it('shows formatted value on trigger when model is set', () => {
     const wrapper = mount(RsDatePicker, {
       props: { modelValue: '2025-06-16' },
@@ -85,4 +97,13 @@ describe('RsDatePicker', () => {
     })
     expect(wrapper.find('.rs-date-picker__trigger').attributes('disabled')).toBeDefined()
   })
+
+  it('marks invalid on the trigger instead of the field wrapper', () => {
+    const wrapper = mount(RsDatePicker, { props: { modelValue: '', invalid: true } })
+    expect(wrapper.find('.rs-date-picker__trigger').classes()).toContain(
+      'rs-date-picker__trigger--invalid',
+    )
+    expect(wrapper.find('.rs-date-picker__trigger').attributes('aria-invalid')).toBe('true')
+    expect(wrapper.attributes('aria-invalid')).toBeUndefined()
+  })
 })

package/src/__tests__/RsDialog.spec.ts

@@ -69,6 +69,23 @@ describe('RsDialog', () => {
     wrapper.unmount()
   })
 
+  it('centers window layout when width is a viewport percentage', async () => {
+    const wrapper = mount(RsDialog, {
+      props: { open: true, title: '百分比宽度', width: '90%' },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const content = document.body.querySelector('.rs-dialog__content') as HTMLElement
+    const width = Number.parseFloat(content.style.width)
+    const left = Number.parseFloat(content.style.left)
+    const available = window.innerWidth - 32
+    const expectedWidth = Math.min(available, Math.max(320, Math.round(available * 0.9)))
+    expect(width).toBe(expectedWidth)
+    expect(left).toBeCloseTo(16 + (available - expectedWidth) / 2, 1)
+    expect(content.style.maxWidth).toBe('')
+    wrapper.unmount()
+  })
+
   it('applies window layout with resize handles by default', async () => {
     const wrapper = mount(RsDialog, {
       props: { open: true, title: '测试', width: 'sm' },
@@ -366,6 +383,50 @@ describe('RsDialog', () => {
     await flushPromises()
     expect(target.querySelector('.rs-dialog__content')).not.toBeNull()
     wrapper.unmount()
+    target.remove()
+  })
+
+  it('re-teleports to body while fullscreen, then restores custom target', async () => {
+    const target = document.createElement('div')
+    target.id = 'rs-dialog-fullscreen-target'
+    document.body.appendChild(target)
+
+    const wrapper = mount(RsDialog, {
+      props: {
+        open: true,
+        title: '全屏挂载',
+        layout: 'window',
+        fullscreenable: true,
+        teleportTo: '#rs-dialog-fullscreen-target',
+      },
+      attachTo: document.body,
+    })
+
+    await flushPromises()
+    expect(target.querySelector('.rs-dialog__content')).not.toBeNull()
+
+    const enterFullscreenBtn = target.querySelectorAll('.rs-dialog__actions button')[0] as HTMLElement
+    await enterFullscreenBtn.click()
+    await flushPromises()
+
+    expect(target.querySelector('.rs-dialog__content')).toBeNull()
+    const bodyContent = document.body.querySelector('.rs-dialog__content') as HTMLElement
+    expect(bodyContent).not.toBeNull()
+    expect(bodyContent.classList.contains('rs-dialog__content--fullscreen')).toBe(true)
+    expect(target.contains(bodyContent)).toBe(false)
+
+    const exitFullscreenBtn = document.body.querySelectorAll(
+      '.rs-dialog__actions button',
+    )[0] as HTMLElement
+    await exitFullscreenBtn.click()
+    await flushPromises()
+    expect(target.querySelector('.rs-dialog__content')).not.toBeNull()
+    expect(
+      target.querySelector('.rs-dialog__content')?.classList.contains('rs-dialog__content--fullscreen'),
+    ).toBe(false)
+
+    wrapper.unmount()
+    target.remove()
   })
 
   it('passes modal=false to DialogRoot for non-modal usage', async () => {

package/src/__tests__/RsForm.spec.ts

@@ -125,7 +125,7 @@ describe('RsForm', () => {
       },
       template: `
         <RsForm ref="formRef">
-          <RsInput v-model="email" rule="email" required />
+          <RsInput v-model="email" name="email" rule="email" required />
         </RsForm>
       `,
     })
@@ -146,7 +146,7 @@ describe('RsForm', () => {
       },
       template: `
         <RsForm ref="formRef">
-          <RsInput v-model="email" rule="email" required />
+          <RsInput v-model="email" name="email" rule="email" required />
         </RsForm>
       `,
     })
@@ -167,7 +167,7 @@ describe('RsForm', () => {
       },
       template: `
         <RsForm ref="formRef">
-          <RsInput v-model="name" />
+          <RsInput v-model="name" name="name" />
         </RsForm>
       `,
     })
@@ -191,7 +191,7 @@ describe('RsForm', () => {
       },
       template: `
         <RsForm ref="formRef">
-          <RsInput v-model="email" rule="email" required />
+          <RsInput v-model="email" name="email" rule="email" required />
         </RsForm>
       `,
     })
@@ -238,7 +238,7 @@ describe('RsForm', () => {
       },
       template: `
         <RsForm ref="formRef">
-          <RsSelect v-model="role" :options="roleOptions" required />
+          <RsSelect v-model="role" name="role" :options="roleOptions" required />
         </RsForm>
       `,
     })

package/src/__tests__/RsFormItem.spec.ts

@@ -0,0 +1,478 @@
+import { defineComponent, ref } from 'vue'
+import { afterEach, describe, expect, it } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import RsConfigProvider from '../components/RsConfigProvider.vue'
+import RsForm from '../components/RsForm.vue'
+import RsFormItem from '../components/RsFormItem.vue'
+import RsDatePicker from '../components/RsDatePicker.vue'
+import RsInput from '../components/RsInput.vue'
+import RsSelect from '../components/RsSelect.vue'
+import RsSwitch from '../components/RsSwitch.vue'
+import RsTimePicker from '../components/RsTimePicker.vue'
+
+describe('RsFormItem', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('validates custom slot content without rendering an input', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsFormItem },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const service = ref('')
+        return { formRef, service }
+      },
+      template: `
+        <RsForm ref="formRef">
+          <RsFormItem v-model="service" name="service" required>
+            <button type="button" class="picker">pick</button>
+          </RsFormItem>
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+
+    const result = await wrapper.vm.formRef!.validate()
+    expect(result.valid).toBe(false)
+    expect(result.errors.service).toBe('此项为必填')
+    expect(wrapper.find('input').exists()).toBe(false)
+    expect(wrapper.find('.rs-form-item__error').text()).toBe('此项为必填')
+    expect(wrapper.find('.picker').exists()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('uses en-US required copy inside RsConfigProvider', async () => {
+    const Host = defineComponent({
+      components: { RsConfigProvider, RsForm, RsFormItem },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const service = ref('')
+        return { formRef, service }
+      },
+      template: `
+        <RsConfigProvider locale="en-US">
+          <RsForm ref="formRef">
+            <RsFormItem v-model="service" name="service" required>
+              <button type="button">pick</button>
+            </RsFormItem>
+          </RsForm>
+        </RsConfigProvider>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    const result = await wrapper.vm.formRef!.validate()
+    expect(result.valid).toBe(false)
+    expect(result.errors.service).toBe('This field is required')
+    wrapper.unmount()
+  })
+
+  it('clears error when custom value changes after submit', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsFormItem },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const service = ref('')
+        return { formRef, service }
+      },
+      template: `
+        <RsForm ref="formRef">
+          <RsFormItem v-model="service" name="service" required>
+            <button type="button" class="picker">pick</button>
+          </RsFormItem>
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    await wrapper.vm.formRef!.validate()
+    await flushPromises()
+    expect(wrapper.find('.rs-form-item__error').exists()).toBe(true)
+
+    wrapper.vm.service = 'svc-1'
+    await flushPromises()
+    expect(wrapper.find('.rs-form-item__error').exists()).toBe(false)
+
+    wrapper.vm.service = ''
+    await flushPromises()
+    expect(wrapper.find('.rs-form-item__error').text()).toBe('此项为必填')
+    wrapper.unmount()
+  })
+
+  it('resetFields restores the item model', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsFormItem },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const service = ref('initial')
+        return { formRef, service }
+      },
+      template: `
+        <RsForm ref="formRef">
+          <RsFormItem v-model="service" name="service">
+            <span class="value">{{ service }}</span>
+          </RsFormItem>
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    wrapper.vm.service = 'changed'
+    await flushPromises()
+    wrapper.vm.formRef!.resetFields()
+    await flushPromises()
+    expect(wrapper.vm.service).toBe('initial')
+    wrapper.unmount()
+  })
+
+  it('exposes invalid via default slot props', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsFormItem },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const service = ref('')
+        return { formRef, service }
+      },
+      template: `
+        <RsForm ref="formRef">
+          <RsFormItem v-model="service" name="service" required>
+            <template #default="{ invalid }">
+              <button type="button" class="picker" :data-invalid="invalid">pick</button>
+            </template>
+          </RsFormItem>
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    expect(wrapper.find('.picker').attributes('data-invalid')).toBe('false')
+    await wrapper.vm.formRef!.validate()
+    await flushPromises()
+    expect(wrapper.find('.picker').attributes('data-invalid')).toBe('true')
+    wrapper.unmount()
+  })
+
+  it('renders Form #error slot for item messages', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsFormItem },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const service = ref('')
+        const rules = {
+          service: [{ required: true, message: 'pick a service' }],
+        }
+        return { formRef, service, rules }
+      },
+      template: `
+        <RsForm ref="formRef" :rules="rules">
+          <template #error="{ message }">
+            <span class="custom-form-error">CUSTOM:{{ message }}</span>
+          </template>
+          <RsFormItem v-model="service" name="service">
+            <button type="button">pick</button>
+          </RsFormItem>
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    await wrapper.vm.formRef!.validate()
+    await flushPromises()
+    expect(wrapper.find('.custom-form-error').text()).toBe('CUSTOM:pick a service')
+    wrapper.unmount()
+  })
+
+  it('does not register when name is omitted', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsFormItem },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        return { formRef }
+      },
+      template: `
+        <RsForm ref="formRef">
+          <RsFormItem required>
+            <button type="button">layout only</button>
+          </RsFormItem>
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    const result = await wrapper.vm.formRef!.validate()
+    expect(result.valid).toBe(true)
+    expect(result.errors).toEqual({})
+    wrapper.unmount()
+  })
+
+  it('interpolates required message with label', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsFormItem },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const service = ref('')
+        return { formRef, service }
+      },
+      template: `
+        <RsForm ref="formRef">
+          <RsFormItem v-model="service" name="service" label="关联服务" required>
+            <button type="button">pick</button>
+          </RsFormItem>
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    const result = await wrapper.vm.formRef!.validate()
+    expect(result.errors.service).toBe('请填写关联服务')
+    wrapper.unmount()
+  })
+
+  it('lets Form.Item own the field so nested RsInput does not show a second error', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsFormItem, RsInput },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const email = ref('')
+        return { formRef, email }
+      },
+      template: `
+        <RsForm ref="formRef">
+          <RsFormItem v-model="email" name="email" required>
+            <RsInput />
+          </RsFormItem>
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    await wrapper.vm.formRef!.validate()
+    await flushPromises()
+    expect(wrapper.findAll('.rs-form-item__error')).toHaveLength(1)
+    expect(wrapper.find('.rs-input-field__error').exists()).toBe(false)
+    expect(wrapper.find('.rs-input-group--invalid').exists()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('binds Form.model into nested input without child v-model', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsFormItem, RsInput },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const model = ref({ email: '' })
+        return { formRef, model }
+      },
+      template: `
+        <RsForm ref="formRef" :model="model">
+          <RsFormItem name="email" required>
+            <RsInput />
+          </RsFormItem>
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    wrapper.find('input').setValue('a@b.com')
+    await flushPromises()
+    expect(wrapper.vm.model.email).toBe('a@b.com')
+    wrapper.vm.formRef!.setFieldsValue({ email: 'c@d.com' })
+    await flushPromises()
+    expect(wrapper.vm.model.email).toBe('c@d.com')
+    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('c@d.com')
+    wrapper.unmount()
+  })
+
+  it('renders help and extra', () => {
+    const wrapper = mount(RsFormItem, {
+      props: { help: '辅助说明', extra: '额外提示' },
+      slots: { default: '<span class="ctrl">x</span>' },
+    })
+    expect(wrapper.find('.rs-form-item__help').text()).toBe('辅助说明')
+    expect(wrapper.find('.rs-form-item__extra').text()).toBe('额外提示')
+    wrapper.unmount()
+  })
+
+  it('revalidates when a dependency field changes', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsFormItem, RsInput },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const model = ref({ password: 'aa', confirm: 'bb' })
+        return { formRef, model }
+      },
+      template: `
+        <RsForm ref="formRef" :model="model">
+          <RsFormItem name="password" label="密码" required>
+            <RsInput />
+          </RsFormItem>
+          <RsFormItem
+            name="confirm"
+            label="确认密码"
+            :dependencies="['password']"
+            :rules="[{
+              validator(value, ctx) {
+                if (String(value) !== String(ctx.getFieldValue('password'))) return '两次密码不一致'
+                return true
+              }
+            }]"
+          >
+            <RsInput />
+          </RsFormItem>
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    const result = await wrapper.vm.formRef!.validate()
+    expect(result.valid).toBe(false)
+    expect(result.errors.confirm).toBe('两次密码不一致')
+
+    wrapper.vm.model.password = 'bb'
+    await flushPromises()
+    expect(wrapper.findAll('.rs-form-item__error').length).toBe(0)
+    wrapper.unmount()
+  })
+
+  it('does not overwrite a child that already binds v-model', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsFormItem, RsSwitch },
+      setup() {
+        const model = ref({ deptAdminFlag: 'N' })
+        const toBool = (v: string) => v === 'Y'
+        const fromBool = (v: boolean) => (v ? 'Y' : 'N')
+        return { model, toBool, fromBool }
+      },
+      template: `
+        <RsForm :model="model">
+          <RsFormItem name="deptAdminFlag">
+            <RsSwitch
+              :model-value="toBool(model.deptAdminFlag)"
+              @update:model-value="(v) => (model.deptAdminFlag = fromBool(v))"
+            />
+          </RsFormItem>
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    expect(wrapper.find('.rs-switch--checked').exists()).toBe(false)
+    await wrapper.find('.rs-switch__root').trigger('click')
+    await flushPromises()
+    expect(wrapper.vm.model.deptAdminFlag).toBe('Y')
+    expect(wrapper.find('.rs-switch--checked').exists()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('lets Form.Item inject Y/N into Switch via checkedValue', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsFormItem, RsSwitch },
+      setup() {
+        const model = ref({ deptAdminFlag: 'N' })
+        return { model }
+      },
+      template: `
+        <RsForm :model="model">
+          <RsFormItem name="deptAdminFlag">
+            <RsSwitch checked-value="Y" unchecked-value="N" />
+          </RsFormItem>
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    expect(wrapper.find('.rs-switch--checked').exists()).toBe(false)
+    await wrapper.find('.rs-switch__root').trigger('click')
+    await flushPromises()
+    expect(wrapper.vm.model.deptAdminFlag).toBe('Y')
+    expect(wrapper.find('.rs-switch--checked').exists()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('paints DatePicker invalid on the trigger, not the field wrapper', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsFormItem, RsDatePicker },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const expire = ref('')
+        return { formRef, expire }
+      },
+      template: `
+        <RsForm ref="formRef">
+          <RsFormItem v-model="expire" name="expire" required>
+            <RsDatePicker />
+          </RsFormItem>
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    await wrapper.vm.formRef!.validate()
+    await flushPromises()
+
+    const trigger = wrapper.find('.rs-date-picker__trigger')
+    expect(trigger.classes()).toContain('rs-date-picker__trigger--invalid')
+    expect(trigger.attributes('aria-invalid')).toBe('true')
+    expect(wrapper.find('.rs-date-picker').attributes('aria-invalid')).toBeUndefined()
+    expect(wrapper.find('.rs-field').attributes('aria-invalid')).toBeUndefined()
+    wrapper.unmount()
+  })
+
+  it('paints TimePicker invalid on the trigger, not the field wrapper', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsFormItem, RsTimePicker },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const time = ref('')
+        return { formRef, time }
+      },
+      template: `
+        <RsForm ref="formRef">
+          <RsFormItem v-model="time" name="time" required>
+            <RsTimePicker />
+          </RsFormItem>
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    await wrapper.vm.formRef!.validate()
+    await flushPromises()
+
+    const trigger = wrapper.find('.rs-time-picker__trigger')
+    expect(trigger.classes()).toContain('rs-time-picker__trigger--invalid')
+    expect(trigger.attributes('aria-invalid')).toBe('true')
+    expect(wrapper.find('.rs-field').attributes('aria-invalid')).toBeUndefined()
+    wrapper.unmount()
+  })
+
+  it('paints Select invalid on the trigger, not the combobox root', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsFormItem, RsSelect },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const role = ref('')
+        const options = [{ label: '管理员', value: 'admin' }]
+        return { formRef, role, options }
+      },
+      template: `
+        <RsForm ref="formRef">
+          <RsFormItem v-model="role" name="role" required>
+            <RsSelect :options="options" />
+          </RsFormItem>
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    await wrapper.vm.formRef!.validate()
+    await flushPromises()
+
+    const trigger = wrapper.find('.rs-select__trigger')
+    expect(trigger.classes()).toContain('rs-select__trigger--invalid')
+    expect(trigger.attributes('aria-invalid')).toBe('true')
+    expect(wrapper.find('.rs-select').attributes('aria-invalid')).toBeUndefined()
+    wrapper.unmount()
+  })
+})