@authing/vue-ui-components 3.0.22 → 3.0.24

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "@authing/vue-ui-components",
   "description": "Authing Vue UI components",
-  "version": "3.0.22",
+  "files": [
+    "lib",
+    "components"
+  ],
+  "version": "3.0.24",
   "keywords": [
     "vue",
     "vuejs",
@@ -10,12 +14,13 @@
   "license": "MIT",
   "main": "lib/index.min.js",
   "scripts": {
+    "clean": "rimraf ./lib",
     "demo:serve": "vue-cli-service serve",
     "demo:build": "vue-cli-service build",
     "demo:lint": "vue-cli-service lint",
     "lint": "eslint --ext .js,.vue src/",
     "dev": "nodemon --exec 'npm run build:es' --watch src -e js,vue,styl",
-    "build:lib": "rm -f lib/index.min.js && rm -f lib/index.min.css && npm run build:umd",
+    "build:lib": "npm run clean && rollup -c config/rollup.config.js --environment NODE_ENV:production",
     "build:browser": "rollup --config configs/rollup.config.browser.js",
     "build:es": "rollup --config configs/rollup.config.es.js",
     "build:umd": "rollup --config configs/rollup.config.umd.js"
@@ -24,50 +29,64 @@
     "type": "git",
     "url": ""
   },
-  "bugs": {
-    "url": ""
-  },
   "homepage": "",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
   "dependencies": {
-    "@authing/native-js-ui-components": "^3.0.22"
+    "@authing/native-js-ui-components": "^3.0.24"
   },
   "devDependencies": {
-    "@babel/core": "^7.4.0",
-    "@babel/plugin-transform-runtime": "7.4.0",
-    "@babel/preset-env": "7.4.2",
-    "@vue/babel-preset-jsx": "1.0.0-beta.3",
-    "@vue/cli-plugin-babel": "^3.5.1",
-    "@vue/cli-plugin-eslint": "^3.5.1",
-    "@vue/cli-service": "^3.5.1",
-    "@vue/eslint-config-standard": "^4.0.0",
-    "babel-eslint": "^10.0.1",
-    "clean-css": "^4.1.8",
-    "core-js": "^2.0.0",
-    "cross-env": "^5.1.3",
-    "material-design-icons": "^3.0.1",
-    "nodemon": "^1.17.5",
-    "raw-loader": "^2.0.0",
-    "rollup": "^1.7.0",
-    "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-commonjs": "^9.2.1",
-    "rollup-plugin-css-only": "^1.0.0",
-    "rollup-plugin-node-resolve": "^4.0.1",
-    "rollup-plugin-postcss": "^3.1.8",
-    "rollup-plugin-replace": "^2.0.0",
-    "rollup-plugin-require-context": "^0.0.2",
-    "rollup-plugin-string": "^3.0.0",
-    "rollup-plugin-terser": "^4.0.4",
-    "rollup-plugin-vue": "^4.7.2",
-    "stylus": "^0.54.5",
-    "stylus-loader": "^3.0.1",
-    "vue": "^2.6.10",
-    "vue-router": "^3.0.1",
-    "vue-template-compiler": "^2.6.10",
-    "vuex": "^3.0.1"
+    "@babel/core": "^7.0.0",
+    "@rollup/plugin-alias": "^3.1.8",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-image": "^2.1.1",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.0.6",
+    "@types/html-minifier": "^4.0.1",
+    "@types/jest": "^26.0.23",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@vue/babel-preset-jsx": "^1.2.4",
+    "@vue/compiler-sfc": "^3.2.20",
+    "@vue/test-utils": "^2.0.0-rc.6",
+    "autoprefixer": "^9.8.8",
+    "babel-jest": "^26.x",
+    "clean-css": "^5.2.4",
+    "esbuild": "^0.12.5",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^7.20.0",
+    "jest": "26.6.3",
+    "jest-serializer-vue": "^2.0.2",
+    "jest-transform-stub": "^2.0.0",
+    "node-sass": "^6.0.1",
+    "postcss": "^8.3.11",
+    "postcss-import": "^14.0.2",
+    "postcss-minify": "^1.1.0",
+    "postcss-preset-env": "^6.7.0",
+    "pre-commit": "^1.2.2",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.59.0",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-browsersync": "^1.3.3",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-esbuild": "^4.6.0",
+    "rollup-plugin-filesize": "^9.1.1",
+    "rollup-plugin-html2": "^3.1.0",
+    "rollup-plugin-polyfill-node": "^0.7.0",
+    "rollup-plugin-postcss": "^4.0.1",
+    "rollup-plugin-progress": "^1.1.2",
+    "rollup-plugin-replace": "^2.2.0",
+    "rollup-plugin-scss": "3",
+    "rollup-plugin-vue": "^6.0.0",
+    "ts-jest": "26.5.6",
+    "typescript": "^4.4.4",
+    "vue": "^3.2.20",
+    "vue-jest": "^5.0.0-alpha.10"
   },
   "peerDependencies": {
     "vue": "^2.5.13"
@@ -79,5 +98,5 @@
     "> 10%",
     "last 2 versions"
   ],
-  "gitHead": "edc98b080e76e969e09e8e352fd480cc9a159fa6"
+  "gitHead": "a2a2d111572c2a9db1e6b8fc6d6c4212ad095d7e"
 }

