https://github.com/lewandy/vue-visibility

Vue plugin that hides or shows elements depending of a criteria. 👀
https://github.com/lewandy/vue-visibility

javascript vuejs

Last synced: about 2 months ago
JSON representation

Vue plugin that hides or shows elements depending of a criteria. 👀

• Host: GitHub
• URL: https://github.com/lewandy/vue-visibility
• Owner: lewandy
• Created: 2020-08-15T15:29:12.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-06-18T04:23:18.000Z (7 months ago)
• Last Synced: 2024-11-08T06:20:39.557Z (2 months ago)
• Topics: javascript, vuejs
• Language: JavaScript
• Homepage:
• Size: 1.44 MB
• Stars: 8
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

• awesome-vue-3 - vue-visibility - Vue plugin that hides or shows elements depending of a criteria. 👀 (Packages)

README

        
# Vue Visibility 👀

Hides or shows elements depending of a criteria.

# Install

```sh

npm install --save @lewandy/vue-visibility

```

or

```sh

yarn add @lewandy/vue-visibility

```

# Usage

```javascript

import { createApp } from "vue";

import App from "./App.vue";

import VueVisibility from "@lewandy/vue-visibility";

const application = createApp(App);

application.use(VueVisibility);

application.mount("#app");

```

## Set identifiers or permissions globally

```javascript

export default {

  name: "App",

  created() {

    this.$root.$setVisibilityPermissions([121, 122, 123]);

  },

};

```

# Examples

## Using provider with placeholder slot if not authorized

```html

      

        

          
You don't have access to see this.

        

        
CARD 1

      


```

## Using the directive.

```html

  


    


	
CARD 2

    

  


```

# VueVisibilityProvider component reference 

 

 	

    

	    Prop

	    Type

	    Required

	    Default

    

  

    

    	

		identifier

		Any

		true

		null

        

    

# TODO

1. Feature : Can disable elements and make it not clickable.

2. Chore : Write basic tests

# 🤝 Contributing

1. Fork this repository.

2. Create new branch with feature name.

3. Go to example folder and run `npm install` and `npm run serve`.

4. The plugin sources files is located in /src/VueVisibility.js.

5. Commit and set commit message with feature name.

6. Push your code to your fork repository.

7. Create pull request. 🙂

# ⭐️ Support

If you like this project, You can support me with starring ⭐ this repository.

# 📄 License

[MIT](LICENSE)

Developed with ❤️ and ☕️ from the dominican republic 🌴