NeoVier / elm-mask / Mask

This library helps you mask Strings and Floats

Strings

string : { mask : String, replace : Char } -> String -> String

Apply a simple mask to a String. You can customize the mask template and which Char to replace.

string { mask = "+1 ### ### ####", replace = '#' } "1234567890"
--> "+1 123 456 7890"

remove : { mask : String, replace : Char } -> String -> String

Remove a mask applied by string. This is often needed if you want to save just the value, and not the formatted/masked String.

remove { mask = "+1 ### ### ####", replace = '#' } "+1 123 456 7890"
--> "1234567890"

remove { mask = "+1 ### ### ####", replace = '#' } "1234567890"
-->"1234567890"

Floats


type DecimalDigits
    = Precisely Basics.Int
    | AtMost Basics.Int

When formatting with float and floatString, it can be useful to either use exactly an amount of decimal digits, or just to limit it to a certain amount.

float : DecimalDigits -> { decimalSeparator : String, thousandsSeparator : String } -> Basics.Float -> String

Mask a float to have a certain amount of DecimalDigits.

float (Precisely 2) { decimalSeparator = ".", thousandsSeparator = "" } 1234
--> "1234.00"

float (Precisely 2) { decimalSeparator = ",", thousandsSeparator = " " } 1234.5
--> "1 234,50"

float (Precisely 2) { decimalSeparator = ",", thousandsSeparator = "" } 123.4567
--> "123,45"

float (AtMost 2) { decimalSeparator = ".", thousandsSeparator = "," } 123
--> "123"

float (AtMost 2) { decimalSeparator = ".", thousandsSeparator = "," } 123.4
--> "123.4"

float (AtMost 2) { decimalSeparator = ".", thousandsSeparator = "," } 123.4567
--> "123.45"

floatString : DecimalDigits -> { decimalSeparator : String, thousandsSeparator : String } -> String -> Maybe String

Mask a float to have a certain amount of DecimalDigits, but using a String as an input. This is useful for input fields, where the onInput event returns a String that can be run through floatString. In case the input String is not a valid Float, this function returns Nothing, and an empty String is automatically converted to 0.

floatString (Precisely 2) { decimalSeparator = ",", thousandsSeparator = " " } "1234.5"
--> Just "1 234,50"

floatString (Precisely 2) { decimalSeparator = ".", thousandsSeparator = "," } "12a.4"
--> Nothing

floatString (Precisely 2) { decimalSeparator = ",", thousandsSeparator = "." } ""
--> Just "0,00"

Usually you'll want to use this function in your update like this:

update msg model =
    case msg of
        EnteredPrice price ->
            { model
                | price =
                    price
                        |> Mask.floatString (Mask.Precisely 2)
                        |> Maybe.withDefault model.price
            }

removeFloat : { decimalSeparator : String, thousandsSeparator : String } -> String -> String

Remove a mask applied by float or floatString

removeFloat { decimalSeparator = ",", thousandsSeparator = " " } "1 234,56"
--> "1234.56"

defaultSeparators : { decimalSeparator : String, thousandsSeparator : String }

A default value you can use for float and floatString.

updateFloatString : DecimalDigits -> { decimalSeparator : String, thousandsSeparator : String } -> { previousValue : String, newValue : String } -> String

Update a masked value you store in your Model. This is useful to provide a better UX when using masked input fields. For more details, check out this example on GitHub or in this Ellie link, which uses a custom element to make it even better!