niuma-ui 1.0.0

package/src/__tests__/RsInput.spec.ts

@@ -0,0 +1,269 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import RsConfigProvider from '../components/RsConfigProvider.vue'
+import RsInput from '../components/RsInput.vue'
+import {
+  runInputValidation,
+  validateInputRule,
+} from '../components/input-rules'
+
+describe('input-rules', () => {
+  it('validates email rule', () => {
+    expect(validateInputRule('a@b.com', 'email')).toBe(true)
+    expect(validateInputRule('bad', 'email')).toBe(false)
+    expect(validateInputRule('', 'email')).toBe(true)
+  })
+
+  it('validates number and integer', () => {
+    expect(validateInputRule('12.5', 'number')).toBe(true)
+    expect(validateInputRule('12a', 'number')).toBe(false)
+    expect(validateInputRule('42', 'integer')).toBe(true)
+    expect(validateInputRule('3.14', 'integer')).toBe(false)
+  })
+
+  it('validates required in runInputValidation', () => {
+    expect(runInputValidation('', { required: true }).valid).toBe(false)
+    expect(runInputValidation('x', { required: true }).valid).toBe(true)
+  })
+})
+
+describe('RsInput', () => {
+  it('emits update:modelValue on input', async () => {
+    const wrapper = mount(RsInput, { props: { modelValue: '' } })
+    await wrapper.find('input').setValue('world')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['world'])
+  })
+
+  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')
+  })
+
+  it('applies size class on group', () => {
+    const wrapper = mount(RsInput, { props: { size: 'lg' } })
+    expect(wrapper.find('.rs-input-group').classes()).toContain('rs-input-group--lg')
+  })
+
+  it('defaults to md size', () => {
+    const wrapper = mount(RsInput)
+    expect(wrapper.find('.rs-input-group').classes()).toContain('rs-input-group--md')
+  })
+
+  it('binds id and type attributes', () => {
+    const wrapper = mount(RsInput, {
+      props: { id: 'email', type: 'email' },
+    })
+    const input = wrapper.find('input')
+    expect(input.attributes('id')).toBe('email')
+    expect(input.attributes('type')).toBe('email')
+  })
+
+  it('auto-generates id when not provided', () => {
+    const wrapper = mount(RsInput)
+    const input = wrapper.find('input')
+    expect(input.attributes('id')).toBeTruthy()
+  })
+
+  it('renders label, hint, and required marker', () => {
+    const wrapper = mount(RsInput, {
+      props: {
+        label: '邮箱',
+        hint: '用于登录与通知',
+        required: true,
+      },
+    })
+    expect(wrapper.classes()).toContain('rs-field')
+    expect(wrapper.find('.rs-field__label').text()).toContain('邮箱')
+    expect(wrapper.find('.rs-field__required').exists()).toBe(true)
+    expect(wrapper.find('.rs-field__hint').text()).toBe('用于登录与通知')
+  })
+
+  it('associates label with input via for/id', () => {
+    const wrapper = mount(RsInput, {
+      props: { label: '名称', id: 'name-field' },
+    })
+    expect(wrapper.find('label').attributes('for')).toBe('name-field')
+    expect(wrapper.find('input').attributes('id')).toBe('name-field')
+  })
+
+  it('associates left label with input via for/id', () => {
+    const wrapper = mount(RsInput, {
+      props: { label: '名称', labelPosition: 'left', id: 'name-field' },
+    })
+    expect(wrapper.classes()).toContain('rs-field--label-left')
+    expect(wrapper.find('label').attributes('for')).toBe('name-field')
+    expect(wrapper.find('input').attributes('id')).toBe('name-field')
+  })
+
+  it('keeps left label aligned when validation error appears', async () => {
+    const wrapper = mount(RsInput, {
+      props: {
+        label: '邮箱',
+        labelPosition: 'left',
+        modelValue: '',
+        required: true,
+      },
+    })
+    await wrapper.find('input').trigger('blur')
+    const error = wrapper.find('.rs-input-field__error')
+    expect(error.exists()).toBe(true)
+    expect(error.element.parentElement?.classList.contains('rs-input-field')).toBe(false)
+  })
+
+  it('sets placeholder', () => {
+    const wrapper = mount(RsInput, {
+      props: { placeholder: '请输入邮箱' },
+    })
+    expect(wrapper.find('input').attributes('placeholder')).toBe('请输入邮箱')
+  })
+
+  it('disables input when disabled', () => {
+    const wrapper = mount(RsInput, { props: { disabled: true } })
+    expect(wrapper.find('input').attributes('disabled')).toBeDefined()
+  })
+
+  it('reflects external modelValue', () => {
+    const wrapper = mount(RsInput, {
+      props: { modelValue: '初始值' },
+    })
+    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('初始值')
+  })
+
+  it('renders prefix and suffix props', () => {
+    const wrapper = mount(RsInput, {
+      props: { prefix: '￥', suffix: '元' },
+    })
+    expect(wrapper.text()).toContain('￥')
+    expect(wrapper.text()).toContain('元')
+    expect(wrapper.find('.rs-input-group').classes()).toContain('rs-input-group--has-prefix')
+    expect(wrapper.find('.rs-input-group').classes()).toContain('rs-input-group--has-suffix')
+  })
+
+  it('renders prefix slot', () => {
+    const wrapper = mount(RsInput, {
+      slots: {
+        prefix: () => h('span', { class: 'custom-prefix' }, '@'),
+      },
+    })
+    expect(wrapper.find('.custom-prefix').exists()).toBe(true)
+  })
+
+  it('validates email on blur', async () => {
+    const wrapper = mount(RsInput, {
+      props: { modelValue: 'bad-email', rule: 'email', id: 'e1' },
+    })
+    await wrapper.find('input').trigger('blur')
+    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({
+      valid: false,
+      message: '请输入有效的邮箱地址',
+    })
+  })
+
+  it('passes email validation on blur', async () => {
+    const wrapper = mount(RsInput, {
+      props: { modelValue: 'user@example.com', rule: 'email' },
+    })
+    await wrapper.find('input').trigger('blur')
+    expect(wrapper.find('.rs-input-group').classes()).not.toContain('rs-input-group--invalid')
+    expect(wrapper.emitted('validate')?.[0]?.[0]).toEqual({ valid: true })
+  })
+
+  it('uses custom validator', async () => {
+    const wrapper = mount(RsInput, {
+      props: {
+        modelValue: 'ab',
+        validator: (v: string) => v.length >= 3 || '至少 3 个字符',
+      },
+    })
+    await wrapper.find('input').trigger('blur')
+    expect(wrapper.find('.rs-input-field__error').text()).toBe('至少 3 个字符')
+  })
+
+  it('validates email on blur with en-US locale', async () => {
+    const wrapper = mount(RsConfigProvider, {
+      props: { locale: 'en-US' },
+      slots: {
+        default: () =>
+          h(RsInput, {
+            modelValue: 'bad-email',
+            rule: 'email',
+            id: 'e2',
+            'onUpdate:modelValue': () => {},
+          }),
+      },
+    })
+    await wrapper.find('input').trigger('blur')
+    expect(wrapper.find('.rs-input-field__error').text()).toContain('email')
+  })
+
+  it('clears value when clearable button is clicked', async () => {
+    const wrapper = mount(RsInput, {
+      props: { modelValue: 'hello', clearable: true },
+    })
+    await wrapper.find('.rs-input-group__action').trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([''])
+    expect(wrapper.emitted('clear')).toHaveLength(1)
+  })
+
+  it('shows character count when showCount and maxlength are set', () => {
+    const wrapper = mount(RsInput, {
+      props: { modelValue: 'abc', maxlength: 10, showCount: true },
+    })
+    expect(wrapper.find('.rs-input-group__count').text()).toBe('3 / 10')
+    expect(wrapper.find('input').attributes('maxlength')).toBe('10')
+  })
+
+  it('sets readonly on input and group class', () => {
+    const wrapper = mount(RsInput, { props: { readonly: true, modelValue: 'x' } })
+    expect(wrapper.find('input').attributes('readonly')).toBeDefined()
+    expect(wrapper.find('.rs-input-group').classes()).toContain('rs-input-group--readonly')
+  })
+
+  it('toggles password visibility', async () => {
+    const wrapper = mount(RsInput, {
+      props: { modelValue: 'secret', type: 'password' as const },
+    })
+    expect(wrapper.find('input').attributes('type')).toBe('password')
+    expect(wrapper.find('.rs-input-group--has-suffix').exists()).toBe(true)
+    const toggle = wrapper.find('button.rs-input-group__action')
+    expect(toggle.exists()).toBe(true)
+    await toggle.trigger('click')
+    expect(wrapper.find('input').attributes('type')).toBe('text')
+  })
+
+  it('hides password toggle when visibilityToggle is false', () => {
+    const wrapper = mount(RsInput, {
+      props: { modelValue: 'secret', type: 'password', visibilityToggle: false },
+    })
+    expect(wrapper.find('button.rs-input-group__action').exists()).toBe(false)
+  })
+
+  it('emits pressEnter on Enter key', async () => {
+    const wrapper = mount(RsInput, { props: { modelValue: '' } })
+    await wrapper.find('input').trigger('keydown', { key: 'Enter' })
+    expect(wrapper.emitted('pressEnter')).toHaveLength(1)
+  })
+
+  it('keeps modelValue as string for type=number', async () => {
+    const wrapper = mount(RsInput, {
+      props: { modelValue: '10', type: 'number' },
+    })
+    const input = wrapper.find('input')
+    expect(input.attributes('type')).toBe('number')
+    await input.setValue('256')
+    const emitted = wrapper.emitted('update:modelValue')
+    expect(emitted?.at(-1)).toEqual(['256'])
+    expect(typeof emitted?.at(-1)?.[0]).toBe('string')
+  })
+
+  it('normalizes numeric modelValue prop to string display', () => {
+    const wrapper = mount(RsInput, {
+      // 模拟错误调用方传入 number；契约仍按 string 渲染
+      props: { modelValue: 256 as unknown as string, type: 'number' },
+    })
+    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('256')
+  })
+})

