Added multiselect loading and fixed padding + select icon

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

src/components/Multiselect/Multiselect.vue

@@ -36,6 +36,11 @@
 	<vue-multiselect
 		:value="value"
 		v-bind="$attrs"
+		:class="{
+			'icon-loading-small': loading,
+			'multiselect--multiple': multiple,
+			'multiselect--single': !multiple
+		}"
 		:limit="maxOptions"
 		:close-on-select="!multiple"
 		:multiple="multiple"
@@ -113,6 +118,15 @@ export default {
 			type: Boolean,
 			default: false
 		},
+		/**
+		 * Overriding the default slot. Only showing a spiner.
+		 * @default true
+		 * @type {Boolean}
+		 */
+		loading: {
+			type: Boolean,
+			default: false
+		},
 		/**
 		 * Enable the automatic limit and width calculation
 		 * Only works on multiple

src/components/Multiselect/index.scss

@@ -2,10 +2,11 @@
 // as the nested properties are not inside it
 // Therefore we need to use an external scoping
 .multiselect[data-v-#{$scope_version}] {
-	margin: 1px 2px;
+	margin: 0;
 	padding: 0 !important;
 	display: inline-block;
-	width: 160px;
+	/* override this rule with your width styling if you need */
+	min-width: 160px; 
 	position: relative;
 	background-color: var(--color-main-background);
 	&.multiselect--active {
@@ -19,6 +20,11 @@
 	&.multiselect--disabled .multiselect__single {
 		background-color: var(--color-background-dark) !important;
 	}
+	// loading state
+	&.icon-loading-small::after {
+		left: 100%;
+		margin-left: -24px;
+	}
 	.multiselect__tags {
 		/* space between tags and limit tag */
 		$space-between: 5px;
@@ -117,6 +123,8 @@
 			display: block !important;
 			/* only when not active */
 			cursor: pointer;
+			/* override inline styling of the lib */
+			padding: 7px 6px !important;
 		}
 	}
 	/* results wrapper */
@@ -163,7 +171,6 @@
 				/* selected checkmark icon */
 				&::before {
 					content: ' ';
-					background-image: var(--icon-checkmark-000);
 					background-repeat: no-repeat;
 					background-position: center;
 					min-width: 16px;
@@ -201,4 +208,11 @@
 			}
 		}
 	}
+	/* Icon before option select */
+	&.multiselect--multiple .multiselect__content-wrapper li > span::before {
+		background-image: var(--icon-checkmark-000);
+	}
+	&.multiselect--single .multiselect__content-wrapper li > span::before {
+		background-image: var(--icon-triangle-e-000);
+	}
 }