package/.eslintignore

@@ -1,2 +0,0 @@
-node_modules/
-dist/

package/configs/rollup.config.base.js

@@ -1,77 +0,0 @@
-import babel from "rollup-plugin-babel";
-import resolve from "rollup-plugin-node-resolve";
-import vue from "rollup-plugin-vue";
-import cjs from "rollup-plugin-commonjs";
-import replace from "rollup-plugin-replace";
-import requireContext from "rollup-plugin-require-context";
-import { string } from "rollup-plugin-string";
-import fs from "fs";
-import CleanCSS from "clean-css";
-import autoprefixer from "autoprefixer";
-import css from "rollup-plugin-css-only";
-const postcss = require("rollup-plugin-postcss");
-
-const config = require("../package.json");
-
-export default {
-  input: "src/components/index.js",
-  plugins: [
-    resolve({
-      jsnext: true,
-      main: true,
-      browser: true,
-    }),
-    string({
-      include: "**/*.svg",
-    }),
-    vue({
-      css: false,
-      style: {
-        postcssPlugins: [autoprefixer],
-      },
-    }),
-    postcss({
-      extract: true,
-    }),
-    css({
-      output: (styles) => {
-        fs.writeFileSync("lib/index.min.css", new CleanCSS().minify(styles).styles);
-      },
-    }),
-    babel({
-      exclude: "node_modules/**",
-      runtimeHelpers: true,
-    }),
-    cjs({
-      namedExports: {
-        "@authing/native-js-ui-components": [
-          "AuthingGuard",
-          "Guard",
-          "GuardEventsCamelToKebabMap",
-          "GuardMode",
-          "GuardScenes",
-          "LoginMethods",
-          "RegisterMethods",
-        ],
-        "../native-js/lib/index.min.js": [
-          "AuthingGuard",
-          "Guard",
-          "GuardEventsCamelToKebabMap",
-          "GuardMode",
-          "GuardScenes",
-          "LoginMethods",
-          "RegisterMethods",
-          "getAuthClient",
-          "initAuthClient",
-        ],
-      },
-    }),
-    requireContext(),
-    // replace({
-    //   VERSION: JSON.stringify(config.version),
-    // }),
-  ],
-  watch: {
-    include: "src/**",
-  },
-};

package/configs/rollup.config.browser.js

@@ -1,15 +0,0 @@
-import base from './rollup.config.base'
-import { terser } from 'rollup-plugin-terser'
-
-const config = Object.assign({}, base, {
-  output: {
-    exports: 'named',
-    name: 'VueUi',
-    file: 'dist/vue-ui.min.js',
-    format: 'iife',
-  },
-})
-
-config.plugins.push(terser())
-
-export default config

