@kokoccc/vuetify 1.0.1

package/src/components/VDataTable/VDataTable.ts

@@ -0,0 +1,661 @@
+import './VDataTable.sass'
+
+// Types
+import { VNode, VNodeChildrenArrayContents, VNodeChildren, h } from 'vue'
+import { PropValidator } from 'vue/types/options'
+import {
+  DataTableHeader,
+  DataTableFilterFunction,
+  DataScopeProps,
+  DataOptions,
+  DataPagination,
+  DataTableCompareFunction,
+  DataItemsPerPageOption,
+  ItemGroup,
+  RowClassFunction,
+  RowStyleFunction,
+  DataTableItemProps,
+  DataTableFilterMode,
+} from 'vuetify/types'
+
+// Components
+import { VData } from '../VData'
+import { VDataFooter, VDataIterator } from '../VDataIterator'
+import VBtn from '../VBtn'
+import VDataTableHeader from './VDataTableHeader'
+// import VVirtualTable from './VVirtualTable'
+import VIcon from '../VIcon'
+import Row from './Row'
+import RowGroup from './RowGroup'
+import VSimpleCheckbox from '../VCheckbox/VSimpleCheckbox'
+import VSimpleTable from './VSimpleTable'
+import MobileRow from './MobileRow'
+
+// Mixins
+import Loadable from '../../mixins/loadable'
+import Mouse from '../../mixins/mouse'
+
+// Directives
+import ripple from '../../directives/ripple'
+
+// Helpers
+import mixins from '../../util/mixins'
+import { deepEqual, getObjectValueByPath, getPrefixedScopedSlots, getSlot, defaultFilter, camelizeObjectKeys, getPropertyFromItem } from '../../util/helpers'
+import { breaking } from '../../util/console'
+import { mergeClasses, mergeStyles } from '../../util/mergeData'
+
+function filterFn (item: any, search: string | null, filter: DataTableFilterFunction) {
+  return (header: DataTableHeader) => {
+    const value = getObjectValueByPath(item, header.value)
+    return header.filter ? header.filter(value, search, item) : filter(value, search, item)
+  }
+}
+
+function searchTableItems (
+  items: any[],
+  search: string | null,
+  headersWithCustomFilters: DataTableHeader[],
+  headersWithoutCustomFilters: DataTableHeader[],
+  customFilter: DataTableFilterFunction,
+  filterMode: DataTableFilterMode,
+) {
+  search = typeof search === 'string' ? search.trim() : null
+
+  if (filterMode === 'union') {
+    // If the `search` property is empty and there are no custom filters in use, there is nothing to do.
+    if (!(search && headersWithoutCustomFilters.length) && !headersWithCustomFilters.length) return items
+
+    return items.filter(item => {
+      // Headers with custom filters are evaluated whether or not a search term has been provided.
+      if (headersWithCustomFilters.length && headersWithCustomFilters.every(filterFn(item, search, defaultFilter))) {
+        return true
+      }
+
+      // Otherwise, the `search` property is used to filter columns without a custom filter.
+      return (search && headersWithoutCustomFilters.some(filterFn(item, search, customFilter)))
+    })
+  } else if (filterMode === 'intersection') {
+    return items.filter(item => {
+      // Headers with custom filters are evaluated whether or not a search term has been provided.
+      // We need to match every filter to be included in the results.
+      const matchesColumnFilters = headersWithCustomFilters.every(filterFn(item, search, defaultFilter))
+
+      // Headers without custom filters are only filtered by the `search` property if it is defined.
+      // We only need a single column to match the search term to be included in the results.
+      const matchesSearchTerm = !search || headersWithoutCustomFilters.some(filterFn(item, search, customFilter))
+
+      return matchesColumnFilters && matchesSearchTerm
+    })
+  } else {
+    return items
+  }
+}
+
+/* @vue/component */
+export default mixins(
+  VDataIterator,
+  Loadable,
+  Mouse,
+).extend({
+  name: 'v-data-table',
+
+  emits: ['click:row', 'update:options', 'update:page', 'update:items-per-page', 'update:sort-by', 'update:sort-desc', 'update:group-by', 'update:group-desc', 'pagination', 'current-items', 'page-count', 'click', 'mousedown', 'mouseup', 'touchstart', 'touchend'],
+
+
+  props: {
+    headers: {
+      type: Array,
+      default: () => [],
+    } as PropValidator<DataTableHeader[]>,
+    showSelect: Boolean,
+    checkboxColor: String,
+    color: String,
+    showExpand: Boolean,
+    showGroupBy: Boolean,
+    // TODO: Fix
+    // virtualRows: Boolean,
+    height: [Number, String],
+    hideDefaultHeader: Boolean,
+    caption: String,
+    dense: Boolean,
+    headerProps: Object,
+    calculateWidths: Boolean,
+    fixedHeader: Boolean,
+    headersLength: Number,
+    expandIcon: {
+      type: String,
+      default: '$expand',
+    },
+    customFilter: {
+      type: Function,
+      default: defaultFilter,
+    } as PropValidator<typeof defaultFilter>,
+    filterMode: {
+      type: String,
+      default: 'intersection',
+    } as PropValidator<DataTableFilterMode>,
+    itemClass: {
+      type: [String, Function],
+      default: () => '',
+    } as PropValidator<RowClassFunction | string>,
+    itemStyle: {
+      type: [String, Function],
+      default: () => '',
+    } as PropValidator<RowStyleFunction | string>,
+    loaderHeight: {
+      type: [Number, String],
+      default: 4,
+    },
+  },
+
+  data () {
+    return {
+      internalGroupBy: [] as string[],
+      openCache: {} as { [key: string]: boolean },
+      widths: [] as number[],
+    }
+  },
+
+  computed: {
+    computedHeaders (): DataTableHeader[] {
+      if (!this.headers) return []
+      const headers = this.headers.filter(h => h.value === undefined || !this.internalGroupBy.find(v => v === h.value))
+      const defaultHeader = { text: '', sortable: false, width: '1px' }
+
+      if (this.showSelect) {
+        const index = headers.findIndex(h => h.value === 'data-table-select')
+        if (index < 0) headers.unshift({ ...defaultHeader, value: 'data-table-select' })
+        else headers.splice(index, 1, { ...defaultHeader, ...headers[index] })
+      }
+
+      if (this.showExpand) {
+        const index = headers.findIndex(h => h.value === 'data-table-expand')
+        if (index < 0) headers.unshift({ ...defaultHeader, value: 'data-table-expand' })
+        else headers.splice(index, 1, { ...defaultHeader, ...headers[index] })
+      }
+
+      return headers
+    },
+    colspanAttrs (): object | undefined {
+      return this.isMobile ? undefined : {
+        colspan: this.headersLength || this.computedHeaders.length,
+      }
+    },
+    columnSorters (): Record<string, DataTableCompareFunction> {
+      return this.computedHeaders.reduce<Record<string, DataTableCompareFunction>>((acc, header) => {
+        if (header.sort) acc[header.value] = header.sort
+        return acc
+      }, {})
+    },
+    headersWithCustomFilters (): DataTableHeader[] {
+      return this.headers.filter(header => header.filter && (!header.hasOwnProperty('filterable') || header.filterable === true))
+    },
+    headersWithoutCustomFilters (): DataTableHeader[] {
+      return this.headers.filter(header => !header.filter && (!header.hasOwnProperty('filterable') || header.filterable === true))
+    },
+    sanitizedHeaderProps (): Record<string, any> {
+      return camelizeObjectKeys(this.headerProps)
+    },
+    computedItemsPerPage (): number {
+      const itemsPerPage = this.options && this.options.itemsPerPage ? this.options.itemsPerPage : this.itemsPerPage
+      const itemsPerPageOptions: DataItemsPerPageOption[] | undefined = this.sanitizedFooterProps.itemsPerPageOptions
+
+      if (
+        itemsPerPageOptions &&
+        !itemsPerPageOptions.find(item => typeof item === 'number' ? item === itemsPerPage : item.value === itemsPerPage)
+      ) {
+        const firstOption = itemsPerPageOptions[0]
+        return typeof firstOption === 'object' ? firstOption.value : firstOption
+      }
+
+      return itemsPerPage
+    },
+    groupByText (): string {
+      return this.headers?.find(header => header.value === this.internalGroupBy?.[0])?.text ?? ''
+    },
+  },
+
+  created () {
+    const breakingProps = [
+      ['sort-icon', 'header-props.sort-icon'],
+      ['hide-headers', 'hide-default-header'],
+      ['select-all', 'show-select'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
+  mounted () {
+    // if ((!this.sortBy || !this.sortBy.length) && (!this.options.sortBy || !this.options.sortBy.length)) {
+    //   const firstSortable = this.headers.find(h => !('sortable' in h) || !!h.sortable)
+    //   if (firstSortable) this.updateOptions({ sortBy: [firstSortable.value], sortDesc: [false] })
+    // }
+
+    if (this.calculateWidths) {
+      window.addEventListener('resize', this.calcWidths)
+      this.calcWidths()
+    }
+  },
+
+  beforeUnmount () {
+    if (this.calculateWidths) {
+      window.removeEventListener('resize', this.calcWidths)
+    }
+  },
+
+  methods: {
+    calcWidths () {
+      this.widths = Array.from(this.$el.querySelectorAll('th')).map(e => e.clientWidth)
+    },
+    customFilterWithColumns (items: any[], search: string) {
+      return searchTableItems(
+        items,
+        search,
+        this.headersWithCustomFilters,
+        this.headersWithoutCustomFilters,
+        this.customFilter,
+        this.filterMode
+      )
+    },
+    customSortWithHeaders (items: any[], sortBy: string[], sortDesc: boolean[], locale: string) {
+      return this.customSort(items, sortBy, sortDesc, locale, this.columnSorters)
+    },
+    createItemProps (item: any, index: number): DataTableItemProps {
+      const data = {
+        ...VDataIterator.methods.createItemProps.call(this, item, index),
+        headers: this.computedHeaders,
+      }
+
+      return {
+        ...data,
+        class: {
+          'v-data-table__selected': data.isSelected,
+        },
+        ...this.getDefaultMouseEventHandlers(':row', () => data, true),
+        // TODO: the first argument should be the event, and the second argument should be data,
+        // but this is a breaking change so it's for v3
+        onClick: (event: MouseEvent) => this.$emit('click:row', item, data, event)
+      }
+    },
+    genCaption (props: DataScopeProps) {
+      if (this.caption) return [h('caption', [this.caption])]
+
+      return getSlot(this, 'caption', props, true)
+    },
+    genColgroup (props: DataScopeProps) {
+      return h('colgroup', this.computedHeaders.map(header => {
+        return h('col', {
+          class: {
+            divider: header.divider,
+          },
+        })
+      }))
+    },
+    genLoading () {
+      const th = h('th', {
+        class: 'column',
+        ...this.colspanAttrs,
+      }, [this.genProgress()])
+
+      const tr = h('tr', {
+        class: 'v-data-table__progress',
+      }, [th])
+
+      return h('thead', [tr])
+    },
+    genHeaders (props: DataScopeProps) {
+      const data = {
+        ...this.sanitizedHeaderProps,
+        headers: this.computedHeaders,
+        options: props.options,
+        mobile: this.isMobile,
+        showGroupBy: this.showGroupBy,
+        checkboxColor: this.checkboxColor,
+        someItems: this.someItems,
+        everyItem: this.everyItem,
+        singleSelect: this.singleSelect,
+        disableSort: this.disableSort,
+        onSort: props.sort,
+        onGroup: props.group,
+        'onToggle-select-all': this.toggleSelectAll
+      }
+
+
+      // TODO: rename to 'head'? (thead, tbody, tfoot)
+      const children: VNodeChildrenArrayContents = [getSlot(this, 'header', {
+        ...data,
+        isMobile: this.isMobile,
+      })]
+
+      if (!this.hideDefaultHeader) {
+        const scopedSlots = getPrefixedScopedSlots('header.', this.$slots)
+        children.push(h(VDataTableHeader, {
+          ...data,
+
+        }, scopedSlots))
+      }
+
+      if (this.loading) children.push(this.genLoading())
+
+      return children
+    },
+    genEmptyWrapper (content: VNodeChildrenArrayContents) {
+      return h('tr', {
+        class: 'v-data-table__empty-wrapper',
+      }, [
+        h('td', {
+          ...this.colspanAttrs,
+        }, content),
+      ])
+    },
+    genItems (items: any[], props: DataScopeProps) {
+      const empty = this.genEmpty(props.originalItemsLength, props.pagination.itemsLength)
+      if (empty) return [empty]
+
+      return props.groupedItems
+        ? this.genGroupedRows(props.groupedItems, props)
+        : this.genRows(items, props)
+    },
+    genGroupedRows (groupedItems: ItemGroup<any>[], props: DataScopeProps) {
+      return groupedItems.map(group => {
+        if (!this.openCache.hasOwnProperty(group.name)) this.openCache[group.name] = true
+
+        if (this.$slots.group) {
+          return this.$slots.group({
+            group: group.name,
+            options: props.options,
+            isMobile: this.isMobile,
+            items: group.items,
+            headers: this.computedHeaders,
+          })
+        } else {
+          return this.genDefaultGroupedRow(group.name, group.items, props)
+        }
+      })
+    },
+    genDefaultGroupedRow (group: string, items: any[], props: DataScopeProps) {
+      const isOpen = !!this.openCache[group]
+      const children: VNodeChildren = [
+        h('template', { slot: 'row.content' }, this.genRows(items, props)),
+      ]
+      const toggleFn = () => this.openCache[group] = !this.openCache[group]
+      const removeFn = () => props.updateOptions({ groupBy: [], groupDesc: [] })
+
+      if (this.$slots['group.header']) {
+        children.unshift(h('template', { slot: 'column.header' }, [
+          this.$slots['group.header']!({
+            group,
+            groupBy: props.groupBy,
+            isMobile: this.isMobile,
+            items,
+            headers: this.computedHeaders,
+            isOpen,
+            toggle: toggleFn,
+            remove: removeFn,
+          }),
+        ]))
+      } else {
+        const toggle = h(VBtn, {
+          class: 'ma-0',
+          icon: true,
+          small: true,
+          onClick: toggleFn
+        }, () => [h(VIcon, {}, () => [isOpen ? '$minus' : '$plus'])])
+
+        const remove = h(VBtn, {
+          class: 'ma-0',
+          icon: true,
+          small: true,
+          onClick: removeFn,
+        }, () => [h(VIcon, {}, () => ['$close'])])
+
+        const column = h('td', {
+          class: 'text-start',
+          ...this.colspanAttrs,
+        }, [toggle, `${this.groupByText}: ${group}`, remove])
+
+        children.unshift(h('template', { slot: 'column.header' }, [column]))
+      }
+
+      if (this.$slots['group.summary']) {
+        children.push(h('template', { slot: 'column.summary' }, [
+          this.$slots['group.summary']!({
+            group,
+            groupBy: props.groupBy,
+            isMobile: this.isMobile,
+            items,
+            headers: this.computedHeaders,
+            isOpen,
+            toggle: toggleFn,
+          }),
+        ]))
+      }
+
+      return h(RowGroup, {
+        key: group,
+        modelValue: isOpen,
+      }, children)
+    },
+    genRows (items: any[], props: DataScopeProps) {
+      return this.$slots.item ? this.genScopedRows(items, props) : this.genDefaultRows(items, props)
+    },
+    genScopedRows (items: any[], props: DataScopeProps) {
+      const rows = []
+
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i]
+        rows.push(this.$slots.item!({
+          ...this.createItemProps(item, i),
+          isMobile: this.isMobile,
+        }))
+
+        if (this.isExpanded(item)) {
+          rows.push(this.$slots['expanded-item']!({
+            headers: this.computedHeaders,
+            isMobile: this.isMobile,
+            index: i,
+            item,
+          }))
+        }
+      }
+
+      return rows
+    },
+    genDefaultRows (items: any[], props: DataScopeProps) {
+      return this.$slots['expanded-item']
+        ? items.map((item, index) => this.genDefaultExpandedRow(item, index))
+        : items.map((item, index) => this.genDefaultSimpleRow(item, index))
+    },
+    genDefaultExpandedRow (item: any, index: number): VNode {
+      const isExpanded = this.isExpanded(item)
+      const classes = {
+        'v-data-table__expanded v-data-table__expanded__row': isExpanded,
+      }
+      const headerRow = this.genDefaultSimpleRow(item, index, classes)
+      const expandedRow = h('tr', {
+        class: 'v-data-table__expanded v-data-table__expanded__content',
+      }, [this.$slots['expanded-item']!({
+        headers: this.computedHeaders,
+        isMobile: this.isMobile,
+        item,
+      })])
+
+      return h(RowGroup, {
+        modelValue: isExpanded,
+      }, [
+        h('template', { slot: 'row.header' }, [headerRow]),
+        h('template', { slot: 'row.content' }, [expandedRow]),
+      ])
+    },
+    genDefaultSimpleRow (item: any, index: number, classes: Record<string, boolean> = {}): VNode {
+      const scopedSlots = getPrefixedScopedSlots('item.', this.$slots)
+
+      const data = this.createItemProps(item, index)
+
+      if (this.showSelect) {
+        const slot = scopedSlots['data-table-select']
+        scopedSlots['data-table-select'] = slot ? () => slot({
+          ...data,
+          isMobile: this.isMobile,
+        }) : () => h(VSimpleCheckbox, {
+          class: 'v-data-table__checkbox',
+          modelValue: data.isSelected,
+          disabled: !this.isSelectable(item),
+          color: this.checkboxColor ?? '',
+          'onUpdate:modelValue': (val: boolean) => data.select(val),
+        })
+      }
+
+      if (this.showExpand) {
+        const slot = scopedSlots['data-table-expand']
+        scopedSlots['data-table-expand'] = slot ? () => slot(data) : () => h(VIcon, {
+          class: ['v-data-table__expand-icon', {
+            'v-data-table__expand-icon--active': data.isExpanded,
+          }],
+          onClick: (e: MouseEvent) => {
+            e.stopPropagation()
+            data.expand(!data.isExpanded)
+          }
+        }, () => [this.expandIcon])
+      }
+
+      return h(this.isMobile ? MobileRow : Row, {
+        key: getObjectValueByPath(item, this.itemKey),
+        class: mergeClasses(
+          { ...classes, 'v-data-table__selected': data.isSelected },
+          getPropertyFromItem(item, this.itemClass)
+        ),
+        style: mergeStyles({}, getPropertyFromItem(item, this.itemStyle)),
+        headers: this.computedHeaders,
+        hideDefaultHeader: this.hideDefaultHeader,
+        index,
+        item,
+        rtl: this.$vuetify.rtl,
+        ...data.on,
+      }, scopedSlots)
+    },
+    genBody (props: DataScopeProps): VNode | string | VNodeChildren {
+      const data = {
+        ...props,
+        expand: this.expand,
+        headers: this.computedHeaders,
+        isExpanded: this.isExpanded,
+        isMobile: this.isMobile,
+        isSelected: this.isSelected,
+        select: this.select,
+      }
+
+      if (this.$slots.body) {
+        return this.$slots.body!(data)
+      }
+
+      return h('tbody', [
+        getSlot(this, 'body.prepend', data, true),
+        this.genItems(props.items, props),
+        getSlot(this, 'body.append', data, true),
+      ])
+    },
+    genFoot (props: DataScopeProps): VNode[] | undefined {
+      return this.$slots.foot?.(props)
+    },
+    genFooters (props: DataScopeProps) {
+      const data = {
+        options: props.options,
+        pagination: props.pagination,
+        itemsPerPageText: '$vuetify.dataTable.itemsPerPageText',
+        ...this.sanitizedFooterProps,
+        'onUpdate:options': (value: any) => props.updateOptions(value),
+      }
+
+      const children: VNodeChildren = [
+        getSlot(this, 'footer', {
+          ...data,
+          widths: this.widths,
+          headers: this.computedHeaders
+        }, true),
+      ]
+
+      if (!this.hideDefaultFooter) {
+        children.push(h(VDataFooter, {
+          ...data
+        }, getPrefixedScopedSlots('footer.', this.$slots)))
+      }
+
+      return children
+    },
+    genDefaultScopedSlot (props: DataScopeProps): VNode {
+      const simpleProps = {
+        height: this.height,
+        fixedHeader: this.fixedHeader,
+        dense: this.dense,
+      }
+
+      // if (this.virtualRows) {
+      //   return h(VVirtualTable, {
+      //     props: Object.assign(simpleProps, {
+      //       items: props.items,
+      //       height: this.height,
+      //       rowHeight: this.dense ? 24 : 48,
+      //       headerHeight: this.dense ? 32 : 48,
+      //       // TODO: expose rest of props from virtual table?
+      //     }),
+      //     scopedSlots: {
+      //       items: ({ items }) => this.genItems(items, props) as any,
+      //     },
+      //   }, [
+      //     this.proxySlot('body.before', [this.genCaption(props), this.genHeaders(props)]),
+      //     this.proxySlot('bottom', this.genFooters(props)),
+      //   ])
+      // }
+
+      return h(VSimpleTable, {
+        ...simpleProps,
+        class: {
+          'v-data-table--mobile': this.isMobile,
+          'v-data-table--selectable': this.showSelect,
+        },
+      }, {
+        default: () => [
+          this.genCaption(props),
+          this.genColgroup(props),
+          this.genHeaders(props),
+          this.genBody(props),
+          this.genFoot(props),
+        ],
+        top: () => getSlot(this, 'top', {
+          ...props,
+          isMobile: this.isMobile,
+        }, true),
+        bottom: () => this.genFooters(props)
+      })
+    }
+  },
+
+  render (): VNode {
+    return h(VData, {
+      ...this.$props,
+      customFilter: this.customFilterWithColumns,
+      customSort: this.customSortWithHeaders,
+      itemsPerPage: this.computedItemsPerPage,
+      'onUpdate:options': (v: DataOptions, old: DataOptions) => {
+        this.internalGroupBy = v.groupBy || []
+        !deepEqual(v, old) && this.$emit('update:options', v)
+      },
+      'onUpdate:page': (v: number) => this.$emit('update:page', v),
+      'onUpdate:items-per-page': (v: number) => this.$emit('update:items-per-page', v),
+      'onUpdate:sort-by': (v: string | string[]) => this.$emit('update:sort-by', v),
+      'onUpdate:sort-desc': (v: boolean | boolean[]) => this.$emit('update:sort-desc', v),
+      'onUpdate:group-by': (v: string | string[]) => this.$emit('update:group-by', v),
+      'onUpdate:group-desc': (v: boolean | boolean[]) => this.$emit('update:group-desc', v),
+      onPagination: (v: DataPagination, old: DataPagination) => !deepEqual(v, old) && this.$emit('pagination', v),
+      'onCurrent-items': (v: any[]) => {
+        this.internalCurrentItems = v
+        this.$emit('current-items', v)
+      },
+      'onPage-count': (v: number) => this.$emit('page-count', v),
+    }, this.genDefaultScopedSlot)
+  },
+})