@monoui/vuejs 1.1.10

package/package.json

@@ -0,0 +1,105 @@
+{
+	"name": "@monoui/vuejs",
+	"version": "1.1.10",
+	"description": "This project will contain MonoFor UI Framework",
+	"main": "./dist/main.js",
+	"repository": "git@gitlab.com:monoui/vuejs.git",
+	"author": "MonoFor, Inc. <social@monofor.com>",
+	"license": "MIT",
+	"scripts": {
+		"docs": "vuepress dev docs",
+		"styleguide": "vue-styleguidist server",
+		"styleguide:build": "vue-styleguidist build",
+		"deploy": "cross-env NODE_ENV=production webpack --config webpack.config.js",
+		"lint": "./node_modules/.bin/eslint --fix -c ./.eslintrc.js --ext .js,.vue src",
+		"test": "jest"
+	},
+	"files": [
+		"dist",
+		"src"
+	],
+	"dependencies": {
+		"@fortawesome/fontawesome-svg-core": "^1.2.35",
+		"@fortawesome/free-brands-svg-icons": "^5.15.3",
+		"@fortawesome/free-solid-svg-icons": "^5.15.3",
+		"@fortawesome/vue-fontawesome": "^2.0.2",
+		"@vue/cli-plugin-unit-jest": "^4.1.2",
+		"@yaireo/tagify": "^2.31.6",
+		"bootstrap": "^4.5.3",
+		"bootstrap-vue": "^2.21.1",
+		"cronstrue": "^1.84.0",
+		"jest": "^24.9.0",
+		"moment": "^2.27.0",
+		"vee-validate": "^3.0.11",
+		"vue": "^2.6.12",
+		"vue-cron-2": "^1.0.7",
+		"vue-multiselect": "^2.1.6",
+		"vue-server-renderer": "^2.6.12",
+		"vue-sweetalert": "^0.1.18",
+		"vue-sweetalert2": "^2.1.5",
+		"vue-template-compiler": "^2.6.12",
+		"vue-test-utils": "^1.0.0-beta.11",
+		"vue2-datepicker": "^3.6.2",
+		"vuejs-noty": "^0.1.3"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.7.2",
+		"@babel/helper-validator-identifier": "^7.12.11",
+		"@babel/plugin-transform-runtime": "^7.6.2",
+		"@babel/preset-env": "^7.7.1",
+		"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+		"@vue/babel-preset-jsx": "^1.1.2",
+		"@vue/test-utils": "^1.0.0-beta.30",
+		"autoprefixer": "^9.7.1",
+		"babel-eslint": "^10.0.3",
+		"babel-loader": "^8.0.6",
+		"cross-env": "^6.0.3",
+		"css-loader": "^3.2.0",
+		"eslint": "^6.6.0",
+		"eslint-config-prettier": "^6.7.0",
+		"eslint-config-standard": "^14.1.0",
+		"eslint-friendly-formatter": "^4.0.1",
+		"eslint-loader": "^3.0.2",
+		"eslint-plugin-html": "^6.0.0",
+		"eslint-plugin-import": "^2.18.2",
+		"eslint-plugin-jest": "^23.0.4",
+		"eslint-plugin-node": "^10.0.0",
+		"eslint-plugin-prettier": "^3.1.1",
+		"eslint-plugin-promise": "^4.2.1",
+		"eslint-plugin-standard": "^4.0.1",
+		"eslint-plugin-vue": "^6.0.1",
+		"file-loader": "^4.2.0",
+		"husky": "^3.1.0",
+		"identity-obj-proxy": "^3.0.0",
+		"lint-staged": "^9.4.3",
+		"poi": "^12.7.3",
+		"prettier": "^1.19.1",
+		"uglifyjs-webpack-plugin": "^2.2.0",
+		"url-loader": "^2.2.0",
+		"vue-html-loader": "^1.2.4",
+		"vue-loader": "^15.8.3",
+		"vue-router": "^3.1.3",
+		"vue-styleguidist": "^3.26.2",
+		"vuepress": "^1.2.0",
+		"webpack": "^4.41.2",
+		"webpack-cli": "^4.6.0"
+	},
+	"peerDependencies": {
+		"vue": "^2.6.11"
+	},
+	"husky": {
+		"hooks": {
+			"pre-commit": "lint-staged"
+		}
+	},
+	"lint-staged": {
+		"*.js": [
+			"yarn lint",
+			"git add"
+		],
+		"*.vue": [
+			"yarn lint",
+			"git add"
+		]
+	}
+}

