feat(BootstrapInputCurrency):add Currency support component

localization/de.json

@@ -78,6 +78,9 @@
   "BootstrapBlazor.Components.BootstrapInputNumber": {
     "ParsingErrorMessage": "Das Feld {0} muss eine Zahl sein."
   },
+  "BootstrapBlazor.Components.BootstrapInputCurrency": {
+    "ParsingErrorMessage": "Das Feld {0} muss eine Zahl sein."
+  },
   "BootstrapBlazor.Components.ResultDialogOption": {
     "ButtonYesText": "Ja",
     "ButtonNoText": "Nein",

localization/es.json

@@ -78,6 +78,9 @@
   "BootstrapBlazor.Components.BootstrapInputNumber": {
     "ParsingErrorMessage": "El campo {0} debe ser un número."
   },
+  "BootstrapBlazor.Components.BootstrapInputCurrency": {
+    "ParsingErrorMessage": "El campo {0} debe ser un número."
+  },
   "BootstrapBlazor.Components.ResultDialogOption": {
     "ButtonYesText": "Sí",
     "ButtonNoText": "No",

localization/it.json

@@ -78,6 +78,9 @@
   "BootstrapBlazor.Components.BootstrapInputNumber": {
     "ParsingErrorMessage": "Il campo {0} deve essere un numero."
   },
+  "BootstrapBlazor.Components.BootstrapInputCurrency": {
+    "ParsingErrorMessage": "Il campo {0} deve essere un numero."
+  },
   "BootstrapBlazor.Components.ResultDialogOption": {
     "ButtonYesText": "Sì",
     "ButtonNoText": "No",

localization/km-KH.json

@@ -78,6 +78,9 @@
   "BootstrapBlazor.Components.BootstrapInputNumber": {
     "ParsingErrorMessage": "ទិន្នន័យ {0} ត្រូវ​តែ​ជា​លេខ។"
   },
+  "BootstrapBlazor.Components.BootstrapInputCurrency": {
+    "ParsingErrorMessage": "ទិន្នន័យ {0} ត្រូវ​តែ​ជា​លេខ។"
+  },
   "BootstrapBlazor.Components.ResultDialogOption": {
     "ButtonYesText": "បាទ/ចាស៎",
     "ButtonNoText": "ទេ",

localization/pt-BR.json

@@ -78,6 +78,9 @@
   "BootstrapBlazor.Components.BootstrapInputNumber": {
     "ParsingErrorMessage": "O campo {0} deve ser um número."
   },
+  "BootstrapBlazor.Components.BootstrapInputCurrency": {
+    "ParsingErrorMessage": "O campo {0} deve ser um número."
+  },
   "BootstrapBlazor.Components.ResultDialogOption": {
     "ButtonYesText": "Sim",
     "ButtonNoText": "Não",

localization/pt.json

@@ -78,6 +78,9 @@
   "BootstrapBlazor.Components.BootstrapInputNumber": {
     "ParsingErrorMessage": "O campo {0} deve ser um número."
   },
+  "BootstrapBlazor.Components.BootstrapInputCurrency": {
+    "ParsingErrorMessage": "O campo {0} deve ser um número."
+  },
   "BootstrapBlazor.Components.ResultDialogOption": {
     "ButtonYesText": "Sim",
     "ButtonNoText": "Não",

localization/ru-RU.json

@@ -78,6 +78,9 @@
   "BootstrapBlazor.Components.BootstrapInputNumber": {
     "ParsingErrorMessage": "Поле {0} должно быть числом."
   },
+  "BootstrapBlazor.Components.BootstrapInputCurrency": {
+    "ParsingErrorMessage": "Поле {0} должно быть числом."
+  },
   "BootstrapBlazor.Components.ResultDialogOption": {
     "ButtonYesText": "Да",
     "ButtonNoText": "Нет",

localization/th-TH.json

@@ -78,6 +78,9 @@
   "BootstrapBlazor.Components.BootstrapInputNumber": {
     "ParsingErrorMessage": "ฟิลด์ {0} ต้องเป็นตัวเลข"
   },
+  "BootstrapBlazor.Components.BootstrapInputCurrency": {
+    "ParsingErrorMessage": "ฟิลด์ {0} ต้องเป็นตัวเลข"
+  },
   "BootstrapBlazor.Components.ResultDialogOption": {
     "ButtonYesText": "ใช่",
     "ButtonNoText": "ไม่ใช่",

localization/uk-UA.json

@@ -78,6 +78,9 @@
   "BootstrapBlazor.Components.BootstrapInputNumber": {
     "ParsingErrorMessage": "Поле {0} має бути числом."
   },
+  "BootstrapBlazor.Components.BootstrapInputCurrency": {
+    "ParsingErrorMessage": "Поле {0} має бути числом."
+  },
   "BootstrapBlazor.Components.ResultDialogOption": {
     "ButtonYesText": "Так",
     "ButtonNoText": "Ні",

localization/zh-TW.json

@@ -78,6 +78,9 @@
   "BootstrapBlazor.Components.BootstrapInputNumber": {
     "ParsingErrorMessage": "{0}欄位值必須為 Number 類型"
   },
+  "BootstrapBlazor.Components.BootstrapInputCurrency": {
+    "ParsingErrorMessage": "{0}欄位值必須為 Number 類型"
+  },
   "BootstrapBlazor.Components.ResultDialogOption": {
     "ButtonYesText": "確認",
     "ButtonNoText": "取消",

src/BootstrapBlazor.Server/Components/Samples/InputCurrency.razor

@@ -0,0 +1,73 @@
+@page "/input-currency"
+
+@inject IStringLocalizer<InputCurrency> Localizer
+
+<h3>@Localizer["InputCurrencyTitle"]</h3>
+<h4>@Localizer["InputCurrencyDescription"]</h4>
+<h4>@((MarkupString)Localizer["InputCurrencyMemo"].Value)</h4>
+
+<DemoBlock Title="@Localizer["InputCurrencyNormalTitle"]"
+           Introduction="@Localizer["InputCurrencyNormalIntro"]"
+           Name="Normal">
+    <div class="demo-input-currency">
+        <BootstrapInputCurrency Value="@BindValue" IsSelectAllTextOnFocus="true" />
+    </div>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["InputCurrencyCultureTitle"]"
+           Introduction="@Localizer["InputCurrencyCultureIntro"]"
+           Name="Culture">
+    <div class="row g-2 form-inline">
+        <div class="col-12 col-sm-6">
+            <BootstrapInputCurrency Value="@BindValue" ShowLabel="true" DisplayText="double" CultureInfo="@CultureInfo.GetCultureInfo("en-Us")" FormatString="C" />
+        </div>
+        <div class="col-12 col-sm-6">
+            <Display Value="@BindValue"></Display>
+        </div>
+        <section ignore class="my-3">@((MarkupString)Localizer["InputCurrencyCultureIntro2"].Value)</section>
+        <div class="col-12 col-sm-6">
+            <BootstrapInputCurrency Value="@NullableValue" ShowLabel="true" DisplayText="double?" CultureInfo="@CultureInfo.GetCultureInfo("pt-BR")" FormatString="C" />
+        </div>
+        <div class="col-12 col-sm-6">
+            <Display Value="@NullableValue"></Display>
+        </div>
+    </div>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["InputCurrencyPercentTitle"]"
+           Introduction="@Localizer["InputCurrencyPercentIntro"]"
+           Name="Percent">
+    <div class="row g-2 form-inline">
+        <div class="col-12 col-sm-6">
+            <BootstrapInputCurrency Value="@BindDecimalValue" IsSelectAllTextOnFocus="true" FormatString="P2" />
+        </div>
+        <div class="col-12 col-sm-6">
+            <Display Value="@BindDecimalValue"></Display>
+        </div>
+    </div>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["InputCurrencyCustomizeTitle"]"
+           Introduction="@Localizer["InputCurrencyCustomizeIntro"]"
+           Name="Customize">
+    <div class="row g-2 form-inline">
+        <div class="col-12 col-sm-6">
+            <BootstrapInputCurrency Value="@BindDecimalValue" IsSelectAllTextOnFocus="true" Formatter="FormatCustomize" />
+        </div>
+        <div class="col-12 col-sm-6">
+            <Display Value="@BindDecimalValue"></Display>
+        </div>
+    </div>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["InputCurrencyRangeTitle"]"
+           Introduction="@Localizer["InputCurrencyRangeIntro"]"
+           Name="Range">
+    <div class="row g-2 form-inline">
+        <div class="col-12 col-sm-6">
+            <BootstrapInputCurrency Value="@BindMaxMinValue" Max="10" Min="1" FormatString="N2" IsSelectAllTextOnFocus="true" />
+        </div>
+    </div>
+</DemoBlock>
+
+<AttributeTable Type="typeof(BootstrapInputCurrency<>)" />

src/BootstrapBlazor.Server/Components/Samples/InputCurrency.razor.cs

@@ -0,0 +1,56 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
+
+using System.Globalization;
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+public partial class InputCurrency
+{
+    /// <summary>
+    /// BindValue
+    /// </summary>
+    public double BindValue { get; set; } = 5;
+
+    /// <summary>
+    /// 
+    /// </summary>
+    public decimal BindDecimalValue { get; set; } = 1898.78m;
+
+    /// <summary>
+    /// 
+    /// </summary>
+    public double BindMaxMinValue { get; set; } = 9.23;
+
+    /// <summary>
+    /// 
+    /// </summary>
+    public double? NullableValue { get; set; } = 5;
+
+    private string Format1(double value)
+    {
+        double.TryParse("$235,623.235", NumberStyles.Any, CultureInfo.GetCultureInfo("en-US"), out var number);
+        double.TryParse("¥1235,623.235", NumberStyles.Currency, CultureInfo.GetCultureInfo("zh-CN"), out var number1);
+        return $"$ {value.ToString("n0")}";
+    }
+    private string Format(double? value)
+    {
+        if (value != null)
+            return $"$ {value?.ToString("n0")}";
+        else
+            return null;
+    }
+
+    private string FormatCustomize(decimal value)
+    {
+        return $"RMB {value.ToString("n2")}";
+    }
+
+    private (bool Success, decimal Value) Parser(string arg1, CultureInfo info)
+    {
+        var ret = (true, decimal.Parse(arg1.Replace("%", ""), info));
+        return ret;
+    }
+}

src/BootstrapBlazor.Server/Components/Samples/InputCurrency.razor.css

@@ -0,0 +1,7 @@
+.demo-input-currency {
+    width: 200px;
+}
+
+    .demo-input-currency > ::deep .form-control {
+        width: inherit;
+    }

src/BootstrapBlazor.Server/Components/Samples/InputNumbers.razor.cs

@@ -1,4 +1,4 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the Apache 2.0 License
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -2771,6 +2771,22 @@
     "IntersectionObserverIntro": "By setting <code>IsIntersectionObserver=\"true\"</code> to enable lazy loading, the image will not be loaded when it is in the invisible area, and will be loaded only when it is about to be visible.",
     "IntersectionObserverTitle": "Intersection Observer"
   },
+  "BootstrapBlazor.Server.Components.Samples.InputCurrency": {
+    "InputCurrencyCultureIntro": "Specify culture information, for example: en-US, zh-CN",
+    "InputCurrencyCultureIntro2": "Specify Brazilian Portuguese, for example: pt-BR",
+    "InputCurrencyCultureTitle": "Culture-specific usage",
+    "InputCurrencyCustomizeIntro": "Use the <code>Formatter</code> callback to achieve custom format usage",
+    "InputCurrencyCustomizeTitle": "Custom format usage",
+    "InputCurrencyDescription": "Only allows standard numeric values and provides formatting capabilities, for example: entering 12345.78 displays as 12,345.78 with thousand separators; as ¥12,345.78 for currency; and as 12,345.78% for percentage.",
+    "InputCurrencyMemo": "This component is actually an extension of the <code>InputNumbers</code> component, designed to meet the need to display formatted numeric values such as currency and percentages in the <code>UI</code>.",
+    "InputCurrencyNormalIntro": "<code>Number</code> numeric type displays a text box, automatically bringing up the numeric keyboard on mobile devices",
+    "InputCurrencyNormalTitle": "Basic usage",
+    "InputCurrencyPercentIntro": "You can use <code>Formatter</code> or <code>FormatString</code> to achieve percentage display",
+    "InputCurrencyPercentTitle": "Percentage usage",
+    "InputCurrencyRangeIntro": "Set <code>Max</code> and <code>Min</code> to control the numeric range 1-10",
+    "InputCurrencyRangeTitle": "Range limitation usage",
+    "InputCurrencyTitle": "InputCurrency"
+  },
   "BootstrapBlazor.Server.Components.Samples.InputGroups": {
     "InputGroupsCheckboxIntro": "Add <code>Checkbox</code> or <code>CheckboxList</code> to the <code>InputGroup</code>",
     "InputGroupsCheckboxTitle": "Checkbox",
@@ -6067,7 +6083,6 @@
     "Picture.Required": "{0} is required"
   },
   "BootstrapBlazor.Server.Components.Samples.ValidateForms": {
-    "AsyncValidationError": "The user name already exists.",
     "AsyncValidationUserName": "User name",
     "ChangeButtonText": "Change",
     "CustomValidationFormComment1": "Add mailbox validation rules",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -2771,6 +2771,22 @@
     "IntersectionObserverIntro": "通过设置 <code>IsIntersectionObserver=\"true\"</code> 开启懒加载特性，当图片在不可见区域时不加载图片，当图片即将可见时才开始加载图片",
     "IntersectionObserverTitle": "懒加载"
   },
+  "BootstrapBlazor.Server.Components.Samples.InputCurrency": {
+    "InputCurrencyCultureIntro": "自行指定文化信息，例如：en-US、zh-CN",
+    "InputCurrencyCultureIntro2": "指定巴西葡萄牙语，例如：pt-BR",
+    "InputCurrencyCultureTitle": "指文化用法",
+    "InputCurrencyCustomizeIntro": "使用 <code>Formatter</code> 回调来实现自定义格式用法",
+    "InputCurrencyCustomizeTitle": "自定义格式用法",
+    "InputCurrencyDescription": "仅允许输入标准的数字值，并提供格式化功能，例如：输入12345.78，千分位显示：12,345.78；货币显示：¥12,345.78；百分比显示：12,345.78%",
+    "InputCurrencyMemo": "本组件，实际上是 <code>InputNumbers</code> 组件的扩展，以满足有需要在 <code>UI</code> 中显示货币、百分比等格式化数值的需求",
+    "InputCurrencyNormalIntro": "<code>Number</code> 数值类型显示文本框，移动端自动弹出数字键盘",
+    "InputCurrencyNormalTitle": "基础用法",
+    "InputCurrencyPercentIntro": "可使用 <code>Formatter</code> 或 <code>FormatString</code> 来实现百分比显示",
+    "InputCurrencyPercentTitle": "百分比用法",
+    "InputCurrencyRangeIntro": "设置 <code>Max</code> <code>Min</code> 来控制数值区间范围 1-10",
+    "InputCurrencyRangeTitle": "区间限制用法",
+    "InputCurrencyTitle": "InputCurrency 组件"
+  },
   "BootstrapBlazor.Server.Components.Samples.InputGroups": {
     "InputGroupsCheckboxIntro": "往 <code>InputGroup</code> 里面增加 <code>Checkbox</code> 或者 <code>CheckboxList</code>",
     "InputGroupsCheckboxTitle": "复选框组合",
@@ -6067,7 +6083,6 @@
     "Picture.Required": "上传文件不能为空"
   },
   "BootstrapBlazor.Server.Components.Samples.ValidateForms": {
-    "AsyncValidationError": "用户名已存在",
     "AsyncValidationUserName": "用户名",
     "ChangeButtonText": "更改组件",
     "CustomValidationFormComment1": "增加邮箱验证规则",

src/BootstrapBlazor.Server/docs.json

@@ -104,6 +104,7 @@
     "iframe": "IFrames",
     "image-viewer": "ImageViewers",
     "input-number": "InputNumbers",
+    "input-currency": "InputCurrency",
     "input": "Inputs",
     "input-group": "InputGroups",
     "ip": "Ips",

src/BootstrapBlazor/Components/InputCurrency/BootstrapInputCurrency.razor

@@ -0,0 +1,17 @@
+@namespace BootstrapBlazor.Components
+@typeparam TValue
+@inherits BootstrapInputNumberBase<TValue>
+
+@if (IsShowLabel)
+{
+    <BootstrapLabel required="@Required" for="@Id" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
+}
+@RenderInput
+
+@code {
+    RenderFragment RenderInput =>
+    @<input @attributes="AdditionalAttributes" min="@Min" max="@Max" id="@Id" inputmode="@InputModeString"
+    placeholder="@PlaceHolder" class="@InputClassString"
+    readonly="@ReadonlyString"disabled="@Disabled"
+    @bind-value="@CurrentValueAsString" @bind-value:event="@EventString" @onblur="@OnBlur" />;
+}