feat: simple mode for mask directive

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

test/alpine.test.ts

@@ -20,6 +20,12 @@ const prepareInput = async (markup: string) => {
 }
 
 describe('init', () => {
+  test('with string', async () => {
+    input = await prepareInput(`<input x-maska="'#-#'" value="123">`)
+
+    expect(input).toHaveValue('1-2')
+  })
+
   test('with data attr', async () => {
     input = await prepareInput(`<input x-maska data-maska="#-#" value="123">`)
 

test/svelte/DataAttr.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { maska } from '../../src/svelte'
+</script>
+
+<main>
+  <input use:maska data-maska="#-#" data-maska-eager />
+</main>

test/svelte/Demo.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import BindValue from './BindValue.svelte'
+  import DataAttr from './DataAttr.svelte'
   import Event from './Event.svelte'
   import InitialValue from './InitialValue.svelte'
   import Number from './Number.svelte'
@@ -12,6 +13,7 @@
 <main>
   <select bind:value={component}>
     <option value={BindValue}>BindValue</option>
+    <option value={DataAttr}>DataAttr</option>
     <option value={Event}>Event</option>
     <option value={InitialValue}>InitialValue</option>
     <option value={Number}>Number</option>

test/svelte/Options.svelte

@@ -8,6 +8,6 @@
 </script>
 
 <main>
-  <input type="checkbox" bind:checked={options.eager} />
+  <input type="checkbox" bind:checked={options.eager} /> Eager<br>
   <input type="text" use:maska={options} />
 </main>

test/svelte/Simple.svelte

@@ -3,5 +3,5 @@
 </script>
 
 <main>
-  <input use:maska data-maska="#-#" />
+  <input use:maska={'#-#'} />
 </main>

test/vue/Simple.vue

@@ -3,5 +3,5 @@ import { vMaska } from '../../src/vue'
 </script>
 
 <template>
-  <input v-maska data-maska="#-#" />
+  <input v-maska="'#-#'" />
 </template>

test/vue/Sink.vue

@@ -1,62 +1,52 @@
-<script setup>
+<script setup lang="ts">
 import { reactive, ref } from 'vue'
 import { vMaska } from '../../src/vue'
+import type { MaskInputOptions, MaskaDetail } from '../../src'
 
-const mask = ref('+1 (###) ###-####')
 const show = ref(true)
-const eager = ref(true)
 const valueMasked = ref('1234567')
 const valueUnmasked = ref('1')
 
-const onMaska = (e) => console.log(e.detail)
+const onMaska = (e: CustomEvent<MaskaDetail>) => console.log(e.detail)
 
-const options = reactive({
-  mask,
-  eager
+const options = reactive<MaskInputOptions>({
+  mask: '+1 (###) ###-####',
+  eager: true
 })
 
-const options2 = {
-  preProcess: val => val.replace(/[$,]/g, ''),
-  postProcess: val => {
-    if (!val) return ''
-
-    const sub = 3 - (val.includes('.') ? val.length - val.indexOf('.') : 0)
-
-    return Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD'
-    }).format(val)
-      .slice(0, sub ? -sub : undefined)
-  }
-}
-
 defineExpose({ valueUnmasked })
 </script>
 
 <template>
-  <div class="row">
+  <p>
     <div>
       show: <input type="checkbox" v-model="show">
-      eager: <input type="checkbox" v-model="eager">
+      eager: <input type="checkbox" v-model="options.eager">
     </div>
-    <div><input v-model="mask"></div>
+
+    <input v-model="options.mask">
 
     <div v-if="show">
       <input v-maska:valueUnmasked.unmasked="options" v-model="valueMasked" @maska="onMaska">
       <div>Masked: {{ valueMasked }}</div>
       <div>Unmasked: {{ valueUnmasked }}</div>
     </div>
-  </div>
+  </p>
 
-  <div class="row"><input type="email" v-maska data-maska="##-##" data-maska-eager value="12"></div>
+  <p>
+    <input v-maska data-maska="##-##" data-maska-eager value="123">
+  </p>
 
-  <div class="row"><input v-maska data-maska="####" value="1234"></div>
+  <p>
+    <input v-maska="'####'" value="12345">
+  </p>
 
-  <div><input v-maska="options2" value="1234567" data-maska="0.99" data-maska-tokens="0:\d:multiple|9:\d:optional"></div>
+  <p>
+    <input
+      v-maska
+      value="1234567.89"
+      data-maska-number-locale="en"
+      data-maska-number-fraction="2"
+    >
+  </p>
 </template>
-
-<style scoped>
-.row {
-  margin-bottom: 1em;
-}
-</style>