niuma-ui 1.0.0

package/src/__tests__/RsBreadcrumb.spec.ts

@@ -0,0 +1,172 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import RsBreadcrumb from '../components/RsBreadcrumb.vue'
+import RsConfigProvider from '../components/RsConfigProvider.vue'
+
+const threeLevelItems = [
+  { label: '首页', href: '/' },
+  { label: '应用', href: '/apps' },
+  { label: '详情' },
+]
+
+describe('RsBreadcrumb', () => {
+  it('renders nav with breadcrumb aria-label', () => {
+    const wrapper = mount(RsBreadcrumb, {
+      props: { items: threeLevelItems },
+    })
+    expect(wrapper.find('nav.rs-breadcrumb').attributes('aria-label')).toBe('面包屑')
+  })
+
+  it('renders all items', () => {
+    const wrapper = mount(RsBreadcrumb, {
+      props: { items: threeLevelItems },
+    })
+    expect(wrapper.text()).toContain('首页')
+    expect(wrapper.text()).toContain('应用')
+    expect(wrapper.text()).toContain('详情')
+  })
+
+  it('renders single item without separator', () => {
+    const wrapper = mount(RsBreadcrumb, {
+      props: { items: [{ label: '仅一项' }] },
+    })
+    expect(wrapper.findAll('.rs-breadcrumb__item')).toHaveLength(1)
+    expect(wrapper.findAll('.rs-breadcrumb__sep')).toHaveLength(0)
+    expect(wrapper.text()).toBe('仅一项')
+  })
+
+  it('renders empty list when items is empty', () => {
+    const wrapper = mount(RsBreadcrumb, {
+      props: { items: [] },
+    })
+    expect(wrapper.findAll('.rs-breadcrumb__item')).toHaveLength(0)
+    expect(wrapper.find('.rs-breadcrumb__list').exists()).toBe(true)
+  })
+
+  it('renders href items as anchor with correct href', () => {
+    const wrapper = mount(RsBreadcrumb, {
+      props: {
+        items: [
+          { label: '首页', href: '/' },
+          { label: '当前页' },
+        ],
+      },
+    })
+    const anchors = wrapper.findAll('a.rs-breadcrumb__link')
+    expect(anchors).toHaveLength(1)
+    expect(anchors[0]?.text()).toBe('首页')
+    expect(anchors[0]?.attributes('href')).toBe('/')
+  })
+
+  it('renders plain items as span without href', () => {
+    const wrapper = mount(RsBreadcrumb, {
+      props: { items: [{ label: 'A' }, { label: 'B' }] },
+    })
+    const spans = wrapper.findAll('span.rs-breadcrumb__link')
+    expect(spans).toHaveLength(2)
+    expect(spans[0]?.text()).toBe('A')
+    expect(spans[1]?.text()).toBe('B')
+  })
+
+  it('renders anchor when only to is provided', () => {
+    const wrapper = mount(RsBreadcrumb, {
+      props: {
+        items: [{ label: '路由页', to: '/route' }, { label: '当前' }],
+      },
+    })
+    expect(wrapper.findAll('a.rs-breadcrumb__link')).toHaveLength(1)
+    expect(wrapper.findAll('span.rs-breadcrumb__link')).toHaveLength(1)
+  })
+
+  it('marks last item as current page', () => {
+    const wrapper = mount(RsBreadcrumb, {
+      props: { items: [{ label: 'A' }, { label: 'B' }] },
+    })
+    const links = wrapper.findAll('.rs-breadcrumb__link')
+    expect(links.at(-1)?.attributes('aria-current')).toBe('page')
+  })
+
+  it('does not set aria-current on non-last items', () => {
+    const wrapper = mount(RsBreadcrumb, {
+      props: { items: threeLevelItems },
+    })
+    const links = wrapper.findAll('.rs-breadcrumb__link')
+    expect(links[0]?.attributes('aria-current')).toBeUndefined()
+    expect(links[1]?.attributes('aria-current')).toBeUndefined()
+    expect(links[2]?.attributes('aria-current')).toBe('page')
+  })
+
+  it('applies current class only to last item', () => {
+    const wrapper = mount(RsBreadcrumb, {
+      props: { items: threeLevelItems },
+    })
+    const links = wrapper.findAll('.rs-breadcrumb__link')
+    expect(links[0]?.classes()).not.toContain('rs-breadcrumb__link--current')
+    expect(links[1]?.classes()).not.toContain('rs-breadcrumb__link--current')
+    expect(links[2]?.classes()).toContain('rs-breadcrumb__link--current')
+  })
+
+  it('renders separators between items but not after last', () => {
+    const wrapper = mount(RsBreadcrumb, {
+      props: { items: threeLevelItems },
+    })
+    expect(wrapper.findAll('.rs-breadcrumb__sep')).toHaveLength(2)
+    expect(wrapper.findAll('.rs-breadcrumb__item')).toHaveLength(3)
+  })
+
+  it('renders separator icon with accessible label', () => {
+    const wrapper = mount(RsBreadcrumb, {
+      props: { items: [{ label: 'A' }, { label: 'B' }] },
+    })
+    const sep = wrapper.find('.rs-breadcrumb__sep')
+    expect(sep.exists()).toBe(true)
+    expect(sep.attributes('aria-label')).toBe('分隔符')
+  })
+
+  it('renders i18n labels in en-US locale', () => {
+    const wrapper = mount(RsConfigProvider, {
+      props: { locale: 'en-US' },
+      slots: {
+        default: () =>
+          h(RsBreadcrumb, {
+            items: [{ label: 'Home', href: '/' }, { label: 'Docs' }],
+          }),
+      },
+    })
+    expect(wrapper.find('nav.rs-breadcrumb').attributes('aria-label')).toBe('Breadcrumb')
+    expect(wrapper.find('.rs-breadcrumb__sep').attributes('aria-label')).toBe('Separator')
+  })
+
+  it('uses href as rendered anchor href when both to and href exist', () => {
+    const wrapper = mount(RsBreadcrumb, {
+      props: {
+        items: [
+          { label: 'Entry', to: '/route-target', href: '/href-target' },
+          { label: 'Current' },
+        ],
+      },
+    })
+    const anchor = wrapper.find('a.rs-breadcrumb__link')
+    expect(anchor.exists()).toBe(true)
+    expect(anchor.attributes('href')).toBe('/href-target')
+  })
+
+  it('updates current item and separators after items prop changes', async () => {
+    const wrapper = mount(RsBreadcrumb, {
+      props: { items: [{ label: 'Root' }, { label: 'Leaf' }] },
+    })
+    expect(wrapper.findAll('.rs-breadcrumb__sep')).toHaveLength(1)
+    expect(wrapper.findAll('.rs-breadcrumb__link')[1]?.text()).toBe('Leaf')
+
+    await wrapper.setProps({
+      items: [{ label: 'Root' }, { label: 'Branch' }, { label: 'Leaf' }],
+    })
+
+    const links = wrapper.findAll('.rs-breadcrumb__link')
+    expect(wrapper.findAll('.rs-breadcrumb__sep')).toHaveLength(2)
+    expect(links[1]?.attributes('aria-current')).toBeUndefined()
+    expect(links[2]?.attributes('aria-current')).toBe('page')
+    expect(links[2]?.text()).toBe('Leaf')
+  })
+})

