| Current Path : /var/www/html/mswp/node_modules/vuesax/src/components/vsTable/Base/ |
| Current File : /var/www/html/mswp/node_modules/vuesax/src/components/vsTable/Base/vsTable.ts |
import * as _ from 'lodash'
import { VNode } from 'vue'
import { Component, Prop } from 'vue-property-decorator'
import VsComponent from '../../../mixins/component'
@Component
export default class VsTable extends VsComponent {
colspan: number = 0
@Prop({}) value: any
@Prop({ default: false, type: Boolean }) striped: any
@Prop({ default: false, type: Boolean }) loading: boolean
// @Prop({ default: false, type: Boolean }) multiple: boolean
mounted() {
const tds = (this.$refs as any).thead.querySelectorAll('th')
this.colspan = tds.length
}
get isMultipleSelected() {
return _.isArray(this.value)
}
selected(val: any) {
if (this.isMultipleSelected) {
this.selectedMultiple(val)
} else {
this.$emit('input', val)
}
}
selectedMultiple(val: any) {
const newVal = this.value
if (this.value.includes(val)) {
newVal.splice(this.value.indexOf(val), 1)
} else {
newVal.push(val)
}
this.$emit('input', newVal)
}
public render(h: any): VNode {
const footer = h('footer', {
staticClass: 'vs-table__footer'
}, [
this.$slots.footer
])
const header = h('header', {
staticClass: 'vs-table__header'
}, [
this.$slots.header
])
const thead = h('thead', {
ref: 'thead',
staticClass: 'vs-table__thead'
}, [
this.$slots.thead
])
const notFound = h('tbody', {
staticClass: 'vs-table_not-found'
}, [
h('tr', [
h('td', {
attrs: {
colspan: this.colspan
}
}, [
this.$slots.notFound || 'No matching records found'
])
])
])
const tbody = h('tbody', {
staticClass: 'vs-table__tbody'
}, [
this.$slots.tbody,
])
const table = h('div', {
staticClass: 'vs-table',
class: {
isSelectedValue: this.value,
striped: this.striped,
isMultipleSelected: this.isMultipleSelected
}
}, [
h('table', {}, [
thead,
tbody,
notFound
])
])
return h('div', {
staticClass: 'vs-table-content',
}, [
this.$slots.header && header,
table,
this.$slots.footer && footer
])
}
}