MaskedInput

# 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

# frozen_string_literal: true

class Views::Docs::MaskedInput < Views::Base
  def view_template
    component = "MaskedInput"

    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
      render Docs::Header.new(title: "MaskedInput", description: "Displays a form input field with applied mask.")

      Heading(level: 2) { "Usage" }

      Text do
        plain "For advanced usage, check out the "
        InlineLink(href: "https://beholdr.github.io/maska/v3", target: "_blank") { "Maska website" }
        plain "."
      end

      render Docs::VisualCodeExample.new(title: "Phone number", context: self) do
        <<~RUBY
          div(class: 'grid w-full max-w-sm items-center gap-1.5') do
            MaskedInput(inputmode: "numeric", data: {maska: "(##) #####-####"})
          end
        RUBY
      end

      render Docs::VisualCodeExample.new(title: "Hex color code", context: self) do
        <<~RUBY
          div(class: 'grid w-full max-w-sm items-center gap-1.5') do
            MaskedInput(data: {maska: "!#HHHHHH", maska_tokens: "H:[0-9a-fA-F]"})
          end
        RUBY
      end

      render Docs::VisualCodeExample.new(title: "CPF / CNPJ", context: self) do
        <<~RUBY
          div(class: 'grid w-full max-w-sm items-center gap-1.5') do
            MaskedInput(inputmode: "numeric", data: {maska: "['###.###.###-##', '##.###.###/####-##']"})
          end
        RUBY
      end

      render Components::ComponentSetup::Tabs.new(component_name: component)

      render Docs::ComponentsTable.new(component_files(component))
    end
  end
end

import { Controller } from "@hotwired/stimulus";
import { MaskInput } from "maska";

// Connects to data-controller="ruby-ui--masked-input"
export default class extends Controller {
  connect() {
    this.mask = new MaskInput(this.element);
  }

  disconnect() {
    this.mask?.destroy();
    this.mask = null;
  }
}

rake stimulus:manifest:update

// with yarn
yarn add maska
// with npm
npm install maska
// with importmaps
bin/importmap pin maska