vaban-ru/vue-bottom-sheet

🔥 A nice clean and touch-friendly bottom sheet component based on Vue.js and Hammer.js for Vue 3

Vue Bottom Sheet

A nice clean and touch-friendly bottom sheet component based on Vue.js and hammer.js for Vue 3

• Vue 2 Version
• 🎬 Demo

Installation

NPM

npm install @webzlodimir/vue-bottom-sheet

Yarn

yarn add @webzlodimir/vue-bottom-sheet

Usage

<template>
  <vue-bottom-sheet ref="myBottomSheet">
    <h1>Lorem Ipsum</h1>
    <h2>What is Lorem Ipsum?</h2>
    <p>
      <strong>Lorem Ipsum</strong> is simply dummy text
    </p>
  </vue-bottom-sheet>
</template>

<script setup>
import VueBottomSheet from "@webzlodimir/vue-bottom-sheet";
import  "@webzlodimir/vue-bottom-sheet/dist/style.css";
import { ref } from "vue";

const myBottomSheet = ref(null)

const open = () => {
  myBottomSheet.value.open();
}

const close = () => {
  myBottomSheet.value.close();
}
</script>

Usage setup + TS

<template>
  <vue-bottom-sheet ref="myBottomSheet">
    <h1>Lorem Ipsum</h1>
    <h2>What is Lorem Ipsum?</h2>
    <p>
      <strong>Lorem Ipsum</strong> is simply dummy text
    </p>
  </vue-bottom-sheet>
</template>

<script setup lang="ts">
import VueBottomSheet from "@webzlodimir/vue-bottom-sheet";
import  "@webzlodimir/vue-bottom-sheet/dist/style.css";
import { ref } from "vue";

const myBottomSheet = ref<InstanceType<typeof VueBottomSheet>>()

const open = () => {
  myBottomSheet.value.open();
}

const close = () => {
  myBottomSheet.value.close();
}
</script>

Usage in Nuxt 3

For Nuxt 3, just wrap component in <client-only>

<template>
  <client-only>
    <vue-bottom-sheet ref="myBottomSheet">
      <h1>Lorem Ipsum</h1>
      <h2>What is Lorem Ipsum?</h2>
      <p>
        <strong>Lorem Ipsum</strong> is simply dummy text
      </p>
    </vue-bottom-sheet>
  </client-only>
</template>

Props

Prop	Type	Description	Example	Defaults
max-width	Number	Set max-width of component card in px	:max-width="640"	640
max-height	Number	Sets the maximum height of the window, if not set it takes the height of the content	:max-height="90"	-
can-swipe	Boolean	Enable or disable swipe to close	:can-swipe="false"	true
overlay	Boolean	Enable overlay	:overlay="false"	true
overlay-color	String	Set overlay color with opacity	overlay-color="#0000004D"	#0000004D
overlay-click-close	Boolean	Close window on overlay click	:overlay-click-close="false"	true
transition-duration	Number	Transition animation duration	:transition-duration="0.5"	0.5

Events

Event	Description	Example
opened	Fire when card component is opened	@opened=""
closed	Fire when card component is closed	@closed=""
dragging-up	Fire while card component dragging up	@dragging-up=""
dragging-down	Fire while card component dragging down	@dragging-down=""

Slots

You can use this named slots:

<template>
  <vue-bottom-sheet ref="myBottomSheet">
    <template #header>
      <h1>Lorem Ipsum</h1>
    </template>
    <template #default>
      <h2>What is Lorem Ipsum?</h2>
    </template>
    <template #footer>
      <p>
        <strong>Lorem Ipsum</strong> is simply dummy text
      </p>
    </template>
  </vue-bottom-sheet>
</template>

vue-bottom-sheet's Issues

Vue 3 update

First of all, i really love this package, it's awesome!
But now i'm using Vue 3 in my company. So, could we have an update to use this package in Vue 3?

Modifying the Sheet background color

Hi 👋
Is there support for styling the bg color of the actual sheet itself?
Thanks

Демо

Написать и выложить демонстрационную версию компонента с возможностью переключать настройки.

window is not defined

<script setup>
import VueBottomSheet from "@webzlodimir/vue-bottom-sheet"

