├── .npmrc ├── env.d.ts ├── public └── favicon.ico ├── src ├── index.ts ├── main.ts ├── utils │ └── index.ts ├── global.d.ts ├── App.vue └── components │ └── BottomSheet.vue ├── .vscode └── extensions.json ├── .prettierrc.json ├── index.html ├── .eslintrc.cjs ├── .gitignore ├── tsconfig.app.json ├── vite-demo.config.ts ├── tsconfig.node.json ├── tsconfig.json ├── LICENSE ├── vite.config.ts ├── package.json └── README.md /.npmrc: -------------------------------------------------------------------------------- 1 | @nosadev:registry=https://npm.pkg.github.com -------------------------------------------------------------------------------- /env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Nosa-Drexx/vue-bottom-sheet/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import BottomSheet from './components/BottomSheet.vue' 2 | 3 | export { BottomSheet } 4 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | const app = createApp(App) 5 | 6 | app.mount('#app') 7 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "Vue.volar", 4 | "dbaeumer.vscode-eslint", 5 | "esbenp.prettier-vscode" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/prettierrc", 3 | "semi": false, 4 | "tabWidth": 2, 5 | "singleQuote": true, 6 | "printWidth": 100, 7 | "trailingComma": "none" 8 | } -------------------------------------------------------------------------------- /src/utils/index.ts: -------------------------------------------------------------------------------- 1 | export function isMouseEvent(event: MouseEvent | TouchEvent): event is MouseEvent { 2 | return (event as MouseEvent).clientX !== undefined 3 | } 4 | 5 | export function isTouchEvent(event: MouseEvent | TouchEvent): event is TouchEvent { 6 | return (event as TouchEvent).touches !== undefined 7 | } 8 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | require('@rushstack/eslint-patch/modern-module-resolution') 3 | 4 | module.exports = { 5 | root: true, 6 | 'extends': [ 7 | 'plugin:vue/vue3-essential', 8 | 'eslint:recommended', 9 | '@vue/eslint-config-typescript', 10 | '@vue/eslint-config-prettier/skip-formatting' 11 | ], 12 | parserOptions: { 13 | ecmaVersion: 'latest' 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '@/global' { 2 | export type DataType = { 3 | hidePopUp: boolean 4 | startX: number 5 | startY: number 6 | endX: number 7 | endY: number 8 | isSwiping: boolean 9 | currentHeight: number 10 | maxHeightInPx: number 11 | } 12 | 13 | export type DraggingPayload = { 14 | event: MouseEvent | TouchEvent 15 | contentHeight: number 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | coverage 15 | *.local 16 | 17 | /cypress/videos/ 18 | /cypress/screenshots/ 19 | 20 | # Editor directories and files 21 | .vscode/* 22 | !.vscode/extensions.json 23 | .idea 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw? 29 | 30 | *.tsbuildinfo 31 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.dom.json", 3 | "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], 4 | "exclude": ["src/**/__tests__/*", "src/App.vue", "src/main.ts"], 5 | "compilerOptions": { 6 | "composite": true, 7 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 8 | 9 | "baseUrl": ".", 10 | "paths": { 11 | "@/*": ["./src/*"] 12 | }, 13 | "outDir": "dist", 14 | "declaration": true 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /vite-demo.config.ts: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const { defineConfig } = require('vite') 3 | import vue from '@vitejs/plugin-vue' 4 | 5 | module.exports = defineConfig(() => { 6 | const rootPath = path.resolve(process.cwd()) 7 | const srcPath = `${rootPath}/src` 8 | return { 9 | server: { 10 | host: 'localhost', 11 | port: '3002' 12 | }, 13 | resolve: { 14 | alias: { 15 | '~': rootPath, 16 | '@': srcPath 17 | } 18 | }, 19 | plugins: [vue()] // to process SFC 20 | } 21 | }) 22 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/node20/tsconfig.json", 3 | "include": [ 4 | "vite.config.*", 5 | "vitest.config.*", 6 | "cypress.config.*", 7 | "nightwatch.conf.*", 8 | "playwright.config.*" 9 | ], 10 | "compilerOptions": { 11 | "composite": true, 12 | // "noEmit": true, 13 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 14 | 15 | "module": "ESNext", 16 | "moduleResolution": "Bundler", 17 | "types": ["node"], 18 | "outDir": "dist", 19 | "declaration": true, 20 | "baseUrl": ".", 21 | "paths": { 22 | "@/*": ["./src/*"] 23 | } 24 | }, 25 | "exclude": ["src/App.vue", "src/main.ts"] 26 | } 27 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 27 | 28 | 33 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { 5 | "path": "./tsconfig.node.json" 6 | } 7 | // { 8 | // "path": "./tsconfig.app.json" 9 | // } 10 | ], 11 | "compilerOptions": { 12 | "target": "ESNext", 13 | "useDefineForClassFields": true, 14 | "module": "ESNext", 15 | "moduleResolution": "Node", 16 | "strict": true, 17 | "jsx": "preserve", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "esModuleInterop": true, 21 | "lib": ["ESNext", "DOM"], 22 | "skipLibCheck": true, 23 | // "noEmit": true, 24 | "allowJs": true, 25 | "allowSyntheticDefaultImports": true, 26 | "forceConsistentCasingInFileNames": true, 27 | "noFallthroughCasesInSwitch": true, 28 | "declaration": true, 29 | "outDir": "dist", 30 | "declarationDir": "./dist", 31 | "baseUrl": ".", 32 | "paths": { 33 | "@/*": ["./src/*"] 34 | } 35 | }, 36 | "exclude": ["src/App.vue", "src/main.ts"] 37 | // "include": ["src/global.d.ts"] 38 | } 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Egharevba Nosakhare Evan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { fileURLToPath, URL } from 'node:url' 2 | 3 | import { defineConfig } from 'vite' 4 | import vue from '@vitejs/plugin-vue' 5 | import { resolve } from 'node:path' 6 | import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js' 7 | import dts from 'vite-plugin-dts' 8 | 9 | // https://vitejs.dev/config/ 10 | export default defineConfig({ 11 | plugins: [vue(), cssInjectedByJsPlugin(), dts({ outDir: resolve(__dirname, 'dist/types') })], 12 | resolve: { 13 | alias: { 14 | '@': fileURLToPath(new URL('./src', import.meta.url)) 15 | } 16 | }, 17 | build: { 18 | lib: { 19 | // src/indext.ts is where we have exported the component(s) 20 | entry: resolve(__dirname, 'src/index.ts'), 21 | name: 'BottomSheet', 22 | fileName: 'vue-bottom-sheet.js' 23 | }, 24 | rollupOptions: { 25 | // make sure to externalize deps that shouldn't be bundled 26 | // into your library 27 | external: ['vue'], 28 | output: { 29 | // Provide global variables to use in the UMD build 30 | // for externalized deps 31 | globals: { 32 | vue: 'Vue' 33 | } 34 | } 35 | } 36 | } 37 | }) 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nosadev/vue-bottom-sheet", 3 | "version": "1.0.11", 4 | "private": false, 5 | "type": "module", 6 | "description": "A Swipeable Bottom Sheet library for and vue3", 7 | "files": [ 8 | "README.md", 9 | "dist/*", 10 | "LICENSE" 11 | ], 12 | "license": "MIT", 13 | "keywords": [ 14 | "vue", 15 | "vue3", 16 | "vue.js", 17 | "modal", 18 | "nuxt", 19 | "bottom-sheet", 20 | "pwa", 21 | "dialog", 22 | "swipe", 23 | "component" 24 | ], 25 | "main": "./dist/vue-bottom-sheet.cjs", 26 | "module": "./dist/vue-bottom-sheet.js", 27 | "author": "nosa-egharevba (https://github.com/Nosa-Drexx/)", 28 | "repository": { 29 | "name": "@nosadev/vue-bottom-sheet", 30 | "type": "git", 31 | "url": "https://github.com/Nosa-Drexx/vue-bottom-sheet.git" 32 | }, 33 | "homepage": "https://github.com/Nosa-Drexx/vue-bottom-sheet#readme", 34 | "bugs": { 35 | "url": "https://github.com/Nosa-Drexx/vue-bottom-sheet/issues", 36 | "email": "nosaegharevba01@gmail.com" 37 | }, 38 | "exports": { 39 | ".": { 40 | "import": "./dist/vue-bottom-sheet.js", 41 | "require": "./dist/vue-bottom-sheet.umd.cjs", 42 | "types": "./dist/types/index.d.ts" 43 | }, 44 | "./style.css": "./dist/style.css" 45 | }, 46 | "types": "./dist/types/index.d.ts", 47 | "scripts": { 48 | "dev": "vite --config vite-demo.config.ts serve --host 0.0.0.0", 49 | "build": "vite build && vue-tsc --emitDeclarationOnly", 50 | "preview": "vite preview", 51 | "build-only": "vite build", 52 | "deploy": "& vite build && npm publish --access=public", 53 | "types": "vue-tsc ", 54 | "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", 55 | "format": "prettier --write src/" 56 | }, 57 | "dependencies": { 58 | "vue": "^3.4.21" 59 | }, 60 | "devDependencies": { 61 | "@rushstack/eslint-patch": "^1.8.0", 62 | "@tsconfig/node20": "^20.1.4", 63 | "@types/node": "^20.12.5", 64 | "@vitejs/plugin-vue": "^5.0.4", 65 | "@vue/eslint-config-prettier": "^9.0.0", 66 | "@vue/eslint-config-typescript": "^13.0.0", 67 | "@vue/tsconfig": "^0.5.1", 68 | "eslint": "^8.57.0", 69 | "eslint-plugin-vue": "^9.23.0", 70 | "npm-run-all2": "^6.1.2", 71 | "prettier": "^3.2.5", 72 | "typescript": "~5.4.0", 73 | "vite": "^5.2.8", 74 | "vite-plugin-css-injected-by-js": "^3.5.1", 75 | "vite-plugin-dts": "^3.9.1", 76 | "vue-tsc": "^2.0.11" 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue Bottom Sheet typescript 2 | 3 | Preview 4 | 5 | ![Example](https://github.com/Nosa-Drexx/vue-bottom-sheet/assets/96873980/a3605f4d-7805-45b5-a033-2ea8abbf9512) 6 | 7 | ## Fork from [@nosadev/vue-bottom-sheet](https://www.npmjs.com/package/@nosadev/vue-bottom-sheet) 8 | 9 | ![Size](https://img.shields.io/bundlephobia/minzip/@nosadev/vue-bottom-sheet) 10 | ![Downloads](https://img.shields.io/npm/dt/@nosadev/vue-bottom-sheet) 11 | ![Version](https://img.shields.io/npm/v/@nosadev/vue-bottom-sheet) 12 | 13 | A nice clean and touch-friendly bottom sheet component based on [Vue.js](https://vuejs.org/) and [Typescript](https://www.typescriptlang.org/) for Vue 3 14 | 15 | - [Live Demo](https://nosadev.netlify.app/) 16 | 17 | ## Installation 18 | 19 | ### NPM 20 | 21 | ``` 22 | npm install @nosadev/vue-bottom-sheet 23 | ``` 24 | 25 | ### Yarn 26 | 27 | ``` 28 | yarn add @nosadev/vue-bottom-sheet 29 | ``` 30 | 31 | ## Usage `setup` + TS 32 | 33 | ```vue 34 | 47 | 48 | 57 | 58 | ``` 59 | 60 | ## Usage `Options API` + TS 61 | 62 | ```vue 63 | 82 | 83 | 89 | ``` 90 | 91 | ## Usage in Nuxt 3 92 | 93 | For Nuxt 3, wrap component in `` 94 | 95 | ```vue 96 | 105 | ``` 106 | 107 | ## Props 108 | 109 | | Prop | Type | Description | Example | Defaults | 110 | | -------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- | 111 | | showSheet | Boolean | Set to true or flase to show or hide the bottom sheet | `:showSheet="()=> showSheet = true"` | false | 112 | | id | String | Sets custom `data-id` property to customize styles on all layers of the bottom sheet - overide in global style e.g `[data-id='nosa-content'] {background: #f9dde0 !important;}` | `:id="nosa"` | - | 113 | | maxHeight | Number | Sets the maximum height in `percentage` of the component card with a `maximum` value of `100` and a `minimum` value of `10` | `:max-height="90"` | 80 | 114 | | maxWidth | Number | Sets the maximum width of the component card in `pixels` | `:max-width="80"` | 576 | 115 | | onClose | Function | A Fuction that runs when a supposed close action is triggered (like swapping down or clicking the overlay) close | `:onClose="()=> showSheet = false"` | ()=>{} | 116 | | useDragEffect | Boolean | Enables drag / swap effet | `:useDragEffect="false"` | true | 117 | | useOnlyHeaderForDrag | Boolean | Enables drag / swap effet only when user drags the header of the component card | `:useOnlyHeaderForDrag="true"` | false | 118 | | dragSpeed | Number | Sets the Transition animation duartion with a `maximum` value of `10` and a `minimum` value of `1` | `dragSpeed="5"` | 3 | 119 | | background | String | Sets component card background | `:background="#f9dde0"` | 'white' | 120 | | overlayBackground | String | Sets overlay background | `:overlayBackground="transparent"` | 'rgba(0, 0, 0, 0.5)' | 121 | | topRadius | Number | Sets component card top radius value in `pixels` | `:topRadius="0"` | '20' | 122 | | headerPadding | Number | Sets padding for header of component card in `pixels` | `:headerPadding="16"` | 32 | 123 | | onSwipeDown | Function | A Function that runs after Swipe down of component card is complete | `:onSwipeDown="()=> console.log('siwped down')"` | ()=> {} | 124 | | closeWithOverlay | Boolean | Allows close of bottom sheet with overlay or not | `:closeWithOverlay="false"` | true | 125 | 126 | ## Events 127 | 128 | | Event | Description | Example | Returns | 129 | | ------------ | ---------------------------------------------------- | ---------------- | ---------------------------------------------------------- | 130 | | dragging | Fire when card component is been dragged | @dragging="" | `{event: MouseEvent or TouchEvent, contentHeight: number}` | 131 | | release-drag | Fire when card component is release after drag event | @release-drag="" | `{event: MouseEvent or TouchEvent, contentHeight: number}` | 132 | | opened | Fire while card component is opened | @opened="" | `true ` | 133 | | closed | Fire while card component is closed | @closed="" | `true` | 134 | 135 | ## Slots 136 | 137 | You can use this named slots: 138 | 139 | ```vue 140 | 150 | ``` 151 | -------------------------------------------------------------------------------- /src/components/BottomSheet.vue: -------------------------------------------------------------------------------- 1 | 203 | 204 | 275 | 276 | 355 | --------------------------------------------------------------------------------