{"_id":"@aerni/alpine-resize","_rev":"3-f41fac4103e7c5a8b7fbeb7b09ac25a8","name":"@aerni/alpine-resize","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@aerni/alpine-resize","description":"Trigger JavaScript when an element is resized.","version":"1.0.0","author":{"name":"Michael Aerni","email":"hello@michaelaerni.ch","url":"https://michaelaerni.ch"},"repository":{"type":"git","url":"git+https://github.com/aerni/alpine-resize.git"},"license":"MIT","main":"dist/module.cjs.js","module":"dist/module.esm.js","devDependencies":{"brotli-size":"^4.0.0","esbuild":"^0.8.39","eslint":"^7.22.0","eslint-config-standard":"^16.0.2","eslint-plugin-import":"^2.22.1","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.3.1","eslint-plugin-standard":"^4.1.0","lint-staged":"^10.5.4"},"scripts":{"build":"node ./scripts/build.js","watch":"node ./scripts/build.js --watch","lint":"eslint .","lint-fix":"eslint . --fix"},"gitHead":"f00ce18b15c21e43169eeb96d702d8b9c39752ea","bugs":{"url":"https://github.com/aerni/alpine-resize/issues"},"homepage":"https://github.com/aerni/alpine-resize#readme","_id":"@aerni/alpine-resize@1.0.0","_nodeVersion":"16.0.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-KXGyHuoc/6BrnhEe1/6Oxxy+dtMeiUpKYk4Hfqxw1s4SpvQWqrIldDrT/cn45ztQQH+EBiWR9nh6+l0yo6d8zA==","shasum":"bd29c659c97903627ef4b5acf47e347eb1b177db","tarball":"https://registry.npmjs.org/@aerni/alpine-resize/-/alpine-resize-1.0.0.tgz","fileCount":13,"unpackedSize":8210,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+psQCRA9TVsSAnZWagAAdbgP/2OoOEF/BLOxDVcKDnp1\nHUE9NJrsU1amxxikhbv2fvciYRc69qKeDE/pV6ynCTZUx6LPB6v1u4nCXDO/\nSMHKK8QahSqdbbbVRAa1w9ooaNIcCCZC92+tjURMSehWcrNwc0xSyJBG/Ni9\ne1PPB2lf369HVObFDcH47MeN/cOrPfGLDDA2sjhjeLwM+4YK8vKfOaGveOpl\nc6uzMaMin23EJFhvfq9adv83DQvq06Y2TIf9UQhM3TzByxhGDAJds052nCoB\nOOjNyKA1CBURsBSIXeEM7ELLGX3AJ+QR3a1vm3+gIvlZEEou4349mmWCt/d4\nYk/d+EsRks0KQIZKD6FV8rhAwP5jF122qE3of3Ox+ptmmpHTef4YAN4PXKtM\ncW8GzNmr+mQUzdut1zJyd81ClXZfP+yt/WkqgRi9/tZI4s0Zjk9C1v6V27JW\nhsgJp8+5btSKCPZFpJ3DBmJ4RbBuTv3NW5MGBICtetwQvUUU6PsdstgkAqQp\nwC44jDkBWJcasXqpkCPZx/mHvjNj9p0JiabS98xtusZ8NHxUHuBOnRXJinQD\nWNHqG8dv+ZqY2S8olwbQ1ddlus/13azEwo9YFRwsqsBRobtQONLUvh4Eg6SJ\n3+KtRmH6QA8ZL5LQt97SweS6HQcb+f8QSmfdQ/IV3IcALIH+xzam+aLbAiJO\nQSy2\r\n=2EOo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICnysBYtOnUxqdYtC7osxhx/QNy8nfhouOZKsAVGndhkAiEAt6dEv0dcnr4TVapLGuaNFQ361N9+w2iKitYoXgG38FE="}]},"_npmUser":{"name":"aerni","email":"hello@michaelaerni.ch"},"directories":{},"maintainers":[{"name":"aerni","email":"hello@michaelaerni.ch"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alpine-resize_1.0.0_1627036432752_0.2587790846255653"},"_hasShrinkwrap":false},"1.0.1":{"name":"@aerni/alpine-resize","description":"Trigger JavaScript when an element is resized.","version":"1.0.1","author":{"name":"Michael Aerni","email":"hello@michaelaerni.ch","url":"https://michaelaerni.ch"},"repository":{"type":"git","url":"git+https://github.com/aerni/alpine-resize.git"},"license":"MIT","main":"dist/module.cjs.js","module":"dist/module.esm.js","devDependencies":{"brotli-size":"^4.0.0","esbuild":"^0.8.39","eslint":"^7.22.0","eslint-config-standard":"^16.0.2","eslint-plugin-import":"^2.22.1","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.3.1","eslint-plugin-standard":"^4.1.0","lint-staged":"^10.5.4"},"scripts":{"build":"node ./scripts/build.js","watch":"node ./scripts/build.js --watch","lint":"eslint .","lint-fix":"eslint . --fix"},"gitHead":"a6b1a64de2460ce2f5fedc1b55cc8f554bc04b28","bugs":{"url":"https://github.com/aerni/alpine-resize/issues"},"homepage":"https://github.com/aerni/alpine-resize#readme","_id":"@aerni/alpine-resize@1.0.1","_nodeVersion":"16.0.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-LUjluVZdI5HH0iIYrDwoZa7YfBa5qFEL7z15xEzFKZvjpgE7aHZZcFYrJx3ibH1ChMhQvfppjmV9yetWiOlVfA==","shasum":"669b5692ae196fc0c307d43aab08ed856d719a98","tarball":"https://registry.npmjs.org/@aerni/alpine-resize/-/alpine-resize-1.0.1.tgz","fileCount":14,"unpackedSize":9680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+puMCRA9TVsSAnZWagAASZwP+QDxzRWXXr31jcV0+5vs\nRHkmgivLgKmTlV+4UZI0WQOtZfSSRYfx+dAS6xjPiyp9GOqTBBDlR43d3hSf\nF/K2nvYhDa+hAC9wo+5OYEp6Bc+bQAvV9Sse4NBDjtdPs4x1CyjzQaLX4axf\nZh53F8NUDFXPa7FyvfISUK1lRiuEA5u3nAGWuxcTbHSAcOwMVJEn3FL3n0Yy\nCs93vp9eKR6j2BuqhcX+PR71WCpztzJ04c6U3Z/PZLaAjhA+LqGMnZCYM95A\nzsuQAaeMgCyGaMTg23Gapp/xVklsYxF1Cezgz5Z6uYRn5uiYy+/xjSnayi4U\nMgVrTMfxjV6OnucNu11OzmvuDb7rsffVxAxZrXz51nrnirUYY/r4Se6+NhMg\nRnLW+/cCRzIckVo1EoZUt4V90AaqbH10FqUSPKkkT/RxCgSlo950EyKNhx+r\n3IQowSSANRrVOJNN9En7EaXE2kI6fhSh/oFvZvbjGWAb7c7xnmNB0Ir2YcGp\nZM4mt6X/NeN738xU2fviRlmZD8NnLGoEs5jFjuchyl9Ipq/5IWKxAtAFgdfa\nKvH0hnY2MgBDQIh2OJMpQasTa7icfRa9kZCP9lfaUQnMMGF3jDEo4djmsgoA\nXhfYj7HtjbOisSOR2hoqTLuB6rAQCY7ctCtvZA7qqHX/kHgpQvYnyQGYuoY2\ngdM5\r\n=IJdQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDILX+wvAWwtSmv+QvMbFnNtr5GzY0CPiHPor+Lp3Eu5wIgV9op8qsD/6649ls00TLr8thT3VU2cGZ88dlLgB2+OfY="}]},"_npmUser":{"name":"aerni","email":"hello@michaelaerni.ch"},"directories":{},"maintainers":[{"name":"aerni","email":"hello@michaelaerni.ch"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alpine-resize_1.0.1_1627036556086_0.9492818976152295"},"_hasShrinkwrap":false},"1.1.0":{"name":"@aerni/alpine-resize","description":"Trigger JavaScript when an element is resized.","version":"1.1.0","author":{"name":"Michael Aerni","email":"hello@michaelaerni.ch","url":"https://michaelaerni.ch"},"repository":{"type":"git","url":"git+https://github.com/aerni/alpine-resize.git"},"license":"MIT","main":"dist/module.cjs.js","module":"dist/module.esm.js","devDependencies":{"brotli-size":"^4.0.0","esbuild":"^0.8.39","eslint":"^7.22.0","eslint-config-standard":"^16.0.2","eslint-plugin-import":"^2.22.1","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.3.1","eslint-plugin-standard":"^4.1.0","lint-staged":"^10.5.4"},"scripts":{"build":"node ./scripts/build.js","watch":"node ./scripts/build.js --watch","lint":"eslint .","lint-fix":"eslint . --fix"},"gitHead":"a7cf57cd42e5ea5ee2dd71d4048166abe9bdec0f","bugs":{"url":"https://github.com/aerni/alpine-resize/issues"},"homepage":"https://github.com/aerni/alpine-resize#readme","_id":"@aerni/alpine-resize@1.1.0","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-/kTjP7G1aS7uiJjFcHBBW3RPV08JtWCDaf/FcI7P74/8VmitoEluK06xb8xbAB/BhrYwp/lJ/2zEzc8TFIhlnw==","shasum":"4a892670daa7718c85a78fdb4a13a13896064911","tarball":"https://registry.npmjs.org/@aerni/alpine-resize/-/alpine-resize-1.1.0.tgz","fileCount":15,"unpackedSize":11782,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICDsCYnlJuOCtJeDAaysNH3RHucNroh4MZbGVPEaB42aAiAV8ORgamv29LLWMQOgdVF5y3VDDk0emNz+96efXtArdw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjforUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgkRAAov+vltkUtCwZzyABa9t9dGpca950RgkuYFGB/5DjQoGXkGJD\r\n92cLRmlvkkBRI8qpemJDOAQ915zUXsXE+p6kwusga2kFoJbM2nbafDfPAzz7\r\nSXknEIr2qL54qdpjjD9gayJ6QwVuScLAB10fz8i2BwjuTcG0G4/IE72X0erL\r\ndfAj1oZcxJjsHnpVpC45a2EsdHZ51KY9/yu8S2zBQJgJtoAcPjboo8tyxF7r\r\n/0h2jQMiGHtE3eqyBybAU5GlZylw9HqTD+F8OacFa6AGBkSBB3hMHB+VUHzV\r\nYjmB2jxNy6qetuX9o1OwSMt5AmfPxAXH8VgiCASa9eZNys+mxn/E/rAH5hV5\r\nueYVq4KKE/5t/2ArL37/Ree4NJpvJdP/b7UKxCyhtmEC12jiTMwH/K9qyETx\r\nkT241djYbyUB8aXz9d0ykeQbthoYn97SgcV/xi+vqlv9BW/yIAX2CE827zbs\r\nEM0Fa2u8ZpXvCW6XY2NCOFGqMQvBbW4ns/Jizd0D3f1OTerz1gwrn2HtG9BW\r\n5GdvFpTq9TkteXkJ5Ff5c51Igl+b2oAqq/e/sFCiczk4UEPKE+D0j2dJDost\r\nqHKV+URLxwxpPBU5iEkZcf0o/EAbtKzrwoPHEXEhLv2aaKAtEjoQ/Uan62rV\r\n/4RHbhuGd8MZ716jkpdSsWPJv2HjQS1SnYU=\r\n=mvPD\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"aerni","email":"hello@michaelaerni.ch"},"directories":{},"maintainers":[{"name":"aerni","email":"hello@michaelaerni.ch"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alpine-resize_1.1.0_1669237459867_0.496865350291642"},"_hasShrinkwrap":false}},"time":{"created":"2021-07-23T10:33:52.685Z","1.0.0":"2021-07-23T10:33:52.921Z","modified":"2022-11-23T21:04:20.135Z","1.0.1":"2021-07-23T10:35:56.259Z","1.1.0":"2022-11-23T21:04:20.045Z"},"maintainers":[{"name":"aerni","email":"hello@michaelaerni.ch"}],"description":"Trigger JavaScript when an element is resized.","homepage":"https://github.com/aerni/alpine-resize#readme","repository":{"type":"git","url":"git+https://github.com/aerni/alpine-resize.git"},"author":{"name":"Michael Aerni","email":"hello@michaelaerni.ch","url":"https://michaelaerni.ch"},"bugs":{"url":"https://github.com/aerni/alpine-resize/issues"},"license":"MIT","readme":"![NPM Version](https://badgen.net/npm/v/@aerni/alpine-resize?style=flat-square)\n![Build Size](https://badgen.net/badgesize/gzip/aerni/alpine-resize/main/dist/cdn.min.js?style=flat-square)\n![License](https://img.shields.io/github/license/aerni/tailwindcss-rfs?style=flat-square)\n\n# Alpine Resize\nThis is a convenience wrapper around ResizeObserver that allows you to easily run code whenever an element is resized. One possible use case is to dynamically set the `sizes` attribute on the `<source>` tag of a `<picture>` element.\n\n## Installation\nYou can use this plugin by either including it from a `<script>` tag or installing it via NPM:\n\n### Via CDN\nYou can include the CDN build of this plugin as a `<script>` tag, just make sure to include it BEFORE Alpine's core JS file.\n\n```html\n<!-- Alpine Resize -->\n<script defer src=\"https://cdn.jsdelivr.net/npm/@aerni/alpine-resize@1.x.x/dist/cdn.min.js\"></script>\n\n<!-- Alpine Core -->\n<script defer src=\"https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js\"></script>\n```\n\n### Via NPM\nYou can install Resize from NPM for use inside your bundle like so:\n\n```\nnpm install @aerni/alpine-resize\n```\n\nThen initialize it from your bundle:\n\n```js\nimport Alpine from 'alpinejs'\nimport resize from '@aerni/alpine-resize'\n\nAlpine.plugin(resize)\n```\n\n## Usage\nAdd `x-resize` to any element within an Alpine component. The provided expression will execute as soon as the element is resized.\n\nIn this example, the element will show as soon as it is resized.\n\n```html\n<div x-data=\"{ resized: false }\" x-resize=\"resized = true\">\n    <div x-show=\"resized\">\n        This element shows as soon as it is resized\n    </div>\n</div>\n```\n\nYou can also provide a callback to access the `ResizeObserverEntry` to do fancy things like changing an elements font size based on its width.\n\n```html\n<div\n    x-data=\"{\n        width: 0,\n        minFontSize: 15,\n        maxFontSize: 50,\n    }\"\n    x-resize=\"resizeObserverEntry => {\n        width = resizeObserverEntry.contentRect.width\n    }\"\n    :style=\"{\n        'font-size': `${Math.min(maxFontSize, Math.max(minFontSize, width * 0.05))}px`,\n    }\"\n>\n    The font-size of this element will change based on its width\n</div>\n```\n","readmeFilename":"README.md"}