Replace NcMultiselect with NcSelect

Signed-off-by: greta <gretadoci@gmail.com>

9 files changed, 55 insertions, 30 deletions

diff --git a/src/components/AppNavigation/Settings/SettingsAddressbookShare.vue b/src/components/AppNavigation/Settings/SettingsAddressbookShare.vue
index b419640e..5b072b67 100644
--- a/src/components/AppNavigation/Settings/SettingsAddressbookShare.vue
+++ b/src/components/AppNavigation/Settings/SettingsAddressbookShare.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div class="addressbook-shares">
-		<Multiselect id="users-groups-search"
+		<NcSelect id="users-groups-search"
 			:options="usersOrGroups"
 			:searchable="true"
 			:internal-search="false"
@@ -47,7 +47,7 @@
 </template>
 
 <script>
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect } from '@nextcloud/vue'
 import client from '../../../services/cdav.js'
 
 import addressBookSharee from './SettingsAddressbookSharee.vue'
@@ -58,7 +58,7 @@ export default {
 	name: 'SettingsAddressbookShare',
 
 	components: {
-		Multiselect,
+		NcSelect,
 		addressBookSharee,
 	},
 
diff --git a/src/components/AppNavigation/Settings/SettingsImportContacts.vue b/src/components/AppNavigation/Settings/SettingsImportContacts.vue
index 8721820e..04e8f14f 100644
--- a/src/components/AppNavigation/Settings/SettingsImportContacts.vue
+++ b/src/components/AppNavigation/Settings/SettingsImportContacts.vue
@@ -36,7 +36,7 @@
 				@close="toggleModal">
 				<section class="import-contact__modal-addressbook">
 					<h3>{{ t('contacts', 'Import contacts') }}</h3>
-					<Multiselect v-if="!isSingleAddressbook"
+					<NcSelect v-if="!isSingleAddressbook"
 						id="select-addressbook"
 						v-model="selectedAddressbook"
 						:allow-empty="false"
@@ -48,7 +48,7 @@
 						<template slot="singleLabel" slot-scope="{ option }">
 							{{ t('contacts', 'Import into the {addressbookName} address book', { addressbookName: option.displayName }) }}
 						</template>
-					</Multiselect>
+					</NcSelect>
 				</section>
 				<section class="import-contact__modal-pick">
 					<input id="contact-import"
@@ -95,7 +95,7 @@
 import {
 	NcButton as Button,
 	NcModal as Modal,
-	NcMultiselect as Multiselect,
+	NcSelect,
 	NcLoadingIcon as IconLoading,
 } from '@nextcloud/vue'
 import { encodePath } from '@nextcloud/paths'
@@ -123,7 +123,7 @@ export default {
 	components: {
 		Button,
 		Modal,
-		Multiselect,
+		NcSelect,
 		IconUpload,
 		IconError,
 		IconFolder,
diff --git a/src/components/AppNavigation/Settings/SettingsSortContacts.vue b/src/components/AppNavigation/Settings/SettingsSortContacts.vue
index 40bba15e..2f624562 100644
--- a/src/components/AppNavigation/Settings/SettingsSortContacts.vue
+++ b/src/components/AppNavigation/Settings/SettingsSortContacts.vue
@@ -23,7 +23,7 @@
 <template>
 	<div class="sort-contacts">
 		<IconList class="settings-line__icon" />
-		<Multiselect id="sort-by"
+		<NcSelect id="sort-by"
 			:value="orderKeyOption"
 			:searchable="false"
 			:allow-empty="false"
@@ -36,14 +36,14 @@
 </template>
 
 <script>
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect } from '@nextcloud/vue'
 import IconList from 'vue-material-design-icons/FormatListBulletedSquare.vue'
 
 export default {
 	name: 'SettingsSortContacts',
 
 	components: {
-		Multiselect,
+		NcSelect,
 		IconList,
 	},
 
diff --git a/src/components/ContactDetails.vue b/src/components/ContactDetails.vue
index a125073a..8c0661b4 100644
--- a/src/components/ContactDetails.vue
+++ b/src/components/ContactDetails.vue
@@ -204,7 +204,7 @@
 				:clear-view-delay="-1"
 				:title="t('contacts', 'Pick an address book')"
 				@close="closePickAddressbookModal">
-				<Multiselect ref="pickAddressbook"
+				<NcSelect ref="pickAddressbook"
 					v-model="pickedAddressbook"
 					:allow-empty="false"
 					:options="addressbooksOptions"
@@ -284,7 +284,7 @@ import {
 	NcAppContentDetails as AppContentDetails,
 	NcEmptyContent as EmptyContent,
 	NcModal as Modal,
-	NcMultiselect as Multiselect,
+	NcSelect,
 	NcLoadingIcon as IconLoading,
 	NcButton,
 	isMobile,
@@ -332,7 +332,7 @@ export default {
 		PencilIcon,
 		CheckIcon,
 		Modal,
-		Multiselect,
+		NcSelect,
 		PropertyGroups,
 		PropertyRev,
 		PropertySelect,
@@ -883,7 +883,16 @@ section.contact-details {
 		}
 	}
 }
-
+::v-deep .v-select.select {
+	min-width: 0 !important;
+	flex: 1 auto;
+	.vs__actions {
+		display: none;
+	}
+}
+::v-deep .vs__deselect {
+	display: none;
+}
 #pick-addressbook-modal {
 	::v-deep .modal-container {
 		display: flex;
diff --git a/src/components/Properties/PropertyDateTime.vue b/src/components/Properties/PropertyDateTime.vue
index f437cb18..09eaebd8 100644
--- a/src/components/Properties/PropertyDateTime.vue
+++ b/src/components/Properties/PropertyDateTime.vue
@@ -35,7 +35,7 @@
 		<div class="property__row">
 			<div class="property__label">
 				<!-- type selector -->
-				<Multiselect v-if="propModel.options"
+				<NcSelect v-if="propModel.options"
 					v-model="localType"
 					:options="options"
 					:searchable="false"
@@ -90,7 +90,7 @@ import debounce from 'debounce'
 import moment from 'moment'
 import {
 	NcDatetimePicker as DatetimePicker,
-	NcMultiselect as Multiselect,
+	NcSelect,
 } from '@nextcloud/vue'
 import { getLocale } from '@nextcloud/l10n'
 import { VCardTime } from 'ical.js'
@@ -103,7 +103,7 @@ export default {
 	name: 'PropertyDateTime',
 
 	components: {
-		Multiselect,
+		NcSelect,
 		DatetimePicker,
 		PropertyTitle,
 		PropertyActions,
diff --git a/src/components/Properties/PropertyGroups.vue b/src/components/Properties/PropertyGroups.vue
index 145a34f8..895a8547 100644
--- a/src/components/Properties/PropertyGroups.vue
+++ b/src/components/Properties/PropertyGroups.vue
@@ -34,8 +34,9 @@
 
 			<!-- multiselect taggable groups with a limit to 3 groups shown -->
 			<div class="property__value">
-				<Multiselect v-model="localValue"
+				<NcSelect v-model="localValue"
 					:options="groups"
+					:no-wrap="true"
 					:placeholder="placeholder"
 					:multiple="true"
 					:taggable="true"
@@ -54,7 +55,7 @@
 					<span slot="noResult">
 						{{ t('contacts', 'No results') }}
 					</span>
-				</Multiselect>
+				</NcSelect>
 			</div>
 
 			<!-- empty actions to keep the layout -->
@@ -65,7 +66,7 @@
 
 <script>
 import debounce from 'debounce'
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect } from '@nextcloud/vue'
 import Contact from '../../models/contact.js'
 import PropertyTitle from './PropertyTitle.vue'
 import naturalCompare from 'string-natural-compare'
@@ -75,7 +76,7 @@ export default {
 
 	components: {
 		PropertyTitle,
-		Multiselect,
+		NcSelect,
 	},
 
 	props: {
diff --git a/src/components/Properties/PropertyMultipleText.vue b/src/components/Properties/PropertyMultipleText.vue
index 976713c8..3c17e80d 100644
--- a/src/components/Properties/PropertyMultipleText.vue
+++ b/src/components/Properties/PropertyMultipleText.vue
@@ -49,7 +49,7 @@
 				</span>
 
 				<!-- type selector -->
-				<Multiselect v-else-if="!isReadOnly && propModel.options"
+				<NcSelect v-else-if="!isReadOnly && propModel.options"
 					v-model="localType"
 					:options="options"
 					:placeholder="t('contacts', 'Select type')"
@@ -127,7 +127,7 @@
 </template>
 
 <script>
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect } from '@nextcloud/vue'
 import PropertyMixin from '../../mixins/PropertyMixin.js'
 import PropertyTitle from './PropertyTitle.vue'
 import PropertyActions from './PropertyActions.vue'
@@ -136,7 +136,7 @@ export default {
 	name: 'PropertyMultipleText',
 
 	components: {
-		Multiselect,
+		NcSelect,
 		PropertyTitle,
 		PropertyActions,
 	},
@@ -192,4 +192,11 @@ export default {
 		}
 	}
 }
+
+// Mobile tweaks
+@media (max-width: 600px) {
+	.property__value {
+		width: 125px;
+	}
+}
 </style>
diff --git a/src/components/Properties/PropertySelect.vue b/src/components/Properties/PropertySelect.vue
index 8c13ff9b..f5324cfd 100644
--- a/src/components/Properties/PropertySelect.vue
+++ b/src/components/Properties/PropertySelect.vue
@@ -46,8 +46,9 @@
 			</div>
 
 			<div class="property__value">
-				<Multiselect v-model="matchedOptions"
+				<NcSelect v-model="matchedOptions"
 					:options="selectableOptions"
+					:no-wrap="true"
 					:placeholder="t('contacts', 'Select option')"
 					:disabled="isSingleOption || isReadOnly"
 					track-by="id"
@@ -67,7 +68,7 @@
 </template>
 
 <script>
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect } from '@nextcloud/vue'
 import PropertyMixin from '../../mixins/PropertyMixin.js'
 import PropertyTitle from './PropertyTitle.vue'
 import PropertyActions from './PropertyActions.vue'
@@ -76,7 +77,7 @@ export default {
 	name: 'PropertySelect',
 
 	components: {
-		Multiselect,
+		NcSelect,
 		PropertyTitle,
 		PropertyActions,
 	},
diff --git a/src/components/Properties/PropertyText.vue b/src/components/Properties/PropertyText.vue
index c8e710c0..3951d3ac 100644
--- a/src/components/Properties/PropertyText.vue
+++ b/src/components/Properties/PropertyText.vue
@@ -40,7 +40,7 @@
 				</span>
 
 				<!-- type selector -->
-				<Multiselect v-else-if="!isReadOnly && propModel.options"
+				<NcSelect v-else-if="!isReadOnly && propModel.options"
 					v-model="localType"
 					:options="options"
 					:placeholder="t('contacts', 'Select type')"
@@ -106,7 +106,7 @@
 </template>
 
 <script>
-import { NcMultiselect as Multiselect } from '@nextcloud/vue'
+import { NcSelect } from '@nextcloud/vue'
 import debounce from 'debounce'
 import PropertyMixin from '../../mixins/PropertyMixin.js'
 import PropertyTitle from './PropertyTitle.vue'
@@ -117,7 +117,7 @@ export default {
 	name: 'PropertyText',
 
 	components: {
-		Multiselect,
+		NcSelect,
 		PropertyTitle,
 		PropertyActions,
 		OpenInNewIcon,
@@ -227,4 +227,11 @@ export default {
 		}
 	}
 }
+
+// Mobile tweaks
+@media (max-width: 600px) {
+	.property__value {
+		width: 125px;
+	}
+}
 </style>