npm package: @napopravku/perm-ui-lib-vue3
Description: ```bash // vue 2 npm install @napopravku/perm-ui-lib-vue2
Latest version: 1.0.17


## 1) Установка

```bash
// vue 2
npm install @napopravku/perm-ui-lib-vue2

// vue 3
npm install @napopravku/perm-ui-lib-vue3
```

## 2) Подключение

```ts
// main.ts

// vue 2
import { permissionPlugin } from '@napopravku/perm-ui-lib-vue2/casl';
permissionPlugin.install(Vue);

// vue 3
import { permissionPlugin } from '@napopravku/perm-ui-lib-vue3/casl';
permissionPlugin.install(Vue);
```

## 3) Использование permissions (одинаково для vue2 и vue3)

Библиотека основана на [CASL](https://casl.js.org/v6/en/).

```ts
// импорт vue 2
import { rules, updateRules, clearRules } from '@napopravku/perm-ui-lib-vue2/casl';

// импорт vue 3
import { rules, updateRules, clearRules } from '@napopravku/perm-ui-lib-vue3/casl';

// обновление доступов
updateRules([
  { 
    action: ['read', 'update'], 
    subject: 'document' 
  }
]);

// удаление всех доступов
clearRules();

// массив доступов
rules.value;
```

## 4) Использование объекта permissions (одинаково для vue2 и vue3)

```ts
// импорт vue 2
import { permissions } from '@napopravku/perm-ui-lib-vue2/casl';

// импорт vue 3
import { permissions } from '@napopravku/perm-ui-lib-vue3/casl';

// permissions — это объект ability из CASL, подробности [тут](https://casl.js.org/v6/en/api/casl-ability)

// проверка доступов через can
permissions.can('read', 'article'); // boolean
```

## 5) Использование компонента Permission (одинаково для vue2 и vue3)

```vue
<script>
// импорт vue 2
import Permission from '@napopravku/perm-ui-lib-vue2/permission';

// импорт vue 3
import Permission from '@napopravku/perm-ui-lib-vue3/permission';
</script>

<template>
  <Permission subject="user" action="read">
    {{ item.createdBy.name }}
  </Permission>
</template>
```

## 6) Продвинутые возможности Permission

### Управление режимом unscopedMode

При установке `unscopedMode=true` компонент не скрывает содержимое при отсутствии прав, а блокирует взаимодействие визуально.

```vue
<Permission subject="user" action="update" :unscopedMode="true">
  Редактирование информации о пользователе
</Permission>
```

### Кастомизация тега-обёртки

С помощью свойства `tag` меняется HTML-тег обёртки (по умолчанию `div`).

```vue
<Permission subject="article" action="read" tag="section">
  <h2>Содержание статьи</h2>
</Permission>
```

## 7) Свойства компонента Permission подробно

| Свойство              | Тип                                                         | Описание                                                                                      |
|-----------------------|-------------------------------------------------------------|-----------------------------------------------------------------------------------------------|
| `type`              | `'block' | 'image' | 'text' | 'phone'`             | Вид отображения, влияет на fallback визуализацию. По умолчанию `'block'`.                      |
| `tag`               | `string`                                                  | HTML-тег для обёртки контента, по умолчанию `div`.                                            |
| `unscopedMode`       | `boolean`                                                | Если `true`, показывается содержимое, но оно блокируется (затемнение и запрет событий).       |
| `action`            | `'read' | 'update' | 'delete' | 'create'`         | Действие, для которого проверяется разрешение.                                               |
| `subject`            | `string`                                                  | Субъект (ресурс), к которому запрашивается доступ.                                           |
| `generateTemplateTooltip` | `(rule: RawRule | null) => string`                   | Функция для генерации пользовательского текста тултипа при отсутствии права.                  |
| `isDebag`            | `boolean`                                                | Включает отладочный вывод правил в консоль (для разработки).                                 |

## 8) Как добавить свои правила и обновить права

Для обновления массива правил используется функция `updateRules`. Правила формируются с полями `code`, `name` и `action`.

```ts
updateRules([
  { code: 'document', name: 'Документ', action: ['read', 'update'] },
  { code: 'user', name: 'Пользователь', action: ['read'] }
]);
```

Для очистки прав вызывается `clearRules()`.

## 9) Рекомендации по интеграции с CASL

- Объект `permissions` — это экземпляр `Ability` из CASL; доступно стандартное API (`can()`, `cannot()`, `rules` и т.п.).
- Для реактивного обновления прав используйте реактивность Vue и события обновления правил.
- Компонент Permission поддерживает слоты для fallback-контента, что позволяет кастомизировать отображение при отсутствии прав.

## 10) Пример использования всех возможностей

```vue
<script setup lang="ts">
import Permission from '@napopravku/perm-ui-lib-vue3/permission';
import { updateRules } from '@napopravku/perm-ui-lib-vue3/casl';

updateRules([
  { code: 'article', name: 'Статья', action: ['read', 'update'] },
]);
</script>

<template>
  <Permission subject="article" action="read" tag="section" :unscopedMode="false" :isDebag="true">
    <h1>Контент статьи</h1>
    <template #fallback>
      <p>У вас нет доступа для чтения статьи.</p>
    </template>
  </Permission>
</template>
```