This triggers on Nuxt 3 after installation

Prop for closing

Right now we can only choose to open / close the bottom sheet entirely. It will be nice if there's a way for me to pass a prop for close=false so that it remains at the initial height that i set (#39)

Событие закрытия

Привет!
Спасибо вам за прекрасный компонент!
Есть одна сложность с его использованием, нет возможности следить за закрытием модального окна (будь то свайп или клик вне окна).
Как вариант, можно повесить event, что-нибудь вроде @closed="method"

janky when dragin the sheet up and down

When dragging the sheet down and then up again, the sheet freezes in the down position and then jumps back up as soon you start dragging down again.

Vue3 support ?

Does it support the Vue3?

Prop for bottom sheet styling / color

Right now it is default to white and has no shadow, but i would like to customize the bottom sheet so that it still looks good on white backgrounds without an overlay.

Here's an example without the prop at the moment on light mode.

It would look better if i can set it to a another color or add a shadow to the top border

Prop for initial height

Right now we have a prop for maxHeight, but it will be nice if this component has props which are similar to native bottom sheet component or a simple prop for setting initial height in addition to the max height.

For example, i would like the bottom sheet to start off short first at 90px, then users can drag it to a max height of 80% of the viewport height.

Initial height

Max height

Анимация появления

Сделать возможность выбирать из предустановленных значений различные варианты анимаций появления

Dragging behaviour

iPhone XS
iOS 14.4
Chrome OS

Expected Behaviour:
Opening the bottom sheet, I expect to be able to drag its vertical position with my finger.

Actutal Behaviour
However, I can only drag the sheet downwards. Dragging it upwards stops the dragging, probably because the dragging event is not fired outside the bottom sheet?

Possible Improvement
Fire the dragging event on the surrounding container aswell.

Full screen

how to full screen mode on panup, and scrollable content?

TypeError: Cannot read properties of undefined (reading 'clientHeight')

I got blocker error from this library, it said as follow

TypeError: Cannot read properties of undefined (reading 'clientHeight')

My code is simple, there is no complex properties that i used

<vue-bottom-sheet ref="myBottomSheet">
    <div class="form p-4 text-left">
        <h3 class="text-sm font-semibold">No. {{ detailLegend.position }} | {{ detailLegend.arrow }} : {{ detailLegend.clue }}</h3>
        <input v-model="myAnswer" type="text" class="input" placeholder="Ketik jawaban">
        <button @click="submitAnswer" class="button is-success">Kirim</button>
        <button class="button" @click="myBottomSheet.close()">Tutup</button>
    </div>
</vue-bottom-sheet>

setup(props, { emit }){

        const myBottomSheet = ref(null)

    return {
     myBottomSheet
   }
}

Please help me!

Документация

Перевести README на английский, а также сделать там ссылку на русскую версию README

Minimum height limit to not close the component completely

Is it possible to make the bottom sheet component completely non-closable? For example through a single height property? The `max-height' property displays the component without exceeding a certain limit (size). In parallel, does it also have a minimum height property?

I just want to make this component visible at least slightly when users swipe down in my app. Or is there another way to do it?

Thanks in advance for the answer!

Migrate from hammerjs

Checking out the hammerjs repo issues, seems that the library is no longer maintained (hammerjs/hammer.js#1278) and there's some security vulnerabilities because of how old the library is. A comment in that issue suggests migrating to a more maintained lib like https://github.com/taye/interact.js

Can I import this component via <script> tag?

How can I use this VueJS component via direct <script> include for my existing project?

PS. I’m totally new to VueJS.

Bottom sheet flickers when scrolling inside iOS/safari

When scrolling inside bottom sheet flickers on iOS/safari

bottom_sheet_flickers.MP4

hint for component

It would be great if they added the onScroll event to the component to be able to perform an infinity scroll like tiktok, instagram and many others have

First time opening

It seems that for the first time, instead of going up, only the opacity changes

Example is wrong

The correct import while using TypeScript is

import VueBottomSheet from "@webzlodimir/vue-bottom-sheet/dist";

instead of

import VueBottomSheet from "@webzlodimir/vue-bottom-sheet";

Please fix package.json to use let typescript detect the types declaration file

Thanks in advance