Merge pull request #13960 from craftcms/feature/add-money-field-helpers

Add money input field helpers
craftcms · Dec 14, 2023 · cedd0ba · cedd0ba
2 parents 4ec99c7 + 25156a0
commit cedd0ba
Show file tree

Hide file tree

Showing 10 changed files with 77 additions and 36 deletions.
diff --git a/CHANGELOG-WIP.md b/CHANGELOG-WIP.md
@@ -208,6 +208,8 @@
 - Added `craft\helpers\Cp::elementCardHtml()`.
 - Added `craft\helpers\Cp::elementChipHtml()`.
 - Added `craft\helpers\Cp::elementIndexHtml()`.
+- Added `craft\helpers\Cp::moneyFieldHtml()`.
+- Added `craft\helpers\Cp::moneyInputHtml()`.
 - Added `craft\helpers\Cp::normalizeMenuItems()`.
 - Added `craft\helpers\Cp::siteMenuItems()`.
 - Added `craft\helpers\Db::defaultCollation()`.

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Release Notes for Craft CMS 4
 
+## Unreleased (5.x)
+
+- Added `craft\helpers\Cp::moneyFieldHtml()`.
+- Added `craft\helpers\Cp::moneyInputHtml()`.
+
 ## 5.0.0-alpha.1 - 2023-12-13
 
 ### Content Management

diff --git a/src/fields/Money.php b/src/fields/Money.php
@@ -14,6 +14,7 @@
 use craft\base\SortableFieldInterface;
 use craft\fields\conditions\NumberFieldConditionRule;
 use craft\gql\types\Money as MoneyType;
+use craft\helpers\Cp;
 use craft\helpers\Db;
 use craft\helpers\MoneyHelper;
 use craft\validators\MoneyValidator;
@@ -274,8 +275,10 @@ protected function inputHtml(mixed $value, ?ElementInterface $element, bool $inl
             'currencySymbol' => Craft::$app->getFormattingLocale()->getCurrencySymbol($this->currency),
         ]);
 
