<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="settingClass">
    <slot />
  </div>
</template>
