Browse Source

fix: checkbox alignment

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

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

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

Loading…
Cancel
Save