niuma-ui 1.0.0

package/src/__tests__/RsEmpty.spec.ts

@@ -0,0 +1,99 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import RsEmpty from '../components/RsEmpty.vue'
+
+describe('RsEmpty', () => {
+  it('renders required description', () => {
+    const wrapper = mount(RsEmpty, {
+      props: { description: '暂无数据' },
+    })
+    expect(wrapper.find('.rs-empty__description').text()).toBe('暂无数据')
+  })
+
+  it('renders title when provided', () => {
+    const wrapper = mount(RsEmpty, {
+      props: { title: '还没有项目', description: '创建第一个项目。' },
+    })
+    expect(wrapper.find('.rs-empty__title').text()).toBe('还没有项目')
+  })
+
+  it('omits title element when title is not provided', () => {
+    const wrapper = mount(RsEmpty, {
+      props: { description: '暂无数据' },
+    })
+    expect(wrapper.find('.rs-empty__title').exists()).toBe(false)
+  })
+
+  it('applies description offset class when title is present', () => {
+    const wrapper = mount(RsEmpty, {
+      props: { title: '标题', description: '描述' },
+    })
+    expect(wrapper.find('.rs-empty__description').classes()).toContain('rs-empty__description--offset')
+  })
+
+  it('does not apply description offset class without title', () => {
+    const wrapper = mount(RsEmpty, {
+      props: { description: '描述' },
+    })
+    expect(wrapper.find('.rs-empty__description').classes()).not.toContain('rs-empty__description--offset')
+  })
+
+  it('renders icon slot', () => {
+    const wrapper = mount(RsEmpty, {
+      props: { description: '空状态' },
+      slots: { icon: '<span class="custom-icon">icon</span>' },
+    })
+    expect(wrapper.find('.rs-empty__icon .custom-icon').text()).toBe('icon')
+  })
+
+  it('renders default slot for actions', () => {
+    const wrapper = mount(RsEmpty, {
+      props: { description: '空状态' },
+      slots: { default: '<button type="button" class="action-btn">新建</button>' },
+    })
+    expect(wrapper.find('.action-btn').text()).toBe('新建')
+  })
+
+  it('renders root container with base class', () => {
+    const wrapper = mount(RsEmpty, {
+      props: { description: '空状态' },
+    })
+    expect(wrapper.classes()).toContain('rs-empty')
+    expect(wrapper.classes()).not.toContain('rs-empty--fill')
+    expect(wrapper.find('.rs-empty__text').exists()).toBe(true)
+    expect(wrapper.find('.rs-empty__icon').exists()).toBe(true)
+  })
+
+  it('applies fill class for flush square layout', () => {
+    const wrapper = mount(RsEmpty, {
+      props: { description: '空状态', fill: true },
+    })
+    expect(wrapper.classes()).toContain('rs-empty--fill')
+  })
+
+  it('applies icon radius via CSS variable', () => {
+    const wrapper = mount(RsEmpty, {
+      props: { description: '空状态', iconRadius: 'none' },
+    })
+    const style = wrapper.attributes('style') ?? ''
+    expect(style).toContain('--rs-empty-icon-radius')
+    expect(style).toMatch(/--rs-empty-icon-radius:\s*0/)
+  })
+
+  it('applies outer radius via CSS variable', () => {
+    const wrapper = mount(RsEmpty, {
+      props: { description: '空状态', radius: 'sm' },
+    })
+    const style = wrapper.attributes('style') ?? ''
+    expect(style).toContain('--rs-empty-radius')
+    expect(style).toContain('--rs-radius-sm')
+  })
+
+  it('forces outer radius to 0 when fill is true', () => {
+    const wrapper = mount(RsEmpty, {
+      props: { description: '空状态', fill: true, radius: 'lg' },
+    })
+    const style = wrapper.attributes('style') ?? ''
+    expect(style).toMatch(/--rs-empty-radius:\s*0/)
+  })
+})

package/src/__tests__/RsForm.spec.ts

