draggable modal!

[aljabr]

Hi,

i did a simple way to support drag to close in css only solution,

I don't know if this can help!

Thank you.

 <DialogPanel
                  :class="
                    props.canDrag
                      ? 'overflow-x-auto overscroll-x-none'
                      : 'overflow-x-hidden'
                  "
                  class="no-scrollbar h-full transition-all ltr-grid overflow-y-none pointer-events-auto relative flex w-screen snap-x snap-mandatory overflow-y-hidden lg:max-w-screen-lg ltr:flex-row-reverse"
                >
                  <div
                    id="draggable"
                    ref="rightPanelRoot"
                    class="absolute select-none z-30 h-full w-10 ltr:left-0 rtl:right-0"
                  ></div>

                  <main
                    ref="rightPanelContainer"
                    id="rightPanelContainer"
                    class="rtl-grid flex h-full w-full shrink-0 snap-center flex-col overflow-y-auto overscroll-y-contain overscroll-x-none bg-white shadow-xl will-change-scroll"
                  >
                    <div
                      id="rightPanelScroll"
                      class="keyboard-scroll pointer-events-auto h-full touch-pan-y overflow-y-auto scroll-smooth"
                    >
                      <slot name="header">
                        <div class="sticky top-0 z-10 p-4 pt-7-safe">
                          <div class="flex items-start justify-between">
                            <DialogTitle
                              class="text-lg font-medium text-gray-900"
                            >
                              {{ props.title }}
                            </DialogTitle>
                            <div class="ml-3 flex h-7">
                              <button
                                type="button"
                                autofocus
                                class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:ring-0"
                                @click="close"
                              >
                                <span class="sr-only">Close panel</span>
                                <XMarkIcon class="h-6 w-6" aria-hidden="true" />
                              </button>
                            </div>
                          </div>
                        </div>
                      </slot>
                      <slot name="content" />
                    </div>
                  </main>
                  <div
                    class="flex w-full shrink-0 snap-center rtl:flex-row-reverse"
                    @click="props.canDrag ?? close()"
                  >
                    <div
                      ref="isVisible"
                      :class="!allowDrag ?? 'hidden'"
                      class="w-full"
                    ></div>
                    <div class="w-full"></div>
                  </div>
                </DialogPanel>

<script setup>
import {
  Dialog,
  DialogPanel,
  DialogTitle,
  TransitionChild,
  TransitionRoot,
} from '@headlessui/vue'
import { XMarkIcon } from '@heroicons/vue/24/outline/index.js'
import { ref, watchEffect } from 'vue'
import { useElementVisibility, useMousePressed } from '@vueuse/core'

const isVisible = ref(null)
const rightPanelRoot = ref(null)
const rightPanelContainer = ref(null)

import KeyboardScroll from '@/Components/KeyboardScroll.vue'
import { useAppSettingsStore } from '@/Stores/AppSettingsStore.js'
import Button from '@/Components/Button.vue'

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: 'title',
  },
  zIndex: {
    type: String,
    default: 'z-10',
  },
  scrollableContainerId: {
    type: String,
    default: 'main',
  },
  canDrag: {
    type: Boolean,
    default: true,
  },
})
let emit = defineEmits(['close'])
let allowDrag = false
let canClose = ref(false)

const close = () => {
  targetIsVisible.value = false
  canClose.value = false
  emit('close')
  setTimeout(() => {
    scrollToElementById('rightPanelContainer')
  }, 300)
}
const { pressed } = useMousePressed({ target: rightPanelRoot })
const targetIsVisible = useElementVisibility(isVisible)
const scrollToElementById = (id) => {
  const element = document.getElementById(id)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}
// Automatically manage side effects
watchEffect(() => {
  // Ensure we are tracking the visibility only if `show` and `canDrag` are true
  if (props.show && props.canDrag) {
    // Check if the modal should close
    useAppSettingsStore().scrollableElement = 'rightPanelContainer'
    if (!pressed.value && targetIsVisible.value && canClose) {
      canClose.value = false
      close()
    }
  }
})
</script>

    /* Hide scrollbar for Chrome, Safari and Opera */
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    /* Hide scrollbar for IE, Edge and Firefox */
    .no-scrollbar {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }