@monoui/vuejs 1.1.10

package/src/components/Modal/RemoveAlert.vue

@@ -0,0 +1,58 @@
+<template>
+	<mui-alert
+		:title="title"
+		:text="text"
+		type="warning"
+		ref="alert"
+		:onConfirm="onConfirm"
+		confirmButtonText="<i class='fas fa-fw fa-trash'></i> Yes, delete it!"
+		confirmButtonColor="#d33"
+	/>
+</template>
+
+<script>
+/**
+ * MonoSign Remove Alert Modal Component
+ */
+export default {
+	name: "mui-remove-alert",
+	props: {
+		/**
+		 * Header title.
+		 * @type String
+		 */
+		title: {
+			type: String,
+			required: false,
+			default: ""
+		},
+		/**
+		 * Modal content.
+		 * @type String
+		 */
+		text: {
+			type: String,
+			required: false,
+			default: ""
+		},
+		/**
+		 * The method triggered when confirm button clicked.
+		 * @type Function
+		 * @event onConfirm
+		 */
+		onConfirm: {
+			type: Function,
+			required: false
+		}
+	},
+	methods: {
+		/**
+		 * Show modal
+		 * @public
+		 */
+		show() {
+			this.$refs.alert.show();
+		}
+	}
+};
+</script>

package/src/components/Modal/UnsavedChangesAlert.vue

@@ -0,0 +1,83 @@
+<template>
+	<mui-alert
+		:title="title"
+		:text="text"
+		:type="type"
+		ref="alert"
+		:onConfirm="onConfirm"
+		:confirmButtonText="confirmButtonText"
+		:confirmButtonColor="confirmButtonColor"
+		:denyButtonText="denyButtonText"
+	/>
+</template>
+
+<script>
+/**
+ * MonoSign Unsaved Changes Alert Modal Component
+ */
+export default {
+	name: "mui-unsaved-changes-alert",
+	props: {
+		/**
+		 * Header title.
+		 * @type String
+		 */
+		title: {
+			type: String,
+			required: false,
+			default: "Unsaved Changes"
+		},
+		/**
+		 * Modal content.
+		 * @type String
+		 */
+		text: {
+			type: String,
+			required: false,
+			default: "Are you sure you want to discard?"
+		},
+		confirmButtonText: {
+			type: String,
+			required: false,
+			default: "Yes, discard!"
+		},
+		denyButtonText: {
+			type: String,
+			required: false,
+			default: "No, stay!"
+		},
+		confirmButtonColor: {
+			type: String,
+			required: false,
+			default: "#d33"
+		},
+		type: {
+			type: String,
+			required: false,
+			default: "info"
+		},
+
+		/**
+		 * The method triggered when confirm button clicked.
+		 * @type Function
+		 * @event onConfirm
+		 */
+		onConfirm: {
+			type: Function,
+			required: false
+		}
+	},
+	methods: {
+		/**
+		 * Show modal
+		 * @public
+		 */
+		show() {
+			this.$refs.alert.show();
+		},
+		hide() {
+			this.$refs.alert.hide();
+		}
+	}
+};
+</script>

package/src/components/Modal/index.js

@@ -0,0 +1,6 @@
+import Alert from "./Alert.vue";
+import Modal from "./Modal.vue";
+import RemoveAlert from "./RemoveAlert.vue";
+import UnsavedChangesAlert from "./UnsavedChangesAlert.vue";
+
+export { Alert, Modal, RemoveAlert, UnsavedChangesAlert };

package/src/components/MultiKeyValue/MultiKeyValue.vue