@@ -0,0 +1,173 @@
+import { defineComponent, ref } from 'vue'
+import { afterEach, describe, expect, it } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import RsForm from '../components/RsForm.vue'
+import RsInput from '../components/RsInput.vue'
+import RsSelect from '../components/RsSelect.vue'
+
+const roleOptions = [
+  { label: '成员', value: 'member' },
+  { label: '管理员', value: 'admin' },
+]
+
+describe('RsForm', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('renders form element with base class', () => {
+    const wrapper = mount(RsForm, {
+      slots: { default: '<p class="slot">内容</p>' },
+    })
+    expect(wrapper.element.tagName).toBe('FORM')
+    expect(wrapper.classes()).toContain('rs-form')
+    expect(wrapper.find('.slot').text()).toBe('内容')
+  })
+
+  it('applies gap, maxWidth, and labelPosition classes', () => {
+    const wrapper = mount(RsForm, {
+      props: { gap: 'lg', maxWidth: 'sm', labelPosition: 'left' },
+    })
+    expect(wrapper.classes()).toContain('rs-form--gap-lg')
+    expect(wrapper.classes()).toContain('rs-form--max-sm')
+    expect(wrapper.classes()).toContain('rs-form--label-left')
+  })
+
+  it('validate returns valid when all fields pass', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsInput },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const email = ref('user@example.com')
+        return { formRef, email }
+      },
+      template: `
+        <RsForm ref="formRef">
+          <RsInput v-model="email" rule="email" required />
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    const result = await wrapper.vm.formRef!.validate()
+    expect(result.valid).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('validate returns invalid when a field fails', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsInput },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const email = ref('not-an-email')
+        return { formRef, email }
+      },
+      template: `
+        <RsForm ref="formRef">
+          <RsInput v-model="email" rule="email" required />
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    const result = await wrapper.vm.formRef!.validate()
+    expect(result.valid).toBe(false)
+    wrapper.unmount()
+  })
+
+  it('resetFields restores initial values', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsInput },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const name = ref('初始值')
+        return { formRef, name }
+      },
+      template: `
+        <RsForm ref="formRef">
+          <RsInput v-model="name" />
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    wrapper.vm.name = '已修改'
+    await flushPromises()
+    wrapper.vm.formRef!.resetFields()
+    await flushPromises()
+    expect(wrapper.vm.name).toBe('初始值')
+    wrapper.unmount()
+  })
+
+  it('clearValidation clears input error state', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsInput },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const email = ref('bad')
+        return { formRef, email }
+      },
+      template: `
+        <RsForm ref="formRef">
+          <RsInput v-model="email" rule="email" required />
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host)
+    await flushPromises()
+    await wrapper.vm.formRef!.validate()
+    await flushPromises()
+    expect(wrapper.find('.rs-input-group--invalid').exists()).toBe(true)
+    wrapper.vm.formRef!.clearValidation()
+    await flushPromises()
+    expect(wrapper.find('.rs-input-group--invalid').exists()).toBe(false)
+    wrapper.unmount()
+  })
+
+  it('propagates disabled to child inputs', async () => {
+    const wrapper = mount(RsForm, {
+      props: { disabled: true },
+      slots: { default: '<RsInput model-value="只读" />' },
+      global: { components: { RsInput } },
+    })
+    await flushPromises()
+    expect(wrapper.find('input').attributes('disabled')).toBeDefined()
+    wrapper.unmount()
+  })
+
+  it('propagates size to child inputs without explicit size', async () => {
+    const wrapper = mount(RsForm, {
+      props: { size: 'sm' },
+      slots: { default: '<RsInput model-value="" />' },
+      global: { components: { RsInput } },
+    })
+    await flushPromises()
+    expect(wrapper.find('.rs-input-group--sm').exists()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('validates required select field', async () => {
+    const Host = defineComponent({
+      components: { RsForm, RsSelect },
+      setup() {
+        const formRef = ref<InstanceType<typeof RsForm> | null>(null)
+        const role = ref('')
+        return { formRef, role, roleOptions }
+      },
+      template: `
+        <RsForm ref="formRef">
+          <RsSelect v-model="role" :options="roleOptions" required />
+        </RsForm>
+      `,
+    })
+    const wrapper = mount(Host, { attachTo: document.body })
+    await flushPromises()
+    const invalid = await wrapper.vm.formRef!.validate()
+    expect(invalid.valid).toBe(false)
+    wrapper.vm.role = 'member'
+    await flushPromises()
+    const valid = await wrapper.vm.formRef!.validate()
+    expect(valid.valid).toBe(true)
+    wrapper.unmount()
+  })
+})

package/src/__tests__/RsIcon.spec.ts

@@ -0,0 +1,244 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import RsIcon from '../components/RsIcon.vue'
+import {
+  isRsIconName,
+  lucideIconCount,
+  resolveLucideIcon,
+  rsCommonIconNames,
+} from '../icons/registry'
+
+describe('RsIcon', () => {
+  it('loads lucide icon module', () => {
+    const icon = resolveLucideIcon('house')
+    expect(icon).toBeTruthy()
+  })
+
+  it('loads custom api icon', () => {
+    const icon = resolveLucideIcon('api')
+    expect(icon).toBeTruthy()
+    const wrapper = mount(RsIcon, { props: { name: 'api' } })
+    expect(wrapper.find('svg.rs-icon').exists()).toBe(true)
+    expect(wrapper.find('.api-icon__label').exists()).toBe(true)
+    expect(wrapper.find('.api-icon__label').text()).toBe('API')
+    expect(isRsIconName('api')).toBe(true)
+  })
+
+  it('loads custom ftp icon', () => {
+    const icon = resolveLucideIcon('ftp')
+    expect(icon).toBeTruthy()
+    const wrapper = mount(RsIcon, { props: { name: 'ftp' } })
+    expect(wrapper.find('svg.rs-icon').exists()).toBe(true)
+    expect(wrapper.find('.ftp-icon__folder').exists()).toBe(true)
+    expect(wrapper.find('.ftp-icon__label').exists()).toBe(true)
+    expect(wrapper.find('.ftp-icon__label').text()).toBe('FTP')
+    expect(isRsIconName('ftp')).toBe(true)
+  })
+
+  it('loads custom mongodb icon', () => {
+    const icon = resolveLucideIcon('mongodb')
+    expect(icon).toBeTruthy()
+    const wrapper = mount(RsIcon, { props: { name: 'mongodb' } })
+    expect(wrapper.find('svg.rs-icon').exists()).toBe(true)
+    expect(wrapper.find('.mongodb-icon__mark').exists()).toBe(true)
+    expect(isRsIconName('mongodb')).toBe(true)
+  })
+
+  it('loads custom vastbase icon', () => {
+    const icon = resolveLucideIcon('vastbase')
+    expect(icon).toBeTruthy()
+    const wrapper = mount(RsIcon, { props: { name: 'vastbase' } })
+    expect(wrapper.find('svg.rs-icon').exists()).toBe(true)
+    expect(wrapper.find('.vastbase-icon__mark').exists()).toBe(true)
+    expect(wrapper.findAll('.vastbase-icon__mark')).toHaveLength(6)
+    expect(isRsIconName('vastbase')).toBe(true)
+  })
+
+  it('loads custom mysql icon', () => {
+    const icon = resolveLucideIcon('mysql')
+    expect(icon).toBeTruthy()
+    const wrapper = mount(RsIcon, { props: { name: 'mysql' } })
+    expect(wrapper.find('svg.rs-icon').exists()).toBe(true)
+    expect(wrapper.find('.mysql-icon__mark').exists()).toBe(true)
+    expect(isRsIconName('mysql')).toBe(true)
+  })
+
+  it('loads custom dameng icon', () => {
+    const icon = resolveLucideIcon('dameng')
+    expect(icon).toBeTruthy()
+    const wrapper = mount(RsIcon, { props: { name: 'dameng' } })
+    expect(wrapper.find('svg.rs-icon').exists()).toBe(true)
+    expect(wrapper.find('.dameng-icon__oval').exists()).toBe(true)
+    expect(wrapper.findAll('.dameng-icon__wave')).toHaveLength(3)
+    expect(isRsIconName('dameng')).toBe(true)
+  })
+
+  it('loads custom oracle icon', () => {
+    const icon = resolveLucideIcon('oracle')
+    expect(icon).toBeTruthy()
+    const wrapper = mount(RsIcon, { props: { name: 'oracle' } })
+    expect(wrapper.find('svg.rs-icon').exists()).toBe(true)
+    expect(wrapper.find('.oracle-icon__mark').exists()).toBe(true)
+    expect(isRsIconName('oracle')).toBe(true)
+  })
+
+  it('loads custom clickhouse icon', () => {
+    const icon = resolveLucideIcon('clickhouse')
+    expect(icon).toBeTruthy()
+    const wrapper = mount(RsIcon, { props: { name: 'clickhouse' } })
+    expect(wrapper.find('svg.rs-icon').exists()).toBe(true)
+    expect(wrapper.find('.clickhouse-icon__mark').exists()).toBe(true)
+    expect(isRsIconName('clickhouse')).toBe(true)
+  })
+
+  it('loads custom kingbase icon', () => {
+    const icon = resolveLucideIcon('kingbase')
+    expect(icon).toBeTruthy()
+    const wrapper = mount(RsIcon, { props: { name: 'kingbase' } })
+    expect(wrapper.find('svg.rs-icon').exists()).toBe(true)
+    expect(wrapper.find('.kingbase-icon__mark').exists()).toBe(true)
+    expect(isRsIconName('kingbase')).toBe(true)
+  })
+
+  it('loads custom sqlserver icon', () => {
+    const icon = resolveLucideIcon('sqlserver')
+    expect(icon).toBeTruthy()
+    const wrapper = mount(RsIcon, { props: { name: 'sqlserver' } })
+    expect(wrapper.find('svg.rs-icon').exists()).toBe(true)
+    expect(wrapper.find('.sqlserver-icon__mark').exists()).toBe(true)
+    expect(isRsIconName('sqlserver')).toBe(true)
+  })
+
+  it('loads arbitrary lucide icon by name', () => {
+    const icon = resolveLucideIcon('trash-2')
+    expect(icon).toBeTruthy()
+  })
+
+  it('renders svg for known icon', () => {
+    const wrapper = mount(RsIcon, { props: { name: 'house' } })
+    expect(wrapper.find('svg.rs-icon').exists()).toBe(true)
+    expect(wrapper.find('path').exists()).toBe(true)
+  })
+
+  it('renders lucide icon by kebab-case name', () => {
+    const wrapper = mount(RsIcon, { props: { name: 'trash-2' } })
+    expect(wrapper.find('svg.rs-icon').exists()).toBe(true)
+  })
+
+  it('renders all common icons', () => {
+    for (const name of rsCommonIconNames) {
+      const wrapper = mount(RsIcon, { props: { name } })
+      expect(wrapper.find('svg.rs-icon').exists(), `icon failed: ${name}`).toBe(true)
+    }
+  })
+
+  it('exposes lucide library size', () => {
+    expect(lucideIconCount).toBeGreaterThan(100)
+    expect(isRsIconName('trash-2')).toBe(true)
+    expect(isRsIconName('not-a-real-icon')).toBe(false)
+  })
+
+  it('renders multiple paths for complex icons', () => {
+    const wrapper = mount(RsIcon, { props: { name: 'loader' } })
+    expect(wrapper.findAll('path').length).toBeGreaterThan(1)
+  })
+
+  it('renders nothing for unknown icon', () => {
+    const wrapper = mount(RsIcon, { props: { name: 'not-a-real-icon' } })
+    expect(wrapper.find('svg').exists()).toBe(false)
+  })
+
+  it('applies numeric size', () => {
+    const wrapper = mount(RsIcon, { props: { name: 'house', size: 24 } })
+    expect(wrapper.find('svg').attributes('width')).toBe('24')
+    expect(wrapper.find('svg').attributes('height')).toBe('24')
+  })
+
+  it.each(['sm', 'md', 'lg'] as const)('applies %s size preset', (size) => {
+    const wrapper = mount(RsIcon, { props: { name: 'house', size } })
+    const expected = { sm: '14', md: '16', lg: '20' }[size]
+    expect(wrapper.find('svg').attributes('width')).toBe(expected)
+  })
+
+  it('applies css length size', () => {
+    const wrapper = mount(RsIcon, { props: { name: 'house', size: '1.5rem' } })
+    expect(wrapper.find('svg').attributes('style')).toContain('width: 1.5rem')
+  })
+
+  it('applies custom stroke width', () => {
+    const wrapper = mount(RsIcon, { props: { name: 'search', strokeWidth: 2.5 } })
+    expect(wrapper.find('svg').attributes('stroke-width')).toBe('2.5')
+  })
+
+  it('applies color style', () => {
+    const wrapper = mount(RsIcon, { props: { name: 'check', color: 'var(--rs-success)' } })
+    expect(wrapper.find('svg').attributes('style')).toContain('color: var(--rs-success)')
+  })
+
+  it('applies accent color to custom ftp icon', () => {
+    const wrapper = mount(RsIcon, { props: { name: 'ftp', color: '#34C759' } })
+    expect(wrapper.find('svg').attributes('style')).toContain('--rs-icon-ftp-accent: #34C759')
+  })
+
+  it('applies accent color to custom mongodb icon', () => {
+    const wrapper = mount(RsIcon, { props: { name: 'mongodb', color: '#34C759' } })
+    expect(wrapper.find('svg').attributes('style')).toContain('--rs-icon-mongodb-accent: #34C759')
+  })
+
+  it('applies accent color to custom vastbase icon', () => {
+    const wrapper = mount(RsIcon, { props: { name: 'vastbase', color: '#34C759' } })
+    expect(wrapper.find('svg').attributes('style')).toContain('--rs-icon-vastbase-accent: #34C759')
+  })
+
+  it('applies accent color to custom mysql icon', () => {
+    const wrapper = mount(RsIcon, { props: { name: 'mysql', color: '#34C759' } })
+    expect(wrapper.find('svg').attributes('style')).toContain('--rs-icon-mysql-accent: #34C759')
+  })
+
+  it('applies accent color to custom oracle icon', () => {
+    const wrapper = mount(RsIcon, { props: { name: 'oracle', color: '#34C759' } })
+    expect(wrapper.find('svg').attributes('style')).toContain('--rs-icon-oracle-accent: #34C759')
+  })
+
+  it('applies accent color to custom sqlserver icon', () => {
+    const wrapper = mount(RsIcon, { props: { name: 'sqlserver', color: '#34C759' } })
+    expect(wrapper.find('svg').attributes('style')).toContain('--rs-icon-sqlserver-accent: #34C759')
+  })
+
+  it('applies rotate transform', () => {
+    const wrapper = mount(RsIcon, { props: { name: 'chevron-right', rotate: 90 } })
+    expect(wrapper.find('svg').attributes('style')).toContain('rotate(90deg)')
+  })
+
+  it('applies horizontal flip', () => {
+    const wrapper = mount(RsIcon, { props: { name: 'chevron-right', flip: 'horizontal' } })
+    expect(wrapper.find('svg').attributes('style')).toContain('scaleX(-1)')
+  })
+
+  it('applies spin class', () => {
+    const wrapper = mount(RsIcon, { props: { name: 'loader', spin: true } })
+    expect(wrapper.find('svg').classes()).toContain('rs-icon--spin')
+  })
+
+  it('sets semantic attributes when label is provided', () => {
+    const wrapper = mount(RsIcon, { props: { name: 'settings', label: '设置' } })
+    expect(wrapper.find('svg').attributes('aria-label')).toBe('设置')
+    expect(wrapper.find('svg').attributes('role')).toBe('img')
+    expect(wrapper.find('svg').attributes('aria-hidden')).toBeUndefined()
+  })
+
+  it('hides decorative icon from assistive tech', () => {
+    const wrapper = mount(RsIcon, { props: { name: 'plus' } })
+    expect(wrapper.find('svg').attributes('aria-hidden')).toBe('true')
+    expect(wrapper.find('svg').attributes('role')).toBeUndefined()
+  })
+
+  it('merges external class onto svg', () => {
+    const wrapper = mount(RsIcon, {
+      props: { name: 'house' },
+      attrs: { class: 'custom-icon' },
+    })
+    expect(wrapper.find('svg').classes()).toContain('rs-icon')
+    expect(wrapper.find('svg').classes()).toContain('custom-icon')
+  })
+})