ui_migration fix(deps): Correcting syntax deprecations, set :key at template, >>> :deep(), v-bind on top.

This commit is contained in:
Antonio Anaya 2026-01-20 19:09:42 -06:00
parent be868ad8c5
commit fc96ae94f8
4 changed files with 5 additions and 7 deletions

View file

@ -9,11 +9,10 @@
class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1 uk-text-center" class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1 uk-text-center"
> >
<!-- For each top tab --> <!-- For each top tab -->
<template v-for="(item, index) in topTabs"> <template v-for="(item, index) in topTabs" :key="item.id + '-tab-icon'">
<!-- Render the tab icon --> <!-- Render the tab icon -->
<tabIcon <tabIcon
:id="item.id + '-tab-icon'" :id="item.id + '-tab-icon'"
:key="item.id + '-tab-icon'"
:tab-i-d="item.id" :tab-i-d="item.id"
:title="item.title" :title="item.title"
:require-connection="true" :require-connection="true"
@ -37,11 +36,10 @@
<hr id="extension-tab-divider" /> <hr id="extension-tab-divider" />
<!-- For each bottom tab --> <!-- For each bottom tab -->
<template v-for="(item, index) in bottomTabs"> <template v-for="(item, index) in bottomTabs" :key="item.id + '-tab-icon'">
<!-- Render the tab icon --> <!-- Render the tab icon -->
<tabIcon <tabIcon
:id="item.id + '-tab-icon'" :id="item.id + '-tab-icon'"
:key="item.id + '-tab-icon'"
:tab-i-d="item.id" :tab-i-d="item.id"
:title="item.title" :title="item.title"
:require-connection="true" :require-connection="true"

View file

@ -4,10 +4,10 @@
<h2 class="uk-modal-title">Microscope Calibration</h2> <h2 class="uk-modal-title">Microscope Calibration</h2>
<component <component
v-bind="currentTask.props"
:is="currentTask.component" :is="currentTask.component"
v-if="currentTask" v-if="currentTask"
:key="taskIndex" :key="taskIndex"
v-bind="currentTask.props"
:first="isFirstTask" :first="isFirstTask"
:final="isFinalTask" :final="isFinalTask"
:start-on-last="movingBackward" :start-on-last="movingBackward"

View file

@ -23,10 +23,10 @@ gets very confusing.
<div> <div>
<h3 v-if="title">{{ title }}</h3> <h3 v-if="title">{{ title }}</h3>
<component <component
v-bind="currentStep.props"
:is="currentStep.component" :is="currentStep.component"
v-if="currentStep" v-if="currentStep"
:key="stepIndex" :key="stepIndex"
v-bind="currentStep.props"
@awaiting-user="handleAwaitingUser" @awaiting-user="handleAwaitingUser"
/> />
<p class="uk-text-right"> <p class="uk-text-right">

View file

@ -47,7 +47,7 @@ export default {
gap: 8px; /* Small space between buttons */ gap: 8px; /* Small space between buttons */
margin-top: 4px; /* Gap from image */ margin-top: 4px; /* Gap from image */
} }
.moveZ >>> .uk-button.uk-width-1-1 { .moveZ :deep(.uk-button.uk-width-1-1) {
line-height: 50px; line-height: 50px;
font-size: 50px !important; font-size: 50px !important;
height: 60px; height: 60px;