多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

95 lines
2.4 KiB

<script setup lang="ts">
import type { ColumnType } from 'nocodb-sdk'
import { computed } from 'vue'
const { modelValue: value } = defineProps<{ modelValue: any }>()
const emit = defineEmits(['update:modelValue'])
const column = inject<ColumnType & { meta?: any }>('column')
const isForm = inject<boolean>('isForm')
const checkboxMeta = computed(() => {
return {
icon: {
checked: 'mdi-check-circle-outline',
unchecked: 'mdi-checkbox-blank-circle-outline',
},
color: 'primary',
...(column?.meta || {}),
}
})
const localState = computed({
get() {
return value
},
set(val) {
emit('update:modelValue', val)
},
})
const toggle = () => {
localState.value = !localState.value
}
// const checkedIcon = computed(() => {
// return defineAsyncComponent( ()=>import('~icons/material-symbols/'+checkboxMeta?.value?.icon?.checked))
// });
// const uncheckedIcon = computed(() => {
// return defineAsyncComponent(()=>import('~icons/material-symbols/'+checkboxMeta?.value?.icon?.unchecked))
// });
/* export default {
name: 'BooleanCell',
props: {
column: Object,
value: [String, Number, Boolean],
isForm: Boolean,
readOnly: Boolean,
},
computed: {
checkedIcon() {
return (this.checkboxMeta && this.checkboxMeta.icon && this.checkboxMeta.icon.checked) || 'mdi-check-bold'
},
uncheckedIcon() {
return (this.checkboxMeta && this.checkboxMeta.icon && this.checkboxMeta.icon.unchecked) || 'mdi-crop-square'
},
localState: {
get() {
return this.value
},
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>
<template>
<div class="d-flex align-center" :class="{ 'justify-center': !isForm, 'nc-cell-hover-show': !localState }">
<!-- <span :is="localState ? checkedIcon : uncheckedIcon" small :color="checkboxMeta.color" @click="toggle"> -->
<!-- {{ localState ? checkedIcon : uncheckedIcon }} -->
<!-- </span> -->
<input v-model="localState" type="checkbox" />
</div>
</template>