Browse Source

fix/Added readonly mode to Checkbox

pull/3197/head
Muhammed Mustafa 2 years ago
parent
commit
82ed157d2b
  1. 11
      packages/nc-gui-v2/components/cell/Checkbox.vue

11
packages/nc-gui-v2/components/cell/Checkbox.vue

@ -1,6 +1,6 @@
<script setup lang="ts">
import { ColumnInj, IsFormInj, getMdiIcon, inject } from '#imports'
import { EditModeInj } from '~/context'
import { ReadonlyInj } from '~/context'
interface Props {
modelValue?: boolean | undefined | number
@ -20,7 +20,7 @@ const column = inject(ColumnInj)
const isForm = inject(IsFormInj)
const editEnabled = inject(EditModeInj)
const readOnly = inject(ReadonlyInj)
const checkboxMeta = $computed(() => {
return {
@ -34,14 +34,17 @@ const checkboxMeta = $computed(() => {
})
function onClick() {
if (editEnabled) {
if (!readOnly) {
vModel = !vModel
}
}
</script>
<template>
<div class="flex" :class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !vModel }">
<div
class="flex"
:class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !vModel && !readOnly, 'opacity-0': readOnly && !vModel }"
>
<div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel }" @click="onClick">
<component
:is="getMdiIcon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)"

Loading…
Cancel
Save