arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Skeleton): add as prop (#1955)

Browse Source
This commit is contained in:
Juho Rutila
2024-07-10 14:58:01 +03:00
committed by GitHub
parent cf482581f4
commit bce94db9fd
3 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/runtime/components/layout/Skeleton.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div :class="skeletonClass" v-bind="attrs" /> <component :is="as" :class="skeletonClass" v-bind="attrs" />
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -18,6 +18,10 @@ const config = mergeConfig<typeof skeleton>(appConfig.ui.strategy, appConfig.ui.
export default defineComponent({ export default defineComponent({
inheritAttrs: false, inheritAttrs: false,
props: { props: {
as: {
type: String,
default: 'div'
},
class: { class: {
type: [String, Object, Array] as PropType<any>, type: [String, Object, Array] as PropType<any>,
default: () => '' default: () => ''

3
test/components/layout/Skeleton.spec.ts
View File

@@ -6,7 +6,8 @@ import ComponentRender from '../component-render'
describe('Skeleton', () => { describe('Skeleton', () => {
it.each([ it.each([
[ 'basic case', { } ], [ 'basic case', { } ],
[ '<USkeleton class="h-12 w-12" :ui="{ rounded: \'rounded-full\' }" />' ] [ '<USkeleton class="h-12 w-12" :ui="{ rounded: \'rounded-full\' }" />' ],
[ '<USkeleton as="span" />' ]
])('renders %s correctly', async (nameOrHtml: string, options?: TypeOf<typeof USkeleton.props>) => { ])('renders %s correctly', async (nameOrHtml: string, options?: TypeOf<typeof USkeleton.props>) => {
const html = await ComponentRender(nameOrHtml, options, USkeleton) const html = await ComponentRender(nameOrHtml, options, USkeleton)
expect(html).toMatchSnapshot() expect(html).toMatchSnapshot()

2
test/components/layout/__snapshots__/Skeleton.spec.ts.snap
View File

@@ -1,5 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Skeleton > renders <USkeleton as="span" /> correctly 1`] = `"<span class="animate-pulse bg-gray-100 dark:bg-gray-800 rounded-md"></span>"`;
exports[`Skeleton > renders <USkeleton class="h-12 w-12" :ui="{ rounded: 'rounded-full' }" /> correctly 1`] = `"<div class="animate-pulse bg-gray-100 dark:bg-gray-800 rounded-full h-12 w-12"></div>"`; exports[`Skeleton > renders <USkeleton class="h-12 w-12" :ui="{ rounded: 'rounded-full' }" /> correctly 1`] = `"<div class="animate-pulse bg-gray-100 dark:bg-gray-800 rounded-full h-12 w-12"></div>"`;
exports[`Skeleton > renders basic case correctly 1`] = `"<div class="animate-pulse bg-gray-100 dark:bg-gray-800 rounded-md"></div>"`; exports[`Skeleton > renders basic case correctly 1`] = `"<div class="animate-pulse bg-gray-100 dark:bg-gray-800 rounded-md"></div>"`;