{"_id":"@akamajoris/vue-typed","_rev":"2-64543e0bc7a8af287357241082e4a1c9","name":"@akamajoris/vue-typed","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@akamajoris/vue-typed","description":"typed.js vue integration - easily create typing animations","version":"0.2.0","author":{"name":"Orlando Wenzinger","email":"orlando.wenzinger@bluewin.ch"},"keywords":["vue","vuejs","plugin"],"repository":{"type":"git","url":"git+https://github.com/Orlandster1998/vue-typed-js.git"},"license":"MIT","main":"dist/vue-typed-js.common.js","unpkg":"dist/vue-typed-js.browser.js","module":"index.js","scripts":{"dev":"cross-env NODE_ENV=development webpack --config config/webpack.config.dev.js --progress --watch","build":"npm run build:browser && npm run build:common","build:browser":"cross-env NODE_ENV=production webpack --config config/webpack.config.browser.js --progress --hide-modules","build:common":"cross-env NODE_ENV=production webpack --config config/webpack.config.common.js --progress --hide-modules","prepublish":"npm run build"},"devDependencies":{"babel-core":"^6.0.0","babel-eslint":"^7.1.1","babel-loader":"^6.0.0","babel-preset-es2015":"^6.14.0","babel-preset-stage-0":"^6.16.0","cross-env":"^3.1.3","css-loader":"^0.26.1","eslint":"^3.12.1","eslint-config-standard":"^6.2.1","eslint-loader":"^1.6.1","eslint-plugin-html":"^1.6.0","eslint-plugin-promise":"^3.4.0","eslint-plugin-standard":"^2.0.1","extract-text-webpack-plugin":"^2.0.0-beta.4","node-sass":"^4.14.1","sass-loader":"^4.1.0","vue-loader":"^10.0.0","vue-template-compiler":"^2.1.6","webpack":"^2.1.0-beta.28","webpack-merge":"^1.1.2"},"dependencies":{"typed.js":"*"},"bugs":{"url":"https://github.com/Orlandster1998/vue-typed-js/issues"},"homepage":"https://github.com/Orlandster1998/vue-typed-js#readme","gitHead":"ca14b0096446da495a240b859db11ec84828e329","_id":"@akamajoris/vue-typed@0.2.0","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-1SYjhJSEIzjK6qBufZURLKBAhzHgxU9ColGPavw21IRydxJK3e7ZO9G+AARQnq8K+YTq4cZ/X6UudcoDvVH7hg==","shasum":"40a1361a37695ff739df29986d0fe04b54a0c4e2","tarball":"https://registry.npmjs.org/@akamajoris/vue-typed/-/vue-typed-0.2.0.tgz","fileCount":18,"unpackedSize":67326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhxIrSCRA9TVsSAnZWagAALo0P/RJbknJAkqYa2tyoa9Au\nftHcxq5c5sO2k9F20dJZ05w5hxopr3d7fXEUGeiUheM4uwzyZGXnOyesQwQ9\nFR0ewqdNx8cbHlZgQuwyNtGZi+5JAyKXYSsFGaJAeU62zT9s37wwlX0Lad/x\nWue/SGIDItgdCzNxLe4qnaEkvymwcqAuU/1BWxMX0C+pvofk5sriAFwdALmK\nK7UeYj1hVvLKE04cz0xlhYyx0xh6GyQRSBBWNEhNkFD4fs0YAV3Y0ujsjT1t\nmaBI9GSlkcu5NAhk9YaxWaSMnAPp/NGT1I1gqcnNMG2DOWipaFIBz+D4wu0J\nDCFQFFhmWZGeFwDfqxuACGtyBdoFdW3ccOibLf2M18WkhMyHCWPBby49j1Ie\nOpd1Xxgqr2+jfigJdkAhtYgf7gjdDeqZ319bGnBq2LOtsfhtI894iP1Nbp28\nKi/CzT+oyMG9N1D/qyXKWkM+/tFjrMCPh4BUxv1pR0OnhDDT0feSCFoiNgEt\nYAneE7CqA7sT+JUN+JRA4OWk39LH0tlhCwOqmoaog49i4690qsk3FjOuPqXp\nbar5STOD+liajPH4R2HTB9zXHbE5Y6CFQuJu2HTCZeMJS3mMqwxJCgVKP3ox\nWxPjvE2P4O12733CDY0H4zMqsKGlZfiYojFB4NK6f5VLAitEq4bpbOJhZtpf\nP0z2\r\n=lsOG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICkJ29msxmADvdXKy+2orgLWsR0Vl60DX6qprFbD40amAiB63KNgcsYV0DD3woPHJxfZvrTrcfSWCPa9ymkvQxDHOQ=="}]},"_npmUser":{"name":"akamajoris","email":"akamajoris@gmail.com"},"directories":{},"maintainers":[{"name":"akamajoris","email":"akamajoris@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-typed_0.2.0_1636630262341_0.3955006799617662"},"_hasShrinkwrap":false}},"time":{"created":"2021-11-11T11:31:02.272Z","0.2.0":"2021-11-11T11:31:02.631Z","modified":"2022-04-04T12:27:53.041Z"},"maintainers":[{"name":"akamajoris","email":"akamajoris@gmail.com"}],"description":"typed.js vue integration - easily create typing animations","homepage":"https://github.com/Orlandster1998/vue-typed-js#readme","keywords":["vue","vuejs","plugin"],"repository":{"type":"git","url":"git+https://github.com/Orlandster1998/vue-typed-js.git"},"author":{"name":"Orlando Wenzinger","email":"orlando.wenzinger@bluewin.ch"},"bugs":{"url":"https://github.com/Orlandster1998/vue-typed-js/issues"},"license":"MIT","readme":"# vue-typed-js\r\n\r\n[![npm](https://img.shields.io/npm/v/vue-typed-js.svg) ![npm](https://img.shields.io/npm/dm/vue-typed-js.svg)](https://www.npmjs.com/package/vue-typed-js)\r\n[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)\r\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/8789841c45264d19ad2595061437a8a9)](https://www.codacy.com/app/orlando.wenzinger/vue-typed-js?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=Orlandster1998/vue-typed-js&amp;utm_campaign=Badge_Grade)\r\n\r\nA Vue.js integration for Typed.js.\r\n\r\nTyped.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.\r\n\r\nCheckout the offical project [here](https://github.com/mattboldt/typed.js/).\r\n\r\n## Table of contents\r\n\r\n- [Installation](#installation)\r\n- [Usage](#usage)\r\n- [Example](#examples)\r\n\r\n# Installation\r\n\r\n```\r\nnpm install --save vue-typed-js\r\n```\r\n\r\n## Default import\r\n\r\nInstall the component:\r\n\r\n```javascript\r\nimport Vue from 'vue'\r\nimport VueTypedJs from 'vue-typed-js'\r\n\r\nVue.use(VueTypedJs)\r\n```\r\n\r\n**⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.**\r\n\r\n## Browser import\r\n\r\n```html\r\n<link rel=\"stylesheet\" href=\"vue-typed-js/dist/vue-typed-js.css\"/>\r\n\r\n<script src=\"vue.js\"></script>\r\n<script src=\"vue-typed-js/dist/vue-typed-js.browser.js\"></script>\r\n```\r\n\r\nThe plugin should be auto-installed. If not, you can install it manually with the instructions below.\r\n\r\nInstall all the components:\r\n\r\n```javascript\r\nVue.use(VueTypedJs)\r\n```\r\n\r\n# Usage\r\nTo get started simply add the `vue-typed-js` custom element to your `template` and pass the text, which should be typed to the `strings` property. In addition you need to pass an element with the class `typing` to the slot, which will be used as a `wrapper`.\r\n\r\nMinimal setup:\r\n\r\n```html\r\n<vue-typed-js :strings=\"['First text', 'Second Text']\">\r\n  <h1 class=\"typing\"></h1>\r\n</vue-typed-js>\r\n```\r\n\r\nThe `typing` class also allows you to just animate certain parts of a string:\r\n```html\r\n<vue-typed-js :strings=\"['John', 'James']\">\r\n  <h1>Hey <span class=\"typing\"></span></h1>\r\n</vue-typed-js>\r\n```\r\n\r\n## Properties\r\nYou can make use of the following properties in order to customize your typing expirience:\r\n\r\n| Property             | Type    | Description                                                          | Usage                                                           |\r\n|----------------------|---------|----------------------------------------------------------------------|-----------------------------------------------------------------|\r\n| strings              | Array   | strings to be typed                                                  | `:strings=\"['Text 1', 'Text 2']\"` |\r\n| stringsElement       | String  | ID of element containing string children                             | `:stringsElement=\"'myId'\"`                                                                |\r\n| typeSpeed            | Number  | type speed in milliseconds                                           | `:typeSpeed=\"50\"`                                                                |\r\n| startDelay           | Number  | time before typing starts in milliseconds                            | `:startDelay=\"1000\"`                                                                |\r\n| backSpeed            | Number  | backspacing speed in milliseconds                                    | `:backSpeed=\"10\"`                                                                |\r\n| smartBackspace       | Boolean | only backspace what doesn't match the previous string                | `:smartBackspace=\"true\"`                                                                |\r\n| shuffle              | Boolean | shuffle the strings                                                  | `:shuffle=\"true\"`                                                                |\r\n| backDelay            | Number  | time before backspacing in milliseconds                              | `:backDelay=\"100\"`                                                                |\r\n| fadeOut              | Boolean | Fade out instead of backspace                                        | `:fadeOut=\"true\"`                                                                |\r\n| fadeOutClass         | String  | css class for fade animation                                         | `:fadeOutClass=\"'fadeOutClass'\"`                                                                |\r\n| fadeOutDelay         | Number | fade out delay in milliseconds                                       | `:fadeOutDelay=\"500\"`                                                                |\r\n| loop                 | Boolean | loop strings                                                         | `:loop=\"true\"`                                                                |\r\n| loopCount            | Number  | amount of loops                                                      | `:loopCount=\"3\"`                                                                |\r\n| showCursor           | Boolean | show cursor                                                          | `:showCursor=\"true\"`                                                                |\r\n| cursorChar           | String  | character for cursor                                                 | `:cursorChar=\"'_'\"`                                                                |\r\n| autoInsertCss        | Boolean | insert CSS for cursor and fadeOut into HTML                          | `:autoInsertCss=\"true\"`                                                                |\r\n| attr                 | String  | attribute for typing Ex: input placeholder, value, or just HTML text | `:attr=\"'placeholder'\"`                                                                |\r\n| bindInputFocusEvents | Boolean | bind to focus and blur if el is text input                           | `:bindInputFocusEvents=\"true\"`                                                                |\r\n| contentType          | String  | 'html' or 'null' for plaintext                                       | `:contentType=\"'html'\"`                                                                |\r\n\r\n## Events\r\nYou can listen to the following events:\r\n\r\n| Event                  | Description                                                          | Usage                                                           |\r\n|------------------------|----------------------------------------------------------------------|-----------------------------------------------------------------|\r\n| onComplete             | All typing is complete                                               | `@onComplete=\"doSmth()\"` |\r\n| preStringTyped         | Before each string is typed                                          | `@preStringTyped=\"doSmth()\"`                                                                |\r\n| onStringTyped          | After each string is typed                                           | `@onStringTyped=\"doSmth()\"`                                                                |\r\n| onLastStringBackspaced | During looping, after last string is typed                           | `@onLastStringBackspaced=\"doSmth()\"`                                                                |\r\n| onTypingPaused         | Typing has been stopped                                              | `@onTypingPaused=\"doSmth()\"`                                                                |\r\n| onTypingResumed        | Typing has been started after being stopped                          | `@onTypingResumed=\"doSmth()\"`                                                                |\r\n| onReset                | After reset                                                          | `@onReset=\"doSmth()\"`                                                                |\r\n| onStop                 | After stop                                                           | `@onStop=\"doSmth()\"`                                                                |\r\n| onStart                | After start                                                          | `@onStart=\"doSmth()\"`                                                                |\r\n| onDestroy              | After destroy                                                        | `@onDestroy=\"doSmth()\"`                                                                |\r\n## Features\r\nCheckout features like `type pausing`, `smart backspacing` etc. on the libraries [page](https://github.com/mattboldt/typed.js/).\r\n\r\n# Examples\r\nHere are several examples:\r\n\r\n```html\r\n<!-- infinite loop -->\r\n<vue-typed-js :strings=\"['awesome', 'brilliant']\" :loop=\"true\" @onComplete=\"doSmth()\">\r\n  <h2>We are a <span class=\"typing\"></span> company!</h2>\r\n</vue-typed-js>\r\n\r\n<!-- type pausing -->\r\n<vue-typed-js :strings=\"['This is text ^1000 which gets paused for 1 second', 'wow, interesting']\">\r\n  <h2 class=\"typing\"></h2>\r\n</vue-typed-js>\r\n\r\n<!-- output html -->\r\n<vue-typed-js :strings=\"['<p>Paragraph</p>', '<span>Span</span>']\" :contentType=\"'html'\">\r\n  <h2 class=\"typing\"></h2>\r\n</vue-typed-js>\r\n```\r\n\r\n---\r\n\r\n# License\r\n\r\n[MIT](http://opensource.org/licenses/MIT)\r\n","readmeFilename":"README.md"}