niuma-ui 1.1.12 → 1.2.1

package/src/__tests__/RsDrawer.spec.ts

@@ -1,292 +0,0 @@
-import { defineComponent, h, ref } from 'vue'
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { flushPromises, mount } from '@vue/test-utils'
-import RsConfigProvider from '../components/RsConfigProvider.vue'
-import RsDrawer from '../components/RsDrawer.vue'
-
-describe('RsDrawer', () => {
-  afterEach(() => {
-    document.body.innerHTML = ''
-  })
-
-  it('renders title, description, and default slot when open', async () => {
-    const wrapper = mount(RsDrawer, {
-      props: {
-        open: true,
-        title: '筛选条件',
-        description: '按状态与时间过滤。',
-      },
-      slots: { default: '<p class="slot-body">正文内容</p>' },
-      attachTo: document.body,
-    })
-    await flushPromises()
-    const content = document.body.querySelector('.rs-drawer__content')
-    expect(content?.textContent).toContain('筛选条件')
-    expect(content?.textContent).toContain('按状态与时间过滤。')
-    expect(document.body.querySelector('.slot-body')?.textContent).toBe('正文内容')
-    wrapper.unmount()
-  })
-
-  it('applies default right side and md size classes', async () => {
-    const wrapper = mount(RsDrawer, {
-      props: { open: true, title: '测试' },
-      attachTo: document.body,
-    })
-    await flushPromises()
-    const content = document.body.querySelector('.rs-drawer__content')
-    expect(content?.classList.contains('rs-drawer__content--right')).toBe(true)
-    expect(content?.classList.contains('rs-drawer__content--md')).toBe(true)
-    wrapper.unmount()
-  })
-
-  it('applies custom side and size classes', async () => {
-    const wrapper = mount(RsDrawer, {
-      props: { open: true, title: '左侧', side: 'left', size: 'lg' },
-      attachTo: document.body,
-    })
-    await flushPromises()
-    const content = document.body.querySelector('.rs-drawer__content')
-    expect(content?.classList.contains('rs-drawer__content--left')).toBe(true)
-    expect(content?.classList.contains('rs-drawer__content--lg')).toBe(true)
-    wrapper.unmount()
-  })
-
-  it('applies custom width via CSS variable', async () => {
-    const wrapper = mount(RsDrawer, {
-      props: { open: true, title: '自定义宽', width: 420 },
-      attachTo: document.body,
-    })
-    await flushPromises()
-    const content = document.body.querySelector('.rs-drawer__content') as HTMLElement
-    expect(content.style.getPropertyValue('--rs-drawer-panel-size')).toBe('420px')
-    wrapper.unmount()
-  })
-
-  it('renders footer slot', async () => {
-    const wrapper = mount(RsDrawer, {
-      props: { open: true, title: '保存' },
-      slots: { footer: '<button type="button" class="footer-save">保存</button>' },
-      attachTo: document.body,
-    })
-    await flushPromises()
-    expect(document.body.querySelector('.rs-drawer__footer .footer-save')?.textContent).toBe('保存')
-    wrapper.unmount()
-  })
-
-  it('provides visually hidden DialogTitle when using header slot', async () => {
-    const wrapper = mount(RsDrawer, {
-      props: { open: true },
-      slots: {
-        header: '<div class="custom-header">自定义标题</div>',
-        default: '正文',
-      },
-      attachTo: document.body,
-    })
-    await flushPromises()
-    const hiddenTitle = document.body.querySelector('.rs-drawer__title--sr-only')
-    expect(hiddenTitle).not.toBeNull()
-    expect(document.body.querySelector('.custom-header')?.textContent).toBe('自定义标题')
-    wrapper.unmount()
-  })
-
-  it('closes when header close button is clicked', async () => {
-    const Host = defineComponent({
-      components: { RsDrawer },
-      setup() {
-        const open = ref(true)
-        return { open }
-      },
-      template: '<RsDrawer v-model:open="open" title="关闭测试" />',
-    })
-    const wrapper = mount(Host, { attachTo: document.body })
-    await flushPromises()
-    const closeBtn = document.body.querySelector('.rs-drawer__header button') as HTMLElement
-    await closeBtn.click()
-    await flushPromises()
-    expect(wrapper.findComponent(RsDrawer).props('open')).toBe(false)
-    wrapper.unmount()
-  })
-
-  it('beforeClose returning false keeps drawer open', async () => {
-    const Host = defineComponent({
-      components: { RsDrawer },
-      setup() {
-        const open = ref(true)
-        const beforeClose = () => false
-        return { open, beforeClose }
-      },
-      template: '<RsDrawer v-model:open="open" title="拦截" :before-close="beforeClose" />',
-    })
-    const wrapper = mount(Host, { attachTo: document.body })
-    await flushPromises()
-    const closeBtn = document.body.querySelector('.rs-drawer__header button') as HTMLElement
-    await closeBtn.click()
-    await flushPromises()
-    expect(wrapper.findComponent(RsDrawer).props('open')).toBe(true)
-    wrapper.unmount()
-  })
-
-  it('emits afterClose when closed via close button', async () => {
-    const onAfterClose = vi.fn()
-    const Host = defineComponent({
-      components: { RsDrawer },
-      setup() {
-        const open = ref(true)
-        return { open, onAfterClose }
-      },
-      template: '<RsDrawer v-model:open="open" title="关闭" @after-close="onAfterClose" />',
-    })
-    const wrapper = mount(Host, { attachTo: document.body })
-    await flushPromises()
-    const closeBtn = document.body.querySelector('.rs-drawer__header button') as HTMLElement
-    await closeBtn.click()
-    await flushPromises()
-    expect(onAfterClose).toHaveBeenCalledWith('close')
-    wrapper.unmount()
-  })
-
-  it('hides overlay when showOverlay is false', async () => {
-    const wrapper = mount(RsDrawer, {
-      props: { open: true, title: '无遮罩', showOverlay: false },
-      attachTo: document.body,
-    })
-    await flushPromises()
-    expect(document.body.querySelector('.rs-drawer__overlay')).toBeNull()
-    wrapper.unmount()
-  })
-
-  it('does not close on outside when closeOnOverlayClick is false', async () => {
-    const Host = defineComponent({
-      components: { RsDrawer },
-      setup() {
-        const open = ref(true)
-        return { open }
-      },
-      template:
-        '<RsDrawer v-model:open="open" title="非点外关" :show-overlay="false" :close-on-overlay-click="false" />',
-    })
-    const wrapper = mount(Host, { attachTo: document.body })
-    await flushPromises()
-    document.body.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }))
-    await flushPromises()
-    expect(wrapper.findComponent(RsDrawer).props('open')).toBe(true)
-    wrapper.unmount()
-  })
-
-  it('teleports into a container and uses contained positioning', async () => {
-    const host = document.createElement('div')
-    host.id = 'drawer-host'
-    host.style.position = 'relative'
-    document.body.appendChild(host)
-
-    const wrapper = mount(RsDrawer, {
-      props: {
-        open: true,
-        title: '容器内抽屉',
-        teleportTo: '#drawer-host',
-      },
-      attachTo: document.body,
-    })
-    await flushPromises()
-
-    const content = host.querySelector('.rs-drawer__content') as HTMLElement | null
-    expect(content).not.toBeNull()
-    expect(content?.classList.contains('rs-drawer__content--contained')).toBe(true)
-    expect(document.body.querySelector(':scope > .rs-drawer__content')).toBeNull()
-
-    wrapper.unmount()
-    host.remove()
-  })
-
-  it('hides close button when showClose is false', async () => {
-    const wrapper = mount(RsDrawer, {
-      props: { open: true, title: '无关闭', showClose: false },
-      attachTo: document.body,
-    })
-    await flushPromises()
-    expect(document.body.querySelectorAll('.rs-drawer__header button').length).toBe(0)
-    wrapper.unmount()
-  })
-
-  it('omits header when no title, description, close, or header slot', async () => {
-    const wrapper = mount(RsDrawer, {
-      props: { open: true, showClose: false },
-      slots: { default: '仅正文' },
-      attachTo: document.body,
-    })
-    await flushPromises()
-    expect(document.body.querySelector('.rs-drawer__header')).toBeNull()
-    wrapper.unmount()
-  })
-
-  it('uses en-US close tooltip inside RsConfigProvider', async () => {
-    const Host = defineComponent({
-      components: { RsDrawer, RsConfigProvider },
-      setup() {
-        return () =>
-          h(RsConfigProvider, { locale: 'en-US' }, {
-            default: () => h(RsDrawer, { open: true, title: 'Drawer' }),
-          })
-      },
-    })
-    const wrapper = mount(Host, { attachTo: document.body })
-    await flushPromises()
-    const closeBtn = document.body.querySelector('.rs-drawer__header button') as HTMLElement
-    expect(closeBtn).not.toBeNull()
-    vi.useFakeTimers()
-    closeBtn.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }))
-    await vi.advanceTimersByTimeAsync(300)
-    await flushPromises()
-    expect(document.body.querySelector('.rs-btn__tooltip')?.textContent).toContain('Close')
-    vi.useRealTimers()
-    wrapper.unmount()
-  })
-
-  it('renders an inner-edge resize handle by default', async () => {
-    const wrapper = mount(RsDrawer, {
-      props: { open: true, title: '帮助' },
-      attachTo: document.body,
-    })
-    await flushPromises()
-    const handle = document.body.querySelector('.rs-drawer__resize') as HTMLElement | null
-    expect(handle).toBeTruthy()
-    expect(handle?.getAttribute('aria-orientation')).toBe('vertical')
-    wrapper.unmount()
-  })
-
-  it('hides the resize handle when size is full or resizable is false', async () => {
-    const full = mount(RsDrawer, {
-      props: { open: true, title: '全屏', size: 'full' },
-      attachTo: document.body,
-    })
-    await flushPromises()
-    expect(document.body.querySelector('.rs-drawer__resize')).toBeNull()
-    full.unmount()
-
-    const locked = mount(RsDrawer, {
-      props: { open: true, title: '固定', resizable: false },
-      attachTo: document.body,
-    })
-    await flushPromises()
-    expect(document.body.querySelector('.rs-drawer__resize')).toBeNull()
-    locked.unmount()
-  })
-
-  it('widens a right drawer with ArrowLeft on the resize handle', async () => {
-    const wrapper = mount(RsDrawer, {
-      props: { open: true, title: '缩放', width: 360 },
-      attachTo: document.body,
-    })
-    await flushPromises()
-    const content = document.body.querySelector('.rs-drawer__content') as HTMLElement
-    Object.defineProperty(content, 'getBoundingClientRect', {
-      configurable: true,
-      value: () => ({ width: 360, height: 800, top: 0, left: 800, right: 1160, bottom: 800, x: 800, y: 0, toJSON: () => ({}) }),
-    })
-    const handle = document.body.querySelector('.rs-drawer__resize') as HTMLElement
-    await handle.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true }))
-    await flushPromises()
-    expect(content.style.width).toBe('376px')
-    wrapper.unmount()
-  })
-})

