Fix slots-template issue in all dialog components

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>

pkg/harvester/dialog/CloneVmDialog.vue

@@ -104,7 +104,7 @@ export default {
       />
     </template>
 
-    <div slot="actions" class="actions">
+    <template #actions class="actions">
       <div class="buttons">
         <button class="btn role-secondary mr-10" @click="close">
           {{ t('generic.cancel') }}
@@ -119,7 +119,7 @@ export default {
       </div>
 
       <Banner v-for="(err, i) in errors" :key="i"/>
-    </div>
+    </template>
   </Card>
 </template>
 

pkg/harvester/dialog/ConfirmRelatedToRemoveDialog.vue

@@ -132,28 +132,34 @@ export default {
 
 <template>
   <Card class="prompt-related" :show-highlight-border="false">
-    <h4 slot="title" class="text-default-text">
-      {{ t('promptRemove.title') }}
-    </h4>
-    <div slot="body" class="pl-10 pr-10">
-      <span
-        v-clean-html="t(warningMessageKey, { type, names: resourceNames }, true)"
-      ></span>
+    <template #title>
+      <h4 class="text-default-text">
+        {{ t('promptRemove.title') }}
+      </h4>
+    </template>
 
-      <div class="mt-10 mb-10">
+    <template #body>
+      <div class="pl-10 pr-10">
         <span
-          v-clean-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) }, true)"
+          v-clean-html="t(warningMessageKey, { type, names: resourceNames }, true)"
         ></span>
+
+        <div class="mt-10 mb-10">
+          <span
+            v-clean-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) }, true)"
+          ></span>
+        </div>
+        <div class="mb-10">
+          <CopyToClipboardText :text="nameToMatch" />
+        </div>
+        <input id="confirm" v-model="confirmName" type="text" />
+        <div class="text-info mt-20">
+          {{ protip }}
+        </div>
+        <Banner v-for="(error, i) in errors" :key="i"/>
       </div>
-      <div class="mb-10">
-        <CopyToClipboardText :text="nameToMatch" />
-      </div>
-      <input id="confirm" v-model="confirmName" type="text" />
-      <div class="text-info mt-20">
-        {{ protip }}
-      </div>
-      <Banner v-for="(error, i) in errors" :key="i"/>
-    </div>
+    </template>
+
     <template #actions>
       <button class="btn role-secondary mr-10" @click="close">
         {{ t('generic.cancel') }}

pkg/harvester/dialog/DeepCloneVmDialog.vue

