quasar 2.1.0

package/src/components/table/QTr.js

@@ -0,0 +1,22 @@
+import { h, defineComponent, computed } from 'vue'
+
+import { hSlot } from '../../utils/private/render.js'
+
+export default defineComponent({
+  name: 'QTr',
+
+  props: {
+    props: Object,
+    noHover: Boolean
+  },
+
+  setup (props, { slots }) {
+    const classes = computed(() =>
+      'q-tr'
+      + (props.props === void 0 || props.props.header === true ? '' : ' ' + props.props.__trClass)
+      + (props.noHover === true ? ' q-tr--no-hover' : '')
+    )
+
+    return () => h('tr', { class: classes.value }, hSlot(slots.default))
+  }
+})

package/src/components/table/QTr.json

@@ -0,0 +1,26 @@
+{
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/table"
+  },
+
+  "props": {
+    "props": {
+      "type": "Object",
+      "desc": "QTable's row scoped slot property",
+      "examples": [ ":props=\"props\"" ],
+      "category": "general"
+    },
+
+    "no-hover": {
+      "type": "Boolean",
+      "desc": "Disable hover effect",
+      "category": "style"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "extends": "default"
+    }
+  }
+}

package/src/components/table/get-table-middle.js

@@ -0,0 +1,7 @@
+import { h } from 'vue'
+
+export default function (props, content) {
+  return h('div', props, [
+    h('table', { class: 'q-table' }, content)
+  ])
+}

package/src/components/table/index.js

@@ -0,0 +1,11 @@
+import QTable from './QTable.js'
+import QTh from './QTh.js'
+import QTr from './QTr.js'
+import QTd from './QTd.js'
+
+export {
+  QTable,
+  QTh,
+  QTr,
+  QTd
+}

package/src/components/table/table-column-selection.js

@@ -0,0 +1,88 @@
+import { computed } from 'vue'
+
+import { isNumber } from '../../utils/private/is.js'
+
+export const useTableColumnSelectionProps = {
+  visibleColumns: Array
+}
+
+export function useTableColumnSelection (props, computedPagination, hasSelectionMode) {
+  const colList = computed(() => {
+    if (props.columns !== void 0) {
+      return props.columns
+    }
+
+    // we infer columns from first row
+    const row = props.rows[ 0 ]
+
+    return row !== void 0
+      ? Object.keys(row).map(name => ({
+          name,
+          label: name.toUpperCase(),
+          field: name,
+          align: isNumber(row[ name ]) ? 'right' : 'left',
+          sortable: true
+        }))
+      : []
+  })
+
+  const computedCols = computed(() => {
+    const { sortBy, descending } = computedPagination.value
+
+    const cols = props.visibleColumns !== void 0
+      ? colList.value.filter(col => col.required === true || props.visibleColumns.includes(col.name) === true)
+      : colList.value
+
+    return cols.map(col => {
+      const align = col.align || 'right'
+      const alignClass = `text-${ align }`
+
+      return {
+        ...col,
+        align,
+        __iconClass: `q-table__sort-icon q-table__sort-icon--${ align }`,
+        __thClass: alignClass
+          + (col.headerClasses !== void 0 ? ' ' + col.headerClasses : '')
+          + (col.sortable === true ? ' sortable' : '')
+          + (col.name === sortBy ? ` sorted ${ descending === true ? 'sort-desc' : '' }` : ''),
+
+        __tdStyle: col.style !== void 0
+          ? (
+              typeof col.style !== 'function'
+                ? () => col.style
+                : col.style
+            )
+          : () => null,
+
+        __tdClass: col.classes !== void 0
+          ? (
+              typeof col.classes !== 'function'
+                ? () => alignClass + ' ' + col.classes
+                : row => alignClass + ' ' + col.classes(row)
+            )
+          : () => alignClass
+      }
+    })
+  })
+
+  const computedColsMap = computed(() => {
+    const names = {}
+    computedCols.value.forEach(col => {
+      names[ col.name ] = col
+    })
+    return names
+  })
+
+  const computedColspan = computed(() => {
+    return props.tableColspan !== void 0
+      ? props.tableColspan
+      : computedCols.value.length + (hasSelectionMode.value === true ? 1 : 0)
+  })
+
+  return {
+    colList,
+    computedCols,
+    computedColsMap,
+    computedColspan
+  }
+}

