From d313d8a9e893fff0df79da531fccab843ed8a61e Mon Sep 17 00:00:00 2001 From: stephann <3025661+stephannv@users.noreply.github.com> Date: Mon, 11 Nov 2024 11:41:50 -0300 Subject: [PATCH] Add MaskedInput component --- lib/ruby_ui/index.js | 2 ++ lib/ruby_ui/masked_input/masked_input.rb | 15 +++++++++++++++ .../masked_input/masked_input_controller.js | 9 +++++++++ package.json | 1 + test/ruby_ui/masked_input_test.rb | 17 +++++++++++++++++ yarn.lock | 5 +++++ 6 files changed, 49 insertions(+) create mode 100644 lib/ruby_ui/masked_input/masked_input.rb create mode 100644 lib/ruby_ui/masked_input/masked_input_controller.js create mode 100644 test/ruby_ui/masked_input_test.rb diff --git a/lib/ruby_ui/index.js b/lib/ruby_ui/index.js index 42596ba2..00c16126 100644 --- a/lib/ruby_ui/index.js +++ b/lib/ruby_ui/index.js @@ -16,6 +16,7 @@ import DialogController from "./dialog/dialog_controller"; import DropdownMenuController from "./dropdown_menu/dropdown_menu_controller"; import FormFieldController from "./form/form_field_controller"; import HoverCardController from "./hover_card/hover_card_controller"; +import MaskedInputController from "./masked_input/masked_input_controller"; import PopoverController from "./popover/popover_controller"; import TabsController from "./tabs/tabs_controller"; import ThemeToggleController from "./theme_toggle/theme_toggle_controller"; @@ -51,6 +52,7 @@ function initialize(application) { registerIfNotExists("ruby-ui--dropdown-menu", DropdownMenuController); registerIfNotExists("ruby-ui--form-field", FormFieldController); registerIfNotExists("ruby-ui--hover-card", HoverCardController); + registerIfNotExists("ruby-ui--masked-input", MaskedInputController); registerIfNotExists("ruby-ui--popover", PopoverController); registerIfNotExists("ruby-ui--tabs", TabsController); registerIfNotExists("ruby-ui--theme-toggle", ThemeToggleController); diff --git a/lib/ruby_ui/masked_input/masked_input.rb b/lib/ruby_ui/masked_input/masked_input.rb new file mode 100644 index 00000000..007fb330 --- /dev/null +++ b/lib/ruby_ui/masked_input/masked_input.rb @@ -0,0 +1,15 @@ +# frozen_string_literal: true + +module RubyUI + class MaskedInput < Base + def view_template + Input(type: "text", **attrs) + end + + private + + def default_attrs + {data: {controller: "ruby-ui--masked-input"}} + end + end +end diff --git a/lib/ruby_ui/masked_input/masked_input_controller.js b/lib/ruby_ui/masked_input/masked_input_controller.js new file mode 100644 index 00000000..dfea0945 --- /dev/null +++ b/lib/ruby_ui/masked_input/masked_input_controller.js @@ -0,0 +1,9 @@ +import { Controller } from "@hotwired/stimulus"; +import { MaskInput } from "maska"; + +// Connects to data-controller="ruby-ui--masked-input" +export default class extends Controller { + connect() { + new MaskInput(this.element) + } +} diff --git a/package.json b/package.json index 95b2236f..b9f31a4f 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "chart.js": "^4.4.1", "date-fns": "^2.30.0", "fuse.js": "^7.0.0", + "maska": "^3.0.3", "motion": "^10.16.4", "mustache": "^4.2.0", "tippy.js": "^6.3.7" diff --git a/test/ruby_ui/masked_input_test.rb b/test/ruby_ui/masked_input_test.rb new file mode 100644 index 00000000..d9d4580e --- /dev/null +++ b/test/ruby_ui/masked_input_test.rb @@ -0,0 +1,17 @@ +# frozen_string_literal: true + +require "test_helper" + +class RubyUI::MaskedInputTest < Minitest::Test + include Phlex::Testing::ViewHelper + + def test_render + output = phlex_context do + RubyUI.MaskedInput(data: {maska: "#####-###"}) + end + + assert_match(/