package/src/__tests__/RsButton.spec.ts

@@ -0,0 +1,108 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import RsButton from '../components/RsButton.vue'
+
+describe('RsButton', () => {
+  it('renders slot', () => {
+    const wrapper = mount(RsButton, {
+      slots: { default: '确定' },
+    })
+    expect(wrapper.text()).toContain('确定')
+  })
+
+  it('applies size class', () => {
+    const wrapper = mount(RsButton, {
+      props: { size: 'lg' },
+    })
+    expect(wrapper.classes()).toContain('rs-btn--lg')
+  })
+
+  it('applies default variant class', () => {
+    const wrapper = mount(RsButton, {
+      props: { variant: 'default' },
+    })
+    expect(wrapper.classes()).toContain('rs-btn--default')
+  })
+
+  it('applies variant class', () => {
+    const wrapper = mount(RsButton, {
+      props: { variant: 'ghost' },
+    })
+    expect(wrapper.classes()).toContain('rs-btn--ghost')
+  })
+
+  it('renders prefix icon', () => {
+    const wrapper = mount(RsButton, {
+      props: { icon: 'plus' },
+      slots: { default: '新建' },
+    })
+    expect(wrapper.find('.rs-btn__icon').exists()).toBe(true)
+    expect(wrapper.text()).toContain('新建')
+  })
+
+  it('iconOnly with tooltip sets aria-label', () => {
+    const wrapper = mount(RsButton, {
+      props: { icon: 'search', iconOnly: true, tooltip: '搜索' },
+    })
+    expect(wrapper.classes()).toContain('rs-btn--icon-only')
+    expect(wrapper.find('.rs-btn__tooltip').text()).toBe('搜索')
+    expect(wrapper.attributes('aria-label')).toBe('搜索')
+  })
+
+  it('iconOnly uses slot text in floating tooltip when tooltip omitted', () => {
+    const wrapper = mount(RsButton, {
+      props: { icon: 'message-square', iconOnly: true },
+      slots: { default: '消息' },
+    })
+    expect(wrapper.find('.rs-btn__label').exists()).toBe(false)
+    expect(wrapper.find('.rs-btn__tooltip').text()).toBe('消息')
+  })
+
+  it('reveal-label mode keeps label in dom with reveal class', () => {
+    const wrapper = mount(RsButton, {
+      props: { icon: 'plus', revealLabel: true },
+      slots: { default: '新建对话' },
+    })
+    expect(wrapper.classes()).toContain('rs-btn--reveal-label')
+    expect(wrapper.find('.rs-btn__label--reveal').exists()).toBe(true)
+    expect(wrapper.text()).toContain('新建对话')
+  })
+
+  it('shows tooltip when tooltip prop is set with label', () => {
+    const wrapper = mount(RsButton, {
+      props: { icon: 'plus', tooltip: 'Ctrl+N' },
+      slots: { default: '新建' },
+    })
+    expect(wrapper.find('.rs-btn__tooltip').text()).toBe('Ctrl+N')
+  })
+
+  it('loading: applies class, keeps enabled, shows inline spinner and label', async () => {
+    const wrapper = mount(RsButton, {
+      props: { loading: true, variant: 'secondary' },
+      slots: { default: '测试连接' },
+    })
+    const btn = wrapper.find('button')
+    expect(btn.classes()).toContain('rs-btn--loading')
+    expect(btn.attributes('disabled')).toBeUndefined()
+    expect(btn.attributes('aria-busy')).toBe('true')
+    expect(btn.find('.rs-btn__spinner-ring').exists()).toBe(true)
+    expect(btn.text()).toContain('测试连接')
+  })
+
+  it('loading: locks min-width to avoid layout shift', async () => {
+    const wrapper = mount(RsButton, {
+      props: { loading: false, variant: 'default' },
+      slots: { default: '测试连接' },
+      attachTo: document.body,
+    })
+    const btn = wrapper.find('button').element as HTMLButtonElement
+    Object.defineProperty(btn, 'offsetWidth', { configurable: true, value: 120 })
+    await wrapper.setProps({ loading: true })
+    await wrapper.vm.$nextTick()
+    expect(btn.style.minWidth).toBe('120px')
+    await wrapper.setProps({ loading: false })
+    await wrapper.vm.$nextTick()
+    expect(btn.style.minWidth).toBe('')
+    wrapper.unmount()
+  })
+})

