@monoui/vuejs 1.1.10

package/src/components/Table/Table.vue

@@ -0,0 +1,548 @@
+<template>
+	<div>
+		<div
+			:class="{
+				'table-responsive': isResponsive,
+				'table-relative': isLoading
+			}"
+		>
+			<div
+				v-if="isLoading && !isEmpty"
+				style="position: absolute; width: 100%; height: 100%; left:0; top:0;"
+			>
+				<div
+					class="d-flex align-items-center justify-content-center w-100 h-100"
+				>
+					<b-spinner variant="primary" />
+				</div>
+				<div
+					style="background:#ddd; opacity: 0.4; position: absolute; width: 100%; height:100%; left:0; top:0;"
+				/>
+			</div>
+			<table
+				:class="
+					`table mt-0 w-100 d-block d-md-table table-hover flex-grow-1 ${tableClass}`
+				"
+			>
+				<thead :class="`${headerClass} w-100`">
+					<tr>
+						<slot name="header" v-bind="columns">
+							<template
+								v-for="(columnValue,
+								columnKey,
+								indexColumn) in columns"
+							>
+								<template>
+									<th
+										:key="indexColumn"
+										:class="{
+											'has-sort': isSortable(columnKey),
+											'has-sorted-th': isSorted(columnKey)
+										}"
+										@click="toggleSort(columnKey)"
+									>
+										<slot
+											:name="`header-${columnKey}`"
+											v-bind="{
+												key: columnKey,
+												value: columnValue,
+												index: indexColumn
+											}"
+										>
+											{{ columnValue }}
+											<small
+												v-if="showColumnSubHeader"
+												class="d-block text-muted"
+											>
+												{{ columnKey }}
+											</small>
+											<span
+												v-if="isSortable(columnKey)"
+												class="sort-position"
+											>
+												<component
+													:is="
+														sortableIcon(columnKey)
+													"
+													:class="
+														sortableIconClass(
+															columnKey
+														)
+													"
+												/>
+											</span>
+										</slot>
+									</th>
+								</template>
+							</template>
+						</slot>
+					</tr>
+					<template v-if="filterable">
+						<tr v-if="filterable.length !== 0">
+							<th
+								class="p-0 p-t-1 p-b-1"
+								:colspan="Object.keys(columns).length"
+							>
+								<b-form-input
+									type="search"
+									placeholder="Search"
+									v-model="searchWord"
+								/>
+							</th>
+						</tr>
+					</template>
+				</thead>
+				<tbody>
+					<tr class="text-center" v-if="isDataEmpty">
+						<td :colspan="Object.keys(columns).length">
+							<slot name="empty-data">
+								<span> {{ emptyMessage }}</span>
+							</slot>
+						</td>
+					</tr>
+					<template v-if="isLoading && isEmpty">
+						<tr v-for="i of settings.itemPerPage" :key="'row-' + i">
+							<td
+								v-for="col in Object.keys(columns)"
+								:key="'col-' + col"
+								class="text-center"
+							>
+								<div
+									:style="{
+										opacity: (10 - i) * 0.15
+									}"
+								>
+									<slot :name="'loading-' + col">
+										<b-skeleton width="70%" />
+									</slot>
+								</div>
+							</td>
+						</tr>
+					</template>
+					<slot name="body" v-bind="tableData" v-if="!isDataEmpty">
+						<slot
+							name="row-base"
+							v-bind="{ row: row, index: rowIndex }"
+							v-for="(row, rowIndex) in tableData"
+						>
+							<tr :key="rowIndex">
+								<slot
+									name="row"
+									v-bind="{ row: row, index: rowIndex }"
+								>
+									<template
+										v-for="(columnValue,
+										columnKey,
+										indexColumn) in columns"
+									>
+										<template>
+											<slot
+												:name="
+													`column-base-${columnKey}`
+												"
+												v-bind="{
+													row: row,
+													index: rowIndex
+												}"
+											>
+												<td
+													:key="indexColumn"
+													:class="{
+														'has-sorted-td': isSorted(
+															columnKey
+														)
+													}"
+												>
+													<template>
+														<slot
+															:name="
+																`column-${columnKey}`
+															"
+															v-bind="{
+																row: row,
+																index: rowIndex
+															}"
+														>
+															{{
+																getRowValue(
+																	row,
+																	columnKey
+																)
+															}}
+														</slot>
+													</template>
+												</td>
+											</slot>
+										</template>
+									</template>
+								</slot>
+							</tr>
+						</slot>
+					</slot>
+				</tbody>
+			</table>
+		</div>
+		<slot name="pagination-seperator" />
+		<slot name="pagination">
+			<div class="d-flex justify-content-between align-items-center mt-2">
+				<slot name="pagination-filters">
+					<div v-show="!isDataEmpty">
+						<span>Show</span>
+						<b-dropdown
+							:text="itemPerPageText"
+							class="m-md-2"
+							size="sm"
+							variant="light"
+						>
+							<template v-for="perPage in filteredPerPageValues">
+								<b-dropdown-item
+									:key="'per-page-' + perPage"
+									@click="changeItemPerPage(perPage)"
+								>
+									{{ perPage }}
+								</b-dropdown-item>
+							</template>
+							<b-dropdown-divider
+								v-if="
+									filteredPerPageValues &&
+										filteredPerPageValues.length
+								"
+							></b-dropdown-divider>
+							<b-dropdown-item
+								@click="
+									changeItemPerPage(settings.totalItemCount)
+								"
+							>
+								All
+							</b-dropdown-item>
+						</b-dropdown>
+					</div>
+				</slot>
+				<slot name="pagination-center" v-bind="settings">
+					<span v-show="!isDataEmpty">
+						{{ settings.totalItemCount }} rows
+					</span>
+				</slot>
+				<slot name="pagination-buttons">
+					<b-pagination
+						v-if="settings.pageCount > 1"
+						v-model="settings.currentPage"
+						:total-rows="settings.totalItemCount"
+						:per-page="settings.itemPerPage"
+						@change="changePage"
+						v-bind="pagination"
+					/>
+				</slot>
+			</div>
+		</slot>
+		<slot name="footer" />
+	</div>
+</template>
+<style>
+.table-relative {
+	position: relative;
+}
+</style>
+<script>
+import IconArrowUp from "./Icons/ArrowUp.vue";
+import IconArrowUpLong from "./Icons/ArrowUpLong.vue";
+import IconArrowDown from "./Icons/ArrowDown.vue";
+import IconArrowDownLong from "./Icons/ArrowDownLong.vue";
+import IconSorting from "./Icons/Sorting.vue";
+import IconSortingAZ from "./Icons/SortingAZ.vue";
+import IconSortingArrows from "./Icons/SortingArrows.vue";
+export default {
+	name: "mui-table",
+	components: {
+		IconArrowUp,
+		IconArrowUpLong,
+		IconArrowDown,
+		IconArrowDownLong,
+		IconSorting,
+		IconSortingAZ,
+		IconSortingArrows
+	},
+	props: {
+		columns: {
+			type: Object,
+			required: false
+		},
+		sortable: {
+			type: Array,
+			required: false
+		},
+		showColumnSubHeader: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		requestFunction: {
+			type: Function,
+			required: false
+		},
+		filterable: {
+			type: Array,
+			required: false
+		},
+		headerClass: {
+			type: String,
+			required: false,
+			default: ""
+		},
+		tableClass: {
+			type: String,
+			required: false,
+			default: ""
+		},
+		isResponsive: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		pagination: {
+			type: Object,
+			required: false,
+			default: () => {
+				return { class: "m-0", size: "sm" };
+			}
+		},
+		perPageValues: {
+			type: Array,
+			required: false,
+			default: () => [10, 25, 50, 100, 250]
+		},
+		emptyMessage: {
+			type: String,
+			required: false,
+			default: "No data avaible in table"
+		},
+		autoLoad: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		filters: {
+			type: Array,
+			required: false,
+			default: () => []
+		},
+		sorting: {
+			type: Array,
+			required: false,
+			default: () => []
+		},
+		sortingIconName: {
+			type: String,
+			required: false,
+			default: "icon-sorting-a-z"
+		},
+		sortingIconClass: {
+			type: String,
+			required: false,
+			default: "text-muted"
+		},
+		sortingIconActiveClass: {
+			type: String,
+			required: false,
+			default: "text-primary"
+		},
+		sortingIconAscName: {
+			type: String,
+			required: false,
+			default: "icon-arrow-up-long"
+		},
+		sortingIconDescName: {
+			type: String,
+			required: false,
+			default: "icon-arrow-down-long"
+		}
+	},
+	watch: {
+		searchWord(word) {
+			this.addFilter(word);
+		}
+	},
+	data() {
+		return {
+			settings: {
+				currentPage: 1,
+				pageCount: 0,
+				itemPerPage: 10,
+				totalItemCount: 0
+			},
+			tableData: [],
+			searchWord: null,
+			isDataEmpty: false,
+			isLoading: false
+		};
+	},
+	computed: {
+		filteredPerPageValues() {
+			const values = [];
+			for (const value of this.perPageValues) {
+				if (value <= this.settings.totalItemCount) {
+					values.push(value);
+				}
+			}
+			return values;
+		},
+		itemPerPageText() {
+			if (this.settings.itemPerPage >= this.settings.totalItemCount) {
+				return "All";
+			}
+			return `${this.settings.itemPerPage}`;
+		},
+		isEmpty() {
+			return this.settings.totalItemCount <= 0;
+		}
+	},
+	async mounted() {
+		if (this.autoLoad) await this.getValues();
+	},
+	created() {},
+	methods: {
+		sortableIcon(column) {
+			const currentSort = this.sorting.find(x => x.Column === column);
+			if (!currentSort) {
+				return this.sortingIconName;
+			}
+			if (currentSort.Asc) {
+				return this.sortingIconAscName;
+			} else {
+				return this.sortingIconDescName;
+			}
+		},
+		sortableIconClass(column) {
+			if (this.isSorted(column)) {
+				return this.sortingIconActiveClass;
+			}
+			return this.sortingIconClass;
+		},
+		isSorted(column) {
+			return this.sorting.some(x => x.Column === column);
+		},
+		async toggleSort(column) {
+			if (!this.isSortable(column)) {
+				return;
+			}
+			let currentSort = this.sorting.find(x => x.Column === column);
+			if (!currentSort) {
+				currentSort = { Column: column, Asc: true };
+				this.sorting.push(currentSort);
+			} else {
+				if (!currentSort.Asc) {
+					this.sorting.splice(this.sorting.indexOf(currentSort), 1);
+				} else {
+					currentSort.Asc = false;
+				}
+			}
+
+			await this.getValues();
+		},
+		isSortable(column) {
+			if (!this.sortable) return false;
+			if (this.sortable.indexOf(column) > -1) return true;
+			return false;
+		},
+		getRowValue(row, key) {
+			const splitted = key.split(".");
+			return splitted.reduce(
+				(obj, key) =>
+					obj && obj[key] !== "undefined" ? obj[key] : undefined,
+				row
+			);
+		},
+		async getValues() {
+			this.isLoading = true;
+			this.$emit("loading", this.isLoading);
+			const { currentPage, itemPerPage } = this.settings;
+
+			let result = await this.requestFunction(
+				this.filters,
+				this.sorting,
+				currentPage,
+				itemPerPage
+			);
+
+			if (!result || result.status !== 200) {
+				this.isLoading = false;
+				this.isDataEmpty = true;
+				this.$emit("loading", this.isLoading);
+				return;
+			}
+
+			const resultData = result.data.data
+				? result.data.data
+				: result.data.Data;
+
+			this.settings.currentPage =
+				resultData.currentPage || resultData.CurrentPage;
+			this.settings.pageCount =
+				resultData.pageCount || resultData.PageCount;
+			this.settings.itemPerPage =
+				resultData.itemPerPage || resultData.ItemPerPage;
+			this.settings.totalItemCount =
+				resultData.totalItemCount || resultData.TotalItemCount;
+
+			this.tableData = resultData.data || resultData.Data;
+			if (this.settings.totalItemCount == 0) {
+				this.isDataEmpty = true;
+			} else {
+				this.isDataEmpty = false;
+			}
+
+			this.settings.currentPage = currentPage;
+			this.settings.itemPerPage = itemPerPage;
+			if (
+				this.settings.itemPerPage ===
+				(resultData.totalItemCount || resultData.TotalItemCount)
+			) {
+				this.settings.pageCount = 1;
+			}
+			this.isLoading = false;
+			this.$emit("loading", this.isLoading);
+		},
+		changePage(page) {
+			this.settings.currentPage = page;
+
+			this.getValues();
+		},
+		changeItemPerPage(value) {
+			this.settings.itemPerPage = value;
+			this.getValues();
+		},
+		isLessThanTotalItemCount(val) {
+			return this.settings.totalItemCount > val;
+		},
+		/** */
+		refresh() {
+			this.getValues();
+		},
+		addFilter(word) {
+			if (!word || word.length < 3) {
+				this.getValues();
+				return;
+			}
+
+			this.getValues();
+		}
+	}
+};
+</script>
+<style scoped>
+.has-sort {
+	cursor: pointer;
+}
+
+.sort-position {
+	float: right;
+}
+
+.has-sorted-th {
+	background-color: #e5e7eb;
+}
+
+.has-sorted-td {
+	background-color: #f9fafb;
+}
+</style>

