niuma-ui 1.0.0

package/src/__tests__/RsConfirmDialog.spec.ts

@@ -0,0 +1,158 @@
+import { defineComponent, h, ref } from 'vue'
+import { describe, expect, it } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import RsConfigProvider from '../components/RsConfigProvider.vue'
+import RsConfirmDialog from '../components/RsConfirmDialog.vue'
+
+describe('RsConfirmDialog', () => {
+  it('renders custom title and description when open', async () => {
+    const wrapper = mount(RsConfirmDialog, {
+      props: {
+        open: true,
+        title: '删除项目？',
+        description: '此操作不可撤销。',
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const content = document.body.querySelector('.rs-confirm-dialog__content')
+    expect(content?.textContent).toContain('删除项目？')
+    expect(content?.textContent).toContain('此操作不可撤销。')
+    wrapper.unmount()
+  })
+
+  it('falls back to zh-CN i18n defaults', async () => {
+    const wrapper = mount(RsConfirmDialog, {
+      props: { open: true },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const content = document.body.querySelector('.rs-confirm-dialog__content')
+    expect(content?.textContent).toContain('确认操作？')
+    expect(content?.textContent).toContain('此操作可能无法撤销')
+    wrapper.unmount()
+  })
+
+  it('uses en-US defaults inside RsConfigProvider', async () => {
+    const Host = defineComponent({
+      components: { RsConfirmDialog, RsConfigProvider },
+      setup() {
+        return () =>
+          h(RsConfigProvider, { locale: 'en-US' }, {
+            default: () => h(RsConfirmDialog, { open: true }),
+          })
+      },
+    })
+    const wrapper = mount(Host, { attachTo: document.body })
+    await flushPromises()
+    const content = document.body.querySelector('.rs-confirm-dialog__content')
+    expect(content?.textContent).toContain('Confirm action?')
+    expect(content?.textContent).toContain('This action may not be reversible')
+    wrapper.unmount()
+  })
+
+  it('applies tone class to icon', async () => {
+    const wrapper = mount(RsConfirmDialog, {
+      props: { open: true, tone: 'warning' },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const icon = document.body.querySelector('.rs-confirm-dialog__icon')
+    expect(icon?.classList.contains('rs-confirm-dialog__icon--warning')).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('hides overlay by default', async () => {
+    const wrapper = mount(RsConfirmDialog, {
+      props: { open: true, title: '无遮罩' },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelector('.rs-confirm-dialog__overlay')).toBeNull()
+    wrapper.unmount()
+  })
+
+  it('shows overlay when showOverlay is true', async () => {
+    const wrapper = mount(RsConfirmDialog, {
+      props: { open: true, title: '有遮罩', showOverlay: true },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelector('.rs-confirm-dialog__overlay')).not.toBeNull()
+    wrapper.unmount()
+  })
+
+  it('enables pointer events on content when open (reka-ui 2.9.10)', async () => {
+    const wrapper = mount(RsConfirmDialog, {
+      props: { open: true, title: '测试' },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const content = document.body.querySelector('.rs-confirm-dialog__content') as HTMLElement | null
+    expect(content?.style.pointerEvents).toBe('auto')
+    wrapper.unmount()
+  })
+
+  it('emits confirm and closes dialog', async () => {
+    const Host = defineComponent({
+      components: { RsConfirmDialog },
+      setup() {
+        const open = ref(true)
+        return { open }
+      },
+      template: `
+        <RsConfirmDialog
+          v-model:open="open"
+          title="保存更改？"
+          @confirm="$emit('confirmed')"
+        />
+      `,
+    })
+    const wrapper = mount(Host, { attachTo: document.body })
+    await flushPromises()
+    const buttons = document.body.querySelectorAll('.rs-confirm-dialog__footer button')
+    const confirmBtn = buttons[buttons.length - 1] as HTMLElement
+    await confirmBtn.click()
+    await flushPromises()
+    expect(wrapper.emitted('confirmed')).toHaveLength(1)
+    expect(wrapper.findComponent(RsConfirmDialog).props('open')).toBe(false)
+    wrapper.unmount()
+  })
+
+  it('emits cancel', async () => {
+    const wrapper = mount(RsConfirmDialog, {
+      props: {
+        open: true,
+        title: '离开页面？',
+        onCancel: () => undefined,
+      },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    const buttons = document.body.querySelectorAll('.rs-confirm-dialog__footer button')
+    const cancelBtn = buttons[0] as HTMLElement
+    await cancelBtn.click()
+    await flushPromises()
+    expect(wrapper.emitted('cancel')).toHaveLength(1)
+    wrapper.unmount()
+  })
+
+  it('mounts portal into custom target via teleportTo', async () => {
+    const target = document.createElement('div')
+    target.id = 'rs-confirm-target'
+    document.body.appendChild(target)
+
+    const wrapper = mount(RsConfirmDialog, {
+      props: {
+        open: true,
+        title: '挂载目标',
+        teleportTo: '#rs-confirm-target',
+      },
+      attachTo: document.body,
+    })
+
+    await flushPromises()
+    expect(target.querySelector('.rs-confirm-dialog__content')).not.toBeNull()
+    wrapper.unmount()
+  })
+})

package/src/__tests__/RsContainer.spec.ts

@@ -0,0 +1,89 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import RsContainer from '../components/RsContainer.vue'
+
+const maxWidths = ['sm', 'md', 'lg', 'xl', 'full'] as const
+const paddings = ['none', 'sm', 'md', 'lg'] as const
+
+describe('RsContainer', () => {
+  it('renders slot content', () => {
+    const wrapper = mount(RsContainer, { slots: { default: '页面内容' } })
+    expect(wrapper.text()).toBe('页面内容')
+  })
+
+  it('renders as div with base class by default', () => {
+    const wrapper = mount(RsContainer)
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('rs-container')
+    expect(wrapper.classes()).toContain('rs-container--centered')
+    expect(wrapper.attributes('style')).toContain('--rs-container-max-current: var(--rs-container-max-lg);')
+    expect(wrapper.attributes('style')).toContain('--rs-container-padding-current: var(--rs-space-md);')
+  })
+
+  it.each(maxWidths)('applies %s max-width class', (maxWidth) => {
+    const wrapper = mount(RsContainer, { props: { maxWidth } })
+    expect(wrapper.attributes('style')).toContain(`--rs-container-max-current: var(--rs-container-max-${maxWidth});`)
+  })
+
+  it.each(paddings)('applies %s padding class', (padding) => {
+    const wrapper = mount(RsContainer, { props: { padding } })
+    const expected = padding === 'none' ? '0' : `var(--rs-space-${padding})`
+    expect(wrapper.attributes('style')).toContain(`--rs-container-padding-current: ${expected};`)
+  })
+
+  it('applies fluid style', () => {
+    const wrapper = mount(RsContainer, { props: { fluid: true } })
+    expect(wrapper.attributes('style')).toContain('--rs-container-max-current: none;')
+  })
+
+  it('omits centered class when centered is false', () => {
+    const wrapper = mount(RsContainer, { props: { centered: false } })
+    expect(wrapper.classes()).not.toContain('rs-container--centered')
+  })
+
+  it('renders custom root tag', () => {
+    const wrapper = mount(RsContainer, { props: { tag: 'section' } })
+    expect(wrapper.element.tagName).toBe('SECTION')
+  })
+
+  it('supports responsive maxWidth and padding', () => {
+    const wrapper = mount(RsContainer, {
+      props: {
+        maxWidth: { sm: 'sm', md: 'md', lg: 'xl' },
+        padding: { sm: 'sm', md: 'md', lg: 'lg' },
+      },
+    })
+    const style = wrapper.attributes('style')
+    expect(style).toContain('--rs-container-max-sm: var(--rs-container-max-sm);')
+    expect(style).toContain('--rs-container-max-md: var(--rs-container-max-md);')
+    expect(style).toContain('--rs-container-max-lg: var(--rs-container-max-xl);')
+    expect(style).toContain('--rs-container-padding-sm: var(--rs-space-sm);')
+    expect(style).toContain('--rs-container-padding-md: var(--rs-space-md);')
+    expect(style).toContain('--rs-container-padding-lg: var(--rs-space-lg);')
+  })
+
+  it('enables grid layout with default columns and gap', () => {
+    const wrapper = mount(RsContainer, { props: { grid: true } })
+    expect(wrapper.classes()).toContain('rs-container--grid')
+    const style = wrapper.attributes('style')
+    expect(style).toContain('--rs-container-columns-current: 12;')
+    expect(style).toContain('--rs-container-gap-current: var(--rs-space-md);')
+  })
+
+  it('supports responsive columns and gap', () => {
+    const wrapper = mount(RsContainer, {
+      props: {
+        grid: true,
+        columns: { sm: 4, md: 8, lg: 12 },
+        gap: { sm: 'xs', md: 'sm', lg: 'lg' },
+      },
+    })
+    const style = wrapper.attributes('style')
+    expect(style).toContain('--rs-container-columns-sm: 4;')
+    expect(style).toContain('--rs-container-columns-md: 8;')
+    expect(style).toContain('--rs-container-columns-lg: 12;')
+    expect(style).toContain('--rs-container-gap-sm: var(--rs-space-xs);')
+    expect(style).toContain('--rs-container-gap-md: var(--rs-space-sm);')
+    expect(style).toContain('--rs-container-gap-lg: var(--rs-space-lg);')
+  })
+})

package/src/__tests__/RsContextMenu.spec.ts

@@ -0,0 +1,118 @@
+import { describe, expect, it } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import RsContextMenu from '../components/RsContextMenu.vue'
+
+describe('RsContextMenu', () => {
+  const items = [
+    { key: 'open', label: '打开', icon: 'folder-open' },
+    { key: 'rename', label: '重命名', icon: 'pen-line' },
+  ]
+
+  it('opens menu on contextmenu', async () => {
+    const wrapper = mount(RsContextMenu, {
+      props: { items },
+      slots: { default: '<div class="trigger">Right click</div>' },
+      attachTo: document.body,
+    })
+    expect(document.body.querySelector('.rs-context-menu__content')).toBeNull()
+    await wrapper.find('.trigger').trigger('contextmenu')
+    await flushPromises()
+    expect(document.body.querySelector('.rs-context-menu__content')).not.toBeNull()
+    wrapper.unmount()
+  })
+
+  it('emits select with item key', async () => {
+    const wrapper = mount(RsContextMenu, {
+      props: { items },
+      slots: { default: '<div class="trigger">Right click</div>' },
+      attachTo: document.body,
+    })
+    await wrapper.find('.trigger').trigger('contextmenu')
+    await flushPromises()
+    const menuItems = document.body.querySelectorAll('.rs-context-menu__item')
+    ;(menuItems[1] as HTMLElement).click()
+    await flushPromises()
+    expect(wrapper.emitted('select')?.[0]).toEqual(['rename'])
+    wrapper.unmount()
+  })
+
+  it('renders separator and danger item', async () => {
+    const wrapper = mount(RsContextMenu, {
+      props: {
+        items: [
+          { key: 'edit', label: '编辑' },
+          { key: 'sep', label: '', separator: true },
+          { key: 'delete', label: '删除', danger: true },
+        ],
+      },
+      slots: { default: '<div class="trigger">Right click</div>' },
+      attachTo: document.body,
+    })
+    await wrapper.find('.trigger').trigger('contextmenu')
+    await flushPromises()
+    expect(document.body.querySelector('.rs-context-menu__separator')).not.toBeNull()
+    const danger = document.body.querySelector('.rs-context-menu__item--danger')
+    expect(danger?.textContent).toContain('删除')
+    wrapper.unmount()
+  })
+
+  it('renders submenu trigger', async () => {
+    const wrapper = mount(RsContextMenu, {
+      props: {
+        items: [
+          {
+            key: 'share',
+            label: '分享',
+            children: [{ key: 'link', label: '复制链接' }],
+          },
+        ],
+      },
+      slots: { default: '<div class="trigger">Right click</div>' },
+      attachTo: document.body,
+    })
+    await wrapper.find('.trigger').trigger('contextmenu')
+    await flushPromises()
+    expect(document.body.textContent).toContain('分享')
+    wrapper.unmount()
+  })
+
+  it('renders deep nested submenu triggers', async () => {
+    const wrapper = mount(RsContextMenu, {
+      props: {
+        items: [
+          {
+            key: 'move',
+            label: '移动到',
+            children: [
+              {
+                key: 'workspace',
+                label: '工作区',
+                children: [
+                  {
+                    key: 'archive',
+                    label: '归档',
+                    children: [{ key: 'y2026', label: '2026' }],
+                  },
+                ],
+              },
+            ],
+          },
+          ...Array.from({ length: 20 }, (_, i) => ({
+            key: `item-${i}`,
+            label: `项 ${i}`,
+          })),
+        ],
+      },
+      slots: { default: '<div class="trigger">Right click</div>' },
+      attachTo: document.body,
+    })
+    await wrapper.find('.trigger').trigger('contextmenu')
+    await flushPromises()
+    const content = document.body.querySelector('.rs-context-menu__content')
+    expect(content).not.toBeNull()
+    expect(content?.classList.contains('rs-native-scrollbar')).toBe(true)
+    expect(document.body.textContent).toContain('移动到')
+    expect(document.body.textContent).toContain('项 19')
+    wrapper.unmount()
+  })
+})

package/src/__tests__/RsDatePicker.spec.ts

@@ -0,0 +1,88 @@
+import { describe, expect, it } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import RsDatePicker from '../components/RsDatePicker.vue'
+
+describe('RsDatePicker', () => {
+  it('renders trigger button with placeholder', () => {
+    const wrapper = mount(RsDatePicker, { props: { modelValue: '' } })
+    expect(wrapper.find('.rs-date-picker__trigger').exists()).toBe(true)
+    expect(wrapper.find('.rs-date-picker__value').text()).toContain('选择日期')
+    expect(wrapper.classes()).toContain('rs-field')
+  })
+
+  it('shows formatted value on trigger when model is set', () => {
+    const wrapper = mount(RsDatePicker, {
+      props: { modelValue: '2025-06-16' },
+    })
+    expect(wrapper.find('.rs-date-picker__trigger--placeholder').exists()).toBe(false)
+    expect(wrapper.find('.rs-date-picker__value').text()).toBe('2025-06-16')
+  })
+
+  it('renders label, hint, and required marker', () => {
+    const wrapper = mount(RsDatePicker, {
+      props: {
+        modelValue: '',
+        label: '生效日期',
+        hint: '请选择日期',
+        required: true,
+      },
+    })
+    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('applies left label layout class', () => {
+    const wrapper = mount(RsDatePicker, {
+      props: { modelValue: '', labelPosition: 'left' },
+    })
+    expect(wrapper.classes()).toContain('rs-field--label-left')
+  })
+
+  it('uses single trigger for range mode', () => {
+    const wrapper = mount(RsDatePicker, {
+      props: { modelValue: { start: '', end: '' }, range: true },
+    })
+    expect(wrapper.findAll('.rs-date-picker__trigger')).toHaveLength(1)
+    expect(wrapper.find('.rs-date-picker__value').text()).toContain('选择日期范围')
+  })
+
+  it('shows range label when range model is set', () => {
+    const wrapper = mount(RsDatePicker, {
+      props: {
+        modelValue: { start: '2025-06-01', end: '2025-06-30' },
+        range: true,
+      },
+    })
+    expect(wrapper.find('.rs-date-picker__value').text()).toContain('2025')
+    expect(wrapper.find('.rs-date-picker__value').text()).toContain('~')
+  })
+
+  it('confirms single selection from popover', async () => {
+    const wrapper = mount(RsDatePicker, {
+      props: { modelValue: '', open: true },
+      attachTo: document.body,
+    })
+    await flushPromises()
+
+    const dayCell = document.body.querySelector('.rs-calendar-grid__cell:not([disabled])') as HTMLElement
+    dayCell?.click()
+    await flushPromises()
+
+    const confirmBtn = Array.from(document.body.querySelectorAll('.rs-date-picker__confirm')).find(
+      (el) => !el.hasAttribute('disabled'),
+    ) as HTMLElement | undefined
+    confirmBtn?.click()
+    await flushPromises()
+
+    expect(wrapper.emitted('update:modelValue')?.length).toBeGreaterThan(0)
+    wrapper.unmount()
+  })
+
+  it('disables trigger when disabled', () => {
+    const wrapper = mount(RsDatePicker, {
+      props: { modelValue: '2025-06-16', disabled: true },
+    })
+    expect(wrapper.find('.rs-date-picker__trigger').attributes('disabled')).toBeDefined()
+  })
+})

package/src/__tests__/RsDateTimePicker.spec.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import RsDateTimePicker from '../components/RsDateTimePicker.vue'
+
+describe('RsDateTimePicker', () => {
+  it('renders popover trigger with datetime placeholder', () => {
+    const wrapper = mount(RsDateTimePicker, { props: { modelValue: '' } })
+    expect(wrapper.find('.rs-date-picker__trigger').exists()).toBe(true)
+    expect(wrapper.find('.rs-date-picker__value').text()).toContain('选择日期时间')
+    expect(wrapper.classes()).toContain('rs-field')
+  })
+
+  it('shows formatted datetime on trigger when model is set', () => {
+    const wrapper = mount(RsDateTimePicker, {
+      props: { modelValue: '2025-06-16 14:30:00' },
+    })
+    expect(wrapper.find('.rs-date-picker__trigger--placeholder').exists()).toBe(false)
+    expect(wrapper.find('.rs-date-picker__value').text()).toBe('2025-06-16 14:30:00')
+  })
+
+  it('renders label, hint, and required marker', () => {
+    const wrapper = mount(RsDateTimePicker, {
+      props: {
+        modelValue: '',
+        label: '截止时间',
+        hint: '请选择日期时间',
+        required: true,
+      },
+    })
+    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('applies left label layout class', () => {
+    const wrapper = mount(RsDateTimePicker, {
+      props: { modelValue: '', labelPosition: 'left' },
+    })
+    expect(wrapper.classes()).toContain('rs-field--label-left')
+  })
+
+  it('uses single trigger for range mode', () => {
+    const wrapper = mount(RsDateTimePicker, {
+      props: { modelValue: { start: '', end: '' }, range: true },
+    })
+    expect(wrapper.findAll('.rs-date-picker__trigger')).toHaveLength(1)
+    expect(wrapper.find('.rs-date-picker__value').text()).toContain('选择日期时间范围')
+  })
+
+  it('opens panel with calendar and embedded time picker', async () => {
+    const wrapper = mount(RsDateTimePicker, {
+      props: { modelValue: '', open: true },
+      attachTo: document.body,
+    })
+    await flushPromises()
+    expect(document.body.querySelector('.rs-date-picker__content')).not.toBeNull()
+    expect(document.body.querySelector('.rs-date-picker__time-row')).not.toBeNull()
+    expect(document.body.querySelector('.rs-time-picker__trigger--embedded')).not.toBeNull()
+    expect(document.body.querySelector('.rs-time-columns')).toBeNull()
+    wrapper.unmount()
+  })
+
+  it('disables trigger when disabled', () => {
+    const wrapper = mount(RsDateTimePicker, {
+      props: { modelValue: '2025-06-16 14:30:00', disabled: true },
+    })
+    expect(wrapper.find('.rs-date-picker__trigger').attributes('disabled')).toBeDefined()
+  })
+})