feat: simple mode for mask directive

Allow string passing to set a mask without data-maska attribute

src/alpine/index.ts

@@ -9,11 +9,16 @@ export const xMaska = (Alpine: Alpine): void => {
 
     if (input == null || input?.type === 'file') return
 
+    let opts: MaskInputOptions = {}
+
+    const evaluator = directive.expression !== ''
+      ? utilities.evaluateLater<MaskInputOptions | string>(directive.expression)
+      : () => {}
+
     utilities.effect(() => {
-      const opts =
-        directive.expression !== ''
-          ? { ...utilities.evaluate<MaskInputOptions>(directive.expression) }
-          : {}
+      evaluator((expr) => {
+        opts = typeof expr === 'string' ? { mask: expr } : { ...expr }
+      })
 
       if (directive.value != null) {
         const updateArg = (detail: MaskaDetail): void => {
@@ -43,7 +48,5 @@ export const xMaska = (Alpine: Alpine): void => {
         masks.set(input, new MaskInput(input, opts))
       }
     })
-
-    utilities.cleanup(() => masks.get(input)?.destroy())
   }).before('model')
 }

src/svelte/index.ts

@@ -3,19 +3,29 @@ import { MaskaDetail, MaskInput, MaskInputOptions } from '..'
 
 const masks = new WeakMap<HTMLInputElement, MaskInput>()
 
-type MaskaAction = Action<HTMLElement, MaskInputOptions | undefined, {
+type MaskaAction = Action<HTMLElement, MaskInputOptions | string | undefined, {
   'on:maska': (detail: CustomEvent<MaskaDetail>) => void
 }>
 
-export const maska: MaskaAction = (node, opts = {}) => {
+export const maska: MaskaAction = (node, value = {}) => {
   const input = node instanceof HTMLInputElement ? node : node.querySelector('input')
 
   if (input == null || input?.type === 'file') return
 
+  let opts = value
+
+  if (typeof opts === 'string') {
+    opts = { mask: opts }
+  }
+
   masks.set(input, new MaskInput(input, opts))
 
   return {
     update (opts) {
+      if (typeof opts === 'string') {
+        opts = { mask: opts }
+      }
+
       masks.get(input)?.update(opts)
     },
 

src/vue/index.ts

@@ -1,7 +1,7 @@
 import { Directive, DirectiveBinding } from 'vue'
 import { MaskaDetail, MaskInput, MaskInputOptions } from '..'
 
-type MaskaDirective = Directive<HTMLElement, MaskInputOptions | undefined>
+type MaskaDirective = Directive<HTMLElement, MaskInputOptions | string | undefined>
 
 const masks = new WeakMap<HTMLInputElement, MaskInput>()
 
@@ -20,10 +20,15 @@ const setArg = (binding: DirectiveBinding, value: string | boolean): void => {
 
 export const vMaska: MaskaDirective = (el, binding) => {
   const input = el instanceof HTMLInputElement ? el : el.querySelector('input')
-  const opts = binding.value != null ? { ...binding.value } : {}
 
   if (input == null || input?.type === 'file') return
 
+  let opts: MaskInputOptions = {}
+
+  if (binding.value != null) {
+    opts = typeof binding.value === 'string' ? { mask: binding.value } : { ...binding.value }
+  }
+
   if (binding.arg != null) {
     const updateArg = (detail: MaskaDetail): void => {
       const value = binding.modifiers.unmasked