mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
2.6 KiB
71 lines
2.6 KiB
<script lang="ts" setup> |
|
import { Panel, PanelPosition } from '@vue-flow/additional-components' |
|
import type { ERDConfig } from './utils' |
|
import { ref, useGlobal, useVModel } from '#imports' |
|
|
|
const props = defineProps<{ |
|
config: ERDConfig |
|
}>() |
|
|
|
const { includeM2M } = useGlobal() |
|
|
|
const config = useVModel(props, 'config') |
|
|
|
const showAdvancedOptions = ref(false) |
|
</script> |
|
|
|
<template> |
|
<Panel |
|
class="flex flex-col gap-y-1 bg-white border-1 rounded-lg border-gray-200 z-50 px-3 py-2 nc-erd-context-menu shadow-md" |
|
:position="PanelPosition.TopRight" |
|
> |
|
<div class="flex items-center gap-2"> |
|
<a-checkbox v-model:checked="config.showAllColumns" v-e="['c:erd:showAllColumns']" class="nc-erd-showColumns-checkbox" /> |
|
<span |
|
class="select-none nc-erd-config-option-label nc-erd-showColumns-label text-xs" |
|
@dblclick="showAdvancedOptions = true" |
|
> |
|
{{ $t('activity.erd.showColumns') }} |
|
</span> |
|
</div> |
|
|
|
<div class="flex items-center gap-2"> |
|
<a-checkbox |
|
v-model:checked="config.showPkAndFk" |
|
v-e="['c:erd:showPkAndFk']" |
|
class="nc-erd-showPkAndFk-checkbox" |
|
:class="[ |
|
`nc-erd-showPkAndFk-checkbox-${config.showAllColumns ? 'enabled' : 'disabled'}`, |
|
`nc-erd-showPkAndFk-checkbox-${config.showPkAndFk ? 'checked' : 'unchecked'}`, |
|
]" |
|
:disabled="!config.showAllColumns" |
|
/> |
|
<span class="select-none nc-erd-config-option-label">{{ $t('activity.erd.showPkAndFk') }}</span> |
|
</div> |
|
|
|
<div v-if="!config.singleTableMode" class="flex items-center gap-2"> |
|
<a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" class="nc-erd-showViews-checkbox" /> |
|
<span class="select-none nc-erd-config-option-label">{{ $t('activity.erd.showSqlViews') }}</span> |
|
</div> |
|
|
|
<div v-if="!config.singleTableMode && showAdvancedOptions && includeM2M" class="flex flex-row items-center"> |
|
<a-checkbox v-model:checked="config.showMMTables" v-e="['c:erd:showMMTables']" class="nc-erd-showMMTables-checkbox" /> |
|
<span class="ml-2 select-none nc-erd-config-option-label">{{ $t('activity.erd.showMMTables') }}</span> |
|
</div> |
|
|
|
<div v-if="showAdvancedOptions && includeM2M" class="flex items-center gap-2"> |
|
<a-checkbox |
|
v-model:checked="config.showJunctionTableNames" |
|
v-e="['c:erd:showJunctionTableNames']" |
|
class="nc-erd-showJunctionTableNames-checkbox" |
|
/> |
|
<span class="select-none nc-erd-config-option-label">{{ $t('activity.erd.showJunctionTableNames') }}</span> |
|
</div> |
|
</Panel> |
|
</template> |
|
|
|
<style lang="scss" scoped> |
|
.nc-erd-config-option-label { |
|
@apply text-xs; |
|
} |
|
</style>
|
|
|