@authing/vue-ui-components 2.4.58 → 3.0.0-rc.2

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@authing/vue-ui-components",
   "description": "Authing Vue UI components",
-  "version": "2.4.58",
+  "version": "3.0.0-rc.2",
   "keywords": [
     "vue",
     "vuejs",
     "authing"
   ],
   "license": "MIT",
-  "main": "src/components/index.js",
+  "main": "lib/index.min.js",
   "scripts": {
     "demo:serve": "vue-cli-service serve",
     "demo:build": "vue-cli-service build",
@@ -33,7 +33,7 @@
     "registry": "https://registry.npmjs.org"
   },
   "dependencies": {
-    "@authing/native-js-ui-components": "^2.4.58"
+    "@authing/native-js-ui-components": "^3.0.0-rc.2"
   },
   "devDependencies": {
     "@babel/core": "^7.4.0",
@@ -79,5 +79,5 @@
     "> 10%",
     "last 2 versions"
   ],
-  "gitHead": "48a69edc8fd200848c6ffc28e0c8da74ab7c16f7"
+  "gitHead": "38168128397d6ea8bfa26f395532a493596a535d"
 }

package/src/components/AuthingGuard.vue

@@ -4,12 +4,26 @@
 
 <script>
 import {
+  getAuthClient,
+  initAuthClient,
   AuthingGuard as NativeAuthingGuard,
   GuardEventsCamelToKebabMap,
+  GuardMode,
+  GuardScenes,
+  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;
 };
@@ -70,7 +84,6 @@ export default {
     return {
       localVisible: false,
       $guard: null,
-      localConfig: this.config
     };
   },
   watch: {
@@ -97,26 +110,39 @@ export default {
     },
   },
   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 = 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)
 
-    const guard = new NativeAuthingGuard(this.appId, this.localConfig, this.tenantId);
+    const guard = new NativeAuthingGuard(
+      this.appId,
+      this.config,
+      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/src/components/Guard.vue

@@ -0,0 +1,175 @@
+<template>
+  <div id="authing_guard_container"></div>
+</template>
+
+<script>
+import {
+  getAuthClient,
+  initAuthClient,
+  Guard as NativeGuard,
+  GuardEventsCamelToKebabMap,
+  GuardMode,
+  GuardScenes,
+  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;
+};
+
+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,
+      $guard: null,
+    };
+  },
+  watch: {
+    visible: {
+      immediate: true,
+      handler(val) {
+        if (val !== this.localVisible) {
+          this.localVisible = val;
+        }
+      },
+    },
+    localVisible: {
+      handler(val) {
+        if (val !== this.visible) {
+          this.$emit("update:visible", val);
+        }
+
+        if (val) {
+          this.show();
+        } else {
+          this.hide();
+        }
+      },
+    },
+  },
+  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)
+
+    const guard = new NativeGuard(this.appId, this.config);
+
+    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) => guard.on(evtName, listeners[evtName]));
+
+    if (this.localVisible) {
+      guard.show();
+    }
+    this.$guard = guard;
+  },
+  methods: {
+    show() {
+      this.$guard.show();
+    },
+    hide() {
+      this.$guard.hide();
+    },
+  },
+};
+</script>

package/src/components/index.js

@@ -1,21 +1,4 @@
 import AuthingGuard from './AuthingGuard.vue'
 
-import {
-  getAuthClient,
-  initAuthClient,
-  GuardMode,
-  GuardScenes,
-  LoginMethods,
-  RegisterMethods,
-} from "@authing/native-js-ui-components";
-
-
-export { 
-  AuthingGuard,
-  getAuthClient,
-  initAuthClient,
-  GuardMode,
-  GuardScenes,
-  LoginMethods,
-  RegisterMethods
-}
+export * from './AuthingGuard.vue'
+export { AuthingGuard }