Full Code of ndelvalle/v-blur for AI

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
<script>
  export default {
      data () {
        return {
          // Example 1:
          // Activate and deactivate blur directive using defaults values
          // provided in the Vue.use instantiation or by the library.
          isBlurred: true,

          // Example 2:
          // Activate and deactivate blur directive providing a local
          // configuration object.
          blurConfig: {
            isBlurred: false,
            opacity: 0.3,
            filter: 'blur(1.2px)',
            transition: 'all .3s linear'
          }
        }
      }
    }
  };
</script>

<template>
  <!-- Example 1 using just a boolean (Uses default values) -->
  <div v-blur="isBlurred"></div>

  <!-- Example 2 using an object (Uses config values) -->
  <div v-blur="blurConfig"></div>
</template>
```

## 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 <nicolas.delvalle@gmail.com>",
  "contributors": [
    "Ignacio Anaya <ignacio.anaya89@gmail.com>"
  ],
  "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')
    })
  })
})