Merge pull request #353 from DissNik/2.0

UI form component

resources/views/examples/components/form/index-buttons.blade.php

@@ -0,0 +1,11 @@
+<x-moonshine::form>
+    <x-moonshine::form.input
+        name="title"
+        placeholder="Title"
+        value=""
+    />
+    <x-slot:buttons><!-- [tl! focus:start] -->
+        <x-moonshine::form.button type="reset">Cancel</x-moonshine::form.button>
+        <x-moonshine::form.button class="btn-primary">Submit</x-moonshine::form.button>
+    </x-slot:buttons><!-- [tl! focus:end] -->
+</x-moonshine::form>

resources/views/examples/components/form/index-error-name.blade.php

@@ -0,0 +1,3 @@
+<x-moonshine::form raw error name="my-form"><!-- [tl! focus] -->
+    // form elements
+</x-moonshine::form><!-- [tl! focus] -->

resources/views/examples/components/form/index-error.blade.php

@@ -0,0 +1,3 @@
+<x-moonshine::form raw error><!-- [tl! focus] -->
+    // form elements
+</x-moonshine::form><!-- [tl! focus] -->

resources/views/examples/components/form/index-precognitive.blade.php

@@ -0,0 +1,3 @@
+<x-moonshine::form precognitive><!-- [tl! focus] -->
+    // form elements
+</x-moonshine::form><!-- [tl! focus] -->

resources/views/examples/components/form/index.blade.php

@@ -0,0 +1,3 @@
+<x-moonshine::form raw><!-- [tl! focus] -->
+    // form elements
+</x-moonshine::form><!-- [tl! focus] -->

resources/views/pages/en/ui/form.blade.php

@@ -1,5 +1,6 @@
 <x-page title="Form elements" :sectionMenu="[
     'Sections' => [
+        ['url' => '#basics', 'label' => 'Basics'],
         ['url' => '#label', 'label' => 'Label'],
         ['url' => '#input', 'label' => 'Input'],
         ['url' => '#checkbox', 'label' => 'Checkbox'],
@@ -19,6 +20,71 @@
     Form components are wrappers of similar HTML elements; they can be passed all the necessary attributes.
 </x-moonshine::alert>
 
+<x-sub-title id="basics">Basics</x-sub-title>
+
+<x-p>
+    The <em>Form</em> component is designed to create forms.
+</x-p>
+
+<x-code language="blade" file="resources/views/examples/components/form/index.blade.php"></x-code>
+
+<x-p>
+    The component creates <code>html</code> markup for the future form.
+</x-p>
+
+<x-code language="html">
+<form
+    class="form" method="POST"
+    x-id="['form']"
+    :id="$id('form')"
+>
+    @csrf <!-- [tl! focus:-5] -->
+
+    // form elements
+
+</form><!-- [tl! focus] -->
+</x-code>
+
+<x-moonshine::divider label="Buttons" />
+
+<x-p>
+    The <em>Form</em> component allows you to place buttons in a separate block,
+    To do this, you need to pass them in the <code>buttons</code> slot.
+</x-p>
+
+<x-code language="blade" file="resources/views/examples/components/form/index-buttons.blade.php"></x-code>
+
+<x-moonshine::grid>
+    <x-moonshine::column adaptiveColSpan="12" colSpan="4">
+        <x-moonshine::box>
+            @include("examples/components/form/index-buttons")
+        </x-moonshine::box>
+    </x-moonshine::column>
+</x-moonshine::grid>
+
+<x-moonshine::divider label="Errors" />
+
+<x-p>
+    The <code>errors</code> parameter allows you to display a list of errors.
+</x-p>
+
+<x-code language="blade" file="resources/views/examples/components/form/index-error.blade.php"></x-code>
+
+<x-p>
+    If there are several forms on the page, it is recommended to set <code>name</code> to the form,
+    to display errors only for a specific form.
+</x-p>
+
+<x-code language="blade" file="resources/views/examples/components/form/index-error-name.blade.php"></x-code>
+
+<x-moonshine::divider label="Precognition" />
+
+<x-p>
+    The <code>precognitive</code> parameter allows you to enable the <em>Precognition</em> mode for the form.
+</x-p>
+
+<x-code language="blade" file="resources/views/examples/components/form/index-precognitive.blade.php"></x-code>
+
 <x-sub-title id="label">Label</x-sub-title>
 
 <x-code language="blade" file="resources/views/examples/components/form/label.blade.php"></x-code>

resources/views/pages/ru/ui/form.blade.php

@@ -1,5 +1,6 @@
 <x-page title="Form elements" :sectionMenu="[
     'Разделы' => [
+        ['url' => '#basics', 'label' => 'Основы'],
         ['url' => '#label', 'label' => 'Label'],
         ['url' => '#input', 'label' => 'Input'],
         ['url' => '#checkbox', 'label' => 'Checkbox'],
@@ -19,6 +20,71 @@
     Компоненты форм являются оберткой аналогичных html-элементов, им можно передавать все необходимые атрибуты.
 </x-moonshine::alert>
 
+<x-sub-title id="basics">Основы</x-sub-title>
+
+<x-p>
+    Компонент <em>Form</em> является основой для построения форм.
+</x-p>
+
+<x-code language="blade" file="resources/views/examples/components/form/index.blade.php"></x-code>
+
+<x-p>
+    Компонент создает <code>html</code> разметку для будущей формы.
+</x-p>
+
+<x-code language="html">
+<form
+    class="form" method="POST"
+    x-id="['form']"
+    :id="$id('form')"
+>
+    @csrf <!-- [tl! focus:-5] -->
+
+    // form elements
+
+</form><!-- [tl! focus] -->
+</x-code>
+
+<x-moonshine::divider label="Buttons" />
+
+<x-p>
+    Компонент <em>Form</em> позволяет вынести кнопки в отдельный блок,
+    для этого необходимо передать их в слоте <code>buttons</code>.
+</x-p>
+
+<x-code language="blade" file="resources/views/examples/components/form/index-buttons.blade.php"></x-code>
+
+<x-moonshine::grid>
+    <x-moonshine::column adaptiveColSpan="12" colSpan="4">
+        <x-moonshine::box>
+            @include("examples/components/form/index-buttons")
+        </x-moonshine::box>
+    </x-moonshine::column>
+</x-moonshine::grid>
+
+<x-moonshine::divider label="Вывод ошибок" />
+
+<x-p>
+    Параметр <code>errors</code> позволяет выводить список ошибок.
+</x-p>
+
+<x-code language="blade" file="resources/views/examples/components/form/index-error.blade.php"></x-code>
+
+<x-p>
+    Если на странице несколько форм, рекомендуется задать <code>name</code> у формы,
+    для вывода ошибок только для конкретной формы.
+</x-p>
+
+<x-code language="blade" file="resources/views/examples/components/form/index-error-name.blade.php"></x-code>
+
+<x-moonshine::divider label="Precognition" />
+
+<x-p>
+    Параметр <code>precognitive</code> позволяет включить у формы режим <em>Precognition</em>.
+</x-p>
+
+<x-code language="blade" file="resources/views/examples/components/form/index-precognitive.blade.php"></x-code>
+
 <x-sub-title id="label">Label</x-sub-title>
 
 <x-code language="blade" file="resources/views/examples/components/form/label.blade.php"></x-code>