@monoui/vuejs 1.1.10

package/src/components/TagInput/TagInput.vue

@@ -0,0 +1,129 @@
+<template>
+	<textarea v-model="value" name="mix"></textarea>
+</template>
+<script>
+import Tagify from "@yaireo/tagify/dist/tagify.js";
+
+export default {
+	name: "mui-tag-input",
+	data() {
+		return {
+			settings: {
+				mixTagsInterpolator: ["{{", "}}"],
+				mode: "mix",
+				pattern: /@|#/,
+				enforceWhitelist: true,
+				duplicates: true,
+				transformTag: this.transformTag,
+				dropdown: {
+					enabled: 4
+				}
+			}
+		};
+	},
+	computed: {
+		whitelist() {
+			if (this.variables.length === 0) return [];
+			return this.variables.map(el => el.key);
+		},
+		mappingData() {
+			if (this.variables.length === 0) return {};
+			return this.variables.reduce((obj, item) => {
+				obj[item.key] = item.value;
+				return obj;
+			}, {});
+		}
+	},
+	methods: {
+		transformValue(inputValue) {
+			if (this.tagType === "key")
+				return inputValue.replace(/{{{"value":"([^}]*)"}}}/gm, function(
+					i,
+					match
+				) {
+					return `{{${match}}}`;
+				});
+
+			return inputValue.replace(
+				/{{{"value":"([^}]*)",[^}]*}}}/gm,
+				function(i, match) {
+					return `{{${match}}}`;
+				}
+			);
+		},
+		transformTag(tagData) {
+			if (this.tagType === "key") return;
+			tagData.mapping = this.mappingData[tagData.value];
+		},
+		onTagdAdd(e, inputElm) {
+			this.$emit("input", this.transformValue(inputElm.value));
+		},
+		onTagRemove(e, inputElm) {
+			this.$emit("input", this.transformValue(inputElm.value));
+		},
+		onInput(e, tagify, inputElm) {
+			var prefix = e.detail.prefix;
+			if (prefix) {
+				if (e.detail.value.length > 0) {
+					this.$emit("suggest", event, tagify);
+					this.$nextTick(() => {
+						tagify.settings.whitelist = this.whitelist;
+						tagify.dropdown.show.call(tagify, e.detail.value);
+					});
+					tagify.dropdown.show.call(tagify, e.detail.value);
+				}
+			}
+			this.$emit("input", this.transformValue(inputElm.value));
+		}
+	},
+	mounted() {
+		var input = document.querySelector("[name=mix]");
+		var tagType = this.tagType;
+		var tagify = new Tagify(input, {
+			...this.settings,
+			whitelist: this.whitelist,
+			templates: {
+				tag(v, tagData) {
+					if (tagType === "key") {
+						return `<tag title='${v}' contenteditable='false' spellcheck="false" class='tagify__tag ${
+							tagData.class ? tagData.class : ""
+						}' ${this.getAttributes(tagData)}>
+                    <x title='' class='tagify__tag__removeBtn'></x><div><span class='tagify__tag-text'>${v}</span></div>
+                </tag>`;
+					} else {
+						return `<tag title='${v}' contenteditable='false' spellcheck="false" class='tagify__tag ${
+							tagData.class ? tagData.class : ""
+						}' ${this.getAttributes(tagData)}>
+                    <x title='remove tag' class='tagify__tag__removeBtn'></x>
+                    <div>
+                        <span class='tagify__tag-text'>
+                            <b>${v}: </b>${
+							tagData.mapping ? tagData.mapping : v
+						}
+                        </span>
+                    </div>
+                </tag>`;
+					}
+				}
+			}
+		});
+		tagify.on("input", e => this.onInput(e, tagify, input));
+		tagify.on("add", e => this.onTagdAdd(e, input));
+		tagify.on("remove", e => this.onTagRemove(e, input));
+	},
+	props: {
+		value: {
+			type: String
+		},
+		tagType: {
+			type: String,
+			default: "key",
+			validator: prop => ["key", "key-value"].includes(prop)
+		},
+		variables: {
+			type: Array,
+			default: () => []
+		}
+	}
+};
+</script>

package/src/components/TagInput/index.js

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

package/src/components/Timeline/Timeline.vue

@@ -0,0 +1,33 @@
+<template>
+	<ul class="timeline">
+		<slot> </slot>
+		<slot name="pending"> </slot>
+	</ul>
+</template>
+
+<script>
+/**
+ * MonoUI Timeline Component
+ */
+export default {
+	name: "mui-timeline",
+	props: {}
+};
+</script>
+
+<style scoped>
+ul.timeline {
+	list-style-type: none;
+	position: relative;
+}
+ul.timeline:before {
+	content: " ";
+	background: #a0a0a0;
+	display: inline-block;
+	position: absolute;
+	left: 29px;
+	width: 2px;
+	height: 100%;
+	z-index: 400;
+}
+</style>

