@monoui/vuejs 1.1.11 → 1.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@monoui/vuejs",
-	"version": "1.1.11",
+	"version": "1.1.15",
 	"description": "This project will contain MonoFor UI Framework",
 	"main": "./dist/main.js",
 	"repository": "git@gitlab.com:monoui/vuejs.git",
@@ -33,6 +33,7 @@
 		"vee-validate": "^3.0.11",
 		"vue": "^2.6.12",
 		"vue-cron-2": "^1.0.7",
+		"vue-js-toggle-button": "^1.3.3",
 		"vue-multiselect": "^2.1.6",
 		"vue-server-renderer": "^2.6.12",
 		"vue-sweetalert": "^0.1.18",

package/src/components/Table/Table.vue

@@ -5,6 +5,7 @@
 				'table-responsive': isResponsive,
 				'table-relative': isLoading
 			}"
+			:style="tableStyle"
 		>
 			<div
 				v-if="isLoading && !isEmpty"
@@ -205,16 +206,23 @@
 							<b-dropdown-divider
 								v-if="
 									filteredPerPageValues &&
-										filteredPerPageValues.length
+										filteredPerPageValues.length &&
+										inLimit()
 								"
 							></b-dropdown-divider>
-							<b-dropdown-item
-								@click="
-									changeItemPerPage(settings.totalItemCount)
-								"
-							>
-								All
-							</b-dropdown-item>
+
+							<template>
+								<b-dropdown-item
+									v-if="inLimit()"
+									@click="
+										changeItemPerPage(
+											settings.totalItemCount
+										)
+									"
+								>
+									All ({{ settings.totalItemCount }})
+								</b-dropdown-item>
+							</template>
 						</b-dropdown>
 					</div>
 				</slot>
@@ -294,6 +302,11 @@ export default {
 			required: false,
 			default: ""
 		},
+		tableStyle: {
+			type: String,
+			required: false,
+			default: ""
+		},
 		isResponsive: {
 			type: Boolean,
 			required: false,
@@ -314,7 +327,7 @@ export default {
 		emptyMessage: {
 			type: String,
 			required: false,
-			default: "No data avaible in table"
+			default: "No data available in table"
 		},
 		autoLoad: {
 			type: Boolean,
@@ -373,7 +386,8 @@ export default {
 			tableData: [],
 			searchWord: null,
 			isDataEmpty: false,
-			isLoading: false
+			isLoading: false,
+			limit: 250
 		};
 	},
 	computed: {
@@ -525,6 +539,9 @@ export default {
 			}
 
 			this.getValues();
+		},
+		inLimit() {
+			return this.settings.totalItemCount <= this.limit;
 		}
 	}
 };

package/src/components/Toggle-Switch/Toggle-Switch.vue

