Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fchancel/v-privacy
A vue3 plugin that allows to manage the privacy of an HTML element by blurring its content
https://github.com/fchancel/v-privacy
Last synced: 3 months ago
JSON representation
A vue3 plugin that allows to manage the privacy of an HTML element by blurring its content
- Host: GitHub
- URL: https://github.com/fchancel/v-privacy
- Owner: fchancel
- License: mit
- Created: 2023-04-07T19:34:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-05-11T18:39:07.000Z (over 1 year ago)
- Last Synced: 2024-04-27T05:33:03.538Z (7 months ago)
- Language: TypeScript
- Size: 366 KB
- Stars: 11
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-3 - V-privacy - A Vue 3 plugin that allows you to manage the privacy of an HTML element by blurring its content and optional encrypt node text data in DOM. (Packages)
README
[](https://opensource.org/licenses/MIT) [](https://www.npmjs.com/package/v-privacy)
# v-privacy
V-Privacy is a Vue 3 plugin that allows you to manage the privacy of an HTML element by blurring its content and encrypt node text data in DOM. This can be useful in scenarios where you want to hide sensitive information or content that is not relevant for the user.
## Installation
To install V-Privacy, run the following command:
```
npm install --save v-privacy
```
## Options
| Option | Type | Default | Description |
| ------- | -------- | -------- | -------- |
| Blur | number | 5 | The amount of blur to apply to the element. |
| blurColor | string | '' | The color of the background to be applied while blurring the element. |
| disabledAction | boolean | true | If set to true, disables any action that can be taken on the element while it's blurred. |
| disabledScreenReader | true | true | If set to true, hides the element from screen readers while it's blurred. |
| isPrivate | boolean | false | If set to true, applies the privacy filter to the element. |
| isSelectable | boolean | false | If set to true, allows the element to be selectable even if it's blurred. |
| isTabbable | boolean | false | If set to true, the element becomes tabbable when it's blurred. |
| transitionDelay | number | 0 | The delay before the transition starts. |
| transitionDuration | number | 0.2 | The duration of the transition. |
| transitionTimingFunction | string | 'linear' | The timing function of the transition. |
| encryptText | boolean | false | If set to true, node text will be encrypt (Security ++) |
| secretKey | string | '' | The secret key used to encrypt the node text directly in the DOM (If `encryptText` is set to true, this option is REQUIRED) |
## Usage
### Plugin Installation (Without encrypt option)
To use V-Privacy in your Vue 3 project, you need to install it as a plugin.
```js
import { createApp } from "vue";
import VPrivacy from "v-privacy";
const app = createApp(App);
app.use(VPrivacy);
```
It is possible to provide an object to set default values (not all options are mandatory, and the ones not provided will be filled with the default values explained in Options):
```js
app.use(VPrivacy, {
blur: 10,
transitionDuration: 1.2,
blurColor: '#ff0000'
}
);
```
### Plugin Installation (With encrypt option)
To use V-Privacy in your Vue 3 project with encrypt option, you need to install it as a plugin, and fill the secretKey option.
WARNING: in order for this option to be really efficient, the secret key must be kept and used in a secure way.
It is also necessary to keep in mind that despite the encryption of text nodes, the security of information coming from an API is not guaranteed. Indeed, the information can be found by the user via the return call of the API.
```js
app.use(VPrivacy, {
encryptText: true,
secretKey: 'my-awesome-secret-key'
}
);
```
### Directive usage
Using the v-privacy directive with a boolean value alone allows you to use the default options. The boolean impacts the isPrivate key and enables or disables the privacy effect.
```js
This content will be blurred for privacy reasons.
import { ref } from "vue"
const isPrivate = ref(false)
```
Using the v-privacy directive with an object allows you to change the options used (not all options are mandatory, and the ones not provided will be filled with the default values explained in Options), however, the use of isPrivate within the object is mandatory to work:
```js
This content will be blurred for privacy reasons.
import { ref } from "vue"
const isPrivate = ref(false)
```
## Example
Without Encrypt
With Encrypt (The blur is voluntarily decreased on the demo in order to see the encryption)
## Contributing
Contributions, issues and feature requests are welcome! Feel free to check the [issues page](https://github.com/fchancel/v-privacy/issues) or create a pull request.
## License
V-Privacy is licensed under the MIT License. See the [LICENSE](https://github.com/fchancel/v-privacy/blob/main/LICENSE) file for more information.