{"_id":"@buubux/vue-bottom-sheet","_rev":"2-2efc3ce5df9d919b995420e2b2899ec9","name":"@buubux/vue-bottom-sheet","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@buubux/vue-bottom-sheet","version":"1.0.0","keywords":["vue","vuejs","component","bottom-sheet"],"author":{"name":"vaban-ru"},"license":"MIT","_id":"@buubux/vue-bottom-sheet@1.0.0","maintainers":[{"name":"buubux","email":"buubux@gmail.com"}],"homepage":"https://github.com/vaban-ru/vue-bottom-sheet#readme","bugs":{"url":"https://github.com/vaban-ru/vue-bottom-sheet/issues"},"dist":{"shasum":"e451cb3015d91b23e587351753b71059d1001001","tarball":"https://registry.npmjs.org/@buubux/vue-bottom-sheet/-/vue-bottom-sheet-1.0.0.tgz","fileCount":2,"integrity":"sha512-1AywGwkYKAZAock5DNhRs4gLaXkMvfSXGqppHWkmoH6c5lrup/oKeo9C5Ik4qGQJHeSmiTm1o1jIKXhyeBI41w==","signatures":[{"sig":"MEYCIQCZHvIcyo37nenk3kS/982hgPCBWCmdK5y6qgXiOg68VgIhAKEbYll+8CeuyLAo3peVVKFh5PEziCj0cwquiLLNBik2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6474},"main":"dist/vue-bottom-sheet.umd.js","types":"./dist/VueBottomSheet.d.ts","module":"dist/vue-bottom-sheet.es.js","exports":{".":{"import":"./dist/vue-bottom-sheet.es.js","require":"./dist/vue-bottom-sheet.umd.js"},"./dist/style.css":{"import":"./dist/style.css","require":"./dist/style.css"}},"gitHead":"9c4534397bdb155c7bbc6f855984ab8b7d356f32","private":false,"scripts":{"dev":"vite --config vite-demo.config.ts serve --host 0.0.0.0","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","deploy":"rimraf dist && vite build && npm publish --access=public","format":"prettier --write src/","build-lib":"rimraf dist &&  vite build","build-demo":"rimraf dist &&  vite build --config vite-demo.config.ts"},"_npmUser":{"name":"buubux","email":"buubux@gmail.com"},"repository":{"url":"git+https://github.com/vaban-ru/vue-bottom-sheet.git","type":"git"},"_npmVersion":"10.2.0","description":"![Example](https://bs.vaban.ru/logo.jpg)","directories":{},"_nodeVersion":"21.1.0","dependencies":{"hammerjs":"^2.0.8"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.3.4","sass":"^1.64.1","vite":"^4.4.6","eslint":"^8.45.0","rimraf":"^5.0.1","vue-tsc":"^1.8.6","prettier":"^3.0.0","typescript":"~5.1.6","@types/node":"^18.17.0","npm-run-all":"^4.1.5","@vue/tsconfig":"^0.4.0","vite-plugin-dts":"^3.4.0","@tsconfig/node18":"^18.2.0","vue3-colorpicker":"^2.1.6","eslint-plugin-vue":"^9.15.1","@vitejs/plugin-vue":"^4.2.3","@rushstack/eslint-patch":"^1.3.2","@vue/eslint-config-prettier":"^8.0.0","@vue/eslint-config-typescript":"^11.0.3"},"_npmOperationalInternal":{"tmp":"tmp/vue-bottom-sheet_1.0.0_1732796082534_0.6285267024544687","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@buubux/vue-bottom-sheet","version":"1.0.1","keywords":["vue","vuejs","component","bottom-sheet"],"author":{"name":"buubux"},"license":"MIT","_id":"@buubux/vue-bottom-sheet@1.0.1","maintainers":[{"name":"buubux","email":"buubux@gmail.com"}],"homepage":"https://github.com/BuuBux/vue-bottom-sheet#readme","bugs":{"url":"https://github.com/BuuBux/vue-bottom-sheet/issues"},"dist":{"shasum":"6d11c1f9566410c5690602fb223dca4138e3a361","tarball":"https://registry.npmjs.org/@buubux/vue-bottom-sheet/-/vue-bottom-sheet-1.0.1.tgz","fileCount":9,"integrity":"sha512-9q9bO0UpqCEAdt3lzhSyaXvoVU6T9e9GDnacdakR3KLxO3Nria1EcM2om4J1a7zPnf6hY/WiGCCrrjnE8VP9Hw==","signatures":[{"sig":"MEUCIAiK1OWR4JhsSY1NEmVxbJEh3dA+2ka6nVe3QTJDxRgAAiEAx7Zo3ZZl/7733F2UaGZ/4JNNcj98P3XvTW/hkUN8xg4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24708},"main":"dist/vue-bottom-sheet.umd.js","types":"./dist/VueBottomSheet.d.ts","module":"dist/vue-bottom-sheet.es.js","exports":{".":{"import":"./dist/vue-bottom-sheet.es.js","require":"./dist/vue-bottom-sheet.umd.js"},"./dist/style.css":{"import":"./dist/style.css","require":"./dist/style.css"}},"gitHead":"78d508e11dc02d3522cb853e5b135373e913a9c1","private":false,"scripts":{"dev":"vite --config vite-demo.config.ts serve --host 0.0.0.0","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","format":"prettier --write src/","build-lib":"rimraf dist && vite build","build-demo":"rimraf dist && vite build --config vite-demo.config.ts","lib-deploy":"rimraf dist && vite build && npm publish --access=public"},"_npmUser":{"name":"buubux","email":"buubux@gmail.com"},"repository":{"url":"git+https://github.com/BuuBux/vue-bottom-sheet.git","type":"git"},"_npmVersion":"10.2.0","description":"A nice clean and touch-friendly bottom sheet component based on [Vue.js](https://vuejs.org/) and [hammer.js](https://hammerjs.github.io/) for Vue 3","directories":{},"_nodeVersion":"21.1.0","dependencies":{"hammerjs":"^2.0.8"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.3.4","sass":"^1.64.1","vite":"^4.4.6","eslint":"^8.45.0","rimraf":"^5.0.1","vue-tsc":"^1.8.6","prettier":"^3.0.0","typescript":"~5.1.6","@types/node":"^18.17.0","npm-run-all":"^4.1.5","@vue/tsconfig":"^0.4.0","vite-plugin-dts":"^3.4.0","@tsconfig/node18":"^18.2.0","vue3-colorpicker":"^2.1.6","eslint-plugin-vue":"^9.15.1","@vitejs/plugin-vue":"^4.2.3","@rushstack/eslint-patch":"^1.3.2","@vue/eslint-config-prettier":"^8.0.0","@vue/eslint-config-typescript":"^11.0.3"},"_npmOperationalInternal":{"tmp":"tmp/vue-bottom-sheet_1.0.1_1732797012283_0.47132692996911185","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@buubux/vue-bottom-sheet","version":"1.0.2","private":false,"scripts":{"dev":"vite --config vite-demo.config.ts serve --host 0.0.0.0","build-lib":"rimraf dist && vite build","build-demo":"rimraf dist && vite build --config vite-demo.config.ts","lib-deploy":"rimraf dist && vite build && npm publish --access=public","lint":"eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore","format":"prettier --write src/"},"dependencies":{"hammerjs":"^2.0.8"},"devDependencies":{"@rushstack/eslint-patch":"^1.3.2","@tsconfig/node18":"^18.2.0","@types/node":"^18.17.0","@vitejs/plugin-vue":"^4.2.3","@vue/eslint-config-prettier":"^8.0.0","@vue/eslint-config-typescript":"^11.0.3","@vue/tsconfig":"^0.4.0","eslint":"^8.45.0","eslint-plugin-vue":"^9.15.1","npm-run-all":"^4.1.5","prettier":"^3.0.0","rimraf":"^5.0.1","sass":"^1.64.1","typescript":"~5.1.6","vite":"^4.4.6","vite-plugin-dts":"^3.4.0","vue":"^3.3.4","vue-tsc":"^1.8.6","vue3-colorpicker":"^2.1.6"},"main":"dist/vue-bottom-sheet.umd.js","module":"dist/vue-bottom-sheet.es.js","types":"./dist/VueBottomSheet.d.ts","exports":{".":{"import":"./dist/vue-bottom-sheet.es.js","require":"./dist/vue-bottom-sheet.umd.js"},"./dist/style.css":{"import":"./dist/style.css","require":"./dist/style.css"}},"repository":{"type":"git","url":"git+https://github.com/BuuBux/vue-bottom-sheet.git"},"keywords":["vue","vuejs","component","bottom-sheet"],"author":{"name":"buubux"},"license":"MIT","bugs":{"url":"https://github.com/BuuBux/vue-bottom-sheet/issues"},"homepage":"https://github.com/BuuBux/vue-bottom-sheet#readme","_id":"@buubux/vue-bottom-sheet@1.0.2","gitHead":"4d382cc0492551425f5501c16cf8de3cf047d308","description":"A nice clean and touch-friendly bottom sheet component based on [Vue.js](https://vuejs.org/) and [hammer.js](https://hammerjs.github.io/) for Vue 3","_nodeVersion":"21.1.0","_npmVersion":"10.2.0","dist":{"integrity":"sha512-P3AiQxMBStOyJH5MUQp2o/pzmWW+bcpe8h38+KwvAYkDPPDlwqoTzGqgy8eyNex32/hudXkrlRrtxyR/GckmIw==","shasum":"0acf60aff96b61f15bb556c786ed3e18f12b603a","tarball":"https://registry.npmjs.org/@buubux/vue-bottom-sheet/-/vue-bottom-sheet-1.0.2.tgz","fileCount":9,"unpackedSize":24708,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1q6m+0sNYgu2F1HSWaZEhnL5JjCfUHg21KfH1GsO5OAIhALDSVSm+W/twveMxd9gQGtERphEKnzw1tYk9fpP097Jx"}]},"_npmUser":{"name":"buubux","email":"buubux@gmail.com"},"directories":{},"maintainers":[{"name":"buubux","email":"buubux@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-bottom-sheet_1.0.2_1732797657865_0.18326519013234055"},"_hasShrinkwrap":false}},"time":{"created":"2024-11-28T12:14:42.426Z","modified":"2024-11-28T12:40:58.199Z","1.0.0":"2024-11-28T12:14:42.691Z","1.0.1":"2024-11-28T12:30:12.474Z","1.0.2":"2024-11-28T12:40:58.028Z"},"bugs":{"url":"https://github.com/BuuBux/vue-bottom-sheet/issues"},"author":{"name":"buubux"},"license":"MIT","homepage":"https://github.com/BuuBux/vue-bottom-sheet#readme","keywords":["vue","vuejs","component","bottom-sheet"],"repository":{"type":"git","url":"git+https://github.com/BuuBux/vue-bottom-sheet.git"},"description":"A nice clean and touch-friendly bottom sheet component based on [Vue.js](https://vuejs.org/) and [hammer.js](https://hammerjs.github.io/) for Vue 3","maintainers":[{"name":"buubux","email":"buubux@gmail.com"}],"readme":"# Vue Bottom Sheet - Forked from [vaban-ru/vue-bottom-sheet](https://github.com/vaban-ru/vue-bottom-sheet)\n\nA nice clean and touch-friendly bottom sheet component based on [Vue.js](https://vuejs.org/) and [hammer.js](https://hammerjs.github.io/) for Vue 3\n\n## Installation\n\n### NPM\n\n```\nnpm install @buubux/vue-bottom-sheet\n```\n\n### Yarn\n\n```\nyarn add @buubux/vue-bottom-sheet\n```\n\n### PNPM\n\n```\npnpm add @buubux/vue-bottom-sheet\n```\n\n## Usage\n\n```vue\n<template>\n  <vue-bottom-sheet ref=\"myBottomSheet\">\n    <h1>Lorem Ipsum</h1>\n    <h2>What is Lorem Ipsum?</h2>\n    <p>\n      <strong>Lorem Ipsum</strong> is simply dummy text\n    </p>\n  </vue-bottom-sheet>\n</template>\n\n<script setup>\nimport VueBottomSheet from \"@webzlodimir/vue-bottom-sheet\";\nimport  \"@webzlodimir/vue-bottom-sheet/dist/style.css\";\nimport { ref } from \"vue\";\n\nconst myBottomSheet = ref(null)\n\nconst open = () => {\n  myBottomSheet.value.open();\n}\n\nconst close = () => {\n  myBottomSheet.value.close();\n}\n</script>\n```\n\n## Usage `setup` + TS\n\n```vue\n<template>\n  <vue-bottom-sheet ref=\"myBottomSheet\">\n    <h1>Lorem Ipsum</h1>\n    <h2>What is Lorem Ipsum?</h2>\n    <p>\n      <strong>Lorem Ipsum</strong> is simply dummy text\n    </p>\n  </vue-bottom-sheet>\n</template>\n\n<script setup lang=\"ts\">\nimport VueBottomSheet from \"@webzlodimir/vue-bottom-sheet\";\nimport  \"@webzlodimir/vue-bottom-sheet/dist/style.css\";\nimport { ref } from \"vue\";\n\nconst myBottomSheet = ref<InstanceType<typeof VueBottomSheet>>()\n\nconst open = () => {\n  myBottomSheet.value.open();\n}\n\nconst close = () => {\n  myBottomSheet.value.close();\n}\n</script>\n```\n\n## Usage in Nuxt 3\n\nFor Nuxt 3, just wrap component in `<client-only>`\n\n```vue\n<template>\n  <client-only>\n    <vue-bottom-sheet ref=\"myBottomSheet\">\n      <h1>Lorem Ipsum</h1>\n      <h2>What is Lorem Ipsum?</h2>\n      <p>\n        <strong>Lorem Ipsum</strong> is simply dummy text\n      </p>\n    </vue-bottom-sheet>\n  </client-only>\n</template>\n```\n\n## Props\n\n| Prop                | Type    | Description                                                                           | Example                        | Defaults  |\n|---------------------|---------|---------------------------------------------------------------------------------------|--------------------------------|-----------|\n| max-width           | Number  | Set max-width of component card in px                                                 | `:max-width=\"640\"`             | 640       |\n| max-height          | Number  | Sets the maximum height of the window, if not set it takes the height of the content  | `:max-height=\"90\"`             | -         |\n| can-swipe           | Boolean | Enable or disable swipe to close                                                      | `:can-swipe=\"false\"`           | true      |\n| overlay             | Boolean | Enable overlay                                                                        | `:overlay=\"false\"`             | true      |\n| overlay-color       | String  | Set overlay color with opacity                                                        | `overlay-color=\"#0000004D\"`    | #0000004D |\n| overlay-click-close | Boolean | Close window on overlay click                                                         | `:overlay-click-close=\"false\"` | true      |\n| transition-duration | Number  | Transition animation duration                                                         | `:transition-duration=\"0.5\"`   | 0.5       |\n\n## Events\n\n| Event         | Description                               | Example               |\n|---------------|-------------------------------------------|-----------------------|\n| opened        | Fire when card component is opened        | @opened=\"\"            |\n| closed        | Fire when card component is closed        | @closed=\"\"            |\n| dragging-up   | Fire while card component dragging up     | @dragging-up=\"\"       |\n| dragging-down | Fire while card component dragging down   | @dragging-down=\"\"     |\n\n## Slots\n\nYou can use this named slots:\n\n```vue\n<template>\n  <vue-bottom-sheet ref=\"myBottomSheet\">\n    <template #header>\n      <h1>Lorem Ipsum</h1>\n    </template>\n    <template #default>\n      <h2>What is Lorem Ipsum?</h2>\n    </template>\n    <template #footer>\n      <p>\n        <strong>Lorem Ipsum</strong> is simply dummy text\n      </p>\n    </template>\n  </vue-bottom-sheet>\n</template>\n```\n","readmeFilename":"README.MD"}