@monoui/vuejs 1.1.17 → 1.1.20

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@monoui/vuejs",
-	"version": "1.1.17",
+	"version": "1.1.20",
 	"description": "This project will contain MonoFor UI Framework",
 	"main": "./dist/main.js",
 	"repository": "git@gitlab.com:monoui/vuejs.git",

package/src/components/Table/Table.vue

@@ -185,69 +185,73 @@
 		</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>
-						<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"
+			<div :class="paginationClass">
+				<div
+					class="d-flex justify-content-between align-items-center mt-2"
+				>
+					<slot name="pagination-filters">
+						<div>
+							<div v-show="!isDataEmpty">
+								<span>Show</span>
+								<b-dropdown
+									:text="itemPerPageText"
+									class="m-md-2"
+									size="sm"
+									variant="light"
 								>
-									<b-dropdown-item
-										:key="'per-page-' + perPage"
-										@click="changeItemPerPage(perPage)"
+									<template
+										v-for="perPage in filteredPerPageValues"
 									>
-										{{ perPage }}
-									</b-dropdown-item>
-								</template>
-								<b-dropdown-divider
-									v-if="
-										filteredPerPageValues &&
-											filteredPerPageValues.length &&
-											inLimit()
-									"
-								/>
-								<template>
-									<b-dropdown-item
-										v-if="inLimit()"
-										@click="
-											changeItemPerPage(
-												settings.totalItemCount
-											)
+										<b-dropdown-item
+											:key="'per-page-' + perPage"
+											@click="changeItemPerPage(perPage)"
+										>
+											{{ perPage }}
+										</b-dropdown-item>
+									</template>
+									<b-dropdown-divider
+										v-if="
+											filteredPerPageValues &&
+												filteredPerPageValues.length &&
+												inLimit()
 										"
-									>
-										All ({{ settings.totalItemCount }})
-									</b-dropdown-item>
-								</template>
-							</b-dropdown>
+									/>
+									<template>
+										<b-dropdown-item
+											v-if="inLimit()"
+											@click="
+												changeItemPerPage(
+													settings.totalItemCount
+												)
+											"
+										>
+											All ({{ settings.totalItemCount }})
+										</b-dropdown-item>
+									</template>
+								</b-dropdown>
+							</div>
+						</div>
+					</slot>
+					<slot name="pagination-center" v-bind="settings">
+						<div>
+							<span v-show="!isDataEmpty">
+								{{ settings.totalItemCount }} rows
+							</span>
 						</div>
-					</div>
-				</slot>
-				<slot name="pagination-center" v-bind="settings">
-					<div>
-						<span v-show="!isDataEmpty">
-							{{ settings.totalItemCount }} rows
-						</span>
-					</div>
-				</slot>
-				<slot name="pagination-buttons">
-					<div>
-						<b-pagination
-							v-if="settings.pageCount > 1"
-							v-model="settings.currentPage"
-							:total-rows="settings.totalItemCount"
-							:per-page="settings.itemPerPage"
-							@change="changePage"
-							v-bind="pagination"
-						/>
-					</div>
-				</slot>
+					</slot>
+					<slot name="pagination-buttons">
+						<div>
+							<b-pagination
+								v-if="settings.pageCount > 1"
+								v-model="settings.currentPage"
+								:total-rows="settings.totalItemCount"
+								:per-page="settings.itemPerPage"
+								@change="changePage"
+								v-bind="pagination"
+							/>
+						</div>
+					</slot>
+				</div>
 			</div>
 		</slot>
 		<slot name="footer" />
@@ -408,6 +412,16 @@ export default {
 			type: Number,
 			required: false,
 			default: 300
+		},
+		paginationClass: {
+			type: String,
+			required: false,
+			default: ""
+		},
+		perPage: {
+			type: Number,
+			required: false,
+			default: 10
 		}
 	},
 	watch: {
@@ -428,7 +442,8 @@ export default {
 			isDataEmpty: false,
 			isLoading: false,
 			limit: 250,
-			searchDebounceTimeout: null
+			searchDebounceTimeout: null,
+			initialSorting: []
 		};
 	},
 	computed: {
@@ -451,27 +466,43 @@ export default {
 			return this.settings.totalItemCount <= 0;
 		}
 	},
+	created() {
+		this.addPopStateListener();
+	},
 	async mounted() {
-		this.settings.currentPage = this.getHistoryParameter(
-			"page",
-			this.settings.currentPage
-		);
-		this.settings.itemPerPage = this.getHistoryParameter(
-			"limit",
-			this.settings.itemPerPage
-		);
-		if (this.searchColumn) {
-			this.searchWord = this.getHistoryParameter(
-				`f-${this.searchColumn}`,
-				this.searchWord
-			);
-		}
-		this.loadHistoryFilters();
-		this.loadHistorySorting();
+		this.initialSorting = [...this.sorting];
+		this.loadHistory();
 		if (this.autoLoad) await this.getValues();
 	},
