kadiryazici/bottom-sheet-vue3

Disable move up

Closed this issue · 7 comments

Can we have a prop to disable move up?

Yes I can add it, also I am thinking to rewrite this library completely :)

Awesome! Because it's one of component that i most use in my current system, and we doesn't have a lot packages for bottom sheet in Vue 3/Nuxt3.
I think as a feature we could has a prop to disable move up and swipe on the content, moving down, close the bottom sheet, cause today it's oly works on the "header"/"picker" of the component

I am planning to make whole content swipeable (background, header, content etc.) but if the user is not scrolling the content.
Surely I can add prop to disable swiping.
I'm also trying some velocity stuff, if user swipes fast animation will be faster etc

I will be thankfull if you make this!!

I started to rewrite whole library in #3.

Rewritten version is using Element.animate (%96 supported) and <Transition> element, old one was using setTimeout 🤮.
In old one, move up was a fake div under the sheet but in this version height changes so content gets bigger, this will be nice on stops feature I am thinking to add.

When user swiped if it is close to a spot, sheet height will change to fit that spot.

Current idea (may change):

<Sheet
  spots={[
    {
      height: '400px'
    },
    {
      height: '600px'
    }
  ]}
/>

On mount, none of spots will be used.

Threshold

I was thinking to add velocity based threshold, the idea is if you set 200 as threshold it means that user should swipe at least 200 pixsels in 0.3 seconds or 400 pixels in 0.6 seconds or 600 pixels in 0.9 seconds or.........

Also will calculate negatively like 100 pixels in 0.15 seconds, 50 pixels in 0.075 seconds. I think 50 will be the default threshold.

@hamonCordova I released version 2.0.0, it is a major version so changed some props and added new props. Also default sheet behavior is changed.

I'm so happy, @kadiryazici, thank you for all. I really appreciate your time and efort. I will test it soon