@monoui/vuejs 1.1.10

package/src/components/KeyValueInput/KeyValueInput.vue

@@ -0,0 +1,203 @@
+<template>
+	<div>
+		<b-form-group>
+			<mui-editor
+				v-show="showEditor"
+				ref="editor"
+				language="json"
+				id="Editor"
+				v-model="dataForEditor"
+				value
+			></mui-editor>
+		</b-form-group>
+
+		<div id="InputForm" v-show="showInput">
+			<b-form inline v-for="([k, v], i) in templatePairs" :key="i">
+				<b-form-input
+					:ref="'Key' + i"
+					:state="duplicates.includes(i) ? false : null"
+					style="flex-grow:1"
+					class="mb-3 mt-1 mr-sm-3 mb-sm-3"
+					:placeholder="keysLabel"
+					:value="k"
+					@input="key => changeKey(i, key)"
+					data-test="key-input"
+				/>
+				<b-form-input
+					:ref="'Value' + i"
+					:state="duplicates.includes(i) ? false : null"
+					style="flex-grow:1"
+					class="mb-3 mt-1 mr-sm-3 mb-sm-3"
+					:placeholder="valuesLabel"
+					:value="v"
+					:disabled="k === ''"
+					@input="value => changeValue(i, value)"
+					data-test="value-input"
+				/>
+				<b-button
+					variant="outline-default"
+					@click="deleteValue(k)"
+					class="mb-3 mt-1 mr-sm-3 mb-sm-3"
+					size="sm"
+				>
+					<i class="fas fa-trash"></i>
+				</b-button>
+			</b-form>
+		</div>
+		<b-form-group>
+			<div class="pull-right" style="margin-right:13px">
+				<b-button
+					size="sm"
+					@click="toggle"
+					:pressed="showEditor"
+					variant="outline"
+				>
+					<i class="fas fa-code"></i>
+				</b-button>
+			</div>
+		</b-form-group>
+	</div>
+</template>
+<script>
+const isString = v => v === null || v === undefined || typeof v === "string";
+
+const addPropIfNotPresent = (obj, [key, value]) =>
+	obj[key] !== undefined ? obj : { ...obj, [key]: value };
+
+const objectFromPairs = pairs =>
+	pairs.reduce((acc, curr) => addPropIfNotPresent(acc, curr), {});
+
+const pairsFromObject = object => Object.entries(object);
+
+function areEqualShallow(a, b) {
+	for (let key in a) {
+		if (!(key in b) || a[key] !== b[key]) {
+			return false;
+		}
+	}
+	for (let key in b) {
+		if (!(key in a) || a[key] !== b[key]) {
+			return false;
+		}
+	}
+	return true;
+}
+
+export default {
+	name: "mui-key-value-input",
+	props: {
+		keysLabel: {
+			type: String,
+			required: false,
+			default: "Key"
+		},
+		valuesLabel: {
+			type: String,
+			required: false,
+			default: "Value"
+		},
+		value: {
+			type: Object,
+			required: false,
+			default: null,
+			validator: value => Object.values(value).every(isString)
+		}
+	},
+
+	data: function() {
+		return {
+			internalValue: this.value ? pairsFromObject(this.value) : [],
+			showEditor: false,
+			showInput: true
+		};
+	},
+	watch: {
+		value(newValue) {
+			const currentValueAsObject = objectFromPairs(this.effectiveValue);
+			if (!areEqualShallow(newValue, currentValueAsObject)) {
+				this.effectiveValue = pairsFromObject(newValue);
+			}
+		}
+	},
+
+	computed: {
+		dataForEditor: {
+			get: function() {
+				return JSON.stringify(this.value);
+			},
+			set: function(value) {
+				try {
+					if (value) {
+						this.$emit("input", JSON.parse(value));
+					} else {
+						this.$emit("input", {});
+					}
+					// eslint-disable-next-line no-empty
+				} catch {}
+			}
+		},
+
+		effectiveValue: {
+			get() {
+				return this.internalValue;
+			},
+			set(v) {
+				const newValueAsObject = objectFromPairs(v);
+				const currentValueAsObject = objectFromPairs(
+					this.internalValue
+				);
+				this.internalValue = v;
+				if (!areEqualShallow(newValueAsObject, currentValueAsObject)) {
+					/**
+					 *
+					 *
+					 * @event input
+					 * @type {object}
+					 */
+					this.$emit("input", objectFromPairs(v));
+				}
+			}
+		},
+
+		templatePairs: {
+			get() {
+				return this.effectiveValue.concat([["", ""]]);
+			},
+			set(newPairs) {
+				const newValue = newPairs.filter(([k]) => k);
+				this.effectiveValue = newValue;
+			}
+		},
+
+		duplicates() {
+			return this.effectiveValue
+				.map(v => v[0])
+				.map((value, idx, array) =>
+					array.findIndex(el => el === value) < idx ? idx : null
+				)
+				.filter(el => el !== null);
+		}
+	},
+	methods: {
+		deleteValue: function(key) {
+			this.$delete(this.value, key);
+		},
+		toggle: function() {
+			this.showEditor = !this.showEditor;
+			this.showInput = !this.showInput;
+		},
+		changeKey(index, key) {
+			const head = this.templatePairs.slice(0, index);
+			const updatedPair = [key, this.templatePairs[index][1]];
+			const tail = this.templatePairs.slice(index + 1);
+			this.templatePairs = head.concat([updatedPair]).concat(tail);
+		},
+		changeValue(index, value) {
+			const head = this.templatePairs.slice(0, index);
+			const updatedPair = [this.templatePairs[index][0], value];
+			const tail = this.templatePairs.slice(index + 1);
+			this.templatePairs = head.concat([updatedPair]).concat(tail);
+		}
+	}
+};
+</script>

