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/InputCurrencies.razor

@@ -0,0 +1,59 @@
+@page "/input-currency"
+
+@inject IStringLocalizer<InputCurrencies> Localizer
+
+<h3>@Localizer["InputCurrencyTitle"]</h3>
+<h4>@Localizer["InputCurrencyDescription"]</h4>
+<h4>@((MarkupString)Localizer["InputCurrencyMemo"].Value)</h4>
+
+<DemoBlock Title="@Localizer["InputCurrencyNormalTitle"]"
+           Introduction="@Localizer["InputCurrencyNormalIntro"]"
+           Name="Normal">
+    <section ignore>
+        <div class="form-inline row g-2">
+            <div class="col-12 col-sm-6">
+                <Switch @bind-Value="@_showIsoCurrencySymbol" ShowLabel="true" DisplayText="Iso"></Switch>
+            </div>
+            <div class="col-12 col-sm-6">
+                <Switch @bind-Value="@_showClearIcon" ShowLabel="true" DisplayText="Cleable"></Switch>
+            </div>
+        </div>
+    </section>
+    <div class="demo-input-currency">
+        <BootstrapInputCurrency @bind-Value="@_value" style="width: 160px;"
+                                ShowIsoCurrencySymbol="@_showIsoCurrencySymbol" IsClearable="@_showClearIcon">
+        </BootstrapInputCurrency>
+    </div>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["InputCurrencyCultureTitle"]"
+           Introduction="@Localizer["InputCurrencyCultureIntro"]"
+           Name="CultureName">
+    <section ignore>@((MarkupString)Localizer["InputCurrencyCultureDesc"].Value)</section>
+    <div class="row g-2">
+        <div class="col-12 col-sm-6">
+            <BootstrapInputCurrency Value="@_value" ShowLabel="true" DisplayText="人民币" CultureName="zh-CN" Decimals="3" />
+        </div>
+        <div class="col-12 col-sm-6">
+            <BootstrapInputCurrency Value="@_value" ShowLabel="true" DisplayText="葡萄牙货币" CultureName="pt-BR" />
+        </div>
+    </div>
+</DemoBlock>
+
+<DemoBlock Title="货币符号模板"
+           Introduction="通过设置 <code>SymbolTemplate</code> 自定义货币显示内容"
+           Name="SymbolTemplate">
+    <BootstrapInputCurrency Value="@_value" style="width: 160px;">
+        <SymbolTemplate>
+            <span class="fa-solid fa-flag"></span>
+        </SymbolTemplate>
+    </BootstrapInputCurrency>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["InputCurrencyRangeTitle"]"
+           Introduction="@Localizer["InputCurrencyRangeIntro"]"
+           Name="Range">
+    <BootstrapInputCurrency Value="@_value2" Max="10" Min="1" style="width: 160px;" />
+</DemoBlock>
+
+<AttributeTable Type="typeof(BootstrapInputCurrency)" />

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

@@ -0,0 +1,20 @@
+// 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
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// <para lang="zh">InputCurrencies 组件</para>
+/// <para lang="en">InputCurrencies component</para>
+/// </summary>
+public partial class InputCurrencies
+{
+    private decimal _value = 1234.56m;
+
+    private decimal _value2 = 2m;
+
+    private bool _showIsoCurrencySymbol;
+    private bool _showClearIcon;
+}

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/Extensions/MenusLocalizerExtensions.cs

@@ -446,6 +446,11 @@ void AddForm(DemoMenuItem item)
                     Url = "input-number"
                 },
                 new()
+                {
+                    Text = Localizer["BootstrapInputCurrency"],
+                    Url = "input-currency"
+                },
+                new()
                 {
                     Text = Localizer["BootstrapInputGroup"],
                     Url = "input-group"

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

@@ -174,6 +174,7 @@
     "BootstrapInput": "BootstrapInput",
     "BootstrapInputGroup": "BootstrapInputGroup",
     "BootstrapInputNumber": "BootstrapInputNumber",
+    "BootstrapInputCurrency": "BootstrapInputCurrency",
     "BootstrapLabel": "Labels",
     "Breadcrumb": "Breadcrumb",
     "Breakpoints": "Breakpoints",
@@ -2771,6 +2772,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.InputCurrencies": {
+    "InputCurrencyCultureDesc": "Specify Brazilian Portuguese, for example: <code>pt-BR</code>; note that the thousand separator is a <code>dot</code> and the decimal separator is a <code>comma</code>; you can specify the number of decimal places using the <code>Decimals</code> parameter",
+    "InputCurrencyCultureIntro": "Specify culture information, for example: <code>en-US, zh-CN</code>",
+    "InputCurrencyCultureTitle": "Specify culture name",
+    "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 +6084,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

@@ -174,6 +174,7 @@
     "BootstrapInput": "输入框 BootstrapInput",
     "BootstrapInputGroup": "输入组 BootstrapInputGroup",
     "BootstrapInputNumber": "数字框 BootstrapInputNumber",
+    "BootstrapInputCurrency": "货币框 BootstrapInputCurrency",
     "BootstrapLabel": "表单标签",
     "Breadcrumb": "面包屑 Breadcrumb",
     "Breakpoints": "断点阈值",
@@ -2771,6 +2772,22 @@
     "IntersectionObserverIntro": "通过设置 <code>IsIntersectionObserver=\"true\"</code> 开启懒加载特性，当图片在不可见区域时不加载图片，当图片即将可见时才开始加载图片",
     "IntersectionObserverTitle": "懒加载"
   },
+  "BootstrapBlazor.Server.Components.Samples.InputCurrencies": {
+    "InputCurrencyCultureDesc": "指定巴西葡萄牙语，例如：<code>pt-BR</code>；注意千分符为 <code>点号</code>，小数点符号为 <code>逗号</code>；可以通过 <code>Decimals</code> 指定小数位数",
+    "InputCurrencyCultureIntro": "自行指定文化信息，例如：<code>en-US、zh-CN</code>",
+    "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 +6084,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": "InputCurrencies",
     "input": "Inputs",
     "input-group": "InputGroups",
     "ip": "Ips",
@@ -406,6 +407,7 @@
       "BootstrapInputEventBase",
       "BootstrapInputGroup",
       "BootstrapInputGroupIcon",
+      "BootstrapInputCurrency",
       "BootstrapInputNumber",
       "BootstrapInputNumberBase",
       "Button",

src/BootstrapBlazor/Components/InputCurrency/BootstrapInputCurrency.razor

@@ -0,0 +1,39 @@
+@namespace BootstrapBlazor.Components
+@inherits BootstrapInputBase<decimal>
+
+@if (IsShowLabel)
+{
+    <BootstrapLabel required="@Required" for="@Id" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
+}
+
+<div @attributes="AdditionalAttributes" class="bb-input-currency input-group" id="@Id">
+    <div class="input-group-text">
+        @if (SymbolTemplate != null)
+        {
+            @SymbolTemplate
+        }
+        else
+        {
+            @_currencySymbol
+        }
+    </div>
+    @if (IsClearable && !IsDisabled && !Readonly)
+    {
+        <div class="bb-clearable-input">
+            @RenderInput
+            <i class="@ClearableIconString" @onclick="OnClickClear"></i>
+        </div>
+    }
+    else
+    {
+        @RenderInput
+    }
+</div>
+
+@code {
+    RenderFragment RenderInput =>
+    @<input type="text" inputmode="decimal" id="@InputId"
+            placeholder="@PlaceHolder" class="@InputClassString"
+            readonly="@ReadonlyString" disabled="@Disabled"
+            @bind="@CurrentValueAsString" @onblur="@OnBlur" />;
+}