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

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

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
  }
}