├── .gitignore
├── .babelrc
├── .banner
├── src
    └── v-visible.js
├── webpack.config.min.js
├── example
    ├── app.js
    └── index.html
├── test
    └── unit.spec.js
├── dist
    ├── v-visible.min.js
    └── v-visible.js
├── README.md
├── release.sh
├── LICENSE
├── webpack.config.js
├── package.json
└── karma.conf.js


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | npm-debug.log


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "stage-2"],
3 |   "plugins": ["transform-runtime"],
4 |   "comments": false
5 | }


--------------------------------------------------------------------------------
/.banner:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * VueVisible plugin v%version%
 3 |  * 
 4 |  * v-visible directive for vue
 5 |  *
 6 |  * @author Javis Pérez <javisperez@gmail.com>
 7 |  * http://www.github.com/javisperez/VueVisible
 8 |  *
 9 |  * Released under the MIT License.
10 |  */
11 | 
12 | 


--------------------------------------------------------------------------------
/src/v-visible.js:
--------------------------------------------------------------------------------
 1 | const vVisible = {
 2 |     install(Vue) {
 3 |         Vue.directive('visible', (el, binding) => {
 4 |             var value = binding.value;
 5 | 
 6 |             if (!!value) {
 7 |                 el.style.visibility = 'visible';
 8 |             } else {
 9 |                 el.style.visibility = 'hidden';
10 |             }
11 |         });
12 |     }
13 | };
14 | 
15 | if (typeof window !== 'undefined' && window.Vue) {
16 |     window.Vue.use(vVisible);
17 | }
18 | 
19 | export default vVisible;


--------------------------------------------------------------------------------
/webpack.config.min.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | 
 3 | module.exports = exports = Object.create(require('./webpack.config.js'));
 4 | 
 5 | exports.plugins = (exports.plugins || []).concat(
 6 |     new webpack.optimize.UglifyJsPlugin({
 7 |             minimize: true,
 8 |             sourceMap: false,
 9 |             mangle: true,
10 |             compress: {
11 |                 warnings: false
12 |             },
13 |             output: {
14 |                 comments: false
15 |             }
16 |         })
17 | );
18 | 
19 | exports.output = Object.create(exports.output);
20 | 
21 | exports.output.filename = exports.output.filename.replace(/\.js$/, '.min.js');


--------------------------------------------------------------------------------
/example/app.js:
--------------------------------------------------------------------------------
 1 | new Vue({
 2 |     el: '#app',
 3 | 
 4 |     created() {
 5 |         for (let i=0, l=Math.round(Math.random() * 10); i<l; i++) {
 6 |             this.cards.push({
 7 |                 visible: true,
 8 |                 type: ['show', 'visible'][i % 2]
 9 |             });
10 |         }
11 |     },
12 | 
13 |     data: {
14 |         cards: []
15 |     },
16 | 
17 |     methods: {
18 |         toggle(card) {
19 |             card.visible = !card.visible;
20 |         }
21 |     },
22 | 
23 |     template: `<div>
24 |         <div class="card" v-for="card in cards">
25 |             <div class="content" v-if="card.type === 'show'" v-show="card.visible">This is with v-show</div>
26 |             <div class="content" v-if="card.type === 'visible'" v-visible="card.visible">This is with v-visible</div>
27 |             <span class="btn btn-primary" @click="toggle(card)">Toggle</span>
28 |         </div>
29 |     </div>`
30 | });


--------------------------------------------------------------------------------
/test/unit.spec.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue/dist/vue';
 2 | import VueVisible from '../src/v-visible.js';
 3 | 
 4 | Vue.use(VueVisible);
 5 | 
 6 | describe('visibility', () => {
 7 |     it ('should be visible', done => {
 8 |         const vm = new Vue({
 9 |             data: {
10 |                 visible: false
11 |             },
12 | 
13 |             mounted() {
14 |                 setTimeout(_ => {
15 |                     this.visible = true;
16 | 
17 |                     this.$nextTick(next);
18 |                 }, 3000);
19 |             },
20 | 
21 |             template: `<div>
22 |                 <div class="content" v-visible="visible">Content</div>
23 |             </div>`
24 |         }).$mount();
25 | 
26 |         expect(vm.$el.querySelector('div .content').style.visibility).toBe('hidden');
27 | 
28 |         function next () {
29 |             expect(vm.$el.querySelector('div .content').style.visibility).toBe('visible');
30 |             done();
31 |         }
32 |     });
33 | });
34 | 


