From 8caa78819a12d82373e5fbef23db2a1b316ae012 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Sun, 14 May 2023 17:05:38 +0200
Subject: [PATCH] chore(Skeleton): new component

---
 .../content/examples/SkeletonExample.vue      |  9 +++++
 docs/content/6.layout/3.skeleton.md           | 33 +++++++++++++++++
 src/runtime/app.config.ts                     |  7 ++++
 src/runtime/components/layout/Skeleton.vue    | 35 +++++++++++++++++++
 4 files changed, 84 insertions(+)
 create mode 100644 docs/components/content/examples/SkeletonExample.vue
 create mode 100644 docs/content/6.layout/3.skeleton.md
 create mode 100644 src/runtime/components/layout/Skeleton.vue

diff --git a/docs/components/content/examples/SkeletonExample.vue b/docs/components/content/examples/SkeletonExample.vue
new file mode 100644
index 00000000..420180ba
--- /dev/null
+++ b/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>
diff --git a/docs/content/6.layout/3.skeleton.md b/docs/content/6.layout/3.skeleton.md
new file mode 100644
index 00000000..094a5190
--- /dev/null
+++ b/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
diff --git a/src/runtime/app.config.ts b/src/runtime/app.config.ts
index 3b2e41f2..d9089fc5 100644
--- a/src/runtime/app.config.ts
+++ b/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,
diff --git a/src/runtime/components/layout/Skeleton.vue b/src/runtime/components/layout/Skeleton.vue
new file mode 100644
index 00000000..dd941ad8
--- /dev/null
+++ b/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>