From e6b2799880c6c4c2519fd279bd4c2675b0e27022 Mon Sep 17 00:00:00 2001
From: Alexander Shabunevich <loonar@gmail.com>
Date: Tue, 11 Jun 2024 10:17:10 +0300
Subject: [PATCH] fix(vue): use defineExpose to set argument value

---
 docs/v3/vue.md             | 26 ++++++++++++++------------
 src/vue/index.ts           | 12 ++++++------
 test/vue/BindCompleted.vue |  8 +++++---
 test/vue/BindMasked.vue    |  8 +++++---
 test/vue/BindModel.vue     | 12 +++++++-----
 test/vue/BindUnmasked.vue  |  8 +++++---
 test/vue/Callbacks.vue     |  2 ++
 test/vue/Config.vue        |  8 +++++---
 test/vue/Sink.vue          |  8 +++++---
 9 files changed, 54 insertions(+), 38 deletions(-)

diff --git a/docs/v3/vue.md b/docs/v3/vue.md
index c2c3d5a..608a814 100644
--- a/docs/v3/vue.md
+++ b/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
 
diff --git a/src/vue/index.ts b/src/vue/index.ts
index 42f9970..66b92ef 100644
--- a/src/vue/index.ts
+++ b/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)
   }
 }
 
diff --git a/test/vue/BindCompleted.vue b/test/vue/BindCompleted.vue
index d96bca9..3b0a571 100644
--- a/test/vue/BindCompleted.vue
+++ b/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>
diff --git a/test/vue/BindMasked.vue b/test/vue/BindMasked.vue
index 9753587..4e23ecf 100644
--- a/test/vue/BindMasked.vue
+++ b/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>
diff --git a/test/vue/BindModel.vue b/test/vue/BindModel.vue
index b63a904..7b4a2bb 100644
--- a/test/vue/BindModel.vue
+++ b/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>
diff --git a/test/vue/BindUnmasked.vue b/test/vue/BindUnmasked.vue
index 223ce81..8c768d0 100644
--- a/test/vue/BindUnmasked.vue
+++ b/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>
diff --git a/test/vue/Callbacks.vue b/test/vue/Callbacks.vue
index 479ed6e..ebe6597 100644
--- a/test/vue/Callbacks.vue
+++ b/test/vue/Callbacks.vue
@@ -17,6 +17,8 @@ const options2 = <MaskInputOptions>{
     (detail) => emit('mask3', detail),
   ]
 }
+
+defineExpose({ bound1, bound2 })
 </script>
 
 <template>
diff --git a/test/vue/Config.vue b/test/vue/Config.vue
index 2701a36..61a6cfe 100644
--- a/test/vue/Config.vue
+++ b/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>
diff --git a/test/vue/Sink.vue b/test/vue/Sink.vue
index cb35f54..b88a6b8 100644
--- a/test/vue/Sink.vue
+++ b/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>