package/src/components/Timeline/TimelineItem.vue

@@ -0,0 +1,40 @@
+<template>
+	<li>
+		<p>
+			<slot></slot>
+		</p>
+	</li>
+</template>
+
+<script>
+/**
+ * MonoUI Timeline Item Component
+ */
+export default {
+	name: "mui-timeline-item",
+	props: {}
+};
+</script>
+
+<style scoped>
+p {
+	padding-left: 4%;
+}
+li {
+	margin: 20px 0;
+	padding-left: 20px;
+}
+li:before {
+	content: " ";
+	background: white;
+	display: inline-block;
+	position: absolute;
+	border-radius: 50%;
+	border: 3px solid #a0a0a0;
+	/* border: 3px solid #22c0e8; */
+	left: 20px;
+	width: 20px;
+	height: 20px;
+	z-index: 400;
+}
+</style>

package/src/components/Timeline/index.js

@@ -0,0 +1,4 @@
+import Timeline from "./Timeline";
+import TimelineItem from "./TimelineItem";
+
+export { Timeline, TimelineItem };

package/src/components/Tooltip/Tooltip.vue

@@ -0,0 +1,62 @@
+<template>
+	<b-tooltip
+		ref="tooltip"
+		v-bind="this.$props"
+		@show="onShow"
+		@shown="onShown"
+		@hide="onHide"
+		@hidden="onHidden"
+		@enabled="onEnabled"
+		@disabled="onDisabled"
+	>
+		<slot name="default"></slot>
+	</b-tooltip>
+</template>
+<script>
+export default {
+	name: "mui-tooltip",
+	props: {
+		id: {},
+		title: {},
+		target: { required: true },
+		triggers: {},
+		variant: {},
+		customClass: {},
+		boundary: {},
+		boundaryPadding: {},
+		offset: {},
+		placement: {},
+		fallbackPlacement: {},
+		container: {},
+		delay: {},
+		show: {},
+		disabled: {}
+	},
+	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);
+		},
+		showTooltip() {
+			this.$refs.tooltip.$emit("open");
+		},
+		hideTooltip() {
+			this.$refs.tooltip.$emit("close");
+		}
+	}
+};
+</script>

package/src/components/Tooltip/index.js

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

package/src/functions/alert.js

@@ -0,0 +1,40 @@
+export default {
+	install(Vue) {
+		Vue.prototype.$alert = function(
+			title,
+			text,
+			type = "info",
+			onConfirm,
+			confirmButtonText = "Confirm",
+			confirmButtonColor = "#000",
+			cancelButtonText = "No, cancel!"
+		) {
+			this.$swal({
+				title: title,
+				type: type,
+				html: text,
+				showCancelButton: true,
+				focusConfirm: false,
+				reverseButtons: true,
+				confirmButtonColor: confirmButtonColor,
+				confirmButtonText: confirmButtonText,
+				cancelButtonText: cancelButtonText
+			}).then(result => {
+				if (result.value === true) {
+					onConfirm();
+				}
+			});
+		};
+
+		Vue.prototype.$alert.remove = function(title, text, onConfirm) {
+			Vue.prototype.$alert(
+				title,
+				text,
+				"warning",
+				onConfirm,
+				"<i class='fas fa-fw fa-trash'></i> Yes, delete it!",
+				"#d33"
+			);
+		};
+	}
+};

package/src/functions/notification.js

@@ -0,0 +1,51 @@
+const defaultDelay = 3000;
+
+export default {
+	install(Vue) {
+		function toast(that, title, message, variant) {
+			let icon = "fas fa-check-circle mr-2";
+			if (variant === "danger") {
+				icon = "fas fa-exclamation-triangle mr-2";
+			} else if (variant === "info") {
+				icon = "fas fa-info-circle text-primary mr-1";
+			}
+			const h = that.$createElement;
+			const element = h(
+				"div",
+				{
+					class: [
+						"d-flex",
+						"flex-grow-1",
+						"align-items-baseline",
+						"mr-1"
+					]
+				},
+				[
+					h("i", { class: `${icon} text-${variant}` }),
+					h("span", { class: "mr-2" }, title)
+				]
+			);
+			that.$root.$bvToast.toast(message, {
+				title: [element],
+				solid: false,
+				appendToast: true,
+				variant: variant === "success" ? "default" : variant,
+				autoHideDelay: defaultDelay,
+				isStatus: true,
+				toaster: "b-toaster-bottom-right"
+			});
+		}
+
+		Vue.prototype.$errorToast = function(title, message) {
+			toast(this, title, message, "danger");
+		};
+
+		Vue.prototype.$successToast = function(title, message) {
+			toast(this, title, message, "success");
+		};
+
+		Vue.prototype.$toast = function(title, message) {
+			toast(this, title, message, "info");
+		};
+	}
+};

