docs: move component around, update alert-dialog

docs/.vitepress/components/ComponentLoader.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const props = defineProps<{
+  name: string
+}>()
+
+const Component = await import(`../../components/demo/${props.name}/tailwind/index.vue`).then(i => i.default)
+</script>
+
+<template>
+  <Component :is="Component" />
+</template>

docs/components/ComponentPreview.vue → docs/.vitepress/components/ComponentPreview.vue

@@ -14,7 +14,9 @@ const parsedFiles = computed(() => JSON.parse(decodeURIComponent(props.files ??
 
 <template>
   <HeroContainer>
-    <ComponentLoader :name="name" />
+    <Suspense>
+      <ComponentLoader :name="name" />
+    </Suspense>
 
     <template #codeSlot>
       <ClientOnly>

docs/components/NewHeroContainer.vue → docs/.vitepress/components/NewHeroContainer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type Slots, computed, useSlots } from 'vue'
-import CodeSandbox from './CodeSandbox.vue'
-import Stackblitz from './Stackblitz.vue'
+import CodeSandbox from '../../components/CodeSandbox.vue'
+import Stackblitz from '../../components/Stackblitz.vue'
 
 withDefaults(
   defineProps<{

docs/.vitepress/theme/index.ts

@@ -5,6 +5,7 @@ import HomePage from '../components/HomePage.vue'
 import HomePageDemo from '../components/HomePageDemo.vue'
 import Annoucement from '../components/Annoucement.vue'
 import EmbedIframe from '../components/EmbedIframe.vue'
+import ComponentPreview from '../components/ComponentPreview.vue'
 import LayoutShowcase from '../layouts/showcase.vue'
 import 'vitepress/dist/client/theme-default/styles/components/vp-doc.css'
 import './style.css'
@@ -33,5 +34,6 @@ export default {
 
     app.component('Showcase', LayoutShowcase)
     app.component('EmbedIframe', EmbedIframe)
+    app.component('ComponentPreview', ComponentPreview)
   },
 } satisfies Theme

docs/components/Demos.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import AccordionDemo from './demo/Accordion/tailwind/index.vue'
-import AlertDialogDemo from './demo/AlertDialog/index.vue'
+import AlertDialogDemo from './demo/AlertDialog/tailwind/index.vue'
 import AspectRatioDemo from './demo/AspectRatio/index.vue'
 import AvatarDemo from './demo/Avatar/index.vue'
 import CheckboxDemo from './demo/Checkbox/index.vue'

docs/components/demo/AlertDialog/css/index.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import {
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogRoot,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from 'radix-vue'
+import './styles.css'
+
+function handleAction() {
+  alert('clicked action button!')
+}
+</script>
+
+<template>
+  <AlertDialogRoot>
+    <AlertDialogTrigger class="Button green">
+      Delete account
+    </AlertDialogTrigger>
+    <AlertDialogPortal>
+      <AlertDialogOverlay class="AlertDialogOverlay" />
+      <AlertDialogContent class="AlertDialogContent">
+        <AlertDialogTitle class="AlertDialogTitle">
+          Are you absolutely sure?
+        </AlertDialogTitle>
+        <AlertDialogDescription class="AlertDialogDescription">
+          This action cannot be undone. This will permanently delete your account and remove your data from our servers.
+        </AlertDialogDescription>
+        <div :style="{ display: 'flex', gap: 25, justifyContent: 'flex-end' }">
+          <AlertDialogCancel class="Button mauve">
+            Cancel
+          </AlertDialogCancel>
+          <AlertDialogAction class="Button red" @click="handleAction">
+            Yes, delete account
+          </AlertDialogAction>
+        </div>
+      </AlertDialogContent>
+    </AlertDialogPortal>
+  </AlertDialogRoot>
+</template>

docs/components/demo/AlertDialog/css/styles.css

@@ -0,0 +1,111 @@
+@import '@radix-ui/colors/black-alpha.css';
+@import '@radix-ui/colors/mauve.css';
+@import '@radix-ui/colors/red.css';
+@import '@radix-ui/colors/green.css';
+
+/* reset */
+button {
+  all: unset;
+}
+
+.AlertDialogOverlay {
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.AlertDialogContent {
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 500px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.AlertDialogContent:focus {
+  outline: none;
+}
+
+.AlertDialogTitle {
+  margin: 0;
+  color: var(--mauve-12);
+  font-size: 17px;
+  font-weight: 500;
+}
+
+.AlertDialogDescription {
+  margin-bottom: 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.Button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+}
+.Button.green {
+  background-color: white;
+  color: var(--green-11);
+  box-shadow: 0 2px 10px var(--black-a7);
+}
+.Button.green:hover {
+  background-color: var(--mauve-3);
+}
+.Button.green:focus {
+  box-shadow: 0 0 0 2px black;
+}
+.Button.red {
+  background-color: var(--red-4);
+  color: var(--red-11);
+}
+.Button.red:hover {
+  background-color: var(--red-5);
+}
+.Button.red:focus {
+  box-shadow: 0 0 0 2px var(--red-7);
+}
+.Button.mauve {
+  background-color: var(--mauve-4);
+  color: var(--mauve-11);
+}
+.Button.mauve:hover {
+  background-color: var(--mauve-5);
+}
+.Button.mauve:focus {
+  box-shadow: 0 0 0 2px var(--mauve-7);
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}

docs/content/components/accordion.md

@@ -5,22 +5,15 @@ name: accordion
 aria: https://www.w3.org/WAI/ARIA/apg/patterns/accordion
 ---
 
-<script setup>
-import ComponentPreview from "../../components/ComponentPreview.vue" 
-</script>
-
-
 # Accordion
 
 <Description>
 A vertically stacked set of interactive headings that each reveal an
 associated section of content.
 </Description>
 
-
 <ComponentPreview name="Accordion" />
 
-
 ## Features
 
 <Highlights

docs/content/components/alert-dialog.md

@@ -5,9 +5,6 @@ name: alert-dialog
 aria: https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog
 ---
 
-<script setup> 
-import DemoAlertDialog from '../../components/demo/AlertDialog/index.vue'
-</script>
 
 # Alert Dialog
 
@@ -16,23 +13,7 @@ A modal dialog that interrupts the user with important content and expects a
 response.
 </Description>
 
-<HeroContainer folder="AlertDialog">
-<DemoAlertDialog />
-<template v-slot:codeSlot>
-<HeroCodeGroup>
-<div filename="index.vue">
-
-<<< ../../components/demo/AlertDialog/index.vue
-
-</div>
-<div filename="tailwind.config.js">
-
-<<< ../../components/demo/AlertDialog/tailwind.config.js
-
-</div>
-</HeroCodeGroup>
-</template>
-</HeroContainer>
+<ComponentPreview name="AlertDialog" />
 
 ## Features