vuetify/lib/labs/VDataTable/VDataTableVirtual.mjs

Vue Material Component Framework

import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
// Components
import { VTable } from "../../components/VTable/index.mjs";
import { VDataTableHeaders } from "./VDataTableHeaders.mjs";
import { VDataTableRows } from "./VDataTableRows.mjs"; // Composables
import { useProxiedModel } from "../../composables/proxiedModel.mjs";
import { createHeaders, makeDataTableHeaderProps } from "./composables/headers.mjs";
import { makeDataTableItemProps, useDataTableItems } from "./composables/items.mjs";
import { createExpanded, makeDataTableExpandProps } from "./composables/expand.mjs";
import { createSort, makeDataTableSortProps, useSortedItems } from "./composables/sort.mjs";
import { createGroupBy, makeDataTableGroupProps, useGroupedItems } from "./composables/group.mjs";
import { createSelection, makeDataTableSelectProps } from "./composables/select.mjs";
import { makeDataTableVirtualProps, useVirtual } from "./composables/virtual.mjs";
import { useOptions } from "./composables/options.mjs";
import { makeFilterProps, useFilter } from "../../composables/filter.mjs";
import { provideDefaults } from "../../composables/defaults.mjs"; // Utlities
import { computed, ref, toRef } from 'vue';
import { convertToUnit, genericComponent, useRender } from "../../util/index.mjs";
import { makeVDataTableProps } from "./VDataTable.mjs"; // Types
export const VDataTableVirtual = genericComponent()({
  name: 'VDataTableVirtual',
  props: {
    search: String,
    ...makeVDataTableProps(),
    ...makeVDataTableProps(),
    ...makeDataTableGroupProps(),
    ...makeDataTableExpandProps(),
    ...makeDataTableHeaderProps(),
    ...makeDataTableItemProps(),
    ...makeDataTableSelectProps(),
    ...makeDataTableSortProps(),
    ...makeDataTableVirtualProps(),
    ...makeFilterProps()
  },
  emits: {
    'update:modelValue': 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 allRows = computed(() => extractRows(flatItems.value));
    createSelection(props, allRows);
    createExpanded(props);
    const {
      containerRef,
      paddingTop,
      paddingBottom,
      startIndex,
      stopIndex,
      itemHeight,
      handleScroll
    } = useVirtual(props, flatItems);
    const visibleItems = computed(() => {
      return flatItems.value.slice(startIndex.value, stopIndex.value);
    });
    useOptions({
      sortBy,
      page: ref(1),
      itemsPerPage: ref(-1),
      groupBy
    });
    provideDefaults({
      VDataTableRows: {
        hideNoData: toRef(props, 'hideNoData'),
        noDataText: toRef(props, 'noDataText')
      }
    });
    useRender(() => _createVNode(VTable, {
      "class": "v-data-table",
      "style": {
        '--v-table-row-height': convertToUnit(itemHeight.value)
      },
      "height": props.height,
      "fixedHeader": props.fixedHeader
    }, {
      top: slots.top,
      wrapper: () => _createVNode("div", {
        "ref": containerRef,
        "onScroll": handleScroll,
        "class": "v-table__wrapper",
        "style": {
          height: convertToUnit(props.height)
        }
      }, [_createVNode("table", null, [_createVNode("thead", null, [_createVNode(VDataTableHeaders, {
        "sticky": props.fixedHeader,
        "multiSort": props.multiSort
      }, slots)]), _createVNode("tbody", null, [_createVNode("tr", {
        "style": {
          height: convertToUnit(paddingTop.value),
          border: 0
        }
      }, [_createVNode("td", {
        "colspan": columns.value.length,
        "style": {
          height: convertToUnit(paddingTop.value),
          border: 0
        }
      }, null)]), _createVNode(VDataTableRows, {
        "items": visibleItems.value,
        "onClick:row": (event, value) => emit('click:row', event, value)
      }, slots), _createVNode("tr", {
        "style": {
          height: convertToUnit(paddingBottom.value),
          border: 0
        }
      }, [_createVNode("td", {
        "colspan": columns.value.length,
        "style": {
          height: convertToUnit(paddingBottom.value),
          border: 0
        }
      }, null)])])])]),
      bottom: slots.bottom
    }));
  }
});
//# sourceMappingURL=VDataTableVirtual.mjs.map