package/src/icons.js

@@ -0,0 +1,144 @@
+import { library } from "@fortawesome/fontawesome-svg-core";
+// Official documentation available at: https://github.com/FortAwesome/vue-fontawesome
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+import {
+	faEnvelope,
+	faHeart,
+	faGraduationCap,
+	faHome,
+	faInfo,
+	faList,
+	faSpinner,
+	faPlug,
+	faSquare,
+	faTh,
+	faShapes,
+	faCube,
+	faCubes,
+	faDatabase,
+	faLayerGroup,
+	faLink,
+	faFolder,
+	faGlobe,
+	faExchangeAlt,
+	faUserAltSlash,
+	faDotCircle,
+	faRandom,
+	faMagic,
+	faProjectDiagram,
+	faCheck,
+	faCheckCircle,
+	faCalendarAlt,
+	faPlus,
+	faPlusCircle,
+	faLongArrowAltDown,
+	faLongArrowAltLeft,
+	faLongArrowAltRight,
+	faLongArrowAltUp,
+	faEdit,
+	faTrash,
+	faCode,
+	faPalette,
+	faTextHeight,
+	faDirections,
+	faAngleDoubleRight,
+	faStopwatch,
+	faFilter,
+	faBezierCurve,
+	faInfoCircle,
+	faBolt,
+	faLock,
+	faKey,
+	faSyncAlt,
+	faPlay,
+	faExclamationTriangle,
+	faBan,
+	faSave,
+	faTerminal,
+	faMinusCircle,
+	faStarHalfAlt,
+	faStarHalf,
+	faStar,
+	faSort,
+	faSortUp,
+	faSortDown
+} from "@fortawesome/free-solid-svg-icons";
+import {
+	faFontAwesome,
+	faMicrosoft,
+	faVuejs
+} from "@fortawesome/free-brands-svg-icons";
+
+// If not present, it won't be visible within the application. Considering that you
+// don't want all the icons for no reason. This is a good way to avoid importing too many
+// unnecessary things.
+library.add(
+	faEnvelope,
+	faHeart,
+	faGraduationCap,
+	faHome,
+	faInfo,
+	faList,
+	faSpinner,
+
+	// Brands
+	faFontAwesome,
+	faMicrosoft,
+	faVuejs,
+	faPlug,
+	faSquare,
+	faTh,
+	faShapes,
+	faCube,
+	faCubes,
+	faDatabase,
+	faLayerGroup,
+	faLink,
+	faFolder,
+	faGlobe,
+	faExchangeAlt,
+	faUserAltSlash,
+	faDotCircle,
+	faRandom,
+	faMagic,
+	faProjectDiagram,
+	faCheck,
+	faCheckCircle,
+	faCalendarAlt,
+	faPlus,
+	faPlusCircle,
+	faLongArrowAltDown,
+	faLongArrowAltLeft,
+	faLongArrowAltRight,
+	faLongArrowAltUp,
+	faEdit,
+	faTrash,
+	faCode,
+	faPalette,
+	faTextHeight,
+	faDirections,
+	faAngleDoubleRight,
+	faStopwatch,
+	faFilter,
+	faBezierCurve,
+	faInfoCircle,
+	faBolt,
+	faLock,
+	faKey,
+	faSyncAlt,
+	faPlay,
+	faExclamationTriangle,
+	faBan,
+	faSave,
+	faTerminal,
+	faMinusCircle,
+	faStarHalfAlt,
+	faStarHalf,
+	faStar,
+	faSort,
+	faSortUp,
+	faSortDown
+);
+
+export { FontAwesomeIcon };

package/src/index.js

