@page "/inputnumbers"
@inject IStringLocalizer<InputNumbers> Localizer

<h3>InputNumber</h3>

<h4>Only standard numeric values are allowed, and custom ranges and other advanced features are supported</h4>

<DemoBlock Title="Basic usage" Introduction="The <code>Numer</code> numeric type displays a text box, and the mobile side automatically pops up the numeric keypad" Name="Normal">
    <div class="demo-inputnumber">
        <BootstrapInputNumber Value="@BindValue" IsSelectAllTextOnFocus="true" />
    </div>
</DemoBlock>

<DemoBlock Title="Interval limit usage" Introduction="Set the <code>Max</code> <code>Min</code> to control the range of value intervals 1-10" Name="Range">
    <div class="demo-inputnumber">
        <BootstrapInputNumber Value="@BindValue" Max="10" Min="1" />
    </div>
</DemoBlock>

<DemoBlock Title="Control button" Introduction="Set the <code>ShowButton</code> parameter to control whether the buttons are displayed to increase or decrease" Name="ShowButton">
    <p>This example sets a maximum of 10 minimum value of 0</p>
    <div class="demo-inputnumber">
        <BootstrapInputNumber ShowButton="true" Value="@BindValue" Max="10" Min="0" />
    </div>
</DemoBlock>

<DemoBlock Title="Custom steps" Introduction="Set the <code>Step</code> parameter to control the increase or decrease in steps" Name="Step">
    <div class="demo-inputnumber">
        <p>The step defaults to 1</p>
        <BootstrapInputNumber ShowButton="true" Value="5" Color="Color.Danger" />
    </div>
    <div class="demo-inputnumber mt-3">
        <p>The step defaults to 1</p>
        <BootstrapInputNumber ShowButton="true" Value="10" Step="10" Color="Color.Success" />
    </div>
    <div class="demo-inputnumber mt-3">
        <p>The step defaults to 1</p>
        <BootstrapInputNumber ShowButton="true" Value="0.5" Step="0.1" Formatter="@Formatter" Color="Color.Warning" />
    </div>
</DemoBlock>

<DemoBlock Title="Color" Introduction="Set the <code>Color</code> parameter to customize the button color" Name="Color">
    <p>Show button</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.None" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Primary" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Success" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Info" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Warning" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Danger" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Dark" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Secondary" />
            </div>
        </div>
    </div>
    <p class="mt-3">No button</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="10" Color="Color.None" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="10" Color="Color.Primary" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="10" Color="Color.Success" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="10" Color="Color.Info" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="10" Color="Color.Warning" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="@BindFloatValue" Color="Color.Danger" FormatString="#.##" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="@BindDoubleValue" Color="Color.Dark" FormatString="#.##" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="@BindDecimalValue" Color="Color.Secondary" FormatString="#.##" />
            </div>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Data type" Introduction="This component uses generic support the underlying data type <code>int short long float double decimal</code>" Name="DateType">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="@BindShortValue" DisplayText="Short" ShowLabel="true" ShowButton="true" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="@BindValue" DisplayText="Int" ShowLabel="true" ShowButton="true" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="@BindLongValue" DisplayText="Long" ShowLabel="true" ShowButton="true" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="@BindFloatValue" DisplayText="Float" ShowLabel="true" ShowButton="true" FormatString="#.##" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="@BindDoubleValue" DisplayText="Double" ShowLabel="true" ShowButton="true" FormatString="#.##" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-inputnumber">
                <BootstrapInputNumber Value="@BindDecimalValue" DisplayText="Decimal" ShowLabel="true" ShowButton="true" FormatString="#.##" />
            </div>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Disable" Introduction="When you set the <code>IsDisabled</code> property value to <code>true</code>, the component suppresses input" Name="Disabled">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <BootstrapInputNumber Value="10" IsDisabled="true" />
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInputNumber Value="20" IsDisabled="true" ShowButton="true" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="The label is displayed" Introduction="When a component binds in both directions, it automatically determines whether label text is displayed based on the conditions" Name="ValidateForm">
    <p>The pre-label explicit rules are consistent with the <code>BootstrapInput</code> component of the > of the <a href=inputs'>[The portal]</a></p>
    <Divider Text="Bidirectional binding displays labels" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <ValidateForm Model="@Model">
        <BootstrapInputNumber @bind-Value="@Model.Count" ShowLabel="true" />
    </ValidateForm>
    <Divider Text="Bidirectional bindings do not display labels" Alignment="Alignment.Left" style="margin: 2rem 0;" />
    <BootstrapInputNumber @bind-Value="@Model.Count" ShowLabel="false" />
    <Divider Text="Custom  DisplayText" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <BootstrapInputNumber @bind-Value="@Model.Count" ShowLabel="true" DisplayText="Customization" />
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

// 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/

using BootstrapBlazor.Shared.Common;
using System.Collections.Generic;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class InputNumbers
{
    /// <summary>
    /// 
    /// </summary>
    public int BindValue { get; set; } = 5;

    /// <summary>
    /// 
    /// </summary>
    public sbyte BindSByteValue { get; set; } = 10;

    /// <summary>
    /// 
    /// </summary>
    public byte BindByteValue { get; set; } = 10;

    /// <summary>
    /// 
    /// </summary>
    public long BindLongValue { get; set; } = 10;

    /// <summary>
    /// 
    /// </summary>
    public short BindShortValue { get; set; } = 10;

    /// <summary>
    /// 
    /// </summary>
    public double BindDoubleValue { get; set; } = 10;

    /// <summary>
    /// 
    /// </summary>
    public float BindFloatValue { get; set; } = 10;

    /// <summary>
    /// 
    /// </summary>
    public decimal BindDecimalValue { get; set; } = 10;

    private Foo Model { get; set; } = new Foo() { Count = 10 };

    private static string Formatter(double val) => val.ToString("0.0");

    private IEnumerable<AttributeItem> GetAttributes()
    {
        return new AttributeItem[]
        {
                new AttributeItem() {
                    Name = "Value",
                    Description = Localizer["Att1"],
                    Type = "sbyte|byte|int|long|short|float|double|decimal",
                    ValueList = " — ",
                    DefaultValue = "0"
                },
                new AttributeItem() {
                    Name = "Max",
                    Description = Localizer["Att2"],
                    Type = "string",
                    ValueList = " — ",
                    DefaultValue = " — "
                },
                new AttributeItem()
                {
                    Name = "Min",
                    Description = Localizer["Att3"],
                    Type = "string",
                    ValueList = " — ",
                    DefaultValue = " — "
                },
                new AttributeItem()
                {
                    Name = "Step",
                    Description = Localizer["Att4"],
                    Type = "int|long|short|float|double|decimal",
                    ValueList = " — ",
                    DefaultValue = "1"
                },
                new AttributeItem()
                {
                    Name = "IsDisabled",
                    Description = Localizer["Att5"],
                    Type = "bool",
                    ValueList = "true|false",
                    DefaultValue = "false"
                },
                new AttributeItem() {
                    Name = "ShowLabel",
                    Description = Localizer["Att6"],
                    Type = "bool",
                    ValueList = "true|false",
                    DefaultValue = "false"
                },
                new AttributeItem() {
                    Name = "DisplayText",
                    Description = Localizer["Att7"],
                    Type = "string",
                    ValueList = " — ",
                    DefaultValue = " — "
                }
        };
    }
}