package/src/__tests__/RsDropdown.spec.ts

@@ -1,135 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { flushPromises, mount } from '@vue/test-utils'
-import RsDropdown from '../components/RsDropdown.vue'
-
-describe('RsDropdown', () => {
-  const items = [
-    { label: '对话', value: 'chat', icon: 'message-square' as const },
-    { label: '编程', value: 'code', icon: 'folder' as const },
-  ]
-
-  const groupedItems = [
-    {
-      label: '创作',
-      options: [
-        { label: '对话', value: 'chat', icon: 'message-square' as const },
-        { label: '编程', value: 'code', icon: 'folder' as const },
-      ],
-    },
-    {
-      label: '检索',
-      options: [{ label: '知识库', value: 'kb', icon: 'search' as const }],
-    },
-  ]
-
-  it('opens menu on trigger click', async () => {
-    const wrapper = mount(RsDropdown, {
-      props: { items, modelValue: 'chat' },
-      attachTo: document.body,
-    })
-    expect(document.body.querySelector('.rs-dropdown__content')).toBeNull()
-    await wrapper.find('.rs-dropdown__trigger').trigger('click')
-    await flushPromises()
-    expect(document.body.querySelector('.rs-dropdown__content')).not.toBeNull()
-    wrapper.unmount()
-  })
-
-  it('emits select when flat item chosen', async () => {
-    const wrapper = mount(RsDropdown, {
-      props: { items, modelValue: 'chat' },
-      attachTo: document.body,
-    })
-    await wrapper.find('.rs-dropdown__trigger').trigger('click')
-    await flushPromises()
-    const menuItems = document.body.querySelectorAll('.rs-dropdown__item')
-    ;(menuItems[1] as HTMLElement).click()
-    await flushPromises()
-    expect(wrapper.emitted('update:modelValue')?.pop()).toEqual(['code'])
-    expect(wrapper.emitted('select')?.[0]).toEqual(['code'])
-    wrapper.unmount()
-  })
-
-  it('renders grouped labels and nested items', async () => {
-    const wrapper = mount(RsDropdown, {
-      props: { items: groupedItems, modelValue: 'chat' },
-      attachTo: document.body,
-    })
-    await wrapper.find('.rs-dropdown__trigger').trigger('click')
-    await flushPromises()
-    const labels = document.body.querySelectorAll('.rs-dropdown__group-label')
-    expect(labels).toHaveLength(2)
-    expect(labels[0]?.textContent).toContain('创作')
-    expect(labels[1]?.textContent).toContain('检索')
-    expect(document.body.querySelectorAll('.rs-dropdown__item')).toHaveLength(3)
-    wrapper.unmount()
-  })
-
-  it('emits select when grouped item chosen', async () => {
-    const wrapper = mount(RsDropdown, {
-      props: { items: groupedItems, modelValue: 'chat' },
-      attachTo: document.body,
-    })
-    await wrapper.find('.rs-dropdown__trigger').trigger('click')
-    await flushPromises()
-    const menuItems = document.body.querySelectorAll('.rs-dropdown__item')
-    ;(menuItems[2] as HTMLElement).click()
-    await flushPromises()
-    expect(wrapper.emitted('update:modelValue')?.pop()).toEqual(['kb'])
-    expect(wrapper.emitted('select')?.[0]).toEqual(['kb'])
-    wrapper.unmount()
-  })
-
-  it('shows selected label from grouped options', () => {
-    const wrapper = mount(RsDropdown, {
-      props: { items: groupedItems, modelValue: 'kb' },
-    })
-    expect(wrapper.find('.rs-dropdown__label').text()).toBe('知识库')
-  })
-
-  it('shows placeholder when value not in items', () => {
-    const wrapper = mount(RsDropdown, {
-      props: { items: groupedItems, modelValue: '', placeholder: '选择模式' },
-    })
-    expect(wrapper.find('.rs-dropdown__label').text()).toBe('选择模式')
-    expect(wrapper.find('.rs-dropdown__label--placeholder').exists()).toBe(true)
-  })
-
-  it('keeps trigger label when showSelected is false', async () => {
-    const wrapper = mount(RsDropdown, {
-      props: {
-        items,
-        modelValue: 'chat',
-        showSelected: false,
-        placeholder: '更多操作',
-      },
-      attachTo: document.body,
-    })
-    expect(wrapper.find('.rs-dropdown__label').text()).toBe('更多操作')
-
-    await wrapper.find('.rs-dropdown__trigger').trigger('click')
-    await flushPromises()
-    const menuItems = document.body.querySelectorAll('.rs-dropdown__item')
-    ;(menuItems[1] as HTMLElement).click()
-    await flushPromises()
-
-    expect(wrapper.find('.rs-dropdown__label').text()).toBe('更多操作')
-    expect(wrapper.emitted('select')?.[0]).toEqual(['code'])
-    wrapper.unmount()
-  })
-
-  it('does not mark checked state in action mode', async () => {
-    const wrapper = mount(RsDropdown, {
-      props: {
-        items,
-        modelValue: 'chat',
-        showSelected: false,
-        placeholder: '操作',
-      },
-      attachTo: document.body,
-    })
-    await wrapper.find('.rs-dropdown__trigger').trigger('click')
-    await flushPromises()
-    expect(document.body.querySelector('.rs-dropdown__item[data-state="checked"]')).toBeNull()
-    wrapper.unmount()
-  })
-})