package/src/__tests__/RsInputNumber.spec.ts

@@ -0,0 +1,118 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import RsInputNumber from '../components/RsInputNumber.vue'
+import {
+  clampNumber,
+  formatNumberValue,
+  fromModelValue,
+  isNumberInputInterim,
+  normalizeCommittedNumber,
+  parseNumberInput,
+  stepNumberValue,
+  toModelValue,
+} from '../components/input-number-utils'
+
+describe('input-number-utils', () => {
+  it('parses and rejects invalid text', () => {
+    expect(parseNumberInput('12.5')).toBe(12.5)
+    expect(parseNumberInput('')).toBeNull()
+    expect(parseNumberInput('-')).toBeNull()
+    expect(parseNumberInput('abc')).toBeNull()
+  })
+
+  it('detects interim typing states', () => {
+    expect(isNumberInputInterim('-')).toBe(true)
+    expect(isNumberInputInterim('+')).toBe(true)
+    expect(isNumberInputInterim('1.')).toBe(true)
+    expect(isNumberInputInterim('1e')).toBe(true)
+    expect(isNumberInputInterim('12')).toBe(false)
+  })
+
+  it('steps with precision and clamps', () => {
+    expect(stepNumberValue(1, 1, { step: 0.1, precision: 1 })).toBe(1.1)
+    expect(stepNumberValue(9, 1, { step: 1, max: 9 })).toBe(9)
+    expect(stepNumberValue(null, 1, { step: 1 })).toBe(1)
+  })
+
+  it('normalizes commit with min/max/precision', () => {
+    expect(normalizeCommittedNumber('3.456', { precision: 2 })).toBe(3.46)
+    expect(normalizeCommittedNumber('100', { max: 10 })).toBe(10)
+    expect(normalizeCommittedNumber('-', {})).toBeNull()
+  })
+
+  it('converts model modes', () => {
+    expect(toModelValue(3, false)).toBe(3)
+    expect(toModelValue(3, true)).toBe('3')
+    expect(fromModelValue('2.5')).toBe(2.5)
+    expect(clampNumber(20, 0, 10)).toBe(10)
+    expect(formatNumberValue(1.2, { precision: 2 })).toBe('1.20')
+  })
+})
+
+describe('RsInputNumber', () => {
+  function mountNumber(props: Record<string, unknown> = {}) {
+    const state = { value: (props.modelValue ?? null) as unknown }
+    const wrapper = mount(RsInputNumber, {
+      props: {
+        ...props,
+        modelValue: state.value as never,
+        'onUpdate:modelValue': (v: unknown) => {
+          state.value = v
+          void wrapper.setProps({ modelValue: v as never })
+        },
+      },
+    })
+    return { wrapper, state }
+  }
+
+  it('emits number by default', async () => {
+    const { wrapper, state } = mountNumber({ modelValue: 1 })
+    const input = wrapper.find('input')
+    await input.setValue('42')
+    await input.trigger('blur')
+    expect(state.value).toBe(42)
+  })
+
+  it('emits string in stringMode', async () => {
+    const { wrapper, state } = mountNumber({ modelValue: '1', stringMode: true })
+    const input = wrapper.find('input')
+    await input.setValue('256')
+    await input.trigger('blur')
+    expect(state.value).toBe('256')
+    expect(typeof state.value).toBe('string')
+  })
+
+  it('steps via controls and clamps to max', async () => {
+    const { wrapper, state } = mountNumber({
+      modelValue: 9,
+      step: 1,
+      max: 10,
+      controls: true,
+    })
+    const up = wrapper.find('.rs-input-number__handler--up')
+    await up.trigger('click')
+    await nextTick()
+    expect(state.value).toBe(10)
+    await up.trigger('click')
+    await nextTick()
+    expect(state.value).toBe(10)
+  })
+
+  it('supports keyboard arrow steps', async () => {
+    const { wrapper, state } = mountNumber({ modelValue: 5, step: 2, keyboard: true })
+    const input = wrapper.find('input')
+    await input.trigger('keydown', { key: 'ArrowUp' })
+    expect(state.value).toBe(7)
+    await input.trigger('keydown', { key: 'ArrowDown' })
+    expect(state.value).toBe(5)
+  })
+
+  it('clears to null on empty blur', async () => {
+    const { wrapper, state } = mountNumber({ modelValue: 3 })
+    const input = wrapper.find('input')
+    await input.setValue('')
+    await input.trigger('blur')
+    expect(state.value).toBeNull()
+  })
+})

