fix: prop functions this context not resolved in build

PlusAuth · May 6, 2020 · 320379c · 320379c
1 parent 582478d
commit 320379c
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 19 deletions.
diff --git a/src/ui/directives/i18n.ts b/src/ui/directives/i18n.ts
@@ -53,8 +53,7 @@ function translate(el: any, binding: DirectiveBinding,
     return
   }
 
-  // @ts-ignore
-  const $i18n = binding?.instance?.$i18n
+  const $i18n = binding?.instance?.$.appContext.config.globalProperties.$i18n
   el._vt = el.textContent = $i18n?.t(path, ...makeParams(locale, args))
   el._locale = $i18n?.locale
 }

diff --git a/src/ui/views/FillMissing.vue b/src/ui/views/FillMissing.vue
@@ -23,7 +23,7 @@
         :type="options.type"
         :label="options.label"
         :rules="options.validator ?
-          [ validate.bind( $i18n, options) ] : undefined"
+          [ validate.bind( null, options) ] : undefined"
       />
     </template>
 
@@ -41,7 +41,8 @@
 
 <script lang="ts">
 import PlusAuth from 'plusauth-js';
-import { defineComponent, inject, reactive, ref } from 'vue';
+import { defineComponent, getCurrentInstance,
+  inject, reactive, ref } from 'vue';
 
 import { PForm } from '../components';
 import { AdditionalFields } from '../interfaces';
