@monoui/vuejs 1.1.10

package/src/components/Dropdown/DropdownItem.vue

@@ -0,0 +1,23 @@
+<template>
+	<b-dropdown-item v-on="$listeners" v-bind="$props">
+		<slot></slot>
+	</b-dropdown-item>
+</template>
+
+<script>
+export default {
+	name: "mui-dropdown-item",
+	props: {
+		to: {},
+		"link-class": {},
+		variant: {},
+		replace: {},
+		"exact-active-class": {},
+		"active-class": {},
+		disabled: {},
+		active: {},
+		target: {},
+		href: {}
+	}
+};
+</script>

package/src/components/Dropdown/index.js

@@ -0,0 +1,5 @@
+import Dropdown from "./Dropdown";
+import DropdownItem from "./DropdownItem";
+import DropdownDivider from "./DropdownDivider";
+
+export { Dropdown, DropdownItem, DropdownDivider };

package/src/components/DynamicInput/DynamicInput.vue

@@ -0,0 +1,192 @@
+<template>
+	<div>
+		<ValidationProvider
+			:rules="isRequired ? 'required' : ''"
+			in
+			v-slot="{ valid, errors }"
+			:name="property"
+			:id="property"
+		>
+			<b-form-input
+				:id="property"
+				v-model="bindValue"
+				type="text"
+				:state="
+					errors[0] && isRequired
+						? false
+						: valid && isRequired
+						? true
+						: null
+				"
+				trim
+				v-if="type == sourceType.Text"
+			></b-form-input>
+
+			<b-form-input
+				:id="property"
+				v-model="bindValue"
+				type="number"
+				:state="
+					errors[0] && isRequired
+						? false
+						: valid && isRequired
+						? true
+						: null
+				"
+				trim
+				v-else-if="type == sourceType.Number"
+				:name="property"
+			></b-form-input>
+
+			<b-form-checkbox
+				:name="property"
+				v-else-if="type == sourceType.YesOrNo"
+				v-model="bindValue"
+				:state="
+					errors[0] && isRequired
+						? false
+						: valid && isRequired
+						? true
+						: null
+				"
+				>Yes</b-form-checkbox
+			>
+			<b-form-input
+				:id="property"
+				v-model="bindValue"
+				type="date"
+				:state="
+					errors[0] && isRequired
+						? false
+						: valid && isRequired
+						? true
+						: null
+				"
+				trim
+				v-else-if="type == sourceType.Date"
+			></b-form-input>
+			<b-form-select
+				v-model="bindValue"
+				:options="options"
+				v-else-if="type == sourceType.Dropdown"
+				class="nonBackground"
+				:state="
+					errors[0] && isRequired
+						? false
+						: valid && isRequired
+						? true
+						: null
+				"
+			></b-form-select>
+			<mui-editor
+				:id="property"
+				v-else-if="type == sourceType.Json"
+				v-model="bindValue"
+				language="json"
+				:compact="true"
+			/>
+			<mui-key-value-input
+				:id="property"
+				v-model="bindValue"
+				v-else-if="type == sourceType.KeyValue"
+			/>
+			<mui-multi-key-value
+				:id="property"
+				v-model="bindValue"
+				v-else-if="type == sourceType.MultiKeyValue"
+				:typeOptions="options"
+				modeName="Mode"
+				typeName="Type"
+				keyName="Key"
+				valueName="Value"
+				activeName="IsActive"
+			/>
+			<b-form-textarea
+				:id="property"
+				v-model="bindValue"
+				v-else-if="type == sourceType.TextArea"
+				rows="3"
+				max-rows="10"
+				:state="
+					errors[0] && isRequired
+						? false
+						: valid && isRequired
+						? true
+						: null
+				"
+			/>
+			<b-form-invalid-feedback>{{ errors[0] }}</b-form-invalid-feedback>
+		</ValidationProvider>
+	</div>
+</template>
+<script>
+import ObjectInputTypes from "./inputTypes";
+
+export default {
+	name: "mui-dynamic-input",
+	props: {
+		property: {
+			type: String,
+			required: true
+		},
+		value: {
+			required: false
+		},
+		type: {
+			required: false,
+			default: 1
+		},
+		isRequired: {
+			required: false,
+			default: false
+		},
+		data: {
+			type: String,
+			required: false,
+			default: null
+		}
+	},
+	computed: {
+		bindValue: {
+			get: function() {
+				return this.value;
+			},
+			set: function(value) {
+				this.$emit("input", value);
+			}
+		}
+	},
+	data() {
+		return {
+			sourceType: ObjectInputTypes,
+			options: []
+		};
+	},
+	mounted() {
+		if (this.type == this.sourceType.Dropdown && this.data != null) {
+			let data = JSON.parse(this.data);
+			data.forEach(item => {
+				this.options.push({ value: item.key, text: item.value });
+			});
+		}
+
+		if (this.type == this.sourceType.MultiKeyValue && this.data != null) {
+			let data = JSON.parse(this.data);
+			data.forEach(item => {
+				this.options.push({ value: item.key, text: item.value });
+			});
+		}
+	},
+	methods: {
+		changeValue(data) {
+			this.selectedValue = data.Text;
+		}
+	}
+};
+</script>
+
+<style scoped>
+.nonBackground {
+	background: none;
+}
+</style>

