add directive

Author: PxyUp

.gitignore

@@ -0,0 +1,3 @@
+.vscode
+example
+node_modules

README.md

@@ -1 +1,72 @@
-# vue-screen-resize
+# vue-not-visible
+
+Vue directive for removing from dom (like v-if) element on screen smaller then breakpoints;
+
+## Install
+
+```bash
+$ npm install --save vue-not-visible
+```
+
+```bash
+$ yarn add vue-not-visible
+```
+
+
+## Use default
+
+```js
+import Vue from 'vue'
+import vueNotVisible from 'vue-not-visible'
+
+/* const BREAKPOINTS = {
+    mobile: 425,
+    tablet: 768,
+    tablet_landscape: 1024,
+    desktop: 1200,
+    desktop_large: 1440,
+    hd: 1920,
+}
+*/
+Vue.use(vueNotVisible) // this is default
+Vue.use(vueNotVisible, {ipad: 1280}) // this is custom
+
+```
+
+```html
+<template>
+  <div id="test">
+        {{ message }} {{ count }}
+        <div v-not-visible="'tablet'"> 
+            <div v-on:click="count = count + 1">Not visible on table(screen < 768)</div>
+        </div>
+        <div v-not-visible="'mobile'">
+            <div v-on:click="count = count + 1">Not visible on mobile(screen < 425)</div>
+        </div>
+    </div>
+</template>
+```
+
+## Use custom breakpoints
+
+```js
+import Vue from 'vue'
+import vueNotVisible from 'vue-not-visible'
+
+Vue.use(vueNotVisible, {ipad: 1280}) // this is custom
+
+```
+
+```html
+<template>
+  <div id="test">
+        {{ message }} {{ count }}
+        <div v-not-visible="'ipad'"> 
+            <div v-on:click="count = count + 1">Not visible on ipad(screen < 1280)</div>
+        </div>
+    </div>
+</template>
+```
+
+## License
+[MIT License](https://github.com/PxyUp/vue-not-visible/blob/master/LICENSE)

dist/vue-not-visible.js

@@ -0,0 +1,24 @@
+{
+  "name": "vue-not-visible",
+  "version": "1.0.0",
+  "description": "Vue directive for removing from dom (like v-if) element on screen smaller then breakpoints;",
+  "main": "/src/index.js",
+  "repository": "[email protected]:PxyUp/vue-not-visible.git",
+  "author": "Yura Panarin <[email protected]>",
+  "license": "MIT",
+  "scripts": {
+    "build": "webpack",
+    "precommit": "yarn build && git add --all"
+  },
+  "devDependencies": {
+    "clean-webpack-plugin": "^0.1.19",
+    "git-pre-commit": "^2.1.4",
+    "vue": "^2.5.17",
+    "webpack": "^4.16.5",
+    "webpack-bundle-analyzer": "^2.13.1",
+    "webpack-cli": "^3.1.0"
+  },
+  "engines": {
+    "node": ">=6"
+  }
+}

package.json

@@ -0,0 +1,43 @@
+
+const BREAKPOINTS = {
+    mobile: 425,
+    tablet: 768,
+    tablet_landscape: 1024,
+    desktop: 1200,
+    desktop_large: 1440,
+    hd: 1920,
+}
+
+const plugin = {
+    install(Vue, options) {
+        const _breakpoints = options || BREAKPOINTS
+        const eventBus$ = new Vue();
+        window.addEventListener('resize', () => {
+            eventBus$.$emit('$vueNotVisible', window.innerWidth)
+        })
+        Vue.directive('not-visible', {
+            bind(el, binding) {
+                let removeChild = document.createComment(' ');
+                if (!_breakpoints[binding.value]) {
+                    throw new Error(`Missing breakpoint for ${binding.value}`)
+                }
+                eventBus$.$on('$vueNotVisible', value => {
+                    if (_breakpoints[binding.value] > value) {
+                        if (el.parentNode) {
+                            el.parentNode.replaceChild(removeChild, el)
+                        }
+                    } else {
+                        if (removeChild.parentNode) {
+                            removeChild.parentNode.replaceChild(el, removeChild)
+                        }
+                    }
+                })
+            },
+            inserted() {
+                window.dispatchEvent(new Event('resize'));
+            }
+        })
+    }
+}
+
+export default plugin

src/index.js

@@ -0,0 +1,19 @@
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+module.exports = {
+  entry: "./src/index.js",
+  output: {
+    libraryTarget: "umd",
+    library: "vueNotVisible",
+    filename: "vue-not-visible.js"
+  },
+  resolve: {
+    extensions: [".js"],
+  },
+  target: 'web',
+  mode: "production",
+  plugins: [
+    new CleanWebpackPlugin(['./dist'])
+  ],
+};