package/src/__tests__/RsCalendarGrid.spec.ts

@@ -0,0 +1,82 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import RsCalendarGrid from '../components/RsCalendarGrid.vue'
+
+describe('RsCalendarGrid', () => {
+  it('renders month navigation and a 7×6 date grid', () => {
+    const wrapper = mount(RsCalendarGrid, {
+      props: { viewYear: 2025, viewMonth: 6 },
+    })
+    expect(wrapper.find('.rs-calendar-grid__table').exists()).toBe(true)
+    expect(wrapper.findAll('thead th')).toHaveLength(7)
+    expect(wrapper.findAll('.rs-calendar-grid__cell')).toHaveLength(42)
+    expect(wrapper.find('.rs-calendar-grid__title').text()).toContain('2025')
+  })
+
+  it('emits select when a cell is clicked', async () => {
+    const wrapper = mount(RsCalendarGrid, {
+      props: { viewYear: 2025, viewMonth: 6 },
+    })
+    const enabled = wrapper
+      .findAll('.rs-calendar-grid__cell')
+      .find((btn) => !btn.attributes('disabled'))
+    await enabled?.trigger('click')
+    expect(wrapper.emitted('select')?.[0]?.[0]).toMatchObject({
+      year: expect.any(Number),
+      month: expect.any(Number),
+      day: expect.any(Number),
+    })
+  })
+
+  it('marks the selected date with selected class', () => {
+    const wrapper = mount(RsCalendarGrid, {
+      props: {
+        viewYear: 2025,
+        viewMonth: 6,
+        selected: { year: 2025, month: 6, day: 16 },
+      },
+    })
+    expect(wrapper.find('.rs-calendar-grid__cell--selected').exists()).toBe(true)
+  })
+
+  it('shows outside-month cells', () => {
+    const wrapper = mount(RsCalendarGrid, {
+      props: { viewYear: 2025, viewMonth: 6 },
+    })
+    expect(wrapper.findAll('.rs-calendar-grid__cell--outside').length).toBeGreaterThan(0)
+  })
+
+  it('disables dates listed in disabledDates', () => {
+    const wrapper = mount(RsCalendarGrid, {
+      props: {
+        viewYear: 2025,
+        viewMonth: 6,
+        disabledDates: ['2025-06-01', '2025-06-15', '2025-06-30'],
+      },
+    })
+    const disabledCount = wrapper
+      .findAll('.rs-calendar-grid__cell')
+      .filter((btn) => btn.attributes('disabled') !== undefined).length
+    expect(disabledCount).toBeGreaterThanOrEqual(3)
+  })
+
+  it('updates view month via navigation', async () => {
+    const wrapper = mount(RsCalendarGrid, {
+      props: { viewYear: 2025, viewMonth: 6 },
+    })
+    await wrapper.findAll('.rs-calendar-grid__nav')[1].trigger('click')
+    expect(wrapper.emitted('update:viewMonth')?.[0]).toEqual([7])
+  })
+
+  it('highlights range between start and end', () => {
+    const wrapper = mount(RsCalendarGrid, {
+      props: {
+        viewYear: 2025,
+        viewMonth: 6,
+        rangeStart: { year: 2025, month: 6, day: 10 },
+        rangeEnd: { year: 2025, month: 6, day: 12 },
+      },
+    })
+    expect(wrapper.findAll('.rs-calendar-grid__cell--in-range').length).toBeGreaterThan(0)
+  })
+})

