Browse Source

refactor(gui-v2): move to getMdiIcon

pull/2979/head
Wing-Kam Wong 2 years ago
parent
commit
deab4f62dc
  1. 50
      packages/nc-gui-v2/components/cell/Checkbox.vue

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

@ -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,
}" }"

Loading…
Cancel
Save