{"_id":"@alinsme/simplebar-vue3","_rev":"1-55428730d66e606435d8bfb52183eab9","name":"@alinsme/simplebar-vue3","dist-tags":{"latest":"0.2.3"},"versions":{"0.2.2":{"name":"@alinsme/simplebar-vue3","version":"0.2.2","main":"./dist/simplebar-vue3.umd.js","module":"./dist/simplebar-vue3.mjs","types":"./dist/types/lib.d.ts","unpkg":"dist/simplebar-vue3.iife.js","jsdelivr":"dist/simplebar-vue3.iife.js","exports":{".":{"require":"./dist/simplebar-vue3.umd.js","import":"./dist/simplebar-vue3.mjs"}},"repository":{"url":"git+https://github.com/alinme/simplebar-vue3.git","type":"git"},"bugs":{"url":"https://github.com/alinme/simplebar-vue3/issues"},"homepage":"https://github.com/alinme/simplebar-vue3#readme","keywords":["vue 3","simplebar"],"license":"MIT","scripts":{"dev":"vite","build":"vite build"},"devDependencies":{"@types/node":"^16.11.54","@types/prompts":"^2.0.14","@vitejs/plugin-vue":"^3.0.3","@vue/compiler-sfc":"^3.2.37","simplebar":"^5.3.9","simplebar-vue3":"file:./","ts-node":"^10.9.1","typescript":"~4.7.4","vite":"^3.0.9","vite-plugin-dts":"^1.4.1","vue":"^3.2.37","vue-tsc":"^0.38.9"},"peerDependencies":{"simplebar":"5.3.8","vue":"^3.2.37"},"_id":"@alinsme/simplebar-vue3@0.2.2","gitHead":"6673f854fe0f14792d0f84580d708c1b1813fdb5","description":"!!! Please use native [simplebar-vue](https://www.npmjs.com/package/simplebar-vue) library. This library is not maintained anymore.","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-w+xwaK0b+eRcGHN+O+61zNlBdNCBWrmHQrWCimGNScU9JnshfWg8XMpfJ6DwzPWnviNrN9mmgOKsBBwrFbT2+Q==","shasum":"3b105b48188b57022a4f8515312da442c35ebcc0","tarball":"https://registry.npmjs.org/@alinsme/simplebar-vue3/-/simplebar-vue3-0.2.2.tgz","fileCount":7,"unpackedSize":9497,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGMpmYByjBSyZ14mr/4yPDksu5xCZSA6uLVqhWNslm8gIhANJW7m6pMiYz6p8ggauneM3/Kl+dqGIXq3exm4hmGi9i"}]},"_npmUser":{"name":"alinsme","email":"alinmoraru980@gmail.com"},"directories":{},"maintainers":[{"name":"alinsme","email":"alinmoraru980@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/simplebar-vue3_0.2.2_1705442698379_0.4034885662581478"},"_hasShrinkwrap":false},"0.2.3":{"name":"@alinsme/simplebar-vue3","version":"0.2.3","main":"./dist/simplebar-vue3.umd.js","module":"./dist/simplebar-vue3.mjs","types":"./dist/types/lib.d.ts","unpkg":"dist/simplebar-vue3.iife.js","jsdelivr":"dist/simplebar-vue3.iife.js","exports":{".":{"require":"./dist/simplebar-vue3.umd.js","import":"./dist/simplebar-vue3.mjs"}},"repository":{"url":"git+https://github.com/alinme/simplebar-vue3.git","type":"git"},"bugs":{"url":"https://github.com/alinme/simplebar-vue3/issues"},"homepage":"https://github.com/alinme/simplebar-vue3#readme","keywords":["vue 3","simplebar"],"license":"MIT","scripts":{"dev":"vite","build":"vite build"},"devDependencies":{"@types/node":"^16.11.54","@types/prompts":"^2.0.14","@vitejs/plugin-vue":"^3.0.3","@vue/compiler-sfc":"^3.2.37","simplebar":"^5.3.9","simplebar-vue3":"file:./","ts-node":"^10.9.1","typescript":"~4.7.4","vite":"^3.0.9","vite-plugin-dts":"^1.4.1","vue":"^3.2.37","vue-tsc":"^0.38.9"},"peerDependencies":{"simplebar":"5.3.9","vue":"^3.2.37"},"_id":"@alinsme/simplebar-vue3@0.2.3","gitHead":"3a4fac89cf6f4f85cc11a610a9e995c7614d1777","description":"!!! Please use native [simplebar-vue](https://www.npmjs.com/package/simplebar-vue) library. This library is not maintained anymore.","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-OIneyIg/GGede9oPvzGSGbnmeNW6nUCCecV0Bws5z2nkpovqQIvn2F/2JKHZ6IzmRzUWZm3WSs2wKwE3tMssJA==","shasum":"9f2a5e97cf8a1d6800c1d9bffbf0859d7e488fd5","tarball":"https://registry.npmjs.org/@alinsme/simplebar-vue3/-/simplebar-vue3-0.2.3.tgz","fileCount":7,"unpackedSize":9497,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCc3/nqSp9HEF+/AbKT6N6kBFynWEZwjIGzgbXGpd/+MAIhAP2D5iT5zdBIB5bRvQsKPydkFxiwaSl3DpTqkhryXjF6"}]},"_npmUser":{"name":"alinsme","email":"alinmoraru980@gmail.com"},"directories":{},"maintainers":[{"name":"alinsme","email":"alinmoraru980@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/simplebar-vue3_0.2.3_1705443045476_0.013328499059707122"},"_hasShrinkwrap":false}},"time":{"created":"2024-01-16T22:04:58.269Z","0.2.2":"2024-01-16T22:04:58.560Z","modified":"2024-01-16T22:10:45.814Z","0.2.3":"2024-01-16T22:10:45.629Z"},"maintainers":[{"name":"alinsme","email":"alinmoraru980@gmail.com"}],"description":"!!! Please use native [simplebar-vue](https://www.npmjs.com/package/simplebar-vue) library. This library is not maintained anymore.","homepage":"https://github.com/alinme/simplebar-vue3#readme","keywords":["vue 3","simplebar"],"repository":{"url":"git+https://github.com/alinme/simplebar-vue3.git","type":"git"},"bugs":{"url":"https://github.com/alinme/simplebar-vue3/issues"},"license":"MIT","readme":"!!! Please use native [simplebar-vue](https://www.npmjs.com/package/simplebar-vue) library. This library is not maintained anymore.\r\n\r\n[![simplebar-vue3](https://img.shields.io/npm/v/simplebar-vue3)](https://npmjs.com/package/simplebar-vue3)\r\n\r\n### A Vue3 Wrapper for SimpleBar\r\n\r\n### Intallation\r\n\r\nFor npm and pnpm:\r\n\r\n```\r\n(npm or pnpm) install simplebar simplebar-vue3\r\n```\r\n\r\nFor yarn:\r\n\r\n```\r\nyarn add simplebar simplebar-vue3\r\n```\r\n\r\n### Usage\r\n\r\nYou need to import simplebar stylesheet in your `main.(js|ts)` file for scrollbar to look normal and work. <br>\r\n\r\n##### main.(js|ts)\r\n\r\n```ts\r\nimport 'simplebar/dist/simplebar.min.css';\r\n\r\nimport { createApp } from 'vue';\r\nimport App from './App.vue';\r\ncreateApp(App).mount('#app');\r\n```\r\n\r\nTo use it in `.vue` files just import the component and use.\r\n\r\n```html\r\n<template>\r\n   <SimpleBar style=\"height: 500px; overflow-y: auto\"> ... Content Goes here </SimpleBar>\r\n</template>\r\n\r\n<script setup>\r\n   import { SimpleBar } from 'simplebar-vue3';\r\n</script>\r\n<!-- FOR NORMAL SCRIPT -->\r\n<script>\r\n   import { SimpleBar } from 'simplebar-vue3';\r\n   import { defineComponent } from 'vue';\r\n\r\n   export default defineComponent({\r\n      components: { SimpleBar }\r\n   });\r\n</script>\r\n```\r\n\r\n### Accessing Simplebar Instance\r\n\r\n##### Via event;\r\n\r\nIf you want to access simplebar instance by event you can use `@created` event.\r\n\r\n```html\r\n<template>\r\n   <SimpleBar\r\n      @created=\"instance => {\r\n         simplebarInstance = instance;\r\n      }\"\r\n   >\r\n   </SimpleBar>\r\n</template>\r\n\r\n<!-- Typescript is optional -->\r\n<script setup lang=\"ts\">\r\n   import type { SimplebarInstanceRef } from 'simplebar-vue3';\r\n   import { SimpleBar } from 'simplebar-vue3';\r\n   import { ref } from 'vue';\r\n\r\n   const simplebarInstance = ref<SimplebarInstanceRef>(null);\r\n</script>\r\n```\r\n\r\n##### Via template ref;\r\n\r\nYou access simplebar instance ref\r\n\r\n```html\r\n<template>\r\n   <SimpleBar ref=\"simplebarInstance\"> </SimpleBar>\r\n   <!-- Or this behavior can be used but it will give type error probably -->\r\n   <SimpleBar :ref=\"(instance) => { simplebarInstance = instance }\"> </SimpleBar>\r\n</template>\r\n\r\n<!-- Typescript is optional -->\r\n<script setup lang=\"ts\">\r\n   import type { SimplebarInstanceRef } from 'simplebar-vue3';\r\n   import { SimpleBar } from 'simplebar-vue3';\r\n   import { ref } from 'vue';\r\n\r\n   const simplebarInstance = ref<SimplebarInstanceRef>(null);\r\n</script>\r\n```\r\n\r\n##### Via composable;\r\n\r\nIn **CHILD COMPONENTS** you can use `useSimplebar` composable to access simplebar instance as a **Ref**. <br>\r\n**NOTE:** If you try access to instance before parent `mounted` this composable will return `null`;\r\n\r\n##### parent.vue\r\n\r\n```html\r\n<SimpleBar>\r\n   <ChildComponent />\r\n</SimpleBar>\r\n```\r\n\r\n##### child.vue\r\n\r\n```html\r\n<!-- Typescript is optional -->\r\n<script lang=\"ts\">\r\n   import { useSimplebar } from 'simplebar-vue3';\r\n   import { onMounted } from 'vue';\r\n\r\n   const simplebar = useSimplebar();\r\n   onMounted(() => {\r\n      simplebar.value.recalculate();\r\n      simplebar.value.el.getBoundingClientRect();\r\n      // or more\r\n   });\r\n</script>\r\n```\r\n\r\n### Props\r\n\r\n```ts\r\nimport { Options } from 'simplebar';\r\n\r\ninterface SimpleBarProps {\r\n   /**\r\n    * @default {'div'}\r\n    */\r\n   tag?: string;\r\n   options?: Options;\r\n}\r\n```\r\n\r\n### TypeScript Support\r\n\r\nThis package has built-in typescript support for events and props it should work with `.tsx` files with no trouble.\r\n\r\nTo have types support in vue files we recommend you to use `Volar` plugin. <br>\r\n[Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) <br>\r\n[TypeScript Vue Plugin](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin)\r\n","readmeFilename":"README.md"}