package/src/components/KeyValueInput/index.js

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

package/src/components/Loader/Loader.vue

@@ -0,0 +1,82 @@
+<template>
+	<div v-if="loading">
+		<content-loader v-bind="$attrs">
+			<slot>
+				<rect x="51" y="45" rx="3" ry="3" width="906" height="17" />
+				<circle cx="879" cy="123" r="11" />
+				<circle cx="914" cy="123" r="11" />
+				<rect x="104" y="115" rx="3" ry="3" width="141" height="15" />
+				<rect x="305" y="114" rx="3" ry="3" width="299" height="15" />
+				<rect x="661" y="114" rx="3" ry="3" width="141" height="15" />
+				<rect x="55" y="155" rx="3" ry="3" width="897" height="2" />
+				<circle cx="880" cy="184" r="11" />
+				<circle cx="915" cy="184" r="11" />
+				<rect x="105" y="176" rx="3" ry="3" width="141" height="15" />
+				<rect x="306" y="175" rx="3" ry="3" width="299" height="15" />
+				<rect x="662" y="175" rx="3" ry="3" width="141" height="15" />
+				<rect x="56" y="216" rx="3" ry="3" width="897" height="2" />
+				<circle cx="881" cy="242" r="11" />
+				<circle cx="916" cy="242" r="11" />
+				<rect x="106" y="234" rx="3" ry="3" width="141" height="15" />
+				<rect x="307" y="233" rx="3" ry="3" width="299" height="15" />
+				<rect x="663" y="233" rx="3" ry="3" width="141" height="15" />
+				<rect x="57" y="274" rx="3" ry="3" width="897" height="2" />
+				<circle cx="882" cy="303" r="11" />
+				<circle cx="917" cy="303" r="11" />
+				<rect x="107" y="295" rx="3" ry="3" width="141" height="15" />
+				<rect x="308" y="294" rx="3" ry="3" width="299" height="15" />
+				<rect x="664" y="294" rx="3" ry="3" width="141" height="15" />
+				<rect x="58" y="335" rx="3" ry="3" width="897" height="2" />
+				<circle cx="881" cy="363" r="11" />
+				<circle cx="916" cy="363" r="11" />
+				<rect x="106" y="355" rx="3" ry="3" width="141" height="15" />
+				<rect x="307" y="354" rx="3" ry="3" width="299" height="15" />
+				<rect x="663" y="354" rx="3" ry="3" width="141" height="15" />
+				<rect x="57" y="395" rx="3" ry="3" width="897" height="2" />
+				<circle cx="882" cy="424" r="11" />
+				<circle cx="917" cy="424" r="11" />
+				<rect x="107" y="416" rx="3" ry="3" width="141" height="15" />
+				<rect x="308" y="415" rx="3" ry="3" width="299" height="15" />
+				<rect x="664" y="415" rx="3" ry="3" width="141" height="15" />
+				<rect x="55" y="453" rx="3" ry="3" width="897" height="2" />
+				<rect x="51" y="49" rx="3" ry="3" width="2" height="465" />
+				<rect x="955" y="49" rx="3" ry="3" width="2" height="465" />
+				<circle cx="882" cy="484" r="11" />
+				<circle cx="917" cy="484" r="11" />
+				<rect x="107" y="476" rx="3" ry="3" width="141" height="15" />
+				<rect x="308" y="475" rx="3" ry="3" width="299" height="15" />
+				<rect x="664" y="475" rx="3" ry="3" width="141" height="15" />
+				<rect x="55" y="513" rx="3" ry="3" width="897" height="2" />
+				<rect x="52" y="80" rx="3" ry="3" width="906" height="17" />
+				<rect x="53" y="57" rx="3" ry="3" width="68" height="33" />
+				<rect x="222" y="54" rx="3" ry="3" width="149" height="33" />
+				<rect x="544" y="55" rx="3" ry="3" width="137" height="33" />
+				<rect x="782" y="56" rx="3" ry="3" width="72" height="33" />
+				<rect x="933" y="54" rx="3" ry="3" width="24" height="33" />
+			</slot>
+		</content-loader>
+	</div>
+</template>
+
+<script>
+import ContentLoader from "./content-loader";
+export default {
+	name: "mui-loader",
+	props: {
+		loading: {
+			type: Boolean,
+			default: true
+		}
+	},
+	mounted() {},
+	components: {
+		ContentLoader
+	}
+};
+</script>
+
+<style scoped>
+svg {
+	width: 100%;
+}
+</style>

