bootstrap-vue-wrapper
Version:
Bootstrap 5 components in Vue3 wrapper.
140 lines (139 loc) • 2.73 kB
JavaScript
import { defineComponent as t } from "vue";
const s = t({
name: "BsTable",
props: {
/**
* Field list
*/
fields: {
type: Array,
required: !0
},
/**
* Item list
*/
items: {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type: Array,
required: !0
},
/**
* Items loading
*/
isLoading: {
type: Boolean,
default: !1
},
/**
* Order by field name
*/
orderBy: {
type: String,
default: void 0
},
/**
* Sort is descending or ascending
*/
sortDesc: {
type: Boolean,
default: void 0
},
/**
* th element css lass
*/
thClass: {
type: String,
default: void 0
},
/**
* td element css class
*/
tdClass: {
type: String,
default: void 0
},
/**
* row is clickable
*/
rowClickable: {
type: Boolean,
default: !1
},
emptyText: {
type: String,
default: void 0
},
sortAscIconClass: {
type: String,
default: "bi bi-caret-down-fill"
},
sortDescIconClass: {
type: String,
default: "bi bi-caret-up-fill"
},
/**
* Use skeleton loading instead of spinner when isLoading is true
*/
skeletonLoading: {
type: Boolean,
default: !1
},
skeletonLoadingRowCount: {
type: Number,
default: 20
}
},
emits: ["orderChanged", "rowClicked"],
methods: {
/**
* Is order by active by field?
*
* @param fieldKey
* @returns {boolean}
*/
isActiveOrderBy(e) {
return e === this.orderBy;
},
/**
* Is field sortable?
*
* @param field
* @returns {boolean}
*/
isSortableField(e) {
return e.sort === void 0 || e.sort;
},
/**
* Sort icon class.
*
* @returns {string}
*/
getSortIconClass() {
if (this.sortDesc === void 0)
throw new Error("Sort desc value is null, cannot calculate the sort icon!");
return this.sortDesc ? this.sortDescIconClass : this.sortAscIconClass;
},
/**
* Calcuate sort desc value on click
* Returns null if there is no sortDesc value.
*/
calcSortDesc(e) {
return this.sortDesc === void 0 ? null : this.isOrderByChanged(e) ? !1 : !this.sortDesc;
},
/**
* Is order by changed?
*/
isOrderByChanged(e) {
return this.orderBy !== e;
},
/**
* Table head clicked.
*/
onHeadClick(e) {
this.isSortableField(e) && this.$emit("orderChanged", { sortDesc: this.calcSortDesc(e.key), orderBy: e.key });
}
}
});
export {
s as default
};