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

docs/content/3.forms/3.select.md

@@ -12,55 +12,13 @@ The Select component is a wrapper around the native `<select>` HTML element. For
 
 Use a `v-model` to make the Select reactive alongside the `options` prop to pass an array of strings or objects.
 
-::component-example
-#default
-:select-example
-
-#code
-```vue
-<script setup>
-const countries = ['United States', 'Canada', 'Mexico']
-
-const country = ref(countries[0])
-</script>
-
-<template>
-  <USelect v-model="country" :options="countries" />
-</template>
-```
-::
+:component-example{component="select-example"}
 
 When using objects, you can configure which field will be used for display through the `option-attribute` prop that defaults to `label` and which field will be used for comparison through the `value-attribute` prop that defaults to `value`.
 
 Adding a `disabled` key to the objects will control the disabled state of the option.
 
-::component-example
-#default
-:select-example-objects
-
-#code
-```vue
-<script setup>
-const countries = [{
-  name: 'United States',
-  value: 'US'
-}, {
-  name: 'Canada',
-  value: 'CA',
-  disabled: true
-}, {
-  name: 'Mexico',
-  value: 'MX'
-}]
-
-const country = ref('CA')
-</script>
-
-<template>
-  <USelect v-model="country" :options="countries" option-attribute="name" />
-</template>
-```
-::
+:component-example{component="select-example-objects"}
 
 ### Style
 
@@ -176,7 +134,7 @@ options:
     restriction: included
     values:
       - white
-      - gray   
+      - gray
 excludedProps:
   - icon
 ---