43 lines
1.2 KiB
Vue
43 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
colSpan: { type: Number, default: undefined },
|
|
colStart: { type: Number, default: undefined },
|
|
colEnd: { type: Number, default: undefined },
|
|
class: { type: String, default: '' },
|
|
})
|
|
|
|
const settingClass = computed(() => {
|
|
let cls = ' cell'
|
|
if (props.colSpan) {
|
|
cls += ' ' + [
|
|
'col-span-1', 'col-span-2', 'col-span-3', 'col-span-4', 'col-span-5',
|
|
'col-span-6', 'col-span-7', 'col-span-8', 'col-span-9', 'col-span-10',
|
|
][props.colSpan - 1]
|
|
}
|
|
if (props.colStart) {
|
|
cls += ' ' + [
|
|
'col-start-1', 'col-start-2', 'col-start-3', 'col-start-4', 'col-start-5',
|
|
'col-start-6', 'col-start-7', 'col-start-8', 'col-start-9', 'col-start-10',
|
|
][props.colStart - 1]
|
|
}
|
|
if (props.colEnd) {
|
|
cls += ' ' + [
|
|
'col-end-1', 'col-end-2', 'col-end-3', 'col-end-4', 'col-end-5',
|
|
'col-end-6', 'col-end-7', 'col-end-8', 'col-end-9', 'col-end-10',
|
|
][props.colEnd - 1]
|
|
}
|
|
if (props.class) {
|
|
cls += ' ' + props.class.trim()
|
|
}
|
|
return cls
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="`w-full${settingClass}`">
|
|
<slot />
|
|
</div>
|
|
</template>
|