Replace deprecated PrimeVue components with their successors (S1874)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/Compare/SidebarStates.vue

@@ -1,5 +1,5 @@
 <template>
-  <Sidebar
+  <Drawer
     :visible="sidebarState"
     :closeIcon="'pi pi-angle-right'"
     :modal="false"
@@ -293,7 +293,7 @@
         </div>
       </section>
     </div>
-  </Sidebar>
+  </Drawer>
 </template>
 <script setup>
 // The Lucia project.

src/components/Discover/Map/Filter/AttributesFilter.vue

@@ -247,7 +247,7 @@
               >
                 <div>
                   <span class="block mb-2">Start time</span>
-                  <Calendar
+                  <DatePicker
                     v-model="startTime"
                     dateFormat="yy/mm/dd"
                     :panelProps="panelProps"
@@ -263,7 +263,7 @@
                 <span class="block mt-4">~</span>
                 <div>
                   <span class="block mb-2">End time</span>
-                  <Calendar
+                  <DatePicker
                     v-model="endTime"
                     dateFormat="yy/mm/dd"
                     :panelProps="panelProps"

src/components/Discover/Map/Filter/FunnelFilter.vue

@@ -29,7 +29,7 @@
               </div>
               <!-- button -->
               <div class="min-w-fit">
-                <InputSwitch
+                <ToggleSwitch
                   v-model="rule.item.toggle"
                   @input="isRule($event, rule.index)"
                 />

src/components/Discover/Map/Filter/TimeframesFilter.vue

@@ -28,7 +28,7 @@
       <div class="flex justify-center items-center space-x-2 w-full">
         <div>
           <span class="block mb-2">Start time</span>
-          <Calendar
+          <DatePicker
             v-model="startTime"
             dateFormat="yy/mm/dd"
             :panelProps="panelProps"
@@ -44,7 +44,7 @@
         <span class="block mt-4">~</span>
         <div>
           <span class="block mb-2">End time</span>
-          <Calendar
+          <DatePicker
             v-model="endTime"
             dateFormat="yy/mm/dd"
             :panelProps="panelProps"

src/components/Discover/Map/SidebarFilter.vue

@@ -1,5 +1,5 @@
 <template>
-  <Sidebar
+  <Drawer
     :visible="sidebarFilter"
     :closeIcon="'pi pi-chevron-left'"
     :modal="false"
@@ -269,7 +269,7 @@
     </div>
     <!-- header: funnel -->
     <Funnel v-if="tab === 'funnel'" @submit-all="sumbitAll"></Funnel>
-  </Sidebar>
+  </Drawer>
 </template>
 
 <script setup>

src/components/Discover/Map/SidebarState.vue

@@ -1,5 +1,5 @@
 <template>
-  <Sidebar
+  <Drawer
     :visible="sidebarState"
     :closeIcon="'pi pi-angle-right'"
     :modal="false"
@@ -325,8 +325,8 @@
           {{ i18next.t("Map.Reset") }}
         </div>
         <div>
-          <TabView ref="tabview2" v-model:activeIndex="activeTrace">
+          <Tabs v-model:value="activeTrace">
-            <TabPanel header="Self-loop" contentClass="text-sm">
+            <TabPanel :value="0" header="Self-loop" contentClass="text-sm">
               <p v-if="insights.self_loops.length === 0">No data</p>
               <ul v-else class="ml-6 space-y-1">
                 <li v-for="(value, key) in insights.self_loops" :key="key">
@@ -334,7 +334,7 @@
                 </li>
               </ul>
             </TabPanel>
-            <TabPanel header="Short-loop" contentClass="text-sm">
+            <TabPanel :value="1" header="Short-loop" contentClass="text-sm">
               <p v-if="insights.short_loops.length === 0">No data</p>
               <ul v-else class="ml-6 space-y-1">
                 <li
@@ -359,6 +359,7 @@
             <TabPanel
               v-for="([field, label], i) in fieldNamesAndLabelNames"
               :key="i"
+              :value="i + 2"
               :header="label"
               contentClass="text-sm"
             >
@@ -420,11 +421,11 @@
                 </li>
               </ul>
             </TabPanel>
-          </TabView>
+          </Tabs>
         </div>
       </div>
     </div>
-  </Sidebar>
+  </Drawer>
 </template>
 
 <script setup>
