New version code prepare

test/components/BindInitial.vue

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

test/components/BindMasked.vue

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

test/components/BindUnmasked.vue

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

test/components/Completed.vue

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

test/components/Config.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { vMaska, MaskaDetail, MaskInputOptions } from '../../src'
+
+const binded = reactive<Partial<MaskaDetail>>({})
+const config = reactive<MaskInputOptions>({
+  mask: 'A A',
+  tokens: {
+    A: {
+      pattern: /[A-Z]/,
+      multiple: true,
+      transform: (chr) => chr.toUpperCase()
+    }
+  }
+})
+</script>
+
+<template>
+  <input v-maska:[config]="binded" />
+  <div>{{ binded.masked }}</div>
+</template>

test/components/DataAttr.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { vMaska } from '../../src'
+</script>
+
+<template>
+  <input v-maska data-maska="#-#" data-maska-eager />
+</template>

test/components/Dynamic.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { vMaska } from '../../src'
+
+const mask = ref('["#--#", "#-#--#"]')
+</script>
+
+<template>
+  <input v-maska :data-maska="mask" />
+</template>

test/components/Events.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { MaskaDetail, vMaska } from '../../src'
+
+const emit = defineEmits(['mask'])
+
+const onMaska = (e: CustomEvent<MaskaDetail>) => {
+  emit('mask', e.detail)
+}
+</script>
+
+<template>
+  <input v-maska data-maska="#-#" @maska="onMaska" />
+</template>

test/components/Hooks.vue

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

test/components/Options.vue

@@ -0,0 +1,21 @@
+<script lang="ts">
+import { vMaska } from '../../src'
+
+export default {
+  data() {
+    return {
+      binded: {
+        masked: ''
+      }
+    }
+  },
+  directives: {
+    maska: vMaska
+  }
+}
+</script>
+
+<template>
+  <input v-maska="binded" data-maska="#-#" />
+  <div>{{ binded.masked }}</div>
+</template>

test/components/Simple.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { vMaska } from '../../src'
+</script>
+
+<template>
+  <input v-maska data-maska="#-#" />
+</template>