locator-ars-lib 1.0.0

package/README.md

@@ -0,0 +1,162 @@
+# Locator ARS Lib
+
+Библиотека для управления проверкой прав доступа во Vue 3 приложениях.
+
+## Установка
+
+```bash
+npm install locator-ars-lib
+```
+
+или
+
+```bash
+yarn add locator-ars-lib
+```
+
+## Настройка
+
+Добавьте плагин в ваше Vue приложение:
+
+```typescript
+// main.ts
+import { createApp } from "vue";
+import App from "./App.vue";
+import LocatorArsLib from "locator-ars-lib";
+
+const app = createApp(App);
+
+// Установка с настройками (опционально)
+app.use(LocatorArsLib, {
+  baseUrl: "https://your-api.com", // Базовый URL для API (опционально)
+  endpoint: "/api/v1/dashboard/access", // Путь для проверки прав (опционально)
+});
+
+app.mount("#app");
+```
+
+## Использование
+
+### 1. Компонент Check
+
+Оберните компоненты, требующие проверку прав:
+
+```vue
+<template>
+  <Check action="edit_user">
+    <button>Edit User</button>
+  </Check>
+</template>
+```
+
+С фолбэком при отсутствии прав:
+
+```vue
+<template>
+  <Check action="delete_item">
+    <button>Delete</button>
+
+    <template #fallback>
+      <span>You don't have permission to delete</span>
+    </template>
+  </Check>
+</template>
+```
+
+С отображением загрузки:
+
+```vue
+<template>
+  <Check action="create_project">
+    <button>Create Project</button>
+
+    <template #loading>
+      <span>Checking permissions...</span>
+    </template>
+
+    <template #fallback>
+      <span>No permission</span>
+    </template>
+  </Check>
+</template>
+```
+
+### 2. Директива v-can
+
+Используйте директиву для простой проверки на элементах:
+
+```vue
+<template>
+  <button v-can="'edit_user'">Edit User</button>
+
+  <div v-can="'view_analytics'">
+    <!-- Аналитика будет видна только при наличии прав -->
+  </div>
+</template>
+```
+
+### 3. Композиция usePermissions
+
+Для программного использования в компонентах:
+
+```vue
+<script setup>
+import { usePermissions } from "locator-ars-lib";
+
+// Проверка одного права
+const { can, isLoading } = usePermissions("manage_users");
+
+// Проверка с реактивным действием
+const action = ref("edit_post");
+const { can: canEditPost } = usePermissions(action);
+
+// Ручная проверка
+const { check, can: canDeleteUser } = usePermissions("delete_user", {
+  autoCheck: false,
+});
+
+// Проверить вручную при необходимости
+function handleDelete() {
+  check().then(() => {
+    if (canDeleteUser.value) {
+      // Выполнить удаление
+    }
+  });
+}
+</script>
+```
+
+## API
+
+### Компонент Check
+
+| Prop     | Тип     | По умолчанию | Описание                                        |
+| -------- | ------- | ------------ | ----------------------------------------------- |
+| action   | string  |              | Название действия для проверки                  |
+| fallback | boolean | false        | Показывать ли fallback слот при отсутствии прав |
+
+### Директива v-can
+
+```vue
+v-can="'action_name'"
+```
+
+### usePermissions composable
+
+```typescript
+const {
+  can, // Computed<boolean> - есть ли права
+  isLoading, // Ref<boolean> - выполняется ли загрузка
+  error, // Ref<Error | null> - ошибка, если есть
+  check, // () => Promise<void> - функция для ручной проверки
+} = usePermissions(action, options);
+```
+
+| Параметр          | Тип                   | По умолчанию | Описание                             |
+| ----------------- | --------------------- | ------------ | ------------------------------------ |
+| action            | string \| Ref<string> |              | Название действия для проверки       |
+| options.autoCheck | boolean               | true         | Автоматически проверять при создании |
+
+## Лицензия
+
+MIT

package/dist/locator-ars-lib.es.js

