Vben
2 years ago
committed by
GitHub
GitHub
53 changed files with 241 additions and 156 deletions
@ -1,4 +1,4 @@ |
|||||
export { default as VbenBreadcrumb } from './breadcrumb.vue'; |
export { default as VbenBreadcrumb } from './breadcrumb.vue'; |
||||
export { default as VbenBackgroundBreadcrumb } from './breadcrumb-background.vue'; |
export { default as VbenBackgroundBreadcrumb } from './breadcrumb-background.vue'; |
||||
|
|
||||
export type * from './interface'; |
export type * from './types'; |
||||
|
|||||
@ -1,2 +1,2 @@ |
|||||
export { default as VbenInput } from './input.vue'; |
export { default as VbenInput } from './input.vue'; |
||||
export type * from './interface'; |
export type * from './types'; |
||||
|
|||||
@ -1,3 +1,3 @@ |
|||||
export { default as VbenPinInput } from './input.vue'; |
export { default as VbenPinInput } from './input.vue'; |
||||
|
|
||||
export type * from './interface'; |
export type * from './types'; |
||||
|
|||||
@ -1,3 +1,3 @@ |
|||||
export type * from './interface'; |
|
||||
|
|
||||
export { default as VbenSegmented } from './segmented.vue'; |
export { default as VbenSegmented } from './segmented.vue'; |
||||
|
|
||||
|
export type * from './types'; |
||||
|
|||||
@ -0,0 +1,39 @@ |
|||||
|
import { mount } from '@vue/test-utils'; |
||||
|
import { describe, expect, it } from 'vitest'; |
||||
|
|
||||
|
import { EllipsisText } from '..'; |
||||
|
|
||||
|
describe('ellipsis-text.vue', () => { |
||||
|
it('renders the correct content and truncates text', async () => { |
||||
|
const wrapper = mount(EllipsisText, { |
||||
|
props: { |
||||
|
line: 1, |
||||
|
title: 'Test Title', |
||||
|
}, |
||||
|
slots: { |
||||
|
default: 'This is a very long text that should be truncated.', |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
expect(wrapper.text()).toContain('This is a very long text'); |
||||
|
// 检查 ellipsis 是否应用了正确的 class
|
||||
|
const ellipsis = wrapper.find('.truncate'); |
||||
|
expect(ellipsis.exists()).toBe(true); |
||||
|
}); |
||||
|
|
||||
|
it('expands text on click if expand is true', async () => { |
||||
|
const wrapper = mount(EllipsisText, { |
||||
|
props: { |
||||
|
expand: true, |
||||
|
line: 1, |
||||
|
}, |
||||
|
slots: { |
||||
|
default: 'This is a very long text that should be truncated.', |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
const ellipsis = wrapper.find('.truncate'); |
||||
|
await ellipsis.trigger('click'); |
||||
|
expect(wrapper.emitted('expandChange')).toBeTruthy(); |
||||
|
}); |
||||
|
}); |
||||
@ -0,0 +1,74 @@ |
|||||
|
import { mount } from '@vue/test-utils'; |
||||
|
import { describe, expect, it } from 'vitest'; |
||||
|
|
||||
|
import { Page } from '..'; |
||||
|
|
||||
|
describe('page.vue', () => { |
||||
|
it('renders title when passed', () => { |
||||
|
const wrapper = mount(Page, { |
||||
|
props: { |
||||
|
title: 'Test Title', |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
expect(wrapper.text()).toContain('Test Title'); |
||||
|
}); |
||||
|
|
||||
|
it('renders description when passed', () => { |
||||
|
const wrapper = mount(Page, { |
||||
|
props: { |
||||
|
description: 'Test Description', |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
expect(wrapper.text()).toContain('Test Description'); |
||||
|
}); |
||||
|
|
||||
|
it('renders default slot content', () => { |
||||
|
const wrapper = mount(Page, { |
||||
|
slots: { |
||||
|
default: '<p>Default Slot Content</p>', |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
expect(wrapper.html()).toContain('<p>Default Slot Content</p>'); |
||||
|
}); |
||||
|
|
||||
|
it('renders footer slot when showFooter is true', () => { |
||||
|
const wrapper = mount(Page, { |
||||
|
props: { |
||||
|
showFooter: true, |
||||
|
}, |
||||
|
slots: { |
||||
|
footer: '<p>Footer Slot Content</p>', |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
expect(wrapper.html()).toContain('<p>Footer Slot Content</p>'); |
||||
|
}); |
||||
|
|
||||
|
it('applies the custom contentClass', () => { |
||||
|
const wrapper = mount(Page, { |
||||
|
props: { |
||||
|
contentClass: 'custom-class', |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
const contentDiv = wrapper.find('.m-4'); |
||||
|
expect(contentDiv.classes()).toContain('custom-class'); |
||||
|
}); |
||||
|
|
||||
|
it('does not render description slot if description prop is provided', () => { |
||||
|
const wrapper = mount(Page, { |
||||
|
props: { |
||||
|
description: 'Test Description', |
||||
|
}, |
||||
|
slots: { |
||||
|
description: '<p>Description Slot Content</p>', |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
expect(wrapper.text()).toContain('Test Description'); |
||||
|
expect(wrapper.html()).not.toContain('Description Slot Content'); |
||||
|
}); |
||||
|
}); |
||||
@ -1,13 +0,0 @@ |
|||||
<script setup lang="ts"> |
|
||||
defineOptions({ |
|
||||
name: 'PageFooter', |
|
||||
}); |
|
||||
</script> |
|
||||
|
|
||||
<template> |
|
||||
<div |
|
||||
class="bg-card align-center absolute bottom-0 left-0 right-0 flex px-6 py-4" |
|
||||
> |
|
||||
<slot></slot> |
|
||||
</div> |
|
||||
</template> |
|
||||
@ -1,18 +0,0 @@ |
|||||
<script setup lang="ts"> |
|
||||
import type { PageHeaderProps } from './page.ts'; |
|
||||
|
|
||||
defineOptions({ |
|
||||
name: 'PageHeader', |
|
||||
}); |
|
||||
|
|
||||
const props = defineProps<PageHeaderProps>(); |
|
||||
</script> |
|
||||
|
|
||||
<template> |
|
||||
<div class="bg-card px-6 py-4"> |
|
||||
<div class="mb-2 flex justify-between text-xl font-bold leading-10"> |
|
||||
{{ props.title }} |
|
||||
</div> |
|
||||
<slot></slot> |
|
||||
</div> |
|
||||
</template> |
|
||||
@ -1,11 +0,0 @@ |
|||||
interface PageHeaderProps { |
|
||||
title?: string; |
|
||||
description?: string; |
|
||||
} |
|
||||
|
|
||||
interface Props extends PageHeaderProps { |
|
||||
contentClass?: string; |
|
||||
showFooter?: boolean; |
|
||||
} |
|
||||
|
|
||||
export type { PageHeaderProps, Props }; |
|
||||
@ -1,9 +0,0 @@ |
|||||
interface LockAndRegisterParams { |
|
||||
lockScreenPassword: string; |
|
||||
} |
|
||||
|
|
||||
interface RegisterEmits { |
|
||||
submit: [LockAndRegisterParams]; |
|
||||
} |
|
||||
|
|
||||
export type { LockAndRegisterParams, RegisterEmits }; |
|
||||
@ -1,7 +1,11 @@ |
|||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||
import { Page } from '@vben/common-ui'; |
import { Fallback } from '@vben/common-ui'; |
||||
</script> |
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<Page description="当前页面仅 Admin 账号可见" title="页面访问测试" /> |
<Fallback |
||||
|
description="当前页面仅 Admin 账号可见" |
||||
|
status="coming-soon" |
||||
|
title="页面访问测试" |
||||
|
/> |
||||
</template> |
</template> |
||||
|
|||||
@ -1,7 +1,11 @@ |
|||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||
import { Page } from '@vben/common-ui'; |
import { Fallback } from '@vben/common-ui'; |
||||
</script> |
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<Page description="当前页面仅 Super 账号可见" title="页面访问测试" /> |
<Fallback |
||||
|
description="当前页面仅 Super 账号可见" |
||||
|
status="coming-soon" |
||||
|
title="页面访问测试" |
||||
|
/> |
||||
</template> |
</template> |
||||
|
|||||
@ -1,7 +1,11 @@ |
|||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||
import { Page } from '@vben/common-ui'; |
import { Fallback } from '@vben/common-ui'; |
||||
</script> |
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<Page description="当前页面仅 User 账号可见" title="页面访问测试" /> |
<Fallback |
||||
|
description="当前页面仅 User 账号可见" |
||||
|
status="coming-soon" |
||||
|
title="页面访问测试" |
||||
|
/> |
||||
</template> |
</template> |
||||
|
|||||
Loading…
Reference in new issue