@@ -0,0 +1,152 @@
+<template>
+	<toggle-button v-on="$listeners" v-bind="$props" v-model="toggleValue" />
+</template>
+
+<script>
+export default {
+	name: "mui-toggle-switch",
+	props: {
+		/**
+		 *Initial state of the toggle button
+		 * @type Boolean
+		 */
+		value: {
+			type: Boolean,
+			required: true
+		},
+		/**
+		 * If set to true, will be watching changes in value property
+		 * and overwrite the current state of the button whenever value prop changes
+		 * @type Boolean
+		 */
+		sync: {
+			type: Boolean,
+			required: false
+		},
+		/**
+		 * Transition time for the animation
+		 * @type Number
+		 */
+		speed: {
+			type: Number,
+			required: false,
+			default: 300
+		},
+		/**
+		 * Button does not react on mouse events
+		 * @type Boolean
+		 */
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		/**
+		 * If String - color of the button when checked
+		   If Object - colors for the button when checked/unchecked or disabled
+		   Example: {checked: '#00FF00', unchecked: '#FF0000', disabled: '#CCCCCC'}
+		 * @type [String, Object]
+		 */
+		color: {
+			type: [String, Object],
+			required: false,
+			default: "#75C791"
+		},
+		/**
+		 * If true - deactivates the setting of colors
+		 * through inline styles in favor of using CSS styling
+		 * @type Boolean
+		 */
+		"css-colors": {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		/**
+		 * If Boolean - shows/hides default labels ("on" and "off")
+		 * If Object - sets custom labels for both states.
+		 * Example: {checked: 'Foo', unchecked: 'Bar'}
+		 * @type [Boolean, Object]
+		 */
+		labels: {
+			type: [Boolean, Object],
+			required: false,
+			default: false
+		},
+		/**
+		 * If String - color or background property of the switch when checked
+		 * If Object - colors or background property for the switch when checked/uncheked
+		 * Example: {checked: '#25EF02', unchecked: 'linear-gradient(red, yellow)'}
+		 * @type [String, Object]
+		 */
+		"switch-color": {
+			type: [String, Object],
+			required: false,
+			default: "#fff"
+		},
+		/**
+		 * Width of the button
+		 * @type Number
+		 */
+		width: {
+			type: Number,
+			required: false,
+			default: 50
+		},
+		/**
+		 * Height of the button
+		 * @type Number
+		 */
+		height: {
+			type: Number,
+			required: false,
+			default: 22
+		},
+		/**
+		 * Space between the switch and background border
+		 * @type Number
+		 */
+		margin: {
+			type: Number,
+			required: false,
+			default: 3
+		},
+		/**
+		 * Font size
+		 * @type Number
+		 */
+		"font-size": {
+			type: Number,
+			required: false,
+			default: undefined
+		},
+		title: {
+			type: String,
+			required: false
+		}
+	},
+	data() {
+		return {
+			toggleValue: false
+		};
+	},
+	created() {
+		this.toggleValue = this.value;
+	},
+	watch: {
+		value(val) {
+			this.toggleValue = val;
+		},
+		toggleValue(val) {
+			this.$emit("input", val);
+		}
+	},
+	methods: {
+		changeUpdate(event) {
+			this.$emit("change", event);
+		}
+	}
+};
+</script>
+
+<style></style>

package/src/components/Toggle-Switch/index.js

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

package/src/index.js

@@ -12,6 +12,7 @@ import Checkbox from "./components/Checkbox";
 import Tooltip from "./components/Tooltip";
 import Spinner from "./components/Spinner";
 import Table from "./components/Table";
+import ToggleSwitch from "./components/Toggle-Switch";
 import MultiKeyValue from "./components/MultiKeyValue";
 import {
 	Alert,
@@ -52,6 +53,7 @@ import "@yaireo/tagify/dist/tagify.css";
 
 import BootstrapVue from "bootstrap-vue";
 import { FontAwesomeIcon } from "./icons";
+import { ToggleButton } from "vue-js-toggle-button";
 import { ValidationObserver, ValidationProvider, extend } from "vee-validate";
 import { min, required, email } from "vee-validate/dist/rules";
 import VueSweetalert2 from "vue-sweetalert2";
@@ -68,6 +70,10 @@ export default {
 		Vue.component("font-awesome-icon", FontAwesomeIcon);
 		// ***FontAwesome
 
+		// ** Toggle/Switch
+		Vue.component("toggle-button", ToggleButton);
+		// ** Toggle/Switch
+
 		// ***VeeValidate***
 		Vue.component("ValidationObserver", ValidationObserver);
 		Vue.component("ValidationProvider", ValidationProvider);
@@ -126,6 +132,7 @@ export default {
 		Vue.component(KeyValue.name, KeyValue);
 		Vue.component(Timeline.name, Timeline);
 		Vue.component(TimelineItem.name, TimelineItem);
+		Vue.component(ToggleSwitch.name, ToggleSwitch);
 
 		Vue.use(Notification);
 		Vue.use(Alerte);