Draggable and auto resize action sheet (modal sheet)

[Sovai]

What problem does this feature solve?

The current action sheet is cool, but not being able to drag it feels like a missed opportunity. Wouldn't it be awesome to have a bottom sheet that we can pull up or down as needed? This could either be a new component or use the existing action sheet.

Requested Features:

Draggable: Users should be able to drag the sheet up or down to open or close it, enhancing interaction.
Breakpoints: The bottom sheet should have configurable breakpoints to define its expanded, collapsed, and intermediate states.
Programmatic Control: Provide methods to programmatically open or close the bottom sheet, allowing developers to control its behavior based on application logic.
Confirmation on Close: Implement an optional confirmation dialog before closing the bottom sheet, preventing accidental dismissals.
Responsive Resize: The bottom sheet should automatically adjust its size when the content height changes, ensuring a seamless user experience.
Scrollable Content: Allow the content within the bottom sheet to be scrollable, accommodating varying amounts of information.

I have to a custom version of ionic bottom sheet for my current project which is suck to install ionic for just to use the bottom sheet component. here's the link https://ionicframework.com/docs/api/modal#sheet-modal

What does the proposed API look like?

<vant-sheet 
    :loading="false" 
    :break-point="[0,1,2]" 
    title="bottom sheet" 
    :backdrop="true" 
    :promptDismiss="true">

    <template #header"{close}">
        <div class="flex justify-between">
            <div>title</div>
            <div @click="close()">x</div>
        </div>
    </template>
    body..
    <template #footer"{close}">
        <div class="w-full">
            button
        </div>
    </template>

</vant-sheet>

[chenjiahan]

Breakpoints: The bottom sheet should have configurable breakpoints to define its expanded, collapsed, and intermediate states.

Vant provides the FloatingPanel component, which can be used to support this.

Programmatic Control: Provide methods to programmatically open or close the bottom sheet, allowing developers to control its behavior based on application logic.

Why not just update the v-model:show state?

Confirmation on Close: Implement an optional confirmation dialog before closing the bottom sheet, preventing accidental dismissals.

ActionSheet provides a before-close prop so that you can invoke a dialog before closing.

Responsive Resize: The bottom sheet should automatically adjust its size when the content height changes, ensuring a seamless user experience.
Scrollable Content: Allow the content within the bottom sheet to be scrollable, accommodating varying amounts of information.

I think ActionSheet component already supports these two features.