fixing breaking changes from primevue update.

hm-seclab · Mar 8, 2024 · ec961cd · ec961cd
1 parent d68575b
commit ec961cd
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 12 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -65,13 +65,16 @@ watch(filters, (newFilters, oldFilters) => {
 <template>
   <div class="flex overflow-hidden grid max-h-full m-0">
     <div class="flex-column flex col-2 surface-50 full-vue-heigth shadow-right scrollable-div">
-      <span class="p-buttonset mb-2 w-full">
-        <p-button label="Circle" rounded :outlined="activeView !== 1" :severity="activeView === 1 ? '' : 'secondary'" @click="onViewChange(1)" class="w-4"/>
-        <p-button label="Tree" rounded :outlined="activeView !== 2" :severity="activeView === 2 ? '' : 'secondary'" @click="onViewChange(2)" class="w-4"/>
-        <p-button label="List" rounded :outlined="activeView !== 3" :severity="activeView === 3 ? '' : 'secondary'" @click="onViewChange(3)" class="w-4"/>
-      </span>
 
-      <span class="p-buttonset w-full">
+      <div class="mb-2 w-full">
+        <p-buttonGroup>
+          <p-button label="Circle" rounded :outlined="activeView !== 1" :severity="activeView === 1 ? '' : 'secondary'" @click="onViewChange(1)" class="w-4"/>
+          <p-button label="Tree" rounded :outlined="activeView !== 2" :severity="activeView === 2 ? '' : 'secondary'" @click="onViewChange(2)" class="w-4"/>
+          <p-button label="List" rounded :outlined="activeView !== 3" :severity="activeView === 3 ? '' : 'secondary'" @click="onViewChange(3)" class="w-4"/>
+        </p-buttonGroup>
+        </div>
+
+      <p-buttonGroup>
         <p-button label="Normalize" rounded :outlined="activeMode !== 'normalize'"
                   :severity="activeMode === 'normalize' ? '' : 'secondary'"
                   @click="onModeChange('normalize')" class="w-6"
@@ -80,7 +83,7 @@ watch(filters, (newFilters, oldFilters) => {
                   :severity="activeMode === 'aggregate' ? '' : 'secondary'"
                   @click="onModeChange('aggregate')" class="w-6"
                   v-tooltip="{ value: 'This mode groups entries by their categories to reduce duplication. If an entry belongs to multiple categories, it will only be displayed once, under a group that represents those categories. This is useful when you want a simplified view of the data, without repeated entries.', showDelay: 750, hideDelay: 300 }"/>
-      </span>
+      </p-buttonGroup>
 
       <p-divider/>
 

diff --git a/src/components/plots/list-plot.vue b/src/components/plots/list-plot.vue
@@ -41,10 +41,10 @@ const filters = ref({
       <template #header>
         <div class="flex justify-content-between align-items-center">
           <h2>List of all SBOM related Tools:</h2>
-          <span class="p-input-icon-left">
-                <i class="pi pi-search"/>
+          <p-iconField iconPosition="left">
+                <p-inputIcon class="pi pi-search"/>
                 <p-inputText v-model="filters['global'].value" placeholder="Search"/>
-            </span>
+          </p-iconField>
         </div>
       </template>
 

diff --git a/src/components/plots/tree-plot.vue b/src/components/plots/tree-plot.vue
@@ -227,10 +227,10 @@ function generateTreeObjectFlat() {
 
 <template>
   <div class="overlay">
-    <span class="p-buttonset m-2 w-full">
+    <p-buttonGroup>
       <p-button label="Round" rounded :outlined="activeView !== 0" :severity="activeView === 0 ? '' : 'secondary'" @click="onViewChange(0)"/>
       <p-button label="Flat" rounded :outlined="activeView !== 1" :severity="activeView === 1 ? '' : 'secondary'" @click="onViewChange(1)"/>
-    </span>
+    </p-buttonGroup>
   </div>
 
   <div :class="scrollableDiv ? 'scrollable-div' : 'flex'">

diff --git a/src/main.js b/src/main.js
@@ -17,19 +17,26 @@ import Divider from "primevue/divider";
 import InputText from "primevue/inputtext";
 import Tooltip from 'primevue/tooltip';
 import Tag from "primevue/tag";
+import ButtonGroup from "primevue/buttongroup";
+import InputIcon from "primevue/inputicon";
+import IconField from "primevue/iconfield";
 
 const app = createApp(App);
 
 app.use(PrimeVue)
 
 app.component('p-button', Button)
+app.component('p-buttonGroup', ButtonGroup)
 app.component("p-dataTable", DataTable)
 app.component("p-column", Column)
 app.component("p-chip", Chip)
 app.component("p-card", Card)
 app.component("p-inputSwitch", InputSwitch)
 app.component("p-divider", Divider)
 app.component('p-inputText', InputText)
+app.component('p-iconField', IconField)
+app.component('p-inputIcon', InputIcon)
+
 app.component('p-tag', Tag)
 
 app.directive('tooltip', Tooltip);