package/src/components/DynamicInput/index.js

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

package/src/components/DynamicInput/inputTypes.js

@@ -0,0 +1,14 @@
+export default {
+	SystemDefault: 0,
+	Text: 1,
+	Number: 2,
+	YesOrNo: 3,
+	Date: 4,
+	DateTime: 5,
+	Dropdown: 6,
+	Guid: 7,
+	Json: 8,
+	KeyValue: 9,
+	MultiKeyValue: 10,
+	TextArea: 11
+};

package/src/components/Icon/Icon.vue

@@ -0,0 +1,43 @@
+<template>
+	<font-awesome-icon fw :icon="iconList" :class="iconClass" />
+</template>
+
+<script>
+export default {
+	name: "mui-icon",
+	props: {
+		/**
+		 * Icon
+		 * @type String
+		 */
+		icon: {
+			type: [String, Array],
+			required: true
+		},
+		/**
+		 * Prefix
+		 * @type String
+		 */
+		prefix: {
+			type: String,
+			required: false,
+			default: "fas"
+		},
+		/**
+		 * Icon class
+		 * @type String
+		 */
+		iconClass: {
+			type: String,
+			default: ""
+		}
+	},
+	computed: {
+		iconList() {
+			if (typeof this.icon === "object")
+				return [this.prefix, ...this.icon];
+			return [this.prefix, this.icon];
+		}
+	}
+};
+</script>

package/src/components/Icon/index.js

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

package/src/components/Info/Info.vue

@@ -0,0 +1,19 @@
+<template>
+	<div class="mt-2 mr-2">
+		<mui-icon :icon="icon" v-if="icon != null" class="mr-2" />
+		<span></span>
+		<slot />
+	</div>
+</template>
+<script>
+export default {
+	name: "mui-info",
+	props: {
+		icon: {
+			type: String,
+			default: null,
+			required: false
+		}
+	}
+};
+</script>

package/src/components/Info/index.js

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

package/src/components/Input/Input.vue

@@ -0,0 +1,73 @@
+<template>
+	<div>
+		<input
+			class="form-control"
+			:type="type"
+			:class="
+				`${innerClass} ${
+					state === false
+						? 'is-invalid'
+						: state === true
+						? 'is-valid'
+						: ''
+				}`
+			"
+			v-bind="$attrs"
+			:value="value"
+			v-on="inputListeners"
+		/>
+		<div class="invalid-feedback" v-if="invalidMsg && !state">
+			{{ invalidMsg }}
+		</div>
+		<div class="valid-feedback" v-if="validMsg && state">
+			{{ validMsg }}
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	name: "mui-input",
+	computed: {
+		inputListeners: function() {
+			return {
+				...this.$listeners,
+				input: event => this.$emit("input", event.target.value)
+			};
+		}
+	},
+	props: {
+		value: {},
+		type: {
+			type: String,
+			default: "text",
+			validator: prop =>
+				[
+					"text",
+					"email",
+					"date",
+					"number",
+					"password",
+					"tel",
+					"url"
+				].includes(prop)
+		},
+		innerClass: {
+			type: String,
+			default: ""
+		},
+		state: {
+			type: Boolean,
+			default: null
+		},
+		invalidMsg: {
+			type: String,
+			default: null
+		},
+		validMsg: {
+			type: String,
+			default: null
+		}
+	}
+};
+</script>
+<style scoped></style>