package/src/components/table/table-filter.js

@@ -0,0 +1,35 @@
+import { computed, watch, nextTick } from 'vue'
+
+export const useTableFilterProps = {
+  filter: [ String, Object ],
+  filterMethod: Function
+}
+
+export function useTableFilter (props, setPagination) {
+  const computedFilterMethod = computed(() => (
+    props.filterMethod !== void 0
+      ? props.filterMethod
+      : (rows, terms, cols, cellValue) => {
+          const lowerTerms = terms ? terms.toLowerCase() : ''
+          return rows.filter(
+            row => cols.some(col => {
+              const val = cellValue(col, row) + ''
+              const haystack = (val === 'undefined' || val === 'null') ? '' : val.toLowerCase()
+              return haystack.indexOf(lowerTerms) !== -1
+            })
+          )
+        }
+  ))
+
+  watch(
+    () => props.filter,
+    () => {
+      nextTick(() => {
+        setPagination({ page: 1 }, true)
+      })
+    },
+    { deep: true }
+  )
+
+  return { computedFilterMethod }
+}

package/src/components/table/table-pagination.js

@@ -0,0 +1,213 @@
+import { ref, computed, watch, nextTick } from 'vue'
+
+function samePagination (oldPag, newPag) {
+  for (const prop in newPag) {
+    if (newPag[ prop ] !== oldPag[ prop ]) {
+      return false
+    }
+  }
+  return true
+}
+
+function fixPagination (p) {
+  if (p.page < 1) {
+    p.page = 1
+  }
+  if (p.rowsPerPage !== void 0 && p.rowsPerPage < 1) {
+    p.rowsPerPage = 0
+  }
+  return p
+}
+
+export const useTablePaginationProps = {
+  pagination: Object,
+  rowsPerPageOptions: {
+    type: Array,
+    default: () => [ 5, 7, 10, 15, 20, 25, 50, 0 ]
+  },
+
+  'onUpdate:pagination': Function
+}
+
+export function useTablePaginationState (vm, getCellValue) {
+  const { props, emit } = vm
+
+  const innerPagination = ref(
+    Object.assign({
+      sortBy: null,
+      descending: false,
+      page: 1,
+      rowsPerPage: props.rowsPerPageOptions.length > 0
+        ? props.rowsPerPageOptions[ 0 ]
+        : 5
+    }, props.pagination)
+  )
+
+  const computedPagination = computed(() => {
+    const pag = props[ 'onUpdate:pagination' ] !== void 0
+      ? { ...innerPagination.value, ...props.pagination }
+      : innerPagination.value
+
+    return fixPagination(pag)
+  })
+
+  const isServerSide = computed(() => computedPagination.value.rowsNumber !== void 0)
+
+  function sendServerRequest (pagination) {
+    requestServerInteraction({
+      pagination,
+      filter: props.filter
+    })
+  }
+
+  function requestServerInteraction (prop = {}) {
+    nextTick(() => {
+      emit('request', {
+        pagination: prop.pagination || computedPagination.value,
+        filter: prop.filter || props.filter,
+        getCellValue
+      })
+    })
+  }
+
+  function setPagination (val, forceServerRequest) {
+    const newPagination = fixPagination({
+      ...computedPagination.value,
+      ...val
+    })
+
+    if (samePagination(computedPagination.value, newPagination)) {
+      if (isServerSide.value === true && forceServerRequest === true) {
+        sendServerRequest(newPagination)
+      }
+      return
+    }
+
+    if (isServerSide.value === true) {
+      sendServerRequest(newPagination)
+      return
+    }
+
+    if (
+      props.pagination !== void 0
+      && props[ 'onUpdate:pagination' ] !== void 0
+    ) {
+      emit('update:pagination', newPagination)
+    }
+    else {
+      innerPagination.value = newPagination
+    }
+  }
+
+  return {
+    innerPagination,
+    computedPagination,
+    isServerSide,
+
+    requestServerInteraction,
+    setPagination
+  }
+}
+
+export function useTablePagination (vm, innerPagination, computedPagination, isServerSide, setPagination, filteredSortedRowsNumber) {
+  const { props, emit, proxy: { $q } } = vm
+
+  const computedRowsNumber = computed(() => (
+    isServerSide.value === true
+      ? computedPagination.value.rowsNumber || 0
+      : filteredSortedRowsNumber.value
+  ))
+
+  const firstRowIndex = computed(() => {
+    const { page, rowsPerPage } = computedPagination.value
+    return (page - 1) * rowsPerPage
+  })
+
+  const lastRowIndex = computed(() => {
+    const { page, rowsPerPage } = computedPagination.value
+    return page * rowsPerPage
+  })
+
+  const isFirstPage = computed(() => computedPagination.value.page === 1)
+
+  const pagesNumber = computed(() => (
+    computedPagination.value.rowsPerPage === 0
+      ? 1
+      : Math.max(
+        1,
+        Math.ceil(computedRowsNumber.value / computedPagination.value.rowsPerPage)
+      )
+  ))
+
+  const isLastPage = computed(() => (
+    lastRowIndex.value === 0
+      ? true
+      : computedPagination.value.page >= pagesNumber.value
+  ))
+
+  const computedRowsPerPageOptions = computed(() => {
+    const opts = props.rowsPerPageOptions.includes(innerPagination.value.rowsPerPage)
+      ? props.rowsPerPageOptions
+      : [ innerPagination.value.rowsPerPage ].concat(props.rowsPerPageOptions)
+
+    return opts.map(count => ({
+      label: count === 0 ? $q.lang.table.allRows : '' + count,
+      value: count
+    }))
+  })
+
+  watch(pagesNumber, (lastPage, oldLastPage) => {
+    if (lastPage === oldLastPage) {
+      return
+    }
+
+    const currentPage = computedPagination.value.page
+    if (lastPage && !currentPage) {
+      setPagination({ page: 1 })
+    }
+    else if (lastPage < currentPage) {
+      setPagination({ page: lastPage })
+    }
+  })
+
+  function firstPage () {
+    setPagination({ page: 1 })
+  }
+
+  function prevPage () {
+    const { page } = computedPagination.value
+    if (page > 1) {
+      setPagination({ page: page - 1 })
+    }
+  }
+
+  function nextPage () {
+    const { page, rowsPerPage } = computedPagination.value
+    if (lastRowIndex.value > 0 && page * rowsPerPage < computedRowsNumber.value) {
+      setPagination({ page: page + 1 })
+    }
+  }
+
+  function lastPage () {
+    setPagination({ page: pagesNumber.value })
+  }
+
+  if (props[ 'onUpdate:pagination' ] !== void 0) {
+    emit('update:pagination', { ...computedPagination.value })
+  }
+
+  return {
+    firstRowIndex,
+    lastRowIndex,
+    isFirstPage,
+    isLastPage,
+    pagesNumber,
+    computedRowsPerPageOptions,
+    computedRowsNumber,
+
+    firstPage,
+    prevPage,
+    nextPage,
+    lastPage
+  }
+}

