quasar 2.18.7 → 2.19.0

package/src/components/table/QTd.js

@@ -12,12 +12,14 @@ export default createComponent({
     noHover: Boolean
   },
 
-  setup (props, { slots }) {
+  setup(props, { slots }) {
     const vm = getCurrentInstance()
-    const classes = computed(() =>
-      'q-td' + (props.autoWidth === true ? ' q-table--col-auto-width' : '')
-      + (props.noHover === true ? ' q-td--no-hover' : '')
-      + ' '
+    const classes = computed(
+      () =>
+        'q-td' +
+        (props.autoWidth === true ? ' q-table--col-auto-width' : '') +
+        (props.noHover === true ? ' q-td--no-hover' : '') +
+        ' '
     )
 
     return () => {
@@ -26,19 +28,22 @@ export default createComponent({
       }
 
       const name = vm.vnode.key
-      const col = (
-        (props.props.colsMap !== void 0 ? props.props.colsMap[ name ] : null)
-        || props.props.col
-      )
+      const col =
+        (props.props.colsMap !== void 0 ? props.props.colsMap[name] : null) ||
+        props.props.col
 
       if (col === void 0) return
 
       const { row } = props.props
 
-      return h('td', {
-        class: classes.value + col.__tdClass(row),
-        style: col.__tdStyle(row)
-      }, hSlot(slots.default))
+      return h(
+        'td',
+        {
+          class: classes.value + col.__tdClass(row),
+          style: col.__tdStyle(row)
+        },
+        hSlot(slots.default)
+      )
     }
   }
 })

package/src/components/table/QTd.json

@@ -7,7 +7,7 @@
     "props": {
       "type": "Object",
       "desc": "QTable's column scoped slot property",
-      "examples": [ "# :props=\"props\"" ],
+      "examples": ["# :props=\"props\""],
       "category": "general"
     },
 

package/src/components/table/QTh.js

@@ -13,56 +13,61 @@ export default createComponent({
     autoWidth: Boolean
   },
 
-  emits: [ 'click' ],
+  emits: ['click'],
 
-  setup (props, { slots, emit }) {
+  setup(props, { slots, emit }) {
     const vm = getCurrentInstance()
-    const { proxy: { $q } } = vm
+    const {
+      proxy: { $q }
+    } = vm
 
-    const onClick = evt => { emit('click', evt) }
+    const onClick = evt => {
+      emit('click', evt)
+    }
 
     return () => {
       if (props.props === void 0) {
-        return h('th', {
-          class: props.autoWidth === true ? 'q-table--col-auto-width' : '',
-          onClick
-        }, hSlot(slots.default))
+        return h(
+          'th',
+          {
+            class: props.autoWidth === true ? 'q-table--col-auto-width' : '',
+            onClick
+          },
+          hSlot(slots.default)
+        )
       }
 
       let col, child
       const name = vm.vnode.key
 
       if (name) {
-        col = props.props.colsMap[ name ]
+        col = props.props.colsMap[name]
         if (col === void 0) return
-      }
-      else {
+      } else {
         col = props.props.col
       }
 
       if (col.sortable === true) {
-        const action = col.align === 'right'
-          ? 'unshift'
-          : 'push'
+        const action = col.align === 'right' ? 'unshift' : 'push'
 
         child = hUniqueSlot(slots.default, [])
-        child[ action ](
+        child[action](
           h(QIcon, {
             class: col.__iconClass,
             name: $q.iconSet.table.arrowUp
           })
         )
-      }
-      else {
+      } else {
         child = hSlot(slots.default)
       }
 
       const data = {
-        class: col.__thClass
-          + (props.autoWidth === true ? ' q-table--col-auto-width' : ''),
+        class:
+          col.__thClass +
+          (props.autoWidth === true ? ' q-table--col-auto-width' : ''),
         style: col.headerStyle,
         onClick: evt => {
-          col.sortable === true && props.props.sort(col)
+          if (col.sortable === true) props.props.sort(col)
           onClick(evt)
         }
       }

package/src/components/table/QTh.json

@@ -7,7 +7,7 @@
     "props": {
       "type": "Object",
       "desc": "QTable's header column scoped slot property",
-      "examples": [ "# :props=\"props\"" ],
+      "examples": ["# :props=\"props\""],
       "category": "general"
     },
 

package/src/components/table/QTr.js

@@ -11,16 +11,24 @@ export default createComponent({
     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' : '')
+  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', {
-      style: props.props?.__trStyle,
-      class: classes.value
-    }, hSlot(slots.default))
+    return () =>
+      h(
+        'tr',
+        {
+          style: props.props?.__trStyle,
+          class: classes.value
+        },
+        hSlot(slots.default)
+      )
   }
 })

package/src/components/table/QTr.json

@@ -7,7 +7,7 @@
     "props": {
       "type": "Object",
       "desc": "QTable's row scoped slot property",
-      "examples": [ "# :props=\"props\"" ],
+      "examples": ["# :props=\"props\""],
       "category": "general"
     },
 

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

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

package/src/components/table/index.js

@@ -3,9 +3,4 @@ import QTh from './QTh.js'
 import QTr from './QTr.js'
 import QTd from './QTd.js'
 
-export {
-  QTable,
-  QTh,
-  QTr,
-  QTd
-}
+export { QTable, QTh, QTr, QTd }

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

@@ -6,61 +6,71 @@ export const useTableColumnSelectionProps = {
   visibleColumns: Array
 }
 
-export function useTableColumnSelection (props, computedPagination, hasSelectionMode) {
+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 ]
+    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
-      }))
+          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
+    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 }`
+      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' : '' }` : ''),
+        __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,
+        __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
+        __tdClass:
+          col.classes !== void 0
+            ? typeof col.classes !== 'function'
+              ? () => alignClass + ' ' + col.classes
+              : row => alignClass + ' ' + col.classes(row)
+            : () => alignClass
       }
     })
   })