-	created() {},
 	methods: {
+		addPopStateListener() {
+			window.addEventListener("popstate", this.popStateEvent);
+		},
+		removePopStateListener() {
+			window.removeEventListener("popstate", this.popStateEvent);
+		},
+		async popStateEvent() {
+			this.loadHistory();
+			await this.getValues(false);
+		},
+		loadHistory() {
+			this.settings.currentPage = this.getHistoryParameter(
+				"page",
+				this.settings.currentPage
+			);
+			this.settings.itemPerPage = this.getHistoryParameter(
+				"limit",
+				this.perPage || this.settings.itemPerPage
+			);
+			if (this.searchColumn) {
+				this.searchWord = this.getHistoryParameter(
+					`f-${this.searchColumn}`,
+					""
+				);
+			}
+			this.loadHistoryFilters();
+			this.loadHistorySorting();
+		},
 		sortableIcon(column) {
 			const currentSort = this.sorting.find(x => x.Column === column);
 			if (!currentSort) {
@@ -522,7 +553,7 @@ export default {
 				row
 			);
 		},
-		async getValues() {
+		async getValues(addHistory = true) {
 			this.isLoading = true;
 			this.$emit("loading", this.isLoading);
 			const { currentPage, itemPerPage } = this.settings;
@@ -534,14 +565,30 @@ export default {
 				itemPerPage
 			);
 
-			this.clearHistoryParameters("f-");
-			for (const filter of this.filters) {
-				this.addHistoryParameter(`f-${filter.Column}`, filter.Value);
-			}
+			if (addHistory) {
+				let state = null;
+				this.clearHistoryParameters("f-");
+				for (const filter of this.filters) {
+					state = this.addHistoryParameter(
+						`f-${filter.Column}`,
+						filter.Value,
+						this.storage,
+						state,
+						false
+					);
+				}
 
-			this.clearHistoryParameters("s-");
-			for (const sort of this.sorting) {
-				this.addHistoryParameter(`s-${sort.Column}`, sort.Asc ? 1 : 0);
+				this.clearHistoryParameters("s-");
+				for (const sort of this.sorting) {
+					state = this.addHistoryParameter(
+						`s-${sort.Column}`,
+						sort.Asc ? 1 : 0,
+						this.storage,
+						state,
+						false
+					);
+				}
+				this.replaceHistory(state);
 			}
 
 			if (!result || result.status !== 200) {
@@ -590,7 +637,7 @@ export default {
 		changePage(page) {
 			this.settings.currentPage = page;
 			this.addHistoryParameter("page", page);
-			this.getValues();
+			this.getValues(false);
 		},
 		changeItemPerPage(value) {
 			this.settings.itemPerPage = value;
@@ -626,12 +673,14 @@ export default {
 				return;
 			}
 
-			if (filter) filter.Value = value;
-			else
+			if (filter) {
+				filter.Value = value;
+			} else {
 				this.filters.push({
 					Column: column,
 					Value: value
 				});
+			}
 			this.getValues();
 		},
 		inLimit() {
@@ -647,7 +696,6 @@ export default {
 			storage = this.historyStorage
 		) {
 			if (!startsWith || !storage) return;
-
 			try {
 				const startsWithName = this.getHistoryName(startsWith);
 
@@ -795,42 +843,72 @@ export default {
 
 				if (filter && !value) {
 					this.filters.splice(this.filters.indexOf(filter), 1);
-				} else if (filter) {
-					filter.Value = value;
-				} else {
-					this.filters.push({
-						Column: column,
-						Value: value
-					});
+				} else if (value) {
+					if (filter) {
+						filter.Value = value;
+					} else {
+						this.filters.push({
+							Column: column,
+							Value: value
+						});
+					}
 				}
 			}
 		},
 		loadHistorySorting() {
+			const latestSorting = [...this.initialSorting];
 			const parameters = this.getHistoryParameters("s-");
 			const trimName = this.getHistoryName("s-");
 			const names = Object.keys(parameters);
 			for (const paramName of names) {
-				const value = parameters[paramName] ? true : false;
+				var paramValue = parameters[paramName];
+				let value = undefined;
+				if (paramValue && paramValue === "1") value = true;
+				else if (paramValue && paramValue === "0") value = false;
 				const column = paramName.replace(trimName, "");
 
-				let sort = this.sorting.find(x => x.Column === column);
+				let sort = latestSorting.find(x => x.Column === column);
 
-				if (sort) {
-					sort.Value = value;
-				} else {
-					this.sorting.push({ Column: column, Asc: value });
+				if (value !== undefined) {
+					if (sort) {
+						sort.Value = value;
+					} else {
+						latestSorting.push({ Column: column, Asc: value });
+					}
 				}
 			}
+			this.sorting.length = 0;
+			for (const sort of latestSorting) {
+				this.sorting.push(sort);
+			}
+		},
+		replaceHistory(state, storage = this.historyStorage) {
+			if (!state) return;
+			if (storage === "query") {
+				window.history.pushState({ url: state.href }, "", state);
+				return;
+			}
 		},
-		addHistoryParameter(name, value, storage = this.historyStorage) {
+		addHistoryParameter(
+			name,
+			value,
+			storage = this.historyStorage,
+			state = null,
+			replace = true
+		) {
 			if (!this.history || !name || !storage) return;
-
 			try {
 				if (storage === "query") {
-					const url = new URL(window.location);
+					let url;
+					if (state) url = state;
+					else url = new URL(window.location);
 					const historyName = this.getHistoryName(name);
 					url.searchParams.set(historyName, value);
-					window.history.pushState({}, "", url);
+					if (!replace) {
+						state = url;
+						return state;
+					}
+					window.history.pushState({ url: url.href }, "", url.href);
 					return;
 				}