vuetify/lib/labs/VDataTable/VDataTable.mjs

Vue Material Component Framework

import { createVNode as _createVNode, resolveDirective as _resolveDirective, Fragment as _Fragment } from "vue";
// Styles
import "./VDataTable.css";

// Components
import { VTable } from "../../components/VTable/index.mjs";
import { VDataTableHeaders } from "./VDataTableHeaders.mjs";
import { VDataTableRows } from "./VDataTableRows.mjs";
import { VDataTableFooter } from "./VDataTableFooter.mjs"; // Composables
import { useProxiedModel } from "../../composables/proxiedModel.mjs";
import { makeDataTableItemProps, useDataTableItems } from "./composables/items.mjs";
import { createHeaders, makeDataTableHeaderProps } from "./composables/headers.mjs";
import { createSort, makeDataTableSortProps, useSortedItems } from "./composables/sort.mjs";
import { createGroupBy, makeDataTableGroupProps, useGroupedItems } from "./composables/group.mjs";
import { createPagination, makeDataTablePaginateProps, usePaginatedItems } from "./composables/paginate.mjs";
import { createSelection, makeDataTableSelectProps } from "./composables/select.mjs";
import { createExpanded, makeDataTableExpandProps } from "./composables/expand.mjs";
import { useOptions } from "./composables/options.mjs";
import { provideDefaults } from "../../composables/defaults.mjs"; // Utilities
import { computed, toRef } from 'vue';
import { genericComponent, propsFactory, useRender } from "../../util/index.mjs";
import { makeFilterProps, useFilter } from "../../composables/filter.mjs"; // Types
export const makeVDataTableProps = propsFactory({
  ...makeDataTableItemProps(),
  ...makeDataTableHeaderProps(),
  hideNoData: Boolean,
  noDataText: {
    type: String,
    default: '$vuetify.noDataText'
  },
  height: [String, Number],
  width: [String, Number],
  fixedHeader: Boolean,
  fixedFooter: Boolean
}, 'v-data-table');
export const VDataTable = genericComponent()({
  name: 'VDataTable',
  props: {
    search: String,
    ...makeVDataTableProps(),
    ...makeDataTableExpandProps(),
    ...makeDataTableGroupProps(),
    ...makeDataTableSelectProps(),
    ...makeDataTableSortProps(),
    ...makeDataTablePaginateProps(),
    ...makeFilterProps()
  },
  emits: {
    'update:modelValue': value => true,
    'update:page': value => true,
    'update:itemsPerPage': value => true,
    'update:sortBy': value => true,
    'update:options': value => true,
    'update:groupBy': value => true,
    'update:expanded': value => true,
    'click:row': (event, value) => true
  },
  setup(props, _ref) {
    let {
      emit,
      slots
    } = _ref;
    const groupBy = useProxiedModel(props, 'groupBy');
    const {
      columns
    } = createHeaders(props, {
      groupBy,
      showSelect: toRef(props, 'showSelect'),
      showExpand: toRef(props, 'showExpand')
    });
    const {
      items
    } = useDataTableItems(props, columns);
    const filterKeys = computed(() => columns.value.map(c => 'columns.' + c.key));
    const {
      filteredItems
    } = useFilter(props, items, toRef(props, 'search'), {
      filterKeys
    });
    const {
      sortBy
    } = createSort(props);
    const {
      sortByWithGroups,
      opened,
      extractRows
    } = createGroupBy(props, groupBy, sortBy);
    const {
      sortedItems
    } = useSortedItems(filteredItems, sortByWithGroups, columns);
    const {
      flatItems
    } = useGroupedItems(sortedItems, groupBy, opened);
    const {
      page,
      itemsPerPage,
      startIndex,
      stopIndex
    } = createPagination(props, flatItems);
    const {
      paginatedItems
    } = usePaginatedItems(flatItems, startIndex, stopIndex, itemsPerPage);
    const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value));
    createSelection(props, paginatedItemsWithoutGroups);
    createExpanded(props);
    useOptions({
      page,
      itemsPerPage,
      sortBy,
      groupBy
    });
    provideDefaults({
      VDataTableRows: {
        hideNoData: toRef(props, 'hideNoData'),
        noDataText: toRef(props, 'noDataText')
      }
    });
    useRender(() => _createVNode(VTable, {
      "class": ['v-data-table', {
        'v-data-table--show-select': props.showSelect
      }],
      "fixedHeader": props.fixedHeader,
      "fixedFooter": props.fixedFooter,
      "height": props.height
    }, {
      top: slots.top,
      default: slots.default ?? (() => _createVNode(_Fragment, null, [slots.colgroup?.({
        columns
      }), _createVNode("thead", null, [slots.headers ? slots.headers() : _createVNode(VDataTableHeaders, {
        "sticky": props.fixedHeader,
        "multiSort": props.multiSort
      }, slots)]), slots.thead?.(), _createVNode("tbody", null, [slots.body ? slots.body() : _createVNode(VDataTableRows, {
        "items": paginatedItems.value,
        "onClick:row": (event, value) => emit('click:row', event, value)
      }, slots)]), slots.tbody?.(), slots.tfoot?.()])),
      bottom: slots.bottom ?? (() => _createVNode(VDataTableFooter, null, {
        prepend: slots['footer.prepend']
      }))
    }));
    return {};
  }
});
//# sourceMappingURL=VDataTable.mjs.map