package/src/components/Table/index.js

@@ -0,0 +1,3 @@
+import Table from "./Table.vue";
+
+export default Table;

package/src/components/Tabs/Tab.vue

@@ -0,0 +1,36 @@
+<template>
+	<b-tab v-on="$listeners" v-bind="$props" :title="title">
+		<template slot="title">
+			<slot name="title"></slot>
+		</template>
+		<slot name="content"></slot>
+		<slot></slot>
+	</b-tab>
+</template>
+
+<script>
+/**
+ * MonoUI Tab Component
+ */
+export default {
+	name: "mui-tab",
+	props: {
+		/**
+		 * Tab title
+		 * @type String
+		 */
+		title: {
+			type: String,
+			required: false
+		},
+		/**
+		 * Disable component when value is true.
+		 * @type Boolean
+		 */
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	}
+};
+</script>

package/src/components/Tabs/Tabs.vue

@@ -0,0 +1,44 @@
+<template>
+	<b-tabs v-on="$listeners" v-bind="$props" v-model="tabIndex">
+		<slot></slot>
+	</b-tabs>
+</template>
+
+<script>
+/**
+ * MonoUI Tabs Component
+ */
+export default {
+	name: "mui-tabs",
+	watch: {
+		tabIndex(val) {
+			this.$emit("input", val);
+		}
+	},
+	props: {
+		/**
+		 * Tabs change state value.
+		 */
+		value: {},
+		active: {},
+		pills: {},
+		card: {},
+		vertical: {},
+		small: {},
+		"content-class": {},
+		"nav-class": {},
+		"nav-wrapper-class": {},
+		"active-nav-item-class": {},
+		"active-tab-class": {},
+		"no-fade": {}
+	},
+	data() {
+		return {
+			tabIndex: 0
+		};
+	},
+	mounted() {
+		this.tabIndex = this.value;
+	}
+};
+</script>

package/src/components/Tabs/index.js

@@ -0,0 +1,4 @@
+import Tab from "./Tab";
+import Tabs from "./Tabs";
+
+export { Tab, Tabs };