package/src/__tests__/RsLabel.spec.ts

@@ -0,0 +1,106 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import RsInput from '../components/RsInput.vue'
+import RsLabel from '../components/RsLabel.vue'
+
+describe('RsLabel', () => {
+  it('renders slot text', () => {
+    const wrapper = mount(RsLabel, {
+      slots: { default: '邮箱' },
+    })
+    expect(wrapper.text()).toContain('邮箱')
+  })
+
+  it('shows required marker when required is true', () => {
+    const wrapper = mount(RsLabel, {
+      props: { required: true },
+      slots: { default: '名称' },
+    })
+    expect(wrapper.find('.rs-label__required').exists()).toBe(true)
+    expect(wrapper.find('.rs-label__required').text()).toBe('*')
+  })
+
+  it('hides required marker by default', () => {
+    const wrapper = mount(RsLabel, {
+      slots: { default: '名称' },
+    })
+    expect(wrapper.find('.rs-label__required').exists()).toBe(false)
+  })
+
+  it('marks required asterisk as aria-hidden', () => {
+    const wrapper = mount(RsLabel, {
+      props: { required: true },
+      slots: { default: '密码' },
+    })
+    expect(wrapper.find('.rs-label__required').attributes('aria-hidden')).toBe('true')
+  })
+
+  it('binds for attribute when forId is set', () => {
+    const wrapper = mount(RsLabel, {
+      props: { forId: 'email' },
+      slots: { default: '邮箱' },
+    })
+    expect(wrapper.attributes('for')).toBe('email')
+  })
+
+  it('omits for attribute when forId is not set', () => {
+    const wrapper = mount(RsLabel, {
+      slots: { default: '说明' },
+    })
+    expect(wrapper.attributes('for')).toBeUndefined()
+  })
+
+  it('renders hint text', () => {
+    const wrapper = mount(RsLabel, {
+      props: { hint: '用于登录与通知' },
+      slots: { default: '邮箱地址' },
+    })
+    expect(wrapper.find('.rs-label__hint').text()).toBe('用于登录与通知')
+  })
+
+  it('does not render hint element when hint is omitted', () => {
+    const wrapper = mount(RsLabel, {
+      slots: { default: '邮箱地址' },
+    })
+    expect(wrapper.find('.rs-label__hint').exists()).toBe(false)
+  })
+
+  it('applies disabled class when disabled', () => {
+    const wrapper = mount(RsLabel, {
+      props: { disabled: true },
+      slots: { default: '已禁用字段' },
+    })
+    expect(wrapper.classes()).toContain('rs-label--disabled')
+  })
+
+  it('supports required, hint, forId and disabled together', () => {
+    const wrapper = mount(RsLabel, {
+      props: {
+        forId: 'username',
+        required: true,
+        hint: '3–20 个字符',
+        disabled: true,
+      },
+      slots: { default: '用户名' },
+    })
+    expect(wrapper.attributes('for')).toBe('username')
+    expect(wrapper.classes()).toContain('rs-label--disabled')
+    expect(wrapper.find('.rs-label__required').exists()).toBe(true)
+    expect(wrapper.find('.rs-label__hint').text()).toBe('3–20 个字符')
+    expect(wrapper.text()).toContain('用户名')
+  })
+
+  it('links label to input when forId matches input id', () => {
+    const wrapper = mount({
+      components: { RsLabel, RsInput },
+      template: `
+        <div>
+          <RsLabel for-id="pg-label-input">可点击聚焦</RsLabel>
+          <RsInput id="pg-label-input" />
+        </div>
+      `,
+    })
+    expect(wrapper.find('label').attributes('for')).toBe('pg-label-input')
+    expect(wrapper.find('input').attributes('id')).toBe('pg-label-input')
+  })
+})

