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

export default defineComponent({
  name: 'MDataTableColumn',
  render: () => null,
});
</script>

<script setup>
defineProps({
  /**
   * Header cell label
   */
  label: {
    type: String,
    default: '',
  },
  /**
   * Refers to a key, present in the items object, whose content will be displayed in the cells of the column
   */
  value: {
    type: String,
    default: '',
  },
  /**
   * Allows you to define the type of content that will be inserted in the cell
   * @values 'button', 'checkbox', 'expand', 'icon', 'input', 'number', 'multiline', 'options', 'picture',
   */
  type: {
    type: String,
    default: undefined,
    validator: (value) =>
      [
        'button',
        'checkbox',
        'expand',
        'icon',
        'input',
        'number',
        'multiline',
        'options',
        'picture',
      ].includes(value),
  },
  /**
   * Visually defines the column as sortable by displaying the sort button
   */
  sortable: {
    type: Boolean,
    default: false,
  },
  /**
   * Visually defines the default state of the sort button
   * @value 'ASC', 'DESC'
   */
  sortDirectionDefault: {
    type: String,
    default: null,
    validator: (value) => ['ASC', 'DESC'].includes(value),
  },
  /**
   * Adds an identical CSS class to all the cells in a column
   */
  class: {
    type: String,
    default: '',
  },
  /**
   * Passes additional attributes to the header cell. This must be an object that will be dynamically linked to the component.
   * @see https://vuejs.org/guide/essentials/template-syntax.html#dynamically-binding-multiple-attributes
   */
  additionnalProps: {
    type: Object,
    default: null,
  },
  e2eSelector: {
    type: String,
    default: '',
  },
});

defineEmits(['update:sortDirection']);
</script>
