Browse Source

fix: checkbox alignment

pull/6323/head
DarkPhoenix2704 1 year ago
parent
commit
74a83cf39c
  1. 30
      packages/nc-gui/components/cell/Checkbox.vue

30
packages/nc-gui/components/cell/Checkbox.vue

@ -2,6 +2,7 @@
import {
ActiveCellInj,
ColumnInj,
EditColumnInj,
IsFormInj,
ReadonlyInj,
getMdiIcon,
@ -33,6 +34,8 @@ const column = inject(ColumnInj)
const isForm = inject(IsFormInj)
const isEditColumnMenu = inject(EditColumnInj, ref(false))
const readOnly = inject(ReadonlyInj)
const checkboxMeta = computed(() => {
@ -84,17 +87,22 @@ useSelectedCellKeyupListener(active, (e) => {
}"
@click="onClick(false, $event)"
>
<div class="p-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel, '!ml-[-8px]': readOnly }">
<Transition name="layout" mode="out-in" :duration="100">
<component
:is="getMdiIcon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)"
class="nc-checkbox"
:style="{
color: checkboxMeta.color,
}"
@click="onClick(true)"
/>
</Transition>
<div
class="items-center"
:class="{ '!ml-[-8px]': readOnly, 'w-full justify-start': isEditColumnMenu }"
@click="onClick(true)"
>
<div class="p-1" :class="{ 'bg-gray-100 rounded-full ': !vModel }">
<Transition name="layout" mode="out-in" :duration="100">
<component
:is="getMdiIcon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)"
class="nc-checkbox"
:style="{
color: checkboxMeta.color,
}"
/>
</Transition>
</div>
</div>
</div>
</template>

Loading…
Cancel
Save