[增添]添加了datasource的setting数据库以及默认值

vendor/filament/support/docs/09-blade-components/02-input-wrapper.md

@@ -0,0 +1,116 @@
+---
+title: Input wrapper Blade component
+---
+
+## Overview
+
+The input wrapper component should be used as a wrapper around the [input](input) or [select](select) components. It provides a border and other elements such as a prefix or suffix.
+
+```blade
+<x-filament::input.wrapper>
+    <x-filament::input
+        type="text"
+        wire:model="name"
+    />
+</x-filament::input.wrapper>
+
+<x-filament::input.wrapper>
+    <x-filament::input.select wire:model="status">
+        <option value="draft">Draft</option>
+        <option value="reviewing">Reviewing</option>
+        <option value="published">Published</option>
+    </x-filament::input.select>
+</x-filament::input.wrapper>
+```
+
+## Triggering the error state of the input
+
+The component has special styling that you can use if it is invalid. To trigger this styling, you can use either Blade or Alpine.js.
+
+To trigger the error state using Blade, you can pass the `valid` attribute to the component, which contains either true or false based on if the input is valid or not:
+
+```blade
+<x-filament::input.wrapper :valid="! $errors->has('name')">
+    <x-filament::input
+        type="text"
+        wire:model="name"
+    />
+</x-filament::input.wrapper>
+```
+
+Alternatively, you can use an Alpine.js expression to trigger the error state, based on if it evaluates to `true` or `false`:
+
+```blade
+<div x-data="{ errors: ['name'] }">
+    <x-filament::input.wrapper alpine-valid="! errors.includes('name')">
+        <x-filament::input
+            type="text"
+            wire:model="name"
+        />
+    </x-filament::input.wrapper>
+</div>
+```
+
+## Disabling the input
+
+To disable the input, you must also pass the `disabled` attribute to the wrapper component:
+
+```blade
+<x-filament::input.wrapper disabled>
+    <x-filament::input
+        type="text"
+        wire:model="name"
+        disabled
+    />
+</x-filament::input.wrapper>
+```
+
+## Adding affix text aside the input
+
+You may place text before and after the input using the `prefix` and `suffix` slots:
+
+```blade
+<x-filament::input.wrapper>
+    <x-slot name="prefix">
+        https://
+    </x-slot>
+
+    <x-filament::input
+        type="text"
+        wire:model="domain"
+    />
+
+    <x-slot name="suffix">
+        .com
+    </x-slot>
+</x-filament::input.wrapper>
+```
+
+### Using icons as affixes
+
+You may place an [icon](https://blade-ui-kit.com/blade-icons?set=1#search) before and after the input using the `prefix-icon` and `suffix-icon` attributes:
+
+```blade
+<x-filament::input.wrapper suffix-icon="heroicon-m-globe-alt">
+    <x-filament::input
+        type="url"
+        wire:model="domain"
+    />
+</x-filament::input.wrapper>
+```
+
+#### Setting the affix icon's color
+
+Affix icons are gray by default, but you may set a different color using the `prefix-icon-color` and `affix-icon-color` attributes:
+
+```blade
+<x-filament::input.wrapper
+    suffix-icon="heroicon-m-check-circle"
+    suffix-icon-color="success"
+>
+    <x-filament::input
+        type="url"
+        wire:model="domain"
+    />
+</x-filament::input.wrapper>
+```