Added prepend and append slots to FormSelect component.

components/FormSelect.vue

@@ -1,9 +1,11 @@
 <template>
     <FormLabel :label="label" :id="computedId" />
     <select v-model="selected" :id="computedId" :name="name" class="p-inputtext w-full">
+        <slot name="prepend"></slot>
         <option v-for="option in options" :selected="selected === option.value" :value="option.value">
             {{ option.label }}
         </option>
+        <slot name="append"></slot>
     </select>
 </template>
 

docs/change-log.md

@@ -8,6 +8,7 @@ outline: deep
 * Implemented: add documentation to ving schema about filterQuery #87
 * Added recordsAsOptions() method to the useVingKind() composable.
 * Fixed a bug in the create() method of useVingKind & useVingRecord where props passed in to the function would be overridden by the defaults.
+* Added prepend and append slots to FormSelect component.
 
 ## 2024-04-09
 * Fixed: no type int example in ving schema #82

docs/subsystems/ui.md

@@ -165,7 +165,9 @@ Props:
 A form select list.
 
 ```html
-<FormSelect>
+<FormSelect @change="currentUser.update()" v-model="currentUser.props.useAsDisplayName"
+                                :options="currentUser.options?.useAsDisplayName" name="useAsDisplayName"
+                                label="Use As Display Name" />
 ```
 
 Props:
@@ -178,6 +180,19 @@ Props:
     - **label** - The human readable label for the value.
     - **value** - The value to select. Can be string, number, or boolean.
 
+Slots:
+
+- **prepend** - Add an option to the top of the list.
+- **append** - Add an option to the bottom of the list.
+
+```html
+<FormSelect>
+    <template v-slot="prepend">
+        <option value="foo">Foo</option>
+    </template>
+</FormSelect>
+```
+
 ### Notify
 Place this in your layouts so that users can receive toasts that will be triggered via the `useNotifyStore()` composable.
 ```html