mirror of https://github.com/nocodb/nocodb
128 lines
2.3 KiB
128 lines
2.3 KiB
<script lang="ts" setup> |
|
const props = withDefaults( |
|
defineProps<{ |
|
visible: boolean |
|
width?: string | number |
|
size?: 'small' | 'medium' | 'large' |
|
destroyOnClose?: boolean |
|
maskClosable?: boolean |
|
showSeparator?: boolean |
|
wrapClassName?: string |
|
closable?: boolean |
|
}>(), |
|
{ |
|
size: 'medium', |
|
destroyOnClose: true, |
|
maskClosable: true, |
|
showSeparator: true, |
|
wrapClassName: '', |
|
closable: false, |
|
}, |
|
) |
|
|
|
const emits = defineEmits(['update:visible']) |
|
|
|
const { width: propWidth, destroyOnClose, wrapClassName: _wrapClassName, showSeparator } = props |
|
|
|
const { maskClosable } = toRefs(props) |
|
|
|
const { isMobileMode } = useGlobal() |
|
|
|
const width = computed(() => { |
|
if (isMobileMode.value) { |
|
return '95vw' |
|
} |
|
|
|
if (propWidth) { |
|
return propWidth |
|
} |
|
|
|
if (props.size === 'small') { |
|
return '28rem' |
|
} |
|
|
|
if (props.size === 'medium') { |
|
return '40rem' |
|
} |
|
|
|
if (props.size === 'large') { |
|
return '80rem' |
|
} |
|
|
|
return 'max(30vw, 600px)' |
|
}) |
|
|
|
const height = computed(() => { |
|
if (isMobileMode.value) { |
|
return '95vh' |
|
} |
|
|
|
if (props.size === 'small') { |
|
return 'auto' |
|
} |
|
|
|
if (props.size === 'medium') { |
|
return '26.5' |
|
} |
|
|
|
if (props.size === 'large') { |
|
return '80vh' |
|
} |
|
|
|
return 'auto' |
|
}) |
|
|
|
const newWrapClassName = computed(() => { |
|
let className = 'nc-modal-wrapper' |
|
if (_wrapClassName) { |
|
className += ` ${_wrapClassName}` |
|
} |
|
return className |
|
}) |
|
|
|
const visible = useVModel(props, 'visible', emits) |
|
|
|
const slots = useSlots() |
|
</script> |
|
|
|
<template> |
|
<a-modal |
|
v-model:visible="visible" |
|
:class="{ active: visible }" |
|
:width="width" |
|
:centered="true" |
|
:closable="closable" |
|
:wrap-class-name="newWrapClassName" |
|
:footer="null" |
|
:mask-closable="maskClosable" |
|
:destroy-on-close="destroyOnClose" |
|
@keydown.esc="visible = false" |
|
> |
|
<div |
|
class="flex flex-col nc-modal p-6 h-full" |
|
:style="{ |
|
maxHeight: height, |
|
}" |
|
> |
|
<div |
|
v-if="slots.header" |
|
:class="{ |
|
'border-b-1 border-gray-200': showSeparator, |
|
}" |
|
class="flex pb-2 mb-2 nc-modal-header text-lg font-medium" |
|
> |
|
<slot name="header" /> |
|
</div> |
|
|
|
<slot /> |
|
</div> |
|
</a-modal> |
|
</template> |
|
|
|
<style lang="scss"> |
|
.nc-modal-wrapper { |
|
.ant-modal-content { |
|
@apply !p-0; |
|
} |
|
} |
|
</style>
|
|
|