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

Loading…
Cancel
Save