niuma-ui 1.1.12 → 1.2.1

package/src/__tests__/RsCard.spec.ts

@@ -1,256 +0,0 @@
-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, header, or actions slot', () => {
-    const wrapper = mount(RsCard, { slots: { default: '仅正文' } })
-    expect(wrapper.find('header').exists()).toBe(false)
-  })
-
-  it('renders header when only actions slot is provided', () => {
-    const wrapper = mount(RsCard, {
-      slots: {
-        actions: '<button type="button">操作</button>',
-        default: '正文',
-      },
-    })
-    expect(wrapper.find('header.rs-card__header').exists()).toBe(true)
-    expect(wrapper.find('.rs-card__actions button').text()).toBe('操作')
-  })
-
-  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('renders cover slot before header', () => {
-    const wrapper = mount(RsCard, {
-      props: { title: '封面卡' },
-      slots: {
-        cover: '<div class="cover-el">封面</div>',
-        default: '正文',
-      },
-    })
-    const cover = wrapper.find('.rs-card__cover')
-    expect(cover.exists()).toBe(true)
-    expect(cover.text()).toBe('封面')
-    const rootHtml = wrapper.html()
-    expect(rootHtml.indexOf('rs-card__cover')).toBeLessThan(rootHtml.indexOf('rs-card__header'))
-  })
-
-  it('renders footer slot', () => {
-    const wrapper = mount(RsCard, {
-      props: { title: '带底部' },
-      slots: {
-        default: '正文',
-        footer: '<button type="button">保存</button>',
-      },
-    })
-    expect(wrapper.find('footer.rs-card__footer button').text()).toBe('保存')
-  })
-
-  it('omits footer when footer slot is absent', () => {
-    const wrapper = mount(RsCard, {
-      props: { title: '无底部' },
-      slots: { default: '正文' },
-    })
-    expect(wrapper.find('footer').exists()).toBe(false)
-  })
-
-  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 hoverable class', () => {
-    const wrapper = mount(RsCard, {
-      props: { hoverable: true },
-      slots: { default: '内容' },
-    })
-    expect(wrapper.classes()).toContain('rs-card--hoverable')
-  })
-
-  it('applies clip class for overflow hidden', () => {
-    const wrapper = mount(RsCard, {
-      props: { clip: true },
-      slots: { default: '内容' },
-    })
-    expect(wrapper.classes()).toContain('rs-card--clip')
-  })
-
-  it('applies fill class for pane layouts', () => {
-    const wrapper = mount(RsCard, {
-      props: { fill: true },
-      slots: { default: '内容' },
-    })
-    expect(wrapper.classes()).toContain('rs-card--fill')
-  })
-
-  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')
-  })
-
-  it('defaults to md size', () => {
-    const wrapper = mount(RsCard, { slots: { default: '内容' } })
-    expect(wrapper.classes()).toContain('rs-card--md')
-  })
-
-  it.each(['sm', 'md', 'lg'] as const)('applies size=%s class', (size) => {
-    const wrapper = mount(RsCard, {
-      props: { size },
-      slots: { default: '内容' },
-    })
-    expect(wrapper.classes()).toContain(`rs-card--${size}`)
-  })
-
-  it('defaults radius css var to md token', () => {
-    const wrapper = mount(RsCard, { slots: { default: '内容' } })
-    const style = wrapper.attributes('style') ?? ''
-    expect(style).toContain('--rs-card-radius')
-    expect(style).toMatch(/var\(--rs-radius\)|--rs-radius[^-]/)
-  })
-
-  it('applies explicit radius css var', () => {
-    const wrapper = mount(RsCard, {
-      props: { radius: 'lg' },
-      slots: { default: '内容' },
-    })
-    expect(wrapper.attributes('style')).toContain('var(--rs-radius-lg)')
-  })
-
-  it('applies none radius as 0', () => {
-    const wrapper = mount(RsCard, {
-      props: { radius: 'none' },
-      slots: { default: '内容' },
-    })
-    expect(wrapper.attributes('style')).toMatch(/--rs-card-radius:\s*0/)
-  })
-
-  it('applies borderless class when borderless is true', () => {
-    const wrapper = mount(RsCard, {
-      props: { borderless: true },
-      slots: { default: '内容' },
-    })
-    expect(wrapper.classes()).toContain('rs-card--borderless')
-  })
-
-  it('supports admin outlined preset combination', () => {
-    const wrapper = mount(RsCard, {
-      props: {
-        variant: 'outlined',
-        size: 'md',
-        radius: 'md',
-        title: '节点列表',
-      },
-      slots: { default: '表格' },
-    })
-    expect(wrapper.classes()).toEqual(
-      expect.arrayContaining(['rs-card--outlined', 'rs-card--md']),
-    )
-    expect(wrapper.find('.rs-card__title').text()).toBe('节点列表')
-  })
-
-  it('supports frontend marketing preset combination', () => {
-    const wrapper = mount(RsCard, {
-      props: {
-        variant: 'filled',
-        size: 'lg',
-        radius: 'lg',
-        elevated: true,
-        hoverable: true,
-        clip: true,
-        title: '产品亮点',
-      },
-      slots: {
-        cover: '<img alt="" src="about:blank" />',
-        default: '介绍',
-        footer: '<button type="button">了解更多</button>',
-      },
-    })
-    expect(wrapper.classes()).toEqual(
-      expect.arrayContaining([
-        'rs-card--filled',
-        'rs-card--lg',
-        'rs-card--elevated',
-        'rs-card--hoverable',
-        'rs-card--clip',
-      ]),
-    )
-    expect(wrapper.find('.rs-card__cover img').exists()).toBe(true)
-    expect(wrapper.find('.rs-card__footer').exists()).toBe(true)
-  })
-})

