PrimeVue upgrade and addition of TailwindCSS

package.json

@@ -15,6 +15,8 @@
     "@fortawesome/free-regular-svg-icons": "^7.0.0",
     "@fortawesome/free-solid-svg-icons": "^7.0.0",
     "@fortawesome/vue-fontawesome": "^3.1.1",
+    "@primevue/themes": "^4.4.1",
+    "@tailwindcss/vite": "^4.1.16",
     "@unhead/vue": "^2.0.17",
     "axios": "^1.11.0",
     "chart.js": "^4.4.1",
@@ -52,12 +54,13 @@
     "pluralize": "^8.0.0",
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
-    "primevue": "3.52.0",
+    "primevue": "^4.4.1",
     "rest-client-vue": "^1.2.0-b2",
+    "tailwindcss": "^4.1.16",
     "universal-base64url": "~1.1.0",
     "uuid": "^9.0.1",
     "vee-validate": "^4.12.2",
-    "vue": "^3.3.11",
+    "vue": "^3.4.0",
     "vue-debounce": "^4.0.1",
     "vue-router": "^4.2.5",
     "vuex": "^4.1.0",

src/assets/app.css

@@ -1,3 +1,5 @@
+@import "tailwindcss";
+
 * {
   text-rendering: optimizeLegibility;
   font-family: 'Raleway', sans-serif;
@@ -26,4 +28,91 @@ body .p-button {
 
 .p-badge {
   text-align: center;
-}
+}
+
+
+/* Float label styles to match PrimeVue 3 theme */
+
+.p-float-label {
+  position: relative;
+  display: block;
+}
+/* Base label positioning - add missing properties to existing rule */
+.p-float-label > label {
+  position: absolute;
+  left: 0.75rem;
+  top: 1.5rem;
+  transform: translateY(-50%);
+  color: rgba(0, 0, 0, 0.6);
+  transition-duration: 0.2s;
+  transition-property: top, transform, font-size, color, background-color;
+  pointer-events: none;
+  font-size: 1rem;
+  line-height: 1;
+  z-index: 1;
+}
+
+/* Enhanced focused/filled label positioning */
+.p-float-label input:focus ~ label,
+.p-float-label input.p-filled ~ label,
+.p-float-label textarea:focus ~ label,
+.p-float-label textarea.p-filled ~ label,
+.p-float-label .p-inputwrapper-focus ~ label,
+.p-float-label .p-inputwrapper-filled ~ label {
+  top: -0.5rem !important;
+  transform: none;
+  font-size: 0.75rem;
+  background-color: #ffffff;
+  padding: 2px 4px;
+  margin-left: -4px;
+  margin-top: 0;
+}
+
+/* Hide placeholder text in float label components since label acts as placeholder */
+.p-float-label input::placeholder,
+.p-float-label textarea::placeholder,
+.p-float-label .p-chips-multiple-container input::placeholder {
+  color: transparent !important;
+}
+
+/* Show placeholder text when label is floated (focused or filled) */
+.p-float-label input:focus::placeholder,
+.p-float-label input.p-filled::placeholder,
+.p-float-label textarea:focus::placeholder,
+.p-float-label textarea.p-filled::placeholder,
+.p-float-label .p-inputwrapper-focus input::placeholder,
+.p-float-label .p-inputwrapper-filled input::placeholder,
+.p-float-label .p-chips-multiple-container input:focus::placeholder,
+.p-float-label .p-multiselect:focus-within .p-multiselect-label {
+  color: rgba(0, 0, 0, 0.6) !important;
+}
+
+/* Style Chips components to match PrimeVue 3 appearance */
+.p-inputchips-chip-item {
+  background: #e9ecef !important;
+  color: #495057 !important;
+  border-radius: 1rem !important;
+  padding: 0.25rem 0.5rem !important;
+  margin-right: 0.5rem !important;
+  margin-bottom: 0.5rem !important;
+  margin-bottom: auto !important;
+  display: inline-flex !important;
+  align-items: center !important;
+}
+.p-inputchips-chip-item .pi-times,
+.p-inputchips-chip-item .pi-times-circle {
+  margin-left: 0.5rem !important;
+  cursor: pointer !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+/* Prevent autocomplete overlay from taking full page width */
+.p-autocomplete-overlay {
+  max-width: 75% !important;
+}
+
+.p-tablist-tab-list .p-tab-active {
+  background-color: #3f51b51f !important;
+}

src/assets/forms.css

@@ -53,7 +53,7 @@
 }
 
 .field:deep(.p-tabview .p-tabview-nav) {
-  flex-direction: column;
+  flex-direction: column !important;
   padding-left: 5px;
   border: 0 none;
   background: transparent;

src/assets/layout.css

@@ -17,7 +17,6 @@
 .mave-collection-badges {
   flex: 0 1 auto;
   font-size: 12px;
-  line-height: 29px;
   margin-right: 5px;
   padding: 0 0 0 7px;
 }

public/theme.css → src/assets/theme.css

@@ -1012,14 +1012,14 @@
 .p-inputtext.p-invalid.p-component {
   border-color: #B00020;
 }
-.p-inputtext.p-inputtext-sm {
+/* .p-inputtext.p-inputtext-sm {
   font-size: 0.875rem;
   padding: 0.65625rem 0.65625rem;
-}
-.p-inputtext.p-inputtext-lg {
+} */
+/* .p-inputtext.p-inputtext-lg {
   font-size: 1.25rem;
   padding: 0.9375rem 0.9375rem;
-}
+} */
 
 .p-float-label > label {
   left: 0.75rem;
@@ -1526,7 +1526,7 @@
 .p-button {
   color: #ffffff;
   background: #3F51B5;
-  border: 0 none;
+  border: 0 none !important;
   padding: 0.571rem 0.75rem;
   font-size: 1rem;
   transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
@@ -1545,7 +1545,7 @@
 .p-button.p-button-outlined {
   background-color: transparent;
   color: #3F51B5;
-  border: 1px solid;
+  border: 1px solid !important;
 }
 .p-button.p-button-outlined:enabled:hover {
   background: rgba(63, 81, 181, 0.04);
@@ -1570,19 +1570,19 @@
   color: rgba(0, 0, 0, 0.6);
 }
 .p-button.p-button-text {
-  background-color: transparent;
-  color: #3F51B5;
-  border-color: transparent;
+  background-color: transparent !important;
+  color: #3F51B5 !important;
+  border-color: transparent !important;
 }
 .p-button.p-button-text:enabled:hover {
-  background: rgba(63, 81, 181, 0.04);
-  color: #3F51B5;
-  border-color: transparent;
+  background: rgba(63, 81, 181, 0.04) !important;
+  color: #3F51B5 !important;
+  border-color: transparent !important;
 }
 .p-button.p-button-text:enabled:active {
-  background: rgba(63, 81, 181, 0.16);
-  color: #3F51B5;
-  border-color: transparent;
+  background: rgba(63, 81, 181, 0.16) !important;
+  color: #3F51B5 !important;
+  border-color: transparent !important;
 }
 .p-button.p-button-text.p-button-plain {
   color: rgba(0, 0, 0, 0.6);
@@ -1640,7 +1640,7 @@
 }
 .p-button.p-button-sm {
   font-size: 0.875rem;
-  padding: 0.499625rem 0.65625rem;
+  padding: 0.2rem 0.4rem;
 }
 .p-button.p-button-sm .p-button-icon {
   font-size: 0.875rem;
@@ -4846,7 +4846,7 @@
 
 .p-tag {
   background: #3F51B5;
-  color: #ffffff;
+  color: #ffffff !important;
   font-size: 0.75rem;
   font-weight: 700;
   padding: 0.25rem 0.4rem;
@@ -5110,19 +5110,19 @@
 }
 
 .p-button.p-button-help:enabled:focus, .p-buttonset.p-button-help > .p-button:enabled:focus, .p-splitbutton.p-button-help > .p-button:enabled:focus {
-  background: rgba(156, 39, 176, 0.76);
+  background: rgba(156, 39, 176, 0.76) !important;
 }
 .p-button.p-button-help:enabled:active, .p-buttonset.p-button-help > .p-button:enabled:active, .p-splitbutton.p-button-help > .p-button:enabled:active {
-  background: rgba(156, 39, 176, 0.68);
+  background: rgba(156, 39, 176, 0.68) !important;
 }
 .p-button.p-button-help.p-button-text:enabled:focus, .p-button.p-button-help.p-button-outlined:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:focus, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus {
-  background: rgba(156, 39, 176, 0.12);
+  background: rgba(156, 39, 176, 0.12) !important;
 }
 .p-button.p-button-help.p-button-text:enabled:active, .p-button.p-button-help.p-button-outlined:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active {
-  background: rgba(156, 39, 176, 0.16);
+  background: rgba(156, 39, 176, 0.16) !important;
 }
 .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink {
-  background-color: rgba(156, 39, 176, 0.16);
+  background-color: rgba(156, 39, 176, 0.16) !important;
 }
 
 .p-button.p-button-danger:enabled:focus, .p-buttonset.p-button-danger > .p-button:enabled:focus, .p-splitbutton.p-button-danger > .p-button:enabled:focus {

src/components/CalibrationTable.vue

@@ -13,7 +13,7 @@
         <PrimeButton
           v-tooltip.right="{value: scoreCalibration.baselineScoreDescription, autoHide: false}"
           aria-label="Info"
-          class="p-button-help mavedb-help-tooltip-button"
+          class="p-button-help mavedb-help-tooltip-button size-2!"
           icon="pi pi-info"
           outlined
           rounded
@@ -47,7 +47,7 @@
               <PrimeButton
                 v-tooltip.right="{value: range.description, autoHide: false}"
                 aria-label="Info"
-                class="p-button-help mavedb-help-tooltip-button"
+                class="p-button-help mavedb-help-tooltip-button size-2!"
                 icon="pi pi-info"
                 outlined
                 rounded
@@ -198,7 +198,7 @@
               autoHide: false
             }"
             aria-label="Threshold sources info"
-            class="p-button-help mavedb-help-tooltip-button"
+            class="p-button-help mavedb-help-tooltip-button size-2!"
             icon="pi pi-info"
             outlined
             rounded
@@ -234,7 +234,7 @@
               autoHide: false
             }"
             aria-label="Method sources info"
-            class="p-button-help mavedb-help-tooltip-button"
+            class="p-button-help mavedb-help-tooltip-button size-2!"
             icon="pi pi-info"
             outlined
             rounded
@@ -267,7 +267,7 @@
               autoHide: false
             }"
             aria-label="Evidence calculation sources info"
-            class="p-button-help mavedb-help-tooltip-button"
+            class="p-button-help mavedb-help-tooltip-button size-2!"
             icon="pi pi-info"
             outlined
             rounded
@@ -770,8 +770,6 @@ export default defineComponent({
 /* Tooltips */
 .mavedb-help-tooltip-button {
   margin-left: 0.6rem;
-  height: 0.5rem;
-  width: 0.5rem;
   vertical-align: middle;
   margin-top: 0;
   margin-bottom: 0;

src/components/CollectionAdder.vue

@@ -272,8 +272,4 @@ export default {
 .mave-collection-option-sharing {
   color: #999;
 }
-
-.mave-create-collection-button {
-  display: inline;
-}
 </style>

src/components/ScoreSetHistogram.vue

@@ -1,6 +1,16 @@
 <template>
   <div class="mavedb-histogram-controls">
-    <TabMenu v-if="hasTabBar" v-model:active-index="activeViz" class="mave-histogram-viz-select" :model="vizOptions" />
+    <Tabs v-if="hasTabBar" v-model:value="activeViz">
+      <TabList>
+        <Tab
+          v-for="(option, index) of vizOptions"
+          :key="index"
+          :value="index"
+        >
+          {{ option.label }}
+        </tab>
+      </TabList>
+    </Tabs>
     <div v-if="showCalibrations" class="mavedb-histogram-thresholds-control">
       <div class="mavedb-histogram-control">
         <label class="mavedb-histogram-control-label" for="mavedb-histogram-viz-select">Thresholds: </label>
@@ -117,13 +127,13 @@
 <script lang="ts">
 import axios from 'axios'
 import _ from 'lodash'
-import Accordion from 'primevue/accordion'
-import AccordionTab from 'primevue/accordiontab'
 import Checkbox from 'primevue/checkbox'
 import Dropdown from 'primevue/dropdown'
 import ProgressSpinner from 'primevue/progressspinner'
 import Rating from 'primevue/rating'
-import TabMenu from 'primevue/tabmenu'
+import Tabs from 'primevue/tabs'
+import TabList from 'primevue/tablist'
+import Tab from 'primevue/tab'
 import {defineComponent, PropType} from 'vue'
 
 import useScopedId from '@/composables/scoped-id'
@@ -184,7 +194,7 @@ interface Margins {
 export default defineComponent({
   name: 'ScoreSetHistogram',
 
-  components: {Accordion, AccordionTab, Checkbox, Dropdown, Rating, TabMenu, ProgressSpinner},
+  components: {Checkbox, Dropdown, Rating, Tabs, TabList, Tab, ProgressSpinner},
 
   props: {
     coordinates: {