package/src/__tests__/RsLink.spec.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import RsLink from '../components/RsLink.vue'
+
+describe('RsLink', () => {
+  it('renders slot text and href', () => {
+    const wrapper = mount(RsLink, {
+      props: { href: '/docs' },
+      slots: { default: '查看文档' },
+    })
+    expect(wrapper.text()).toContain('查看文档')
+    expect(wrapper.attributes('href')).toBe('/docs')
+  })
+
+  it('adds secure rel for target blank', () => {
+    const wrapper = mount(RsLink, {
+      props: { href: 'https://example.com', target: '_blank' },
+    })
+    const rel = wrapper.attributes('rel')
+    expect(rel).toContain('noopener')
+    expect(rel).toContain('noreferrer')
+  })
+
+  it('merges custom rel with secure rel for target blank', () => {
+    const wrapper = mount(RsLink, {
+      props: { href: 'https://example.com', target: '_blank', rel: 'external' },
+    })
+    const rel = wrapper.attributes('rel')
+    expect(rel).toContain('external')
+    expect(rel).toContain('noopener')
+    expect(rel).toContain('noreferrer')
+  })
+
+  it('sets disabled accessibility attributes when disabled', () => {
+    const wrapper = mount(RsLink, {
+      props: { href: '/docs', disabled: true },
+    })
+    expect(wrapper.attributes('aria-disabled')).toBe('true')
+    expect(wrapper.attributes('tabindex')).toBe('-1')
+    expect(wrapper.attributes('href')).toBeUndefined()
+  })
+
+  it('applies underline variant class', () => {
+    const wrapper = mount(RsLink, {
+      props: { href: '/docs', underline: 'always' },
+    })
+    expect(wrapper.classes()).toContain('rs-link--underline-always')
+  })
+})