package/src/__tests__/RsDynamicTags.spec.ts

@@ -1,52 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import { defineComponent, nextTick } from 'vue'
-import RsDynamicTags from '../components/RsDynamicTags.vue'
-
-describe('RsDynamicTags', () => {
-  it('opens input from trigger and creates tag on Enter', async () => {
-    const Host = defineComponent({
-      components: { RsDynamicTags },
-      data: () => ({ tags: [] as string[] }),
-      template: '<RsDynamicTags v-model="tags" />',
-    })
-    const wrapper = mount(Host)
-
-    await wrapper.find('.rs-dynamic-tags__trigger').trigger('click')
-    await nextTick()
-    const input = wrapper.find('.rs-dynamic-tags__input')
-    expect(input.exists()).toBe(true)
-
-    await input.setValue('alpha')
-    await input.trigger('keydown', { key: 'Enter' })
-    await nextTick()
-    expect((wrapper.vm as { tags: string[] }).tags).toEqual(['alpha'])
-  })
-
-  it('rejects duplicate tags', async () => {
-    const wrapper = mount(RsDynamicTags, {
-      props: {
-        modelValue: ['a'],
-        inputMode: 'always',
-      },
-    })
-
-    const input = wrapper.find('.rs-dynamic-tags__input')
-    await input.setValue('a')
-    await input.trigger('keydown', { key: 'Enter' })
-    await nextTick()
-    expect(wrapper.emitted('reject')?.[0]).toEqual(['duplicate', 'a'])
-    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
-  })
-
-  it('hides trigger when max reached', async () => {
-    const wrapper = mount(RsDynamicTags, {
-      props: {
-        modelValue: ['a', 'b'],
-        max: 2,
-      },
-    })
-    expect(wrapper.find('.rs-dynamic-tags__trigger').exists()).toBe(false)
-    expect(wrapper.find('.rs-dynamic-tags__input').exists()).toBe(false)
-  })
-})

package/src/__tests__/RsEmpty.spec.ts

@@ -1,99 +0,0 @@
-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/)
-  })
-})