package/src/components/BreadCrumb/BreadCrumb.vue

@@ -0,0 +1,59 @@
+<template>
+	<nav aria-label="breadcrumb">
+		<ol class="breadcrumb">
+			<li
+				class="breadcrumb-item"
+				v-for="(item, i) in items"
+				:key="i"
+				:class="{ active: i + 1 === items.length }"
+			>
+				<router-link :to="item.link" v-if="!!item.link">
+					<mui-icon
+						fixed-width
+						:icon="item.icon"
+						v-if="!!item.icon"
+					/>
+					{{ item.text }}
+				</router-link>
+				<span v-else>{{ item.text }}</span>
+			</li>
+			<!-- <li class="breadcrumb-item active" aria-current="page">Data</li> -->
+		</ol>
+	</nav>
+</template>
+<script>
+/**
+ * Breadcrumb Component
+ */
+export default {
+	name: "mui-bread-crumb",
+	props: {
+		/**
+		 * Breadcrumb item list
+		 */
+		items: {
+			type: Array,
+			required: true
+		},
+		/**
+		 * Breadcrumb icon
+		 */
+		icon: {
+			type: String,
+			required: false,
+			default: null
+		}
+	}
+};
+</script>
+<style scoped>
+.breadcrumb {
+	background: #fff;
+	border: none;
+	border-radius: 0;
+	margin-bottom: 10px;
+	margin-left: -30px;
+	margin-right: -30px;
+	padding: 0 30px;
+}
+</style>

package/src/components/BreadCrumb/index.js

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

package/src/components/Button/Button.vue

@@ -0,0 +1,118 @@
+<template>
+	<mui-button-core v-on="$listeners" v-bind="$props" :class="innerClass">
+		<template v-if="!hasSlot">
+			<span class="mr-1" v-if="loading">
+				<b-spinner :small="true" :class="spinnerClass" />
+			</span>
+			<mui-icon
+				v-if="!loading && icon"
+				:icon="icon"
+				:class="{ 'mr-1': text, iconClass }"
+			/>
+			{{ text }}
+		</template>
+		<template v-else>
+			<span class="mr-1" v-if="loading">
+				<b-spinner :small="true" :class="spinnerClass" />
+			</span>
+			<slot></slot>
+		</template>
+	</mui-button-core>
+</template>
+<script>
+export default {
+	name: "mui-button",
+	props: {
+		/**
+		 * Button text
+		 * @type String
+		 */
+		text: {
+			type: String,
+			required: false
+		},
+		/**
+		 * Button loading
+		 * @type Boolean
+		 */
+		loading: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		/**
+		 * Button icon
+		 * @type String
+		 */
+		icon: {
+			type: String,
+			default: null,
+			required: false
+		},
+		/**
+		 * Variant
+		 * @type String
+		 */
+		variant: {
+			type: String,
+			default: "light"
+		},
+		/**
+		 * Button size
+		 * @type String
+		 */
+		size: {
+			type: String,
+			default: "sm",
+			validator: prop => ["xs", "sm", "md", "lg"].includes(prop)
+		},
+		/**
+		 * Disable component when value is true.
+		 * @type Boolean
+		 */
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		 * Button class
+		 * @type String
+		 */
+		innerClass: {
+			type: String,
+			default: ""
+		},
+		/**
+		 * Button icon class
+		 * @type String
+		 */
+		iconClass: {
+			type: String,
+			required: false
+		},
+		/**
+		 * Button spinner class
+		 * @type String
+		 */
+		spinnerClass: {
+			type: String,
+			required: false
+		},
+		/**
+		 * Component properties
+		 */
+		block: {},
+		squared: {},
+		href: {},
+		rel: {},
+		pill: {},
+		tag: {},
+		type: {}
+	},
+	computed: {
+		hasSlot() {
+			return !!this.$slots.default;
+		}
+	}
+};
+</script>

package/src/components/Button/ButtonCore.vue

