refactor: move to single package

test/vue/BindCompleted.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { vMaska } from '../../src/vue'
+
+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/vue/BindMasked.vue

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

test/vue/BindModel.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { vMaska } from '../../src/vue'
+
+const value = ref('123')
+const bound = ref('')
+</script>
+
+<template>
+  <input v-maska:bound.unmasked data-maska="#-#" data-maska-eager v-model="value" />
+  <div id="value1">{{ value }}</div>
+  <div id="value2">{{ bound }}</div>
+</template>

test/vue/BindUnmasked.vue

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

test/vue/Callbacks.vue

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

test/vue/ChangeValue.vue

@@ -0,0 +1,11 @@
+<script setup>
+import { ref } from 'vue'
+import { vMaska } from '../../src/vue'
+
+const data = ref('1234')
+</script>
+
+<template>
+  <input v-maska data-maska="##-#" v-model="data" data-maska-eager />
+  <button @click="data = '5678'">Set</button>
+</template>

test/vue/Config.vue

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

test/vue/Custom.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { vMaska } from '../../src/vue'
+import CustomInput from './CustomInput.vue'
+
+const value = ref('')
+</script>
+
+<template>
+  <CustomInput v-maska data-maska="#-#" data-maska-eager v-model="value" />
+  <div>{{ value }}</div>
+</template>

test/vue/CustomInput.vue

@@ -0,0 +1,11 @@
+<script setup>
+defineProps(['modelValue'])
+defineEmits(['update:modelValue'])
+</script>
+
+<template>
+  <input
+    :value="modelValue"
+    @input="$emit('update:modelValue', $event.target.value)"
+  />
+</template>

test/vue/DataAttr.vue

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

test/vue/Demo.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { shallowRef } from 'vue'
+
+import Sink from './Sink.vue'
+import BindCompleted from './BindCompleted.vue'
+import BindMasked from './BindMasked.vue'
+import BindModel from './BindModel.vue'
+import BindUnmasked from './BindUnmasked.vue'
+import Callbacks from './Callbacks.vue'
+import ChangeValue from './ChangeValue.vue'
+import Config from './Config.vue'
+import Custom from './Custom.vue'
+import DataAttr from './DataAttr.vue'
+import Dynamic from './Dynamic.vue'
+import Events from './Events.vue'
+import Hooks from './Hooks.vue'
+import Initial from './Initial.vue'
+import Model from './Model.vue'
+import Multiple from './Multiple.vue'
+import Options from './Options.vue'
+import Parent from './Parent.vue'
+import Simple from './Simple.vue'
+
+const component = shallowRef(Sink)
+</script>
+
+<template>
+  <select v-model="component">
+    <option :value="Sink">Kitchen sink</option>
+    <option :value="BindCompleted">BindCompleted</option>
+    <option :value="BindMasked">BindMasked</option>
+    <option :value="BindModel">BindModel</option>
+    <option :value="BindUnmasked">BindUnmasked</option>
+    <option :value="Callbacks">Callbacks</option>
+    <option :value="ChangeValue">ChangeValue</option>
+    <option :value="Config">Config</option>
+    <option :value="Custom">Custom</option>
+    <option :value="DataAttr">DataAttr</option>
+    <option :value="Dynamic">Dynamic</option>
+    <option :value="Events">Events</option>
+    <option :value="Hooks">Hooks</option>
+    <option :value="Initial">Initial</option>
+    <option :value="Model">Model</option>
+    <option :value="Multiple">Multiple</option>
+    <option :value="Options">Options</option>
+    <option :value="Parent">Parent</option>
+    <option :value="Simple">Simple</option>
+  </select>
+
+  <div class="comp">
+    <component :is="component"></component>
+  </div>
+</template>
+
+<style scoped>
+.comp {
+  margin-top: 1em;
+  padding: 1em;
+  border: 1px solid #ccc;
+}
+</style>

test/vue/Dynamic.vue

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

test/vue/Events.vue

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

test/vue/Hooks.vue

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

test/vue/Initial.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { vMaska } from '../../src/vue'
+
+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/vue/Model.vue

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

test/vue/Multiple.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { vMaska } from '../../src/vue'
+
+const emit = defineEmits(['mask1', 'mask2'])
+
+const isEager = ref(false)
+
+const value1 = ref('123')
+const value2 = ref('321')
+
+const options = reactive({
+  eager: isEager,
+  onMaska: () => null
+})
+
+const onMaska1 = () => {
+  emit('mask1')
+}
+
+const onMaska2 = () => {
+  emit('mask2')
+}
+</script>
+
+<template>
+  <input id="checkbox" type="checkbox" v-model="isEager" />
+  <input
+    id="input1"
+    v-maska="options"
+    data-maska="#-#"
+    v-model="value1"
+    @maska="onMaska1"
+  />
+  <input
+    id="input2"
+    v-maska
+    data-maska="#-#"
+    v-model="value2"
+    @maska="onMaska2"
+  />
+  <div id="value1">{{ value1 }}</div>
+  <div id="value2">{{ value2 }}</div>
+</template>

test/vue/Options.vue

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

test/vue/Parent.vue

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

test/vue/Simple.vue

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

test/vue/Sink.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { reactive, ref } from 'vue'
+import { vMaska } from '../../src/vue'
+
+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 options = reactive({
+  mask,
+  eager
+})
+
+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)
+  }
+}
+</script>
+
+<template>
+  <div class="row">
+    <div>
+      show: <input type="checkbox" v-model="show">
+      eager: <input type="checkbox" v-model="eager">
+    </div>
+    <div><input v-model="mask"></div>
+
+    <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>
+
+  <div class="row"><input type="email" v-maska data-maska="##-##" data-maska-eager value="12"></div>
+
+  <div class="row"><input v-maska data-maska="####" value="1234"></div>
+
+  <div><input v-maska="options2" value="1234567" data-maska="0.99" data-maska-tokens="0:\d:multiple|9:\d:optional"></div>
+</template>
+
+<style scoped>
+.row {
+  margin-bottom: 1em;
+}
+</style>