@@ -0,0 +1,132 @@
+var h = Object.defineProperty;
+var y = (e, s, n) => s in e ? h(e, s, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[s] = n;
+var o = (e, s, n) => (y(e, typeof s != "symbol" ? s + "" : s, n), n);
+import { inject as v, ref as l, computed as m, watch as _, onUnmounted as g, defineComponent as k, toRefs as w, renderSlot as u } from "vue";
+import P from "axios";
+class S {
+  constructor(s) {
+    o(this, "axios");
+    o(this, "cache", /* @__PURE__ */ new Map());
+    o(this, "endpoint");
+    this.axios = P.create({
+      baseURL: (s == null ? void 0 : s.baseUrl) || ""
+    }), this.endpoint = (s == null ? void 0 : s.endpoint) || "/api/v1/dashboard/access";
+  }
+  async can(s) {
+    if (this.cache.has(s))
+      return this.cache.get(s);
+    try {
+      const a = (await this.axios.get(this.endpoint, {
+        params: { action: s }
+      })).data.allowed || !1;
+      return this.cache.set(s, a), a;
+    } catch (n) {
+      return console.error(`Error checking permission for ${s}:`, n), !1;
+    }
+  }
+  clearCache(s) {
+    s ? this.cache.delete(s) : this.cache.clear();
+  }
+}
+const f = Symbol("Permissions");
+function C(e) {
+  return new S(e);
+}
+const $ = {
+  install(e, s) {
+    const n = C(s);
+    e.provide(f, n);
+  }
+};
+function d() {
+  const e = v(f);
+  if (!e)
+    throw new Error("Permissions plugin not installed!");
+  return e;
+}
+function D(e, s = {}) {
+  const n = d(), a = l(null), i = l(!1), t = l(null), p = m(() => typeof e == "string" ? e : e.value), c = async () => {
+    if (p.value) {
+      i.value = !0, t.value = null;
+      try {
+        a.value = await n.can(p.value);
+      } catch (r) {
+        t.value = r instanceof Error ? r : new Error(String(r)), a.value = !1;
+      } finally {
+        i.value = !1;
+      }
+    }
+  };
+  if (s.autoCheck !== !1 && c(), typeof e != "string") {
+    const r = _(e, () => {
+      c();
+    });
+    g(() => {
+      r();
+    });
+  }
+  return {
+    isAllowed: a,
+    isLoading: i,
+    error: t,
+    check: c,
+    can: m(() => a.value === !0)
+  };
+}
+const E = k({
+  name: "Check",
+  props: {
+    action: {
+      type: String,
+      required: !0
+    },
+    fallback: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    const { action: s } = w(e), { can: n, isLoading: a } = D(s, { autoCheck: !0 });
+    return {
+      can: n,
+      isLoading: a
+    };
+  }
+}), L = (e, s) => {
+  const n = e.__vccOpts || e;
+  for (const [a, i] of s)
+    n[a] = i;
+  return n;
+};
+function b(e, s, n, a, i, t) {
+  return e.can ? u(e.$slots, "default", { key: 0 }) : e.isLoading ? u(e.$slots, "loading", { key: 2 }) : u(e.$slots, "fallback", { key: 1 });
+}
+const x = /* @__PURE__ */ L(E, [["render", b]]), U = {
+  async mounted(e, s) {
+    const n = e.style.display;
+    e._permission_data = {
+      action: s.value,
+      originalDisplay: n
+    }, await d().can(s.value) || (e.style.display = "none");
+  },
+  async updated(e, s) {
+    (!e._permission_data || e._permission_data.action !== s.value) && (e._permission_data = {
+      action: s.value,
+      originalDisplay: e.style.display || ""
+    }, await d().can(s.value) ? e.style.display = e._permission_data.originalDisplay : e.style.display = "none");
+  },
+  unmounted(e) {
+    e._permission_data && (e.style.display = e._permission_data.originalDisplay, delete e._permission_data);
+  }
+}, A = {
+  install(e, s) {
+    e.use($, s), e.component("Check", x), e.directive("can", U);
+  }
+};
+export {
+  x as Check,
+  A as default,
+  C as setupPermissions,
+  D as usePermissions,
+  U as vCan
+};

package/dist/locator-ars-lib.umd.js

@@ -0,0 +1 @@
+(function(n,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue"),require("axios")):typeof define=="function"&&define.amd?define(["exports","vue","axios"],i):(n=typeof globalThis<"u"?globalThis:n||self,i(n.LocatorArsLib={},n.Vue,n.axios))})(this,function(n,i,t){"use strict";var $=Object.defineProperty;var L=(n,i,t)=>i in n?$(n,i,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[i]=t;var u=(n,i,t)=>(L(n,typeof i!="symbol"?i+"":i,t),t);class P{constructor(s){u(this,"axios");u(this,"cache",new Map);u(this,"endpoint");this.axios=t.create({baseURL:(s==null?void 0:s.baseUrl)||""}),this.endpoint=(s==null?void 0:s.endpoint)||"/api/v1/dashboard/access"}async can(s){if(this.cache.has(s))return this.cache.get(s);try{const a=(await this.axios.get(this.endpoint,{params:{action:s}})).data.allowed||!1;return this.cache.set(s,a),a}catch(r){return console.error(`Error checking permission for ${s}:`,r),!1}}clearCache(s){s?this.cache.delete(s):this.cache.clear()}}const p=Symbol("Permissions");function m(e){return new P(e)}const S={install(e,s){const r=m(s);e.provide(p,r)}};function d(){const e=i.inject(p);if(!e)throw new Error("Permissions plugin not installed!");return e}function h(e,s={}){const r=d(),a=i.ref(null),o=i.ref(!1),l=i.ref(null),_=i.computed(()=>typeof e=="string"?e:e.value),f=async()=>{if(_.value){o.value=!0,l.value=null;try{a.value=await r.can(_.value)}catch(c){l.value=c instanceof Error?c:new Error(String(c)),a.value=!1}finally{o.value=!1}}};if(s.autoCheck!==!1&&f(),typeof e!="string"){const c=i.watch(e,()=>{f()});i.onUnmounted(()=>{c()})}return{isAllowed:a,isLoading:o,error:l,check:f,can:i.computed(()=>a.value===!0)}}const g=i.defineComponent({name:"Check",props:{action:{type:String,required:!0},fallback:{type:Boolean,default:!1}},setup(e){const{action:s}=i.toRefs(e),{can:r,isLoading:a}=h(s,{autoCheck:!0});return{can:r,isLoading:a}}}),k=(e,s)=>{const r=e.__vccOpts||e;for(const[a,o]of s)r[a]=o;return r};function w(e,s,r,a,o,l){return e.can?i.renderSlot(e.$slots,"default",{key:0}):e.isLoading?i.renderSlot(e.$slots,"loading",{key:2}):i.renderSlot(e.$slots,"fallback",{key:1})}const y=k(g,[["render",w]]),v={async mounted(e,s){const r=e.style.display;e._permission_data={action:s.value,originalDisplay:r},await d().can(s.value)||(e.style.display="none")},async updated(e,s){(!e._permission_data||e._permission_data.action!==s.value)&&(e._permission_data={action:s.value,originalDisplay:e.style.display||""},await d().can(s.value)?e.style.display=e._permission_data.originalDisplay:e.style.display="none")},unmounted(e){e._permission_data&&(e.style.display=e._permission_data.originalDisplay,delete e._permission_data)}},C={install(e,s){e.use(S,s),e.component("Check",y),e.directive("can",v)}};n.Check=y,n.default=C,n.setupPermissions=m,n.usePermissions=h,n.vCan=v,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/examples/BasicUsage.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="example-container">
+    <h1>Permissions Examples</h1>
+    
+    <!-- Пример использования компонента Check -->
+    <div class="example-block">
+      <h2>Using Check Component</h2>
+      
+      <Check action="view_dashboard">
+        <div class="dashboard-panel">
+          <h3>Dashboard Content</h3>
+          <p>This content is only visible for users with 'view_dashboard' permission</p>
+        </div>
+        
+        <template #fallback>
+          <div class="no-permission">
+            <p>You don't have permission to view the dashboard</p>
+          </div>
+        </template>
+        
+        <template #loading>
+          <div class="loading">
+            <p>Loading permissions...</p>
+          </div>
+        </template>
+      </Check>
+    </div>
+    
+    <!-- Пример использования директивы v-can -->
+    <div class="example-block">
+      <h2>Using v-can Directive</h2>
+      
+      <button v-can="'edit_user'" class="action-button">
+        Edit User
+      </button>
+      
+      <button v-can="'delete_user'" class="action-button danger">
+        Delete User
+      </button>
+    </div>
+    
+    <!-- Пример использования composable usePermissions -->
+    <div class="example-block">
+      <h2>Using usePermissions Composable</h2>
+      
+      <div class="permission-status">
+        <p>Can create project: <span :class="canCreateProject ? 'allowed' : 'denied'">{{ canCreateProject ? 'Yes' : 'No' }}</span></p>
+        <p>Is loading: {{ isLoadingPermission ? 'Yes' : 'No' }}</p>
+        <button @click="checkPermissionManually" class="action-button">
+          Check Again
+        </button>
+      </div>
+      
+      <div v-if="canCreateProject" class="action-panel">
+        <button class="action-button primary">Create New Project</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Check, usePermissions } from 'locator-ars-lib'
+
+// Использование composable
+const { can: canCreateProject, isLoading: isLoadingPermission, check: checkPermissionManually } = usePermissions('create_project')
+</script>
+
+<style scoped>
+.example-container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: Arial, sans-serif;
+}
+
+.example-block {
+  margin-bottom: 30px;
+  padding: 20px;
+  border: 1px solid #eee;
+  border-radius: 5px;
+}
+
+.dashboard-panel {
+  background-color: #f5f5f5;
+  padding: 15px;
+  border-radius: 4px;
+}
+
+.action-button {
+  padding: 8px 16px;
+  margin-right: 10px;
+  border: none;
+  border-radius: 4px;
+  background-color: #4a90e2;
+  color: white;
+  cursor: pointer;
+}
+
+.action-button.danger {
+  background-color: #e25c4a;
+}
+
+.action-button.primary {
+  background-color: #42b983;
+}
+
+.permission-status {
+  margin-bottom: 15px;
+}
+
+.allowed {
+  color: #42b983;
+  font-weight: bold;
+}
+
+.denied {
+  color: #e25c4a;
+  font-weight: bold;
+}
+
+.no-permission {
+  padding: 15px;
+  background-color: #ffeeee;
+  border-left: 4px solid #e25c4a;
+}
+
+.loading {
+  padding: 15px;
+  background-color: #eeeeff;
+  border-left: 4px solid #4a90e2;
+}
+</style> 

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "locator-ars-lib",
+  "version": "1.0.0",
+  "description": "Permissions library for Vue 3 applications",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "vue-tsc && vite build",
+    "test": "vitest run",
+    "lint": "eslint src --ext .ts,.vue"
+  },
+  "keywords": [
+    "vue",
+    "permissions",
+    "access control",
+    "vue3"
+  ],
+  "author": "badkiko",
+  "license": "MIT",
+  "peerDependencies": {
+    "axios": "^0.27.0",
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.19.100",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/runtime-core": "^3.5.13",
+    "axios": "^0.27.2",
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0",
+    "vue": "^3.2.45",
+    "vue-tsc": "^1.0.9"
+  }
+}

