chore(Skeleton): new component

docs/components/content/examples/SkeletonExample.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="flex items-center space-x-4">
+    <USkeleton class="h-12 w-12" :ui="{ rounded: 'rounded-full' }" />
+    <div class="space-y-2">
+      <USkeleton class="h-4 w-[250px]" />
+      <USkeleton class="h-4 w-[200px]" />
+    </div>
+  </div>
+</template>

docs/content/6.layout/3.skeleton.md

@@ -0,0 +1,33 @@
+---
+github: true
+---
+
+## Usage
+
+Use to show a placeholder while content is loading.
+
+::component-example
+#default
+:skeleton-example
+
+#code
+```vue
+<template>
+  <div className="flex items-center space-x-4">
+    <USkeleton class="h-12 w-12 rounded-full" />
+    <div className="space-y-2">
+      <USkeleton class="h-4 w-[250px]" />
+      <USkeleton class="h-4 w-[200px]" />
+    </div>
+  </div>
+</template>
+```
+::
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset

src/runtime/app.config.ts

@@ -457,6 +457,12 @@ const container = {
   constrained: 'max-w-7xl'
 }
 
+const skeleton = {
+  base: 'animate-pulse',
+  background: 'bg-gray-100 dark:bg-gray-800',
+  rounded: 'rounded-md'
+}
+
 // Navigation
 
 const verticalNavigation = {
@@ -738,6 +744,7 @@ export default {
     toggle,
     card,
     container,
+    skeleton,
     verticalNavigation,
     commandPalette,
     modal,

src/runtime/components/layout/Skeleton.vue

@@ -0,0 +1,35 @@
+<template>
+  <div :class="[ui.base, ui.background, ui.rounded]" />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import { defu } from 'defu'
+import { useAppConfig } from '#imports'
+// TODO: Remove
+// @ts-expect-error
+import appConfig from '#build/app.config'
+
+// const appConfig = useAppConfig()
+
+export default defineComponent({
+  props: {
+    ui: {
+      type: Object as PropType<Partial<typeof appConfig.ui.skeleton>>,
+      default: () => appConfig.ui.skeleton
+    }
+  },
+  setup (props) {
+    // TODO: Remove
+    const appConfig = useAppConfig()
+
+    const ui = computed<Partial<typeof appConfig.ui.skeleton>>(() => defu({}, props.ui, appConfig.ui.skeleton))
+
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui
+    }
+  }
+})
+</script>