-        return $view->renderTemplate('_components/fieldtypes/Money/input.twig', [
+        return Cp::moneyInputHtml([
             'id' => $this->getInputId(),
+            'name' => $this->handle,
+            'size' => $this->size,
             'currency' => $this->currency,
             'currencyLabel' => $currencyLabel,
             'showCurrency' => $this->showCurrency,

diff --git a/src/helpers/Cp.php b/src/helpers/Cp.php
@@ -1461,6 +1461,33 @@ public static function lightswitchFieldHtml(array $config): string
         return static::fieldHtml('template:_includes/forms/lightswitch.twig', $config);
     }
 
+    /**
+     * Renders a money input’s HTML.
+     *
+     * @param array $config
+     * @return string
+     * @throws TemplateLoaderException
+     * @since 5.0.0
+     */
+    public static function moneyInputHtml(array $config): string
+    {
+        return static::renderTemplate('_includes/forms/money.twig', $config);
+    }
+
+    /**
+     * Renders a money field’s HTML.
+     *
+     * @param array $config
+     * @return string
+     * @throws TemplateLoaderException
+     * @since 5.0.0
+     */
+    public static function moneyFieldHtml(array $config): string
+    {
+        $config['id'] = $config['id'] ?? 'money' . mt_rand();
+        return static::fieldHtml('template:_includes/forms/money.twig', $config);
+    }
+
     /**
      * Renders a select input.
      *

diff --git a/src/templates/_components/fieldtypes/Money/input.twig b/src/templates/_components/fieldtypes/Money/input.twig
diff --git a/src/templates/_includes/forms/money.twig b/src/templates/_includes/forms/money.twig
@@ -11,7 +11,16 @@
 {% set decimalSeparator = decimalSeparator ?? craft.app.formattingLocale.getNumberSymbol(constant('craft\\i18n\\Locale::SYMBOL_DECIMAL_SEPARATOR')) -%}
 {% set groupSeparator = groupSeparator ?? craft.app.formattingLocale.getNumberSymbol(constant('craft\\i18n\\Locale::SYMBOL_GROUPING_SEPARATOR')) -%}
 {% set currencyLabel = currencyLabel ?? null  %}
+{% set showClear = showClear ?? true %}
+{% set inputAttributes = {
+  name: "#{name}[value]",
+}|merge(inputAttributes ?? {}) %}
 {% set size = size ?? null %}
+{% set jsSettings = {
+  decimalSeparator: decimalSeparator,
+  groupSeparator: groupSeparator,
+  decimals: decimals,
+  }|merge(jsSettings ?? {}) %}
 
 {{ hiddenInput("#{name}[locale]", formattingLocale) }}
 
@@ -22,25 +31,21 @@
         </div>
     {% endif %}
     {% include '_includes/forms/text' with {
-        inputAttributes: {
-            name: "#{name}[value]",
-        }
+        inputAttributes: inputAttributes,
     } %}
-    <div class="money-clear">
-        {{ forms.button({
-            attributes: {
-                title: 'Clear'|t('app'),
-                class: 'clear-btn hidden',
-                'aria-label': 'Clear'|t('app'),
-            }
-        }) }}
-    </div>
+    {% if showClear %}
+        <div class="money-clear">
+            {{ forms.button({
+                attributes: {
+                    title: 'Clear'|t('app'),
+                    class: 'clear-btn hidden',
+                    'aria-label': 'Clear'|t('app'),
+                }
+            }) }}
+        </div>
+    {% endif %}
 </div>
 
 {% js %}
-new Craft.Money('{{ id|namespaceInputId }}', {
-    decimalSeparator: '{{ decimalSeparator }}',
-    groupSeparator: '{{ groupSeparator }}',
-    decimals: {{ decimals }},
-});
+new Craft.Money('{{ id|namespaceInputId }}', {{ jsSettings|json_encode|raw }});
 {% endjs %}
diff --git a/src/web/assets/money/dist/Money.js b/src/web/assets/money/dist/Money.js
diff --git a/src/web/assets/money/dist/Money.js.map b/src/web/assets/money/dist/Money.js.map
diff --git a/src/web/assets/money/dist/css/Money.css.map b/src/web/assets/money/dist/css/Money.css.map
diff --git a/src/web/assets/money/src/Money.js b/src/web/assets/money/src/Money.js
@@ -20,18 +20,29 @@ import './Money.scss';
 
         this.$field.on('focus', $.proxy(this, 'onFocus'));
         this.$field.on('keyup', $.proxy(this, 'onKeyUp'));
-        this.$clearBtn.on('click', $.proxy(this, 'onClearBtnClick'));
+        if (this.$clearBtn) {
+          this.$clearBtn.on('click', $.proxy(this, 'onClearBtnClick'));
+        }
 
         if (this.$field.val() != '') {
           this.updateInputMask();
         }
+
+        this.$field.data('money-input', this);
       },
 
       showClearBtn: function () {
+        if (!this.$clearBtn) {
+          return;
+        }
+
         this.$clearBtn.removeClass('hidden');
       },
 
       hideClearBtn: function () {
+        if (!this.$clearBtn) {
+          return;
+        }
         this.$clearBtn.addClass('hidden');
       },
 
@@ -63,6 +74,7 @@ import './Money.scss';
         this.showClearBtn();
         const opts = {
           digits: this.settings.decimals,
+          placeholder: this.settings.placeholder,
           groupSeparator: this.settings.groupSeparator,
           radixPoint: this.settings.decimalSeparator,
         };
@@ -79,6 +91,7 @@ import './Money.scss';
         decimalSeparator: '.',
         groupSeparator: ',',
         decimals: 2,
+        placeholder: '0',
         maskOptions: {
           alias: 'currency',
           autoGroup: false,