bootstrap-vue · tmorehouse · Mar 12, 2019 · Mar 9, 2019 · Mar 9, 2019 · Mar 9, 2019
diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss
@@ -161,5 +161,5 @@
 /* b-table: selectable rows */
 table.b-table.b-table-selectable > tbody > tr {
   cursor: pointer;
-  user-select: none;
+  // user-select: none;
 }
diff --git a/src/components/table/helpers/constants.js b/src/components/table/helpers/constants.js
@@ -0,0 +1,25 @@
+// Constants used by table helpers
+
+// Object of item keys that should be ignored for headers and stringification and filter events
+export const IGNORED_FIELD_KEYS = {
+  _rowVariant: true,
+  _cellVariants: true,
+  _showDetails: true
+}
+
+// Filter CSS Selector for click/dblclick/etc events
+// If any of these selectors match the clicked element, we ignore the event
+export const EVENT_FILTER = [
+  'a',
+  'a *', // include content inside links
+  'button',
+  'button *', // include content inside buttons
+  'input:not(.disabled):not([disabled])',
+  'select:not(.disabled):not([disabled])',
+  'textarea:not(.disabled):not([disabled])',
+  '[role="link"]',
+  '[role="link"] *',
+  '[role="button"]',
+  '[role="button"] *',
+  '[tabindex]:not(.disabled):not([disabled])'
+].join(',')
diff --git a/src/components/table/helpers/default-sort-compare.js b/src/components/table/helpers/default-sort-compare.js
@@ -0,0 +1,32 @@
+import get from '../../../utils/get'
+import stringifyObjectValues from './stringify-object-values'
+
+// Default sort compare routine
+//
+// TODO: add option to sort by multiple columns (tri-state per column, plus order of columns in sort)
+//  where sprtBy could be an array of objects [ {key: 'foo', sortDir: 'asc'}, {key:'bar', sortDir: 'desc'} ...]
+//  or an array of arrays [ ['foo','asc'], ['bar','desc'] ]
+
+export default function defaultSortCompare(a, b, sortBy) {
+  a = get(a, sortBy, '')
+  b = get(b, sortBy, '')
+  if (
+    (a instanceof Date && b instanceof Date) ||
+    (typeof a === 'number' && typeof b === 'number')
+  ) {
+    // Special case for comparing Dates and Numbers
+    // Internally dates are compared via their epoch number values
+    if (a < b) {
+      return -1
+    } else if (a > b) {
+      return 1
+    } else {
+      return 0
+    }
+  } else {
+    // Do localized string comparison
+    return stringifyObjectValues(a).localeCompare(stringifyObjectValues(b), undefined, {
+      numeric: true
+    })
+  }
+}
diff --git a/src/components/table/helpers/default-sort-compare.spec.js b/src/components/table/helpers/default-sort-compare.spec.js
@@ -0,0 +1,46 @@
+import defaultSortCompare from './default-sort-compare'
+
+describe('table/helpers/default-sort-compare', () => {
+  it('sorts numbers correctly', async () => {
+    expect(defaultSortCompare({ a: 1 }, { a: 2 }, 'a')).toBe(-1)
+    expect(defaultSortCompare({ a: 2 }, { a: 1 }, 'a')).toBe(1)
+    expect(defaultSortCompare({ a: 1 }, { a: 1 }, 'a')).toBe(0)
+    expect(defaultSortCompare({ a: -1 }, { a: 1 }, 'a')).toBe(-1)
+    expect(defaultSortCompare({ a: 1 }, { a: -1 }, 'a')).toBe(1)
+    expect(defaultSortCompare({ a: 0 }, { a: 0 }, 'a')).toBe(0)
+    expect(defaultSortCompare({ a: 1.234 }, { a: 1.567 }, 'a')).toBe(-1)
+    expect(defaultSortCompare({ a: 1.561 }, { a: 1.234 }, 'a')).toBe(1)
+  })
+
+  it('sorts dates correctly', async () => {
+    const date1 = { a: new Date(2019, 1, 1) }
+    const date2 = { a: new Date(1999, 11, 31) }
+    const date3 = { a: new Date(1999, 1, 1) }
+    const date4 = { a: new Date(1999, 1, 1, 12, 12, 12, 12) }
+
+    expect(defaultSortCompare(date1, date2, 'a')).toBe(1)
+    expect(defaultSortCompare(date1, date1, 'a')).toBe(0)
+    expect(defaultSortCompare(date2, date1, 'a')).toBe(-1)
+    expect(defaultSortCompare(date2, date3, 'a')).toBe(1)
+    expect(defaultSortCompare(date3, date2, 'a')).toBe(-1)
+    expect(defaultSortCompare(date3, date4, 'a')).toBe(-1)
+    expect(defaultSortCompare(date4, date3, 'a')).toBe(1)
+    expect(defaultSortCompare(date4, date4, 'a')).toBe(0)
+  })
+
+  it('sorts strings correctly', async () => {
+    // Note: string comparisons are locale based
+    expect(defaultSortCompare({ a: 'a' }, { a: 'b' }, 'a')).toBe(-1)
+    expect(defaultSortCompare({ a: 'b' }, { a: 'a' }, 'a')).toBe(1)
+    expect(defaultSortCompare({ a: 'a' }, { a: 'a' }, 'a')).toBe(0)
+    expect(defaultSortCompare({ a: 'a' }, { a: 'aaa' }, 'a')).toBe(-1)
+  })
+
+  it('sorts by nested key correctly', async () => {
+    // Note: string comparisons are locale based
+    expect(defaultSortCompare({ a: { b: 'a' } }, { a: { b: 'b' } }, 'a.b')).toBe(-1)
+    expect(defaultSortCompare({ a: { b: 'b' } }, { a: { b: 'a' } }, 'a.b')).toBe(1)
+    expect(defaultSortCompare({ a: { b: 'a' } }, { a: { b: 'a' } }, 'a.b')).toBe(0)
+    expect(defaultSortCompare({ a: { b: 'a' } }, { a: { b: 'aaa' } }, 'a.b')).toBe(-1)
+  })
+})
diff --git a/src/components/table/helpers/filter-event.js b/src/components/table/helpers/filter-event.js
@@ -0,0 +1,29 @@
+import { closest, matches } from '../../../utils/dom'
+import { EVENT_FILTER } from './constants'
+
+// Returns true of we should ignore the click/dbclick/keypress event
+// Avoids having the user need to use @click.stop on the form control
+
+export default function filterEvent(evt) {
+  if (!evt || !evt.target) {
+    /* istanbul ignore next */
+    return
+  }
+  const el = evt.target
+  if (el.tagName === 'TD' || el.tagName === 'TH' || el.tagName === 'TR' || el.disabled) {
+    // Shortut all the following tests for efficiency
+    return false
+  }
+  if (closest('.dropdown-menu', el)) {
+    // Click was in a dropdown menu, so ignore
+    return true
+  }
+  const label = el.tagName === 'LABEL' ? el : closest('label', el)
+  if (label && label.control && !label.control.disabled) {
+    // If the label's form control is not disabled then we don't propagate evt
+    return true
+  }
+  // Else check to see if the event target matches one of the selectors in the event filter
+  // i.e. anchors, non disabled inputs, etc. Return true if we should ignore the event.
+  return matches(el, EVENT_FILTER)
+}
diff --git a/src/components/table/helpers/mixin-bottom-row.js b/src/components/table/helpers/mixin-bottom-row.js
@@ -0,0 +1,30 @@
+export default {
+  methods: {
+    renderBottomRow() {
+      const h = this.$createElement
+
+      // Static bottom row slot (hidden in visibly stacked mode as we can't control the data-label)
+      // If in always stacked mode, we don't bother rendering the row
+      if (!this.hasNormalizedSlot('bottom-row') || this.isStacked === true) {
+        return h(false)
+      }
+
+      const fields = this.computedFields
+
+      return h(
+        'tr',
+        {
+          key: '__b-table-bottom-row__',
+          staticClass: 'b-table-bottom-row',
+          class: [
+            typeof this.tbodyTrClass === 'function'
+              ? this.tbodyTrClass(null, 'row-bottom')
+              : this.tbodyTrClass
+          ],
+          attrs: { role: 'row' }
+        },
+        this.normalizeSlot('bottom-row', { columns: fields.length, fields: fields })
+      )
+    }
+  }
+}
diff --git a/src/components/table/helpers/mixin-busy.js b/src/components/table/helpers/mixin-busy.js
@@ -0,0 +1,71 @@
+export default {
+  props: {
+    busy: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      localBusy: false
+    }
+  },
+  computed: {
+    computedBusy() {
+      return this.busy || this.localBusy
+    }
+  },
+  watch: {
+    localBusy(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.$emit('update:busy', newVal)
+      }
+    }
+  },
+  methods: {
+    // Event handler helper
+    stopIfBusy(evt) {
+      if (this.computedBusy) {
+        // If table is busy (via provider) then don't propagate
+        evt.preventDefault()
+        evt.stopPropagation()
+        return true
+      }
+      return false
+    },
+    // Renter the busy indecator or return null if not busy
+    renderBusy() {
+      const h = this.$createElement
+
+      // Return a busy indicator row, or null if not busy
+      if (this.computedBusy && this.hasNormalizedSlot('table-busy')) {
+        // Show the busy slot
+        const trAttrs = {
+          role: this.isStacked ? 'row' : null
+        }
+        const tdAttrs = {
+          colspan: String(this.computedFields.length),
+          role: this.isStacked ? 'cell' : null
+        }
+        return h(
+          'tr',
+          {
+            key: 'table-busy-slot',
+            staticClass: 'b-table-busy-slot',
+            class: [
+              typeof this.tbodyTrClass === 'function'
+                ? this.tbodyTrClass(null, 'table-busy')
+                : this.tbodyTrClass
+            ],
+            attrs: trAttrs
+          },
+          [h('td', { attrs: tdAttrs }, [this.normalizeSlot('table-busy', {})])]
+        )
+      } else {
+        // We return null here so that we can determine if we need to
+        // render the table items rows or not.
+        return null
+      }
+    }
+  }
+}
diff --git a/src/components/table/helpers/mixin-caption.js b/src/components/table/helpers/mixin-caption.js
@@ -0,0 +1,52 @@
+import { htmlOrText } from '../../../utils/html'
+
+export default {
+  props: {
+    caption: {
+      type: String,
+      default: null
+    },
+    captionHtml: {
+      type: String
+    },
+    captionTop: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    captionClasses() {
+      return {
+        'b-table-caption-top': this.captionTop
+      }
+    },
+    captionId() {
+      // Even though this.safeId looks like a method, it is a computed prop
+      // that returns a new function if the underlying ID changes
+      return this.isStacked ? this.safeId('_caption_') : null
+    }
+  },
+  methods: {
+    renderCaption() {
+      const h = this.$createElement
+
+      // Build the caption
+      const $captionSlot = this.normalizeSlot('table-caption', {})
+      let $caption = h(false)
+
+      if ($captionSlot || this.caption || this.captionHtml) {
+        const data = {
+          key: 'caption',
+          class: this.captionClasses,
+          attrs: { id: this.captionId }
+        }
+        if (!$captionSlot) {
+          data.domProps = htmlOrText(this.captionHtml, this.caption)
+        }
+        $caption = h('caption', data, [$captionSlot])
+      }
+
+      return $caption
+    }
+  }
+}
diff --git a/src/components/table/helpers/mixin-colgroup.js b/src/components/table/helpers/mixin-colgroup.js
@@ -0,0 +1,18 @@
+export default {
+  methods: {
+    renderColgroup() {
+      const h = this.$createElement
+
+      const fields = this.computedFields
+      let $colgroup = h(false)
+
+      if (this.hasNormalizedSlot('table-colgroup')) {
+        $colgroup = h('colgroup', { key: 'colgroup' }, [
+          this.normalizeSlot('table-colgroup', { columns: fields.length, fields: fields })
+        ])
+      }
+
+      return $colgroup
+    }
+  }
+}
diff --git a/src/components/table/helpers/mixin-empty.js b/src/components/table/helpers/mixin-empty.js
@@ -0,0 +1,81 @@
+import { htmlOrText } from '../../../utils/html'
+
+export default {
+  props: {
+    showEmpty: {
+      type: Boolean,
+      default: false
+    },
+    emptyText: {
+      type: String,
+      default: 'There are no records to show'
+    },
+    emptyHtml: {
+      type: String
+    },
+    emptyFilteredText: {
+      type: String,
+      default: 'There are no records matching your request'
+    },
+    emptyFilteredHtml: {
+      type: String
+    }
+  },
+  methods: {
+    renderEmpty() {
+      const h = this.$createElement
+      const items = this.computedItems
+      let $empty
+
+      if (
+        this.showEmpty &&
+        (!items || items.length === 0) &&
+        !(this.computedBusy && this.hasNormalizedSlot('table-busy'))
+      ) {
+        $empty = this.normalizeSlot(this.isFiltered ? 'emptyfiltered' : 'empty', {
+          emptyFilteredHtml: this.emptyFilteredHtml,
+          emptyFilteredText: this.emptyFilteredText,
+          emptyHtml: this.emptyHtml,
+          emptyText: this.emptyText,
+          fields: this.computedFields,
+          // Not sure why this is included, as it will always be an empty array
+          items: this.computedItems
+        })
+        if (!$empty) {
+          $empty = h('div', {
+            class: ['text-center', 'my-2'],
+            domProps: this.isFiltered
+              ? htmlOrText(this.emptyFilteredHtml, this.emptyFilteredText)
+              : htmlOrText(this.emptyHtml, this.emptyText)
+          })
+        }
+        $empty = h(
+          'td',
+          {
+            attrs: {
+              colspan: String(this.computedFields.length),
+              role: this.isStacked ? 'cell' : null
+            }
+          },
+          [h('div', { attrs: { role: 'alert', 'aria-live': 'polite' } }, [$empty])]
+        )
+        $empty = h(
+          'tr',
+          {
+            key: this.isFiltered ? '_b-table-empty-filtered-row_' : '_b-table-empty-row_',
+            staticClass: 'b-table-empty-row',
+            class: [
+              typeof this.tbodyTrClass === 'function'
+                ? this.tbodyTrClass(null, 'row-empty')
+                : this.tbodyTrClass
+            ],
+            attrs: this.isStacked ? { role: 'row' } : {}
+          },
+          [$empty]
+        )
+      }
+
+      return $empty || h(false)
+    }
+  }
+}