@authing/vue-ui-components 3.0.22 → 3.0.24

package/components/AuthingGuard/index.js

@@ -0,0 +1,8 @@
+import AuthingGuard from './src/index.vue'
+import '@authing/native-js-ui-components/lib/index.min.css'
+
+AuthingGuard.install = (app) => {
+	app.component(AuthingGuard.name, AuthingGuard)
+}
+
+export default AuthingGuard

package/{src/components/AuthingGuard.vue → components/AuthingGuard/src/index.vue}

@@ -1,5 +1,5 @@
 <template>
-  <div id="authing_guard_container"></div>
+  <div id="authing_guard_container" />
 </template>
 
 <script>
@@ -13,20 +13,8 @@ import {
   LoginMethods,
   RegisterMethods,
 } from "@authing/native-js-ui-components";
-import "@authing/native-js-ui-components/lib/index.min.css";
 
-export {
-  getAuthClient,
-  initAuthClient,
-  GuardMode,
-  GuardScenes,
-  LoginMethods,
-  RegisterMethods,
-};
-
-const format = (a, b) => {
-  return !a || a === "false" ? b : true;
-};
+export { getAuthClient, initAuthClient, GuardMode, GuardScenes, LoginMethods, RegisterMethods };
 
 const callbackEvent = ["before-login", "before-register"];
 
@@ -84,6 +72,7 @@ export default {
     return {
       localVisible: false,
       $guard: null,
+      guarConfig: {},
     };
   },
   watch: {
@@ -109,40 +98,40 @@ export default {
       },
     },
   },
