feat(masked-input): add save_unmasked option to submit raw value

Author: karinevieira

lib/ruby_ui/masked_input/masked_input.rb

@@ -2,8 +2,18 @@
 
 module RubyUI
   class MaskedInput < Base
+    def initialize(save_unmasked: false, **attrs)
+      @save_unmasked = save_unmasked
+      super(**attrs)
+    end
+
     def view_template
-      Input(type: "text", **attrs)
+      if @save_unmasked
+        Input(type: "text", **attrs.merge(name: "#{attrs[:name]}-masked"))
+        input(type: "hidden", name: attrs[:name], value: attrs[:value])
+      else
+        Input(type: "text", **attrs)
+      end
     end
 
     private

lib/ruby_ui/masked_input/masked_input_controller.js

@@ -5,5 +5,18 @@ import { MaskInput } from "maska";
 export default class extends Controller {
   connect() {
     new MaskInput(this.element)
+    this.#boundSync = this.#sync.bind(this);
+    this.element.addEventListener("maska", this.#boundSync);
+  }
+
+  disconnect() {
+    this.element.removeEventListener("maska", this.#boundSync);
+  }
+
+  #boundSync = null;
+
+  #sync(event) {
+    const hidden = this.element.nextElementSibling;
+    if (hidden?.type === "hidden") hidden.value = event.detail.unmasked;
   }
 }

test/ruby_ui/masked_input_test.rb

@@ -11,5 +11,17 @@ def test_render
     assert_match(/<input type="text"/, output)
     assert_match(/data-controller="ruby-ui--masked-input"/, output)
     assert_match(/data-maska="#####-###"/, output)
+    refute_match(/<input type="hidden"/, output)
+  end
+
+  def test_render_with_save_unmasked
+    output = phlex do
+      RubyUI.MaskedInput(save_unmasked: true, name: "agency", value: "0000", data: {maska: "####"})
+    end
+
+    assert_match(/<input type="text"/, output)
+    assert_match(/<input type="hidden" name="agency" value="0000"/, output)
+    assert_match(/data-maska="####"/, output)
+    assert_match(/data-controller="ruby-ui--masked-input"/, output)
   end
 end