@monoui/vuejs 1.1.10

package/src/components/Card/CardText.vue

@@ -0,0 +1,21 @@
+<template>
+	<b-card-text :text-tag="textTag" v-bind="$props" :class="innerClass">
+		<slot></slot>
+	</b-card-text>
+</template>
+
+<script>
+export default {
+	name: "mui-card-text",
+	props: {
+		textTag: {
+			type: String,
+			required: false
+		},
+		innerClass: {
+			type: String,
+			required: false
+		}
+	}
+};
+</script>

package/src/components/Card/CardTitle.vue

@@ -0,0 +1,38 @@
+<template>
+	<b-card-title
+		v-bind="$props"
+		:class="innerClass"
+		:title-tag="titleTag"
+		:title="title"
+	>
+		<template v-if="hasTitle">
+			{{ title }}
+		</template>
+		<slot v-else></slot>
+	</b-card-title>
+</template>
+
+<script>
+export default {
+	name: "mui-card-title",
+	computed: {
+		hasTitle() {
+			return !this.title ? false : true;
+		}
+	},
+	props: {
+		title: {
+			type: String,
+			required: false
+		},
+		titleTag: {
+			type: String,
+			required: false
+		},
+		innerClass: {
+			type: String,
+			required: false
+		}
+	}
+};
+</script>

package/src/components/Card/index.js

@@ -0,0 +1,17 @@
+import Card from "./Card";
+import CardBody from "./CardBody";
+import CardFooter from "./CardFooter";
+import CardHeader from "./CardHeader";
+import CardSubTitle from "./CardSubTitle";
+import CardText from "./CardText";
+import CardTitle from "./CardTitle";
+
+export {
+	Card,
+	CardBody,
+	CardFooter,
+	CardHeader,
+	CardSubTitle,
+	CardText,
+	CardTitle
+};

package/src/components/Checkbox/Checkbox.vue

@@ -0,0 +1,72 @@
+<template>
+	<b-checkbox
+		v-model="tempValue"
+		v-on="$listeners"
+		:disabled="disabled"
+		:value="checkedValue"
+		:unchecked-value="uncheckedValue"
+		:class="innerClass"
+	>
+		<slot></slot>
+	</b-checkbox>
+</template>
+
+<script>
+/**
+ * MonoUI Checkbox Component
+ */
+export default {
+	name: "mui-checkbox",
+	props: {
+		/**
+		 * Checkbox check state value.
+		 */
+		value: {
+			required: true
+		},
+		/**
+		 * Disable component when value is true.
+		 * @type Boolean
+		 */
+		disabled: {
+			type: Boolean,
+			default: false,
+			required: false
+		},
+		/**
+		 * Class
+		 * @type String
+		 */
+		innerClass: {
+			type: String,
+			default: "",
+			required: false
+		},
+		/**
+		 * Checked Value
+		 */
+		checkedValue: {
+			required: false
+		},
+		/**
+		 * Unchecked Value
+		 */
+		uncheckedValue: {
+			required: false
+		}
+	},
+	watch: {
+		tempValue(val) {
+			this.$emit("input", val);
+		}
+	},
+	data() {
+		return {
+			tempValue: ""
+		};
+	},
+	mounted() {
+		this.tempValue = this.value;
+	}
+};
+</script>

package/src/components/Checkbox/index.js

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

package/src/components/Cron/Cron.vue

