@layout ComponentLayout
@page "/labels"

<h3>Component label</h3>

<p>This set of components includes <code>ValidateForm</code> <code>EditorForm</code> and a variety of <b>Form components</b> inherited from <code>ValidateBase<TValue></code>. Among these components There is a special set of display front label logic, now let’s sort it out in a unified way:</p>

<ul class="ul-demo">
    <li>The <a href='/validateforms' target='_blank'>ValidateForm</a> component is a <b>verifiable</b> form component. The form component in this component will automatically perform data compliance checks. If Data non-compliance will prevent the <b>Submit</b> action, which is the most frequently used component in data submission</li>
    <li>The <a href='/editorforms' target='_blank'>EditorForm</a> component is an ordinary form component. After this component is bound to the <code>Model</code>, the entire form can be automatically generated, which greatly reduces repetition Code, put the <code>ValidateForm</code> on the outside to open the <b>data compliance check</b> very convenient, concise and efficient</li>
</ul>

<p>Take the <a href='inputs' target='_blank'>BootstrapInput</a> input box component as an example to explain whether to display the <code>Label</code> logic</p>

<Tips>
    <p>The logic of <code>ShowLabel</code> is the principle of proximity. The closer the setting is to itself, the setting takes effect. For example, the form component is built into the <code>ValidateForm</code> component, even if <code>ValidateForm</code> is set to <code>>ShowLabel=true</code>, when the form component itself sets <code>ShowLabel=false</code>, the final result of the label is <b>not displayed</b></p>
</Tips>

<DemoBlock Title="Use alone" Introduction="Suitable for data entry" Name="Normal">
    <p><b>When two-way binding is not used</b></p>
    <ul class="ul-demo mb-3">
        <li><code>Label</code> will not be displayed by default</li>
        <li>Control whether to display through the <code>ShowLabel</code> property</li>
        <li>Display content when setting <code>DisplayText</code></li>
        <li>When not set, render a contentless <code>label</code> component as a placeholder</li>
    </ul>

    <GroupBox Title="No two-way binding" style="margin-top: 1.5rem;">
        <div>No settings in the first text box, no label</div>
        <div>The second text box setting <code>ShowLabel='true' DisplayText=``</code> displays a placeholder label without content</div>
        <div>The third text box setting <code>ShowLabel='true' DisplayText='Name'</code> shows the set content label</div>
        <div>The fourth text box setting <code>ShowLabel='true' DisplayText='@null'</code> displays a placeholder label without content</div>
        <div class="row g-3 mt-3">
            <div class="col-sm-12 col-md-3">
                <BootstrapInput TValue="string" />
            </div>
            <div class="col-sm-12 col-md-3">
                <BootstrapInput TValue="string" ShowLabel="true" DisplayText="" />
            </div>
            <div class="col-sm-12 col-md-3">
                <BootstrapInput TValue="string" ShowLabel="true" DisplayText="@LocalizerFoo[nameof(Foo.Name)]" />
            </div>
            <div class="col-sm-12 col-md-3">
                <BootstrapInput TValue="string" ShowLabel="true" DisplayText="@null" />
            </div>
        </div>
    </GroupBox>

    <p class="mt-3"><b>When using two-way binding</b></p>
    <GroupBox Title="Two-way binding" class="mt-3">
        <div>The first text box is set to <code>@bind-Value='Dummy.Name'</code>, no label is displayed</div>
        <div>The second text box setting <code>@bind-Value='Dummy.Name' ShowLabel='true' DisplayText='@Localizer[nameof(Foo.Address)]'</code> Display the contents of the setting</div>
        <div>The third text box setting <code>@bind-Value='Dummy.Name' ShowLabel='true' DisplayText=``</code> Show no content placeholder label</div>
        <div>The fourth text box setting <code>@bind-Value='Dummy.Name' ShowLabel='true' DisplayText='@null'</code> Display the label content under the resource file mechanism<code>Label</code> code></div>
        <div class="row g-3 mt-3">
            <div class="col-sm-12 col-md-3">
                <BootstrapInput @bind-Value="Dummy.Name" />
            </div>
            <div class="col-sm-12 col-md-3">
                <BootstrapInput @bind-Value="Dummy.Name" ShowLabel="true" DisplayText="@LocalizerFoo[nameof(Foo.Address)]" />
            </div>
            <div class="col-sm-12 col-md-3">
                <BootstrapInput @bind-Value="Dummy.Name" ShowLabel="true" DisplayText="" />
            </div>
            <div class="col-sm-12 col-md-3">
                <BootstrapInput @bind-Value="Dummy.Name" ShowLabel="true" DisplayText="@null" />
            </div>
        </div>
    </GroupBox>
