<template>
  <tr class="mc-datatable__row" :class="classObject">
    <!-- @slot Use this slot to replace the entire content of a `<tr>` row in the table body -->
    <slot />
  </tr>
</template>

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

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

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

const props = defineProps({
  /**
   * Defines whether the row is clickable or not
   */
  clickable: {
    type: Boolean,
    default: false,
  },
  /**
   * Defines whether this is an "expandable" row
   */
  expandable: {
    type: Boolean,
    default: false,
  },
  /**
   * Defines the "expanded" state of the row
   */
  expanded: {
    type: Boolean,
    default: false,
  },
   /**
   * Defines the "selected" state of the row
   */
  selected: {
    type: Boolean,
    default: false
  }
});

const classObject = computed(() => {
  return [
    {
      'mc-datatable__row--clickable': props.clickable,
      'mc-datatable__row-parent': props.expandable,
      'mc-datatable__row-parent--expanded': props.expanded,
      'selected': props.selected
    },
  ];
});
</script>

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

.mc-datatable {
  &__row {
    &--clickable {
      cursor: pointer;
    }

    &:focus  {
      background-color: $color-datatable-cell-background-selected;
      outline: none;
    }
  }
}
</style>
