docs: alerts, avatar, asectRatio

apps/www/.vitepress/theme/components/ComponentPreview.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { defineAsyncComponent } from 'vue'
+import Spinner from './Spinner.vue'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
 import { cn } from '@/lib/utils'
-import LucideSpinner from '~icons/lucide/loader-2'
 
 const props = withDefaults(defineProps<{
   name: string
@@ -10,7 +10,7 @@ const props = withDefaults(defineProps<{
 }>(), { align: 'center' })
 
 const Component = defineAsyncComponent({
-  loadingComponent: LucideSpinner,
+  loadingComponent: Spinner,
   loader: () => import(`../../../src/lib/registry/default/examples/${props.name}.vue`),
   timeout: 5000,
 })

apps/www/.vitepress/theme/components/Spinner.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import LucideSpinner from '~icons/lucide/loader-2'
+</script>
+
+<template>
+  <LucideSpinner class="animate-spin" />
+</template>

apps/www/.vitepress/theme/layout/DocsLayout.vue

@@ -4,6 +4,7 @@ import { docsConfig } from '../config/docs'
 import TableOfContentVue from '../components/TableOfContent.vue'
 import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
 import RadixIconsCode from '~icons/radix-icons/code'
+import ChevronRightIcon from '~icons/lucide/chevron-right'
 
 const $route = useRoute()
 const { frontmatter } = useData()
@@ -47,6 +48,16 @@ const { frontmatter } = useData()
 
     <main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
       <div class="mx-auto w-full min-w-0">
+        <div class="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
+          <div class="overflow-hidden text-ellipsis whitespace-nowrap">
+            Docs
+          </div>
+          <ChevronRightIcon class="h-4 w-4" />
+          <div class="font-medium text-foreground">
+            {{ frontmatter.title }}
+          </div>
+        </div>
+
         <div class="space-y-2">
           <h1 class="scroll-m-20 text-4xl font-bold tracking-tight">
             {{ frontmatter.title }}

apps/www/src/content/docs/components/alert.md

@@ -0,0 +1,47 @@
+---
+title: Alert
+description: Displays a callout for user attention.
+---
+
+
+<ComponentPreview name="AlertDemo"  >
+
+<<< ../../../lib/registry/default/examples/AlertDemo.vue
+
+</ComponentPreview>
+
+
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add alert
+```
+
+<ManualInstall>
+
+1. Install `radix-vue`:
+
+```bash
+npm install radix-vue
+```
+
+2. Copy and paste the component source files linked at the top of this page into your project.
+</ManualInstall>
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/default/ui/alert'
+</script>
+
+<template>
+  <Alert>
+    <AlertTitle>Heads up!</AlertTitle>
+    <AlertDescription>
+      You can add components to your app using the cli.
+    </AlertDescription>
+  </Alert>
+</template>
+```

apps/www/src/content/docs/components/aspect-ratio.md

@@ -0,0 +1,48 @@
+---
+title: Aspect Ratio
+description: Displays content within a desired ratio.
+source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/registry/default/ui/aspect-ratio 
+primitive: https://www.radix-vue.com/components/aspect-ratio.html
+---
+
+
+<ComponentPreview name="AspectRatioDemo"  >
+
+<<< ../../../lib/registry/default/examples/AspectRatioDemo.vue
+
+</ComponentPreview>
+
+
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add aspect-ratio
+```
+
+<ManualInstall>
+
+1. Install `radix-vue`:
+
+```bash
+npm install radix-vue
+```
+
+2. Copy and paste the component source files linked at the top of this page into your project.
+</ManualInstall>
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { AspectRatio } from '@/lib/registry/default/ui/aspect-ratio'
+</script>
+
+<template>
+  <AspectRatio>
+    <img
+      src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+    >
+  </AspectRatio>
+</template>
+```

apps/www/src/content/docs/components/avatar.md

@@ -0,0 +1,47 @@
+---
+title: Avatar
+description: An image element with a fallback for representing the user.
+source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/registry/default/ui/avatar 
+primitive: https://www.radix-vue.com/components/avatar.html
+---
+
+
+<ComponentPreview name="AvatarDemo"  >
+
+<<< ../../../lib/registry/default/examples/AvatarDemo.vue
+
+</ComponentPreview>
+
+
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add avatar
+```
+
+<ManualInstall>
+
+1. Install `radix-vue`:
+
+```bash
+npm install radix-vue
+```
+
+2. Copy and paste the component source files linked at the top of this page into your project.
+</ManualInstall>
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/default/ui/avatar'
+</script>
+
+<template>
+  <Avatar>
+    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+    <AvatarFallback>CN</AvatarFallback>
+  </Avatar>
+</template>
+```

apps/www/src/lib/registry/default/examples/AlertDemo.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { Terminal } from 'lucide-vue-next'
+import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/default/ui/alert'
+</script>
+
+<template>
+  <Alert>
+    <Terminal class="h-4 w-4" />
+    <AlertTitle>Heads up!</AlertTitle>
+    <AlertDescription>
+      You can add components to your app using the cli.
+    </AlertDescription>
+  </Alert>
+</template>

apps/www/src/lib/registry/default/examples/AspectRatioDemo.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { AspectRatio } from '@/lib/registry/default/ui/aspect-ratio'
+</script>
+
+<template>
+  <AspectRatio :ratio="16 / 9" class="bg-muted">
+    <img
+      src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+      alt="Photo by Drew Beamer"
+      class="rounded-md object-cover"
+    >
+  </AspectRatio>
+</template>

apps/www/src/lib/registry/default/examples/AvatarDemo.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/default/ui/avatar'
+</script>
+
+<template>
+  <Avatar>
+    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+    <AvatarFallback>CN</AvatarFallback>
+  </Avatar>
+</template>

apps/www/src/lib/registry/default/ui/alert/Alert.vue

@@ -1,78 +1,17 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { alertVariants } from '.'
-import { cva } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
-import { X } from 'lucide-vue-next'
-import { Button } from '../button'
 
-interface AlertProps {
+interface Props {
-  variant?: 'primary' | 'success' | 'warning' | 'destructive' | 'info'
+  variant?: NonNullable<Parameters<typeof alertVariants>[0]>['variant']
-  dismissible?: boolean
+  class?: string
-  show?: boolean
 }
 
-const props = withDefaults(defineProps<AlertProps>(), {
+const props = defineProps<Props>()
-  variant: 'primary',
-  dismissible: false,
-  show: true,
-})
-
-const emits = defineEmits<{
-  (e: 'update:show', value: boolean): void
-  (e: 'close'): void
-}>()
-
-const alertClass = computed(() => {
-  return cva(
-    'relative w-full rounded-lg p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4',
-    {
-      variants: {
-        variant: {
-          primary: 'border border-border text-foreground',
-          success:
-            'border dark:border-green-600 dark:text-green-600 text-green-500 border-green-500',
-          warning:
-            'border dark:border-yellow-600 dark:text-yellow-600 text-yellow-500 border-yellow-500',
-          destructive: 'border border-destructive text-destructive',
-          info: 'border dark:border-blue-600 dark:text-blue-600 text-blue-500 border-blue-500',
-        },
-      },
-    },
-  )({
-    variant: props.variant,
-  })
-})
-
-const show = computed({
-  get() {
-    return props.show
-  },
-  set(value) {
-    emits('update:show', value)
-  },
-})
 </script>
 
 <template>
-  <Transition
+  <div :class="cn(alertVariants({ variant }), props.class ?? '')">
-    enter-active-class="transition ease-out duration-300"
+    <slot />
-    enter-from-class="opacity-0"
+  </div>
-    enter-to-class="opacity-100"
-    leave-active-class="transition ease-in duration-300"
-    leave-from-class="opacity-100"
-    leave-to-class="opacity-0"
-  >
-    <div v-if="show" :class="alertClass" role="alert">
-      <Button
-        v-if="props.dismissible"
-        variant="neutral"
-        class="absolute top-1.5 -right-0.5"
-        @click="emits('close')"
-      >
-        <X
-          class="w-4 h-4 text-muted transition-colors ease-in-out duration-300"
-        />
-      </Button>
-      <slot />
-    </div>
-  </Transition>
 </template>

apps/www/src/lib/registry/default/ui/alert/AlertDescription.vue

@@ -7,7 +7,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <div :class="cn('text-sm text-left leading-relaxed', props.class)">
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
     <slot />
   </div>
 </template>

apps/www/src/lib/registry/default/ui/alert/AlertTitle.vue

@@ -1,5 +1,9 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+</script>
+
 <template>
-  <h5 class="mb-1 font-medium leading-none tracking-tight">
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', $attrs.class ?? '')">
     <slot />
   </h5>
 </template>

apps/www/src/lib/registry/default/ui/alert/index.ts

@@ -1,3 +1,21 @@
+import { cva } from 'class-variance-authority'
+
 export { default as Alert } from './Alert.vue'
 export { default as AlertTitle } from './AlertTitle.vue'
 export { default as AlertDescription } from './AlertDescription.vue'
+
+export const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)

apps/www/src/lib/registry/default/ui/avatar/Avatar.vue

@@ -1,46 +1,22 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { AvatarRoot } from 'radix-vue'
-import { cva } from 'class-variance-authority'
+import { avatarVariant } from '.'
 import { cn } from '@/lib/utils'
 
-interface AvatarProps {
+interface Props {
-  size?: 'sm' | 'base' | 'lg'
+  size?: NonNullable<Parameters<typeof avatarVariant>[0]>['size']
-  shape?: 'circle' | 'square'
+  shape?: NonNullable<Parameters<typeof avatarVariant>[0]>['shape']
   class?: string
 }
 
-const props = withDefaults(defineProps<AvatarProps>(), {
+const props = withDefaults(defineProps<Props>(), {
-  name: 'Anonymous',
+  size: 'sm',
-  size: 'base',
   shape: 'circle',
 })
-
-const avatarClass = computed(() => {
-  return cva(
-    'inline-flex items-center justify-center font-normal text-foregorund select-none shrink-0 bg-secondary overflow-hidden',
-    {
-      variants: {
-        size: {
-          sm: 'h-10 w-10 text-xs',
-          base: 'h-16 w-16 text-2xl',
-          lg: 'h-32 w-32 text-5xl',
-        },
-        shape: {
-          circle: 'rounded-full',
-          square: 'rounded-md',
-        },
-      },
-    },
-  )({
-    size: props.size,
-    shape: props.shape,
-  })
-})
 </script>
 
 <template>
-  <AvatarRoot :class="cn(avatarClass, props.class)">
+  <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
     <slot />
   </AvatarRoot>
 </template>

apps/www/src/lib/registry/default/ui/avatar/index.ts

@@ -1,3 +1,22 @@
+import { cva } from 'class-variance-authority'
+
 export { default as Avatar } from './Avatar.vue'
 export { default as AvatarImage } from './AvatarImage.vue'
 export { default as AvatarFallback } from './AvatarFallback.vue'
+
+export const avatarVariant = cva(
+  'inline-flex items-center justify-center font-normal text-foregorund select-none shrink-0 bg-secondary overflow-hidden',
+  {
+    variants: {
+      size: {
+        sm: 'h-10 w-10 text-xs',
+        base: 'h-16 w-16 text-2xl',
+        lg: 'h-32 w-32 text-5xl',
+      },
+      shape: {
+        circle: 'rounded-full',
+        square: 'rounded-md',
+      },
+    },
+  },
+)