package/src/components/Loader/content-loader.js

@@ -0,0 +1,150 @@
+const uid = () =>
+	Math.random()
+		.toString(36)
+		.substring(2);
+
+export default {
+	name: "ContentLoader",
+
+	functional: true,
+
+	props: {
+		width: {
+			type: [Number, String],
+			default: 1000
+		},
+		height: {
+			type: [Number, String],
+			default: 550
+		},
+		speed: {
+			type: Number,
+			default: 2
+		},
+		preserveAspectRatio: {
+			type: String,
+			default: "xMidYMid meet"
+		},
+		baseUrl: {
+			type: String,
+			default: ""
+		},
+		primaryColor: {
+			type: String,
+			default: "#f9f9f9"
+		},
+		secondaryColor: {
+			type: String,
+			default: "#ecebeb"
+		},
+		primaryOpacity: {
+			type: Number,
+			default: 1
+		},
+		secondaryOpacity: {
+			type: Number,
+			default: 1
+		},
+		uniqueKey: {
+			type: String
+		},
+		animate: {
+			type: Boolean,
+			default: true
+		},
+		customStyle: {
+			type: Object,
+			default: () => {
+				return {
+					width: "100%"
+				};
+			}
+		}
+	},
+
+	render(h, { props, data, children }) {
+		const idClip = props.uniqueKey ? `${props.uniqueKey}-idClip` : uid();
+		const idGradient = props.uniqueKey
+			? `${props.uniqueKey}-idGradient`
+			: uid();
+
+		return (
+			<svg
+				{...data}
+				viewBox={`0 0 ${props.width} ${props.height}`}
+				version="1.1"
+				preserveAspectRatio={props.preserveAspectRatio}
+				style={props.customStyle}
+			>
+				<rect
+					style={{ fill: `url(${props.baseUrl}#${idGradient})` }}
+					clip-path={`url(${props.baseUrl}#${idClip})`}
+					x="0"
+					y="0"
+					width="100%"
+					height="100%"
+				/>
+
+				<defs>
+					<clipPath id={idClip}>
+						{children || (
+							<rect
+								x="0"
+								y="0"
+								rx="5"
+								ry="5"
+								width={props.width}
+								height={props.height}
+							/>
+						)}
+					</clipPath>
+
+					<linearGradient id={idGradient}>
+						<stop
+							offset="0%"
+							stop-color={props.primaryColor}
+							stop-opacity={props.primaryOpacity}
+						>
+							{props.animate ? (
+								<animate
+									attributeName="offset"
+									values="-2; 1"
+									dur={`${props.speed}s`}
+									repeatCount="indefinite"
+								/>
+							) : null}
+						</stop>
+						<stop
+							offset="50%"
+							stop-color={props.secondaryColor}
+							stop-opacity={props.secondaryOpacity}
+						>
+							{props.animate ? (
+								<animate
+									attributeName="offset"
+									values="-1.5; 1.5"
+									dur={`${props.speed}s`}
+									repeatCount="indefinite"
+								/>
+							) : null}
+						</stop>
+						<stop
+							offset="100%"
+							stop-color={props.primaryColor}
+							stop-opacity={props.primaryOpacity}
+						>
+							{props.animate ? (
+								<animate
+									attributeName="offset"
+									values="-1; 2"
+									dur={`${props.speed}s`}
+									repeatCount="indefinite"
+								/>
+							) : null}
+						</stop>
+					</linearGradient>
+				</defs>
+			</svg>
+		);
+	}
+};

package/src/components/Loader/index.js

@@ -0,0 +1,2 @@
+import Loader from "./Loader.vue";
+export default Loader;

package/src/components/Modal/Alert.vue

