From b182fadb83174b4a69792d9366808f7fc62197ea Mon Sep 17 00:00:00 2001 From: Blesilda Ramirez Date: Tue, 10 Dec 2024 02:08:05 +0800 Subject: [PATCH] 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 --- src/components/Form/fields/Autosuggest.vue | 111 ++++++++++++++++++ .../Form/fields/FieldBaseAutosuggest.vue | 111 ------------------ .../Form/fields/FieldRorAutosuggest.vue | 6 +- src/components/Icon/Icon.stories.js | 2 +- src/components/Icon/Icon.vue | 4 +- .../Icon/icons/{NewTab.vue => OpenNewTab.vue} | 0 src/composables/useAutosuggest.js | 3 - 7 files changed, 119 insertions(+), 118 deletions(-) rename src/components/Icon/icons/{NewTab.vue => OpenNewTab.vue} (100%) delete mode 100644 src/composables/useAutosuggest.js diff --git a/src/components/Form/fields/Autosuggest.vue b/src/components/Form/fields/Autosuggest.vue index 2426c967..7aaa32b2 100644 --- a/src/components/Form/fields/Autosuggest.vue +++ b/src/components/Form/fields/Autosuggest.vue @@ -23,6 +23,7 @@ + + diff --git a/src/components/Form/fields/FieldBaseAutosuggest.vue b/src/components/Form/fields/FieldBaseAutosuggest.vue index 8d4ca04d..4d4a6e1b 100644 --- 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 index 8ece34fe..d5c3ef8a 100644 --- a/src/components/Form/fields/FieldRorAutosuggest.vue +++ b/src/components/Form/fields/FieldRorAutosuggest.vue @@ -40,7 +40,11 @@ class="ms-auto flex" > Open link in new tab - + diff --git a/src/components/Icon/Icon.stories.js b/src/components/Icon/Icon.stories.js index 74614545..1dae02ba 100644 --- 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 index 412fbaa2..50eb769c 100644 --- 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 b/src/components/Icon/icons/OpenNewTab.vue similarity index 100% rename from src/components/Icon/icons/NewTab.vue rename to src/components/Icon/icons/OpenNewTab.vue diff --git a/src/composables/useAutosuggest.js b/src/composables/useAutosuggest.js deleted file mode 100644 index 3592eee2..00000000 --- a/src/composables/useAutosuggest.js +++ /dev/null @@ -1,3 +0,0 @@ -export function useAutosuggest() { - return {}; -}