chore(playground): compodium setup

playground/compodium/examples/UAlert/UAlertExample.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  defaultProps: {
+    title: 'Heads up!',
+    description: 'You can change the primary color in your app config.'
+  }
+})
+</script>
+
+<template>
+  <UAlert />
+</template>

playground/compodium/examples/UAlert/UAlertExampleAction.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant'],
+  defaultProps: {
+    icon: 'i-lucide-terminal',
+    title: 'Heads up!',
+    description: 'You can change the primary color in your app config.',
+    close: true,
+    actions: [
+
+      {
+        label: 'Action',
+        onClick() {
+          console.log('Action clicked')
+        }
+      },
+      {
+        label: 'Another action',
+        color: 'warning',
+        onClick() {
+          console.log('Another action clicked')
+        }
+      },
+      {
+        label: 'One more action',
+        color: 'error',
+        onClick() {
+          console.log('One more action clicked')
+        }
+      },
+      {
+        label: 'And one more',
+        color: 'info',
+        icon: 'i-lucide-info',
+        onClick() {
+          console.log('And one more clicked')
+        }
+      },
+      {
+        label: 'Last one',
+        color: 'neutral',
+        icon: 'i-lucide-info',
+        onClick() {
+          console.log('Last one clicked')
+        }
+      }
+    ]
+  }
+})
+
+const multipleActions = (color: string) => [
+]
+</script>
+
+<template>
+  <UAlert />
+</template>

playground/compodium/examples/UAlert/UAlertExampleAvatar.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant'],
+  defaultProps: {
+    avatar: { src: 'https://github.com/benjamincanac.png' },
+    title: 'Heads up!',
+    description: 'You can change the primary color in your app config.'
+  }
+})
+</script>
+
+<template>
+  <UAlert />
+</template>

playground/compodium/examples/UAlert/UAlertExampleIcon.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant'],
+  defaultProps: {
+    icon: 'i-lucide-terminal',
+    title: 'Heads up!',
+    description: 'You can change the primary color in your app config.'
+  }
+})
+</script>
+
+<template>
+  <UAlert />
+</template>

playground/compodium/examples/UAlert/UAlertExampleVariants.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+extendCompodiumMeta({
+  combo: ['variant', 'color'],
+  defaultProps: {
+    title: 'Heads up!',
+    description: 'You can change the primary color in your app config.'
+  }
+})
+</script>
+
+<template>
+  <UAlert />
+</template>