@monoui/vuejs 1.1.10 → 1.1.13

package/package.json

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

package/src/components/Modal/Modal.vue

@@ -5,7 +5,12 @@
 		v-bind="$props"
 		:title="displayTitle"
 		v-model="visible"
+		@hidden="hidden()"
 		:hide-footer="hideFooter"
+		:dialog-class="isFullScreen ? 'modal-dialog-fullScreen' : ''"
+		:content-class="isFullScreen ? 'modal-content-fullScreen' : ''"
+		:body-class="isFullScreen ? 'modal-body-fullScreen' : ''"
+		:header-class="isFullScreen ? 'modal-header-fullScreen' : ''"
 	>
 		<mui-loader :loading="loading" />
 
@@ -20,8 +25,32 @@
         <slot name="modal-title"></slot>
       </template> -->
 
-		<template v-if="!loading" #modal-header>
-			<slot name="modal-header"></slot>
+		<template v-if="!loading" #modal-header="{close}">
+			<slot name="modal-header">
+				<div class="d-flex align-items-center">
+					<h5 class="modal-title">{{ displayTitle }}</h5>
+					<mui-button
+						v-if="enableFullScreen"
+						variant="light"
+						fixed-width
+						class="ml-2"
+						@click="fullScreeModalChange()"
+						:icon="isFullScreen ? 'compress' : 'expand'"
+						:title="
+							isFullScreen
+								? 'Disable Full Screen Mode'
+								: 'Enable Full Screen Mode'
+						"
+					></mui-button>
+				</div>
+				<mui-button
+					@click="close()"
+					class="close"
+					style="font-size:.85rem;"
+				>
+					<mui-icon icon="times" size="xs" />
+				</mui-button>
+			</slot>
 		</template>
 
 		<template v-slot:modal-footer="{ ok, cancel }">
@@ -46,6 +75,11 @@
 <script>
 export default {
 	name: "mui-modal",
+	data() {
+		return {
+			isFullScreen: false
+		};
+	},
 	computed: {
 		visible: {
 			get() {
@@ -110,6 +144,10 @@ export default {
 		cancelTitle: {
 			type: String,
 			default: "Cancel"
+		},
+		enableFullScreen: {
+			type: Boolean,
+			default: false
 		}
 	},
 	methods: {
@@ -118,8 +156,45 @@ export default {
 		},
 		hide() {
 			this.$refs.modal.hide();
+		},
+		hidden() {
+			this.isFullScreen = false;
+			this.emitChange();
+		},
+		fullScreeModalChange() {
+			this.isFullScreen = !this.isFullScreen;
+			this.emitChange();
+		},
+		emitChange() {
+			this.$emit("full-screen-modal-change", this.isFullScreen);
 		}
 	}
 };
 </script>
-<style scoped></style>
+<style>
+.modal-dialog-fullScreen {
+	max-width: 100% !important;
+	height: 100%;
+	margin: 0 !important;
+	padding: 0 !important;
+}
+
+.modal-content-fullScreen {
+	height: 100%;
+	width: 100%;
+	border: 0;
+	border-radius: 0;
+}
+
+.modal-body-fullScreen {
+	overflow-y: auto;
+	height: 100%;
+}
+
+.modal-header-fullScreen {
+	flex: 0;
+}
+.close:hover {
+	background-color: white !important;
+}
+</style>

package/src/components/Table/Table.vue

@@ -5,6 +5,7 @@
 				'table-responsive': isResponsive,
 				'table-relative': isLoading
 			}"
+			:style="tableStyle"
 		>
 			<div
 				v-if="isLoading && !isEmpty"
@@ -205,16 +206,23 @@
 							<b-dropdown-divider
 								v-if="
 									filteredPerPageValues &&
-										filteredPerPageValues.length
+										filteredPerPageValues.length &&
+										inLimit()
 								"
 							></b-dropdown-divider>
-							<b-dropdown-item
-								@click="
-									changeItemPerPage(settings.totalItemCount)
-								"
-							>
-								All
-							</b-dropdown-item>
+
+							<template>
+								<b-dropdown-item
+									v-if="inLimit()"
+									@click="
+										changeItemPerPage(
+											settings.totalItemCount
+										)
+									"
+								>
+									All ({{ settings.totalItemCount }})
+								</b-dropdown-item>
+							</template>
 						</b-dropdown>
 					</div>
 				</slot>
@@ -294,6 +302,11 @@ export default {
 			required: false,
 			default: ""
 		},
+		tableStyle: {
+			type: String,
+			required: false,
+			default: ""
+		},
 		isResponsive: {
 			type: Boolean,
 			required: false,
@@ -314,7 +327,7 @@ export default {
 		emptyMessage: {
 			type: String,
 			required: false,
-			default: "No data avaible in table"
+			default: "No data available in table"
 		},
 		autoLoad: {
 			type: Boolean,
@@ -373,7 +386,8 @@ export default {
 			tableData: [],
 			searchWord: null,
 			isDataEmpty: false,
-			isLoading: false
+			isLoading: false,
+			limit: 250
 		};
 	},
 	computed: {
@@ -525,6 +539,9 @@ export default {
 			}
 
 			this.getValues();
+		},
+		inLimit() {
+			return this.settings.totalItemCount <= this.limit;
 		}
 	}
 };