pkp/pkp-lib#10624 Move css class rules to Autosuggest component (#459)

* pkp/pkp-lib#10624 Move css class rules to Autosuggest component * pkp/pkp-lib#10624 Rename NewTab icon component to OpenNewTab * pkp/pkp-lib#10624 Fix inline-alignment on the Autosuggest input component * pkp/pkp-lib#10624 Remove empty useAutosuggest composeable api
pkp · Dec 9, 2024 · b182fad · b182fad
1 parent 51ef3b9
commit b182fad
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 118 deletions.
diff --git a/src/components/Form/fields/Autosuggest.vue b/src/components/Form/fields/Autosuggest.vue
@@ -23,6 +23,7 @@
 		</button>
 	</PkpBadge>
 	<Combobox
+		v-if="!isDisabled"
 		:id="id"
 		:key="id"
 		:model-value="null"
@@ -212,3 +213,113 @@ function deselect(item) {
 
 defineExpose({handleFocus});
 </script>
+
+<style lang="less">
+@import '../../../styles/_import';
+
+// Space between items in the input wrapper
+.pkpAutosuggest__selection,
+.pkpAutosuggest__autosuggester {
+	margin-top: 0.125rem;
+	margin-bottom: 0.125rem;
+	margin-inline-end: 0.25rem;
+}
+
+.pkpAutosuggest__selection {
+	position: relative;
+	padding-right: 2.5em;
+}
+
+.pkpAutosuggest__deselect {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	width: 2em;
+	padding: 0;
+	background: transparent;
+	border: 1px solid transparent;
+	border-left-color: @bg-border-color-light;
+	border-top-right-radius: 1.2em; // matches radius on button in Badge.vue
+	border-bottom-right-radius: 1.2em;
+	color: @no;
+
+	&:hover,
+	&:focus {
+		outline: 0;
+		border-color: @no;
+		background: @no;
+		color: #fff;
+	}
+}
+
+.pkpAutosuggest__autosuggester {
+	position: relative;
+	line-height: 1.6rem; // prevent jank when value is added or removed
+	flex-grow: 1;
+}
+
+.autosuggest__results {
+	border: 1px solid @primary;
+	border-bottom-right-radius: @radius;
+	border-bottom-left-radius: @radius;
+	background: @lift;
+	box-shadow: 0 0.75rem 0.75rem rgba(0, 0, 0, 0.2);
+	font-size: @font-sml;
+
+	&:after {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 0;
+		transform: translateY(-50%);
+		height: 100%;
+		width: 3px;
+		background: @primary;
+	}
+
+	margin: 0;
+	padding: 0;
+	list-style: none;
+
+	.autosuggest__results-item {
+		position: relative;
+		padding: 0.5rem 1rem;
+		line-height: 1.5em;
+
+		&:before {
+			content: '';
+			position: absolute;
+			top: 50%;
+			left: 0;
+			transform: translateY(-50%);
+			width: 3px;
+			height: 100%;
+			background: @primary;
+			transition: width 0.3s;
+		}
+	}
+
+	.autosuggest__results-item--highlighted {
+		background: @bg;
+	}
+}
+
+.autosuggest__results-container {
+	position: absolute;
+	top: 100%;
+	margin-top: -2px;
+	width: 100%;
+	max-width: 100%;
+	min-width: 20rem;
+	z-index: 9999;
+}
+
+.pkpAutosuggest__input {
+	border: none;
+	width: 100%;
+	&:focus {
+		outline: none;
+	}
+}
+</style>
diff --git a/src/components/Form/fields/FieldBaseAutosuggest.vue b/src/components/Form/fields/FieldBaseAutosuggest.vue
@@ -371,11 +371,6 @@ export default {
 		 * Emit events to change the selected items and the field's value
 		 */
 		setSelected(selected) {
-			if (selected?.length > 1 && !this.isMultiple) {
-				// override selected value if only one option can be selected
-				selected = [selected[1]];
-			}
-
 			this.$emit('change', this.name, 'selected', selected, this.localeKey);
 			this.$emit(
 				'change',
@@ -431,112 +426,6 @@ export default {
 	padding-bottom: 0.25rem;
 }
 
-// Space between items in the input wrapper
-.pkpAutosuggest__selection,
-.pkpAutosuggest__autosuggester {
-	margin-top: 0.125rem;
-	margin-bottom: 0.125rem;
-	margin-inline-end: 0.25rem;
-}
-
-.pkpAutosuggest__selection {
-	position: relative;
-	padding-right: 2.5em;
-}
-
-.pkpAutosuggest__deselect {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	width: 2em;
-	padding: 0;
-	background: transparent;
-	border: 1px solid transparent;
-	border-left-color: @bg-border-color-light;
-	border-top-right-radius: 1.2em; // matches radius on button in Badge.vue
-	border-bottom-right-radius: 1.2em;
-	color: @no;
-
-	&:hover,
-	&:focus {
-		outline: 0;
-		border-color: @no;
-		background: @no;
-		color: #fff;
-	}
-}
-
-.pkpAutosuggest__autosuggester {
-	position: relative;
-	line-height: 1.6rem; // prevent jank when value is added or removed
-	flex-grow: 1;
-}
-
-.pkpAutosuggest__input {
-	border: none;
-	width: 100%;
-	&:focus {
-		outline: none;
-	}
-}
-
-.autosuggest__results-container {
-	position: absolute;
-	top: 100%;
-	margin-top: -2px;
-	width: 100%;
-	max-width: 100%;
-	min-width: 20rem;
-	z-index: 9999;
-}
-
-.autosuggest__results {
-	border: 1px solid @primary;
-	border-bottom-right-radius: @radius;
-	border-bottom-left-radius: @radius;
-	background: @lift;
-	box-shadow: 0 0.75rem 0.75rem rgba(0, 0, 0, 0.2);
-	font-size: @font-sml;
-
-	&:after {
-		content: '';
-		position: absolute;
-		top: 50%;
-		left: 0;
-		transform: translateY(-50%);
-		height: 100%;
-		width: 3px;
-		background: @primary;
-	}
-
-	margin: 0;
-	padding: 0;
-	list-style: none;
-
-	.autosuggest__results-item {
-		position: relative;
-		padding: 0.5rem 1rem;
-		line-height: 1.5em;
-
-		&:before {
-			content: '';
-			position: absolute;
-			top: 50%;
-			left: 0;
-			transform: translateY(-50%);
-			width: 3px;
-			height: 100%;
-			background: @primary;
-			transition: width 0.3s;
-		}
-	}
-
-	.autosuggest__results-item--highlighted {
-		background: @bg;
-	}
-}
-
 .pkpAutosuggest__inputWrapper--multilingual {
 	padding-left: 3rem;
 }

diff --git a/src/components/Form/fields/FieldRorAutosuggest.vue b/src/components/Form/fields/FieldRorAutosuggest.vue
@@ -40,7 +40,11 @@
 							class="ms-auto flex"
 						>
 							<span class="sr-only">Open link in new tab</span>
-							<Icon icon="NewTab" class="h-5 w-5 text-primary" :inline="true" />
+							<Icon
+								icon="OpenNewTab"
+								class="h-5 w-5 text-primary"
+								:inline="true"
+							/>
 						</a>
 					</template>
 				</Autosuggest>

diff --git a/src/components/Icon/Icon.stories.js b/src/components/Icon/Icon.stories.js
@@ -132,7 +132,7 @@ export const IconGallery = {
 			'NavDoi',
 			'NavAdmin',
 			'New',
-			'NewTab',
+			'OpenNewTab',
 			'Notifications',
 			'NotVisible',
 			'OpenReview',

diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue
@@ -80,7 +80,7 @@ import MySubmissions from './icons/MySubmissions.vue';
 import NavDoi from './icons/NavDoi.vue';
 import NavAdmin from './icons/NavAdmin.vue';
 import New from './icons/New.vue';
-import NewTab from './icons/NewTab.vue';
+import OpenNewTab from './icons/OpenNewTab.vue';
 import Notifications from './icons/Notifications.vue';
 import NotVisible from './icons/NotVisible.vue';
 import OpenReview from './icons/OpenReview.vue';
@@ -192,7 +192,7 @@ const svgIcons = {
 	NavDoi,
 	NavAdmin,
 	New,
-	NewTab,
+	OpenNewTab,
 	Notifications,
 	NotVisible,
 	OpenReview,

diff --git a/src/components/Icon/icons/NewTab.vue → src/components/Icon/icons/OpenNewTab.vue b/src/components/Icon/icons/NewTab.vue → src/components/Icon/icons/OpenNewTab.vue
diff --git a/src/composables/useAutosuggest.js b/src/composables/useAutosuggest.js