@@ -0,0 +1,68 @@
+<template>
+	<div :id="cronContainerName" class="cron">
+		<input
+			type="text"
+			class="form-control"
+			v-model="cron"
+			@keyup="onCronChanged"
+			autocomplete="off"
+			:id="cronFieldName"
+		/>
+		<b-popover
+			:target="cronFieldName"
+			placement="topleft"
+			triggers="click"
+			:container="cronContainerName"
+		>
+			<cron @change="changeCron" @close="hidePopover" i18n="en"></cron>
+		</b-popover>
+	</div>
+</template>
+
+<script>
+import { cron } from "vue-cron-2";
+
+export default {
+	name: "mui-cron",
+	components: {
+		cron
+	},
+	props: {
+		value: {
+			default: ""
+		}
+	},
+	computed: {
+		cronFieldName() {
+			return `cronText_${this.nonce}`;
+		},
+		cronContainerName() {
+			return `cronContainer_${this.nonce}`;
+		}
+	},
+	watch: {
+		value(val) {
+			this.cron = val;
+		}
+	},
+	data() {
+		return {
+			cronPopover: false,
+			cron: this.value,
+			nonce: this.$helpers.guid()
+		};
+	},
+	methods: {
+		onCronChanged(e) {
+			this.changeCron(e.target.value);
+		},
+		changeCron(val) {
+			this.cron = val;
+			this.$emit("input", val);
+		},
+		hidePopover() {
+			this.$root.$emit("bv::hide::popover");
+		}
+	}
+};
+</script>

package/src/components/Cron/index.js

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

package/src/components/Date/DatePicker.vue

