vuetify/lib/labs/VDataTable/VDataTableServer.mjs

Vue Material Component Framework

import { createVNode as _createVNode, resolveDirective as _resolveDirective, Fragment as _Fragment } from "vue";
// Components
import { VTable } from "../../components/VTable/index.mjs";
import { VDataTableFooter } from "./VDataTableFooter.mjs";
import { VDataTableHeaders } from "./VDataTableHeaders.mjs";
import { VDataTableRows } from "./VDataTableRows.mjs"; // Composables
import { provideDefaults } from "../../composables/defaults.mjs";
import { useProxiedModel } from "../../composables/proxiedModel.mjs";
import { createExpanded, makeDataTableExpandProps } from "./composables/expand.mjs";
import { createGroupBy, makeDataTableGroupProps, useGroupedItems } from "./composables/group.mjs";
import { createHeaders, makeDataTableHeaderProps } from "./composables/headers.mjs";
import { makeDataTableItemProps, useDataTableItems } from "./composables/items.mjs";
import { useOptions } from "./composables/options.mjs";
import { createPagination, makeDataTablePaginateProps } from "./composables/paginate.mjs";
import { createSelection, makeDataTableSelectProps } from "./composables/select.mjs";
import { createSort, makeDataTableSortProps } from "./composables/sort.mjs"; // Utilities
import { provide, toRef } from 'vue';
import { genericComponent, useRender } from "../../util/index.mjs";
import { makeVDataTableProps } from "./VDataTable.mjs"; // Types
export const VDataTableServer = genericComponent()({
  name: 'VDataTableServer',
  props: {
    color: String,
    loading: [Boolean, String],
    loadingText: {
      type: String,
      default: '$vuetify.dataIterator.loadingText'
    },
    itemsLength: [Number, String],
    ...makeVDataTableProps(),
    ...makeDataTableExpandProps(),
    ...makeDataTableHeaderProps(),
    ...makeDataTableItemProps(),
    ...makeDataTableSelectProps(),
    ...makeDataTableSortProps(),
    ...makeDataTablePaginateProps(),
    ...makeDataTableGroupProps()
  },
  emits: {
    'update:modelValue': value => true,
    'update:page': page => true,
    'update:itemsPerPage': page => true,
    'update:sortBy': sortBy => true,
    'update:options': options => true,
    'update:expanded': options => true,
    'update:groupBy': value => true,
    'click:row': (event, value) => true
  },
  setup(props, _ref) {
    let {
      emit,
      slots
    } = _ref;
    const groupBy = useProxiedModel(props, 'groupBy');
    createExpanded(props);
    const {
      columns
    } = createHeaders(props, {
      groupBy,
      showSelect: toRef(props, 'showSelect'),
      showExpand: toRef(props, 'showExpand')
    });
    const {
      items
    } = useDataTableItems(props, columns);
    const {
      sortBy,
      toggleSort
    } = createSort(props);
    const {
      opened
    } = createGroupBy(props, groupBy, sortBy);
    const {
      page,
      itemsPerPage
    } = createPagination(props, items);
    const {
      flatItems
    } = useGroupedItems(items, groupBy, opened);
    createSelection(props, items);
    useOptions({
      page,
      itemsPerPage,
      sortBy,
      groupBy
    });
    provide('v-data-table', {
      toggleSort,
      sortBy
    });
    provideDefaults({
      VDataTableRows: {
        hideNoData: toRef(props, 'hideNoData'),
        noDataText: toRef(props, 'noDataText'),
        loading: toRef(props, 'loading'),
        loadingText: toRef(props, 'loadingText')
      }
    });
    useRender(() => _createVNode(VTable, {
      "class": ['v-data-table', {
        'v-data-table--loading': props.loading
      }],
      "fixedHeader": props.fixedHeader,
      "fixedFooter": props.fixedFooter,
      "height": props.height
    }, {
      top: slots.top,
      default: slots.default ?? (() => _createVNode(_Fragment, null, [_createVNode("thead", {
        "class": "v-data-table__thead",
        "role": "rowgroup"
      }, [slots.headers ? slots.headers() : _createVNode(VDataTableHeaders, {
        "sticky": props.fixedHeader,
        "loading": props.loading,
        "color": props.color
      }, slots)]), slots.thead?.(), _createVNode("tbody", {
        "class": "v-data-table__tbody",
        "role": "rowgroup"
      }, [slots.body ? slots.body() : _createVNode(VDataTableRows, {
        "items": flatItems.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']
      }))
    }));
  }
});
//# sourceMappingURL=VDataTableServer.mjs.map