package/src/components/Check.vue

@@ -0,0 +1,33 @@
+<template>
+  <slot v-if="can" />
+  <slot name="fallback" v-else-if="!isLoading" />
+  <slot name="loading" v-else />
+</template>
+
+<script lang="ts">
+import { defineComponent, toRefs, PropType } from 'vue';
+import { usePermissions } from '../composables/usePermissions';
+
+export default defineComponent({
+  name: 'Check',
+  props: {
+    action: {
+      type: String as PropType<string>,
+      required: true
+    },
+    fallback: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props) {
+    const { action } = toRefs(props);
+    const { can, isLoading } = usePermissions(action, { autoCheck: true });
+
+    return {
+      can,
+      isLoading
+    };
+  }
+});
+</script> 

package/src/composables/usePermissions.ts

@@ -0,0 +1,57 @@
+import { ref, computed, Ref, watch, onUnmounted } from 'vue'
+import { usePermissionsService } from '../plugin'
+
+export interface UsePermissionsOptions {
+    autoCheck?: boolean
+}
+
+export function usePermissions(action: string | Ref<string>, options: UsePermissionsOptions = {}) {
+    const permissionsService = usePermissionsService()
+    const isAllowed = ref<boolean | null>(null)
+    const isLoading = ref(false)
+    const error = ref<Error | null>(null)
+
+    const actionValue = computed(() => {
+        return typeof action === 'string' ? action : action.value
+    })
+
+    const checkPermission = async () => {
+        if (!actionValue.value) return
+
+        isLoading.value = true
+        error.value = null
+
+        try {
+            isAllowed.value = await permissionsService.can(actionValue.value)
+        } catch (err) {
+            error.value = err instanceof Error ? err : new Error(String(err))
+            isAllowed.value = false
+        } finally {
+            isLoading.value = false
+        }
+    }
+
+    // Auto-check on mount if requested
+    if (options.autoCheck !== false) {
+        checkPermission()
+    }
+
+    // Re-check when action changes
+    if (typeof action !== 'string') {
+        const unwatch = watch(action, () => {
+            checkPermission()
+        })
+
+        onUnmounted(() => {
+            unwatch()
+        })
+    }
+
+    return {
+        isAllowed,
+        isLoading,
+        error,
+        check: checkPermission,
+        can: computed(() => isAllowed.value === true)
+    }
+} 

