<template>
  <!-- q-dialog qui se MAXIMISE sur téléphone (plein écran) et plafonne à 95vw ailleurs.
       Remplace les `style="width:NNNpx"` qui débordent sur mobile.
       Usage : <ResponsiveDialog v-model="open" :max-width="560"> …contenu… </ResponsiveDialog> -->
  <q-dialog v-bind="$attrs" :maximized="isPhone">
    <q-card v-if="card" class="rdlg-card column no-wrap" :style="cardStyle">
      <slot />
    </q-card>
    <slot v-else />
  </q-dialog>
</template>

<script setup>
import { computed } from 'vue'
import { useIsPhone } from 'src/composables/useMediaQuery'

defineOptions({ inheritAttrs: false })
const props = defineProps({
  card: { type: Boolean, default: true },          // enveloppe automatiquement dans un q-card
  maxWidth: { type: [String, Number], default: 560 },
})
const isPhone = useIsPhone()
const cardStyle = computed(() => {
  if (isPhone.value) return 'width:100%;max-width:100%;height:100%'
  const mw = typeof props.maxWidth === 'number' ? props.maxWidth + 'px' : props.maxWidth
  return `width:100%;max-width:min(95vw, ${mw})`
})
</script>

<style scoped>
.rdlg-card { max-height: 95vh; }
</style>
