romhml · romhml · Mar 5, 2025 · Mar 5, 2025 · Mar 5, 2025 · Mar 5, 2025
diff --git a/README.md b/README.md
@@ -45,19 +45,14 @@ Configure Compodium in your Nuxt project by customizing the settings in your `nu
 ```ts
 export default defineNuxtConfig({
   compodium: {
-    /* Customize your component collections */
-    collections: [
-      { name: 'Components', path: 'components/' }
-    ],
+    /* Customize compodium's base directory */
+    dir: 'compodium/',
 
-    /* Whether to include default collections for third-party libraries. */
-    includeDefaultCollections: true,
-
-    /* Customize the directory for preview examples */
-    examples: 'compodium/',
+    /* List of glob patterns to exclude components */
+    exclude: [],
 
-    /* Customize the preview component path. */
-    previewComponent: 'compodium/preview.vue',
+    /* Whether to include default collections for third-party libraries. */
+    includeLibraryCollections: true,
 
     extras: {
       ui: {
@@ -110,37 +105,13 @@ body {
 > [!NOTE]
 > Compodium renders outside of your `app.vue` component. This is useful if you need to inject CSS or provide parent components.
 
-### Collections
-
-You can control which components are added to the preview using the `collections` configuration. All components inside the specified `path` of your collection will be scanned and added to it.
-
-```ts
-{
-  name: 'Components',
-  path: 'components',
-  /* Add a prefix to all components, similar to Nuxt's components.prefix option */
-  prefix: '',
-  /* Glob patterns for components to ignore */
-  ignore: [],
-  /* If true, the path will be resolved from your node_modules/ folder */
-  external: false,
-  /* Specify a function to generate the components' documentation URL. This will display a button to go to the component's documentation in the preview if specified */
-  getDocUrl?: (componentName: string) => string | null
-}
-```
-
-By default, Compodium will detect the UI libraries you have installed and automatically add a collection with examples for all components. You can disable this by setting `includeDefaultCollections` to `false`.
-
-> [!NOTE]
-> Currently, this feature supports Nuxt UI. More libraries will be added soon!
-
 ### Component Examples
 
-You can provide examples for your components in the `compodium/examples` folder. Examples will be matched to components based on the filename. Each example must be named after its corresponding component, followed by the `Example` keyword and an optional label.
+You can provide examples for your components in the `compodium/examples/` folder. Examples will be matched to components based on the filename. Each example must be named after its corresponding component, followed by the `Example` keyword and an optional label.
 
 ```bash
 compodium
-└── components                          # The collection's name
+└── examples
     ├── BaseInputExampleDisabled.vue    # Will be added to the BaseInput component.
     ├── BaseButtonExample.vue           # Will be the main example for the BaseButton component.
     └── BaseButtonExampleWithLabel.vue  # Will be added to the BaseButton component.

diff --git a/...um/components/CompodiumWelcomeExample.vue → ...dium/examples/CompodiumWelcomeExample.vue b/...um/components/CompodiumWelcomeExample.vue → ...dium/examples/CompodiumWelcomeExample.vue
diff --git a/...ents/CompodiumWelcomeExampleWithShake.vue → ...ples/CompodiumWelcomeExampleWithShake.vue b/...ents/CompodiumWelcomeExampleWithShake.vue → ...ples/CompodiumWelcomeExampleWithShake.vue
diff --git a/...nents/CompodiumWelcomeExampleWithSpin.vue → ...mples/CompodiumWelcomeExampleWithSpin.vue b/...nents/CompodiumWelcomeExampleWithSpin.vue → ...mples/CompodiumWelcomeExampleWithSpin.vue
diff --git a/playground/components/InputProps.vue b/playground/components/InputProps.vue
diff --git a/playground/components/SupportedProps.vue b/playground/components/SupportedProps.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+const _props = defineProps<{
+  // Basic types
+  string?: string
+  number?: number
+  boolean?: boolean
+  primitiveUnion?: string | number | boolean
+
+  // Arrays
+  stringArray?: string[]
+  numberArray?: number[]
+  booleanArray?: boolean[]
+
+  /**
+   * @IconifyIcon
+   */
+  icon?: string
+
+  // Objects
+  object?: { foo: string }
+  objectArray?: ({ foo: string | number } | { fee: string })[]
+  arrayOfMultipleObjects?: ({ foo: string | number } | { fee: string })[]
+
+  // Complex types
+  multipleArrayOfMultipleObjects?:
+    | ({ foo: string | number } | { fee: string })[]
+    | ({ foo: number } | { fee: string })[]
+  objectMatrix?:
+    | (({ foo: string | number } | { fee: string })[]
+      | ({ foo: number } | { fee: string })[])[]
+  numberMatrix?: number[][]
+  literalMatrix?: (number | string | boolean)[][]
+}>()
+
+extendCompodiumMeta<typeof _props>({
+  defaultProps: {
+    string: 'hello',
+    primitiveUnion: 42,
+    objectArray: [{ foo: 'bar' }],
+    object: { foo: 'bar' },
+    arrayOfMultipleObjects: [{ foo: 'bar' }, { fee: 'bar' }],
+    multipleArrayOfMultipleObjects: [{ foo: 'bar' }, { fee: 'bar' }],
+    objectMatrix: [[{ foo: 'bar' }, { fee: 'bar' }], [{ foo: 42 }]],
+    numberMatrix: [[42, 42], [42]],
+    literalMatrix: [['string', true], [42]]
+  }
+})
+</script>
+
+<template>
+  <p>Supported prop types</p>
+</template>