package/src/__tests__/RsCard.spec.ts

@@ -0,0 +1,97 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import RsCard from '../components/RsCard.vue'
+
+describe('RsCard', () => {
+  it('renders default slot in body', () => {
+    const wrapper = mount(RsCard, {
+      slots: { default: '<p>正文</p>' },
+    })
+    expect(wrapper.find('.rs-card__body').html()).toContain('正文')
+  })
+
+  it('renders as section by default', () => {
+    const wrapper = mount(RsCard, { slots: { default: '内容' } })
+    expect(wrapper.element.tagName).toBe('SECTION')
+    expect(wrapper.classes()).toContain('rs-card')
+  })
+
+  it('renders custom as element', () => {
+    const wrapper = mount(RsCard, {
+      props: { as: 'article' },
+      slots: { default: '内容' },
+    })
+    expect(wrapper.element.tagName).toBe('ARTICLE')
+  })
+
+  it('renders title and description in header', () => {
+    const wrapper = mount(RsCard, {
+      props: { title: '标题', description: '描述文字' },
+      slots: { default: '正文' },
+    })
+    expect(wrapper.find('.rs-card__title').text()).toBe('标题')
+    expect(wrapper.find('.rs-card__description').text()).toBe('描述文字')
+    expect(wrapper.find('header.rs-card__header').exists()).toBe(true)
+  })
+
+  it('omits header when no title, description, or header slot', () => {
+    const wrapper = mount(RsCard, { slots: { default: '仅正文' } })
+    expect(wrapper.find('header').exists()).toBe(false)
+  })
+
+  it('renders header slot instead of default heading', () => {
+    const wrapper = mount(RsCard, {
+      slots: {
+        header: '<div class="custom-h">自定义</div>',
+        default: '正文',
+      },
+    })
+    expect(wrapper.find('.custom-h').text()).toBe('自定义')
+    expect(wrapper.find('.rs-card__title').exists()).toBe(false)
+  })
+
+  it('renders actions slot in header', () => {
+    const wrapper = mount(RsCard, {
+      props: { title: '卡片' },
+      slots: {
+        actions: '<button type="button">操作</button>',
+        default: '正文',
+      },
+    })
+    expect(wrapper.find('.rs-card__actions button').text()).toBe('操作')
+  })
+
+  it('applies padded body class by default', () => {
+    const wrapper = mount(RsCard, { slots: { default: '内容' } })
+    expect(wrapper.find('.rs-card__body').classes()).toContain('rs-card__body--padded')
+  })
+
+  it('omits padded class when padding is false', () => {
+    const wrapper = mount(RsCard, {
+      props: { padding: false },
+      slots: { default: '内容' },
+    })
+    expect(wrapper.find('.rs-card__body').classes()).not.toContain('rs-card__body--padded')
+  })
+
+  it('applies elevated class when elevated is true', () => {
+    const wrapper = mount(RsCard, {
+      props: { elevated: true },
+      slots: { default: '内容' },
+    })
+    expect(wrapper.classes()).toContain('rs-card--elevated')
+  })
+
+  it('applies variant class', () => {
+    const wrapper = mount(RsCard, {
+      props: { variant: 'plain' },
+      slots: { default: '内容' },
+    })
+    expect(wrapper.classes()).toContain('rs-card--plain')
+  })
+
+  it('defaults to grouped variant', () => {
+    const wrapper = mount(RsCard, { slots: { default: '内容' } })
+    expect(wrapper.classes()).toContain('rs-card--grouped')
+  })
+})

