docs(ComponentExample): automatically read code (#789)

docs/content/3.forms/1.input.md

@@ -10,21 +10,7 @@ links:
 
 Use a `v-model` to make the Input reactive.
 
-::component-example
-#default
-:input-example
-
-#code
-```vue
-<script setup>
-const value = ref('')
-</script>
-
-<template>
-  <UInput v-model="value" />
-</template>
-```
-::
+:component-example{component="input-example"}
 
 ### Style
 
@@ -119,8 +105,8 @@ options:
   - name: color
     restriction: included
     values:
-      - white   
-      - gray      
+      - white
+      - gray
 excludedProps:
   - icon
 ---
@@ -197,32 +183,7 @@ baseProps:
 
 You can for example create a clearable Input by injecting a [Button](/elements/button) in the `trailing` slot that displays when some text is entered.
 
-::component-example
-#default
-:input-example-clearable
-
-#code
-```vue
-<template>
-  <UInput v-model="q" name="q" placeholder="Search..." icon="i-heroicons-magnifying-glass-20-solid" :ui="{ icon: { trailing: { pointer: '' } } }">
-    <template #trailing>
-      <UButton
-        v-show="q !== ''"
-        color="gray"
-        variant="link"
-        icon="i-heroicons-x-mark-20-solid"
-        :padded="false"
-        @click="q = ''"
-      />
-    </template>
-  </UInput>
-</template>
-
-<script setup lang="ts">
-const q = ref('')
-</script>
-```
-::
+:component-example{component="input-example-clearable"}
 
 ::callout{icon="i-heroicons-exclamation-triangle-20-solid"}
 As leading and trailing icons are wrapped around a `pointer-events-none` class, if you inject a clickable element in the slot, you need to remove this class to make it clickable by adding `:ui="{ icon: { trailing: { pointer: '' } } }"` to the Input.