package/configs/rollup.config.es.js

@@ -1,16 +0,0 @@
-import base from './rollup.config.base'
-
-const config = Object.assign({}, base, {
-  output: {
-    name: 'vue-ui',
-    file: 'dist/vue-ui.esm.js',
-    format: 'es',
-  },
-  external: [
-    'focus-visible',
-    'v-tooltip',
-    'vue-resize',
-  ],
-})
-
-export default config

package/configs/rollup.config.umd.js

@@ -1,15 +0,0 @@
-import base from './rollup.config.base'
-import { terser } from 'rollup-plugin-terser'
-
-const config = Object.assign({}, base, {
-  output: {
-    exports: 'named',
-    name: 'AuthingVueUIComponents',
-    file: 'lib/index.min.js',
-    format: 'umd',
-  },
-})
-
-config.plugins.push(terser())
-
-export default config

package/src/components/index.js

@@ -1,7 +0,0 @@
-import AuthingGuard from "./AuthingGuard.vue";
-import Guard from "./Guard.vue";
-
-export * from "./AuthingGuard.vue";
-export * from "./Guard.vue";
-
-export { AuthingGuard, Guard };

package/src/icons.js

@@ -1,18 +0,0 @@
-const icons = require.context('../node_modules/material-design-icons/sprites/svg-sprite', true, /svg-sprite-(\w+)-symbol\.svg$/)
-
-export default {
-  install (Vue) {
-    const iconsWrapper = document.createElement('div')
-    iconsWrapper.style.display = 'none'
-    // Load all the SVG symbols
-    icons.keys().forEach(key => {
-      const result = icons(key)
-      iconsWrapper.innerHTML += result
-    })
-    document.body.insertBefore(iconsWrapper, document.body.firstChild)
-  },
-}
-
-export function generateHtmlIcon (icon) {
-  return `<div class="vue-ui-icon"><svg><use xlink:href="#ic_${icon}_24px"></use></svg></div>`
-}

package/src/index.js

@@ -1,79 +0,0 @@
-import VueIcons from './icons'
-import VTooltip from 'v-tooltip'
-import VueResize from 'vue-resize'
-import 'focus-visible'
-
-import 'vue-resize/dist/vue-resize.css'
-import 'v-tooltip/dist/v-tooltip.css'
-
-// Exported mixins
-export { default as CoupledChild } from './mixins/CoupledChild'
-export { default as CoupledParent } from './mixins/CoupledParent'
-export { default as DisabledChild } from './mixins/DisabledChild'
-export { default as DisableScroll } from './mixins/DisableScroll'
-
-// Exported utils
-export { generateHtmlIcon } from './icons'
-
-// Require all the components that start with 'BaseXXX.vue'
-const components = require.context('./components', true, /[a-z0-9]+\.vue$/)
-
-export function install (Vue, options = {}) {
-  Vue.use(VueIcons)
-
-  Vue.use(VTooltip, mergeOptions({
-    boundariesElement: document.body,
-    themes: {
-      tooltip: {
-        delay: {
-          show: 1000,
-          hide: 800,
-        },
-        instantMove: true,
-      },
-      dropdown: {
-        handleResize: false,
-      },
-    },
-  }, options.vtooltip))
-
-  Vue.use(VueResize)
-
-  // To extract the component name
-  const nameReg = /([a-z0-9]+)\./i
-  // Registration
-  components.keys().forEach(key => {
-    const name = key.match(nameReg)[1]
-    Vue.component(name, components(key))
-  })
-}
-
-const plugin = {
-  // eslint-disable-next-line no-undef
-  version: VERSION,
-  install,
-}
-
-export default plugin
-
-function mergeOptions (to, from) {
-  for (const key in from) {
-    if (to[key] && from[key] && typeof to[key] === 'object' && typeof from[key] === 'object') {
-      mergeOptions(to[key], from[key])
-    } else {
-      to[key] = from[key]
-    }
-  }
-  return to
-}
-
-// Auto-install
-let GlobalVue = null
-if (typeof window !== 'undefined') {
-  GlobalVue = window.Vue
-} else if (typeof global !== 'undefined') {
-  GlobalVue = global.Vue
-}
-if (GlobalVue) {
-  GlobalVue.use(plugin)
-}