--------------------------------------------------------------------------------
/dist/v-visible.min.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("VueVisible",[],t):"object"==typeof exports?exports.VueVisible=t():e.VueVisible=t()}(this,function(){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i={install:function(e){e.directive("visible",function(e,t){var n=t.value;e.style.visibility=n?"visible":"hidden"})}};"undefined"!=typeof window&&window.Vue&&window.Vue.use(i),t.default=i}])});


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # VueVisible
 2 | 
 3 | v-visible directive for VueJS (2.x)
 4 | 
 5 | ## Demo
 6 | A jsFiddle live demo: https://jsfiddle.net/fcpc6utm/
 7 | 
 8 | ## About
 9 | 
10 | This plugins adds a v-visible directive (similar to the native v-show) that changes the `visibility` style of the applied element (hidden or visible).
11 | 
12 | ## Install
13 | 
14 | With npm:
15 | 
16 | ```
17 | npm install --save vue-visible
18 | ```
19 | 
20 | With CDN:
21 | 
22 | ```html
23 | <script src="https://cdn.jsdelivr.net/npm/vue-visible@1/dist/v-visible.min.js"></script>
24 | ```
25 | 
26 | ## Usage
27 | 
28 | If you're using modules, first import it:
29 | 
30 | ```
31 | import VueVisible from 'vue-visible';
32 | 
33 | Vue.use(VueVisible);
34 | ```
35 | 
36 | Then in your template just use the directive:
37 | 
38 | ```
39 | <div v-visible="myCondition">I'm visible</div>
40 | ```
41 | 
42 | Or if you're not using modules, just include the js:
43 | 
44 | ```
45 | <script src="node_modules/vue-visible/dist/v-visible.js"></script>
46 | ```
47 | ```
48 | <div v-visible="myCondition">I'm visible</div>
49 | ```
50 | 


--------------------------------------------------------------------------------
/release.sh:
--------------------------------------------------------------------------------
 1 | #! /bin/bash
 2 | 
 3 | PACKAGE_VERSION=`node -p -e "require('./package.json').version"`
 4 | 
 5 | CHANGES=`git diff | wc -l`
 6 | 
 7 | if [ $CHANGES -ne 0 ]; then
 8 |   echo "Working directory not clean, please commit all pending files"
 9 |   exit 1
10 | fi
11 | 
12 | if [[ -z $1 ]]; then
13 |   echo "Enter new version (currently $PACKAGE_VERSION): "
14 |   read VERSION
15 | else
16 |   VERSION=$1
17 | fi
18 | 
19 | if [ $VERSION = $PACKAGE_VERSION ]; then 
20 |   echo "No version change, exiting"
21 |   exit 1
22 | fi
23 | 
24 | read -p "Releasing $VERSION - are you sure? (y/n) " -n 1 -r
25 | 
26 | echo
27 | 
28 | if [[ $REPLY =~ ^[Yy]$ ]]; then
29 |   echo
30 |   echo "* * * * * * * Releasing $VERSION * * * * * * *"
31 |   echo
32 | 
33 |   # update package.json version to be used in the build
34 |   npm version $VERSION --no-git-tag-version
35 | 
36 |   # build
37 |   npm run build
38 | 
39 |   # generate the git tag
40 |   git tag v$VERSION
41 | 
42 |   # commit
43 |   git add -A
44 |   git commit -m "[build] $VERSION"
45 | 
46 |   # publish
47 |   git push origin refs/tags/v$VERSION
48 |   git push
49 |   npm publish
50 | fi
51 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 Javis V. Pérez
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const package = require('./package.json');
 3 | const banner  =
 4 |     " VueVisible plugin v" + package.version + "\n" +
 5 |     "\n" +
 6 |     " v-visible directive for vue.\n" +
 7 |     "\n" +
 8 |     " @author "+ package.author.name +" <"+ package.author.email +">\n" +
 9 |     " "+ package.homepage +"\n" +
