{"_id":"vue3-resize-text","_rev":"1-f2cf9b504d589c5dee5b56e3fb462fa5","name":"vue3-resize-text","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"vue3-resize-text","version":"0.1.0","description":"Vue 3 Resize Text makes font auto resizing on responsive layout","author":{"name":"JayeshLab","email":"helloiamjayesh@gmail.com"},"main":"dist/vue3-resize-text.common.js","unpkg":"dist/vue3-resize-text.umd.min.js","bugs":{"url":"https://github.com/JayeshLab/vue3-resize-text/issues"},"homepage":"https://github.com/JayeshLab/vue3-resize-text/#readme","license":"MIT","repository":{"type":"git","url":"git+https://github.com/JayeshLab/vue3-resize-text.git"},"keywords":["text","resize","font","responsive","fit","rescale","vue","vue.js","vue3","directives"],"scripts":{"serve":"vue-cli-service serve","build":"vue-cli-service build","test:unit":"vue-cli-service test:unit","lint":"vue-cli-service lint","build:docs":"vue-cli-service build --dest docs --name vue3-resize-text src/main.js","lib":"vue-cli-service build --target lib --name vue3-resize-text src/index.js"},"dependencies":{"core-js":"^3.6.5","vue":"^3.0.0"},"devDependencies":{"@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-plugin-unit-jest":"^4.5.13","@vue/cli-service":"~4.5.0","@vue/compiler-sfc":"^3.0.0","@vue/test-utils":"^2.0.0-0","babel-eslint":"^10.1.0","eslint":"^6.7.2","eslint-plugin-vue":"^7.0.0","sass":"^1.26.5","sass-loader":"^8.0.2","typescript":"~3.9.3","vue-jest":"^5.0.0-0"},"eslintConfig":{"root":true,"env":{"node":true},"extends":["plugin:vue/vue3-essential","eslint:recommended"],"parserOptions":{"parser":"babel-eslint"},"rules":{},"overrides":[{"files":["**/__tests__/*.{j,t}s?(x)","**/tests/unit/**/*.spec.{j,t}s?(x)"],"env":{"jest":true}}]},"browserslist":["> 1%","last 2 versions","not dead"],"gitHead":"f3f15e80c044cf69c61f9e5a8c8a1f073ecdf778","_id":"vue3-resize-text@0.1.0","_nodeVersion":"14.15.4","_npmVersion":"6.14.8","dist":{"integrity":"sha512-UCC7U3JooWEJ29ZSIXldoDNAqv3x4Dql8t9tjpA8bbPU41TJKrWpUD6uY9R515JCV6Pb1jOn9Xh3D5YWn7z9jw==","shasum":"6c4bd6cac6aacc419af077e98fe5a64cb0ca61f8","tarball":"https://registry.npmjs.org/vue3-resize-text/-/vue3-resize-text-0.1.0.tgz","fileCount":15,"unpackedSize":764277,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+S2iCRA9TVsSAnZWagAAzEUP/1u2p7RK7rhnsDQbMY9R\n3qWGO2rLZ/56hvheuZwh3Yg+R2uVqottFomrA2MIV8aSxg/yCjN2uZ7AsrLu\nc8nEPAbSl6oWtiYH/BuQ5m7pJGyx6VmIKBB+P49RrpvCoNGQl5EuZRU8oJvR\n75h5i2DaK4rlcnVFhGomZTm/R3fHrffxPqntRN5mEh181dQGc9hw+2JPZFyG\nU21IjsDfUOf2xBcVm6qQWIKy2GJo8KwzocX11tjIoHsraMRHqYjy1Im2Anwm\n4P/wh9USr0bH6v4umiD4JUFxDlhq9ws0N6PKK2t6c7N56Qsn2aphd2ZrIs7Q\nHLR0FSYa/gvbbKI8SKyKFJuICysNRIgpwFIjgf+XtoZ24TMtxZq34WUmS/KP\n+91PgI3i9KVsTmWHGHeYTgIykUcF+CBKH/DZ8WJ99LZiI2CBsxe930fGzrgW\nENEm6MDNtnj5Vi7i3LundKdFYeIaKwr+/3o9oZjTSRiUv6nrqR2cpine//7e\n0TkrLvx1qo9rxnUX2vmLkGSNJ6JtPJBCnkDx/4vaQbwTu4xS0HA9c67WBW6c\nyhVR8s8syZAPCn0+bMKetIdKK8QF6JU1gh3okiCArJVqtPx8N1LNewegHr+6\nm2NBGetMpa3vSOZie8ovIr2RcGY7qciCtBtOqpQObYrUxmvNafVJkEdRagEA\nhZPM\r\n=H2I5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGrwLrv/Ssec4gh/qWUuBMKaKUOXN4TQAP492v7YL+fLAiEAj2pmjHSVefar4mnqQZBaanvk78Nrhk2eeWiPQnMiku4="}]},"_npmUser":{"name":"jayeshvachhani","email":"helloiamjayesh@gmail.com"},"directories":{},"maintainers":[{"name":"jayeshvachhani","email":"helloiamjayesh@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue3-resize-text_0.1.0_1626942881765_0.5611517066513396"},"_hasShrinkwrap":false}},"time":{"created":"2021-07-22T08:34:41.764Z","0.1.0":"2021-07-22T08:34:42.206Z","modified":"2022-05-23T21:22:02.078Z"},"maintainers":[{"name":"jayeshvachhani","email":"helloiamjayesh@gmail.com"}],"description":"Vue 3 Resize Text makes font auto resizing on responsive layout","homepage":"https://github.com/JayeshLab/vue3-resize-text/#readme","keywords":["text","resize","font","responsive","fit","rescale","vue","vue.js","vue3","directives"],"repository":{"type":"git","url":"git+https://github.com/JayeshLab/vue3-resize-text.git"},"author":{"name":"JayeshLab","email":"helloiamjayesh@gmail.com"},"bugs":{"url":"https://github.com/JayeshLab/vue3-resize-text/issues"},"license":"MIT","readme":"# Vue3 Resize Text\n\nA vue3 directive which automatically resize font size based on element width.\n\nIt makes the font-size flexible on fluid or responsive layout.\n\n\n[![npm](https://img.shields.io/npm/v/vue3-resize-text.svg?style=flat-square)](https://www.npmjs.com/package/vue3-resize-text)\n[![npm](https://img.shields.io/npm/dt/vue3-resize-text.svg?style=flat-square)](https://www.npmjs.com/package/vue3-resize-text)\n[![Build Status](https://travis-ci.org/JayeshLab/vue3-resize-text.svg?branch=master)](https://travis-ci.org/JayeshLab/vue3-resize-text)\n[![npm](https://img.shields.io/npm/l/vue3-resize-text.svg?style=flat-square)](http://opensource.org/licenses/MIT)\n\n[Live Demo](https://jayeshlab.github.io/vue3-resize-text/index.html): Resize the browser viewport to see the effect in action\n\nFor vue.js 2.x see the [vue-resize-text](https://github.com/JayeshLab/vue-resize-text \"vue-resize-text\")\n\n\n\n![vue-resize-text](https://user-images.githubusercontent.com/36194663/48419503-21935780-e77e-11e8-8a2f-6a1c9e33f740.gif)\n\n## Installation\n\nInstall via NPM\n\n`$ npm install vue3-resize-text --save`\n\nInstall via CDN\n\n```html\n<script src=\"https://unpkg.com/vue\"></script>\n<script src=\"https://unpkg.com/vue3-resize-text\"></script>\n```\n\n#### Global\n\nRegister VueResizeText globally:\n\n### Use\n```javascript\nimport { createApp } from \"vue\"\nimport App from \"./App.vue\"\nimport VueResizeText from \"vue3-resize-text\"\n\nconst app = createApp(App)\napp.use(VueResizeText)\n```\nor using directive\n\n```javascript\nimport { createApp } from \"vue\"\nimport App from \"./App.vue\"\nimport VueResizeText from \"vue3-resize-text\"\n\nconst app = createApp(App)\napp.directive('ResizeText', VueResizeText.ResizeText);\n```\n\n\nDirective ```v-resize-text``` then can be used in any of Component\n\n```html\n<template>\n  <div v-resize-text>Hello Vue</div>\n</template>\n```\n\n#### Local\n\nInclude the VueResizeText  directive directly into your component using import:\n\n```html\n<template>\n  <div v-resize-text>Hello Vue</div>\n</template>\n<script>\nimport VueResizeText from 'vue3-resize-text'\nexport default {\n directives: {\n    ResizeText: VueResizeText.ResizeText\n }\n}\n</script>\n```\n\n### Usage\n\n#### Basic usage\n\n```html\n<template>\n  <div>\n    <div v-resize-text=\"{ratio:1.3, minFontSize: '30px', maxFontSize: '100px', delay: 200}\">Hello Vue</div>\n  </div>\n</template>\n\n<script>\n  import ResizeText from 'vue-resize-text'\n  export default {\n    directives: {\n        ResizeText\n     }\n  };\n</script>\n```\n\n### Directive Arguments\n`v-resize-text=\"{ratio:1.5, minFontSize: '30px', maxFontSize: '100px', delay: 200}\"`\n\n| Argument         | Description                 |  Type         |  Default     | \n| -----------      | ---------------             | ------------  | ------------ | \n|  ratio           |  Font Ratio is the tweek to make the text resize properly, greater then `1` makes the font smaller and less then `1` make the font bigger | Number        |     1       |\n|  minFontSize     |  Minimum font-size threshold in px| Number/String |     16px or 16       |      -            |\n|  maxFontSize     |  Maximum font-size threshold in px| Number/String  |     500px  or 500      |      -         |\n|  delay           |  Debound time delay on window resize | Number        |  200   |      -        |\n\n## License\n\nMIT","readmeFilename":"README.md"}