@authing/vue-ui-components 3.1.1 → 3.1.6-rc.1

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,19 +1,12 @@
 <template>
-  <div id="authing_guard_container"></div>
+  <div id="authing_guard_container" />
 </template>
 
 <script>
-import {
-  AuthingGuard as NativeAuthingGuard,
-  GuardEventsCamelToKebabMap,
-} from "@authing/native-js-ui-components";
+import { AuthingGuard as NativeAuthingGuard, GuardEventsCamelToKebabMap } from "@authing/native-js-ui-components";
 
 import "@authing/native-js-ui-components/lib/index.min.css";
 
-const format = (a, b) => {
-  return !a || a === "false" ? b : true;
-};
-
 const callbackEvent = ["before-login", "before-register"];
 
 export default {
@@ -69,8 +62,8 @@ export default {
   data() {
     return {
       localVisible: false,
-      $guard: null,
-      localConfig: this.config
+      guardInstance: null,
+      guarConfig: {},
     };
   },
   watch: {
@@ -85,7 +78,7 @@ export default {
     localVisible: {
       handler(val) {
         if (val !== this.visible) {
-          this.$emit("update:visible", val);
+          this.$emit("visible", val);
         }
 
         if (val) {
@@ -96,20 +89,21 @@ 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.localConfig = this.localConfig || {};
-    this.localConfig.mode = this.mode ? this.mode : this.localConfig.mode;
-    this.localConfig.autoRegister = this.autoRegister ? this.autoRegister : this.localConfig.autoRegister;
-    this.localConfig.isSSO = this.isSSO ? this.isSSO : this.localConfig.isSSO;
-    this.localConfig.clickCloseable = this.clickCloseable ? this.clickCloseable : this.localConfig.clickCloseable;
-    this.localConfig.escCloseable = this.escCloseable ? this.escCloseable : this.localConfig.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.localConfig, this.tenantId);
+    this.guardInstance = new NativeAuthingGuard(this.appId, this.mergeConfig, this.tenantId);
 
     const evts = Object.values(GuardEventsCamelToKebabMap);
     const kebabToCamelMap = Object.entries(GuardEventsCamelToKebabMap).reduce((acc, [camel, kebab]) => {
@@ -138,19 +132,18 @@ export default {
       });
     }, {});
 
-    evts.forEach((evtName) => guard.on(evtName, listeners[evtName]));
+    evts.forEach((evtName) => this.guardInstance.on(evtName, listeners[evtName]));
 
     if (this.localVisible) {
-      guard.show();
+      this.guardInstance.show();
     }
-    this.$guard = guard;
   },
   methods: {
     show() {
-      this.$guard.show();
+      this.guardInstance.show();
     },
     hide() {
-      this.$guard.hide();
+      this.guardInstance.hide();
     },
   },
 };

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/components/Guard/src/index.vue

@@ -0,0 +1,156 @@
+<template>
+  <div id="authing_guard_container" />
+</template>
+
+<script>
+import {
+  getAuthClient,
+  initAuthClient,
+  GuardEventsCamelToKebabMap,
+  GuardMode,
+  GuardScenes,
+  LoginMethods,
+  RegisterMethods,
+} from "@authing/native-js-ui-components";
+import "@authing/native-js-ui-components/lib/index.min.css";
+import { Guard as NativeGuard } from "@authing/native-js-ui-components/lib/index.min.js";
+
+export { getAuthClient, initAuthClient, GuardMode, GuardScenes, LoginMethods, RegisterMethods };
+
+const callbackEvent = ["before-login", "before-register"];
+
+export default {
+  name: "Guard",
+  props: {
+    appId: {
+      type: String,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: false,
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    mode: {
+      type: String,
+      required: false, // normal(全屏) modal(弹窗)
+    },
+    autoRegister: {
+      type: Boolean,
+      required: false,
+    },
+    isSSO: {
+      type: Boolean,
+      required: false,
+    },
+    clickCloseable: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
+    escCloseable: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
+    onBeforeLogin: {
+      type: Function,
+      required: false,
+    },
+    onBeforeRegister: {
+      type: Function,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      localVisible: false,
+      guardInstance: null,
+      guarConfig: {},
+    };
+  },
+  watch: {
+    visible: {
+      immediate: true,
+      handler(val) {
+        if (val !== this.localVisible) {
+          this.localVisible = val;
+        }
+      },
+    },
+    localVisible: {
+      handler(val) {
+        if (val !== this.visible) {
+          this.$emit("visible", val);
+        }
+
+        if (val) {
+          this.show();
+        } else {
+          this.hide();
+        }
+      },
+    },
+  },
+  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.guardInstance = new NativeGuard(this.appId, this.mergeConfig);
+
+    const evts = Object.values(GuardEventsCamelToKebabMap);
+    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, {
+        [evtName]: (...rest) => {
+          if (evtName === "close") {
+            this.localVisible = false;
+          }
+          if (!callbackEvent.includes(evtName)) {
+            this.$emit(evtName, ...rest);
+          } else {
+            const camelEvtName = kebabToCamelMap[evtName];
+
+            if (this[camelEvtName]) {
+              return this[camelEvtName](...rest);
+            }
+            return true;
+          }
+        },
+      });
+    }, {});
+
+    evts.forEach((evtName) => this.guardInstance.on(evtName, listeners[evtName]));
+
+    if (this.localVisible) {
+      this.guardInstance.show();
+    }
+  },
+  methods: {
+    show() {
+      this.guardInstance.show();
+    },
+    hide() {
+      this.guardInstance.hide();
+    },
+  },
+};
+</script>

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
+}