Use nextcloud-vue multiselect

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

settings/src/components/popoverMenu/popoverItem.vue

@@ -1,50 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
-  -
-  - @author John Molakvoæ <skjnldsv@protonmail.com>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program. If not, see <http://www.gnu.org/licenses/>.
-  -
-  -->
-
-<template>
-	<li>
-		<!-- If item.href is set, a link will be directly used -->
-		<a @click="item.action" v-if="item.href" :href="(item.href) ? item.href : '#' " :target="(item.target) ? item.target : '' " rel="noreferrer noopener">
-			<span :class="item.icon"></span>
-			<span v-if="item.text">{{item.text}}</span>
-			<p v-else-if="item.longtext">{{item.longtext}}</p>
-		</a>
-		<!-- If item.action is set instead, a button will be used -->
-		<button @click="item.action" v-else-if="item.action">
-			<span :class="item.icon"></span>
-			<span v-if="item.text">{{item.text}}</span>
-			<p v-else-if="item.longtext">{{item.longtext}}</p>
-		</button>
-		<!-- If item.longtext is set AND the item does not have an action -->
-		<span class="menuitem" v-else>
-			<span :class="item.icon"></span>
-			<span v-if="item.text">{{item.text}}</span>
-			<p v-else-if="item.longtext">{{item.longtext}}</p>
-		</span>
-	</li>
-</template>
-
-<script>
-export default {
-	props: ['item']
-};
-</script>

settings/src/components/userList.vue

@@ -80,7 +80,7 @@
 						 tag-placeholder="create" :placeholder="t('settings', 'Add user in group')"
 						 label="name" track-by="id" class="multiselect-vue"
 						 :multiple="true" :taggable="true" :close-on-select="false"
-						 @tag="createGroup">
+						 :tag-width="60" @tag="createGroup">
 							 <!-- If user is not admin, he is a subadmin.
 							 	  Subadmins can't create users outside their groups
 								  Therefore, empty select is forbidden -->
@@ -91,7 +91,7 @@
 				<multiselect :options="subAdminsGroups" v-model="newUser.subAdminsGroups"
 							 :placeholder="t('settings', 'Set user as admin for')"
 							 label="name" track-by="id" class="multiselect-vue"
-							 :multiple="true" :close-on-select="false">
+							 :multiple="true" :close-on-select="false" :tag-width="60">
 					<span slot="noResult">{{t('settings', 'No results')}}</span>
 			</multiselect>
 			</div>
@@ -137,7 +137,7 @@
 
 <script>
 import userRow from './userList/userRow';
-import Multiselect from 'vue-multiselect';
+import { Multiselect } from 'nextcloud-vue'
 import InfiniteLoading from 'vue-infinite-loading';
 import Vue from 'vue';
 

settings/src/components/userList/userRow.vue

@@ -73,6 +73,7 @@
 						 tag-placeholder="create" :placeholder="t('settings', 'Add user in group')"
 						 label="name" track-by="id" class="multiselect-vue" :limit="2"
 						 :multiple="true" :taggable="settings.isAdmin" :closeOnSelect="false"
+						 :tag-width="60"
 						 @tag="createGroup" @select="addUserGroup" @remove="removeUserGroup">
 				<span slot="limit" class="multiselect__limit" v-tooltip.auto="formatGroupsTitle(userGroups)">+{{userGroups.length-2}}</span>
 				<span slot="noResult">{{t('settings', 'No results')}}</span>
@@ -82,7 +83,7 @@
 			<multiselect :value="userSubAdminsGroups" :options="subAdminsGroups" :disabled="loading.subadmins||loading.all"
 						 :placeholder="t('settings', 'Set user as admin for')"
 						 label="name" track-by="id" class="multiselect-vue" :limit="2"
-						 :multiple="true" :closeOnSelect="false"
+						 :multiple="true" :closeOnSelect="false" :tag-width="60"
 						 @select="addUserSubAdmin" @remove="removeUserSubAdmin">
 				<span slot="limit" class="multiselect__limit" v-tooltip.auto="formatGroupsTitle(userSubAdminsGroups)">+{{userSubAdminsGroups.length-2}}</span>
 				<span slot="noResult">{{t('settings', 'No results')}}</span>
@@ -127,11 +128,10 @@
 </template>
 
 <script>
-import popoverMenu from '../popoverMenu';
 import ClickOutside from 'vue-click-outside';
-import Multiselect from 'vue-multiselect';
 import Vue from 'vue'
 import VTooltip from 'v-tooltip'
+import { PopoverMenu, Multiselect } from 'nextcloud-vue'
 
 Vue.use(VTooltip)
 
@@ -139,7 +139,7 @@ export default {
 	name: 'userRow',
 	props: ['user', 'settings', 'groups', 'subAdminsGroups', 'quotaOptions', 'showConfig', 'languages', 'externalActions'],
 	components: {
-		popoverMenu,
+		PopoverMenu,
 		Multiselect
 	},
 	directives: {