package/src/__tests__/RsCheckbox.spec.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import RsCheckbox from '../components/RsCheckbox.vue'
+
+describe('RsCheckbox', () => {
+  it('toggles model on change', async () => {
+    const wrapper = mount(RsCheckbox, { props: { modelValue: false } })
+    await wrapper.find('input').setValue(true)
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
+    expect(wrapper.emitted('change')?.[0]).toEqual([true])
+  })
+
+  it('applies checked and size classes', async () => {
+    const wrapper = mount(RsCheckbox, {
+      props: { modelValue: true, size: 'sm' },
+    })
+    expect(wrapper.find('.rs-checkbox').classes()).toContain('rs-checkbox--checked')
+    expect(wrapper.find('.rs-checkbox').classes()).toContain('rs-checkbox--sm')
+  })
+
+  it('supports indeterminate visual state', () => {
+    const wrapper = mount(RsCheckbox, {
+      props: { modelValue: false, indeterminate: true },
+    })
+    expect(wrapper.find('.rs-checkbox').classes()).toContain('rs-checkbox--indeterminate')
+    expect(wrapper.find('input').attributes('aria-checked')).toBe('mixed')
+  })
+
+  it('does not emit when disabled', async () => {
+    const wrapper = mount(RsCheckbox, {
+      props: { modelValue: false, disabled: true },
+    })
+    await wrapper.find('input').setValue(true)
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+})

package/src/__tests__/RsCodeEditor.spec.ts

@@ -0,0 +1,111 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import RsCodeEditor from '../components/RsCodeEditor.vue'
+import {
+  resolveCodeEditorLanguage,
+  resolveCodeEditorSize,
+  resolveCodeEditorTheme,
+} from '../components/code-editor-utils'
+
+describe('RsCodeEditor', () => {
+  it('renders CodeMirror surface', async () => {
+    const wrapper = mount(RsCodeEditor, {
+      props: { modelValue: 'hello' },
+      attachTo: document.body,
+    })
+    await new Promise((r) => setTimeout(r, 50))
+    expect(wrapper.find('.rs-code-editor__surface').exists()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('shows resolved language label in toolbar', () => {
+    const wrapper = mount(RsCodeEditor, {
+      props: { language: 'typescript' },
+    })
+    expect(wrapper.find('.rs-code-editor__toolbar').text()).toContain('TypeScript')
+  })
+
+  it('applies theme class', () => {
+    const wrapper = mount(RsCodeEditor, {
+      props: { theme: 'dark' },
+    })
+    expect(wrapper.classes()).toContain('rs-code-editor--dark')
+  })
+
+  it('sets height from number prop', () => {
+    const wrapper = mount(RsCodeEditor, {
+      props: { height: 200 },
+    })
+    expect(wrapper.attributes('style')).toContain('height: 200px')
+  })
+
+  it('supports embedded square chrome without consumer deep styles', () => {
+    const wrapper = mount(RsCodeEditor, {
+      props: {
+        embedded: true,
+        rounded: false,
+        foldGutter: false,
+        gutterWidth: 40,
+        showToolbar: false,
+      },
+    })
+    expect(wrapper.classes()).toContain('rs-code-editor--embedded')
+    expect(wrapper.classes()).toContain('rs-code-editor--square')
+    expect(wrapper.classes()).toContain('rs-code-editor--no-fold')
+    expect(wrapper.classes()).toContain('rs-code-editor--gutter-fixed')
+    expect(wrapper.attributes('style')).toContain('--rs-code-editor-gutter-width: 40px')
+  })
+
+  it('keeps rounded corners by default', () => {
+    const wrapper = mount(RsCodeEditor, {
+      props: { modelValue: 'select 1' },
+    })
+    expect(wrapper.classes()).not.toContain('rs-code-editor--square')
+    expect(wrapper.classes()).not.toContain('rs-code-editor--embedded')
+  })
+
+  it('renders diagnostics with severity classes', () => {
+    const wrapper = mount(RsCodeEditor, {
+      props: {
+        diagnostics: [
+          { message: 'Syntax error', line: 1, column: 3, severity: 'error' },
+          { message: 'Unused var', severity: 'warning' },
+        ],
+      },
+    })
+    const items = wrapper.findAll('.rs-code-editor__diagnostics li')
+    expect(items).toHaveLength(2)
+    expect(items[0].text()).toContain('1:3')
+    expect(items[0].text()).toContain('Syntax error')
+    expect(items[0].classes()).toContain('rs-code-editor__diagnostic--error')
+    expect(items[1].classes()).toContain('rs-code-editor__diagnostic--warning')
+  })
+
+  it('renders toolbar slot', () => {
+    const wrapper = mount(RsCodeEditor, {
+      slots: { toolbar: '<button type="button" class="save-btn">Save</button>' },
+    })
+    expect(wrapper.find('.save-btn').exists()).toBe(true)
+  })
+})
+
+describe('code-editor-utils', () => {
+  it('resolves supported languages', () => {
+    expect(resolveCodeEditorLanguage('json')).toBe('json')
+    expect(resolveCodeEditorLanguage('go')).toBe('go')
+    expect(resolveCodeEditorLanguage('xml')).toBe('xml')
+    expect(resolveCodeEditorLanguage('unknown')).toBe('plaintext')
+  })
+
+  it('resolves theme', () => {
+    document.documentElement.dataset.rsTheme = 'light'
+    expect(resolveCodeEditorTheme('auto')).toBe('light')
+    expect(resolveCodeEditorTheme('dark')).toBe('dark')
+  })
+
+  it('resolves editor height', () => {
+    expect(resolveCodeEditorSize()).toBe('20rem')
+    expect(resolveCodeEditorSize(240)).toBe('240px')
+    expect(resolveCodeEditorSize('16rem')).toBe('16rem')
+  })
+})