vue-accessguard 1.0.0 → 1.0.2

package/README.md

@@ -1,8 +1,8 @@
 <div align="center">
-  <img src="./public/logo.png" alt="AccessGuard Logo" width="100%" />
+  <img src="https://unpkg.com/vue-accessguard/dist/logo.png" alt="AccessGuard Logo" width="100%" />
 </div>
 
-# @sawalabs/vue-accessguard
+# vue-accessguard
 
 The **vue-accessguard** library is a robust, lightweight **Role-Based Access Control (RBAC)** solution for **Vue 3** applications. It provides granular control over UI rendering and module protection using Directives, Components, and Composables for protecting views depending on user *roles* or *permissions*. It supports dynamic **Wildcard Matching** (e.g. `*` for Super Admin or `resource:*` for namespaces).
 
@@ -169,7 +169,12 @@ Vue-accessguard scales linearly with enterprise needs with built in string-based
 
 ## Storybook
 
-You can visually test permission mocking by launching Storybook locally:
+Interactive visual documentation is available online:
+👉 **[View Live Storybook Documentation](https://sawalabs.github.io/Vue-AccessGuard/)**
+
+### Running Locally
+
+You can also visually test permission mocking by launching Storybook locally:
 
 ```bash
 pnpm run storybook

package/dist/vue-access-guard.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as l, toRef as y, provide as A, effectScope as v, watchEffect as h, inject as G, computed as w } from "vue";
-const u = /* @__PURE__ */ Symbol("AccessGuard"), b = l({
+import { defineComponent as f, toRef as v, provide as h, effectScope as G, watchEffect as w, inject as S, computed as R } from "vue";
+const i = Symbol("AccessGuard"), x = f({
   name: "AccessGuardProvider",
   props: {
     user: {
@@ -8,65 +8,73 @@ const u = /* @__PURE__ */ Symbol("AccessGuard"), b = l({
     }
   },
   setup(r, { slots: n }) {
-    const s = y(r, "user");
-    return A(u, {
-      user: s
-    }), () => n.default?.();
+    const c = v(r, "user");
+    return h(i, {
+      user: c
+    }), () => {
+      var t;
+      return (t = n.default) == null ? void 0 : t.call(n);
+    };
   }
 });
-function d(r, n, s = "any") {
-  if (!r?.length) return !1;
-  const t = Array.isArray(n) ? n : [n], e = (o) => {
-    if (r.includes("*") || r.includes(o)) return !0;
-    const [c] = o.split(":"), i = `${c}:*`;
-    return r.includes(i);
+function m(r, n, c = "any") {
+  if (!(r != null && r.length)) return !1;
+  const t = Array.isArray(n) ? n : [n], e = (s) => {
+    if (r.includes("*") || r.includes(s)) return !0;
+    const [o] = s.split(":"), a = `${o}:*`;
+    return r.includes(a);
   };
-  return s === "all" ? t.every(e) : t.some(e);
+  return c === "all" ? t.every(e) : t.some(e);
 }
-const S = {
+const b = {
   mounted(r, n) {
-    const s = n.instance;
-    if (!s) return;
-    let t = s.$.parent, e;
+    var o;
+    const c = n.instance;
+    if (!c) return;
+    let t = c.$.parent, e;
     for (; t && !e; )
-      e = t.provides?.[u], t = t.parent;
+      e = (o = t.provides) == null ? void 0 : o[i], t = t.parent;
     if (!e)
       throw new Error("[AccessGuard] v-can used outside AccessGuardProvider");
-    const o = v();
-    o.run(() => {
-      h(() => {
-        const c = n.value;
-        let i, a = "any";
-        typeof c == "string" || Array.isArray(c) ? i = c : (i = c.permission, a = c.mode ?? "any");
-        const m = e.user.value?.permissions ?? [], p = d(m, i, a);
-        r.style.display = p ? "" : "none";
+    const s = G();
+    s.run(() => {
+      w(() => {
+        var l;
+        const a = n.value;
+        let u, d = "any";
+        typeof a == "string" || Array.isArray(a) ? u = a : (u = a.permission, d = a.mode ?? "any");
+        const y = ((l = e.user.value) == null ? void 0 : l.permissions) ?? [], A = m(y, u, d);
+        r.style.display = A ? "" : "none";
       });
-    }), r._scope = o;
+    }), r._scope = s;
   },
   unmounted(r) {
-    r._scope?.stop();
+    var n;
+    (n = r._scope) == null || n.stop();
   }
 };
-function f() {
-  const r = G(
-    u
+function p() {
+  const r = S(
+    i
   );
   if (!r)
     throw new Error("useAccessGuard must be used within AccessGuardProvider");
   const n = (t, e = "any") => {
-    const o = r.user.value?.permissions || [];
-    return d(o, t, e);
+    var o;
+    const s = ((o = r.user.value) == null ? void 0 : o.permissions) || [];
+    return m(s, t, e);
   };
   return {
     can: n,
     cannot: (t, e) => !n(t, e),
     hasRole: (t, e = "any") => {
-      const o = r.user.value?.roles || [], c = Array.isArray(t) ? t : [t];
-      return e === "all" ? c.every((i) => o.includes(i)) : c.some((i) => o.includes(i));
+      var a;
+      const s = ((a = r.user.value) == null ? void 0 : a.roles) || [], o = Array.isArray(t) ? t : [t];
+      return e === "all" ? o.every((u) => s.includes(u)) : o.some((u) => s.includes(u));
     }
   };
 }
-const g = l({
+const E = f({
   name: "Guard",
   props: {
     permission: {
@@ -83,30 +91,33 @@ const g = l({
     }
   },
   setup(r, { slots: n }) {
-    const s = f(), t = w(() => {
+    const c = p(), t = R(() => {
       if (!r.permission && !r.role) return !0;
       let e = !0;
-      return r.permission && (e = e && s.can(r.permission, r.mode)), r.role && e && (e = e && s.hasRole(r.role, r.mode)), e;
+      return r.permission && (e = e && c.can(r.permission, r.mode)), r.role && e && (e = e && c.hasRole(r.role, r.mode)), e;
     });
-    return () => t.value ? n.default?.() : null;
+    return () => {
+      var e;
+      return t.value ? (e = n.default) == null ? void 0 : e.call(n) : null;
+    };
   }
 });
-function x(r) {
-  const { can: n, hasRole: s } = f();
+function j(r) {
+  const { can: n, hasRole: c } = p();
   return r.beforeEach((t) => {
     const e = t.meta;
-    if (e.permission && !n(e.permission, e.mode) || e.role && !s(e.role, e.mode))
+    if (e.permission && !n(e.permission, e.mode) || e.role && !c(e.role, e.mode))
       return e.redirect || "/";
   });
 }
-function E(r) {
-  r.directive("can", S);
+function q(r) {
+  r.directive("can", b);
 }
 export {
-  b as AccessGuardProvider,
-  u as AccessGuardSymbol,
-  g as Guard,
-  x as applyAccessGuard,
-  E as install,
-  f as useAccessGuard
+  x as AccessGuardProvider,
+  i as AccessGuardSymbol,
+  E as Guard,
+  j as applyAccessGuard,
+  q as install,
+  p as useAccessGuard
 };

package/dist/vue-access-guard.umd.js

@@ -1 +1 @@
-(function(t,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],c):(t=typeof globalThis<"u"?globalThis:t||self,c(t.VueAccessGuard={},t.Vue))})(this,(function(t,c){"use strict";const d=Symbol("AccessGuard"),y=c.defineComponent({name:"AccessGuardProvider",props:{user:{type:Object,required:!0}},setup(r,{slots:s}){const o=c.toRef(r,"user");return c.provide(d,{user:o}),()=>s.default?.()}});function f(r,s,o="any"){if(!r?.length)return!1;const n=Array.isArray(s)?s:[s],e=i=>{if(r.includes("*")||r.includes(i))return!0;const[u]=i.split(":"),a=`${u}:*`;return r.includes(a)};return o==="all"?n.every(e):n.some(e)}const p={mounted(r,s){const o=s.instance;if(!o)return;let n=o.$.parent,e;for(;n&&!e;)e=n.provides?.[d],n=n.parent;if(!e)throw new Error("[AccessGuard] v-can used outside AccessGuardProvider");const i=c.effectScope();i.run(()=>{c.watchEffect(()=>{const u=s.value;let a,m="any";typeof u=="string"||Array.isArray(u)?a=u:(a=u.permission,m=u.mode??"any");const v=e.user.value?.permissions??[],w=f(v,a,m);r.style.display=w?"":"none"})}),r._scope=i},unmounted(r){r._scope?.stop()}};function l(){const r=c.inject(d);if(!r)throw new Error("useAccessGuard must be used within AccessGuardProvider");const s=(n,e="any")=>{const i=r.user.value?.permissions||[];return f(i,n,e)};return{can:s,cannot:(n,e)=>!s(n,e),hasRole:(n,e="any")=>{const i=r.user.value?.roles||[],u=Array.isArray(n)?n:[n];return e==="all"?u.every(a=>i.includes(a)):u.some(a=>i.includes(a))}}}const A=c.defineComponent({name:"Guard",props:{permission:{type:[String,Array],required:!1},role:{type:[String,Array],required:!1},mode:{type:String,default:"any"}},setup(r,{slots:s}){const o=l(),n=c.computed(()=>{if(!r.permission&&!r.role)return!0;let e=!0;return r.permission&&(e=e&&o.can(r.permission,r.mode)),r.role&&e&&(e=e&&o.hasRole(r.role,r.mode)),e});return()=>n.value?s.default?.():null}});function G(r){const{can:s,hasRole:o}=l();return r.beforeEach(n=>{const e=n.meta;if(e.permission&&!s(e.permission,e.mode)||e.role&&!o(e.role,e.mode))return e.redirect||"/"})}function h(r){r.directive("can",p)}t.AccessGuardProvider=y,t.AccessGuardSymbol=d,t.Guard=A,t.applyAccessGuard=G,t.install=h,t.useAccessGuard=l,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})}));
+(function(c,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],s):(c=typeof globalThis<"u"?globalThis:c||self,s(c.VueAccessGuard={},c.Vue))})(this,(function(c,s){"use strict";const l=Symbol("AccessGuard"),A=s.defineComponent({name:"AccessGuardProvider",props:{user:{type:Object,required:!0}},setup(r,{slots:n}){const o=s.toRef(r,"user");return s.provide(l,{user:o}),()=>{var t;return(t=n.default)==null?void 0:t.call(n)}}});function m(r,n,o="any"){if(!(r!=null&&r.length))return!1;const t=Array.isArray(n)?n:[n],e=u=>{if(r.includes("*")||r.includes(u))return!0;const[i]=u.split(":"),a=`${i}:*`;return r.includes(a)};return o==="all"?t.every(e):t.some(e)}const G={mounted(r,n){var i;const o=n.instance;if(!o)return;let t=o.$.parent,e;for(;t&&!e;)e=(i=t.provides)==null?void 0:i[l],t=t.parent;if(!e)throw new Error("[AccessGuard] v-can used outside AccessGuardProvider");const u=s.effectScope();u.run(()=>{s.watchEffect(()=>{var p;const a=n.value;let d,y="any";typeof a=="string"||Array.isArray(a)?d=a:(d=a.permission,y=a.mode??"any");const S=((p=e.user.value)==null?void 0:p.permissions)??[],b=m(S,d,y);r.style.display=b?"":"none"})}),r._scope=u},unmounted(r){var n;(n=r._scope)==null||n.stop()}};function f(){const r=s.inject(l);if(!r)throw new Error("useAccessGuard must be used within AccessGuardProvider");const n=(t,e="any")=>{var i;const u=((i=r.user.value)==null?void 0:i.permissions)||[];return m(u,t,e)};return{can:n,cannot:(t,e)=>!n(t,e),hasRole:(t,e="any")=>{var a;const u=((a=r.user.value)==null?void 0:a.roles)||[],i=Array.isArray(t)?t:[t];return e==="all"?i.every(d=>u.includes(d)):i.some(d=>u.includes(d))}}}const h=s.defineComponent({name:"Guard",props:{permission:{type:[String,Array],required:!1},role:{type:[String,Array],required:!1},mode:{type:String,default:"any"}},setup(r,{slots:n}){const o=f(),t=s.computed(()=>{if(!r.permission&&!r.role)return!0;let e=!0;return r.permission&&(e=e&&o.can(r.permission,r.mode)),r.role&&e&&(e=e&&o.hasRole(r.role,r.mode)),e});return()=>{var e;return t.value?(e=n.default)==null?void 0:e.call(n):null}}});function v(r){const{can:n,hasRole:o}=f();return r.beforeEach(t=>{const e=t.meta;if(e.permission&&!n(e.permission,e.mode)||e.role&&!o(e.role,e.mode))return e.redirect||"/"})}function w(r){r.directive("can",G)}c.AccessGuardProvider=A,c.AccessGuardSymbol=l,c.Guard=h,c.applyAccessGuard=v,c.install=w,c.useAccessGuard=f,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "vue-accessguard",
+  "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "main": "dist/vue-access-guard.umd.js",
   "module": "dist/vue-access-guard.es.js",
@@ -35,12 +36,13 @@
     "@vitest/coverage-v8": "4.0.18",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.8.1",
+    "gh-pages": "^6.3.0",
     "jsdom": "^28.1.0",
     "playwright": "^1.58.2",
     "storybook": "^8.6.17",
     "storybook-vue3-router": "^4.0.1",
     "typescript": "~5.9.3",
-    "vite": "^7.3.1",
+    "vite": "^6.0.0",
     "vitest": "^4.0.18",
     "vue-router": "^4.6.4",
     "vue-tsc": "^3.1.5"
@@ -53,6 +55,7 @@
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "deploy-storybook": "storybook build && gh-pages -d storybook-static"
   }
 }