Fix slots-template issue in all dialog components

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
This commit is contained in:
Francesco Torchia 2024-09-24 19:21:28 +02:00
parent b8f6bd49af
commit 13ea3e3c95
No known key found for this signature in database
GPG Key ID: E6D011B7415D4393
22 changed files with 309 additions and 251 deletions

View File

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

View File

@ -132,28 +132,34 @@ export default {
<template> <template>
<Card class="prompt-related" :show-highlight-border="false"> <Card class="prompt-related" :show-highlight-border="false">
<h4 slot="title" class="text-default-text"> <template #title>
{{ t('promptRemove.title') }} <h4 class="text-default-text">
</h4> {{ t('promptRemove.title') }}
<div slot="body" class="pl-10 pr-10"> </h4>
<span </template>
v-clean-html="t(warningMessageKey, { type, names: resourceNames }, true)"
></span>
<div class="mt-10 mb-10"> <template #body>
<div class="pl-10 pr-10">
<span <span
v-clean-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) }, true)" v-clean-html="t(warningMessageKey, { type, names: resourceNames }, true)"
></span> ></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>
<div class="mb-10"> </template>
<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 #actions> <template #actions>
<button class="btn role-secondary mr-10" @click="close"> <button class="btn role-secondary mr-10" @click="close">
{{ t('generic.cancel') }} {{ t('generic.cancel') }}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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