niuma-ui 1.0.0 → 1.0.2

package/src/__tests__/RsDialog.spec.ts

@@ -275,9 +275,14 @@ describe('RsDialog', () => {
     header.dispatchEvent(
       new PointerEvent('pointerdown', { clientX: 120, clientY: 80, bubbles: true, cancelable: true }),
     )
+    expect(document.body.style.cursor).toBe('move')
     window.dispatchEvent(
       new PointerEvent('pointermove', { clientX: 180, clientY: 120, bubbles: true, cancelable: true }),
     )
+    // 拖拽过程中应即时位移，不能等到 pointerup
+    expect(content.style.left).not.toBe(startLeft)
+    expect(content.style.top).not.toBe(startTop)
+
     window.dispatchEvent(new PointerEvent('pointerup', { bubbles: true, cancelable: true }))
     await flushPromises()
 
@@ -401,4 +406,116 @@ describe('RsDialog', () => {
     expect(wrapper.props('open')).toBe(true)
     wrapper.unmount()
   })
+
+  it('beforeClose returning false keeps dialog open', async () => {
+    const Host = defineComponent({
+      components: { RsDialog },
+      setup() {
+        const open = ref(true)
+        const beforeClose = () => false
+        return { open, beforeClose }
+      },
+      template:
+        '<RsDialog v-model:open="open" title="拦截关闭" :fullscreenable="false" :before-close="beforeClose" />',
+    })
+    const wrapper = mount(Host, { attachTo: document.body })
+    await flushPromises()
+    const closeBtn = document.body.querySelector('.rs-dialog__actions button') as HTMLElement
+    await closeBtn.click()
+    await flushPromises()
+    expect(wrapper.findComponent(RsDialog).props('open')).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('renders builtin footer when showFooter is true and no footer slot', async () => {
+    const wrapper = mount(RsDialog, {
+      props: {
+        open: true,
+        title: '内置页脚',
+        showFooter: true,
+        layout: 'confirm',
+        resizable: false,
+        fullscreenable: false,
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const footer = document.body.querySelector('.rs-dialog__footer')
+    expect(footer).not.toBeNull()
+    expect(footer?.querySelectorAll('button').length).toBe(2)
+    wrapper.unmount()
+  })
+
+  it('does not render builtin footer by default', async () => {
+    const wrapper = mount(RsDialog, {
+      props: {
+        open: true,
+        title: '无页脚',
+        layout: 'confirm',
+        resizable: false,
+        fullscreenable: false,
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelector('.rs-dialog__footer')).toBeNull()
+    wrapper.unmount()
+  })
+
+  it('applies custom numeric width on confirm layout', async () => {
+    const wrapper = mount(RsDialog, {
+      props: {
+        open: true,
+        title: '自定义宽度',
+        layout: 'confirm',
+        width: 520,
+        resizable: false,
+        fullscreenable: false,
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const content = document.body.querySelector('.rs-dialog__content') as HTMLElement
+    expect(content.classList.contains('rs-dialog__content--custom-width')).toBe(true)
+    expect(content.style.maxWidth).toBe('520px')
+    wrapper.unmount()
+  })
+
+  it('title slot overrides title prop text', async () => {
+    const wrapper = mount(RsDialog, {
+      props: { open: true, title: '属性标题', fullscreenable: false },
+      slots: { title: '<span class="slot-title">插槽标题</span>' },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelector('.slot-title')?.textContent).toBe('插槽标题')
+    wrapper.unmount()
+  })
+
+  it('emits afterClose when closed via close button', async () => {
+    const Host = defineComponent({
+      components: { RsDialog },
+      setup() {
+        const open = ref(true)
+        const reason = ref('')
+        return { open, reason }
+      },
+      template: `
+        <RsDialog
+          v-model:open="open"
+          title="关闭事件"
+          :fullscreenable="false"
+          @after-close="reason = $event"
+        />
+      `,
+    })
+    const wrapper = mount(Host, { attachTo: document.body })
+    await flushPromises()
+    const closeBtn = document.body.querySelector('.rs-dialog__actions button') as HTMLElement
+    await closeBtn.click()
+    await flushPromises()
+    expect(wrapper.vm.reason).toBe('close')
+    expect(wrapper.findComponent(RsDialog).props('open')).toBe(false)
+    wrapper.unmount()
+  })
 })

package/src/__tests__/RsDrawer.spec.ts

@@ -1,5 +1,5 @@
 import { defineComponent, h, ref } from 'vue'
-import { afterEach, describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { flushPromises, mount } from '@vue/test-utils'
 import RsConfigProvider from '../components/RsConfigProvider.vue'
 import RsDrawer from '../components/RsDrawer.vue'
@@ -51,6 +51,17 @@ describe('RsDrawer', () => {
     wrapper.unmount()
   })
 
+  it('applies custom width via CSS variable', async () => {
+    const wrapper = mount(RsDrawer, {
+      props: { open: true, title: '自定义宽', width: 420 },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const content = document.body.querySelector('.rs-drawer__content') as HTMLElement
+    expect(content.style.getPropertyValue('--rs-drawer-panel-size')).toBe('420px')
+    wrapper.unmount()
+  })
+
   it('renders footer slot', async () => {
     const wrapper = mount(RsDrawer, {
       props: { open: true, title: '保存' },
@@ -62,7 +73,7 @@ describe('RsDrawer', () => {
     wrapper.unmount()
   })
 
-  it('renders custom header slot', async () => {
+  it('provides visually hidden DialogTitle when using header slot', async () => {
     const wrapper = mount(RsDrawer, {
       props: { open: true },
       slots: {
@@ -72,8 +83,9 @@ describe('RsDrawer', () => {
       attachTo: document.body,
     })
     await flushPromises()
+    const hiddenTitle = document.body.querySelector('.rs-drawer__title--sr-only')
+    expect(hiddenTitle).not.toBeNull()
     expect(document.body.querySelector('.custom-header')?.textContent).toBe('自定义标题')
-    expect(document.body.querySelector('.rs-drawer__title')).toBeNull()
     wrapper.unmount()
   })
 
@@ -95,6 +107,44 @@ describe('RsDrawer', () => {
     wrapper.unmount()
   })
 
+  it('beforeClose returning false keeps drawer open', async () => {
+    const Host = defineComponent({
+      components: { RsDrawer },
+      setup() {
+        const open = ref(true)
+        const beforeClose = () => false
+        return { open, beforeClose }
+      },
+      template: '<RsDrawer v-model:open="open" title="拦截" :before-close="beforeClose" />',
+    })
+    const wrapper = mount(Host, { attachTo: document.body })
+    await flushPromises()
+    const closeBtn = document.body.querySelector('.rs-drawer__header button') as HTMLElement
+    await closeBtn.click()
+    await flushPromises()
+    expect(wrapper.findComponent(RsDrawer).props('open')).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('emits afterClose when closed via close button', async () => {
+    const onAfterClose = vi.fn()
+    const Host = defineComponent({
+      components: { RsDrawer },
+      setup() {
+        const open = ref(true)
+        return { open, onAfterClose }
+      },
+      template: '<RsDrawer v-model:open="open" title="关闭" @after-close="onAfterClose" />',
+    })
+    const wrapper = mount(Host, { attachTo: document.body })
+    await flushPromises()
+    const closeBtn = document.body.querySelector('.rs-drawer__header button') as HTMLElement
+    await closeBtn.click()
+    await flushPromises()
+    expect(onAfterClose).toHaveBeenCalledWith('close')
+    wrapper.unmount()
+  })
+
   it('hides overlay when showOverlay is false', async () => {
     const wrapper = mount(RsDrawer, {
       props: { open: true, title: '无遮罩', showOverlay: false },
@@ -105,6 +155,49 @@ describe('RsDrawer', () => {
     wrapper.unmount()
   })
 
+  it('does not close on outside when closeOnOverlayClick is false', async () => {
+    const Host = defineComponent({
+      components: { RsDrawer },
+      setup() {
+        const open = ref(true)
+        return { open }
+      },
+      template:
+        '<RsDrawer v-model:open="open" title="非点外关" :show-overlay="false" :close-on-overlay-click="false" />',
+    })
+    const wrapper = mount(Host, { attachTo: document.body })
+    await flushPromises()
+    document.body.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
+    await flushPromises()
+    expect(wrapper.findComponent(RsDrawer).props('open')).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('teleports into a container and uses contained positioning', async () => {
+    const host = document.createElement('div')
+    host.id = 'drawer-host'
+    host.style.position = 'relative'
+    document.body.appendChild(host)
+
+    const wrapper = mount(RsDrawer, {
+      props: {
+        open: true,
+        title: '容器内抽屉',
+        teleportTo: '#drawer-host',
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+
+    const content = host.querySelector('.rs-drawer__content') as HTMLElement | null
+    expect(content).not.toBeNull()
+    expect(content?.classList.contains('rs-drawer__content--contained')).toBe(true)
+    expect(document.body.querySelector(':scope > .rs-drawer__content')).toBeNull()
+
+    wrapper.unmount()
+    host.remove()
+  })
+
   it('hides close button when showClose is false', async () => {
     const wrapper = mount(RsDrawer, {
       props: { open: true, title: '无关闭', showClose: false },

package/src/__tests__/RsDynamicTags.spec.ts

@@ -0,0 +1,52 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { defineComponent, nextTick } from 'vue'
+import RsDynamicTags from '../components/RsDynamicTags.vue'
+
+describe('RsDynamicTags', () => {
+  it('opens input from trigger and creates tag on Enter', async () => {
+    const Host = defineComponent({
+      components: { RsDynamicTags },
+      data: () => ({ tags: [] as string[] }),
+      template: '<RsDynamicTags v-model="tags" />',
+    })
+    const wrapper = mount(Host)
+
+    await wrapper.find('.rs-dynamic-tags__trigger').trigger('click')
+    await nextTick()
+    const input = wrapper.find('.rs-dynamic-tags__input')
+    expect(input.exists()).toBe(true)
+
+    await input.setValue('alpha')
+    await input.trigger('keydown', { key: 'Enter' })
+    await nextTick()
+    expect((wrapper.vm as { tags: string[] }).tags).toEqual(['alpha'])
+  })
+
+  it('rejects duplicate tags', async () => {
+    const wrapper = mount(RsDynamicTags, {
+      props: {
+        modelValue: ['a'],
+        inputMode: 'always',
+      },
+    })
+
+    const input = wrapper.find('.rs-dynamic-tags__input')
+    await input.setValue('a')
+    await input.trigger('keydown', { key: 'Enter' })
+    await nextTick()
+    expect(wrapper.emitted('reject')?.[0]).toEqual(['duplicate', 'a'])
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('hides trigger when max reached', async () => {
+    const wrapper = mount(RsDynamicTags, {
+      props: {
+        modelValue: ['a', 'b'],
+        max: 2,
+      },
+    })
+    expect(wrapper.find('.rs-dynamic-tags__trigger').exists()).toBe(false)
+    expect(wrapper.find('.rs-dynamic-tags__input').exists()).toBe(false)
+  })
+})

package/src/__tests__/RsForm.spec.ts

@@ -1,4 +1,4 @@
-import { defineComponent, ref } from 'vue'
+import { defineComponent, h, ref } from 'vue'
 import { afterEach, describe, expect, it } from 'vitest'
 import { flushPromises, mount } from '@vue/test-utils'
 import RsForm from '../components/RsForm.vue'
@@ -33,6 +33,88 @@ describe('RsForm', () => {
     expect(wrapper.classes()).toContain('rs-form--label-left')
   })
 
+  it('defaults labelPosition class to top', () => {
+    const wrapper = mount(RsForm)
+    expect(wrapper.classes()).toContain('rs-form--label-top')
+  })
+
+  it('propagates labelPosition left to child inputs', async () => {
+    const wrapper = mount(RsForm, {
+      props: { labelPosition: 'left', labelWidth: '5rem' },
+      slots: { default: '<RsInput model-value="" label="名称" />' },
+      global: { components: { RsInput } },
+    })
+    await flushPromises()
+    const field = wrapper.find('.rs-field')
+    expect(field.classes()).toContain('rs-field--label-left')
+    expect(field.attributes('style') ?? '').toContain('--rs-field-label-width: 5rem')
+    wrapper.unmount()
+  })
+
+  it('propagates labelAlign end only when labelPosition is left', async () => {
+    const leftAlign = mount(RsForm, {
+      props: { labelPosition: 'left', labelAlign: 'end', labelWidth: '6rem' },
+      slots: { default: '<RsInput model-value="" label="邮箱" />' },
+      global: { components: { RsInput } },
+    })
+    await flushPromises()
+    expect(leftAlign.find('.rs-field').classes()).toContain('rs-field--label-align-end')
+    leftAlign.unmount()
+
+    const topAlign = mount(RsForm, {
+      props: { labelPosition: 'top', labelAlign: 'end' },
+      slots: { default: '<RsInput model-value="" label="邮箱" />' },
+      global: { components: { RsInput } },
+    })
+    await flushPromises()
+    expect(topAlign.find('.rs-field').classes()).toContain('rs-field--label-top')
+    expect(topAlign.find('.rs-field').classes()).not.toContain('rs-field--label-align-end')
+    topAlign.unmount()
+  })
+
+  it('allows field labelPosition to override Form', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsInput },
+      template: `
+        <RsForm label-position="left" label-width="5rem">
+          <RsInput model-value="" label="继承" />
+          <RsInput model-value="" label="覆盖" label-position="top" />
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    const fields = wrapper.findAll('.rs-field')
+    expect(fields[0]!.classes()).toContain('rs-field--label-left')
+    expect(fields[1]!.classes()).toContain('rs-field--label-top')
+    wrapper.unmount()
+  })
+
+  it('updates child label layout when Form labelPosition changes', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsInput },
+      setup() {
+        const labelPosition = ref<'top' | 'left'>('top')
+        return { labelPosition }
+      },
+      template: `
+        <RsForm :label-position="labelPosition" label-width="5rem">
+          <RsInput model-value="" label="名称" />
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    expect(wrapper.find('.rs-form').classes()).toContain('rs-form--label-top')
+    expect(wrapper.find('.rs-field').classes()).toContain('rs-field--label-top')
+
+    wrapper.vm.labelPosition = 'left'
+    await flushPromises()
+    expect(wrapper.find('.rs-form').classes()).toContain('rs-form--label-left')
+    expect(wrapper.find('.rs-field').classes()).toContain('rs-field--label-left')
+    wrapper.unmount()
+  })
+
   it('validate returns valid when all fields pass', async () => {
     const Host = defineComponent({
       components: { RsForm, RsInput },
@@ -170,4 +252,166 @@ describe('RsForm', () => {
     expect(valid.valid).toBe(true)
     wrapper.unmount()
   })
+
+  it('supports centralized rules by field name', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsInput },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const userId = ref('')
+        const rules = {
+          userId: [
+            { required: true, message: '必填' },
+            { min: 3, message: '至少 3 位' },
+          ],
+        }
+        return { formRef, userId, rules }
+      },
+      template: `
+        <RsForm ref="formRef" :rules="rules">
+          <RsInput v-model="userId" name="userId" />
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+
+    const empty = await wrapper.vm.formRef!.validate()
+    expect(empty.valid).toBe(false)
+    expect(empty.errors.userId).toBe('必填')
+
+    wrapper.vm.userId = 'ab'
+    await flushPromises()
+    const short = await wrapper.vm.formRef!.validate()
+    expect(short.valid).toBe(false)
+    expect(short.errors.userId).toBe('至少 3 位')
+
+    wrapper.vm.userId = 'abc'
+    await flushPromises()
+    const ok = await wrapper.vm.formRef!.validate()
+    expect(ok.valid).toBe(true)
+    expect(ok.errors).toEqual({})
+    wrapper.unmount()
+  })
+
+  it('validateField only checks one named field', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsInput },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const userId = ref('')
+        const email = ref('bad')
+        const rules = {
+          userId: [{ required: true, message: 'user required' }],
+          email: [{ type: 'email' as const, message: 'bad email' }],
+        }
+        return { formRef, userId, email, rules }
+      },
+      template: `
+        <RsForm ref="formRef" :rules="rules">
+          <RsInput v-model="userId" name="userId" />
+          <RsInput v-model="email" name="email" />
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    const result = await wrapper.vm.formRef!.validateField('userId')
+    expect(result.valid).toBe(false)
+    expect(result.message).toBe('user required')
+    expect(result.name).toBe('userId')
+    wrapper.unmount()
+  })
+
+  it('supports async validator in rules', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsInput },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const username = ref('admin')
+        const rules = {
+          username: [
+            {
+              async validator(value: unknown) {
+                await Promise.resolve()
+                if (String(value) === 'admin') return '占用'
+                return true
+              },
+            },
+          ],
+        }
+        return { formRef, username, rules }
+      },
+      template: `
+        <RsForm ref="formRef" :rules="rules">
+          <RsInput v-model="username" name="username" />
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    const result = await wrapper.vm.formRef!.validate()
+    expect(result.valid).toBe(false)
+    expect(result.errors.username).toBe('占用')
+    wrapper.unmount()
+  })
+
+  it('renders custom Form #error slot content', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsInput },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const name = ref('')
+        const rules = {
+          name: [{ required: true, message: '必填昵称' }],
+        }
+        return { formRef, name, rules }
+      },
+      template: `
+        <RsForm ref="formRef" :rules="rules">
+          <template #error="{ message }">
+            <span class="custom-form-error">CUSTOM:{{ message }}</span>
+          </template>
+          <RsInput v-model="name" name="name" />
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    await wrapper.vm.formRef!.validate()
+    await flushPromises()
+    expect(wrapper.find('.custom-form-error').text()).toBe('CUSTOM:必填昵称')
+    wrapper.unmount()
+  })
+
+  it('field #error slot overrides Form errorRender', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsInput },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const name = ref('')
+        const rules = {
+          name: [{ required: true, message: '必填' }],
+        }
+        const errorRender = () => h('span', { class: 'from-form' }, 'FORM')
+        return { formRef, name, rules, errorRender }
+      },
+      template: `
+        <RsForm ref="formRef" :rules="rules" :error-render="errorRender">
+          <RsInput v-model="name" name="name">
+            <template #error="{ message }">
+              <span class="from-field">FIELD:{{ message }}</span>
+            </template>
+          </RsInput>
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    await wrapper.vm.formRef!.validate()
+    await flushPromises()
+    expect(wrapper.find('.from-field').text()).toBe('FIELD:必填')
+    expect(wrapper.find('.from-form').exists()).toBe(false)
+    wrapper.unmount()
+  })
 })

package/src/__tests__/RsInput.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { flushPromises, mount } from '@vue/test-utils'
 import { h } from 'vue'
 import RsConfigProvider from '../components/RsConfigProvider.vue'
 import RsInput from '../components/RsInput.vue'
@@ -35,6 +35,16 @@ describe('RsInput', () => {
     expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['world'])
   })
 
+  it('defaults autocomplete to off (new-password for password)', () => {
+    const text = mount(RsInput, { props: { modelValue: '' } })
+    expect(text.find('input').attributes('autocomplete')).toBe('off')
+    text.unmount()
+
+    const password = mount(RsInput, { props: { modelValue: '', type: 'password' } })
+    expect(password.find('input').attributes('autocomplete')).toBe('new-password')
+    password.unmount()
+  })
+
   it('marks invalid state on group', () => {
     const wrapper = mount(RsInput, { props: { invalid: true } })
     expect(wrapper.find('.rs-input-group').classes()).toContain('rs-input-group--invalid')
@@ -154,6 +164,7 @@ describe('RsInput', () => {
       props: { modelValue: 'bad-email', rule: 'email', id: 'e1' },
     })
     await wrapper.find('input').trigger('blur')
+    await flushPromises()
     expect(wrapper.find('.rs-input-group').classes()).toContain('rs-input-group--invalid')
     expect(wrapper.find('.rs-input-field__error').text()).toContain('邮箱')
     expect(wrapper.emitted('validate')?.[0]?.[0]).toEqual({
@@ -167,6 +178,7 @@ describe('RsInput', () => {
       props: { modelValue: 'user@example.com', rule: 'email' },
     })
     await wrapper.find('input').trigger('blur')
+    await flushPromises()
     expect(wrapper.find('.rs-input-group').classes()).not.toContain('rs-input-group--invalid')
     expect(wrapper.emitted('validate')?.[0]?.[0]).toEqual({ valid: true })
   })
@@ -179,6 +191,7 @@ describe('RsInput', () => {
       },
     })
     await wrapper.find('input').trigger('blur')
+    await flushPromises()
     expect(wrapper.find('.rs-input-field__error').text()).toBe('至少 3 个字符')
   })
 
@@ -196,6 +209,7 @@ describe('RsInput', () => {
       },
     })
     await wrapper.find('input').trigger('blur')
+    await flushPromises()
     expect(wrapper.find('.rs-input-field__error').text()).toContain('email')
   })