Update masked input

Author: Flo0807

assets/js/hooks/_masked_input.js

@@ -8,7 +8,14 @@ export default {
     this.initializeMask()
   },
   initializeMask () {
-    const maskPattern = this.el.dataset.unit ? `num ${this.el.dataset.unit}` : 'num'
+    const maskPattern = this.el.dataset.maskPattern
+
+    console.log('Mask pattern:', maskPattern)
+
+    if (!maskPattern) {
+      console.error('You must provide a mask pattern in the data-masked-pattern attribute.')
+      return
+    }
 
     this.maskOptions = {
       mask: maskPattern,

lib/backpex/fields/currency.ex

@@ -13,6 +13,11 @@ defmodule Backpex.Fields.Currency do
       type: :string,
       default: "€"
     ],
+    unit_position: [
+      doc: "Position of the unit relative to the value, either `:before` or `:after`.",
+      type: {:in, [:before, :after]},
+      default: :before
+    ],
     radix: [
       doc:
         "Character used as the decimal separator, e.g. ',' or '.'. Make sure this value matches the one you've configured in your Money library.",
@@ -79,6 +84,8 @@ defmodule Backpex.Fields.Currency do
 
   @impl Backpex.Field
   def render_form(assigns) do
+    assigns = assign(assigns, :mask_pattern, build_mask_pattern(assigns.field_options))
+
     ~H"""
     <div>
       <Layout.field_container>
@@ -92,8 +99,8 @@ defmodule Backpex.Fields.Currency do
           help_text={Backpex.Field.help_text(@field_options, assigns)}
           phx-debounce={Backpex.Field.debounce(@field_options, assigns)}
           phx-throttle={Backpex.Field.throttle(@field_options, assigns)}
-          unit={@field_options[:unit]}
           radix={@field_options[:radix]}
+          mask_pattern={@mask_pattern}
           thousands_separator={@field_options[:thousands_separator]}
         />
       </Layout.field_container>
@@ -108,4 +115,7 @@ defmodule Backpex.Fields.Currency do
       ilike(fragment("CAST(? AS TEXT)", field(schema_name, ^field_name)), ^search_string)
     )
   end
+
+  defp build_mask_pattern(%{unit_position: :before} = field_option), do: "#{field_option.unit} num"
+  defp build_mask_pattern(%{unit_position: :after} = field_option), do: "num #{field_option.unit}"
 end

lib/backpex/html/form.ex

@@ -197,9 +197,9 @@ defmodule Backpex.HTML.Form do
   attr :translate_error_fun, :any, default: &Function.identity/1, doc: "a custom function to map form errors"
   attr :hide_errors, :boolean, default: false, doc: "if errors should be hidden"
 
-  attr :unit, :string, default: nil
   attr :radix, :string, default: "."
   attr :thousands_separator, :string, default: ","
+  attr :mask_pattern, :string, default: "num"
 
   attr :rest, :global, include: ~w(accept autocomplete capture cols disabled form list max maxlength min minlength
               multiple pattern placeholder readonly required rows size step)
@@ -217,14 +217,15 @@ defmodule Backpex.HTML.Form do
 
   def masked_input(assigns) do
     ~H"""
+
     <div class={["fieldset py-0", @class]}>
       <span :if={@label} class="label mb-1">{@label}</span>
       <div
         id={@id}
         phx-hook="BackpexMaskedInput"
         data-radix={@radix}
-        data-unit={@unit}
         data-thousands-separator={@thousands_separator}
+        data-mask-pattern={@mask_pattern}
       >
         <%!-- As the input ignores updates, we need to wrap it in a span to apply the styles correctly --%>
         <span class={[