package/src/__tests__/RsCheckbox.spec.ts

@@ -1,36 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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')
-  })
-})

package/src/__tests__/RsConfirmDialog.spec.ts

@@ -1,285 +0,0 @@
-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('renders subtitle and description separately', async () => {
-    const wrapper = mount(RsConfirmDialog, {
-      props: {
-        open: true,
-        title: '确认删除',
-        subtitle: '此操作不可恢复',
-        description: '确定删除该用户吗？',
-      },
-      attachTo: document.body,
-    })
-    await flushPromises()
-    const content = document.body.querySelector('.rs-confirm-dialog__content')
-    expect(content?.querySelector('.rs-confirm-dialog__subtitle')?.textContent).toContain(
-      '此操作不可恢复',
-    )
-    expect(content?.querySelector('.rs-confirm-dialog__description')?.textContent).toContain(
-      '确定删除该用户吗？',
-    )
-    wrapper.unmount()
-  })
-
-  it('applies custom width as max-width', async () => {
-    const wrapper = mount(RsConfirmDialog, {
-      props: { open: true, title: '宽', width: 500 },
-      attachTo: document.body,
-    })
-    await flushPromises()
-    const content = document.body.querySelector('.rs-confirm-dialog__content') as HTMLElement
-    expect(content.style.maxWidth).toBe('500px')
-    wrapper.unmount()
-  })
-
-  it('applies preset width class', async () => {
-    const wrapper = mount(RsConfirmDialog, {
-      props: { open: true, title: 'md', width: 'md' },
-      attachTo: document.body,
-    })
-    await flushPromises()
-    const content = document.body.querySelector('.rs-confirm-dialog__content')
-    expect(content?.classList.contains('rs-confirm-dialog__content--md')).toBe(true)
-    wrapper.unmount()
-  })
-
-  it('keeps open when autoCloseOnConfirm is false', async () => {
-    const Host = defineComponent({
-      components: { RsConfirmDialog },
-      setup() {
-        const open = ref(true)
-        return { open }
-      },
-      template: `
-        <RsConfirmDialog
-          v-model:open="open"
-          title="异步确认"
-          :auto-close-on-confirm="false"
-          @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(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()
-  })
-
-  it('hides cancel button when showCancel is false', async () => {
-    const wrapper = mount(RsConfirmDialog, {
-      props: {
-        open: true,
-        title: '单按钮提示',
-        showCancel: false,
-        confirmText: '知道了',
-      },
-      attachTo: document.body,
-    })
-    await flushPromises()
-    const buttons = document.body.querySelectorAll('.rs-confirm-dialog__footer button')
-    expect(buttons).toHaveLength(1)
-    expect(buttons[0]?.textContent).toContain('知道了')
-    wrapper.unmount()
-  })
-
-  it('renders #extra slot between description and footer', async () => {
-    const wrapper = mount(RsConfirmDialog, {
-      props: { open: true, title: '额外内容', description: '正文' },
-      slots: {
-        extra: () => h('div', { class: 'extra-probe' }, 'extra-body'),
-      },
-      attachTo: document.body,
-    })
-    await flushPromises()
-    const extra = document.body.querySelector('.rs-confirm-dialog__extra .extra-probe')
-    expect(extra?.textContent).toContain('extra-body')
-    wrapper.unmount()
-  })
-
-  it('blocks close when beforeClose returns false', async () => {
-    const Host = defineComponent({
-      components: { RsConfirmDialog },
-      setup() {
-        const open = ref(true)
-        return { open }
-      },
-      template: `
-        <RsConfirmDialog
-          v-model:open="open"
-          title="拦截"
-          :before-close="() => false"
-        />
-      `,
-    })
-    const wrapper = mount(Host, { attachTo: document.body })
-    await flushPromises()
-    const cancelBtn = document.body.querySelector(
-      '.rs-confirm-dialog__footer button',
-    ) as HTMLElement
-    await cancelBtn.click()
-    await flushPromises()
-    expect(wrapper.findComponent(RsConfirmDialog).props('open')).toBe(true)
-    wrapper.unmount()
-  })
-})