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

nuxt · Jul 10, 2024 · bce94db · bce94db
1 parent cf48258
commit bce94db
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/src/runtime/components/layout/Skeleton.vue b/src/runtime/components/layout/Skeleton.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="skeletonClass" v-bind="attrs" />
+  <component :is="as" :class="skeletonClass" v-bind="attrs" />
 </template>
 
 <script lang="ts">
@@ -18,6 +18,10 @@ const config = mergeConfig<typeof skeleton>(appConfig.ui.strategy, appConfig.ui.
 export default defineComponent({
   inheritAttrs: false,
   props: {
+    as: {
+      type: String,
+      default: 'div'
+    },
     class: {
       type: [String, Object, Array] as PropType<any>,
       default: () => ''

diff --git a/test/components/layout/Skeleton.spec.ts b/test/components/layout/Skeleton.spec.ts
@@ -6,7 +6,8 @@ import ComponentRender from '../component-render'
 describe('Skeleton', () => {
   it.each([
     [ '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>) => {
     const html = await ComponentRender(nameOrHtml, options, USkeleton)
     expect(html).toMatchSnapshot()

diff --git a/test/components/layout/__snapshots__/Skeleton.spec.ts.snap b/test/components/layout/__snapshots__/Skeleton.spec.ts.snap
@@ -1,5 +1,7 @@
 // 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 basic case correctly 1`] = `"<div class="animate-pulse bg-gray-100 dark:bg-gray-800 rounded-md"></div>"`;