package/src/components/Input/index.js

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

package/src/components/KeyValue/KeyValue.vue

@@ -0,0 +1,138 @@
+<template>
+	<table class="table table-condensed table-hover">
+		<thead>
+			<tr>
+				<th scope="col" class="pl-0">
+					<template>
+						{{ keyTitle || keyName }}
+						<small>{{ keyName }}</small>
+					</template>
+					<input
+						type="text"
+						class="form-control"
+						v-model="dataMapping[keyName]"
+						@keyup.enter="addMapping"
+					/>
+				</th>
+				<th scope="col">
+					<template>
+						{{ valueTitle || valueName }}
+						<small>{{ valueName }}</small>
+					</template>
+					<input
+						type="text"
+						class="form-control"
+						v-model="dataMapping[valueName]"
+						@keyup.enter="addMapping"
+					/>
+				</th>
+				<th scope="col">
+					<button class="btn btn-light" @click="addMapping">
+						Add
+					</button>
+				</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr v-for="(mapping, index) in data" :key="index">
+				<td>{{ mapping[keyName] }}</td>
+				<td>{{ mapping[valueName] }}</td>
+				<td>
+					<button
+						class="btn btn-light"
+						@click="removeMapping(mapping[keyName])"
+					>
+						Delete
+					</button>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+</template>
+
+<script>
+export default {
+	name: "mui-key-value",
+	props: {
+		value: {
+			required: true
+		},
+		keyName: {
+			type: String,
+			default: "key"
+		},
+		keyTitle: {
+			type: String,
+			default: "key"
+		},
+		valueName: {
+			type: String,
+			default: "value"
+		},
+		valueTitle: {
+			type: String,
+			default: "value"
+		}
+	},
+	data() {
+		return {
+			dataMapping: {
+				[this.keyName]: null,
+				[this.valueName]: null
+			},
+			data: []
+		};
+	},
+	methods: {
+		addMapping() {
+			let keyValue = this.dataMapping[this.keyName];
+			if (keyValue === null) return;
+
+			let valueValue = this.dataMapping[this.valueName];
+			if (valueValue === null) return;
+
+			const isValidDataMapping =
+				keyValue.trim().replace(" ", "").length > 0 &&
+				valueValue.trim().replace(" ", "").length > 0;
+
+			const isHaveSameDataMapping = this.isHaveSameDataMapping();
+
+			if (isValidDataMapping && !isHaveSameDataMapping) {
+				this.data.push({
+					[this.keyName]: keyValue.trim().replace(" ", ""),
+					[this.valueName]: valueValue.trim().replace(" ", "")
+				});
+
+				this.$emit("input", this.data);
+
+				this.clearInputs();
+			}
+		},
+		isHaveSameDataMapping() {
+			let index = this.data.findIndex(val => {
+				return (
+					val[this.keyName] ==
+					this.dataMapping[this.keyName].trim().replace(" ", "")
+				);
+			});
+
+			return index !== -1;
+		},
+		clearInputs() {
+			this.dataMapping[this.keyName] = null;
+			this.dataMapping[this.valueName] = null;
+		},
+		removeMapping(key) {
+			key = key.trim().replace(" ", "");
+			let index = this.data.findIndex(val => {
+				return val[this.keyName] == key;
+			});
+			if (index !== -1) {
+				this.data.splice(index, 1);
+
+				this.$emit("input", this.data);
+			}
+		}
+	}
+};
+</script>

package/src/components/KeyValue/index.js

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