From bce94db9fdb2c29a4f2e5981e5dce49a44a4ac8a Mon Sep 17 00:00:00 2001
From: Juho Rutila <juho.rutila@gmail.com>
Date: Wed, 10 Jul 2024 14:58:01 +0300
Subject: [PATCH] feat(Skeleton): add `as` prop (#1955)

---
 src/runtime/components/layout/Skeleton.vue                 | 6 +++++-
 test/components/layout/Skeleton.spec.ts                    | 3 ++-
 test/components/layout/__snapshots__/Skeleton.spec.ts.snap | 2 ++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/layout/Skeleton.vue b/src/runtime/components/layout/Skeleton.vue
index 95f0d31e..f316f1c7 100644
--- 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
index a6e1d69b..909029cf 100644
--- 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
index 8c672055..b234b5d1 100644
--- 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>"`;