{"_id":"@7anshuai/vue-auto-sizer","_rev":"2-9953191a40b147234d34fade79d49b67","name":"@7anshuai/vue-auto-sizer","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.1":{"name":"@7anshuai/vue-auto-sizer","version":"0.1.1","keywords":["auto-size","auto-sizer","vue"],"author":{"name":"Tan Shuai","email":"7anshuai@gmail.com"},"license":"MIT","_id":"@7anshuai/vue-auto-sizer@0.1.1","maintainers":[{"name":"7anshuai","email":"7anshuai@gmail.com"}],"homepage":"https://github.com/7anshuai/vue-auto-sizer","bugs":{"url":"https://github.com/7anshuai/vue-auto-sizer/issues"},"umd":"dist/vue-auto-sizer.umd.js","dist":{"shasum":"11be90bfbfc84431b74b857f2bf540621d735d9b","tarball":"https://registry.npmjs.org/@7anshuai/vue-auto-sizer/-/vue-auto-sizer-0.1.1.tgz","fileCount":20,"integrity":"sha512-/DuLDEH0hkutWeg0vf5dmuXopdj0CQbISxxhRi21GVx8AZhWeuRf3rc1ztnH+8rILzzUdxTW7EtsDsFwQKqBoQ==","signatures":[{"sig":"MEQCIFrJGahCv2evuk07xqfsFlo1Zfxr8RJcrO11xif+yBFPAiA+turJh9TBhrwD9hE6rtxHbNekTP7rs2PeR6IzAff2Yg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":629332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9UxWCRA9TVsSAnZWagAAMW8P/34Jn5zJ6EZoiu/oX/ns\n7B/sLtLNwKhe50lhAkqV5VTIW9teKzj8J03rb/fS9s4JAcA0VhnKSZuZ7Ax9\n9zOvgldvCvFyiUCv4nzsKb52a+18sDfJwLH3mvlqSwoFSsEib4SBKrMCg6sO\nVzQ22UmI0PdjCxIygAuE/3f1wjl5rJLI1Zs350r1Z9Ird05EvHBdJKA6iiZW\n0oGPoGqcMF/KW+uSHI+FdYAIDiAxovJH5Am6EXIRR9rZr2WEk0V+ciR/0Ui/\nEmjWkFn11APYXhGgDhnU62e5CU2BYMHT/p0y6Mw2e+FMFfZX8Ysqjl0+ji/7\nAQFeTJPcM/SbSrQ83Z3WMBocCHAbDI4qw66jH1c51n+ofZpj1HmcgMs1PBCd\nKm6EfJqdB1hSTvHqQH6yQcsS4K/mO2Da5XdDOF0xUqWvmpY9hl1JLNux7Vif\nxHKDpyMuO6da9FVW+0cqiQAHnofLFh7U6lVcRhV6kMaU7zz78JcDMeHm+Ycv\nAOEQHeJjbgCmgCtQ+4bfoRNoBgve1OB6ETcmxIHk96NiUH0K98aJPnLCFyZN\nKKczzDEpmbY1/gcfUJHvWUAtqby3qw2gNSsxBoYOxDE8clFFcPB8eIFYVsfL\nHx36/9ys1AtheMurb1bAsszqOCmSFpHHRsQqfNwR1Pw/5kZG3ZBjogmTRjyg\nQONf\r\n=YWhG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-auto-sizer.common.js","gitHead":"cadc340b835447f52f1bfc2e12b9b390b0648daa","scripts":{"lint":"vue-cli-service lint","serve":"vue-cli-service serve","build:app":"vue-cli-service build","build:lib":"vue-cli-service build --modern --target lib src/index.js","test:unit":"vue-cli-service test:unit"},"_npmUser":{"name":"7anshuai","email":"7anshuai@gmail.com"},"repository":{"url":"git+https://github.com/7anshuai/vue-auto-sizer.git","type":"git"},"_npmVersion":"6.14.6","description":"Vue component that automatically adjusts the width and height of a single child.","directories":{},"_nodeVersion":"10.22.1","dependencies":{"vue":"^2.6.11","core-js":"^3.6.5"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^6.7.2","babel-eslint":"^10.1.0","@vue/test-utils":"^1.0.3","@vue/cli-service":"~4.5.0","eslint-plugin-vue":"^6.2.2","eslint-plugin-node":"^11.1.0","vue-server-renderer":"^2.6.14","eslint-plugin-import":"^2.20.2","@vue/cli-plugin-babel":"~4.5.0","eslint-plugin-promise":"^4.2.1","vue-template-compiler":"^2.6.11","@vue/cli-plugin-eslint":"~4.5.0","@vue/server-test-utils":"^1.2.1","eslint-plugin-standard":"^4.0.0","@vue/cli-plugin-unit-jest":"~4.5.0","@vue/eslint-config-standard":"^5.1.2"},"_npmOperationalInternal":{"tmp":"tmp/vue-auto-sizer_0.1.1_1626688598010_0.7194187258980362","host":"s3://npm-registry-packages"}},"0.1.2":{"name":"@7anshuai/vue-auto-sizer","version":"0.1.2","description":"Vue component that automatically adjusts the width and height of a single child.","homepage":"https://github.com/7anshuai/vue-auto-sizer","repository":{"type":"git","url":"git+https://github.com/7anshuai/vue-auto-sizer.git"},"author":{"name":"Tan Shuai","email":"7anshuai@gmail.com"},"license":"MIT","keywords":["auto-size","auto-sizer","vue"],"main":"dist/vue-auto-sizer.common.js","umd":"dist/vue-auto-sizer.umd.js","scripts":{"serve":"vue-cli-service serve","build:app":"vue-cli-service build","build:lib":"vue-cli-service build --modern --target lib src/index.js","test:unit":"vue-cli-service test:unit","lint":"vue-cli-service lint"},"dependencies":{"core-js":"^3.6.5","vue":"^2.6.11"},"devDependencies":{"@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-eslint":"~4.5.0","@vue/cli-plugin-unit-jest":"~4.5.0","@vue/cli-service":"~4.5.0","@vue/eslint-config-standard":"^5.1.2","@vue/server-test-utils":"^1.2.1","@vue/test-utils":"^1.0.3","babel-eslint":"^10.1.0","eslint":"^6.7.2","eslint-plugin-import":"^2.20.2","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-standard":"^4.0.0","eslint-plugin-vue":"^6.2.2","vue-server-renderer":"^2.6.14","vue-template-compiler":"^2.6.11"},"gitHead":"6823c2a61d6e2371ee95a6673114e48e85e6e07f","bugs":{"url":"https://github.com/7anshuai/vue-auto-sizer/issues"},"_id":"@7anshuai/vue-auto-sizer@0.1.2","_nodeVersion":"16.15.0","_npmVersion":"8.5.5","dist":{"integrity":"sha512-car8jdBXQTFJ1dwhs78Mde75GkWzmBQi1DJDQbP2XhRciHbMq0ROENmOAujJW5ELWrr38DrzjLh2gT+1SUWkNQ==","shasum":"8e3635707bc33fd8b0f813e81097a1d38c2c16e4","tarball":"https://registry.npmjs.org/@7anshuai/vue-auto-sizer/-/vue-auto-sizer-0.1.2.tgz","fileCount":21,"unpackedSize":951048,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG9us8AumkfZiMdeH9/a+vh13I+AgtN8UXFyXelNlWRgAiEA+A1+ayzlMpCNS00Oa8XXAKAz4EfGheNPbDDxLUaNq7I="}]},"_npmUser":{"name":"7anshuai","email":"7anshuai@gmail.com"},"directories":{},"maintainers":[{"name":"7anshuai","email":"7anshuai@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-auto-sizer_0.1.2_1720680114425_0.2941002169672964"},"_hasShrinkwrap":false}},"time":{"created":"2021-07-19T09:56:37.942Z","modified":"2024-07-11T06:41:54.788Z","0.1.1":"2021-07-19T09:56:38.203Z","0.1.2":"2024-07-11T06:41:54.648Z"},"bugs":{"url":"https://github.com/7anshuai/vue-auto-sizer/issues"},"author":{"name":"Tan Shuai","email":"7anshuai@gmail.com"},"license":"MIT","homepage":"https://github.com/7anshuai/vue-auto-sizer","keywords":["auto-size","auto-sizer","vue"],"repository":{"type":"git","url":"git+https://github.com/7anshuai/vue-auto-sizer.git"},"description":"Vue component that automatically adjusts the width and height of a single child.","maintainers":[{"name":"7anshuai","email":"7anshuai@gmail.com"}],"readme":"# vue-auto-sizer\n\nVue component that automatically adjusts the width and height of a single child.\n\n> Note: vue-auto-sizer is a vue clone of [react-virtualized-auto-sizer](https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md)\n\n## Usage\n\n### Installtion\n\n```bash\n$ npm install @7anshuai/vue-auto-sizer\n```\n\n### Prop Types\n\n| Property      | Type     | Required? | Description                                                                                                                                                     |\n| :------------ | :------- | :-------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| defaultHeight | Number   |           | Height passed to child for initial render; useful for server-side rendering. This value will be overridden with an accurate height after mounting.              |\n| defaultWidth  | Number   |           | Width passed to child for initial render; useful for server-side rendering. This value will be overridden with an accurate width after mounting.                |\n| disableHeight | Boolean  |           | Fixed `height`; if specified, the child's `height` property will not be managed                                                                                 |\n| disableWidth  | Boolean  |           | Fixed `width`; if specified, the child's `width` property will not be managed                                                                                   |\n| nonce         | String   |           | Nonce of the inlined stylesheets for [Content Security Policy](https://www.w3.org/TR/2016/REC-CSP2-20161215/#script-src-the-nonce-attribute)                    |\n| onResize      | Function |           | Callback to be invoked on-resize; it is passed the following named parameters: `({ height: number, width: number })`.                                           |\n\n### Examples\n\nSome vue components require explicit dimensions but sometimes you just want a component to just grow to fill all of the available space.\nThe `AutoSizer` component can be useful in this case.\n\nOne word of caution about using `AutoSizer` with flexbox containers.\nFlex containers don't prevent their children from growing and `AutoSizer` greedily grows to fill as much space as possible.\nCombining the two can cause a loop.\nThe simple way to fix this is to nest `AutoSizer` inside of a `block` element (like a `<div>`) rather than putting it as a direct child of the flex container.\nRead more about common `AutoSizer` questions [here](#questions).\n\n```vue\n<template>\n  <div id=\"app\">\n    <h1>\n      <img alt=\"Vue logo\" src=\"./assets/logo.png\">\n    </h1>\n\n    <p>\n      vue-auto-sizer is a vue clone of <a href=\"https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md\">React virtualized auto sizer</a>\n    </p>\n\n    <div class=\"auto-sizer-wrapper\">\n      <auto-sizer v-slot=\"{ size: { height, width} }\">\n        <div :style=\"{ height: height + 'px', width: width + 'px' }\">\n          Auto sized content...\n        </div>\n      </auto-sizer>\n    </div>\n  </div>\n</template>\n\n<script>\nimport AutoSizer from '@7anshuai/vue-auto-sizer'\n\nexport default {\n  name: 'App',\n  components: {\n    AutoSizer\n  },\n  methods: {\n    onResize ({ height, width }) {\n      console.log(height, width)\n    }\n  }\n}\n</script>\n\n<style>\n#app {\n  display: flex;\n  flex-direction: column;\n  height: 100vh;\n}\n\n.auto-sizer-wrapper {\n  flex: 1 1 auto;\n}\n</style>\n```\n## Development\n```\nyarn install\n```\n\n### Compiles and hot-reloads for development\n```\nyarn serve\n```\n\n### Compiles and minifies for production\n```\nyarn build\n```\n\n### Compiles and minifies for npm package\n```\nyarn build:lib\n```\n\n### Run your unit tests\n```\nyarn test:unit\n```\n\n### Lints and fixes files\n```\nyarn lint\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n","readmeFilename":"README.md"}