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