Repository: ndelvalle/v-blur Branch: master Commit: 835ce3d2fcbe Files: 13 Total size: 13.5 KB Directory structure: gitextract_yyesnnt8/ ├── .babelrc ├── .eslintrc ├── .github/ │ └── dependabot.yml ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── lib/ │ ├── index.js │ └── v-blur.js ├── package.json ├── rollup.config.js └── test/ ├── index.test.js └── v-blur.test.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .babelrc ================================================ { "presets": ["@babel/preset-env"] } ================================================ FILE: .eslintrc ================================================ { "extends": "standard" } ================================================ FILE: .github/dependabot.yml ================================================ version: 2 updates: - package-ecosystem: npm directory: "/" schedule: interval: daily time: "10:00" open-pull-requests-limit: 10 ================================================ FILE: .gitignore ================================================ node_modules coverage dist *.log .DS_Store ================================================ FILE: .npmignore ================================================ rollup.config.js coverage test yarn.lock v-blur-image.png ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2017 Nicolas Del Valle Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # v-blur [ ![Codeship Status for ndelvalle/v-blur](https://app.codeship.com/projects/3a56b780-4639-0135-c530-069e5644f905/status?branch=master)](https://app.codeship.com/projects/231348) [![Coverage Status](https://coveralls.io/repos/github/ndelvalle/v-blur/badge.svg?branch=master)](https://coveralls.io/github/ndelvalle/v-blur?branch=master) [![dependencies Status](https://david-dm.org/ndelvalle/v-blur/status.svg)](https://david-dm.org/ndelvalle/v-blur) [![devDependencies Status](https://david-dm.org/ndelvalle/v-blur/dev-status.svg)](https://david-dm.org/ndelvalle/v-blur?type=dev) [![Codacy Badge](https://api.codacy.com/project/badge/Grade/4b151e093b7e44ffbb660a84381d84ed)](https://www.codacy.com/app/ndelvalle/v-blur?utm_source=github.com&utm_medium=referral&utm_content=ndelvalle/v-blur&utm_campaign=Badge_Grade) Vue directive to blur an element dynamically. Useful to partially hide elements, use it with a spinner when content is not ready among other things. ## Install ```bash $ npm install --save v-blur ``` ```bash $ yarn add v-blur ``` ## Binding value The binding value can be a Boolean or an Object. If a Boolean is provided, the directive uses default values for [opacity](https://www.w3schools.com/cssref/css3_pr_opacity.asp), [filter](https://www.w3schools.com/jsref/prop_style_filter.asp) and [transition](https://www.w3schools.com/jsref/prop_style_transition.asp). To use a custom configuration, an object with these attributes plus `isBlurred` (To determine when to apply these styles) can be provided. ### Binding object attributes | option | default | type | | -----------|:----------------:| ------:| | isBlurred | false | boolean| | opacity  | 0.5         | number | | filter | 'blur(1.5px)' | string | | transition | 'all .2s linear' | string | ## Use ```js import Vue from 'vue' import vBlur from 'v-blur' Vue.use(vBlur) // Alternatively an options object can be used to set defaults. All of these // options are not required, example: // Vue.use(vBlur, { // opacity: 0.2, // filter: 'blur(1.2px)', // transition: 'all .3s linear' // }) ``` ```js ``` ## Example [![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/823o069zoj?module=%2Fsrc%2Fcomponents%2FHelloWorld.vue) ![v-blur](https://raw.githubusercontent.com/ndelvalle/v-blur/master/v-blur-image.png) ## License [MIT License](https://github.com/ndelvalle/v-blur/blob/master/LICENSE) ## Style guide [![Standard - JavaScript Style Guide](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard) ================================================ FILE: lib/index.js ================================================ import createDirective from './v-blur' const plugin = { install (Vue, options) { Vue.directive('blur', createDirective(options)) } } export default plugin ================================================ FILE: lib/v-blur.js ================================================ function createDirective (opts = {}) { const options = Object.assign({ opacity: 0.5, filter: 'blur(1.5px)', transition: 'all .2s linear' }, opts) // Note: We attach the options to the exposed object to allow changing the // options dynamically after directive instantiation. const directive = { options } directive.blur = function (el, bindingValue) { if (typeof bindingValue !== 'boolean' && typeof bindingValue !== 'object') { throw new Error( 'Expected directive binding value type to be a boolean or an object but found ' + `${typeof bindingValue} instead` ) } if (typeof bindingValue === 'boolean') { bindingValue = { isBlurred: bindingValue } } const opacity = bindingValue.opacity || options.opacity const filter = bindingValue.filter || options.filter const transition = bindingValue.transition || options.transition el.style.opacity = bindingValue.isBlurred ? opacity : 1 el.style.filter = bindingValue.isBlurred ? filter : 'none' el.style.transition = transition el.style.pointerEvents = bindingValue.isBlurred ? 'none' : 'auto'; el.style.userSelect = bindingValue.isBlurred ? 'none' : 'auto' ; } directive.bind = function (el, binding) { directive.blur(el, binding.value) } directive.update = function (el, binding) { directive.blur(el, binding.value) } return directive } export default createDirective ================================================ FILE: package.json ================================================ { "name": "v-blur", "version": "1.0.4", "description": "Simple Vue directive to blur a specific element", "author": "ndelvalle ", "contributors": [ "Ignacio Anaya " ], "main": "dist/v-blur.min.js", "scripts": { "test": "jest --coverage", "cover": "open coverage/lcov-report/index.html", "build": "rollup -c", "lint": "standard", "lint:fix": "standard --fix", "release": "np" }, "repository": { "type": "git", "url": "git+https://github.com/ndelvalle/v-blur.git" }, "keywords": [ "vue" ], "license": "MIT", "bugs": { "url": "https://github.com/ndelvalle/v-blur/issues" }, "homepage": "https://github.com/ndelvalle/v-blur#readme", "devDependencies": { "@babel/core": "^7.8.4", "@babel/preset-env": "^7.8.4", "babel-jest": "^26.5.0", "jest": "^26.6.3", "np": "^7.0.0", "rollup": "^1.31.0", "rollup-plugin-babel": "^4.3.3", "rollup-plugin-filesize": "^9.0.2", "rollup-plugin-node-resolve": "^5.2.0", "rollup-plugin-uglify": "^6.0.4", "standard": "^16.0.3" }, "jest": { "collectCoverage": true, "coverageThreshold": { "global": { "branches": 70, "functions": 70, "lines": 70, "statements": 70 } }, "collectCoverageFrom": [ "lib/**" ], "roots": [ "test/" ] }, "engines": { "node": ">=6" } } ================================================ FILE: rollup.config.js ================================================ import babel from 'rollup-plugin-babel' import filesize from 'rollup-plugin-filesize' import resolve from 'rollup-plugin-node-resolve' import { uglify } from 'rollup-plugin-uglify' import pkg from './package.json' const banner = `/** * Simple Vue directive to blur a specific element dynamically * * @version: ${pkg.version} * @author: ${pkg.author} */` export default { input: 'lib/index.js', output: { file: 'dist/v-blur.min.js', format: 'umd', name: 'v-blur', banner }, plugins: [ resolve({ mainFields: ['module', 'main', 'jsnext:main'], browser: true }), babel({ babelrc: true }), uglify(), filesize() ] } ================================================ FILE: test/index.test.js ================================================ /* global describe, it, expect */ import createDirective from '../lib/v-blur' describe('v-blur -> directive default options', () => { it('should use use the default configuration provided on instantiation', () => { const options = { opacity: 0.2, filter: 'blur(0.3px)' } const directive = createDirective(options) expect(typeof directive.options).toEqual('object') expect(directive.options.opacity).toEqual(options.opacity) expect(directive.options.filter).toEqual(options.filter) }) }) ================================================ FILE: test/v-blur.test.js ================================================ /* global describe, it, expect */ import createDirective from '../lib/v-blur' const directive = createDirective() describe('v-blur -> directive', () => { it('it has an bind method available', () => { expect(typeof directive.bind).toBe('function') }) it('it has an update method available', () => { expect(typeof directive.update).toBe('function') }) describe('bind', () => { it('adds a default filter, transition and an opacity style if the binding value is truthy', () => { const bind = directive.bind const div = document.createElement('div') bind(div, { value: true }) expect(div.style.opacity).toBe('0.5') expect(div.style.filter).toBe('blur(1.5px)') expect(div.style.transition).toBe('all .2s linear') }) it('removes default filter and an opacity style if the binding value is falsy', () => { const bind = directive.bind const div = document.createElement('div') bind(div, { value: false }) expect(div.style.opacity).toBe('1') expect(div.style.filter).toBe('none') expect(div.style.transition).toBe('all .2s linear') }) it('adds custom filter, transition and an opacity style if the binding value is an object and isBlurred attribute is truthy', () => { const bind = directive.bind const div = document.createElement('div') const opacity = '0.1' const filter = 'blur(2px)' const isBlurred = true bind(div, { value: { opacity, filter, isBlurred } }) expect(div.style.opacity).toBe(opacity) expect(div.style.filter).toBe(filter) expect(div.style.transition).toBe('all .2s linear') }) it('removes custom filter and opacity style if the binding value is an object and isBlurred attribute is falsy', () => { const bind = directive.bind const div = document.createElement('div') const opacity = '0.1' const filter = 'blur(2px)' const isBlurred = false bind(div, { value: { opacity, filter, isBlurred } }) expect(div.style.opacity).toBe('1') expect(div.style.filter).toBe('none') expect(div.style.transition).toBe('all .2s linear') }) it('sets pointer events and user-select styles to none if the binding value is truthy', () => { const bind = directive.bind const div = document.createElement('div') const isBlurred = true bind(div, { value: { isBlurred } }) expect(div.style.userSelect).toBe('none') expect(div.style.pointerEvents).toBe('none') }) }) describe('update', () => { it('adds a default filter, transition and an opacity style if the binding value is truthy', () => { const update = directive.update const div = document.createElement('div') update(div, { value: true }) expect(div.style.opacity).toBe('0.5') expect(div.style.filter).toBe('blur(1.5px)') expect(div.style.transition).toBe('all .2s linear') }) it('removes default filter and an opacity style if the binding value is falsy', () => { const update = directive.update const div = document.createElement('div') update(div, { value: false }) expect(div.style.opacity).toBe('1') expect(div.style.filter).toBe('none') expect(div.style.transition).toBe('all .2s linear') }) it('adds custom filter, transition and an opacity style if the binding value is an object and isBlurred attribute is truthy', () => { const update = directive.update const div = document.createElement('div') const opacity = '0.1' const filter = 'blur(2px)' const isBlurred = true update(div, { value: { opacity, filter, isBlurred } }) expect(div.style.opacity).toBe(opacity) expect(div.style.filter).toBe(filter) expect(div.style.transition).toBe('all .2s linear') }) it('removes custom filter and opacity style if the binding value is an object and isBlurred attribute is falsy', () => { const update = directive.update const div = document.createElement('div') const opacity = '0.1' const filter = 'blur(2px)' const isBlurred = false update(div, { value: { opacity, filter, isBlurred } }) expect(div.style.opacity).toBe('1') expect(div.style.filter).toBe('none') expect(div.style.transition).toBe('all .2s linear') }) it('sets pointer events and user-select styles to defaults if the binding value is falsy', () => { const update = directive.update const div = document.createElement('div') update(div, { value: false }) expect(div.style.userSelect).toBe('auto') expect(div.style.pointerEvents).toBe('auto') }) }) })