|
|
@ -1,20 +1,7 @@ |
|
|
|
<script setup lang="ts"> |
|
|
|
<script setup lang="ts"> |
|
|
|
import { inject } from '#imports' |
|
|
|
import { inject } from '#imports' |
|
|
|
import { ColumnInj, IsFormInj } from '~/context' |
|
|
|
import { ColumnInj, IsFormInj } from '~/context' |
|
|
|
import MdiCheckBold from '~icons/mdi/check-bold' |
|
|
|
import { getMdiIcon } from '@/utils' |
|
|
|
import MdiCropSquare from '~icons/mdi/crop-square' |
|
|
|
|
|
|
|
import MdiCheckCircleOutline from '~icons/mdi/check-circle-outline' |
|
|
|
|
|
|
|
import MdiCheckboxBlankCircleOutline from '~icons/mdi/checkbox-blank-circle-outline' |
|
|
|
|
|
|
|
import MdiStar from '~icons/mdi/star' |
|
|
|
|
|
|
|
import MdiStarOutline from '~icons/mdi/star-outline' |
|
|
|
|
|
|
|
import MdiHeart from '~icons/mdi/heart' |
|
|
|
|
|
|
|
import MdiHeartOutline from '~icons/mdi/heart-outline' |
|
|
|
|
|
|
|
import MdiMoonFull from '~icons/mdi/moon-full' |
|
|
|
|
|
|
|
import MdiMoonNew from '~icons/mdi/moon-new' |
|
|
|
|
|
|
|
import MdiThumbUp from '~icons/mdi/thumb-up' |
|
|
|
|
|
|
|
import MdiThumbUpOutline from '~icons/mdi/thumb-up-outline' |
|
|
|
|
|
|
|
import MdiFlag from '~icons/mdi/flag' |
|
|
|
|
|
|
|
import MdiFlagOutline from '~icons/mdi/flag-outline' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
interface Props { |
|
|
|
interface Props { |
|
|
|
modelValue?: boolean | undefined | number |
|
|
|
modelValue?: boolean | undefined | number |
|
|
@ -42,46 +29,13 @@ const checkboxMeta = $computed(() => { |
|
|
|
...(column?.meta || {}), |
|
|
|
...(column?.meta || {}), |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const icon = (type: string) => { |
|
|
|
|
|
|
|
switch (type) { |
|
|
|
|
|
|
|
case 'mdi-check-bold': |
|
|
|
|
|
|
|
return MdiCheckBold |
|
|
|
|
|
|
|
case 'mdi-crop-square': |
|
|
|
|
|
|
|
return MdiCropSquare |
|
|
|
|
|
|
|
case 'mdi-check-circle-outline': |
|
|
|
|
|
|
|
return MdiCheckCircleOutline |
|
|
|
|
|
|
|
case 'mdi-checkbox-blank-circle-outline': |
|
|
|
|
|
|
|
return MdiCheckboxBlankCircleOutline |
|
|
|
|
|
|
|
case 'mdi-star': |
|
|
|
|
|
|
|
return MdiStar |
|
|
|
|
|
|
|
case 'mdi-star-outline': |
|
|
|
|
|
|
|
return MdiStarOutline |
|
|
|
|
|
|
|
case 'mdi-heart': |
|
|
|
|
|
|
|
return MdiHeart |
|
|
|
|
|
|
|
case 'mdi-heart-outline': |
|
|
|
|
|
|
|
return MdiHeartOutline |
|
|
|
|
|
|
|
case 'mdi-moon-full': |
|
|
|
|
|
|
|
return MdiMoonFull |
|
|
|
|
|
|
|
case 'mdi-moon-new': |
|
|
|
|
|
|
|
return MdiMoonNew |
|
|
|
|
|
|
|
case 'mdi-thumb-up': |
|
|
|
|
|
|
|
return MdiThumbUp |
|
|
|
|
|
|
|
case 'mdi-thumb-up-outline': |
|
|
|
|
|
|
|
return MdiThumbUpOutline |
|
|
|
|
|
|
|
case 'mdi-flag': |
|
|
|
|
|
|
|
return MdiFlag |
|
|
|
|
|
|
|
case 'mdi-flag-outline': |
|
|
|
|
|
|
|
return MdiFlagOutline |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
</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 }"> |
|
|
|
<div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel }" @click="vModel = !vModel"> |
|
|
|
<div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel }" @click="vModel = !vModel"> |
|
|
|
<component |
|
|
|
<component |
|
|
|
:is="icon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)" |
|
|
|
:is="getMdiIcon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)" |
|
|
|
:style="{ |
|
|
|
:style="{ |
|
|
|
color: checkboxMeta.color, |
|
|
|
color: checkboxMeta.color, |
|
|
|
}" |
|
|
|
}" |
|
|
|