package/src/mixins/CoupledChild.js

@@ -1,49 +0,0 @@
-/**
- * (Use with the CoupleParent mixin)
- * This mixin should be used on children components of a component implementing the CoupledParent mixin.
- * @param {string} name Name of the injection
- */
-export default function (name) {
-  // @vue/component
-  return {
-    inject: [
-      name,
-    ],
-
-    computed: {
-      active () {
-        return this[name].activeChild === this.$_couplingProxy
-      },
-    },
-
-    created () {
-      const proxy = this.$_couplingProxy = {}
-      for (const key in this.$data) {
-        if (key.charAt(0) === '$' || key.charAt(0) === '_') continue
-        Object.defineProperty(proxy, key, {
-          enumerable: true,
-          configurable: false,
-          get: () => this.$data[key],
-        })
-      }
-      for (const key in this.$props) {
-        if (key.charAt(0) === '$' || key.charAt(0) === '_') continue
-        Object.defineProperty(proxy, key, {
-          enumerable: true,
-          configurable: false,
-          get: () => this.$props[key],
-        })
-      }
-      Object.defineProperty(proxy, '$slots', {
-        enumerable: false,
-        configurable: false,
-        get: () => this.$slots,
-      })
-      this[name].$_addCoupledChild(proxy)
-    },
-
-    beforeDestroy () {
-      this[name].$_removeCoupledChild(this.$_couplingProxy)
-    },
-  }
-}

package/src/mixins/CoupledParent.js