</DemoBlock>

<DemoBlock Title="Used in EditorForm" Introduction="Not used in <code>ValidateForm</code>" Name="EditorForm">
    <p><b>Do not display labels</b><div>Set <code>ShowLabel="false"</code>, all form components in the component <b>Do not display</b> tags</div></p>
    <GroupBox>
        <EditorForm Model="@Dummy" ShowLabel="false" RowType="RowType.Inline" ItemsPerRow="2">
            <FieldItems>
                <EditorItem @bind-Field="context.Hobby" Items="@Foo.GenerateHobbys(LocalizerFoo)">
                </EditorItem>
            </FieldItems>
        </EditorForm>
    </GroupBox>

    <p class="mt-3"><b>Show label</b><div>The <code>ShowLabel</code> property of the <coe>EditorForm</coe> component is not set. If it is not set, it is equivalent to set to <code>true</code>. All components <b>display</b> tags</div></p>
    <GroupBox>
        <EditorForm Model="@Dummy" RowType="RowType.Inline" ItemsPerRow="2">
            <FieldItems>
                <EditorItem @bind-Field="context.Hobby" Items="@Foo.GenerateHobbys(LocalizerFoo)">
                </EditorItem>
            </FieldItems>
        </EditorForm>
    </GroupBox>

    <p class="mt-3"><b>Alignment</b><div><code>LabelAlign="Alignment.Right"</code> set the label alignment is right</div></p>
    <GroupBox>
        <EditorForm Model="@Dummy" ShowLabel="true" RowType="RowType.Inline" ItemsPerRow="2" LabelAlign="Alignment.Right">
            <FieldItems>
                <EditorItem @bind-Field="context.Hobby" Items="@Foo.GenerateHobbys(LocalizerFoo)">
                </EditorItem>
            </FieldItems>
        </EditorForm>
    </GroupBox>

    <p class="mt-3"><b>Alignment</b><div><code>LabelAlign="Alignment.Center"</code> set the label alignment is center</div></p>
    <GroupBox>
        <EditorForm Model="@Dummy" ShowLabel="true" RowType="RowType.Inline" ItemsPerRow="2" LabelAlign="Alignment.Center">
            <FieldItems>
                <EditorItem @bind-Field="context.Hobby" Items="@Foo.GenerateHobbys(LocalizerFoo)">
                </EditorItem>
            </FieldItems>
        </EditorForm>
    </GroupBox>
</DemoBlock>

<DemoBlock Title="Use in EditorForm built-in ValidateForm" Introduction="Used in external <code>ValidateForm</code>" Name="ValidateForm1">
    <p><b>Show label</b><div>The <code>ShowLabel</code> property of the <coe>EditorForm</coe> component is not set. If it is not set, it is equivalent to set to <code>true</code>. All components <b>display</b> tags</div></p>
    <GroupBox>
        <ValidateForm Model="@Dummy">
            <EditorForm TModel="Foo" RowType="RowType.Inline" ItemsPerRow="2">
                <FieldItems>
                    <EditorItem @bind-Field="context.Hobby" Items="@Foo.GenerateHobbys(LocalizerFoo)">
                    </EditorItem>
                </FieldItems>
            </EditorForm>
        </ValidateForm>
    </GroupBox>

    <p class="mt-3"><b>Do not display labels</b><div>Set <code>ShowLabel="false"</code>, all form components in the component <b>Do not display</b> tags</div></p>
    <GroupBox>
        <ValidateForm Model="@Dummy" ShowLabel="false">
            <EditorForm TModel="Foo" RowType="RowType.Inline" ItemsPerRow="2">
                <FieldItems>
                    <EditorItem @bind-Field="context.Hobby" Items="@Foo.GenerateHobbys(LocalizerFoo)">
                    </EditorItem>
                </FieldItems>
            </EditorForm>
        </ValidateForm>
    </GroupBox>
