Added configurable options

package.json

@@ -1,6 +1,6 @@
 {
     "name": "vacl",
-    "version": "0.1.4",
+    "version": "0.1.5",
     "description": "A Lightweight Typescript ACL directives library for Vue 3",
     "files": [
         "dist"

rollup.config.js

@@ -2,15 +2,15 @@ import typescript from 'rollup-plugin-typescript2';
 import pkg from './package.json';
 import { terser } from 'rollup-plugin-terser';
 import bundleSize from 'rollup-plugin-bundle-size';
-import path from "path";
 
 export default {
     input: 'src/index.ts',
     output: [
         {
             file: pkg.main,
             format: 'cjs',
-            sourcemap: true
+            sourcemap: true,
+            exports: 'default'
         },
         {
             file: pkg.module,
@@ -21,9 +21,6 @@ export default {
     external: [
         ...Object.keys(pkg.dependencies || {})
     ],
-    alias: {
-        '@/': path.resolve(__dirname, '/src/')
-    },
     plugins: [
         typescript({
             typescript: require('typescript'),

src/index.ts

@@ -1,15 +1,30 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { can, cannot, has, hasnt } from './lib/Directives';
 import type { App } from '@vue/runtime-core';
-import type { Config } from '../types/config';
+import type { Config, Directives } from '../types/config';
 import ACL from './lib/ACL';
 
+const defaults: Required<Config> = {
+    roles: [],
+    permissions: [],
+    forceRemove: false,
+    accessor: '$vacl',
+    directives: {
+        can: 'can',
+        cannot: 'cannot',
+        has: 'has',
+        hasnt: 'hasnt'
+    } as Required<Directives>
+};
+
 export default {
     install: (app: App, options?: Config): void => {
-        const acl = app.config.globalProperties.$vacl = new ACL(options);
+        const directives = { ...defaults.directives, ...Object(options?.directives) };
+        const acl = app.config.globalProperties[options?.accessor ?? defaults.accessor] = new ACL(options);
 
-        app.directive('can', can(acl));
-        app.directive('cannot', cannot(acl));
-        app.directive('has', has(acl));
-        app.directive('hasnt', hasnt(acl));
+        app.directive(directives.can, can(acl));
+        app.directive(directives.cannot, cannot(acl));
+        app.directive(directives.has, has(acl));
+        app.directive(directives.hasnt, hasnt(acl));
     }
 };

src/lib/ACL.ts

@@ -14,7 +14,7 @@ export default class ACL {
      *
      * @returns {ACL}
      */
-    public constructor(config: Config | null = null) {
+    public constructor(config?: Config) {
         this.roles = new Set(config?.roles ?? []);
         this.permissions = new Set(config?.permissions ?? []);
         this.forceRemove = config?.forceRemove ?? false;
@@ -41,7 +41,7 @@ export default class ACL {
     /**
      * Set the roles.
      *
-     * @param {Roles} roles
+     * @param {string[]} roles
      *
      * @returns {ACL}
      */
@@ -54,7 +54,7 @@ export default class ACL {
     /**
      * Set the permissions.
      *
-     * @param {Permissions} permissions
+     * @param {string[]} permissions
      *
      * @returns {ACL}
      */
@@ -67,7 +67,7 @@ export default class ACL {
     /**
      * Add roles to the existing store.
      *
-     * @param {Roles | string} roles
+     * @param {string | string[]} roles
      *
      * @returns {ACL}
      */
@@ -80,7 +80,7 @@ export default class ACL {
     /**
      * Add permissions to the existing store.
      *
-     * @param {Permissions | string} permissions
+     * @param {string | string[]} permissions
      *
      * @returns {ACL}
      */

tests/.eslintrc.js

@@ -24,6 +24,13 @@ module.exports = {
         "jest/prefer-expect-assertions": "off",
         "jest/no-hooks": "off",
         "jest/prefer-called-with": "off",
+        "jest/no-restricted-matchers": [
+            "error",
+            {
+                "toBeFalsy": 'Use toBe(false) instead to avoid unexpected type coercion.',
+                "toBeTruthy": 'Use toBe(true) instead to avoid unexpected type coercion.',
+            }
+        ]
         // "jest/valid-title": ["error", {
         //     mustMatch: {
         //         it: '^should '

tests/helpers.ts

@@ -0,0 +1,25 @@
+import type ACL from '@/lib/ACL';
+import type { VueWrapper } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
+import { can, cannot, has, hasnt } from '@/lib/Directives';
+
+/**
+ * Create a test wrapper.
+ *
+ * @param {ACL} acl
+ * @param {string} template
+ *
+ * @returns {VueWrapper<any>}
+ */
+export function getWrapper(acl: ACL, template: string): VueWrapper<any> {
+    return shallowMount({ template }, {
+        global: {
+            directives: {
+                can: can(acl),
+                cannot: cannot(acl),
+                has: has(acl),
+                hasnt: hasnt(acl)
+            }
+        }
+    });
+}

tests/unit/ACL.test.ts

@@ -1,6 +1,6 @@
 import ACL from '@/lib/ACL';
 
-describe('aCL', () => {
+describe('acl', () => {
     it('can_be_instantiated', () => {
         const acl = new ACL();
 

tests/vue/ACL.test.ts

@@ -1,32 +1,57 @@
-import { mount } from '@vue/test-utils';
+import { shallowMount, VueWrapper } from '@vue/test-utils';
 import { createApp, h } from 'vue';
 import ACL from '@/lib/ACL';
 import Vacl from '@/index';
 
-describe('reactivity', () => {
+describe('vue', () => {
+    const component = {
+        render() {
+            return h('div');
+        }
+    };
+
     it('can be installed correctly', () => {
-        const app = createApp({
-            template: '<div></div>'
-        }).use(Vacl);
+        const app = createApp(component).use(Vacl);
 
         expect(app.config.globalProperties.$vacl).toBeInstanceOf(ACL);
     });
 
     it('provides the acl globally to all components', () => {
-        const component = {
-            render() {
-                return h('div');
+        const wrapper = shallowMount(component, {
+            global: {
+                plugins: [[Vacl, { permissions: ['view'] }]]
             }
-        };
+        });
+
+        expect(wrapper.vm.$vacl).toBeInstanceOf(ACL);
+        expect(wrapper.vm.$vacl.can('view')).toBe(true);
+        expect(wrapper.vm.$vacl.has('admin')).toBe(false);
+    });
 
-        const app = mount(component, {
+    it('should be able to configure global accessor name', () => {
+        const wrapper = shallowMount(component, {
             global: {
-                plugins: [[Vacl, { permissions: ['view'] }]]
+                plugins: [[Vacl, { accessor: '$acl' }]]
             }
         });
 
-        expect(app.vm.$vacl).toBeInstanceOf(ACL);
-        expect(app.vm.$vacl.can('view')).toBeTruthy();
-        expect(app.vm.$vacl.has('admin')).toBeFalsy();
+        expect(wrapper.vm.$acl).toBeInstanceOf(ACL);
+    });
+
+    it('should be able to set the directive names from the config', () => {
+        const div = document.createElement('div');
+        div.id = 'id';
+        document.body.appendChild(div);
+
+        const app = createApp({
+            template: `<div v-able="'view'" data-test='visible'></div>
+             <div v-able="'edit'" data-test='hidden'></div>`
+        })
+            .use(Vacl, { directives: { can: 'able' }, permissions: ['view'] });
+
+        const wrapper = new VueWrapper(app, app.mount('#id'));
+
+        expect(wrapper.find('[data-test="visible"]').isVisible()).toBe(true);
+        expect(wrapper.find('[data-test="hidden"]').isVisible()).toBe(false);
     });
 });

tests/vue/Directives.test.ts

@@ -1,7 +1,5 @@
-import type { VueWrapper } from '@vue/test-utils';
-import { mount } from '@vue/test-utils';
 import ACL from '@/lib/ACL';
-import { can, cannot, has, hasnt } from '@/lib/Directives';
+import { getWrapper } from '../helpers';
 
 /******************************************************************************
  * PERMISSIONS
@@ -215,24 +213,3 @@ describe('dom removal', () => {
 //         expect(incorrectType).toThrow("Value passed to v-can should be a non-empty string. \"1\" passed.");
 //     });
 // });
-
-/**
- * Create a test wrapper.
- *
- * @param {ACL} acl
- * @param {string} template
- *
- * @returns {VueWrapper<any>}
- */
-function getWrapper(acl: ACL, template: string): VueWrapper<any> {
-    return mount({ template }, {
-        global: {
-            directives: {
-                can: can(acl),
-                cannot: cannot(acl),
-                has: has(acl),
-                hasnt: hasnt(acl)
-            }
-        }
-    });
-}

types/config.d.ts

@@ -2,12 +2,21 @@ import type ACL from '../src/lib/ACL';
 
 declare module '@vue/runtime-core' {
     interface ComponentCustomProperties {
-        $vacl: ACL;
+        [key: string]: ACL | any;
     }
 }
 
+export type Directives = {
+    can?: string,
+    cannot?: string,
+    has?: string,
+    hasnt?: string
+}
+
 export type Config = {
     roles?: string[];
     permissions?: string[];
     forceRemove?: boolean;
+    accessor?: string
+    directives?: Directives
 };