package/src/directives/vCan.ts

@@ -0,0 +1,55 @@
+import { ObjectDirective, DirectiveBinding } from 'vue'
+import { usePermissionsService } from '../plugin'
+
+interface CanHTMLElement extends HTMLElement {
+    _permission_data?: {
+        action: string
+        originalDisplay: string
+    }
+}
+
+export const vCan: ObjectDirective = {
+    async mounted(el: CanHTMLElement, binding: DirectiveBinding) {
+        // Store original display value
+        const originalDisplay = el.style.display
+
+        // Store action and original display for updates
+        el._permission_data = {
+            action: binding.value,
+            originalDisplay
+        }
+
+        const permissionsService = usePermissionsService()
+        const hasPermission = await permissionsService.can(binding.value)
+
+        if (!hasPermission) {
+            el.style.display = 'none'
+        }
+    },
+
+    async updated(el: CanHTMLElement, binding: DirectiveBinding) {
+        if (!el._permission_data || el._permission_data.action !== binding.value) {
+            // Action has changed or directive is new
+            el._permission_data = {
+                action: binding.value,
+                originalDisplay: el.style.display || ''
+            }
+
+            const permissionsService = usePermissionsService()
+            const hasPermission = await permissionsService.can(binding.value)
+
+            if (!hasPermission) {
+                el.style.display = 'none'
+            } else {
+                el.style.display = el._permission_data.originalDisplay
+            }
+        }
+    },
+
+    unmounted(el: CanHTMLElement) {
+        if (el._permission_data) {
+            el.style.display = el._permission_data.originalDisplay
+            delete el._permission_data
+        }
+    }
+} 