@@ -0,0 +1,59 @@
+<template>
+	<b-button v-on="$listeners" v-bind="$props" :class="innerClass">
+		<slot></slot>
+	</b-button>
+</template>
+
+<script>
+/**
+ * MonoUI Button Core Component
+ */
+export default {
+	name: "mui-button-core",
+	props: {
+		/**
+		 * Variant
+		 * @type String
+		 */
+		variant: {
+			type: String,
+			default: "light"
+		},
+		/**
+		 * Size
+		 * @type String
+		 */
+		size: {
+			type: String,
+			default: "sm",
+			validator: prop => ["xs", "sm", "md", "lg"].includes(prop)
+		},
+		/**
+		 * Disable component when value is true.
+		 * @type Boolean
+		 */
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		 * Class
+		 * @type String
+		 */
+		innerClass: {
+			type: String,
+			default: ""
+		},
+		/**
+		 * Component properties
+		 */
+		block: {},
+		squared: {},
+		href: {},
+		rel: {},
+		pill: {},
+		tag: {},
+		type: {}
+	}
+};
+</script>

package/src/components/Button/ButtonEdit.vue

@@ -0,0 +1,15 @@
+<template>
+	<mui-button @click="$emit('click')" v-bind="this.$props" variant="primary">
+		<mui-icon class="mr-1" icon="edit" />
+		<slot />
+	</mui-button>
+</template>
+<script>
+import ButtonVue from "./Button.vue";
+
+export default {
+	name: "mui-button-edit",
+	props: ButtonVue.props,
+	isSaving: false
+};
+</script>

package/src/components/Button/ButtonRemove.vue

@@ -0,0 +1,15 @@
+<template>
+	<mui-button @click="$emit('click')" v-bind="this.$props" variant="danger">
+		<mui-icon class="mr-1" icon="trash" />
+		<slot />
+	</mui-button>
+</template>
+<script>
+import ButtonVue from "./Button.vue";
+
+export default {
+	name: "mui-button-remove",
+	props: ButtonVue.props,
+	isSaving: false
+};
+</script>

package/src/components/Button/index.js

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

package/src/components/Card/Card.vue

@@ -0,0 +1,82 @@
+<template>
+	<b-card
+		v-bind="$props"
+		:class="innerClass"
+		:body-tag="bodyTag"
+		:body-bg-variant="bodyBgVariant"
+		:body-border-variant="bodyBorderVariant"
+		:body-text-variant="bodyTextVariant"
+		:body-class="bodyClass"
+		:title="title"
+		:title-tag="titleTag"
+		:sub-title="subTitle"
+		:sub-title-tag="subTitleTag"
+		:sub-title-text-variant="subTitleTextVariant"
+		:overlay="overlay"
+		:header-tag="headerTag"
+		:header-bg-variant="headerBgVariant"
+		:header-border-variant="headerBorderVariant"
+		:header-text-variant="headerTextVariant"
+		:header="header"
+		:header-class="headerClass"
+		:footer-tag="footerTag"
+		:footer-bg-variant="footerBgVariant"
+		:footer-border-variant="footerBorderVariant"
+		:footer-text-variant="footerTextVariant"
+		:footer="footer"
+		:footer-class="footerClass"
+		:tag="tag"
+		:bg-variant="bgVariant"
+		:border-variant="borderVariant"
+		:text-variant="textVariant"
+		:no-body="noBody"
+	>
+		<slot></slot>
+	</b-card>
+</template>
+
+<script>
+export default {
+	name: "mui-card",
+	props: {
+		bodyTag: {
+			type: String,
+			required: false
+		},
+		bodyBgVariant: {
+			type: String,
+			required: false
+		},
+		bodyBorderVariant: {},
+		bodyTextVariant: {},
+		bodyClass: {},
+		title: {},
+		titleTag: {},
+		subTitle: {},
+		subTitleTag: {},
+		subTitleTextVariant: {},
+		overlay: {},
+		headerTag: {},
+		headerBgVariant: {},
+		headerBorderVariant: {},
+		headerTextVariant: {},
+		header: {},
+		headerClass: {},
+		footerTag: {},
+		footerBgVariant: {},
+		footerBorderVariant: {},
+		footerTextVariant: {},
+		footer: {},
+		footerClass: {},
+		tag: {},
+		bgVariant: {},
+		borderVariant: {},
+		textVariant: {},
+		noBody: {},
+		innerClass: {
+			type: String,
+			required: false
+		}
+	}
+};
+</script>