@@ -570,13 +571,13 @@ function hide() {
 :deep(.p-progressbar .p-progressbar-value) {
   @apply bg-primary;
 }
-:deep(.p-tabview-nav-container) {
+:deep(.p-tablist) {
   @apply hidden;
 }
-:deep(.p-tabview-panels) {
+:deep(.p-tabpanels) {
   @apply p-2 rounded;
 }
-:deep(.p-tabview-panel) {
+:deep(.p-tabpanel) {
   @apply animate-fadein;
 }
 .caseDurationTable td {

src/components/Discover/Map/SidebarTraces.vue

@@ -1,5 +1,5 @@
 <template>
-  <Sidebar
+  <Drawer
     :visible="sidebarTraces"
     :closeIcon="'pi pi-chevron-left'"
     :modal="false"
@@ -97,7 +97,7 @@
         </div>
       </section>
     </div>
-  </Sidebar>
+  </Drawer>
 </template>
 <script setup>
 // The Lucia project.

src/components/Discover/Map/SidebarView.vue

@@ -1,5 +1,5 @@
 <template>
-  <Sidebar
+  <Drawer
     :visible="sidebarView"
     :closeIcon="'pi pi-chevron-left'"
     :modal="false"
@@ -140,7 +140,7 @@
         </ul>
       </div>
     </div>
-  </Sidebar>
+  </Drawer>
 </template>
 
 <script setup>

src/main.ts

@@ -31,11 +31,11 @@ import "sweetalert2/dist/sweetalert2.min.css";
 import PrimeVue from "primevue/config";
 import Aura from "@primevue/themes/aura";
 import "primeicons/primeicons.css"; //icons
-import Sidebar from "primevue/sidebar";
+import Drawer from "primevue/drawer";
-import Dropdown from "primevue/dropdown";
+import Select from "primevue/select";
 import Tag from "primevue/tag";
 import ProgressBar from "primevue/progressbar";
-import TabView from "primevue/tabview";
+import Tabs from "primevue/tabs";
 import TabPanel from "primevue/tabpanel";
 import DataTable from "primevue/datatable";
 import Column from "primevue/column";
@@ -43,12 +43,12 @@ import ColumnGroup from "primevue/columngroup"; // optional
 import Row from "primevue/row"; // optional
 import RadioButton from "primevue/radiobutton";
 import Timeline from "primevue/timeline";
-import InputSwitch from "primevue/inputswitch";
+import ToggleSwitch from "primevue/toggleswitch";
 import InputNumber from "primevue/inputnumber";
 import InputText from "primevue/inputtext";
 import Chart from "primevue/chart";
 import Slider from "primevue/slider";
-import Calendar from "primevue/calendar";
+import DatePicker from "primevue/datepicker";
 import Tooltip from "primevue/tooltip";
 import Checkbox from "primevue/checkbox";
 import Dialog from "primevue/dialog";
@@ -74,11 +74,11 @@ app.use(ToastPlugin, {
   duration: 5000,
 });
 app.use(PrimeVue, { theme: { preset: Aura } });
-app.component("Sidebar", Sidebar);
+app.component("Drawer", Drawer);
-app.component("Dropdown", Dropdown);
+app.component("Select", Select);
 app.component("Tag", Tag);
 app.component("ProgressBar", ProgressBar);
-app.component("TabView", TabView);
+app.component("Tabs", Tabs);
 app.component("TabPanel", TabPanel);
 app.component("DataTable", DataTable);
 app.component("Column", Column);
@@ -86,12 +86,12 @@ app.component("ColumnGroup", ColumnGroup);
 app.component("Row", Row);
 app.component("RadioButton", RadioButton);
 app.component("Timeline", Timeline);
-app.component("InputSwitch", InputSwitch);
+app.component("ToggleSwitch", ToggleSwitch);
 app.component("InputNumber", InputNumber);
 app.component("InputText", InputText);
 app.component("Chart", Chart);
 app.component("Slider", Slider);
-app.component("Calendar", Calendar);
+app.component("DatePicker", DatePicker);
 app.component("Checkbox", Checkbox);
 app.component("Dialog", Dialog);
 app.component("ContextMenu", ContextMenu);

src/views/Files/FilesPage.vue

@@ -195,7 +195,7 @@
           <h2 class="font-bold">All Files</h2>
           <ul class="flex items-center gap-x-4">
             <li>
-              <Dropdown
+              <Select
                 v-model="gridSort"
                 :options="columnType"
                 optionLabel="name"
@@ -203,7 +203,7 @@
                 class="w-full !border-neutral-500"
                 inputClass="!text-sm"
                 @change="getGridSortData($event)"
-              ></Dropdown>
+              ></Select>
             </li>
             <li>
               <IconGrid class="hover:bg-neutral-50 duration-300"></IconGrid>

src/views/Upload/UploadPage.vue

@@ -86,7 +86,7 @@
                 :key="index"
                 class="px-2 py-1 bg-neutral-300 border border-neutral-500 max-w-[198px]"
               >
-                <Dropdown
+                <Select
                   v-model="selectedColumns[index]"
                   :options="columnType"
                   optionLabel="name"
@@ -101,7 +101,7 @@
                       <span>{{ slotProps.option.name }}</span>
                     </div>
                   </template>
-                </Dropdown>
+                </Select>
               </td>
             </tr>
           </thead>