fix(vue): use defineExpose to set argument value

Author: beholdr

docs/v3/vue.md

@@ -112,18 +112,22 @@ To get masked value you can use standard `v-model` directive on the input. But i
   import { ref } from "vue"
   import { vMaska } from "maska/vue"
 
-  const maskedvalue = ref('')
-  const unmaskedvalue = ref('')
+  const maskedValue = ref('')
+  const unmaskedValue = ref('')
+
+  defineExpose({ unmaskedValue }) // make sure you expose the bound variable
 </script>
 
 <template>
-  <input v-maska:unmaskedvalue.unmasked data-maska="#-#" v-model="maskedvalue">
+  <input v-maska:unmaskedValue.unmasked data-maska="#-#" v-model="maskedValue">
 
-  Masked value: {{ maskedvalue }}
-  Unmasked value: {{ unmaskedvalue }}
+  Masked value: {{ maskedValue }}
+  Unmasked value: {{ unmaskedValue }}
 </template>
 ```
 
+!> Make sure you expose the bound variable using `defineExpose` macro.
+
 ### **Options API**
 
 ```vue
@@ -133,23 +137,21 @@ To get masked value you can use standard `v-model` directive on the input. But i
   export default {
     directives: { maska: vMaska },
     data: () => ({
-      maskedvalue: "",
-      unmaskedvalue: ""
+      maskedValue: "",
+      unmaskedValue: ""
     })
   }
 </script>
 
 <template>
-  <input v-maska:unmaskedvalue.unmasked data-maska="#-#" v-model="maskedvalue">
+  <input v-maska:unmaskedValue.unmasked data-maska="#-#" v-model="maskedValue">
 
-  Masked value: {{ maskedvalue }}
-  Unmasked value: {{ unmaskedvalue }}
+  Masked value: {{ maskedValue }}
+  Unmasked value: {{ unmaskedValue }}
 </template>
 ```
 <!-- tabs:end -->
 
-!> For correct work as directive argument, name of the bounded variable should be in **lower case**. So instead of `unmaskedValue` use `unmaskedvalue` or `unmasked_value`.
-
 
 ## Usage with Nuxt
 

src/vue/index.ts

@@ -5,16 +5,16 @@ type MaskaDirective = Directive<HTMLElement, MaskInputOptions | undefined>
 
 const masks = new WeakMap<HTMLInputElement, MaskInput>()
 
-// hacky way to update binding.arg without using defineExposed
 const setArg = (binding: DirectiveBinding, value: string | boolean): void => {
   if (binding.arg == null || (binding.instance == null)) return
 
-  const inst = binding.instance as any
+  const isComposition = 'setup' in binding.instance.$.type
 
-  if (binding.arg in inst) {
-    inst[binding.arg] = value // options api
-  } else if (inst.$?.setupState != null && binding.arg in inst.$.setupState) {
-    inst.$.setupState[binding.arg] = value // composition api
+  if (binding.arg in binding.instance) {
+    // @ts-expect-error
+    binding.instance[binding.arg] = value
+  } else if (isComposition) {
+    console.warn('Maska: please expose `%s` using defineExpose', binding.arg)
   }
 }
 

test/vue/BindCompleted.vue

@@ -2,11 +2,13 @@
 import { ref } from 'vue'
 import { vMaska } from '../../src/vue'
 
-const bound = ref(false)
+const boundCompleted = ref(false)
+
+defineExpose({ boundCompleted })
 </script>
 
 <template>
-  <input v-maska:bound.completed data-maska="#-#-#" />
-  <div v-if="bound === true">Completed</div>
+  <input v-maska:boundCompleted.completed data-maska="#-#-#" />
+  <div v-if="boundCompleted === true">Completed</div>
   <div v-else>Uncompleted</div>
 </template>

test/vue/BindMasked.vue

@@ -2,10 +2,12 @@
 import { ref } from 'vue'
 import { vMaska } from '../../src/vue'
 
-const bound = ref('')
+const boundMasked = ref('')
+
+defineExpose({ boundMasked })
 </script>
 
 <template>
-  <input v-maska:bound.masked data-maska="#-#" />
-  <div>{{ bound }}</div>
+  <input v-maska:boundMasked.masked data-maska="#-#" />
+  <div>{{ boundMasked }}</div>
 </template>

test/vue/BindModel.vue

@@ -2,12 +2,14 @@
 import { ref } from 'vue'
 import { vMaska } from '../../src/vue'
 
-const value = ref('123')
-const bound = ref('')
+const valueMasked = ref('123')
+const boundUnmasked = ref('')
+
+defineExpose({ boundUnmasked })
 </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>
+  <input v-maska:boundUnmasked.unmasked data-maska="#-#" data-maska-eager v-model="valueMasked" />
+  <div id="value1">{{ valueMasked }}</div>
+  <div id="value2">{{ boundUnmasked }}</div>
 </template>

test/vue/BindUnmasked.vue

@@ -2,10 +2,12 @@
 import { ref } from 'vue'
 import { vMaska } from '../../src/vue'
 
-const bound = ref('')
+const boundUnmasked = ref('')
+
+defineExpose({ boundUnmasked })
 </script>
 
 <template>
-  <input v-maska:bound.unmasked data-maska="#-#" />
-  <div>{{ bound }}</div>
+  <input v-maska:boundUnmasked.unmasked data-maska="#-#" />
+  <div>{{ boundUnmasked }}</div>
 </template>

test/vue/Callbacks.vue

@@ -17,6 +17,8 @@ const options2 = <MaskInputOptions>{
     (detail) => emit('mask3', detail),
   ]
 }
+
+defineExpose({ bound1, bound2 })
 </script>
 
 <template>

test/vue/Config.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import { MaskInputOptions } from '../../src'
 import { vMaska } from '../../src/vue'
 
-const bound = ref('')
+const boundMasked = ref('')
 const config = <MaskInputOptions>{
   mask: 'A A',
   tokens: {
@@ -14,9 +14,11 @@ const config = <MaskInputOptions>{
     }
   }
 }
+
+defineExpose({ boundMasked })
 </script>
 
 <template>
-  <input v-maska:bound="config" />
-  <div>{{ bound }}</div>
+  <input v-maska:boundMasked="config" />
+  <div>{{ boundMasked }}</div>
 </template>

test/vue/Sink.vue

@@ -6,7 +6,7 @@ const mask = ref('+1 (###) ###-####')
 const show = ref(true)
 const eager = ref(true)
 const valueMasked = ref('1234567')
-const valueunmasked = ref('1')
+const valueUnmasked = ref('1')
 
 const onMaska = (e) => console.log(e.detail)
 
@@ -29,6 +29,8 @@ const options2 = {
       .slice(0, sub ? -sub : undefined)
   }
 }
+
+defineExpose({ valueUnmasked })
 </script>
 
 <template>
@@ -40,9 +42,9 @@ const options2 = {
     <div><input v-model="mask"></div>
 
     <div v-if="show">
-      <input v-maska:valueunmasked.unmasked="options" v-model="valueMasked" @maska="onMaska">
+      <input v-maska:valueUnmasked.unmasked="options" v-model="valueMasked" @maska="onMaska">
       <div>Masked: {{ valueMasked }}</div>
-      <div>Unmasked: {{ valueunmasked }}</div>
+      <div>Unmasked: {{ valueUnmasked }}</div>
     </div>
   </div>