{"_id":"@anedomansky/vue-loaders","name":"@anedomansky/vue-loaders","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@anedomansky/vue-loaders","version":"1.0.0","description":"A collection of pure CSS loaders made available as Vue components.","main":"./dist/library.umd.js","module":"./dist/library.es.js","exports":{".":{"import":"./dist/library.es.js","require":"./dist/library.umd.js"}},"unpkg":"./dist/library.umd.js","jsdelivr":"./dist/library.umd.js","types":"./dist/src/index.d.ts","scripts":{"build":"vite build && npm run build:types","build:watch":"vite build --watch","build:types":"vue-tsc --declaration --emitDeclarationOnly","publish:library":"npm publish --access public","lint":"eslint --ext .ts,.vue","test":"vitest","test:coverage":"vitest run --coverage","prepublishOnly":"npm run lint && npm run test"},"repository":{"type":"git","url":"git+https://github.com/anedomansky/vue-loaders.git"},"keywords":["vue","loader","throbber"],"author":{"name":"Alexander Nedomansky","email":"nedomanskya@outlook.com"},"license":"MIT","bugs":{"url":"https://github.com/anedomansky/vue-loaders/issues"},"homepage":"https://github.com/anedomansky/vue-loaders#readme","peerDependencies":{"vue":"^3.2.37"},"devDependencies":{"@types/node":"^18.6.4","@typescript-eslint/parser":"^5.37.0","@vitejs/plugin-vue":"^3.0.1","@vitest/coverage-c8":"^0.23.4","@vue/compiler-sfc":"^3.2.37","eslint":"^8.21.0","eslint-config-prettier":"^8.5.0","eslint-plugin-vue":"^9.3.0","typescript":"^4.7.4","vite":"^3.0.4","vitest":"^0.23.4","vue-eslint-parser":"^9.1.0","vue-tsc":"^0.39.5"},"gitHead":"1031923f9875f4872582487eab53770fb71aadb8","_id":"@anedomansky/vue-loaders@1.0.0","_nodeVersion":"16.15.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-vKMMvuvAtluf9vDQVv5TKUGMbHLRi+Etlgap18ckNYFWQewI9D/89Jxtf5Fc3Eh9RlH2Ht91u6IMKMynAycbyw==","shasum":"4df3cd0e62cdc0685c54506ab062d97ed6363262","tarball":"https://registry.npmjs.org/@anedomansky/vue-loaders/-/vue-loaders-1.0.0.tgz","fileCount":28,"unpackedSize":127177,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRV8bp7rbVyYcZpWSumNbh9Xh4jk5OhmluVVC8UsZxPAIhAKCs6nIEu8slKuy6dyhxaFPbvIuWw98FBOqiaBt4YWLV"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjOp7dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrI5Q//ZmPdgIcGJtECbKeYs8IKgdWIWnXRmq80QDNfoGyxKY0AmAwf\r\n4MHrfDLFbzYpjA0iHGoQkL5OYaN5E4kpyojCaX79Eb5VTHq96pNjokmVR0Nk\r\nKbUY003TmD6YDlWtaN3ny2dFRtCJ5HrXXGPvSxoNj2pYUis6zHFB93csxG4r\r\n/X6Nnr9lQiIpYec4E2EAwTnK+a6iTrnLVqyDMZuqD4xT1SfYyC+9+lu8SZ2l\r\nLmiBeRrpAwquOVKhlWGtlEna2K2KVMk+Qf7Rvc7PP2HmvxrazPURccvITVDZ\r\nhNsiUPp6d8zQ7wyNAGPXv9+P/YyWcLql1nZf7LhxhrvLBbU6ypjIjSqotR3e\r\nWNIDze2XDmpWFiOPjaeifiOxf35VZDOxzZFRcsuLRqOmzR2NAG9U+6kYeFw8\r\nmKP5efXT2HLWZnWPDFkGVhdbWI+UbT2d5+XVCuIU1CpGnhtHpx8zexMVBMTy\r\nDieR8IMjW9EdwVkwXx1gBLi/iEA7WlbUgEjMlAeryVWDZbjFFefZg+E6H3Zb\r\nOmr3LF7T4g2vTWraCZ5UO+T/6u7Lf7bri+JHMgHaVxWvUPr58nOyGZ94JtVz\r\nYCdgA8eS1oknmvCZkE7/XCpnOZSACjixSgQ9VfIZf/S7A5McllZhPGiux6WG\r\nt9Oz/Ho1+G6WlfUoxnPk/HfZx8G8zGSrJ9U=\r\n=KH5L\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anedomansky","email":"nedomanskya@outlook.com"},"directories":{},"maintainers":[{"name":"anedomansky","email":"nedomanskya@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-loaders_1.0.0_1664786141157_0.09651479779626371"},"_hasShrinkwrap":false}},"time":{"created":"2022-10-03T08:35:41.074Z","1.0.0":"2022-10-03T08:35:41.377Z","modified":"2022-10-03T08:35:41.548Z"},"maintainers":[{"name":"anedomansky","email":"nedomanskya@outlook.com"}],"description":"A collection of pure CSS loaders made available as Vue components.","homepage":"https://github.com/anedomansky/vue-loaders#readme","keywords":["vue","loader","throbber"],"repository":{"type":"git","url":"git+https://github.com/anedomansky/vue-loaders.git"},"author":{"name":"Alexander Nedomansky","email":"nedomanskya@outlook.com"},"bugs":{"url":"https://github.com/anedomansky/vue-loaders/issues"},"license":"MIT","readme":"# vue-loaders\r\n\r\n[![npm version](https://badge.fury.io/js/@anedomansky%2Fvue-loaders.svg)](https://badge.fury.io/js/@anedomansky%2Fvue-loaders)\r\n\r\nA collection of pure CSS loaders made available as Vue components.\r\n\r\n## Features\r\n\r\nDifferent CSS-loaders/-throbbers:\r\n\r\n- `CirclingSquares.vue`:\r\n\r\n![CirclingSquares](./assets/CirclingSquares.gif \"CirclingSquares\")\r\n\r\n- `FlippingHexagons.vue`:\r\n\r\n![FlippingHexagons](./assets/FlippingHexagons.gif \"FlippingHexagons\")\r\n\r\n- `JumpingDots.vue`:\r\n\r\n![JumpingDots](./assets/JumpingDots.gif \"JumpingDots\")\r\n\r\n- `PulsatingDot.vue`:\r\n\r\n![PulsatingDot](./assets/PulsatingDot.gif \"PulsatingDot\")\r\n\r\n- `SpinningCircle.vue`:\r\n\r\n![SpinningCircle](./assets/SpinningCircle.gif \"SpinningCircle\")\r\n\r\n- `TravellingBar.vue`:\r\n\r\n![TravellingBar](./assets/TravellingBar.gif \"TravellingBar\")\r\n\r\n- `WanderingSquares.vue`:\r\n\r\n![WanderingSquares](./assets/WanderingSquares.gif \"WanderingSquares\")\r\n\r\n## Installation\r\n\r\n`npm install @anedomansky/vue-loaders`\r\n\r\n## Setup\r\n\r\n```js\r\n<script setup>\r\n  import '/node_modules/@anedomansky/vue-loaders/dist/style.css';\r\n  import { SpinningCircle } from '@anedomansky/vue-loaders';\r\n</script>\r\n```\r\n\r\n## Usage\r\n\r\n```jsx\r\n<template>\r\n  <SpinningCircle\r\n    ref=\"loader\"\r\n    text=\"Please wait\"\r\n    container-classes=\"test-spinning-circle\"\r\n    item-classes=\"item-test-spinning-circle\"\r\n  ></SpinningCircle>\r\n  <button type=\"button\" @click=\"open\">Open loader</button>\r\n</template>\r\n```\r\n\r\n```js\r\n<script setup>\r\n  import '/node_modules/@anedomansky/vue-loaders/dist/style.css';\r\n  import { SpinningCircle } from '@anedomansky/vue-loaders';\r\n  import { ref } from 'vue';\r\n\r\n  const loader = ref(null);\r\n\r\n  let timer;\r\n\r\n  function open() {\r\n    loader.value.showLoader();\r\n    timer = setTimeout(close, 60000);\r\n  }\r\n\r\n  function close() {\r\n    loader.value.hideLoader();\r\n    clearTimeout(timer);\r\n  }\r\n</script>\r\n```\r\n\r\n## Props\r\n\r\n| Name | Type | Default | Description |\r\n|-----------|---------|---------|---------|\r\n| dialogClasses | string  | ''  | Additional CSS classes for the `<dialog>`-Element\r\n| textClasses   | string  | ''  | Additional CSS classes for the `<p>`-Element\r\n| containerClasses  | string  | ''  | Additional CSS classes for the `<div>`-Element\r\n| itemClasses | string  | ''  | Additional CSS classes for the `<div>`-Element\r\n| text  | string  | ''  | Loader text (e. g. 'Please wait')\r\n| backgroundColor | string  | undefined | Color of the `<dialog>:backdrop`\r\n| color | string  | '#485665' | Color of the loader\r\n| animationDuration | string  | Loader dependent  | The duration of the loader's animation\r\n\r\n## Customization\r\n\r\nYou can always overwrite CSS classes that the different loader's are composed of.\r\n\r\nAdditionally, you can overwrite specific CSS custom properties that the loaders are using:\r\n\r\n- `CirclingSquares.vue`:\r\n  - `--square`: The size of the square\r\n- `FlippingHexagons.vue`:\r\n  - `--hexagon`: The base size of the hexagon\r\n- `JumpingDots.vue`:\r\n  - `--dot`: The size of the dot\r\n- `PulsatingDot.vue`:\r\n  - `--pulsating-dot`: The size of the dot\r\n- `SpinningCircle.vue`:\r\n  - `--spinner`: The size of the circle\r\n  - `--border-inner-spinner`: The size of the inner border\r\n  - `--border-outer-spinner`: The size of the outer border\r\n- `TravellingBar.vue`:\r\n  - `--bar-height`: The height of the bar\r\n  - `--bar-width`: The width of the bar\r\n- `WanderingSquares.vue`:\r\n  - `--square`: The size of the square\r\n","readmeFilename":"README.md"}