@@ -68,16 +78,16 @@ export function useTableColumnSelection (props, computedPagination, hasSelection
   const computedColsMap = computed(() => {
     const names = {}
     computedCols.value.forEach(col => {
-      names[ col.name ] = col
+      names[col.name] = col
     })
     return names
   })
 
-  const computedColspan = computed(() => {
-    return props.tableColspan !== void 0
+  const computedColspan = computed(() =>
+    props.tableColspan !== void 0
       ? props.tableColspan
       : computedCols.value.length + (hasSelectionMode.value === true ? 1 : 0)
-  })
+  )
 
   return {
     colList,

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

@@ -1,25 +1,26 @@
 import { computed, watch, nextTick } from 'vue'
 
 export const useTableFilterProps = {
-  filter: [ String, Object ],
+  filter: [String, Object],
   filterMethod: Function
 }
 
-export function useTableFilter (props, setPagination) {
-  const computedFilterMethod = computed(() => (
+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 rows.filter(row =>
+            cols.some(col => {
+              const val = String(cellValue(col, row))
+              const haystack =
+                val === 'undefined' || val === 'null' ? '' : val.toLowerCase()
               return haystack.indexOf(lowerTerms) !== -1
             })
           )
         }
-  ))
+  )
 
   watch(
     () => props.filter,

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

@@ -1,15 +1,15 @@
 import { ref, computed, watch, nextTick } from 'vue'
 
-function samePagination (oldPag, newPag) {
+function samePagination(oldPag, newPag) {
   for (const prop in newPag) {
-    if (newPag[ prop ] !== oldPag[ prop ]) {
+    if (newPag[prop] !== oldPag[prop]) {
       return false
     }
   }
   return true
 }
 
-function fixPagination (p) {
+function fixPagination(p) {
   if (p.page < 1) {
     p.page = 1
   }
@@ -23,44 +23,51 @@ export const useTablePaginationProps = {
   pagination: Object,
   rowsPerPageOptions: {
     type: Array,
-    default: () => [ 5, 7, 10, 15, 20, 25, 50, 0 ]
+    default: () => [5, 7, 10, 15, 20, 25, 50, 0]
   },
 
-  'onUpdate:pagination': [ Function, Array ]
+  'onUpdate:pagination': [Function, Array]
 }
 
-export function useTablePaginationState (vm, getCellValue) {
+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)
+    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
+    const pag =
+      props['onUpdate:pagination'] !== void 0
+        ? { ...innerPagination.value, ...props.pagination }
+        : innerPagination.value
 
     return fixPagination(pag)
   })
 
-  const isServerSide = computed(() => computedPagination.value.rowsNumber !== void 0)
+  const isServerSide = computed(
+    () => computedPagination.value.rowsNumber !== void 0
+  )
 
-  function sendServerRequest (pagination) {
+  function sendServerRequest(pagination) {
     requestServerInteraction({
       pagination,
       filter: props.filter
     })
   }
 
-  function requestServerInteraction (prop = {}) {
+  function requestServerInteraction(prop = {}) {
     nextTick(() => {
       emit('request', {
         pagination: prop.pagination || computedPagination.value,
@@ -70,7 +77,7 @@ export function useTablePaginationState (vm, getCellValue) {
     })
   }
 
-  function setPagination (val, forceServerRequest) {
+  function setPagination(val, forceServerRequest) {
     const newPagination = fixPagination({
       ...computedPagination.value,
       ...val
@@ -89,12 +96,11 @@ export function useTablePaginationState (vm, getCellValue) {
     }
 
     if (
-      props.pagination !== void 0
-      && props[ 'onUpdate:pagination' ] !== void 0
+      props.pagination !== void 0 &&
+      props['onUpdate:pagination'] !== void 0
     ) {
       emit('update:pagination', newPagination)
-    }
-    else {
+    } else {
       innerPagination.value = newPagination
     }
   }
@@ -109,14 +115,25 @@ export function useTablePaginationState (vm, getCellValue) {
   }
 }
 
-export function useTablePagination (vm, innerPagination, computedPagination, isServerSide, setPagination, filteredSortedRowsNumber) {
-  const { props, emit, proxy: { $q } } = vm
-
-  const computedRowsNumber = computed(() => (
+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
@@ -130,67 +147,73 @@ export function useTablePagination (vm, innerPagination, computedPagination, isS
 
   const isFirstPage = computed(() => computedPagination.value.page === 1)
 
-  const pagesNumber = computed(() => (
+  const pagesNumber = computed(() =>
     computedPagination.value.rowsPerPage === 0
       ? 1
       : Math.max(
-        1,
-        Math.ceil(computedRowsNumber.value / computedPagination.value.rowsPerPage)
-      )
-  ))
+          1,
+          Math.ceil(
+            computedRowsNumber.value / computedPagination.value.rowsPerPage
+          )
+        )
+  )
 
-  const isLastPage = computed(() => (
+  const isLastPage = computed(() =>
     lastRowIndex.value === 0
       ? true
       : computedPagination.value.page >= pagesNumber.value
-  ))
+  )
 
   const computedRowsPerPageOptions = computed(() => {
-    const opts = props.rowsPerPageOptions.includes(innerPagination.value.rowsPerPage)
+    const opts = props.rowsPerPageOptions.includes(
+      innerPagination.value.rowsPerPage
+    )
       ? props.rowsPerPageOptions
-      : [ innerPagination.value.rowsPerPage ].concat(props.rowsPerPageOptions)
+      : [innerPagination.value.rowsPerPage].concat(props.rowsPerPageOptions)
 
     return opts.map(count => ({
-      label: count === 0 ? $q.lang.table.allRows : '' + count,
+      label: count === 0 ? $q.lang.table.allRows : String(count),
       value: count
     }))
   })
 
-  watch(pagesNumber, (lastPage, oldLastPage) => {
-    if (lastPage === oldLastPage) return
+  watch(pagesNumber, (newLastPage, oldLastPage) => {
+    if (newLastPage === oldLastPage) return
 
     const currentPage = computedPagination.value.page
-    if (lastPage && !currentPage) {
+    if (newLastPage && !currentPage) {
       setPagination({ page: 1 })
-    }
-    else if (lastPage < currentPage) {
-      setPagination({ page: lastPage })
+    } else if (newLastPage < currentPage) {
+      setPagination({ page: newLastPage })
     }
   })
 
-  function firstPage () {
+  function firstPage() {
     setPagination({ page: 1 })
   }
 
-  function prevPage () {
+  function prevPage() {
     const { page } = computedPagination.value
     if (page > 1) {
       setPagination({ page: page - 1 })
     }
   }
 
-  function nextPage () {
+  function nextPage() {
     const { page, rowsPerPage } = computedPagination.value
-    if (lastRowIndex.value > 0 && page * rowsPerPage < computedRowsNumber.value) {
+    if (
+      lastRowIndex.value > 0 &&
+      page * rowsPerPage < computedRowsNumber.value
+    ) {
       setPagination({ page: page + 1 })
     }
   }
 
-  function lastPage () {
+  function lastPage() {
     setPagination({ page: pagesNumber.value })
   }
 
-  if (props[ 'onUpdate:pagination' ] !== void 0) {
+  if (props['onUpdate:pagination'] !== void 0) {
     emit('update:pagination', { ...computedPagination.value })
   }