package/src/components/Card/CardBody.vue

@@ -0,0 +1,72 @@
+<template>
+	<b-card-body
+		v-bind="$props"
+		:class="innerClass"
+		:body-tag="bodyTag"
+		:body-bg-variant="bodyBgVariant"
+		:body-border-variant="bodyBorderVariant"
+		:body-text-variant="bodyTextVariant"
+		:body-class="bodyClass"
+		:title="title"
+		:title-tag="titleTag"
+		:sub-title="subTitle"
+		:sub-title-tag="subTitleTag"
+		:sub-title-text-variant="subTitleTextVariant"
+		:overlay="overlay"
+	>
+		<slot></slot>
+	</b-card-body>
+</template>
+
+<script>
+export default {
+	name: "mui-card-body",
+	props: {
+		bodyTag: {
+			type: String,
+			required: false
+		},
+		bodyBgVariant: {
+			type: String,
+			required: false
+		},
+		bodyBorderVariant: {
+			type: String,
+			required: false
+		},
+		bodyTextVariant: {
+			type: String,
+			required: false
+		},
+		bodyClass: {
+			type: String,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		titleTag: {
+			type: String,
+			required: false
+		},
+		subTitle: {
+			type: String,
+			required: false
+		},
+		subTitleTag: {
+			type: String,
+			required: false
+		},
+		subTitleTextVariant: {
+			type: String,
+			required: false
+		},
+		overlay: {},
+		innerClass: {
+			type: String,
+			required: false
+		}
+	}
+};
+</script>

package/src/components/Card/CardFooter.vue

@@ -0,0 +1,55 @@
+<template>
+	<b-card-footer
+		v-bind="$props"
+		:class="innerClass"
+		:footer-tag="footerTag"
+		:footer-bg-variant="footerBgVariant"
+		:footer-border-variant="footerBorderVariant"
+		:footer-text-variant="footerTextVariant"
+		:footer="footer"
+		:footer-html="footerHtml"
+		:footer-class="footerClass"
+	>
+		<slot></slot>
+	</b-card-footer>
+</template>
+
+<script>
+export default {
+	name: "mui-card-footer",
+	props: {
+		footerTag: {
+			type: String,
+			required: false
+		},
+		footerBgVariant: {
+			type: String,
+			required: false
+		},
+		footerBorderVariant: {
+			type: String,
+			required: false
+		},
+		footerTextVariant: {
+			type: String,
+			required: false
+		},
+		footer: {
+			type: String,
+			required: false
+		},
+		footerHtml: {
+			type: String,
+			required: false
+		},
+		footerClass: {
+			type: String,
+			required: false
+		},
+		innerClass: {
+			type: String,
+			required: false
+		}
+	}
+};
+</script>

package/src/components/Card/CardHeader.vue

@@ -0,0 +1,58 @@
+<template>
+	<b-card-header
+		v-bind="$props"
+		:class="innerClass"
+		:header="header"
+		:header-tag="headerTag"
+		:header-class="headerClass"
+		:header-bg-variant="headerBgVariant"
+		:header-border-variant="headerBorderVariant"
+		:header-text-variant="headerTextVariant"
+	>
+		<template v-if="hasHeader">
+			{{ header }}
+		</template>
+		<slot v-else></slot>
+	</b-card-header>
+</template>
+
+<script>
+export default {
+	name: "mui-card-header",
+	computed: {
+		hasHeader() {
+			return !this.header ? false : true;
+		}
+	},
+	props: {
+		header: {
+			type: String,
+			required: false
+		},
+		headerTag: {
+			type: String,
+			required: false
+		},
+		headerClass: {
+			type: String,
+			required: false
+		},
+		headerBgVariant: {
+			type: String,
+			required: false
+		},
+		headerBorderVariant: {
+			type: String,
+			required: false
+		},
+		headerTextVariant: {
+			type: String,
+			required: false
+		},
+		innerClass: {
+			type: String,
+			required: false
+		}
+	}
+};
+</script>

package/src/components/Card/CardSubTitle.vue

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