package/src/components/table/table-row-expand.js

@@ -0,0 +1,56 @@
+import { ref, watch } from 'vue'
+
+function getVal (val) {
+  return Array.isArray(val)
+    ? val.slice()
+    : []
+}
+
+export const useTableRowExpandProps = {
+  expanded: Array // v-model:expanded
+}
+
+export const useTableRowExpandEmits = [ 'update:expanded' ]
+
+export function useTableRowExpand (props, emit) {
+  const innerExpanded = ref(getVal(props.expanded))
+
+  watch(() => props.expanded, val => {
+    innerExpanded.value = getVal(val)
+  })
+
+  function isRowExpanded (key) {
+    return innerExpanded.value.includes(key)
+  }
+
+  function setExpanded (val) {
+    if (props.expanded !== void 0) {
+      emit('update:expanded', val)
+    }
+    else {
+      innerExpanded.value = val
+    }
+  }
+
+  function updateExpanded (key, add) {
+    const target = innerExpanded.value.slice()
+    const index = target.indexOf(key)
+
+    if (add === true) {
+      if (index === -1) {
+        target.push(key)
+        setExpanded(target)
+      }
+    }
+    else if (index !== -1) {
+      target.splice(index, 1)
+      setExpanded(target)
+    }
+  }
+
+  return {
+    isRowExpanded,
+    setExpanded,
+    updateExpanded
+  }
+}