@authing/vue-ui-components 3.0.12-rc.4 → 3.0.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@authing/vue-ui-components",
   "description": "Authing Vue UI components",
-  "version": "3.0.12-rc.4",
+  "version": "3.0.13",
   "keywords": [
     "vue",
     "vuejs",
@@ -33,12 +33,12 @@
     "registry": "https://registry.npmjs.org"
   },
   "dependencies": {
-    "@authing/native-js-ui-components": "3.0.12"
+    "@authing/native-js-ui-components": "^3.0.12"
   },
   "devDependencies": {
-    "@babel/core": "^7.4.0",
+    "@babel/core": "^7.17.5",
     "@babel/plugin-transform-runtime": "7.4.0",
-    "@babel/preset-env": "7.4.2",
+    "@babel/preset-env": "^7.16.11",
     "@vue/babel-preset-jsx": "1.0.0-beta.3",
     "@vue/cli-plugin-babel": "^3.5.1",
     "@vue/cli-plugin-eslint": "^3.5.1",
@@ -79,4 +79,4 @@
     "> 10%",
     "last 2 versions"
   ]
-}
+}

package/src/components/AuthingGuard.vue

@@ -3,9 +3,31 @@
 </template>
 
 <script>
-import { AuthingGuard as NativeAuthingGuard, GuardEventsCamelToKebabMap } from "@authing/native-js-ui-components";
+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;
+};
+
 const callbackEvent = ["before-login", "before-register"];
 
 export default {
@@ -86,28 +108,54 @@ 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 = 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.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/src/components/Guard.vue

@@ -3,8 +3,30 @@
 </template>
 
 <script>
-import { Guard as NativeGuard, GuardEventsCamelToKebabMap } from "@authing/native-js-ui-components";
+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 format = (a, b) => {
+  return !a || a === "false" ? b : true;
+};
 
 const callbackEvent = ["before-login", "before-register"];
 
@@ -83,27 +105,49 @@ 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 = 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 guard = 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 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/index.js

@@ -3,4 +3,5 @@ import Guard from "./Guard.vue";
 
 export * from "./AuthingGuard.vue";
 export * from "./Guard.vue";
+
 export { AuthingGuard, Guard };

package/vue.config.js

@@ -1,36 +1,33 @@
-const path = require('path')
+const path = require("path");
 
 module.exports = {
   lintOnSave: false,
 
-  outputDir: './docs',
-  publicPath: './',
+  outputDir: "./docs",
+  publicPath: "./",
 
   configureWebpack: {
     entry: {
-      app: path.resolve(__dirname, './docs-src/main.js'),
+      app: path.resolve(__dirname, "./docs-src/main.js"),
     },
     resolve: {
       alias: {
-        '@style': path.resolve(__dirname, './src/style/imports.styl'),
-        '@': path.resolve(__dirname, './docs-src'),
+        "@style": path.resolve(__dirname, "./src/style/imports.styl"),
+        "@": path.resolve(__dirname, "./docs-src"),
       },
     },
   },
 
-  chainWebpack: config => {
-    config.module
-      .rule('js')
-      .include
-      .add(path.resolve(__dirname, './docs-src'))
+  chainWebpack: (config) => {
+    config.module.rule("js").include.add(path.resolve(__dirname, "./docs-src"));
 
     config.module
-      .rule('vue')
-      .use('vue-loader')
-      .loader('vue-loader')
-      .tap(options => {
-        options.compilerOptions.preserveWhitespace = true
-        return options
-      })
+      .rule("vue")
+      .use("vue-loader")
+      .loader("vue-loader")
+      .tap((options) => {
+        options.compilerOptions.preserveWhitespace = true;
+        return options;
+      });
   },
-}
+};