|
|
@ -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)" |
|
|
|