+  computed: {
+    mergeConfig: function () {
+      return {
+        ...this.config,
+        appId: this.appId,
+        mode: this.mode ?? this.config?.mode,
+        autoRegister: this.autoRegister ?? this.config?.autoRegister,
+        isSSO: this.isSSO ?? this.config?.isSSO,
+        clickCloseable: this.clickCloseable ?? this.config?.clickCloseable,
+        escCloseable: this.escCloseable ?? this.config?.escCloseable,
+      };
+    },
+  },
   mounted() {
-    this.config = this.config || {};
-    this.config.mode = this.mode ? this.mode : this.config.mode;
-    this.config.autoRegister = this.autoRegister
-      ? this.autoRegister
-      : this.config.autoRegister;
-    this.config.isSSO = this.isSSO ? this.isSSO : this.config.isSSO;
-    this.config.clickCloseable = this.clickCloseable
-      ? this.clickCloseable
-      : this.config.clickCloseable;
-    this.config.escCloseable = this.escCloseable
-      ? this.escCloseable
-      : this.config.escCloseable;
+    // this.guarConfig = this.config || {};
+    // this.guarConfig.mode = this.mode ? this.mode : this.config.mode;
+    // this.guarConfig.autoRegister = this.autoRegister ? this.autoRegister : this.config.autoRegister;
+    // this.guarConfig.isSSO = this.isSSO ? this.isSSO : this.config.isSSO;
+    // this.guarConfig.clickCloseable = this.clickCloseable ? this.clickCloseable : this.config.clickCloseable;
+    // this.guarConfig.escCloseable = this.escCloseable ? this.escCloseable : this.config.escCloseable;
 
     // this.config.autoRegister = format(this.autoRegister, this.config.autoRegister)
     // this.config.isSSO = format(this.isSSO, this.config.isSSO)
     // this.config.clickCloseable = format(this.clickCloseable, this.config.clickCloseable)
     // this.config.escCloseable = format(this.escCloseable, this.config.escCloseable)
 
-    const guard = new NativeAuthingGuard(
-      this.appId,
-      this.config,
-      this.tenantId
-    );
+    const guard = new NativeAuthingGuard(this.appId, this.mergeConfig, this.tenantId);
 
     const evts = Object.values(GuardEventsCamelToKebabMap);
-    const kebabToCamelMap = Object.entries(GuardEventsCamelToKebabMap).reduce(
-      (acc, [camel, kebab]) => {
-        return Object.assign({}, acc, {
-          [kebab]: camel,
-        });
-      },
-      {}
-    );
+    const kebabToCamelMap = Object.entries(GuardEventsCamelToKebabMap).reduce((acc, [camel, kebab]) => {
+      return Object.assign({}, acc, {
+        [kebab]: camel,
+      });
+    }, {});
 
     const listeners = evts.reduce((acc, evtName) => {
       return Object.assign({}, acc, {

package/components/Guard/index.js

@@ -0,0 +1,8 @@
+import Guard from './src/index.vue'
+import '@authing/native-js-ui-components/lib/index.min.css'
+
+Guard.install = (app) => {
+	app.component(Guard.name, Guard)
+}
+
+export default Guard

package/{src/components/Guard.vue → components/Guard/src/index.vue}

@@ -1,5 +1,5 @@
 <template>
-  <div id="authing_guard_container"></div>
+  <div id="authing_guard_container" />
 </template>
 
 <script>
@@ -17,10 +17,6 @@ import { Guard as NativeGuard } from "@authing/native-js-ui-components/lib/index
 
 export { getAuthClient, initAuthClient, GuardMode, GuardScenes, LoginMethods, RegisterMethods };
 
-const format = (a, b) => {
-  return !a || a === "false" ? b : true;
-};
-
 const callbackEvent = ["before-login", "before-register"];
 
 export default {
@@ -73,6 +69,7 @@ export default {
     return {
       localVisible: false,
       $guard: null,
+      guarConfig: {},
     };
   },
   watch: {
@@ -98,20 +95,28 @@ export default {
       },
     },
   },
+  computed: {
+    mergeConfig: function () {
+      return {
+        ...this.config,
+        appId: this.appId,
+        mode: this.mode ?? this.config?.mode,
+        autoRegister: this.autoRegister ?? this.config?.autoRegister,
+        isSSO: this.isSSO ?? this.config?.isSSO,
+        clickCloseable: this.clickCloseable ?? this.config?.clickCloseable,
+        escCloseable: this.escCloseable ?? this.config?.escCloseable,
+      };
+    },
+  },
   mounted() {
-    this.config = this.config || {};
-    this.config.mode = this.mode ? this.mode : this.config.mode;
-    this.config.autoRegister = this.autoRegister ? this.autoRegister : this.config.autoRegister;
-    this.config.isSSO = this.isSSO ? this.isSSO : this.config.isSSO;
-    this.config.clickCloseable = this.clickCloseable ? this.clickCloseable : this.config.clickCloseable;
-    this.config.escCloseable = this.escCloseable ? this.escCloseable : this.config.escCloseable;
-
-    // this.config.autoRegister = format(this.autoRegister, this.config.autoRegister)
-    // this.config.isSSO = format(this.isSSO, this.config.isSSO)
-    // this.config.clickCloseable = format(this.clickCloseable, this.config.clickCloseable)
-    // this.config.escCloseable = format(this.escCloseable, this.config.escCloseable)
+    // this.guarConfig = this.config || {};
+    // this.guarConfig.mode = this.mode ? this.mode : this.config.mode;
+    // this.guarConfig.autoRegister = this.autoRegister ? this.autoRegister : this.config.autoRegister;
+    // this.guarConfig.isSSO = this.isSSO ? this.isSSO : this.config.isSSO;
+    // this.guarConfig.clickCloseable = this.clickCloseable ? this.clickCloseable : this.config.clickCloseable;
+    // this.guarConfig.escCloseable = this.escCloseable ? this.escCloseable : this.config.escCloseable;
 
-    const guard = new NativeGuard(this.appId, this.config);
+    const guard = new NativeGuard(this.appId, this.mergeConfig);
 
     const evts = Object.values(GuardEventsCamelToKebabMap);
     const kebabToCamelMap = Object.entries(GuardEventsCamelToKebabMap).reduce((acc, [camel, kebab]) => {

package/components/index.js

@@ -0,0 +1,25 @@
+import AuthingGuard from './AuthingGuard'
+import Guard from './Guard'
+import '@authing/native-js-ui-components/lib/index.min.css'
+
+const components = [
+	AuthingGuard,
+	Guard
+]
+// 全局注册
+const install = (app) => {
+	components.forEach(component => {
+		app.component(component.name, component)
+	})
+}
+
+// 局部注册
+export {
+	install,
+	Guard,
+	AuthingGuard
+}
+
+export default {
+	install
+}