VberAdminPlusV3/UI/VAP_V3.VUE/src/components/table/partials/body/BodyTd.vue

<script setup lang="ts">
import { VbUtil } from "@@/vb-dom"
import symbolKeys from "@@@/table/symbol"
import configs from "@/core/config"
import type { Header } from "@@@/table/models"

const props = withDefaults(
	defineProps<{
		row: any
		column: Header
		index?: number
		rowspan?: string
		isTree?: boolean
		depth?: number
	}>(),
	{
		isTree: false,
		iconField: "name",
		leafField: "isLeaf",
		intervalLeft: 10,
		depth: 0
	}
)
const propsOpts = inject(symbolKeys.bodyTd, {
	isExpand: false,
	hasChildren: false,
	parentField: "parent_id",
	childrenField: "children",
	iconField: "name",
	leafField: "isLeaf",
	expandDepth: 0,
	intervalLeft: 10,
	isLazy: false
})
const tableBox = inject(symbolKeys.tableBox) as Ref<HTMLElement>
const row = toRef(props.row)
const isLeaf = computed(() => {
	return propsOpts.isLazy
		? toBoolean(row.value[propsOpts.leafField])
		: !(row.value[propsOpts.childrenField] && row.value[propsOpts.childrenField].length > 0)
})

const tooltip = computed(() => {
	if (typeof props.column.tooltip == "string") {
		return props.column.tooltip
	} else if (props.column.tooltip) {
		return "primary"
	}
	return undefined
})

const tdStyle = computed(() => {
	const style: any = {}
	if (props.column.align) {
		style.textAlign = props.column.align
	}
	if (props.isTree && props.column.field == propsOpts.iconField) {
		style.textAlign = "left"
	}
	return style
})

const tdClass = computed(() => {
	let classStr = ""
	if (props.column.tdClass) {
		classStr += props.column.tdClass
	}
	if (props.isTree && props.column.field == propsOpts.iconField) {
		classStr += " tree-icon"
	}
	return classStr
})
const onToggle = () => {
	if (!isLeaf.value) {
		VbUtil.EventHandlerUtil.trigger(tableBox.value, "vbtable.row.tree-toggle", row.value)
	}
}
function init() {
	//
}

onMounted(init)
</script>
<template>
	<td :style="tdStyle" :class="tdClass" :rowspan="rowspan" :name="`td-${column.field}`">
		<span
			v-if="isTree && column.field == propsOpts.iconField"
			@click="onToggle"
			class="me-2"
			:style="`margin-left: ${propsOpts.intervalLeft * props.depth}px!important`">
			<template v-if="propsOpts.hasChildren || (!isLeaf && propsOpts.isLazy)">
				<VbIcon
					v-if="propsOpts.isLazy ? false : propsOpts.isExpand"
					icon-name="minus-folder"
					icon-type="duotone"
					class="fs-2 text-primary icon"
					style="transform: translateY(3px)"></VbIcon>
				<VbIcon
					v-else
					icon-name="add-folder"
					icon-type="duotone"
					class="fs-2 text-primary icon"
					style="transform: translateY(3px)"></VbIcon>
			</template>
			<template v-else>
				<VbIcon
					icon-name="folder"
					icon-type="duotone"
					class="fs-2 text-primary"
					style="transform: translateY(3px)"></VbIcon>
			</template>
		</span>
		<template v-if="$slots[column.field]">
			<slot :name="`${column.field}`" :row="row"></slot>
		</template>
		<template v-else-if="column.field == configs.TABLE_INDEX_FIELD">
			{{ index }}
		</template>
		<template v-else-if="tooltip">
			<vb-tooltip
				:effect="tooltip"
				:content="row[column.field]"
				:auto-hide="true"
				:delay="500"></vb-tooltip>
		</template>
		<template v-else>
			{{ row[column.field] }}
		</template>
	</td>
</template>