docs(ComponentExample): improve options handling

docs/app/components/content/ComponentCode.vue

@@ -234,7 +234,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
               color="gray"
               variant="soft"
               class="rounded rounded-l-none min-w-12"
-              :search="false"
+              :search-input="false"
               :class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
               :ui="{ itemLeadingChip: 'size-2' }"
               @update:model-value="setComponentProp(option.name, $event)"

docs/app/components/content/ComponentExample.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { camelCase } from 'scule'
+import { get, set } from '#ui/utils'
 
 const props = withDefaults(defineProps<{
   name: string
@@ -32,17 +33,22 @@ const props = withDefaults(defineProps<{
    * A list of variable props to link to the component.
    */
   options?: Array<{
+    alias?: string
     name: string
     label: string
-    items: any[]
+    items?: any[]
     default: any
-    multiple: boolean
+    multiple?: boolean
   }>
 }>(), {
   preview: true,
   source: true
 })
 
+const slots = defineSlots<{
+  options(props?: {}): any
+}>()
+
 const { $prettier } = useNuxtApp()
 
 const camelName = camelCase(props.name)
@@ -92,7 +98,14 @@ const { data: ast } = await useAsyncData(`component-example-${camelName}`, async
 
 const optionsValues = ref(props.options?.reduce((acc, option) => {
   if (option.name) {
-    acc[option.name] = option.default
+    acc[option.alias || option.name] = option.default
+  }
+  if (option.name.toLowerCase().endsWith('color') && option.items?.length) {
+    option.items = option.items.map((item: any) => ({
+      label: item,
+      value: item,
+      chip: { color: item }
+    }))
   }
   return acc
 }, {} as Record<string, any>) || {})
@@ -102,7 +115,9 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
   <div class="my-5">
     <div v-if="preview">
       <div class="border border-gray-200 dark:border-gray-700 relative z-[1]" :class="[{ 'border-b-0 rounded-t-md': props.source, 'rounded-md': !props.source }]">
-        <div v-if="props.options?.length" class="flex gap-4 p-4 border-b border-gray-200 dark:border-gray-700">
+        <div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-gray-200 dark:border-gray-700">
+          <slot name="options" />
+
           <UFormField
             v-for="option in props.options"
             :key="option.name"
@@ -117,13 +132,36 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
             }"
           >
             <USelectMenu
-              v-model="optionsValues[option.name]"
+              v-if="option.items?.length"
+              :model-value="get(optionsValues, option.name)"
               :items="option.items"
-              :search="false"
+              :search-input="false"
+              :value-key="option.name.toLowerCase().endsWith('color') ? 'value' : undefined"
               color="gray"
               variant="soft"
               class="rounded rounded-l-none min-w-12"
-              multiple
+              :multiple="option.multiple"
+              :class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
+              :ui="{ itemLeadingChip: 'size-2' }"
+              @update:model-value="set(optionsValues, option.name, $event)"
+            >
+              <template v-if="option.name.toLowerCase().endsWith('color')" #leading="{ modelValue, ui }">
+                <UChip
+                  inset
+                  standalone
+                  :color="(modelValue as any)"
+                  :size="ui.itemLeadingChipSize()"
+                  class="size-2"
+                />
+              </template>
+            </USelectMenu>
+            <UInput
+              v-else
+              :model-value="get(optionsValues, option.name)"
+              color="gray"
+              variant="soft"
+              :ui="{ base: 'rounded rounded-l-none min-w-12' }"
+              @update:model-value="set(optionsValues, option.name, $event)"
             />
           </UFormField>
         </div>