@@ -90,6 +91,7 @@ export default defineComponent({
     }
   },
   setup(props){
+    const vm = getCurrentInstance()
     const api = inject('api') as PlusAuth
     const loading = ref(false)
     const form = ref<InstanceType<typeof PForm>>(null as any)
@@ -132,7 +134,11 @@ export default defineComponent({
       },
       validate: function (options: any, value: any): any {
         if(options.validator){
-          return options.validator.call(this,props.fields, value)
+          return options.validator.call(
+            vm?.appContext.config.globalProperties.$i18n,
+            props.fields,
+            value
+          )
         }else {
           return undefined
         }

diff --git a/src/ui/views/ForgotPassword.vue b/src/ui/views/ForgotPassword.vue
@@ -29,7 +29,7 @@
             :error-messages="options.errors"
             :label="options.label"
             :rules="options.validator ?
-              [ validate.bind( $i18n, options) ] : undefined"
+              [ validate.bind( null, options) ] : undefined"
           />
         </template>
 
@@ -65,7 +65,8 @@
 
 <script lang="ts">
 import PlusAuth from 'plusauth-js';
-import { defineComponent, inject, reactive, ref } from 'vue';
+import { defineComponent, getCurrentInstance,
+  inject, reactive, ref } from 'vue';
 
 import { PForm } from '../components';
 import { AdditionalFields } from '../interfaces';
@@ -99,6 +100,7 @@ export default defineComponent({
     },
   },
   setup(props){
+    const vm = getCurrentInstance()
     const api = inject('api') as PlusAuth
     const form = ref<InstanceType<typeof PForm>>(null as any)
     const loading = ref(false)
@@ -112,7 +114,11 @@ export default defineComponent({
       resolveClientLogo,
       validate: function (options: any, value: any): any {
         if(options.validator){
-          return options.validator.call(this,props.fields, value)
+          return options.validator.call(
+            vm?.appContext.config.globalProperties.$i18n,
+            props.fields,
+            value
+          )
         }else {
           return undefined
         }

diff --git a/src/ui/views/Login.vue b/src/ui/views/Login.vue
@@ -23,7 +23,7 @@
         :label="options.label"
         :error-messages="options.errors"
         :rules="options.validator ?
-          [ validate.bind( $i18n, options) ] : undefined"
+          [ validate.bind(null, options ) ] : undefined"
       />
     </template>
 
@@ -81,7 +81,8 @@
 
 <script lang="ts">
 import PlusAuth from 'plusauth-js';
-import { defineComponent, reactive, ref, inject } from 'vue';
+import { defineComponent, reactive,
+  ref, inject, getCurrentInstance } from 'vue';
 
 import { PForm } from '../components';
 import SocialConnectionButton from '../components/SocialConnectionButton';
@@ -111,7 +112,7 @@ export default defineComponent({
           type: 'text',
           label: 'login.username',
           errors: [],
-          validator(fields, value){
+          validator: function (fields, value){
             if(!value){
               return this.t('login.errors.usernameRequired')
             }
@@ -122,7 +123,7 @@ export default defineComponent({
           type: 'password',
           label: 'login.password',
           errors: [],
-          validator(fields, value){
+          validator: function (fields, value){
             if(!value){
               return this.t('login.errors.passwordRequired')
             }
@@ -133,6 +134,7 @@ export default defineComponent({
     },
   },
   setup(props){
+    const vm = getCurrentInstance()
     const api = inject('api') as PlusAuth
     const form = ref<InstanceType<typeof PForm>>(null as any)
     const passwordVisible = ref(false)
@@ -145,7 +147,11 @@ export default defineComponent({
       passwordVisible,
       validate: function (options: any, value: any) {
         if(options.validator){
-          return options.validator.call(this, props.fields, value)
+          return options.validator.call(
+            vm?.appContext.config.globalProperties.$i18n,
+            props.fields,
+            value
+          )
         }else {
           return undefined
         }

diff --git a/src/ui/views/Register.vue b/src/ui/views/Register.vue
@@ -23,7 +23,7 @@
         :type="options.type"
         :label="options.label"
         :rules="options.validator ?
-          [ validate.bind( $i18n, options) ] : undefined"
+          [ validate.bind( null, options) ] : undefined"
       />
     </template>
     <div class="pt-4">
@@ -81,7 +81,8 @@
 
 <script lang="ts" >
 import PlusAuth from 'plusauth-js';
-import { defineComponent, inject, reactive, ref } from 'vue';
+import { defineComponent, getCurrentInstance,
+  inject, reactive, ref } from 'vue';
 
 import { PForm } from '../components';
 import SocialConnectionButton from '../components/SocialConnectionButton';
@@ -153,6 +154,7 @@ export default defineComponent({
     }
   },
   setup(props){
+    const vm = getCurrentInstance()
     const api = inject('api') as PlusAuth
     const form = ref<InstanceType<typeof PForm>>(null as any)
     const loading = ref(false)
@@ -163,7 +165,11 @@ export default defineComponent({
       resolveClientLogo,
       validate: function (options: any, value: any) {
         if(options.validator){
-          return options.validator.call(this,props.fields, value)
+          return options.validator.call(
+            vm?.appContext.config.globalProperties.$i18n,
+            props.fields,
+            value
+          )
         }else {
           return undefined
         }

diff --git a/src/ui/views/ResetPassword.vue b/src/ui/views/ResetPassword.vue
@@ -44,7 +44,7 @@
             :error-messages="options.errors"
             :label="options.label"
             :rules="options.validator ?
-              [ validate.bind( $i18n, options) ] : undefined"
+              [ validate.bind( null, options) ] : undefined"
           />
         </template>
 
@@ -65,7 +65,8 @@
 
 <script lang="ts">
 import PlusAuth from 'plusauth-js';
-import { defineComponent, inject, reactive, ref } from 'vue';
+import { defineComponent, getCurrentInstance,
+  inject, reactive, ref } from 'vue';
 
 import { useRoute } from 'vue-router';
 
@@ -116,6 +117,7 @@ export default defineComponent({
     },
   },
   setup(props){
+    const vm = getCurrentInstance()
     const api = inject('api') as PlusAuth
     const form = ref<InstanceType<typeof PForm>>(null as any)
     const codeForm = ref<InstanceType<typeof PForm>>(null as any)
@@ -133,7 +135,11 @@ export default defineComponent({
       resolveClientLogo,
       validate: function (options: any, value: any): any {
         if(options.validator){
-          return options.validator.call(this,props.fields, value)
+          return options.validator.call(
+            vm?.appContext.config.globalProperties.$i18n,
+            props.fields,
+            value
+          )
         }else {
           return undefined
         }