<template>
  <tr class="mc-datatable__row-expandable">
    <td :colspan="getColspan">
      <div class="mc-datatable__row-inner">
        <!-- @slot Use this slot to insert content inside the expand row -->
        <slot />
      </div>
    </td>
  </tr>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({ name: 'MDataTableRowExpand' });
</script>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  /**
   * Defines the number of DataTable headers
   */
  headers: {
    type: Number,
    required: true,
  },
  /**
   * Defines whether this is an "expandable" row
   */
  expandable: {
    type: Boolean,
    default: false,
  },
  /**
   * Defines whether this is a table with a "selectable" column
   */
  selectable: {
    type: Boolean,
    default: false,
  },
});

/** Local State: computed */
const getColspan = computed(() => {
  return props.headers + Number(props.selectable) + Number(props.expandable);
});
</script>

<style lang="scss" scoped>
@import 'settings-tools/all-settings';

.mc-datatable {
  &__row {
    &-inner {
      background-color: $color-datatable-subtable-background;
    }
  }
}
</style>
