niuma-ui 1.0.0

package/src/__tests__/RsMarkdown.spec.ts

@@ -0,0 +1,143 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import RsMarkdown from '../components/RsMarkdown.vue'
+import {
+  escapeHtml,
+  isSafeHref,
+  isSafeImageSrc,
+  renderMarkdown,
+  resolveMarkdownHeight,
+  resolveMarkdownMode,
+} from '../components/markdown-utils'
+
+describe('markdown-utils', () => {
+  it('escapes HTML special characters', () => {
+    expect(escapeHtml(`<a href="x">'"&`)).toBe('&lt;a href=&quot;x&quot;&gt;&#39;&quot;&amp;')
+  })
+
+  it('allows safe href / image protocols', () => {
+    expect(isSafeHref('https://example.com')).toBe(true)
+    expect(isSafeHref('/docs')).toBe(true)
+    expect(isSafeHref('#section')).toBe(true)
+    expect(isSafeHref('mailto:a@b.com')).toBe(true)
+    expect(isSafeHref('javascript:alert(1)')).toBe(false)
+    expect(isSafeImageSrc('https://cdn.example.com/a.png')).toBe(true)
+    expect(isSafeImageSrc('data:image/png;base64,xx')).toBe(true)
+    expect(isSafeImageSrc('javascript:alert(1)')).toBe(false)
+  })
+
+  it('renders GFM headings, lists and code safely', () => {
+    const html = renderMarkdown('# Hello\n\n- item\n\n```js\nconst a = 1\n```')
+    expect(html).toContain('<h1')
+    expect(html).toContain('<li>')
+    expect(html).toContain('rs-markdown__codeblock')
+    expect(html).toContain('const a = 1')
+    expect(html).not.toContain('<script')
+  })
+
+  it('strips javascript links and keeps link text', () => {
+    const html = renderMarkdown('[x](javascript:alert(1))')
+    expect(html).toContain('x')
+    expect(html).not.toContain('javascript:')
+  })
+
+  it('opens http links in a new tab with noopener', () => {
+    const html = renderMarkdown('[docs](https://example.com)')
+    expect(html).toContain('href="https://example.com"')
+    expect(html).toContain('target="_blank"')
+    expect(html).toContain('rel="noopener noreferrer"')
+  })
+
+  it('sanitizes raw HTML injection', () => {
+    const html = renderMarkdown('Hello <img src=x onerror=alert(1)>')
+    expect(html.toLowerCase()).not.toContain('onerror')
+  })
+
+  it('resolves height and readonly mode', () => {
+    expect(resolveMarkdownHeight()).toBe('16rem')
+    expect(resolveMarkdownHeight(240)).toBe('240px')
+    expect(resolveMarkdownHeight('12rem')).toBe('12rem')
+    expect(resolveMarkdownMode('edit', true)).toBe('preview')
+    expect(resolveMarkdownMode('split', false)).toBe('split')
+    expect(resolveMarkdownMode(undefined, false)).toBe('edit')
+  })
+})
+
+describe('RsMarkdown', () => {
+  it('renders mode toggle and editor by default', async () => {
+    const wrapper = mount(RsMarkdown, {
+      props: { modelValue: '# hi', height: 200 },
+      attachTo: document.body,
+    })
+    await new Promise((r) => setTimeout(r, 50))
+    expect(wrapper.find('.rs-markdown__toolbar').exists()).toBe(true)
+    expect(wrapper.find('.rs-markdown__editor').exists()).toBe(true)
+    expect(wrapper.classes()).toContain('rs-markdown--edit')
+    wrapper.unmount()
+  })
+
+  it('switches to preview and renders HTML', async () => {
+    const wrapper = mount(RsMarkdown, {
+      props: {
+        modelValue: '## Title\n\nHello',
+        mode: 'preview',
+        height: 180,
+      },
+    })
+    expect(wrapper.classes()).toContain('rs-markdown--preview')
+    expect(wrapper.find('.rs-markdown__prose').html()).toContain('<h2')
+    expect(wrapper.find('.rs-markdown__prose').text()).toContain('Hello')
+  })
+
+  it('supports split mode with editor and preview', async () => {
+    const wrapper = mount(RsMarkdown, {
+      props: {
+        modelValue: '**bold**',
+        mode: 'split',
+        height: 220,
+      },
+      attachTo: document.body,
+    })
+    await new Promise((r) => setTimeout(r, 50))
+    expect(wrapper.classes()).toContain('rs-markdown--split')
+    expect(wrapper.find('.rs-markdown__editor').exists()).toBe(true)
+    expect(wrapper.find('.rs-markdown__preview').exists()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('forces preview and hides toggle when readonly', () => {
+    const wrapper = mount(RsMarkdown, {
+      props: {
+        modelValue: 'note',
+        mode: 'edit',
+        readonly: true,
+      },
+    })
+    expect(wrapper.classes()).toContain('rs-markdown--preview')
+    expect(wrapper.find('.rs-markdown__toolbar').exists()).toBe(false)
+    expect(wrapper.find('.rs-markdown__editor').exists()).toBe(false)
+  })
+
+  it('shows empty state when preview has no content', () => {
+    const wrapper = mount(RsMarkdown, {
+      props: {
+        modelValue: '   ',
+        mode: 'preview',
+      },
+    })
+    expect(wrapper.find('.rs-markdown__empty').exists()).toBe(true)
+  })
+
+  it('emits mode updates from toolbar', async () => {
+    const wrapper = mount(RsMarkdown, {
+      props: {
+        modelValue: 'x',
+        mode: 'edit',
+      },
+    })
+    const buttons = wrapper.findAll('.rs-markdown__toolbar button')
+    expect(buttons.length).toBeGreaterThanOrEqual(2)
+    await buttons[1]!.trigger('click')
+    expect(wrapper.emitted('update:mode')?.[0]).toEqual(['preview'])
+  })
+})

package/src/__tests__/RsMenu.spec.ts

@@ -0,0 +1,119 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import RsMenu from '../components/RsMenu.vue'
+import RsConfigProvider from '../components/RsConfigProvider.vue'
+import type { RsMenuItemGroup } from '../components/menu-utils'
+
+describe('RsMenu', () => {
+  const flatItems = [
+    { key: 'dashboard', label: '仪表盘', icon: 'layout-dashboard' as const },
+    { key: 'chat', label: '对话', icon: 'message-square' as const },
+    { key: 'settings', label: '设置', icon: 'settings' as const },
+  ]
+
+  const groupedItems: RsMenuItemGroup[] = [
+    {
+      label: '工作区',
+      children: [
+        { key: 'projects', label: '项目', icon: 'folder' as const },
+        { key: 'docs', label: '文档', icon: 'search' as const },
+      ],
+    },
+    {
+      label: '系统',
+      children: [{ key: 'settings', label: '设置', icon: 'settings' as const }],
+    },
+  ]
+
+  const nestedItems = [
+    {
+      key: 'workspace',
+      label: '工作区',
+      icon: 'folder' as const,
+      children: [
+        { key: 'projects', label: '项目' },
+        { key: 'archived', label: '归档', disabled: true },
+      ],
+    },
+    { key: 'settings', label: '设置', icon: 'settings' as const },
+  ]
+
+  it('renders nav with menu aria-label', () => {
+    const wrapper = mount(RsMenu, {
+      props: { items: flatItems, modelValue: 'dashboard' },
+    })
+    expect(wrapper.find('nav.rs-menu').attributes('aria-label')).toBe('导航菜单')
+  })
+
+  it('uses en-US aria-label when locale is en-US', () => {
+    const wrapper = mount(RsConfigProvider, {
+      props: { locale: 'en-US' },
+      slots: {
+        default: () =>
+          h(RsMenu, {
+            items: flatItems,
+            modelValue: 'dashboard',
+          }),
+      },
+    })
+    expect(wrapper.find('nav.rs-menu').attributes('aria-label')).toBe('Navigation menu')
+  })
+
+  it('emits select and updates model when item clicked', async () => {
+    const wrapper = mount(RsMenu, {
+      props: { items: flatItems, modelValue: 'dashboard' },
+    })
+    const buttons = wrapper.findAll('.rs-menu__item')
+    const targetButton = buttons[1]
+    expect(targetButton).toBeDefined()
+    if (!targetButton) return
+    await targetButton.trigger('click')
+    expect(wrapper.emitted('update:modelValue')?.pop()).toEqual(['chat'])
+    expect(wrapper.emitted('select')?.[0]).toEqual(['chat'])
+  })
+
+  it('renders group labels', () => {
+    const wrapper = mount(RsMenu, {
+      props: { items: groupedItems, modelValue: 'projects' },
+    })
+    expect(wrapper.find('.rs-menu__group-label').text()).toBe('工作区')
+  })
+
+  it('auto-expands parent submenu for active nested item', () => {
+    const wrapper = mount(RsMenu, {
+      props: {
+        items: nestedItems,
+        modelValue: 'projects',
+        openKeys: [],
+      },
+    })
+    expect(wrapper.emitted('update:openKeys')?.pop()?.[0]).toContain('workspace')
+  })
+
+  it('does not emit select for disabled item', async () => {
+    const wrapper = mount(RsMenu, {
+      props: {
+        items: nestedItems,
+        modelValue: 'projects',
+        openKeys: ['workspace'],
+      },
+    })
+    const disabled = wrapper.find('.rs-menu__item:disabled')
+    expect(disabled.exists()).toBe(true)
+    await disabled.trigger('click')
+    expect(wrapper.emitted('select')).toBeUndefined()
+  })
+
+  it('does not render nested submenu list when collapsed', () => {
+    const wrapper = mount(RsMenu, {
+      props: {
+        items: nestedItems,
+        modelValue: 'settings',
+        openKeys: ['workspace'],
+        collapsed: true,
+      },
+    })
+    expect(wrapper.find('.rs-menu__list--nested').exists()).toBe(false)
+  })
+})

package/src/__tests__/RsNewComponents.spec.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest'
+import { getPaginationRange, slicePageData } from '../components/pagination-utils'
+import { formatFileSize, validateUploadFiles } from '../components/upload-utils'
+
+describe('new Rs UI utilities', () => {
+  it('creates compact pagination ranges', () => {
+    expect(getPaginationRange(5, 10)).toEqual([1, 'ellipsis', 4, 5, 6, 'ellipsis', 10])
+    expect(slicePageData([1, 2, 3, 4], 2, 2)).toEqual([3, 4])
+  })
+
+  it('validates uploads', () => {
+    const file = new File(['hello'], 'hello.txt', { type: 'text/plain' })
+    const result = validateUploadFiles([file], { accept: '.txt', maxSize: 100 })
+    expect(result.accepted).toHaveLength(1)
+    expect(formatFileSize(1024)).toBe('1.0 KB')
+  })
+})

package/src/__tests__/RsPagination.spec.ts

@@ -0,0 +1,158 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import RsPagination from '../components/RsPagination.vue'
+import RsConfigProvider from '../components/RsConfigProvider.vue'
+import RsSelect from '../components/RsSelect.vue'
+
+describe('RsPagination', () => {
+  it('renders nav with pagination aria-label', () => {
+    const wrapper = mount(RsPagination, {
+      props: { total: 100, page: 1, pageSize: 10 },
+    })
+    expect(wrapper.find('nav.rs-pagination').attributes('aria-label')).toBe('分页')
+  })
+
+  it('uses en-US aria-label when locale is en-US', () => {
+    const wrapper = mount(RsConfigProvider, {
+      props: { locale: 'en-US' },
+      slots: {
+        default: () =>
+          h(RsPagination, {
+            total: 100,
+            page: 1,
+            pageSize: 10,
+          }),
+      },
+    })
+    expect(wrapper.find('nav.rs-pagination').attributes('aria-label')).toBe('Pagination')
+  })
+
+  it('renders summary text with total', () => {
+    const wrapper = mount(RsPagination, {
+      props: { total: 86, page: 1, pageSize: 20 },
+    })
+    expect(wrapper.find('.rs-pagination__summary').text()).toBe('共 86 条')
+  })
+
+  it('hides summary when showSummary is false', () => {
+    const wrapper = mount(RsPagination, {
+      props: { total: 86, page: 1, showSummary: false },
+    })
+    expect(wrapper.find('.rs-pagination__summary').exists()).toBe(false)
+  })
+
+  it('emits update:page when next is clicked', async () => {
+    const wrapper = mount(RsPagination, {
+      props: { total: 100, page: 1, pageSize: 10 },
+    })
+    const buttons = wrapper.findAll('button')
+    await buttons.at(-1)?.trigger('click')
+    expect(wrapper.emitted('update:page')?.[0]).toEqual([2])
+  })
+
+  it('emits update:page when a page number is clicked', async () => {
+    const wrapper = mount(RsPagination, {
+      props: { total: 50, page: 1, pageSize: 10 },
+    })
+    const pageButton = wrapper.findAll('button').find((btn) => btn.text() === '3')
+    expect(pageButton).toBeDefined()
+    await pageButton?.trigger('click')
+    expect(wrapper.emitted('update:page')?.pop()).toEqual([3])
+  })
+
+  it('disables prev on first page', () => {
+    const wrapper = mount(RsPagination, {
+      props: { total: 100, page: 1, pageSize: 10 },
+    })
+    expect(wrapper.findAll('button')[0].attributes('disabled')).toBeDefined()
+  })
+
+  it('disables next on last page', () => {
+    const wrapper = mount(RsPagination, {
+      props: { total: 100, page: 10, pageSize: 10 },
+    })
+    const buttons = wrapper.findAll('button')
+    expect(buttons.at(-1)?.attributes('disabled')).toBeDefined()
+  })
+
+  it('renders ellipsis for large page counts', () => {
+    const wrapper = mount(RsPagination, {
+      props: { total: 500, page: 12, pageSize: 20 },
+    })
+    expect(wrapper.find('.rs-pagination__ellipsis').exists()).toBe(true)
+  })
+
+  it('renders RsSelect for page size when showPageSize is true', () => {
+    const wrapper = mount(RsPagination, {
+      props: { total: 100, page: 1, pageSize: 20, showPageSize: true },
+    })
+    expect(wrapper.find('.rs-pagination__size .rs-select').exists()).toBe(true)
+  })
+
+  it('emits update:pageSize when page size changes', async () => {
+    const wrapper = mount(RsPagination, {
+      props: { total: 100, page: 1, pageSize: 20, showPageSize: true },
+    })
+    await wrapper.findComponent(RsSelect).setValue('50')
+    expect(wrapper.emitted('update:pageSize')?.pop()).toEqual([50])
+  })
+
+  it('clamps page when page size increases', async () => {
+    const wrapper = mount(RsPagination, {
+      props: { total: 100, page: 5, pageSize: 10, showPageSize: true },
+    })
+    await wrapper.findComponent(RsSelect).setValue('50')
+    expect(wrapper.emitted('update:page')?.pop()).toEqual([2])
+  })
+
+  it('does not emit update:page when disabled', async () => {
+    const wrapper = mount(RsPagination, {
+      props: { total: 100, page: 1, pageSize: 10, disabled: true },
+    })
+    await wrapper.findAll('button').at(-1)?.trigger('click')
+    expect(wrapper.emitted('update:page')).toBeUndefined()
+  })
+
+  it('renders quick jumper when showQuickJumper is true', () => {
+    const wrapper = mount(RsPagination, {
+      props: { total: 100, page: 1, pageSize: 10, showQuickJumper: true },
+    })
+    expect(wrapper.find('.rs-pagination__jumper').exists()).toBe(true)
+    expect(wrapper.find('.rs-pagination__jumper-input input').exists()).toBe(true)
+  })
+
+  it('hides quick jumper when only one page exists', () => {
+    const wrapper = mount(RsPagination, {
+      props: { total: 8, page: 1, pageSize: 10, showQuickJumper: true },
+    })
+    expect(wrapper.find('.rs-pagination__jumper').exists()).toBe(false)
+  })
+
+  it('jumps to page when confirm is clicked', async () => {
+    const wrapper = mount(RsPagination, {
+      props: { total: 100, page: 1, pageSize: 10, showQuickJumper: true },
+    })
+    const input = wrapper.find('.rs-pagination__jumper-input input')
+    await input.setValue('7')
+    const jumperBtn = wrapper
+      .findAll('button')
+      .find((btn) => btn.text() === '确定')
+    expect(jumperBtn).toBeDefined()
+    await jumperBtn?.trigger('click')
+    expect(wrapper.emitted('update:page')?.pop()).toEqual([7])
+  })
+
+  it('clamps jump target to valid page range', async () => {
+    const wrapper = mount(RsPagination, {
+      props: { total: 100, page: 1, pageSize: 10, showQuickJumper: true },
+    })
+    const input = wrapper.find('.rs-pagination__jumper-input input')
+    await input.setValue('99')
+    const jumperBtn = wrapper
+      .findAll('button')
+      .find((btn) => btn.text() === '确定')
+    await jumperBtn?.trigger('click')
+    expect(wrapper.emitted('update:page')?.pop()).toEqual([10])
+  })
+})

package/src/__tests__/RsPopover.spec.ts

@@ -0,0 +1,126 @@
+import { describe, expect, it } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import RsPopover from '../components/RsPopover.vue'
+
+describe('RsPopover', () => {
+  it('opens content on trigger click', async () => {
+    const wrapper = mount(RsPopover, {
+      slots: {
+        default: '<button type="button" class="trigger">Open</button>',
+        content: '<p class="panel">Popover body</p>',
+      },
+      attachTo: document.body,
+    })
+    expect(document.body.querySelector('.rs-popover__content')).toBeNull()
+    await wrapper.find('.trigger').trigger('click')
+    await flushPromises()
+    expect(document.body.querySelector('.rs-popover__content')).not.toBeNull()
+    expect(document.body.textContent).toContain('Popover body')
+    wrapper.unmount()
+  })
+
+  it('supports v-model:open', async () => {
+    const wrapper = mount(RsPopover, {
+      props: { open: true },
+      slots: {
+        default: '<button type="button" class="trigger">Open</button>',
+        content: '<p class="panel">Controlled</p>',
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelector('.rs-popover__content')).not.toBeNull()
+    await wrapper.setProps({ open: false })
+    await flushPromises()
+    expect(document.body.querySelector('.rs-popover__content')).toBeNull()
+    wrapper.unmount()
+  })
+
+  it('applies width modifier class', async () => {
+    const wrapper = mount(RsPopover, {
+      props: { open: true, width: 'lg' },
+      slots: {
+        default: '<button type="button" class="trigger">Open</button>',
+        content: '<p>Wide panel</p>',
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelector('.rs-popover__content--lg')).not.toBeNull()
+    wrapper.unmount()
+  })
+
+  it('lazy-mounts content when closed by default', async () => {
+    const wrapper = mount(RsPopover, {
+      slots: {
+        default: '<button type="button" class="trigger">Open</button>',
+        content: '<p class="marker">Lazy content</p>',
+      },
+      attachTo: document.body,
+    })
+    expect(document.body.querySelector('.marker')).toBeNull()
+    wrapper.unmount()
+  })
+
+  it('unmounts content after close with default lazyMount', async () => {
+    const wrapper = mount(RsPopover, {
+      slots: {
+        default: '<button type="button" class="trigger">Open</button>',
+        content: '<p class="marker">Toggle content</p>',
+      },
+      attachTo: document.body,
+    })
+    await wrapper.find('.trigger').trigger('click')
+    await flushPromises()
+    expect(document.body.querySelector('.marker')).not.toBeNull()
+    await wrapper.find('.trigger').trigger('click')
+    await flushPromises()
+    expect(document.body.querySelector('.marker')).toBeNull()
+    wrapper.unmount()
+  })
+
+  it('keeps content mounted when lazyMount is false and closed', async () => {
+    const wrapper = mount(RsPopover, {
+      props: { lazyMount: false },
+      slots: {
+        default: '<button type="button" class="trigger">Open</button>',
+        content: '<p class="marker">Eager content</p>',
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelector('.marker')).not.toBeNull()
+    wrapper.unmount()
+  })
+
+  it('keeps content mounted when forceMount is true and closed', async () => {
+    const wrapper = mount(RsPopover, {
+      props: { forceMount: true },
+      slots: {
+        default: '<button type="button" class="trigger">Open</button>',
+        content: '<p class="marker">Forced content</p>',
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelector('.marker')).not.toBeNull()
+    wrapper.unmount()
+  })
+
+  it('retains eager content in DOM after close when lazyMount is false', async () => {
+    const wrapper = mount(RsPopover, {
+      props: { lazyMount: false, open: true },
+      slots: {
+        default: '<button type="button" class="trigger">Open</button>',
+        content: '<p class="marker">Persistent content</p>',
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelector('.marker')).not.toBeNull()
+    await wrapper.setProps({ open: false })
+    await flushPromises()
+    expect(document.body.querySelector('.marker')).not.toBeNull()
+    wrapper.unmount()
+  })
+})

package/src/__tests__/RsScrollbar.spec.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import RsScrollbar from '../components/RsScrollbar.vue'
+import { ScrollAreaRoot, ScrollAreaScrollbar } from '../components/reka'
+
+describe('RsScrollbar', () => {
+  it('renders slot content', () => {
+    const wrapper = mount(RsScrollbar, {
+      slots: {
+        default: '<div class="slot-content">滚动内容</div>',
+      },
+    })
+
+    expect(wrapper.find('.slot-content').exists()).toBe(true)
+    expect(wrapper.find('.rs-scrollbar').exists()).toBe(true)
+  })
+
+  it('applies root sizing props', () => {
+    const wrapper = mount(RsScrollbar, {
+      props: {
+        height: '10rem',
+        maxHeight: '16rem',
+        minHeight: '6rem',
+      },
+    })
+
+    const style = wrapper.get('.rs-scrollbar').attributes('style')
+    expect(style).toContain('height: 10rem;')
+    expect(style).toContain('max-height: 16rem;')
+    expect(style).toContain('min-height: 6rem;')
+  })
+
+  it('renders only vertical bar when orientation is vertical', () => {
+    const wrapper = mount(RsScrollbar, {
+      props: { orientation: 'vertical' },
+    })
+    const bars = wrapper.findAllComponents(ScrollAreaScrollbar)
+    expect(bars).toHaveLength(1)
+    expect(bars[0]?.props('orientation')).toBe('vertical')
+  })
+
+  it('forwards scroll behavior props to ScrollAreaRoot', () => {
+    const wrapper = mount(RsScrollbar, {
+      props: {
+        type: 'always',
+        scrollHideDelay: 400,
+      },
+    })
+    const root = wrapper.getComponent(ScrollAreaRoot)
+    expect(root.props('type')).toBe('always')
+    expect(root.props('scrollHideDelay')).toBe(400)
+  })
+})