@@ -0,0 +1,133 @@
+// ***Components***
+import Loader from "./components/Loader";
+import { Button, ButtonCore } from "./components/Button";
+import DynamicInput from "./components/DynamicInput";
+import NoData from "./components/NoData";
+import Info from "./components/Info";
+import BreadCrumb from "./components/BreadCrumb";
+import Input from "./components/Input";
+import { Tab, Tabs } from "./components/Tabs";
+import KeyValueInput from "./components/KeyValueInput";
+import Checkbox from "./components/Checkbox";
+import Tooltip from "./components/Tooltip";
+import Spinner from "./components/Spinner";
+import Table from "./components/Table";
+import MultiKeyValue from "./components/MultiKeyValue";
+import {
+	Alert,
+	Modal,
+	RemoveAlert,
+	UnsavedChangesAlert
+} from "./components/Modal";
+import Cron from "./components/Cron";
+import Popover from "./components/Popover";
+import TagInput from "./components/TagInput";
+import Icon from "./components/Icon";
+import DatePicker from "./components/Date";
+import Select from "./components/Select";
+import { Dropdown, DropdownItem, DropdownDivider } from "./components/Dropdown";
+import {
+	Card,
+	CardBody,
+	CardFooter,
+	CardHeader,
+	CardSubTitle,
+	CardText,
+	CardTitle
+} from "./components/Card";
+import KeyValue from "./components/KeyValue";
+import { Timeline, TimelineItem } from "./components/Timeline";
+// ***Components***
+
+// ***Functions***
+import Notification from "./functions/notification";
+import Alerte from "./functions/alert";
+// ***Functions***
+
+// ***Plugins***
+import "bootstrap/dist/css/bootstrap.css";
+import "bootstrap-vue/dist/bootstrap-vue.css";
+import "sweetalert2/dist/sweetalert2.min.css";
+import "@yaireo/tagify/dist/tagify.css";
+
+import BootstrapVue from "bootstrap-vue";
+import { FontAwesomeIcon } from "./icons";
+import { ValidationObserver, ValidationProvider, extend } from "vee-validate";
+import { min, required, email } from "vee-validate/dist/rules";
+import VueSweetalert2 from "vue-sweetalert2";
+import VueNoty from "vuejs-noty";
+// ***Plugins***
+
+export default {
+	install(Vue) {
+		// ***BootstrapVue***
+		Vue.use(BootstrapVue);
+		// ***BootstrapVue***
+
+		// ***FontAwesome
+		Vue.component("font-awesome-icon", FontAwesomeIcon);
+		// ***FontAwesome
+
+		// ***VeeValidate***
+		Vue.component("ValidationObserver", ValidationObserver);
+		Vue.component("ValidationProvider", ValidationProvider);
+
+		extend("required", required);
+		extend("min", min);
+		extend("email", email);
+		// ***VeeValidate***
+
+		// ***Vue Sweet Alert***
+		Vue.use(VueSweetalert2);
+		// **Vue Sweet Alert***
+
+		// ***Noty***
+		Vue.use(VueNoty);
+		// ***Noty***
+
+		Vue.component(Loader.name, Loader);
+		Vue.component(DynamicInput.name, DynamicInput);
+		Vue.component(NoData.name, NoData);
+		Vue.component(Info.name, Info);
+		Vue.component(BreadCrumb.name, BreadCrumb);
+		Vue.component(KeyValueInput.name, KeyValueInput);
+		Vue.component(Tooltip.name, Tooltip);
+		Vue.component(Spinner.name, Spinner);
+		Vue.component(MultiKeyValue.name, MultiKeyValue);
+		Vue.component(Alert.name, Alert);
+		Vue.component(Modal.name, Modal);
+		Vue.component(RemoveAlert.name, RemoveAlert);
+		Vue.component(UnsavedChangesAlert.name, UnsavedChangesAlert);
+
+		Vue.component(Cron.name, Cron);
+		Vue.component(Table.name, Table);
+		Vue.component(Popover.name, Popover);
+		Vue.component(Icon.name, Icon);
+		Vue.component(TagInput.name, TagInput);
+		Vue.component(DatePicker.name, DatePicker);
+
+		Vue.component(Input.name, Input);
+		Vue.component(Checkbox.name, Checkbox);
+		Vue.component(ButtonCore.name, ButtonCore);
+		Vue.component(Button.name, Button);
+		Vue.component(Tabs.name, Tabs);
+		Vue.component(Tab.name, Tab);
+		Vue.component(Select.name, Select);
+		Vue.component(Dropdown.name, Dropdown);
+		Vue.component(DropdownItem.name, DropdownItem);
+		Vue.component(DropdownDivider.name, DropdownDivider);
+		Vue.component(Card.name, Card);
+		Vue.component(CardBody.name, CardBody);
+		Vue.component(CardFooter.name, CardFooter);
+		Vue.component(CardHeader.name, CardHeader);
+		Vue.component(CardSubTitle.name, CardSubTitle);
+		Vue.component(CardText.name, CardText);
+		Vue.component(CardTitle.name, CardTitle);
+		Vue.component(KeyValue.name, KeyValue);
+		Vue.component(Timeline.name, Timeline);
+		Vue.component(TimelineItem.name, TimelineItem);
+
+		Vue.use(Notification);
+		Vue.use(Alerte);
+	}
+};