@monoui/vuejs 1.1.17 → 1.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@monoui/vuejs",
-	"version": "1.1.17",
+	"version": "1.1.18",
 	"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,11 @@ export default {
 			type: Number,
 			required: false,
 			default: 300
+		},
+		paginationClass: {
+			type: String,
+			required: false,
+			default: ""
 		}
 	},
 	watch: {
@@ -417,6 +426,12 @@ export default {
 	},
 	data() {
 		return {
+			defaultSettings: {
+				currentPage: 1,
+				pageCount: 0,
+				itemPerPage: 10,
+				totalItemCount: 0
+			},
 			settings: {
 				currentPage: 1,
 				pageCount: 0,
@@ -451,27 +466,45 @@ 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.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.defaultSettings.currentPage
+			);
+			this.settings.itemPerPage = this.getHistoryParameter(
+				"limit",
+				this.defaultSettings.itemPerPage
+			);
+			if (this.searchColumn) {
+				this.searchWord = this.getHistoryParameter(
+					`f-${this.searchColumn}`,
+					this.searchWord
+				);
+			}
+			this.loadHistoryFilters();
+			this.loadHistorySorting();
+			// console.log("loadHistory:settings", this.settings);
+			// console.log("loadHistory:filters", this.filters);
+			// console.log("loadHistory:sorting", this.sorting);
+		},
 		sortableIcon(column) {
 			const currentSort = this.sorting.find(x => x.Column === column);
 			if (!currentSort) {
@@ -824,13 +857,13 @@ export default {
 		},
 		addHistoryParameter(name, value, storage = this.historyStorage) {
 			if (!this.history || !name || !storage) return;
-
+			// console.log("addHistoryParameter", name, value, storage);
 			try {
 				if (storage === "query") {
 					const url = new URL(window.location);
 					const historyName = this.getHistoryName(name);
 					url.searchParams.set(historyName, value);
-					window.history.pushState({}, "", url);
+					window.history.pushState(null, "", url);
 					return;
 				}