@monoui/vuejs 1.1.8 → 1.1.12

package/package.json

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

package/src/components/Button/Button.vue

@@ -1,11 +1,9 @@
 <template>
 	<mui-button-core v-on="$listeners" v-bind="$props" :class="innerClass">
 		<template v-if="!hasSlot">
-			<b-spinner
-				v-if="loading"
-				:small="true"
-				:class="['mr-1', spinnerClass]"
-			/>
+			<span class="mr-1" v-if="loading">
+				<b-spinner :small="true" :class="spinnerClass" />
+			</span>
 			<mui-icon
 				v-if="!loading && icon"
 				:icon="icon"
@@ -13,7 +11,12 @@
 			/>
 			{{ text }}
 		</template>
-		<slot v-else></slot>
+		<template v-else>
+			<span class="mr-1" v-if="loading">
+				<b-spinner :small="true" :class="spinnerClass" />
+			</span>
+			<slot></slot>
+		</template>
 	</mui-button-core>
 </template>
 <script>

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"
@@ -294,6 +295,11 @@ export default {
 			required: false,
 			default: ""
 		},
+		tableStyle: {
+			type: String,
+			required: false,
+			default: ""
+		},
 		isResponsive: {
 			type: Boolean,
 			required: false,
@@ -414,9 +420,9 @@ export default {
 		},
 		sortableIconClass(column) {
 			if (this.isSorted(column)) {
-				return "text-primary";
+				return this.sortingIconActiveClass;
 			}
-			return "text-muted";
+			return this.sortingIconClass;
 		},
 		isSorted(column) {
 			return this.sorting.some(x => x.Column === column);