</DemoBlock>

<DemoBlock Title="Used in ValidateForm" Introduction="Show labels are automatically turned on by default" Name="ValidateForm2">
    <p><b>Show label</b><div>The <code>ShowLabel</code> property of the <coe>EditorForm</coe> component is not set. If it is not set, it is equivalent to set to <code>true</code>. All components <b>display</b> tags</div></p>
    <ValidateForm Model="@Dummy">
        <div class="row g-3">
            <div class="col-sm-12 col-md-6">
                <BootstrapInput @bind-Value="Dummy.Name" />
            </div>
            <div class="col-sm-12 col-md-6">
                <BootstrapInput @bind-Value="Dummy.Address" />
            </div>
        </div>
    </ValidateForm>

    <p class="mt-3"><b>Do not display labels</b><div>Set <code>ShowLabel="false"</code>, all form components in the component <b>Do not display</b> tags</div></p>
    <ValidateForm Model="@Dummy" ShowLabel="false">
        <div class="row g-3">
            <div class="col-sm-12 col-md-6">
                <BootstrapInput @bind-Value="Dummy.Name" />
            </div>
            <div class="col-sm-12 col-md-6">
                <BootstrapInput @bind-Value="Dummy.Address" />
            </div>
        </div>
    </ValidateForm>

    <p class="mt-3"><b>Show labels</b><div>set class <code>form-inline</code> for the all labels within the component are prefixed</div></p>
    <ValidateForm Model="@Dummy">
        <div class="row g-3 form-inline">
            <div class="col-sm-12 col-md-6">
                <BootstrapInput @bind-Value="Dummy.Name" />
            </div>
            <div class="col-sm-12 col-md-6">
                <BootstrapInput @bind-Value="Dummy.Address" />
            </div>
        </div>
    </ValidateForm>

    <p class="mt-3"><b>Right</b><div><code>form-inline-end</code> set the label alignment is right</div></p>
    <ValidateForm Model="@Dummy">
        <div class="row g-3 form-inline form-inline-end">
            <div class="col-sm-12 col-md-6">
                <BootstrapInput @bind-Value="Dummy.Name" />
            </div>
            <div class="col-sm-12 col-md-6">
                <BootstrapInput @bind-Value="Dummy.Address" />
            </div>
        </div>
    </ValidateForm>
    <p class="mt-3"><b>Center</b><div><code>form-inline-center</code> set the label alignment is center</div></p>
    <ValidateForm Model="@Dummy">
        <div class="row g-3 form-inline form-inline-center">
            <div class="col-sm-12 col-md-6">
                <BootstrapInput @bind-Value="Dummy.Name" />
            </div>
            <div class="col-sm-12 col-md-6">
                <BootstrapInput @bind-Value="Dummy.Address" />
            </div>
        </div>
    </ValidateForm>

    <p class="mt-3">
        <b>Tooltip</b>
        <div>@((MarkupString)LocalizerForm["FormLabelWidth"].Value)</div>
        <div class="mt-2">@((MarkupString)LocalizerForm["LongDisplayDescription"].Value)</div>
    </p>
    <ValidateForm Model="@Dummy">
        <div class="row g-3">
            <div class="col-12">
                <BootstrapInput @bind-Value="@Dummy.Name" DisplayText="@LocalizerForm["LongDisplayText"]" />
            </div>
        </div>
        <div class="row g-3 form-inline mt-0">
            <div class="col-12">
                <BootstrapInput @bind-Value="@Dummy.Address" DisplayText="@LocalizerForm["LongDisplayText"]" ShowLabelTooltip="true" />
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public partial class Labels : ComponentBase
{
    [Inject]
    [NotNull]
    private IStringLocalizer<Foo>? LocalizerFoo { get; set; }

    [Inject]
    [NotNull]
    private IStringLocalizer<Labels>? Localizer { get; set; }

    [Inject]
    [NotNull]
    private IStringLocalizer<ValidateForms>? LocalizerForm { get; set; }

    [NotNull]
    private Foo? Dummy { get; set; }

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Dummy = Foo.Generate(LocalizerFoo);
    }
}