@@ -1,172 +0,0 @@
-/**
- * (Use with the CoupledChild mixin)
- * Mixin allowing the automatic collection of children while preserving the virtual dom children order at all times.
- * Useful for creating tabs-style component, when we need to replicate the order of the children to display
- * a group of button (tab strip).
- * @param {string} name Name of the injection
- */
-export default function (name) {
-  // @vue/component
-  return {
-    provide () {
-      const proxy = {}
-      Object.defineProperty(proxy, 'activeChild', {
-        get: () => this.activeChild,
-      })
-      proxy.$_addCoupledChild = this.$_addCoupledChild.bind(this)
-      proxy.$_removeCoupledChild = this.$_removeCoupledChild.bind(this)
-      return {
-        [name]: proxy,
-      }
-    },
-
-    props: {
-      childIndex: {
-        default: 0,
-      },
-    },
-
-    data () {
-      return {
-        children: [],
-        activeChildIndex: parseInt(this.childIndex) || 0,
-      }
-    },
-
-    computed: {
-      activeChild () {
-        if (this.activeChildIndex < this.children.length) {
-          return this.children[this.activeChildIndex]
-        }
-      },
-    },
-
-    watch: {
-      childIndex (val) {
-        this.activateChild(parseInt(val) || 0, true)
-      },
-    },
-
-    methods: {
-      /**
-       * Activates a child.
-       * @param {number} index Index of child to activate
-       * @param {boolean} external Indicates if the activation comes from an external source (like props)
-       */
-      activateChild (index, external = false) {
-        const oldIndex = this.activeChildIndex
-        if (index < 0) {
-          index = 0
-        } else if (index >= this.children.length) {
-          index = this.children.length - 1
-        }
-        this.activeChildIndex = index
-        this.$emit('update:childIndex', index)
-        this.childActivated(index, oldIndex, external)
-      },
-
-      /**
-       * Hook called when a child is activated.
-       * @param {number} index Index of the activated child
-       * @param {number} oldIndex Index of the previously activated child
-       * @param {boolean} external Indicates if the activation comes from an external source (like props)
-       */
-      childActivated (index, oldIndex, external) {
-        // Override this in component
-      },
-
-      /**
-       * Add a child component while preserving its order in the children list.
-       * @param {object} proxyVm Vue instance
-       */
-      $_addCoupledChild (proxyVm) {
-        // Guard
-        if (this.$slots && this.$slots.default) {
-          // We need to wait for the instances creation
-          this.$nextTick(() => {
-            // We need to get the components in the slot
-            const childComponents = this.$slots.default.reduce((list, vnode) => {
-              const coupledChild = findCoupledChild(vnode)
-              if (coupledChild) {
-                list.push(coupledChild.$_couplingProxy)
-              }
-              return list
-            }, [])
-            // List has the child component in the right order
-            // We can now register the child component in the right place
-            const index = childComponents.indexOf(proxyVm)
-            // Add child
-            if (index !== -1) {
-              this.children.splice(index, 0, proxyVm)
-              // Hook
-              this.$_updateChildren('add', index, proxyVm)
-            }
-          })
-        }
-      },
-
-      /**
-       * Removes a child component. Automatically activates the next remaining component.
-       * @param {object} proxyVm Vue instance
-       */
-      $_removeCoupledChild (proxyVm) {
-        const index = this.children.indexOf(proxyVm)
-        // Remove child
-        if (index !== -1) {
-          this.children.splice(index, 1)
-        }
-        // Hook
-        this.$_updateChildren('remove', index, proxyVm)
-      },
-
-      /**
-       * Hook called when an operation is processed. It will intelligently activate a child if needed.
-       * @param {string} operation Name of the operation. Can be 'add' or 'remove'
-       * @param {number} index Index of the related child.
-       * @param {object} proxyVm Related child Vue instance
-       */
-      $_updateChildren (operation, index, proxyVm) {
-        if (operation === 'add') {
-          // If the child was added before the currently active one,
-          // we need to move the selection to the right
-          if (index <= this.activeChildIndex) {
-            this.activateChild(this.activeChildIndex + 1)
-          }
-          // Default when there is only one child
-          if (this.children.length === 1) {
-            this.activateChild(0)
-          }
-        } else if (operation === 'remove') {
-          // If we remove a child before the currently active one,
-          // we need to move the selection to the left
-          if (index <= this.activeChildIndex) {
-            this.activateChild(this.activeChildIndex - 1)
-          }
-        }
-      },
-    },
-  }
-}
-
-function findCoupledChild (vnode) {
-  const vm = vnode.child
-  if (vm) {
-    if (vm.$_couplingProxy) {
-      return vm
-    } else {
-      return findCoupledChildInChildren([...vm.$children])
-    }
-  }
-}
-
-// Breadth-first search
-function findCoupledChildInChildren (queue) {
-  let child
-  while ((child = queue.shift())) {
-    if (child.$_couplingProxy) {
-      return child
-    } else {
-      queue.push(...child.$children)
-    }
-  }
-}

package/src/mixins/DisableScroll.js

@@ -1,25 +0,0 @@
-let count = 0
-
-function getScrollingElements () {
-  return document.querySelectorAll('.vue-ui-disable-scroll, body')
-}
-
-function updateScroll () {
-  if (count === 0) {
-    getScrollingElements().forEach(el => el.classList.remove('vue-ui-no-scroll'))
-  } else if (count === 1) {
-    getScrollingElements().forEach(el => el.classList.add('vue-ui-no-scroll'))
-  }
-}
-
-export default {
-  mounted () {
-    count++
-    updateScroll()
-  },
-
-  beforeDestroy () {
-    count--
-    updateScroll()
-  },
-}

package/src/mixins/DisabledChild.js

@@ -1,25 +0,0 @@
-/**
- * (Use with the DisabledParent mixin)
- * This mixin should be implemented on all components that can be disabled.
- */
-// @vue/component
-export default {
-  inject: {
-    VueDisableMixin: {
-      default: null,
-    },
-  },
-
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  computed: {
-    finalDisabled () {
-      return this.disabled || (this.VueDisableMixin && this.VueDisableMixin.data.value)
-    },
-  },
-}