vue-modal-viewer - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

package.json

 {
   "name": "vue-modal-viewer",
-  "description": "",
-  "version": "0.1.5",
+  "description": "Show and hide your content in Vue",
+  "version": "0.1.6",
   "main": "dist/vue-modal-viewer.common.js",
   "types": "dts/index.d.ts",
+  "keywords": [
+    "vue",
+    "modal",
+    "show",
+    "hide",
+    "modalviewer"
+  ],
   "scripts": {
@@ -8,0 +15,0 @@ "test": "vue-cli-service serve",

README.md

 # vue-modal-viewer
+Show and hide your content in Vue
 
+## Usage
+
+### Install
+```
+npm i vue vue-modal-viewer
+```
+
+### Include plugin
+```ts
+import Vue from "vue";
+import ModalViewerPlugin from "vue-modal-viewer";
+
+Vue.use(ModalViewerPlugin);
+```
+
+### Create component
+```html
+<template>
+	<button @click="open">Open hidden content</button>
+	<modal :name="modalName" v-slot="{ isShowed }">
+		<h1 v-id="isShowed">My Visible Content</h1>
+		<button @click="hide">Hide</button>
+	</modal>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				modalName:"myModal",
+			}
+		},
+		methods:{
+			show(){
+				this.$modalviewer.show(this.modalName)
+			},
+			hide(){
+				this.$modalviewer.hide(this.modalName)
+			}
+		}
+	}
+</script>
+```
+
+### Mixins
+```html
+<template>
+	<div v-if="isShowed">
+		<h1 v-id="isShowed">My Visible Content</h1>
+		<button @click="hide">Hide</button>
+	</div>
+</template>
+
+<script>
+	import { ModalViewer } from "vue-modal-viewer";
+
+	export default {
+		mixins:[ModalViewer.mixin],
+		props:{//Set default name
+			name:{
+				type:String,
+				default:"trstModal"
+			}
+		}
+	}
+</script>
+```
+
 ## Project setup
@@ -17,4 +86,1 @@ ```
 ```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).

No alert changes

Improved metrics

Total package byte prevSize

38430

increased by2.97%

Number of lines in readme file

86

increased by330%

No dependency changes