package/src/index.ts

@@ -0,0 +1,20 @@
+import { App } from 'vue'
+import Check from './components/Check.vue'
+import { usePermissions } from './composables/usePermissions'
+import { PermissionsPlugin, setupPermissions } from './plugin'
+import { vCan } from './directives/vCan'
+
+export {
+    Check,
+    usePermissions,
+    setupPermissions,
+    vCan
+}
+
+export default {
+    install(app: App, options?: { baseUrl?: string }) {
+        app.use(PermissionsPlugin, options)
+        app.component('Check', Check)
+        app.directive('can', vCan)
+    }
+} 

package/src/plugin.ts

@@ -0,0 +1,23 @@
+import { App, inject, InjectionKey } from 'vue'
+import { PermissionsService, PermissionsOptions } from './services/permissionsService'
+
+export const PermissionsKey: InjectionKey<PermissionsService> = Symbol('Permissions')
+
+export function setupPermissions(options?: PermissionsOptions): PermissionsService {
+    return new PermissionsService(options)
+}
+
+export const PermissionsPlugin = {
+    install(app: App, options?: PermissionsOptions) {
+        const permissionsService = setupPermissions(options)
+        app.provide(PermissionsKey, permissionsService)
+    }
+}
+
+export function usePermissionsService(): PermissionsService {
+    const permissionsService = inject(PermissionsKey)
+    if (!permissionsService) {
+        throw new Error('Permissions plugin not installed!')
+    }
+    return permissionsService
+} 

package/src/services/permissionsService.ts

@@ -0,0 +1,50 @@
+import axios, { AxiosInstance } from 'axios'
+
+export interface PermissionsOptions {
+    baseUrl?: string
+    endpoint?: string
+}
+
+export class PermissionsService {
+    private axios: AxiosInstance
+    private cache: Map<string, boolean> = new Map()
+    private endpoint: string
+
+    constructor(options?: PermissionsOptions) {
+        this.axios = axios.create({
+            baseURL: options?.baseUrl || ''
+        })
+        this.endpoint = options?.endpoint || '/api/v1/dashboard/access'
+    }
+
+    async can(action: string): Promise<boolean> {
+        // Check if we have a cached result
+        if (this.cache.has(action)) {
+            return this.cache.get(action) as boolean
+        }
+
+        try {
+            const response = await this.axios.get(this.endpoint, {
+                params: { action }
+            })
+
+            const allowed = response.data.allowed || false
+
+            // Cache the result
+            this.cache.set(action, allowed)
+
+            return allowed
+        } catch (error) {
+            console.error(`Error checking permission for ${action}:`, error)
+            return false
+        }
+    }
+
+    clearCache(action?: string): void {
+        if (action) {
+            this.cache.delete(action)
+        } else {
+            this.cache.clear()
+        }
+    }
+} 

package/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "node",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "esModuleInterop": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Type declarations */
+    "declaration": true,
+    "declarationDir": "dist",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+} 

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+} 

package/vite.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+
+export default defineConfig({
+    plugins: [vue()],
+    build: {
+        lib: {
+            entry: resolve(__dirname, 'src/index.ts'),
+            name: 'LocatorArsLib',
+            fileName: (format) => `locator-ars-lib.${format}.js`
+        },
+        rollupOptions: {
+            external: ['vue', 'axios'],
+            output: {
+                globals: {
+                    vue: 'Vue',
+                    axios: 'axios'
+                }
+            }
+        }
+    }
+})