@@ -0,0 +1,359 @@
+<template>
+	<div class="table-responsive">
+		<table
+			class="table table-condensed table-hover text-monospace table-sm"
+		>
+			<thead>
+				<tr>
+					<th
+						scope="col"
+						class="pl-1 pr-1 align-text-bottom non-border"
+					>
+						<select
+							class="form-control"
+							v-model="objectMapping[modeName]"
+						>
+							<option :value="null" disabled
+								>Select {{ modeName }}</option
+							>
+							<option
+								v-for="modeOption in modeOptions"
+								:key="modeOption.value"
+								:value="modeOption.value"
+								>{{ modeOption.text }}</option
+							>
+						</select>
+					</th>
+					<th
+						scope="col"
+						class="pl-1 pr-1 align-text-bottom non-border"
+					>
+						<select
+							class="form-control"
+							v-model="objectMapping[typeName]"
+						>
+							<option :value="null" disabled
+								>Select {{ typeName }}</option
+							>
+							<option
+								v-for="typeOption in typeOptions"
+								:key="typeOption.value"
+								:value="typeOption.value"
+								>{{ typeOption.text }}</option
+							>
+						</select>
+					</th>
+					<th
+						scope="col"
+						class="pl-1 pr-1 align-text-bottom non-border"
+					>
+						<input
+							type="text"
+							class="form-control"
+							v-model="objectMapping[keyName]"
+							@keyup.enter="addMapping"
+							:placeholder="keyName"
+						/>
+					</th>
+					<th
+						scope="col"
+						class="pl-1 pr-1 align-text-bottom non-border"
+					>
+						<input
+							type="text"
+							class="form-control"
+							v-model="objectMapping[valueName]"
+							@keyup.enter="addMapping"
+							:placeholder="valueName"
+						/>
+					</th>
+					<th
+						scope="col"
+						class="pl-1 pr-1 align-text-bottom non-border"
+					>
+						<input
+							type="text"
+							class="form-control"
+							v-model="objectMapping[formatName]"
+							@keyup.enter="addMapping"
+							:placeholder="formatName"
+						/>
+					</th>
+					<th
+						scope="col"
+						class="pl-1 pr-1 align-text-bottom non-border"
+					></th>
+					<th
+						scope="col"
+						class="pl-1 pr-1 align-text-bottom non-border align-middle"
+					>
+						<mui-button
+							variant="light"
+							@click="addMapping"
+							icon="plus-circle"
+							:iconClass="'mr-1'"
+							:text="'Add'"
+						/>
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="(mapping, index) in data" :key="index">
+					<td>
+						<select
+							class="form-control none-border"
+							v-model="mapping[modeName]"
+							@change="emitData"
+						>
+							<option :value="null" disabled
+								>Select {{ modeName }}</option
+							>
+							<option
+								v-for="modeOption in modeOptions"
+								:key="modeOption.value"
+								:value="modeOption.value"
+								>{{ modeOption.text }}</option
+							>
+						</select>
+					</td>
+					<td>
+						<select
+							class="form-control none-border"
+							v-model="mapping[typeName]"
+							@change="emitData"
+						>
+							<option :value="null" disabled
+								>Select {{ typeName }}</option
+							>
+							<option
+								v-for="typeOption in typeOptions"
+								:key="typeOption.value"
+								:value="typeOption.value"
+								>{{ typeOption.text }}</option
+							>
+						</select>
+					</td>
+					<td>
+						<b-input
+							type="text"
+							class="form-control none-border"
+							v-model="mapping[keyName]"
+							@change="emitData"
+						/>
+					</td>
+					<td>
+						<b-input
+							type="text"
+							class="form-control none-border"
+							v-model="mapping[valueName]"
+							@change="emitData"
+						/>
+					</td>
+					<td>
+						<b-input
+							type="text"
+							class="form-control none-border"
+							v-model="mapping[formatName]"
+							@change="emitData"
+						/>
+					</td>
+					<td class="text-center align-middle">
+						<div>
+							<b-checkbox
+								switch
+								v-model="mapping[activeName]"
+								@change="changeActive($event, mapping)"
+							/>
+						</div>
+					</td>
+					<td class="pl-1 pr-0 text-left align-middle">
+						<button
+							class="btn btn-xs"
+							@click="
+								removeMapping(
+									mapping[keyName],
+									mapping[valueName]
+								)
+							"
+						>
+							<i
+								aria-hidden="true"
+								class="fas fa-fw fa-trash"
+							></i>
+						</button>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "mui-multi-key-value",
+	props: {
+		value: {
+			required: true
+		},
+		typeName: {
+			type: String,
+			default: "type"
+		},
+		typeOptions: {
+			type: Array
+		},
+		keyName: {
+			type: String,
+			default: "key"
+		},
+		valueName: {
+			type: String,
+			default: "value"
+		},
+		formatName: {
+			type: String,
+			default: "format"
+		},
+		activeName: {
+			type: String,
+			default: "active"
+		},
+		modeName: {
+			type: String,
+			default: "mode"
+		}
+	},
+	watch: {
+		data() {
+			this.emitData();
+		}
+	},
+	data() {
+		return {
+			objectMapping: {
+				[this.modeName]: null,
+				[this.typeName]: null,
+				[this.keyName]: null,
+				[this.valueName]: null,
+				[this.formatName]: null,
+				[this.activeName]: true
+			},
+			data: null,
+			modeOptions: [
+				{ value: "0", text: "None" },
+				{ value: "1", text: "Full" },
+				{ value: "2", text: "Incremental" }
+			]
+		};
+	},
+	created() {
+		if (
+			this.value === null ||
+			this.value == "null" ||
+			this.value === undefined
+		) {
+			this.data = [];
+		} else if (typeof this.value === "string") {
+			this.data = JSON.parse(this.value);
+		} else {
+			this.data = this.value;
+		}
+	},
+	methods: {
+		addMapping() {
+			let modeValue = this.objectMapping[this.modeName];
+			if (modeValue === null || modeValue === "") return;
+
+			let typeValue = this.objectMapping[this.typeName];
+			if (typeValue === null || typeValue === "") return;
+
+			let keyValue = this.objectMapping[this.keyName];
+			if (keyValue === null || keyValue === "") return;
+
+			let valueValue = this.objectMapping[this.valueName];
+			if (valueValue === null || valueValue === "") return;
+
+			let formatValue = this.objectMapping[this.formatName];
+
+			const isValidDataMapping =
+				modeValue.trim().replace(" ", "").length > 0 &&
+				typeValue.trim().replace(" ", "").length > 0 &&
+				keyValue.trim().replace(" ", "").length > 0 &&
+				valueValue.trim().replace(" ", "").length > 0;
+
+			const isHaveSameDataMapping = this.isHaveSameDataMapping();
+
+			if (isValidDataMapping && !isHaveSameDataMapping) {
+				this.data.push({
+					[this.modeName]: modeValue.trim().replace(" ", ""),
+					[this.typeName]: typeValue.trim().replace(" ", ""),
+					[this.keyName]: keyValue.trim().replace(" ", ""),
+					[this.valueName]: valueValue.trim().replace(" ", ""),
+					[this.formatName]: formatValue === null ? "" : formatValue,
+					[this.activeName]: true
+				});
+				this.clearInputs();
+			}
+		},
+		isHaveSameDataMapping() {
+			let index = this.data.findIndex(val => {
+				return (
+					val[this.keyName] ===
+						this.objectMapping[this.keyName]
+							.trim()
+							.replace(" ", "") &&
+					val[this.modeName] === this.objectMapping[this.modeName]
+				);
+			});
+
+			return index !== -1;
+		},
+		clearInputs() {
+			this.objectMapping[this.modeName] = null;
+			this.objectMapping[this.typeName] = null;
+			this.objectMapping[this.keyName] = null;
+			this.objectMapping[this.valueName] = null;
+			this.objectMapping[this.formatName] = "";
+			this.objectMapping[this.activeName] = true;
+		},
+		removeMapping(key, value) {
+			key = key.trim().replace(" ", "");
+			let index = this.data.findIndex(val => {
+				return (
+					val[this.keyName] === key && val[this.valueName] === value
+				);
+			});
+			if (index !== -1) {
+				this.data.splice(index, 1);
+			}
+		},
+		changeActive(isActive, mapping) {
+			let param = this.data.find(
+				x =>
+					x[this.modeName] === mapping[this.modeName] &&
+					x[this.typeName] === mapping[this.typeName] &&
+					x[this.keyName] === mapping[this.keyName] &&
+					x[this.valueName] === mapping[this.valueName] &&
+					x[this.activeName] === mapping[this.activeName]
+			);
+			param[this.activeName] = isActive;
+
+			this.emitData();
+		},
+		emitData() {
+			let changedData = JSON.stringify(this.data);
+			this.$emit("input", changedData);
+		}
+	}
+};
+</script>
+
+<style scoped>
+.non-border {
+	border-top: none !important;
+	border-bottom: none !important;
+}
+.none-border {
+	border: none !important;
+}
+</style>

