vuetify/lib/components/VDataTable/VDataTableRows.js

Vue Material Component Framework

import { createElementVNode as _createElementVNode, Fragment as _Fragment, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
// Components
import { makeVDataTableGroupHeaderRowProps, VDataTableGroupHeaderRow } from "./VDataTableGroupHeaderRow.js";
import { makeVDataTableRowProps, VDataTableRow } from "./VDataTableRow.js";
import { VExpandTransition } from "../transitions/index.js"; // Composables
import { useExpanded } from "./composables/expand.js";
import { useGroupBy } from "./composables/group.js";
import { useHeaders } from "./composables/headers.js";
import { useSelection } from "./composables/select.js";
import { makeDisplayProps, useDisplay } from "../../composables/display.js";
import { useLocale } from "../../composables/locale.js";
import { MaybeTransition } from "../../composables/transition.js"; // Utilities
import { Fragment, mergeProps } from 'vue';
import { genericComponent, getPrefixedEventHandlers, pick, propsFactory, useRender } from "../../util/index.js"; // Types
export const makeVDataTableRowsProps = propsFactory({
  color: String,
  loading: [Boolean, String, Object],
  loadingText: {
    type: String,
    default: '$vuetify.dataIterator.loadingText'
  },
  hideNoData: Boolean,
  items: {
    type: Array,
    default: () => []
  },
  noDataText: {
    type: String,
    default: '$vuetify.noDataText'
  },
  rowProps: [Object, Function],
  cellProps: [Object, Function],
  expandTransition: {
    type: null,
    default: () => ({
      component: VExpandTransition
    }),
    validator: val => val !== true
  },
  ...pick(makeVDataTableRowProps(), ['collapseIcon', 'expandIcon', 'density', 'getMatches']),
  ...pick(makeVDataTableGroupHeaderRowProps(), ['groupCollapseIcon', 'groupExpandIcon', 'density']),
  ...makeDisplayProps()
}, 'VDataTableRows');
export const VDataTableRows = genericComponent()({
  name: 'VDataTableRows',
  inheritAttrs: false,
  props: makeVDataTableRowsProps(),
  setup(props, {
    attrs,
    slots
  }) {
    const {
      columns
    } = useHeaders();
    const {
      expandOnClick,
      toggleExpand,
      isExpanded
    } = useExpanded();
    const {
      isSelected,
      toggleSelect
    } = useSelection();
    const {
      toggleGroup,
      isGroupOpen
    } = useGroupBy();
    const {
      t
    } = useLocale();
    const {
      mobile
    } = useDisplay(props);
    useRender(() => {
      const groupHeaderRowProps = pick(props, ['groupCollapseIcon', 'groupExpandIcon', 'density']);
      if (props.loading && (!props.items.length || slots.loading)) {
        return _createElementVNode("tr", {
          "class": "v-data-table-rows-loading",
          "key": "loading"
        }, [_createElementVNode("td", {
          "colspan": columns.value.length
        }, [slots.loading?.() ?? t(props.loadingText)])]);
      }
      if (!props.loading && !props.items.length && !props.hideNoData) {
        return _createElementVNode("tr", {
          "class": "v-data-table-rows-no-data",
          "key": "no-data"
        }, [_createElementVNode("td", {
          "colspan": columns.value.length
        }, [slots['no-data']?.() ?? t(props.noDataText)])]);
      }
      return _createElementVNode(_Fragment, null, [props.items.map((item, index) => {
        if (item.type === 'group') {
          const slotProps = {
            index,
            item,
            columns: columns.value,
            isExpanded,
            toggleExpand,
            isSelected,
            toggleSelect,
            toggleGroup,
            isGroupOpen
          };
          return slots['group-header'] ? slots['group-header'](slotProps) : _createVNode(VDataTableGroupHeaderRow, _mergeProps({
            "key": `group-header_${item.id}`,
            "item": item
          }, getPrefixedEventHandlers(attrs, ':groupHeader', () => slotProps), groupHeaderRowProps), slots);
        }
        if (item.type === 'group-summary') {
          const slotProps = {
            index,
            item,
            columns: columns.value,
            toggleGroup
          };
          return slots['group-summary']?.(slotProps) ?? '';
        }
        const slotProps = {
          index: item.virtualIndex ?? index,
          item: item.raw,
          internalItem: item,
          columns: columns.value,
          isExpanded,
          toggleExpand,
          isSelected,
          toggleSelect
        };
        const itemSlotProps = {
          ...slotProps,
          props: mergeProps({
            key: `item_${item.key ?? item.index}`,
            onClick: expandOnClick.value ? () => {
              toggleExpand(item);
            } : undefined,
            index,
            item,
            color: props.color,
            cellProps: props.cellProps,
            collapseIcon: props.collapseIcon,
            expandIcon: props.expandIcon,
            density: props.density,
            mobile: mobile.value,
            getMatches: props.getMatches
          }, getPrefixedEventHandlers(attrs, ':row', () => slotProps), typeof props.rowProps === 'function' ? props.rowProps({
            item: slotProps.item,
            index: slotProps.index,
            internalItem: slotProps.internalItem
          }) : props.rowProps)
        };
        return _createElementVNode(_Fragment, {
          "key": itemSlotProps.props.key
        }, [slots.item ? slots.item(itemSlotProps) : _createVNode(VDataTableRow, itemSlotProps.props, slots), slots['expanded-row'] ? isExpanded(item) && slots['expanded-row'](slotProps) : slots.expanded && _createElementVNode("tr", {
          "class": "v-data-table__tr--expanded"
        }, [_createElementVNode("td", {
          "colspan": columns.value.length
        }, [props.expandTransition ? _createVNode(MaybeTransition, {
          "transition": props.expandTransition
        }, {
          default: () => [isExpanded(item) ? _createElementVNode("div", null, [slots.expanded(slotProps)]) : null]
        }) // bypass <Transition> to avoid flash when expand-strategy=single
        : isExpanded(item) && _createElementVNode("div", null, [slots.expanded(slotProps)])])])]);
      })]);
    });
    return {};
  }
});
//# sourceMappingURL=VDataTableRows.js.map