@@ -0,0 +1,406 @@
+<template>
+	<div class="datePicker">
+		<date-picker
+			:value="datetime"
+			@input="updateDate($event)"
+			:type="type"
+			:placeholder="placeholder"
+			:default-value="new Date()"
+			:format="momentFormat"
+			:disabled-date="disableBeforeMinDateAfterMaxDate"
+			:disabled-time="disableBeforeAfterTime"
+			:range="!range ? false : true"
+			:disabled="disabled"
+			:editable="editable"
+			:clearable="clearable"
+			:second-options="[]"
+			:shortcuts="!range && shortcutsEnable ? shortcuts : []"
+		>
+			<template #header="{ emit }" v-if="!shortcutsEnable && todayHeader">
+				<button class="mx-btn mx-btn-text" @click="emit(new Date())">
+					Today
+				</button>
+			</template>
+			<template
+				#footer="{ emit }"
+				v-if="!shortcutsEnable && range && isBeforeAndAfterOneWeek"
+			>
+				<div style="text-align: left">
+					<button
+						class="mx-btn mx-btn-text"
+						@click="setNextWeek(emit)"
+					>
+						Select Next One Week
+					</button>
+				</div>
+				<div style="text-align: left">
+					<button
+						class="mx-btn mx-btn-text"
+						@click="setOneWeekBefore(emit)"
+					>
+						Select Before One Week
+					</button>
+				</div>
+			</template>
+		</date-picker>
+		<span class="ml-2" v-if="prettyLabel"> {{ prettyDate }} </span>
+	</div>
+</template>
+
+<script>
+import DatePicker from "vue2-datepicker";
+import "vue2-datepicker/index.css";
+
+import moment from "moment";
+const addDays = count => {
+	let date = new Date();
+	if (!count) {
+		date.setHours(0, 0, 0, 0);
+		return date;
+	}
+
+	const day = 3600 * 1000 * 24;
+	date.setTime(date.getTime() + day * count);
+	date.setHours(0, 0, 0, 0);
+	return date;
+};
+
+export default {
+	name: "mui-date-picker",
+	components: {
+		DatePicker
+	},
+	data() {
+		return {
+			momentFormat: {
+				stringify: date => {
+					return date ? moment(date).format(this.dateFormat) : "";
+				},
+				parse: value => {
+					return value
+						? moment(value, this.dateFormat).toDate()
+						: null;
+				}
+			}
+		};
+	},
+	computed: {
+		datetime: {
+			get: function() {
+				if (!this.value) return null;
+				if (Array.isArray(this.value)) {
+					let date1 = moment(this.value[0]).toDate();
+					let date2 = moment(this.value[1]).toDate();
+					return [date1, date2];
+				} else {
+					let date = moment(this.value).toDate();
+					return date;
+				}
+			},
+			set: function(value) {
+				this.$emit("input", value);
+			}
+		},
+		prettyDate() {
+			if (!this.datetime) return null;
+			return moment(this.datetime).fromNow();
+		}
+	},
+	props: {
+		/**
+		 * value.
+		 * It's used to bind v-model value from parent component to child component's input value.
+		 */
+		value: {
+			required: true
+		},
+		/**
+		 * type.
+		 * It determines the component type
+		 */
+		type: {
+			type: String,
+			required: true,
+			default: "date"
+		},
+		/**
+		 * Date Format.
+		 * @see [moment] (https://momentjs.com/docs/#/parsing/string-format/)
+		 */
+		dateFormat: {
+			type: String,
+			default: "L"
+		},
+		/**
+		 * range.
+		 * Allows to select two dates range
+		 */
+		range: {
+			type: Boolean,
+			requreid: false,
+			default: false
+		},
+		/**
+		 * placeholder.
+		 * Allows to type custom placeholder
+		 */
+		placeholder: {
+			type: String,
+			required: false,
+			default: "Select a date..."
+		},
+		/**
+		 * Show pretty label on right.
+		 */
+		prettyLabel: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		 * minDate.
+		 * Allows to determine minimum date that users can select. It can be string or date object
+		 */
+		minDate: {
+			type: [String, Date],
+			required: false
+		},
+		/**
+		 * minDate.
+		 * Allows to determine maximum date that users can select. It can be string or date object
+		 */
+		maxDate: {
+			type: [String, Date],
+			required: false
+		},
+		/**
+		 * disabled.
+		 * Allows to disable the component
+		 */
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		/**
+		 * editable.
+		 * Allows to edit the date
+		 */
+		editable: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		/**
+		 * clearable.
+		 * Allows to clear the date by tapping x button
+		 */
+		clearable: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		/**
+		 * shortcutsEnable.
+		 * Allows to enable the shortcust determined in the component
+		 */
+		shortcutsEnable: {
+			type: Boolean,
+			required: false
+		},
+		/**
+		 * todayHeader.
+		 * Allows to enable only today button on the header of the component
+		 */
+		todayHeader: {
+			type: Boolean,
+			required: false
+		},
+		/**
+		 * isBeforeAndAfterOneWeek.
+		 * Allows to enable "Select Next One Week" and "Select Before One Week" buttons on the footer
+		 * when range attribute used to select to dates range
+		 */
+		isBeforeAndAfterOneWeek: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		/**
+		 * minTime.
+		 * Allows to determine minimum time that users can select. It should be number
+		 */
+		minTime: {
+			type: Number,
+			required: false
+		},
+		/**
+		 * maxTime.
+		 * Allows to determine minimum time that users can select. It should be number
+		 */
+		maxTime: {
+			type: Number,
+			required: false
+		},
+		/**
+		 * shortcuts.
+		 * Allows to determine shortcuts when shortcutsEnable property is true
+		 */
+		shortcuts: {
+			type: Array,
+			default: () => {
+				return [
+					{
+						text: "Yesterday",
+						onClick: () => addDays(-1)
+					},
+					{
+						text: "Today",
+						onClick: () => addDays()
+					},
+					{
+						text: "Tomorrow",
+						onClick: () => addDays(1)
+					},
+					{
+						text: "A week",
+						onClick: () => addDays(7)
+					},
+					{
+						text: "2 weeks",
+						onClick: () => addDays(14)
+					},
+					{
+						text: "A month",
+						onClick: () => addDays(30)
+					},
+					{
+						text: "6 months",
+						onClick: () => addDays(182)
+					},
+					{
+						text: "A year",
+						onClick: () => addDays(365)
+					}
+				];
+			}
+		}
+	},
+	methods: {
+		/**
+		 * updateDate
+		 * @input update value when input value changes
+		 */
+		updateDate(e) {
+			if (this.minDate || this.maxDate) {
+				let dates = this.formatDates();
+				if (e < dates[0]) {
+					let date = dates[0];
+					this.$emit("input", date);
+				} else if (e > dates[1]) {
+					let date = dates[1];
+					this.$emit("input", date);
+				} else {
+					this.$emit("input", e);
+				}
+			} else {
+				this.$emit("input", e);
+			}
+			if (e === null) {
+				this.$emit("input", null);
+			}
+		},
+		formatDates() {
+			const minDate = new Date(this.minDate);
+			const maxDate = new Date(this.maxDate);
+			return [minDate, maxDate];
+		},
+		disableBeforeMinDateAfterMaxDate(date) {
+			if (!this.minDate && !this.maxDate) return;
+			let dates = this.formatDates();
+			dates[0].setHours(0, 0, 0, 0);
+			dates[1].setHours(0, 0, 0, 0);
+			if (!this.maxDate && this.minDate) {
+				return date <= dates[0];
+			} else if (!this.minDate && this.maxDate) {
+				return date >= dates[1];
+			} else {
+				return date < dates[0] || date > dates[1];
+			}
+		},
+		disableBeforeAfterTime(date) {
+			if (!this.minTime && !this.maxTime) return;
+			if (this.minTime && !this.maxTime) {
+				return date.getHours() < this.minTime;
+			} else if (!this.minTime && this.maxTime) {
+				return date.getHours() > this.maxTime;
+			}
+			if (this.minTime && this.maxTime) {
+				return (
+					date.getHours() < this.minTime ||
+					date.getHours() > this.maxTime
+				);
+			}
+		},
+		setNextWeek(emit) {
+			const start = new Date();
+			const end = addDays(7);
+
+			const date1 = new Date(this.maxDate);
+			var date = [start, end];
+			if (end > date1) {
+				date = [start, date1];
+			}
+			emit(date);
+		},
+		setOneWeekBefore(emit) {
+			const start = addDays(-7);
+			const end = new Date();
+
+			const date1 = new Date(this.minDate);
+			var date = [start, end];
+			if (start < date1) {
+				date = [date1, end];
+			}
+			emit(date);
+		}
+	}
+};
+</script>
+
+<style scoped>
+@media only screen and (min-width: 600px) {
+	.mx-datepicker-range {
+		width: 120px;
+	}
+}
+
+@media only screen and (min-width: 768px) {
+	.mx-datepicker-range {
+		width: 150px;
+	}
+}
+
+@media only screen and (min-width: 992px) {
+	.mx-datepicker-range {
+		width: 200px;
+	}
+}
+
+@media only screen and (min-width: 1200px) {
+	.mx-datepicker-range {
+		width: 230px;
+	}
+}
+
+@media only screen and (min-width: 1350px) {
+	.mx-datepicker-range {
+		width: 270px;
+	}
+}
+
+@media only screen and (min-width: 1500px) {
+	.mx-datepicker-range {
+		width: 320px;
+	}
+}
+</style>