package/src/components/MultiKeyValue/index.js

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

package/src/components/NoData/NoData.vue

@@ -0,0 +1,20 @@
+<template>
+	<div class="card">
+		<div class="card-body">
+			<mui-icon icon="exclamation-triangle" class="mr-1" /> {{ message }}
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "mui-no-data",
+	props: {
+		message: {
+			type: String,
+			default: "There is no data in this section."
+		}
+	},
+	mounted() {}
+};
+</script>

package/src/components/NoData/index.js

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

package/src/components/Popover/Popover.vue

@@ -0,0 +1,91 @@
+<template>
+	<b-popover
+		ref="popover"
+		v-bind="this.$props"
+		@show="onShow"
+		@shown="onShown"
+		@hide="onHide"
+		@hidden="onHidden"
+		@enabled="onEnabled"
+		@disabled="onDisabled"
+	>
+		<template v-slot:title>
+			<slot name="title"></slot>
+		</template>
+		<template v-slot:default>
+			<slot name="default"></slot>
+		</template>
+	</b-popover>
+</template>
+<script>
+export default {
+	name: "mui-popover",
+	props: {
+		id: {},
+		target: {
+			required: true
+		},
+		title: {},
+		content: {},
+		placement: {
+			default: "right"
+		},
+		fallbackPlacement: {
+			default: "flip"
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		triggers: {
+			default: "click"
+		},
+		noFade: {
+			type: Boolean,
+			default: false
+		},
+		delay: {
+			default: 50
+		},
+		offset: {
+			default: 0
+		},
+		container: {},
+		boundary: {
+			type: String,
+			default: "scrollParent"
+		},
+		boundaryPadding: {
+			default: 5
+		},
+		variant: {},
+		customClass: {}
+	},
+	methods: {
+		onShow(event) {
+			this.$emit("show", event);
+		},
+		onShown(event) {
+			this.$emit("shown", event);
+		},
+		onHide(event) {
+			this.$emit("hide", event);
+		},
+		onHidden(event) {
+			this.$emit("hidden", event);
+		},
+		onEnabled(event) {
+			this.$emit("enabled", event);
+		},
+		onDisabled(event) {
+			this.$emit("disabled", event);
+		},
+		showPopover() {
+			this.$refs.popover.$emit("open");
+		},
+		hidePopover() {
+			this.$refs.popover.$emit("close");
+		}
+	}
+};
+</script>

package/src/components/Popover/index.js

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

package/src/components/Select/Select.vue

@@ -0,0 +1,71 @@
+<template>
+	<multiselect v-on="$listeners" v-bind="$props" :options="options">
+	</multiselect>
+</template>
+
+<script>
+import Multiselect from "vue-multiselect";
+import "vue-multiselect/dist/vue-multiselect.min.css";
+
+export default {
+	name: "mui-select",
+	components: { Multiselect },
+	props: {
+		value: {},
+		options: {
+			type: Array,
+			required: true
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		"close-on-select": {},
+		"show-labels": {},
+		"select-label": {},
+		"deselect-label": {},
+		"allow-empty": {},
+		"group-values": {},
+		"group-select": {},
+		"group-label": {},
+		"track-by": {
+			type: String,
+			default: "id",
+			required: false
+		},
+		label: {
+			type: String,
+			default: "text",
+			required: false
+		},
+		searchable: {
+			type: Boolean,
+			required: false
+		}
+	}
+};
+</script>
+
+<style lang="css">
+.multiselect__element {
+	font-size: 10pt;
+}
+.multiselect {
+	min-height: 34px;
+}
+.multiselect__select {
+	height: 34px;
+}
+.multiselect__tags {
+	height: 32px;
+}
+.multiselect__tags {
+	border: 1px solid #ddd;
+}
+
+.multiselect__tags input,
+.multiselect__placeholder,
+.multiselect__single {
+	font-size: 10pt;
+}
+</style>

package/src/components/Select/index.js

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