package/src/__tests__/RsLoading.spec.ts

@@ -0,0 +1,84 @@
+import { describe, expect, it } from 'vitest'
+import { h } from 'vue'
+import { mount } from '@vue/test-utils'
+import RsConfigProvider from '../components/RsConfigProvider.vue'
+import RsLoading from '../components/RsLoading.vue'
+
+describe('RsLoading', () => {
+  it('renders spinner by default', () => {
+    const wrapper = mount(RsLoading)
+    expect(wrapper.find('.rs-loading__spinner').exists()).toBe(true)
+    expect(wrapper.classes()).toContain('rs-loading')
+  })
+
+  it('renders dots variant', () => {
+    const wrapper = mount(RsLoading, { props: { variant: 'dots' } })
+    expect(wrapper.find('.rs-loading__dots').exists()).toBe(true)
+    expect(wrapper.findAll('.rs-loading__dot')).toHaveLength(3)
+  })
+
+  it('renders skeleton variant with default line count', () => {
+    const wrapper = mount(RsLoading, { props: { variant: 'skeleton' } })
+    expect(wrapper.find('.rs-loading__skeleton').exists()).toBe(true)
+    expect(wrapper.findAll('.rs-loading__skeleton-line')).toHaveLength(4)
+  })
+
+  it('respects skeletonLines prop', () => {
+    const wrapper = mount(RsLoading, {
+      props: { variant: 'skeleton', skeletonLines: 2 },
+    })
+    expect(wrapper.findAll('.rs-loading__skeleton-line')).toHaveLength(2)
+  })
+
+  it.each(['sm', 'md', 'lg'] as const)('applies %s size class on spinner', (size) => {
+    const wrapper = mount(RsLoading, { props: { size } })
+    expect(wrapper.find('.rs-loading__spinner').classes()).toContain(`rs-loading__spinner--${size}`)
+  })
+
+  it.each(['default', 'primary'] as const)('applies %s tone class on spinner', (tone) => {
+    const wrapper = mount(RsLoading, { props: { tone } })
+    expect(wrapper.find('.rs-loading__spinner').classes()).toContain(`rs-loading__spinner--${tone}`)
+  })
+
+  it('hides root when loading is false', () => {
+    const wrapper = mount(RsLoading, { props: { loading: false } })
+    expect(wrapper.find('.rs-loading').exists()).toBe(false)
+  })
+
+  it('applies block and overlay modifier classes', () => {
+    const wrapper = mount(RsLoading, { props: { block: true, overlay: true } })
+    expect(wrapper.classes()).toContain('rs-loading--block')
+    expect(wrapper.classes()).toContain('rs-loading--overlay')
+  })
+
+  it('exposes status role and default zh-CN aria-label', () => {
+    const wrapper = mount(RsLoading)
+    expect(wrapper.attributes('role')).toBe('status')
+    expect(wrapper.attributes('aria-label')).toBe('加载中')
+  })
+
+  it('shows label when showLabel is true', () => {
+    const wrapper = mount(RsLoading, { props: { showLabel: true } })
+    expect(wrapper.find('.rs-loading__label').text()).toBe('加载中')
+  })
+
+  it('uses custom label for visible text and aria-label', () => {
+    const wrapper = mount(RsLoading, {
+      props: { showLabel: true, label: '正在同步…' },
+    })
+    expect(wrapper.find('.rs-loading__label').text()).toBe('正在同步…')
+    expect(wrapper.attributes('aria-label')).toBe('正在同步…')
+  })
+
+  it('uses en-US aria-label inside RsConfigProvider', () => {
+    const wrapper = mount(RsConfigProvider, {
+      props: { locale: 'en-US' },
+      slots: {
+        default: () => h(RsLoading, { showLabel: true }),
+      },
+    })
+    const loading = wrapper.find('.rs-loading')
+    expect(loading.attributes('aria-label')).toBe('Loading')
+    expect(loading.find('.rs-loading__label').text()).toBe('Loading')
+  })
+})