kadiryazici / bottom-sheet-vue3

Bottom sheet component for Vue3.
https://kadiryazici.github.io/bottom-sheet-vue3/
MIT License
31 stars 6 forks source link

Disable move up #2

Closed hamonCordova closed 1 year ago

hamonCordova commented 1 year ago

Can we have a prop to disable move up?

kadiryazici commented 1 year ago

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

hamonCordova commented 1 year ago

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

kadiryazici commented 1 year ago

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

hamonCordova commented 1 year ago

I will be thankfull if you make this!!

kadiryazici commented 1 year ago

I started to rewrite whole library in https://github.com/kadiryazici/bottom-sheet-vue3/pull/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.

kadiryazici commented 1 year ago

@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.

hamonCordova commented 1 year ago

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