{"id":21701453,"url":"https://github.com/ktsn/vue-size-provider","last_synced_at":"2025-04-12T13:37:27.636Z","repository":{"id":33962722,"uuid":"128750962","full_name":"ktsn/vue-size-provider","owner":"ktsn","description":"Declarative element size observer and provider","archived":false,"fork":false,"pushed_at":"2022-12-29T12:14:58.000Z","size":5263,"stargazers_count":55,"open_issues_count":23,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-26T08:12:10.547Z","etag":null,"topics":["component","declarative","resize","scoped-slot","size","vue"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ktsn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-09T09:55:54.000Z","updated_at":"2023-07-10T09:46:09.000Z","dependencies_parsed_at":"2023-01-15T03:38:58.548Z","dependency_job_id":null,"html_url":"https://github.com/ktsn/vue-size-provider","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktsn%2Fvue-size-provider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktsn%2Fvue-size-provider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktsn%2Fvue-size-provider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ktsn%2Fvue-size-provider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ktsn","download_url":"https://codeload.github.com/ktsn/vue-size-provider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248574133,"owners_count":21126955,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","declarative","resize","scoped-slot","size","vue"],"created_at":"2024-11-25T20:19:59.923Z","updated_at":"2025-04-12T13:37:27.613Z","avatar_url":"https://github.com/ktsn.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-size-provider\n\nDeclarative element size observer and provider.\n\n## Motivation\n\nSometimes you may want to animate an element height when its content is changed. In that case, you need to directly read height value from DOM because Virtual DOM cannot acquire element size. Since it is low-level manipulation, the code would become messier.\n\nvue-size-provider solves this problem by hiding low-level code with abstract helper components - `\u003cSizeProvider\u003e` and `\u003cSizeObserver\u003e`. The following gif is an example to show how vue-size-provider works:\n\n![Simple demo of vue-size-provider](vue-size-provider.gif)\n\n## Install\n\nInstall it via npm:\n\n```sh\n$ npm install vue-size-provider\n```\n\nThen, notify Vue to use it:\n\n```js\nimport Vue from 'vue'\nimport VueSizeProvider from 'vue-size-provider'\n\nVue.use(VueSizeProvider)\n```\n\nOr you can directly use the components:\n\n```vue\n\u003cscript\u003e\nimport { SizeProvider, SizeObserver } from 'vue-size-provider'\n\nexport default {\n  components: {\n    SizeProvider,\n    SizeObserver\n  }\n}\n\u003c/script\u003e\n```\n\n## Usage\n\nFirst, wrap elements that you would like to observe their size by `\u003cSizeObserver\u003e`.\n\n```vue\n\u003ctemplate\u003e\n  \u003c!-- observe content size --\u003e\n  \u003cSizeObserver\u003e\n\n    \u003c!-- arbitrary contents that you want to observe their size --\u003e\n\n  \u003c/SizeObserver\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { SizeProvider, SizeObserver } from 'vue-size-provider'\n\nexport default {\n  components: {\n    SizeProvider,\n    SizeObserver\n  }\n}\n\u003c/script\u003e\n```\n\nThen, wrap them by `\u003cSizeProvider\u003e` and any element that you want to animate its size when the contents size is changed.\n\n```vue\n\u003ctemplate\u003e\n  \u003c!-- provide observed content size via scoped slot --\u003e\n  \u003cSizeProvider v-slot=\"{ width, height }\"\u003e\n    \u003cdiv class=\"wrapper\" :style=\"{ height: height + 'px' }\"\u003e\n\n      \u003c!-- observe content size --\u003e\n      \u003cSizeObserver\u003e\n\n        \u003c!-- arbitrary contents that you want to observe their size --\u003e\n\n      \u003c/SizeObserver\u003e\n\n    \u003c/div\u003e\n  \u003c/SizeProvider\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { SizeProvider, SizeObserver } from 'vue-size-provider'\n\nexport default {\n  components: {\n    SizeProvider,\n    SizeObserver\n  }\n}\n\u003c/script\u003e\n```\n\nFinally, you need to write some animation code. In this example, we simply use CSS transition:\n\n```vue\n\u003ctemplate\u003e\n  \u003c!-- provide observed content size via scoped slot --\u003e\n  \u003cSizeProvider v-slot=\"{ width, height }\"\u003e\n    \u003cdiv class=\"wrapper\" :style=\"{ height: height + 'px' }\"\u003e\n\n      \u003c!-- observe content size --\u003e\n      \u003cSizeObserver\u003e\n\n        \u003c!-- arbitrary contents that you want to observe their size --\u003e\n\n      \u003c/SizeObserver\u003e\n\n    \u003c/div\u003e\n  \u003c/SizeProvider\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { SizeProvider, SizeObserver } from 'vue-size-provider'\n\nexport default {\n  components: {\n    SizeProvider,\n    SizeObserver\n  }\n}\n\u003c/script\u003e\n\n\u003cstyle scoped\u003e\n.wrapper {\n  box-sizing: content-box;\n  border: 1px solid #000;\n  \n  /* animate content height smoothly */\n  transition: height 300ms ease-out;\n}\n\u003c/style\u003e\n```\n\nNote that you may want to specify `box-sizing: content-box;` to the animating element because the provided `width` and `height` are content size of the observed element. i.e. They do not include padding and border size.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fktsn%2Fvue-size-provider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fktsn%2Fvue-size-provider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fktsn%2Fvue-size-provider/lists"}