@@ -104,22 +104,24 @@ export default {
       />
     </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
 
-        <AsyncButton
-          mode="create"
-          :action-label="cloneData ? t('harvester.modal.cloneVM.action.create') : t('harvester.modal.cloneVM.action.clone')"
-          :disabled="cloneData && !name"
-          @click="create"
-        />
+          <AsyncButton
+            mode="create"
+            :action-label="cloneData ? t('harvester.modal.cloneVM.action.create') : t('harvester.modal.cloneVM.action.clone')"
+            :disabled="cloneData && !name"
+            @click="create"
+          />
+        </div>
+
+        <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
       </div>
-
-      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
-    </div>
+    </template>
   </Card>
 </template>
 

pkg/harvester/dialog/EnablePassthrough.vue

@@ -85,25 +85,28 @@ export default {
 
 <template>
   <Card :show-highlight-border="false">
-    <h4
-      slot="title"
-      v-clean-html="t('promptRemove.title')"
-      class="text-default-text"
-    />
+    <template #title>
+      <h4
+        v-clean-html="t('promptRemove.title')"
+        class="text-default-text"
+      />
+    </template>
 
     <template #body>
       {{ t('harvester.pci.enablePassthroughWarning') }}
     </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
 
-        <AsyncButton mode="enable" @click="save" />
+          <AsyncButton mode="enable" @click="save" />
+        </div>
       </div>
-    </div>
+    </template>
   </Card>
 </template>
 

pkg/harvester/dialog/EnableSriovDevice.vue

@@ -67,7 +67,7 @@ export default {
 
 <template>
   <Card :show-highlight-border="false">
-    <template v-slot:title>
+    <template #title>
       <h4
         v-clean-html="t('promptRemove.title')"
         class="text-default-text"
@@ -84,7 +84,7 @@ export default {
       />
     </template>
 
-    <template v-slot:actions>
+    <template #actions>
       <div class="buttons actions">
         <button class="btn role-secondary mr-10" @click="close">
           {{ t('generic.cancel') }}

pkg/harvester/dialog/EnableVGpuDevice.vue

@@ -60,7 +60,7 @@ export default {
 
 <template>
   <Card :show-highlight-border="false">
-    <template v-slot:title>
+    <template #title>
       <h4
         v-clean-html="t('harvester.vgpu.enable.title')"
         class="text-default-text"
@@ -81,7 +81,7 @@ export default {
       </div>
     </template>
 
-    <template v-slot:actions>
+    <template #actions>
       <div class="buttons actions">
         <button class="btn role-secondary mr-10" @click="close">
           {{ t('generic.cancel') }}

pkg/harvester/dialog/HarvesterAddHotplugModal.vue

@@ -112,7 +112,12 @@ export default {
 
 <template>
   <Card ref="modal" name="modal" :show-highlight-border="false">
-    <h4 slot="title" v-clean-html="t('harvester.modal.hotplug.title')" class="text-default-text" />
+    <template #title>
+      <h4
+        v-clean-html="t('harvester.modal.hotplug.title')"
+        class="text-default-text"
+      />
+    </template>
 
     <template #body>
       <LabeledInput
@@ -130,21 +135,23 @@ export default {
       />
     </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button type="button" class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button type="button" class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
 
-        <AsyncButton
-          mode="apply"
-          :disabled="!diskName || !volumeName"
-          @click="save"
-        />
+          <AsyncButton
+            mode="apply"
+            :disabled="!diskName || !volumeName"
+            @click="save"
+          />
+        </div>
+
+        <Banner v-for="(err, i) in errors" :key="i"/>
       </div>
-
-      <Banner v-for="(err, i) in errors" :key="i"/>
-    </div>
+    </template>
   </Card>
 </template>
 

pkg/harvester/dialog/HarvesterBackupModal.vue

@@ -90,27 +90,30 @@ export default {
 
 <template>
   <Card :show-highlight-border="false">
-    <h4
-      slot="title"
-      v-clean-html="t('harvester.modal.backup.addBackup')"
-      class="text-default-text"
-    />
+    <template #title>
+      <h4
+        v-clean-html="t('harvester.modal.backup.addBackup')"
+        class="text-default-text"
+      />
+    </template>
 
     <template #body>
       <LabeledInput v-model:value="backUpName" :label="t('generic.name')" required />
     </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
 
-        <AsyncButton mode="create" :disabled="!backUpName" @click="save" />
+          <AsyncButton mode="create" :disabled="!backUpName" @click="save" />
+        </div>
+
+        <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
       </div>
-
-      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
-    </div>
+    </template>
   </Card>
 </template>
 

pkg/harvester/dialog/HarvesterCloneTemplate.vue

@@ -118,21 +118,23 @@ export default {
       />
     </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
 
-        <AsyncButton
-          mode="create"
-          :disabled="!templateName"
-          @click="save"
-        />
+          <AsyncButton
+            mode="create"
+            :disabled="!templateName"
+            @click="save"
+          />
+        </div>
+
+        <Banner v-for="(err, i) in errors" :key="i"/>
       </div>
-
-      <Banner v-for="(err, i) in errors" :key="i"/>
-    </div>
+    </template>
   </Card>
 </template>
 

pkg/harvester/dialog/HarvesterEjectCDROMDialog.vue

@@ -128,22 +128,24 @@ export default {
       </Banner>
     </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
 
-        <AsyncButton
-          mode="delete"
-          :disabled="!diskNames.length"
-          class="btn bg-error ml-10"
-          @click="remove"
-        />
+          <AsyncButton
+            mode="delete"
+            :disabled="!diskNames.length"
+            class="btn bg-error ml-10"
+            @click="remove"
+          />
+        </div>
+
+        <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
       </div>
-
-      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
-    </div>
+    </template>
   </Card>
 </template>
 

pkg/harvester/dialog/HarvesterExportImageDialog.vue

@@ -166,21 +166,23 @@ export default {
       />
     </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
 
-        <AsyncButton
-          mode="create"
-          :disabled="disableSave"
-          @click="save"
-        />
+          <AsyncButton
+            mode="create"
+            :disabled="disableSave"
+            @click="save"
+          />
+        </div>
+
+        <Banner v-for="(err, i) in errors" :key="i"/>
       </div>
-
-      <Banner v-for="(err, i) in errors" :key="i"/>
-    </div>
+    </template>
   </Card>
 </template>
 

pkg/harvester/dialog/HarvesterMaintenanceDialog.vue

@@ -132,18 +132,20 @@ export default {
       </div>
     </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
 
-        <AsyncButton
-          mode="apply"
-          @click="apply"
-        />
+          <AsyncButton
+            mode="apply"
+            @click="apply"
+          />
+        </div>
       </div>
-    </div>
+    </template>
   </Card>
 </template>
 

pkg/harvester/dialog/HarvesterMigrationDialog.vue

@@ -153,7 +153,7 @@ export default {
       />
     </template>
 
-    <div slot="actions" class="actions">
+    <template #actions class="actions">
       <div class="buttons">
         <button class="btn role-secondary mr-10" @click="close">
           {{ t('generic.cancel') }}
@@ -167,7 +167,7 @@ export default {
       </div>
 
       <Banner v-for="(err, i) in errors" :key="i"/>
-    </div>
+    </template>
   </Card>
 </template>
 

pkg/harvester/dialog/HarvesterQuotaDialog.vue

@@ -74,11 +74,13 @@ export default {
 
 <template>
   <Card :show-highlight-border="false">
-    <h4
-      slot="title"
-      v-clean-html="t('harvester.modal.quota.editQuota')"
-      class="text-default-text"
-    />
+    <template #title>
+      <h4
+        v-clean-html="t('harvester.modal.quota.editQuota')"
+        class="text-default-text"
+      />
+    </template>
+
     <template #body>
       <Banner color="info">
         {{ t('harvester.modal.quota.bannerMessage') }}
@@ -96,15 +98,18 @@ export default {
         class="mb-20"
       />
     </template>
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
-        <AsyncButton @click="save" />
+
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
+          <AsyncButton @click="save" />
+        </div>
+        <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
       </div>
-      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
-    </div>
+    </template>
   </Card>
 </template>
 

pkg/harvester/dialog/HarvesterRestoreDialog.vue

@@ -138,21 +138,23 @@ export default {
       />
     </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
 
-        <AsyncButton
-          mode="create"
-          :disabled="!backupName"
-          @click="saveRestore"
-        />
+          <AsyncButton
+            mode="create"
+            :disabled="!backupName"
+            @click="saveRestore"
+          />
+        </div>
+
+        <Banner v-for="(err, i) in errors" :key="i"/>
       </div>
-
-      <Banner v-for="(err, i) in errors" :key="i"/>
-    </div>
+    </template>
   </Card>
 </template>
 

pkg/harvester/dialog/HarvesterUnplugVolume.vue

@@ -81,29 +81,32 @@ export default {
 
 <template>
   <Card ref="modal" name="modal" :show-highlight-border="false">
-    <h4
-      slot="title"
-      v-clean-html="t('harvester.virtualMachine.unplug.title', { name: diskName })"
-      class="text-default-text"
-    />
+    <template #title>
+      <h4
+        v-clean-html="t('harvester.virtualMachine.unplug.title', { name: diskName })"
+        class="text-default-text"
+      />
+    </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button type="button" class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button type="button" class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
 
-        <AsyncButton
-          mode="apply"
-          :action-label="t('harvester.virtualMachine.unplug.actionLabel')"
-          :waiting-label="t('harvester.virtualMachine.unplug.actionLabel')"
-          :success-label="t('harvester.virtualMachine.unplug.actionLabel')"
-          @click="save"
-        />
+          <AsyncButton
+            mode="apply"
+            :action-label="t('harvester.virtualMachine.unplug.actionLabel')"
+            :waiting-label="t('harvester.virtualMachine.unplug.actionLabel')"
+            :success-label="t('harvester.virtualMachine.unplug.actionLabel')"
+            @click="save"
+          />
+        </div>
+
+        <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
       </div>
-
-      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
-    </div>
+    </template>
   </Card>
 </template>
 

pkg/harvester/dialog/HarvesterVMSnapshotDialog.vue

@@ -113,28 +113,31 @@ export default {
 
 <template>
   <Card :show-highlight-border="false">
-    <h4
-      slot="title"
-      v-clean-html="t('harvester.modal.vmSnapshot.title')"
-      class="text-default-text"
-    />
+    <template #title>
+      <h4
+        v-clean-html="t('harvester.modal.vmSnapshot.title')"
+        class="text-default-text"
+      />
+    </template>
 
     <template #body>
       <LabeledInput v-model:value="actionResource.metadata.namespace" :disabled="true" :label="t('generic.namespace')" />
       <LabeledInput v-model:value="snapshotName" class="mt-20" :label="t('generic.name')" required />
     </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
 
-        <AsyncButton mode="create" :disabled="!snapshotName" @click="save" />
+          <AsyncButton mode="create" :disabled="!snapshotName" @click="save" />
+        </div>
+
+        <Banner v-for="(err, i) in errors" :key="i"/>
       </div>
-
-      <Banner v-for="(err, i) in errors" :key="i"/>
-    </div>
+    </template>
   </Card>
 </template>
 

pkg/harvester/dialog/HarvesterVlanConfigMigrateDialog.vue

@@ -109,21 +109,23 @@ export default {
       />
     </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
 
-        <AsyncButton
-          mode="apply"
-          :disabled="!clusterNetwork"
-          @click="apply"
-        />
+          <AsyncButton
+            mode="apply"
+            :disabled="!clusterNetwork"
+            @click="apply"
+          />
+        </div>
+
+        <Banner v-for="(err, i) in errors" :key="i"/>
       </div>
-
-      <Banner v-for="(err, i) in errors" :key="i"/>
-    </div>
+    </template>
   </Card>
 </template>
 

pkg/harvester/dialog/MessageBox.vue

@@ -36,24 +36,25 @@ export default {
 
 <template>
   <Card ref="modal" name="modal" :show-highlight-border="false">
-    <h4
-      slot="title"
-      class="text-default-text"
-    >
-      {{ t('generic.tip') }}
-    </h4>
+    <template #title>
+      <h4 class="text-default-text">
+        {{ t('generic.tip') }}
+      </h4>
+    </template>
 
     <template #body>
       <p v-clean-html="t(modalData.contentKey)"></p>
     </template>
 
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button type="button" class="btn role-secondary mr-10" @click="ok">
-          {{ t('generic.ok') }}
-        </button>
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button type="button" class="btn role-secondary mr-10" @click="ok">
+            {{ t('generic.ok') }}
+          </button>
+        </div>
       </div>
-    </div>
+    </template>
   </Card>
 </template>
 

pkg/harvester/dialog/RestoreSnapshotDialog.vue

@@ -127,9 +127,11 @@ export default {
 </script>
 <template>
   <Card :show-highlight-border="false">
+
     <template #title>
       {{ t('harvester.modal.restoreSnapshot.title') }}
     </template>
+
     <template #body>
       <LabeledInput
         v-model:value="name"
@@ -145,19 +147,22 @@ export default {
         required
       />
     </template>
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
-        <AsyncButton
-          mode="create"
-          :disabled="disableSave"
-          @click="save"
-        />
+
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
+          <AsyncButton
+            mode="create"
+            :disabled="disableSave"
+            @click="save"
+          />
+        </div>
+        <Banner v-for="(err, i) in errors" :key="i"/>
       </div>
-      <Banner v-for="(err, i) in errors" :key="i"/>
-    </div>
+    </template>
   </Card>
 </template>
 <style lang="scss" scoped>

pkg/harvester/dialog/SnapshotDialog.vue

@@ -72,6 +72,7 @@ export default {
     <template #title>
       {{ t('harvester.modal.snapshot.title') }}
     </template>
+
     <template #body>
       <LabeledInput
         v-model:value="name"
@@ -79,19 +80,22 @@ export default {
         required
       />
     </template>
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
-        <AsyncButton
-          mode="create"
-          :disabled="disableSave"
-          @click="save"
-        />
+
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
+          <AsyncButton
+            mode="create"
+            :disabled="disableSave"
+            @click="save"
+          />
+        </div>
+        <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
       </div>
-      <Banner v-for="(err, i) in errors" :key="i" color="error" :label="err" />
-    </div>
+    </template>
   </Card>
 </template>
 <style lang="scss" scoped>

pkg/harvester/dialog/VolumeCloneDialog.vue

@@ -83,6 +83,7 @@ export default {
     <template #title>
       {{ t('harvester.modal.volumeClone.title') }}
     </template>
+
     <template #body>
       <Checkbox v-model:value="cloneData" class="mb-10" label-key="harvester.modal.cloneVM.type" />
 
@@ -94,19 +95,22 @@ export default {
         required
       />
     </template>
-    <div slot="actions" class="actions">
-      <div class="buttons">
-        <button class="btn role-secondary mr-10" @click="close">
-          {{ t('generic.cancel') }}
-        </button>
-        <AsyncButton
-          mode="create"
-          :disabled="disableSave"
-          @click="save"
-        />
+
+    <template #actions>
+      <div class="actions">
+        <div class="buttons">
+          <button class="btn role-secondary mr-10" @click="close">
+            {{ t('generic.cancel') }}
+          </button>
+          <AsyncButton
+            mode="create"
+            :disabled="disableSave"
+            @click="save"
+          />
+        </div>
+        <Banner v-for="(err, i) in errors" :key="i"/>
       </div>
-      <Banner v-for="(err, i) in errors" :key="i"/>
-    </div>
+    </template>
   </Card>
 </template>
 <style lang="scss" scoped>