package/src/components/Date/index.js

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

package/src/components/Dropdown/Dropdown.vue

@@ -0,0 +1,51 @@
+<template>
+	<b-dropdown
+		v-on="$listeners"
+		v-bind="$props"
+		:text="text"
+		:variant="variant"
+		:size="size"
+		boundary="window"
+		right
+	>
+		<template slot="default">
+			<slot name="default"></slot>
+		</template>
+
+		<template slot="button-content">
+			<slot name="button-content"></slot>
+		</template>
+	</b-dropdown>
+</template>
+
+<script>
+export default {
+	name: "mui-dropdown",
+	props: {
+		text: {
+			type: String,
+			required: false
+		},
+		variant: {
+			type: String,
+			default: "light border",
+			required: false
+		},
+		size: {
+			type: String,
+			default: "sm",
+			required: false,
+			validator: function(value) {
+				return (
+					["sm", "xs", "md", "default", "lg"].indexOf(value) !== -1
+				);
+			}
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+			required: false
+		}
+	}
+};
+</script>

package/src/components/Dropdown/DropdownDivider.vue

@@ -0,0 +1,12 @@
+<template>
+	<b-dropdown-divider v-bind="$props"> </b-dropdown-divider>
+</template>
+
+<script>
+export default {
+	name: "mui-dropdown-divider",
+	props: {
+		tag: {}
+	}
+};
+</script>