{"_id":"vue3-loading-overlay","_rev":"2-be0fb76c9f7a2c1029a53c4aeb42a3cb","name":"vue3-loading-overlay","dist-tags":{"latest":"0.0.0"},"versions":{"0.0.1":{"name":"vue3-loading-overlay","version":"0.0.1","description":"Vue.js component for full screen loading indicator, compatible for vue3.","main":"dist/index.js","style":"dist/vue3-loading-overlay.css","repository":{"type":"git","url":"git+https://github.com/moyoujun/vue3-loading-overlay.git"},"keywords":["vue","loading","loader","overlay","spinner","svg"],"author":{"name":"youjun.mo"},"license":"MIT","bugs":{"url":"http://github.com/moyoujun/vue3-loading-overlay/issues"},"homepage":"https://github.com/moyoujun/vue3-loading-overlay","scripts":{"build":"rollup -c","dev":"rollup -cw"},"engines":{"node":">=6.9.0","npm":">=3.10.0"},"devDependencies":{"eslint":"^7.0.0","prettier":"^2.0.5","rollup":"^2.10.2","rollup-plugin-css-only":"^2.0.0","rollup-plugin-typescript2":"^0.27.1","rollup-plugin-vue":"^6.0.0","typescript":"^3.9.2","vitepress":"^0.8.1","vue":"^3.0.2"},"peerDependencies":{"vue":"^3.0.0-beta.13"},"gitHead":"f10173916b6ae87cf31590350e217a0e2462ac6f","_id":"vue3-loading-overlay@0.0.1","_nodeVersion":"12.13.1","_npmVersion":"6.12.1","dist":{"integrity":"sha512-lc8DOTCos024hdrVpVCkPOVXLviiSbLPLaZhaquuEiExpPeYyVGO6S5XY8OVFedRE/lvUUzJ61MLfVavLOqH5A==","shasum":"1ef4f0b8193d4b6f81dd67dd457eaa1526c48dbe","tarball":"https://registry.npmjs.org/vue3-loading-overlay/-/vue3-loading-overlay-0.0.1.tgz","fileCount":19,"unpackedSize":53483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf1haoCRA9TVsSAnZWagAA9acP/RGYwnsV5OnCvikbdngK\nDbK45HglJcnGdxcE7fbjnLsPYLP4zB73nhdlLgoxw2RmulpYP5datl5kKkjc\njHVkmHjMkbgza881KYMXNxdo5vhIMozDg60stS5Wy4usapC6V5bjYJjBJFEX\n5R48cBMFmNy3wdP2QgW0GmVkAY65Ggei5jEfnrIK7jH+S9uej5Zl7r1nKUD9\nX1Rz8eXZe2/YDbYhmWPLDatwBo8OZaBaQY5wvCSDjPK5GefVBTPAUuoKBDsg\nPROpgznVJgx5Xs2O0lXr/5lrod8dfybwrBCqNF8XKyM4kA9lHJz1cla07J57\n6BWjDxUFQpkypKdUPkRWbCz0UNW0mmFARXuGWMtnL/G9PbRpHT+FeJUQ27Vx\ngRwr4RIdQqw+0LRO4O+1nkU7/IkB0+mTBwfSOIXV6zkTck/PehCo4lumM5EG\nvidLgJNzh1k4pVfM6dn0p7JsW16dWtUB2h5lbabywl6drg/rYnrsPTFD6+Z1\nPVvelu5EnTn8h/oabMjmADgpn5UtiNbFBvcVcBW7qlZm/odMJyiHuja0Ed7t\nilFw86soYkieFyZrdE+ZjuYK/LUJeQWFxrQPdXFWZnLpl75abD+1nsU8E4lp\nm0jSwIB3mSw6tZ8mHj04vtGXrE+32p4dpWrxUCWoyqzf3NZ7vTeDyLbgN4AT\nDBsK\r\n=TFzZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDLiRz9mGp2NGkxZvmNu//JZQJsAGtyXRT6wcKbI0eCFAiA/vpyeBTb75f2S4DsPMz+o8iv/biyl/FNA/rz78bGtDw=="}]},"_npmUser":{"name":"moyoujun","email":"490076772@qq.com"},"directories":{},"maintainers":[{"name":"moyoujun","email":"490076772@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue3-loading-overlay_0.0.1_1607866024452_0.2100263545763481"},"_hasShrinkwrap":false},"0.0.0":{"name":"vue3-loading-overlay","version":"0.0.0","description":"Vue.js component for full screen loading indicator, compatible for vue3.","main":"dist/index.js","style":"dist/vue3-loading-overlay.css","repository":{"type":"git","url":"git+https://github.com/moyoujun/vue3-loading-overlay.git"},"keywords":["vue","loading","loader","overlay","spinner","svg"],"author":{"name":"youjun.mo"},"license":"MIT","bugs":{"url":"http://github.com/moyoujun/vue3-loading-overlay/issues"},"homepage":"https://github.com/moyoujun/vue3-loading-overlay","scripts":{"build":"rollup -c","dev":"rollup -cw"},"engines":{"node":">=6.9.0","npm":">=3.10.0"},"devDependencies":{"eslint":"^7.0.0","prettier":"^2.0.5","rollup":"^2.10.2","rollup-plugin-css-only":"^2.0.0","rollup-plugin-typescript2":"^0.27.1","rollup-plugin-vue":"^6.0.0","typescript":"^3.9.2","vitepress":"^0.8.1","vue":"^3.0.2"},"peerDependencies":{"vue":"^3.0.0-beta.13"},"gitHead":"04daba28e3583db49d7d6e931bd34b9b6ac6842d","_id":"vue3-loading-overlay@0.0.0","_nodeVersion":"12.13.1","_npmVersion":"6.12.1","dist":{"integrity":"sha512-Ly/sOMF+YTPDlVSsL4D8dTasT9A/PW+JlhFaY+sabOJXpafedxD1ADZbpT89XaM2QavRzfmq4s0nhcbr5I7BRQ==","shasum":"b5c726b51114019c1771479f7558af1fb1e73f6e","tarball":"https://registry.npmjs.org/vue3-loading-overlay/-/vue3-loading-overlay-0.0.0.tgz","fileCount":10,"unpackedSize":28795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf11E3CRA9TVsSAnZWagAA0eoP/1F4cL7p9yzVSCM+Y+OX\n5VUufFzLNWkRezdRVuX0o1hvy6en20R1lAuGSrPciFT52g7BT+lOtkCrFw45\nWA2aWjlK8nW/hrtBtUZvszoEALJ3Sh0vzFtq8+TYnYQ+VjPI2RLvBG68mQmZ\n2QrDOXUgWcp5XxGAwJWIZf3ZI2DDNOQOaliLY/BYu2UWUKw66vxrXpx8qyCo\ngpqdHWxM/X5S04/+XWOk4RD+/TVzE7tegBx5p0A2uACVVP/cfryw09Xb/MkR\nUixuaYYxQexPe3UqAP4f1D27L31ExPe/TXVwkzXBWyNrV4COIoY1pIVE4zNB\nB+dBEDDFSvg6/ysaOLyIdI/p17BvNGXwDo+gF2w9dn/cvE1FwoJBWlUUyHEW\nNxDCQ9nqk9aZKLOo0LUNUae4+Y/wBchfjU6Cq2GUVCYP447MwX0d58IY0B3Y\nGis8axD/ZlFI0iaDUB8r/BTok9vAhJvkjTmTl5Awn5YcMzjVIDfE018lB1WK\nwVYokMDkFeBBDq4TxZ0dE4XZBD3LI8DiZWhmy5H6QiYmlZTU8IVQy1FxYweM\nMNFC9l05kgL5bI+2V797Ho99H7x3g3R2wkEWqpPBUVeTi5IcH0pktJqMENLZ\ntUrEara8uJjlLiSsVxuJlzXs0aCHkaT851MFXnMKWYNY+vTcoapRpoAFHaix\ntYty\r\n=fc/2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsvPhMUI1b0feAmJpSEAJ+jc9wl/978uO75fXZoHng+gIhAM/7mihJsZ61cuCPi1pZ+gpug4q8chcG3D3lZEt/tVN7"}]},"_npmUser":{"name":"moyoujun","email":"490076772@qq.com"},"directories":{},"maintainers":[{"name":"moyoujun","email":"490076772@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue3-loading-overlay_0.0.0_1607946550828_0.7652434773246617"},"_hasShrinkwrap":false}},"time":{"created":"2020-12-13T13:27:04.452Z","0.0.1":"2020-12-13T13:27:04.659Z","modified":"2022-05-23T21:17:44.891Z","0.0.0":"2020-12-14T11:49:11.022Z"},"maintainers":[{"name":"moyoujun","email":"490076772@qq.com"}],"description":"Vue.js component for full screen loading indicator, compatible for vue3.","homepage":"https://github.com/moyoujun/vue3-loading-overlay","keywords":["vue","loading","loader","overlay","spinner","svg"],"repository":{"type":"git","url":"git+https://github.com/moyoujun/vue3-loading-overlay.git"},"author":{"name":"youjun.mo"},"bugs":{"url":"http://github.com/moyoujun/vue3-loading-overlay/issues"},"license":"MIT","readme":"# Vue Loading Overlay Component\r\n\r\n[![downloads](https://badgen.net/npm/dt/vue-loading-overlay)](http://npm-stats.com/~packages/vue3-loading-overlay)\r\n[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/vue3-loading-overlay/badge?style=rounded)](https://www.jsdelivr.com/package/npm/vue3-loading-overlay)\r\n[![npm-version](https://badgen.net/npm/v/vue3-loading-overlay)](https://www.npmjs.com/package/vue3-loading-overlay)\r\n[![github-tag](https://badgen.net/github/tag/ankurk91/vue-loading-overlay)](https://github.com/moyoujun/vue3-loading-overlay/)\r\n![ts](https://badgen.net/badge/ready/TypeScript/blue)\r\n\r\nVue.js component for full screen loading indicator\r\n\r\n## [Demo](https://moyoujun.github.io/vue3-loading-overlay/)\r\n\r\n## Installation\r\n```bash\r\n# yarn\r\nyarn add vue3-loading-overlay  // not valiable now.\r\n\r\n# npm\r\nnpm install vue3-loading-overlay\r\n\r\n```\r\n\r\n## Usage\r\n#### As component\r\n```html\r\n<template>\r\n    <div class=\"vld-parent\">\r\n        <loading :active=\"isLoading\" \r\n        :can-cancel=\"true\" \r\n        :on-cancel=\"onCancel\"\r\n        :is-full-page=\"fullPage\"></loading>\r\n        \r\n        <label><input type=\"checkbox\" v-model=\"fullPage\">Full page?</label>\r\n        <button @click.prevent=\"doAjax\">fetch Data</button>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\n    // Import component\r\n    import Loading from 'vue-loading-overlay';\r\n    // Import stylesheet\r\n    import 'vue-loading-overlay/dist/vue-loading.css';\r\n    \r\n    export default {\r\n        setup() {\r\n          const isLoading = ref(false);\r\n          const fullPage = ref(true);\r\n          const doAjax=() => {\r\n                isLoading.value = true;\r\n                // simulate AJAX\r\n                setTimeout(() => {\r\n                  isLoading = false\r\n                },5000)\r\n            },\r\n          const onCancel= ()=> {\r\n              console.log('User cancelled the loader.');\r\n              //because the props is single flow direction, you need to set isLoading status normally.\r\n              isLoading.value = false;\r\n          }\r\n          return \r\n          {\r\n            isLoading,\r\n            fullPage,\r\n            doAjax,\r\n            onCancel\r\n          }\r\n        },\r\n        components: {\r\n            Loading\r\n        }\r\n    }\r\n</script>\r\n```\r\n\r\n### As plugin\r\n```html\r\n<template>\r\n    <form @submit.prevent=\"submit\" class=\"vld-parent\" ref=\"formContainer\">\r\n        <!-- your form inputs goes here-->\r\n        <label><input type=\"checkbox\" v-model=\"fullPage\">Full page?</label>\r\n        <button type=\"submit\">Login</button>\r\n    </form>\r\n</template>\r\n\r\n<script>\r\n    import { ref } from 'vue';\r\n    // Import the method.\r\n    import { useLoading } from 'vue3-loading-overlay';\r\n    // Import stylesheet\r\n    import 'vue3-loading-overlay/dist/vue3-loading-overlay.css';\r\n    // Init plugin\r\n\r\n    export default {\r\n      setup() {\r\n        const fullPage = ref(true);\r\n        let formContainer = ref(null);\r\n\r\n        const submit = () => {\r\n          let loader = useLoading();\r\n          loader.show({\r\n            // Optional parameters\r\n            container: this.fullPage ? null : formContainer.value,\r\n            canCancel: true,\r\n            onCancel: onCancel,\r\n          });\r\n                // simulate AJAX\r\n          setTimeout(() => {\r\n            loader.hide()\r\n          },5000)                 \r\n        };\r\n\r\n        const onCancel =() => {\r\n          console.log('User cancelled the loader.')\r\n        };   \r\n        return {\r\n          fullPage,\r\n          formContainer,\r\n          submit\r\n        }\r\n      },\r\n    }\r\n</script>\r\n```\r\n\r\n## Available props\r\nThe component accepts these props:\r\n\r\n| Attribute        | Type                | Default              | Description      |\r\n| :---             | :---:               | :---:                | :---             |\r\n| active           | Boolean             | `false`              | Show loading by default when `true` |\r\n| can-cancel       | Boolean             | `false`              | Allow user to cancel by pressing ESC or clicking outside |\r\n| on-cancel        | Function            | `()=>{}`             | Do something upon cancel, works in conjunction with `can-cancel`  |\r\n| is-full-page     | Boolean             | `true`               | When `false`; limit loader to its container^ |\r\n| transition       | String              | `fade`               | [Transition](https://vuejs.org/v2/guide/transitions.html) name |\r\n| color            | String              | `#000`               | Customize the color of loading icon |\r\n| height           | Number              | *                    | Customize the height of loading icon |\r\n| width            | Number              | *                    | Customize the width of loading icon |\r\n| loader           | String              | `spinner`            | Name of icon shape you want use as loader, `spinner` or `dots` or `bars` |\r\n| background-color | String              | `#fff`               | Customize the overlay background color |\r\n| opacity          | Number              | `0.5`                | Customize the overlay background opacity |\r\n| z-index          | Number              | `9999`               | Customize the overlay z-index |\r\n| enforce-focus    | Boolean             | `true`               | Force focus on loader |\r\n| lock-scroll      | Boolean             | `false`              | Freeze the scrolling during full screen loader |\r\n| blur             | String              | `2px`                | Value for the CSS blur backdrop-filter. Set to null or an empty string to disable blurring |\r\n\r\n* ^When `is-full-page` is set to `false`, the container element should be positioned as `position: relative`. \r\nYou can use CSS helper class `vld-parent`.\r\n* *The default `height` and `width` values may be varied based on the `loader` prop value\r\n\r\n## Available slots\r\nThe component accepts these slots:\r\n\r\n* `default` : Replace the animated icon with yours\r\n* `before` : Place anything before the animated icon, you may need to style this.\r\n* `after` : Place anything after the animated icon, you may need to style this.\r\n\r\n## API methods\r\n### `Vue.$loading.show(?propsData,?slots)`\r\n```js\r\nlet loader = useLoading();\r\nloader.show({\r\n  // Pass props by their camelCased names\r\n  container: this.$refs.loadingContainer,\r\n  canCancel: true, // default false\r\n  onCancel: this.yourCallbackMethod,\r\n  color: '#000000',\r\n  loader: 'spinner',\r\n  width: 64,\r\n  height: 64,\r\n  backgroundColor: '#ffffff',\r\n  opacity: 0.5,\r\n  zIndex: 999,\r\n},{\r\n  // Pass slots by their names, not work now.\r\n  default: this.$createElement('your-custom-loader-component-name'),\r\n});\r\n// hide loader whenever you want\r\nloader.hide();\r\n```\r\n\r\n## Global configs\r\n## todo\r\n\r\nYou can set props and slots for all future instances when using as plugin\r\n```js\r\nVue.use(Loading, {\r\n  // props\r\n  color: 'red'\r\n},{\r\n  // slots\r\n})\r\n```\r\nFurther you can override any prop or slot when creating new instances\r\n```js\r\nlet loader = Vue.$loading.show({\r\n color: 'blue'\r\n},{\r\n  // slots\r\n});\r\n```\r\n\r\n### Browser support\r\n* Modern browsers only\r\n\r\n## Run examples on your localhost\r\n* Clone this repo\r\n* Make sure you have node-js `>=12.14` and [yarn](https://yarnpkg.com) `>=1.x` pre-installed\r\n* Install dependencies - `yarn install`\r\n* Run webpack dev server - `yarn start`\r\n* This should open the demo page at `http://localhost:9000` in your default web browser \r\n\r\n## Testing\r\n* Todo.\r\n\r\n## License\r\n[MIT](LICENSE.txt) License\r\n","readmeFilename":"README.md"}