Packages

tailwind_live_components

0.3.7
0.6.4 0.6.3 0.6.2 0.6.1 0.6.0 0.5.7 0.5.6 0.5.5 0.5.4 0.5.3 0.5.2 0.5.1 0.5.0 0.4.2 0.4.1 0.4.0 0.3.7 0.3.6 0.3.5 0.3.4 0.3.3 0.3.2 0.3.1 0.3.0 0.2.8 0.2.7 0.2.6 0.2.5 0.2.4 0.2.3 0.2.2 0.2.1 0.2.0 0.1.11 0.1.10 0.1.9 0.1.8 0.1.7 0.1.6 0.1.5 0.1.4 0.1.3 0.1.2 0.1.1 0.1.0

Tailwind Live Components is a set of HEEX components that builds LiveView components with Tailwind 2.0+

HexDocs

Current section

Files

Jump to
Readme
45 Versions
3 Dependencies
Dependants
Files
Activity
tailwind_live_components priv static hooks tel_input.js
Raw

priv/static/hooks/tel_input.js 

export default {

  $valueInput: null,

  $displayInput: null,



  mounted() {

    this.$valueInput = this.el.querySelector('[data-tlc-ref="valueInput"]')

    this.$displayInput = this.el.querySelector('[data-tlc-ref="displayInput"]')

    this.$displayInput.addEventListener("input", (event) => {

      this.handleInput(event.target.value)

    })



    this.handleInput(this.$valueInput.value)

  },



  handleInput(input) {

    let value = this.scrubInput(input)



    this.$displayInput.value = this.formatDisplay(value),

      this.$valueInput.value = value,

      this.$valueInput.dispatchEvent(new CustomEvent('change', { bubbles: true }));

  },



  scrubInput(input) {

    return (input.replace(/\D/g, '').substring(0, 10).match(/^[2-9]{1}\d{0,9}$/) || [""])[0]

  },



  formatDisplay(input) {

    if (input === null) return "";



    const areaCode = input.substring(0, 3);

    const middle = input.substring(3, 6);

    const last = input.substring(6, 10);



    if (input.length > 6) {

      return `(${areaCode}) ${middle}-${last}`

    } else if (input.length > 3) {

      return `(${areaCode}) ${middle}`

    } else if (input.length > 0) {

      return `(${areaCode}`

    }



    return input

  },

}