Browse Source

refactor/gui-v2-added-checkbox

pull/2966/head
Muhammed Mustafa 2 years ago
parent
commit
2f2e0644e6
  1. 140
      packages/nc-gui-v2/components/cell/Checkbox.vue

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

@ -1,17 +1,38 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, 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 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
} }
const { modelValue: value } = defineProps<Props>() interface Emits {
const emit = defineEmits(['update:modelValue']) (event: 'update:modelValue', model: boolean | undefined | number): void
}
const props = defineProps<Props>()
const emits = defineEmits<Emits>()
const vModel = $(useVModel(props, 'modelValue', emits))
const column = inject(ColumnInj) const column = inject(ColumnInj)
const isForm = inject(IsFormInj) const isForm = inject(IsFormInj)
const checkboxMeta = computed(() => { const checkboxMeta = $computed(() => {
return { return {
icon: { icon: {
checked: 'mdi-check-circle-outline', checked: 'mdi-check-circle-outline',
@ -22,70 +43,59 @@ const checkboxMeta = computed(() => {
} }
}) })
const localState = computed({ const icon = (type: string) => {
get: () => value, switch (type) {
set: (val) => emit('update:modelValue', val), case 'mdi-check-bold':
}) return MdiCheckBold
case 'mdi-crop-square':
// const checkedIcon = computed(() => { return MdiCropSquare
// return defineAsyncComponent( ()=>import('~icons/material-symbols/'+checkboxMeta?.value?.icon?.checked)) case 'mdi-check-circle-outline':
// }); return MdiCheckCircleOutline
// const uncheckedIcon = computed(() => { case 'mdi-checkbox-blank-circle-outline':
// return defineAsyncComponent(()=>import('~icons/material-symbols/'+checkboxMeta?.value?.icon?.unchecked)) return MdiCheckboxBlankCircleOutline
// }); case 'mdi-star':
return MdiStar
/* export default { case 'mdi-star-outline':
name: 'BooleanCell', return MdiStarOutline
props: { case 'mdi-heart':
column: Object, return MdiHeart
value: [String, Number, Boolean], case 'mdi-heart-outline':
isForm: Boolean, return MdiHeartOutline
readOnly: Boolean, case 'mdi-moon-full':
}, return MdiMoonFull
computed: { case 'mdi-moon-new':
checkedIcon() { return MdiMoonNew
return (this.checkboxMeta && this.checkboxMeta.icon && this.checkboxMeta.icon.checked) || 'mdi-check-bold' case 'mdi-thumb-up':
}, return MdiThumbUp
uncheckedIcon() { case 'mdi-thumb-up-outline':
return (this.checkboxMeta && this.checkboxMeta.icon && this.checkboxMeta.icon.unchecked) || 'mdi-crop-square' return MdiThumbUpOutline
}, case 'mdi-flag':
localState: { return MdiFlag
get() { case 'mdi-flag-outline':
return this.value return MdiFlagOutline
}, }
set(val) {
this.$emit('input', val)
},
},
parentListeners() {
const $listeners = {}
return $listeners
},
checkboxMeta() {
return {
icon: {
checked: 'mdi-check-circle-outline',
unchecked: 'mdi-checkbox-blank-circle-outline',
},
color: 'primary',
...(this.column && this.column.meta ? this.column.meta : {}),
} }
},
},
methods: {
toggle() {
this.localState = !this.localState
},
},
} */
</script> </script>
<template> <template>
<div class="d-flex align-center" :class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !localState }"> <div class="flex" :class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !vModel }">
<!-- <span :is="localState ? checkedIcon : uncheckedIcon" small :color="checkboxMeta.color" @click="toggle"> --> <div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel }" @click="vModel = !vModel">
<!-- {{ localState ? checkedIcon : uncheckedIcon }} --> <component
<!-- </span> --> :is="icon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)"
:style="{
<input v-model="localState" type="checkbox" /> color: checkboxMeta.color,
}"
/>
</div>
</div> </div>
</template> </template>
<style scoped lang="scss">
.nc-cell-hover-show {
opacity: 0;
transition: 0.3s opacity;
&:hover {
opacity: 0.7;
}
}
</style>

Loading…
Cancel
Save