{"_id":"@desco/vue-flip","_rev":"1-4ed89b1c7f31d19f41b767b54e7b9343","name":"@desco/vue-flip","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@desco/vue-flip","version":"1.0.0","description":"VueJS package for FLIP effect on elements","main":"index.js","repository":{"type":"git","url":"git+https://github.com/desco-npm/vue-flip.git"},"keywords":["vue","flip","element"],"author":{"name":"Rafael A. R. Dias","email":"eu@diasrafael.com.br"},"license":"ISC","homepage":"https://github.com/desco-npm/vue-flip","dependencies":{"node-sass":"^5.0.0","pug":"^3.0.2","sass-loader":"^11.0.1","template-html-loader":"^1.0.0","vue-resize":"^1.0.0"},"gitHead":"d0b16a6435c6184138f053173e0494b0fe4f843a","bugs":{"url":"https://github.com/desco-npm/vue-flip/issues"},"_id":"@desco/vue-flip@1.0.0","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-u5xlupF6JikG98k34mlMepvVkUwAzD+oO26QaJ5MZ/V/TwCPwKCrPhEAQezpAPFeU+mMtu4mC+N8KbyVUHQ9BA==","shasum":"a7a9983bc3d246115045f5e2dab19b8e113e3b79","tarball":"https://registry.npmjs.org/@desco/vue-flip/-/vue-flip-1.0.0.tgz","fileCount":5,"unpackedSize":8515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSN3cCRA9TVsSAnZWagAAVGYP/Rpx7psI9L3QUQPaEq1x\n8a2iKJsNJhIHbb5VkCkPLQUSnh8ZPw2EmyBUwGA+swU+VzRas8/Uwe+0GoXU\nDsuqgBgOVpioeE6Pp4jdsvTWqMjx2XWD0pmqNNOf9D0R+p4SV0bY+IPkgLLv\nwDtJHGG4FZsixZg9hzIRz8p/MCFntVxIJaV1Dgh6NfheRY/3sSbRU2SYtb0+\nKFeFhTCWai40dO5H1p/DtzEzbuOj59WTvEUlLyUEhRj+lH9a9iuTW2ygGrXn\n0KWqkK+NsB5IloYtHGlDCgRapm9WjGQwnK10tvxKbsC9v6RvyAasUtgJDFm0\nwfQFoUtc0YMF9uB7Rsaj2rCGJHL3TboyvqLeH6pI7QFvZEaYSju6iqzwCQL2\nUDyjheXANw4NLiKrSWx5Zob5zmozobo0Fe8x3qE7ViW/yzyjd6rcJGZepA2T\nqK25yJylRYzdGSEQO2oDydwspBenqK9lc3a9ut7/bkwRkafAsg4fAeq0Lx4T\nkKLn9txpJNiMpIJPQky8H2YHzova7UfvLHzRIH6ZGNIRZEQKZLYvsW5YXd+9\nslkDOZQLcY9YDIm0TYwZ+uH9s1KD3TBgZpXxIhR417LeQT7WVQwzWydkUWbn\nNIRRrYvBIyQ4DHoKupEbRGyrH2wPa11MN9Gnbk+/NyYv3DjpXI5SlpAoDpGq\nJzlg\r\n=7G7O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbKj11PwUaEpQP82yMWOPrTemEXYwDmkNutVVLStp7YQIgIUNqVF0cKPXh58xm8fS5bLwtW/pZFpH6Bt3OObRqxkE="}]},"_npmUser":{"name":"descodifica","email":"contato@diasrafael.com.br"},"directories":{},"maintainers":[{"name":"descodifica","email":"contato@diasrafael.com.br"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-flip_1.0.0_1615388123720_0.31216501493299886"},"_hasShrinkwrap":false}},"time":{"created":"2021-03-10T14:55:23.648Z","1.0.0":"2021-03-10T14:55:24.004Z","modified":"2022-04-05T03:49:13.029Z"},"maintainers":[{"name":"descodifica","email":"contato@diasrafael.com.br"}],"description":"VueJS package for FLIP effect on elements","homepage":"https://github.com/desco-npm/vue-flip","keywords":["vue","flip","element"],"repository":{"type":"git","url":"git+https://github.com/desco-npm/vue-flip.git"},"author":{"name":"Rafael A. R. Dias","email":"eu@diasrafael.com.br"},"bugs":{"url":"https://github.com/desco-npm/vue-flip/issues"},"license":"ISC","readme":"<div align=\"right\">\r\n  <a href=\"README.US.md\">\r\n    <img alt=\"Read in American English\" src=\"https://img.shields.io/static/v1?label=&message=🇺🇸 Read in American English&color=red&style=for-the-badge\" />\r\n  </a>\r\n</div>\r\n\r\n<table>\r\n  <tr>\r\n    <td><img src=\"https://i.ibb.co/Wsqqvz5/vue-flip.png\"></td>\r\n    <td>  \r\n      <h1>@desco/vue-flip</h1>\r\n      Pacote NPM para VueJS para efeito de FLIP nos elementos.\r\n      <br /><br />\r\n      <div align=\"center\">\r\n        <img alt=\"Licença MIT\" src=\"https://img.shields.io/static/v1?label=Licença&message=MIT&color=green&style=for-the-badge\">\r\n        <img alt=\"Versão 1.0.0\" src=\"https://img.shields.io/static/v1?label=Versão&message=1.0.0&color=blue&style=for-the-badge\">\r\n      </div>\r\n      <h4 align=\"center\"> \r\n        🚀 Pronto para uso! 🚀\r\n      </h4>\r\n    </td>\r\n  </tr>\r\n</table>\r\n\r\n> <a href=\"https://github.com/desco-npm\" target=\"_blank\">Veja outros projetos NPM aqui.</a>\r\n\r\n> <a href=\"https://github.com/descoifica\" target=\"_blank\">Veja outros projetos aqui.</a>\r\n\r\n---\r\n\r\n## 📋 Tabela de conteúdos\r\n\r\n* [🛠️ Tecnologias](#Tecnologias)\r\n* [⚙️ Instalação](#Instalação)\r\n* [📦 Importação](#Importação)\r\n* [📚 Como Usar](#Como-Usar)\r\n\r\n---\r\n\r\n<a name=\"Tecnologias\"></a>\r\n\r\n\r\n## 🛠️ Tecnologias\r\n\r\nAs seguintes tecnologias são utilizadas:\r\n\r\n* [VueJS](https://vuejs.org/);\r\n* [PUG/JADE](https://jade-lang.com/);\r\n* [SASS/SCSS](https://sass-lang.com/);\r\n\r\n---\r\n\r\n<a name=\"Instalação\"></a>\r\n\r\n## ⚙️ Instalação\r\n\r\n```bash\r\nnpm install --save @desco/vue-flip\r\n```\r\n\r\n> Note que será necessário ter o **NPM** instalado para o comando funcionar.\r\n\r\n---\r\n\r\n<a name=\"Importação\"></a>\r\n\r\n## 📦 Importação\r\n\r\n```js\r\n<script>\r\n  import VueFlip = require('@desco/vue-flip')\r\n\r\n  export default {\r\n    components: { VueFlip, }\r\n  }\r\n<script>\r\n```\r\n\r\n---\r\n\r\n<a name=\"Como-Usar\"></a>\r\n\r\n## 📚 Como Usar\r\n\r\n```html\r\n<template>\r\n  <VueFlip :turned=\"turned\" height=\"300px\">\r\n    <template slot=\"front\">\r\n      <div class=\"card\">\r\n        <button @click=\"turned = true\">Ver a Traseira</button>\r\n      </div>\r\n    <template slot=\"back\">\r\n      <div class=\"card\">\r\n        <button @click=\"turned = false\">Ver a Frente</button>\r\n      </div>\r\n    </template>\r\n  </VueFlip>\r\n</template>\r\n```\r\n\r\n```js\r\n<script>\r\n  export default {\r\n    data () {\r\n      return {\r\n        turned: false\r\n      }\r\n    }\r\n  }\r\n</script>\r\n```\r\n\r\n### Hover\r\n\r\nTambém é possível fazer o flip quando o mouse passar por cima do elemento, veja:\r\n\r\n```html\r\n<template>\r\n  <VueFlip hover height=\"300px\">\r\n    <template slot=\"front\">\r\n      <div class=\"card\">\r\n        Frente\r\n      </div>\r\n    <template slot=\"back\">\r\n      <div class=\"card\">\r\n        Traseira\r\n      </div>\r\n    </template>\r\n  </VueFlip>\r\n</template>\r\n```\r\n\r\n### Parâmetros\r\n\r\n| Nome | Tipo | Detalhes | Descrição\r\n|---|---|---|---\r\n| height | String | - | Altura do elemento\r\n| turned | Boolean | false | Se o elemento esta virado (Use para fazer o flip de acordo com a sua regra)\r\n| hover | Boolean | false | Se deve virar (fazer o flip) quando passar o mouse sobre o elemento\r\n\r\n---\r\n\r\n## Autor\r\n\r\n<table>\r\n  <tr>\r\n    <td width=\"150px\">\r\n      <img src=\"https://scontent.fsdu1-1.fna.fbcdn.net/v/t1.0-9/539886_235546170253505_5977326689811409130_n.jpg?_nc_cat=106&ccb=3&_nc_sid=174925&_nc_eui2=AeGgFWn_fWInwRkTo3mHSP993TbQ0TzG0Y3dNtDRPMbRjS-eZL1tr4I5maqz6O-jva9qWnIxKOsD3UtSm9CTeCys&_nc_ohc=Qw6NaDGrtIgAX9uFF2c&_nc_ht=scontent.fsdu1-1.fna&oh=5ebac9874d7a24e157c8c99fd965c2a4&oe=606539CE\" width=\"100px;\" alt=\"\"/>\r\n      <b>Rafael A. R. Dias</b>\r\n    </td>\r\n    <td>  \r\n      <a href=\"mailto:eu@diasrafael.com.br\" target=\"_blank\" >\r\n        <img alt=\"Email eu@diasrafael.com.br\" src=\"https://img.shields.io/static/v1?label=Email&message=eu@diasrafael.com.br&color=red&logo=gmail&style=for-the-badge\">\r\n      </a>\r\n      <a href=\"https://www.linkedin.com/in/diasrafael/\" target=\"_blank\">\r\n        <img alt=\"Linkedin @diasrafael\" src=\"https://img.shields.io/static/v1?label=Linkedin&message=@diasrafael&color=blue&logo=linkedin&style=for-the-badge\">\r\n      </a>\r\n      <a href=\"https://www.facebook.com/eudiasrafael\" target=\"_blank\">\r\n        <img alt=\"Facebook @eudiasrafael\" src=\"https://img.shields.io/static/v1?label=Facebook&message=@eudiasrafael&color=blue&logo=facebook&style=for-the-badge\">\r\n      </a>\r\n      <a href=\"https://github.com/descodifica\" target=\"_blank\">\r\n        <img alt=\"GitHub Overview @descodifica\" src=\"https://img.shields.io/static/v1?label=GitHub Overview&message=@descodifica&color=black&logo=github&style=for-the-badge\">\r\n      </a>\r\n      <a href=\"https://github.com/desco-npm\" target=\"_blank\">\r\n        <img alt=\"GitHub NPM @desco-npm\" src=\"https://img.shields.io/static/v1?label=GitHub NPM&message=@desco-npm&color=black&logo=github&style=for-the-badge\">\r\n      </a>\r\n      <a href=\"https://www.npmjs.com/org/desco\" target=\"_blank\">\r\n        <img alt=\"NPM @desco\" src=\"https://img.shields.io/static/v1?label=NPM&message=@desco&color=red&logo=npm&style=for-the-badge\">\r\n      </a>\r\n    </td>\r\n  </tr>\r\n</table>","readmeFilename":"README.md"}