feat!: rework for v3

- new directive format: pass options as value, bound as argument with modifiers
- update and checkValue methods in MaskInput

test/components/BindCompleted.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { vMaska } from '../../src'
+
+const bound = ref(false)
+</script>
+
+<template>
+  <input v-maska:bound.completed data-maska="#-#-#" />
+  <div v-if="bound === true">Completed</div>
+  <div v-else>Uncompleted</div>
+</template>

test/components/BindInitial.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { reactive } from 'vue'
-import { MaskaDetail, vMaska } from '../../src'
-
-const bound = reactive<Partial<MaskaDetail>>({})
-</script>
-
-<template>
-  <input v-maska="bound" data-maska="#-#" value="123" />
-  <div>{{ bound.masked }}</div>
-</template>

test/components/BindMasked.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
-import { MaskaDetail, vMaska } from '../../src'
+import { ref } from 'vue'
+import { vMaska } from '../../src'
 
-const bound = reactive<Partial<MaskaDetail>>({})
+const bound = ref('')
 </script>
 
 <template>
-  <input v-maska="bound" data-maska="#-#" />
-  <div>{{ bound.masked }}</div>
+  <input v-maska:bound.masked data-maska="#-#" />
+  <div>{{ bound }}</div>
 </template>

test/components/BindUnmasked.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
-import { MaskaDetail, vMaska } from '../../src'
+import { ref } from 'vue'
+import { vMaska } from '../../src'
 
-const bound = reactive<Partial<MaskaDetail>>({})
+const bound = ref('')
 </script>
 
 <template>
-  <input v-maska="bound" data-maska="#-#" />
-  <div>{{ bound.unmasked }}</div>
+  <input v-maska:bound.unmasked data-maska="#-#" />
+  <div>{{ bound }}</div>
 </template>

test/components/Callbacks.vue

@@ -1,24 +1,20 @@
 <script setup lang="ts">
-import { reactive } from 'vue';
-import { MaskaDetail, vMaska } from '../../src'
+import { MaskInputOptions, vMaska } from '../../src'
 
 const emit = defineEmits(['mask1', 'mask2', 'mask3'])
 
-const bound1 = reactive({})
-const bound2 = reactive({})
-
-const options1 = {
-  onMaska: (detail: MaskaDetail) => emit('mask1', detail)
+const options1 = <MaskInputOptions>{
+  onMaska: (detail) => emit('mask1', detail)
 }
-const options2 = {
+const options2 = <MaskInputOptions>{
   onMaska: [
-    (detail: MaskaDetail) => emit('mask2', detail),
-    (detail: MaskaDetail) => emit('mask3', detail),
+    (detail) => emit('mask2', detail),
+    (detail) => emit('mask3', detail),
   ]
 }
 </script>
 
 <template>
-  <input id="input1" v-maska:[options1]="bound1" data-maska="#-#" />
-  <input id="input2" v-maska:[options2]="bound2" data-maska="#-#" />
+  <input id="input1" v-maska="options1" data-maska="#-#" />
+  <input id="input2" v-maska="options2" data-maska="#-#" />
 </template>

test/components/Completed.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import { reactive } from 'vue'
-import { MaskaDetail, vMaska } from '../../src'
-
-const bound = reactive<Partial<MaskaDetail>>({})
-</script>
-
-<template>
-  <input v-maska="bound" data-maska="#-#-#" />
-  <div v-if="bound.completed">Completed</div>
-  <div v-else>Uncompleted</div>
-</template>

test/components/Config.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
-import { vMaska, MaskaDetail, MaskInputOptions } from '../../src'
+import { ref } from 'vue'
+import { MaskInputOptions, vMaska } from '../../src'
 
-const bound = reactive<Partial<MaskaDetail>>({})
-const config = reactive<MaskInputOptions>({
+const bound = ref('')
+const config = <MaskInputOptions>{
   mask: 'A A',
   tokens: {
     A: {
@@ -12,10 +12,10 @@ const config = reactive<MaskInputOptions>({
       transform: (chr) => chr.toUpperCase()
     }
   }
-})
+}
 </script>
 
 <template>
-  <input v-maska:[config]="bound" />
-  <div>{{ bound.masked }}</div>
+  <input v-maska:bound="config" />
+  <div>{{ bound }}</div>
 </template>

test/components/Hooks.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
 import { MaskInputOptions, vMaska } from '../../src'
 
-const config = reactive<MaskInputOptions>({
+const config = <MaskInputOptions>{
   preProcess: (val) => val.toUpperCase()
-})
+}
 </script>
 
 <template>
-  <input v-maska:[config] data-maska="A A" data-maska-tokens="A:[A-Z]:multiple" />
+  <input v-maska="config" data-maska="A A" data-maska-tokens="A:[A-Z]:multiple" />
 </template>

test/components/Initial.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { vMaska } from '../../src'
+
+const initial = ref('345')
+</script>
+
+<template>
+  <input v-maska data-maska="#-#" id="input1" value="123" />
+  <input v-maska data-maska="#-#" id="input2" v-model="initial" />
+</template>

test/components/Multiple.vue

@@ -27,7 +27,7 @@ const onMaska2 = () => {
   <input id="checkbox" type="checkbox" v-model="isEager" />
   <input
     id="input1"
-    v-maska:[options]
+    v-maska="options"
     data-maska="#-#"
     v-model="value1"
     @maska="onMaska1"

test/components/Options.vue

@@ -4,9 +4,7 @@ import { vMaska } from '../../src'
 export default {
   data() {
     return {
-      bound: {
-        masked: ''
-      }
+      bound: ''
     }
   },
   directives: {
@@ -16,6 +14,6 @@ export default {
 </script>
 
 <template>
-  <input v-maska="bound" data-maska="#-#" />
-  <div>{{ bound.masked }}</div>
+  <input v-maska:bound data-maska="#-#" />
+  <div>{{ bound }}</div>
 </template>