@@ -0,0 +1,96 @@
+<script>
+/**
+ * Integration Alert Modal Component
+ */
+export default {
+	name: "mui-alert",
+	components: {},
+	props: {
+		/**
+		 * Header title.
+		 * @type String
+		 */
+		title: {
+			type: String,
+			required: false
+		},
+		/**
+		 * Modal content.
+		 * @type String
+		 */
+		text: {
+			type: String,
+			required: false
+		},
+		/**
+		 * Modal type.
+		 * @type String
+		 */
+		type: {
+			type: String,
+			required: false,
+			default: "info"
+		},
+		/**
+		 * Confirm button text.
+		 * @type String
+		 */
+		confirmButtonText: {
+			type: String,
+			required: false,
+			default: "Confirm"
+		},
+		/**
+		 * The method triggered when confirm button clicked.
+		 * @event onConfirm
+		 * @type Function
+		 */
+		onConfirm: {
+			type: Function,
+			required: false
+		},
+		/**
+		 * Confirm Button Color. Value is HEX value.
+		 * @type String
+		 */
+		confirmButtonColor: {
+			type: String,
+			required: false,
+			default: "#000"
+		},
+		/**
+		 * Cancel button text.
+		 * @type String
+		 */
+		cancelButtonText: {
+			type: String,
+			required: false,
+			default: "No, cancel!"
+		}
+	},
+	methods: {
+		/**
+		 * Show modal.
+		 * @public
+		 */
+		show() {
+			this.$swal({
+				title: this.title,
+				type: this.type,
+				// text: this.text,
+				html: this.text,
+				showCancelButton: true,
+				focusConfirm: false,
+				reverseButtons: true,
+				confirmButtonColor: this.confirmButtonColor,
+				confirmButtonText: this.confirmButtonText,
+				cancelButtonText: this.cancelButtonText
+			}).then(result => {
+				if (result.value === true) {
+					this.onConfirm();
+				}
+			});
+		}
+	}
+};
+</script>

package/src/components/Modal/Modal.vue

@@ -0,0 +1,125 @@
+<template>
+	<b-modal
+		ref="modal"
+		v-on="$listeners"
+		v-bind="$props"
+		:title="displayTitle"
+		v-model="visible"
+		:hide-footer="hideFooter"
+	>
+		<mui-loader :loading="loading" />
+
+		<slot v-if="!loading"> </slot>
+
+		<template v-if="!loading" #default>
+			<slot name="default"> </slot>
+		</template>
+
+		<!-- TODO: DONT USE! -->
+		<!-- <template v-if="!loading" #modal-title>
+        <slot name="modal-title"></slot>
+      </template> -->
+
+		<template v-if="!loading" #modal-header>
+			<slot name="modal-header"></slot>
+		</template>
+
+		<template v-slot:modal-footer="{ ok, cancel }">
+			<slot name="modal-footer-part"></slot>
+
+			<slot name="modal-footer" :ok="ok" :cancel="cancel">
+				<b-button :variant="cancelVariant" @click="cancel">
+					{{ cancelTitle }}
+				</b-button>
+
+				<b-button
+					:variant="okVariant"
+					@click="ok"
+					:disabled="okDisabled"
+				>
+					{{ okTitle }}
+				</b-button>
+			</slot>
+		</template>
+	</b-modal>
+</template>
+<script>
+export default {
+	name: "mui-modal",
+	computed: {
+		visible: {
+			get() {
+				return this.value;
+			},
+			set(value) {
+				this.$emit("input", value);
+			}
+		},
+		displayTitle: {
+			get() {
+				return this.loading ? "" : this.title;
+			}
+		}
+	},
+	props: {
+		"hide-header": {},
+		"hide-footer": {},
+		"custom-class": {},
+		"ok-disabled": {},
+		title: {},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		value: {
+			type: Boolean,
+			default: false
+		},
+		size: {
+			type: String,
+			default: "lg"
+		},
+		scrollable: {
+			type: Boolean,
+			default: false
+		},
+		centered: {
+			type: Boolean,
+			default: false
+		},
+		hideFooter: {
+			type: Boolean,
+			default: false
+		},
+		okDisabled: {
+			type: Boolean,
+			default: false
+		},
+		okVariant: {
+			type: String,
+			default: "primary"
+		},
+		cancelVariant: {
+			type: String,
+			default: "secondary"
+		},
+		okTitle: {
+			type: String,
+			default: "Ok"
+		},
+		cancelTitle: {
+			type: String,
+			default: "Cancel"
+		}
+	},
+	methods: {
+		show() {
+			this.$refs.modal.show();
+		},
+		hide() {
+			this.$refs.modal.hide();
+		}
+	}
+};
+</script>
+<style scoped></style>