10 |     " Released under the MIT License.";
11 | 
12 | module.exports = {
13 |     entry: './src/v-visible.js',
14 | 
15 |     output: {
16 |         path: __dirname + '/dist/',
17 |         filename: 'v-visible.js',
18 |         library: 'VueVisible',
19 |         libraryTarget: 'umd',
20 |         umdNamedDefine: true
21 |     },
22 | 
23 |     resolve: {
24 |         extensions: ['.js']
25 |     },
26 | 
27 |     module: {
28 |         loaders: [
29 |             {
30 |                 test: /\.js$/,
31 |                 loader: 'babel-loader',
32 |                 include: __dirname,
33 |                 exclude: /node_modules/
34 |             }
35 |         ]
36 |     },
37 | 
38 |     plugins: [
39 |         new webpack.BannerPlugin(banner),
40 |          new webpack.optimize.UglifyJsPlugin({
41 |             minimize: false,
42 |             sourceMap: false,
43 |             mangle: false,
44 |             compress: {
45 |                 warnings: false
46 |             },
47 |             output: {
48 |                 comments: true
49 |             }
50 |         })
51 |     ]
52 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-visible",
 3 |   "version": "1.0.2",
 4 |   "description": "v-visible directive for Vuejs",
 5 |   "main": "dist/v-visible.js",
 6 |   "scripts": {
 7 |     "test": "karma start karma.conf.js",
 8 |     "build": "npm run test && rm -rf ./dist && webpack --config ./webpack.config.js && webpack --config webpack.config.min.js",
 9 |     "release": "sh ./release.sh"
10 |   },
11 |   "repository": {
12 |     "type": "git",
13 |     "url": "git+https://github.com/javisperez/vue-visible.git"
14 |   },
15 |   "keywords": [
16 |     "vue",
17 |     "vuejs",
18 |     "vue-visible",
19 |     "vuevisible",
20 |     "v-visible",
21 |     "directive",
22 |     "v-show",
23 |     "visibility",
24 |     "visible",
25 |     "hidden"
26 |   ],
27 |   "author": {
28 |     "name": "Javis Perez",
29 |     "email": "javisperez@gmail.com"
30 |   },
31 |   "homepage": "https://github.com/javisperez/vue-visible",
32 |   "readme": "README.md",
33 |   "license": "MIT",
34 |   "devDependencies": {
35 |     "babel-cli": "^6.23.0",
36 |     "babel-core": "^6.22.1",
37 |     "babel-loader": "^6.2.10",
38 |     "babel-plugin-transform-runtime": "^6.22.0",
39 |     "babel-preset-es2015": "^6.22.0",
40 |     "babel-preset-stage-2": "^6.22.0",
41 |     "jasmine": "^2.5.3",
42 |     "jasmine-core": "^2.5.2",
43 |     "karma": "^1.5.0",
44 |     "karma-chrome-launcher": "^2.0.0",
45 |     "karma-jasmine": "^1.1.0",
46 |     "karma-phantomjs-launcher": "^1.0.2",
47 |     "karma-sourcemap-loader": "^0.3.0",
48 |     "karma-webpack": "^2.0.2",
49 |     "vue": "^2.2.2",
50 |     "webpack": "^2.2.1"
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 3 | <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 4 | <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
 5 | <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
 6 |     <head>
 7 |         <meta charset="utf-8">
 8 |         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 9 |         <title>Vue visible - v-visible directive for Vue</title>
10 |         <meta name="viewport" content="width=device-width, initial-scale=1">
11 |         <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
12 |         <style>
13 |             .card {
14 |                 padding: 20px;
15 |                 background: #FFF;
16 |                 box-shadow: 1px 1px 10px #ddd;
17 |                 display: inline-block;
18 |                 margin: 20px;
19 |                 font-size: 18px;
20 |                 text-align: center;
21 |             }
22 | 
23 |             .card .content {
24 |                 padding: 10px;
25 |                 border-radius: 4px;
26 |                 background: #EDEDED;
27 |                 margin-bottom: 10px;
28 |             }
29 |         </style>
30 |     </head>
31 |     <body>
32 |         <!--[if lt IE 7]>
33 |             <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
34 |         <![endif]-->
35 |         <h1>Vue-visible example</h1>
36 |         <h3>v-visible directive for Vue</h3>
37 | 
38 |         <div id="app"></div>
39 | 
40 |         <script src="http://unpkg.com/vue"></script>
41 |         <script src="../dist/v-visible.js"></script>
42 |         <script src="app.js"></script>
43 |     </body>
44 | </html>


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration
 2 | var webpack = require('webpack');
 3 | 
 4 | module.exports = function(config) {
 5 |   config.set({
 6 | 
 7 |     // base path that will be used to resolve all patterns (eg. files, exclude)
 8 |     basePath: '',
 9 | 
10 |     // frameworks to use
11 |     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
12 |     frameworks: ['jasmine'],
13 | 
14 |     // list of files / patterns to load in the browser
15 |     files: [
16 |       'test/unit.spec.js'
17 |     ],
18 | 
19 |     // list of files to exclude
20 |     exclude: [
21 |     ],
22 | 
23 |     // preprocess matching files before serving them to the browser
24 |     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
25 |     preprocessors: {
26 |       'test/*.spec.js': ['webpack', 'sourcemap']
27 |     },
28 | 
29 |     webpack: {
30 |       module: {
31 |         loaders: [
32 |           {
33 |             test: /\.js$/,
34 |             loader: 'babel-loader',
35 |             exclude: /node_modules/
36 |           }
37 |         ]
38 |       },
39 |       devtool: 'inline-source-map'
40 |     },
41 | 
42 |     webpackMiddleware: {
43 |       noInfo: true
44 |     },
45 | 
46 |     // test results reporter to use
47 |     // possible values: 'dots', 'progress'
48 |     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
49 |     reporters: ['progress'],
50 | 
51 |     // web server port
52 |     port: 9876,
53 | 
54 |     // enable / disable colors in the output (reporters and logs)
55 |     colors: true,
56 | 
57 |     // level of logging
58 |     // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
59 |     logLevel: config.LOG_INFO,
60 | 
61 |     // enable / disable watching file and executing tests whenever any file changes
62 |     autoWatch: false,
63 | 
64 |     // start these browsers
65 |     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
66 |     browsers: ['PhantomJS'],
67 | 
68 |     // Continuous Integration mode
69 |     // if true, Karma captures browsers, runs the tests and exits
70 |     singleRun: true,
71 | 
72 |     client: {
73 |         captureConsole: true
74 |     }    
75 |   })
76 | }
77 | 


--------------------------------------------------------------------------------
/dist/v-visible.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  *  VueVisible plugin v1.0.2
 3 |  * 
 4 |  *  v-visible directive for vue.
 5 |  * 
 6 |  *  @author Javis Perez <javisperez@gmail.com>
 7 |  *  https://github.com/javisperez/vue-visible
 8 |  *  Released under the MIT License.
 9 |  */
10 | !function(root,factory){"object"==typeof exports&&"object"==typeof module?module.exports=factory():"function"==typeof define&&define.amd?define("VueVisible",[],factory):"object"==typeof exports?exports.VueVisible=factory():root.VueVisible=factory()}(this,function(){/******/
11 | return function(modules){/******/
12 | /******/
13 | // The require function
14 | /******/
15 | function __webpack_require__(moduleId){/******/
16 | /******/
17 | // Check if module is in cache
18 | /******/
19 | if(installedModules[moduleId])/******/
20 | return installedModules[moduleId].exports;/******/
21 | // Create a new module (and put it into the cache)
22 | /******/
23 | var module=installedModules[moduleId]={/******/
24 | i:moduleId,/******/
25 | l:!1,/******/
26 | exports:{}};/******/
27 | /******/
28 | // Return the exports of the module
29 | /******/
30 | /******/
31 | /******/
32 | // Execute the module function
33 | /******/
34 | /******/
35 | /******/
36 | // Flag the module as loaded
37 | /******/
38 | return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}// webpackBootstrap
39 | /******/
40 | // The module cache
41 | /******/
42 | var installedModules={};/******/
43 | /******/
44 | // Load entry module and return exports
45 | /******/
46 | /******/
47 | /******/
48 | /******/
49 | // expose the modules object (__webpack_modules__)
50 | /******/
51 | /******/
52 | /******/
53 | // expose the module cache
54 | /******/
55 | /******/
56 | /******/
57 | // identity function for calling harmony imports with the correct context
58 | /******/
59 | /******/
60 | /******/
61 | // define getter function for harmony exports
62 | /******/
63 | /******/
64 | /******/
65 | // getDefaultExport function for compatibility with non-harmony modules
66 | /******/
67 | /******/
68 | /******/
69 | // Object.prototype.hasOwnProperty.call
70 | /******/
71 | /******/
72 | /******/
73 | // __webpack_public_path__
74 | /******/
75 | return __webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.i=function(value){return value},__webpack_require__.d=function(exports,name,getter){/******/
76 | __webpack_require__.o(exports,name)||/******/
77 | Object.defineProperty(exports,name,{/******/
78 | configurable:!1,/******/
79 | enumerable:!0,/******/
80 | get:getter})},__webpack_require__.n=function(module){/******/
81 | var getter=module&&module.__esModule?/******/
82 | function(){return module.default}:/******/
83 | function(){return module};/******/
84 | /******/
85 | return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="",__webpack_require__(__webpack_require__.s=0)}([/* 0 */
86 | /***/
87 | function(module,exports,__webpack_require__){"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var vVisible={install:function(Vue){Vue.directive("visible",function(el,binding){var value=binding.value;el.style.visibility=value?"visible":"hidden"})}};"undefined"!=typeof window&&window.Vue&&window.Vue.use(vVisible),exports.default=vVisible}])});


--------------------------------------------------------------------------------