feat: backups page cleanup before worlds (#5844)
* feat: card alignment + fix modals * feat: change admon title in restore alert modal * fix: lint * feat: backups queue api into api-client * feat: impl backup queue api endpoints into frontend * feat: ack fix * feat: bulk actions * feat: bulk delete impl * fix: lint * fix: align error states * fix: transition group * feat: ready for qa * fix: lint * feat: qa * feat: stacked admonitions component * fix: issues with stacking * feat: hook up admonition stacking + fix app csp for staging kyros nodes * fix: logs.vue * qa: close stack on admonitions click * fix: all problems with stacked admonitions * qa: admonition cleanup and copy overhaul draft * fix: qa issues padding * fix: padding bug * feat: qa * fix: intercom in app csp bug * fix: positioning intercom * feat: loading overlay on top of console + admon consistency changes * feat: scroll indicator fade in backup delete modal + admon timestamp fix * feat: move action bar behind modal * fix: lint + i18n * fix: server ping spam on filter (cache but clear on unmount) * fix: 1 admon fade in flicker issue * chore: temp staging undo * qa: changes * fix: lint * chore: revert staging to use staging * fix: scoping
This commit is contained in:
Calum H.
@@ -1,8 +1,8 @@
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
||||
import { ref } from 'vue'
|
||||
|
||||
import Admonition from '../../components/base/Admonition.vue'
|
||||
import ButtonStyled from '../../components/base/ButtonStyled.vue'
|
||||
import ProgressBar from '../../components/base/ProgressBar.vue'
|
||||
|
||||
const meta = {
|
||||
title: 'Base/Admonition',
|
||||
@@ -57,37 +57,56 @@ export const Dismissible: Story = {
|
||||
},
|
||||
}
|
||||
|
||||
export const HeaderWithTimestamp: Story = {
|
||||
render: () => ({
|
||||
components: { Admonition },
|
||||
setup() {
|
||||
const t = ref(Date.now() - 3600_000)
|
||||
return { t }
|
||||
},
|
||||
template: /*html*/ `
|
||||
<Admonition
|
||||
type="info"
|
||||
header="Creating backup"
|
||||
:timestamp="t"
|
||||
>
|
||||
Saving world data for my-world.
|
||||
</Admonition>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const WithTopRightActions: Story = {
|
||||
render: () => ({
|
||||
components: { Admonition, ButtonStyled },
|
||||
template: /*html*/ `
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem;">
|
||||
<Admonition type="info" header="Uploading files (2/5)">
|
||||
<Admonition
|
||||
type="info"
|
||||
header="Uploading files (2/5)"
|
||||
:dismissible="false"
|
||||
>
|
||||
Uploading server files...
|
||||
<template #top-right-actions>
|
||||
<ButtonStyled type="outlined" color="blue">
|
||||
<button class="!border">Cancel</button>
|
||||
<button class="!border" type="button">Cancel</button>
|
||||
</ButtonStyled>
|
||||
</template>
|
||||
</Admonition>
|
||||
<Admonition type="critical" header="Extraction failed">
|
||||
<Admonition
|
||||
type="critical"
|
||||
header="Extraction failed"
|
||||
:dismissible="true"
|
||||
>
|
||||
Something went wrong while extracting the archive.
|
||||
<template #top-right-actions>
|
||||
<ButtonStyled color="red">
|
||||
<button>Retry</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled circular type="transparent" hover-color-fill="background" color="red">
|
||||
<button>✕</button>
|
||||
<button type="button">Retry</button>
|
||||
</ButtonStyled>
|
||||
</template>
|
||||
</Admonition>
|
||||
<Admonition type="success" header="Extraction complete">
|
||||
<Admonition type="success" header="Extraction complete" :dismissible="true">
|
||||
All files have been extracted successfully.
|
||||
<template #top-right-actions>
|
||||
<ButtonStyled circular type="transparent" hover-color-fill="background" color="green">
|
||||
<button>✕</button>
|
||||
</ButtonStyled>
|
||||
</template>
|
||||
</Admonition>
|
||||
</div>
|
||||
`,
|
||||
@@ -96,41 +115,55 @@ export const WithTopRightActions: Story = {
|
||||
|
||||
export const WithProgressBar: Story = {
|
||||
render: () => ({
|
||||
components: { Admonition, ButtonStyled, ProgressBar },
|
||||
components: { Admonition, ButtonStyled },
|
||||
template: /*html*/ `
|
||||
<div style="display: flex; flex-direction: column; gap: 1rem;">
|
||||
<Admonition type="info" header="Uploading files (2/5)">
|
||||
<Admonition
|
||||
type="info"
|
||||
header="Uploading files (2/5)"
|
||||
:dismissible="false"
|
||||
:progress="0.45"
|
||||
progress-color="blue"
|
||||
>
|
||||
128 KB / 1.2 MB (45%)
|
||||
<template #top-right-actions>
|
||||
<ButtonStyled type="outlined" color="blue">
|
||||
<button class="!border">Cancel</button>
|
||||
<button class="!border" type="button">Cancel</button>
|
||||
</ButtonStyled>
|
||||
</template>
|
||||
<template #progress>
|
||||
<ProgressBar :progress="0.45" :max="1" color="blue" full-width />
|
||||
</template>
|
||||
</Admonition>
|
||||
<Admonition type="info" header="Extracting modpack.zip">
|
||||
<Admonition
|
||||
type="info"
|
||||
header="Extracting modpack.zip"
|
||||
:dismissible="false"
|
||||
:progress="0.7"
|
||||
progress-color="blue"
|
||||
>
|
||||
24 MB extracted — config/settings.yml
|
||||
<template #top-right-actions>
|
||||
<ButtonStyled type="outlined" color="blue">
|
||||
<button class="!border">Cancel</button>
|
||||
<button class="!border" type="button">Cancel</button>
|
||||
</ButtonStyled>
|
||||
</template>
|
||||
<template #progress>
|
||||
<ProgressBar :progress="0.7" :max="1" color="blue" full-width />
|
||||
</template>
|
||||
</Admonition>
|
||||
<Admonition type="success" header="Extraction complete — Done">
|
||||
<Admonition
|
||||
type="success"
|
||||
header="Extraction complete — Done"
|
||||
:dismissible="true"
|
||||
:progress="1"
|
||||
progress-color="green"
|
||||
>
|
||||
56 MB extracted
|
||||
<template #top-right-actions>
|
||||
<ButtonStyled circular type="transparent" hover-color-fill="background" color="green">
|
||||
<button>✕</button>
|
||||
</ButtonStyled>
|
||||
</template>
|
||||
<template #progress>
|
||||
<ProgressBar :progress="1" :max="1" color="green" full-width />
|
||||
</template>
|
||||
</Admonition>
|
||||
<Admonition
|
||||
type="info"
|
||||
header="Waiting for upload"
|
||||
:dismissible="false"
|
||||
:progress="0"
|
||||
progress-color="blue"
|
||||
waiting
|
||||
>
|
||||
Queued and waiting for available bandwidth.
|
||||
</Admonition>
|
||||
</div>
|
||||
`,
|
||||
|
||||
@@ -40,6 +40,14 @@ export const Indeterminate: Story = {
|
||||
},
|
||||
}
|
||||
|
||||
export const LabelClass: Story = {
|
||||
args: {
|
||||
label: 'Custom label class',
|
||||
labelClass: 'text-brand font-bold',
|
||||
modelValue: true,
|
||||
},
|
||||
}
|
||||
|
||||
export const AllStates: StoryObj = {
|
||||
render: () => ({
|
||||
components: { Checkbox },
|
||||
|
||||
507
packages/ui/src/stories/base/StackedAdmonitions.stories.ts
Normal file
507
packages/ui/src/stories/base/StackedAdmonitions.stories.ts
Normal file
@@ -0,0 +1,507 @@
|
||||
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
||||
import { ref } from 'vue'
|
||||
|
||||
import Admonition from '../../components/base/Admonition.vue'
|
||||
import ButtonStyled from '../../components/base/ButtonStyled.vue'
|
||||
import StackedAdmonitionsRaw, {
|
||||
type StackedAdmonitionItem,
|
||||
} from '../../components/base/StackedAdmonitions.vue'
|
||||
|
||||
// The generic type signature of StackedAdmonitions breaks Storybook's Meta
|
||||
// inference and Vue's components record type. Cast to `any` for story wiring;
|
||||
// runtime behavior is unchanged.
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const StackedAdmonitions = StackedAdmonitionsRaw as any
|
||||
|
||||
interface DemoItem extends StackedAdmonitionItem {
|
||||
header: string
|
||||
body: string
|
||||
}
|
||||
|
||||
const meta: Meta = {
|
||||
title: 'Base/StackedAdmonitions',
|
||||
component: StackedAdmonitions,
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
const initialItems: DemoItem[] = [
|
||||
{
|
||||
id: 'backup-failed',
|
||||
type: 'critical',
|
||||
header: 'Backup failed',
|
||||
body: 'Something went wrong while creating your backup. Try again or contact support.',
|
||||
},
|
||||
{
|
||||
id: 'storage-nearly-full',
|
||||
type: 'warning',
|
||||
header: 'Storage nearly full',
|
||||
body: 'Your server is using 92% of available storage.',
|
||||
},
|
||||
{
|
||||
id: 'scheduled-maintenance',
|
||||
type: 'info',
|
||||
header: 'Scheduled maintenance',
|
||||
body: 'Routine maintenance will begin in 30 minutes.',
|
||||
},
|
||||
]
|
||||
|
||||
const variedHeightItems: DemoItem[] = [
|
||||
initialItems[0],
|
||||
{
|
||||
id: 'storage-nearly-full',
|
||||
type: 'warning',
|
||||
header: 'Storage nearly full',
|
||||
body: 'Your server is using 92% of available storage. Large world backups, installation artifacts, and cached uploads are all contributing here, so this card is intentionally taller to exercise the collapse animation between mixed-height banners.',
|
||||
},
|
||||
initialItems[2],
|
||||
]
|
||||
|
||||
const completedBackupItem: DemoItem = {
|
||||
id: 'backup-completed',
|
||||
type: 'success',
|
||||
header: 'Backup completed',
|
||||
body: 'Backup 38298832 finished successfully.',
|
||||
}
|
||||
|
||||
export const Empty: Story = {
|
||||
render: () => ({
|
||||
components: { StackedAdmonitions, Admonition },
|
||||
template: /* html */ `
|
||||
<div style="min-height: 4rem;">
|
||||
<StackedAdmonitions :items="[]">
|
||||
<template #item="{ item }">
|
||||
<Admonition :type="item.type" :header="item.header" :body="item.body" />
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
<p style="color: var(--color-secondary); margin-top: 1rem;">
|
||||
Nothing should render above this line.
|
||||
</p>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const SingleItem: Story = {
|
||||
render: () => ({
|
||||
components: { StackedAdmonitions, Admonition },
|
||||
setup() {
|
||||
const items = ref<DemoItem[]>([completedBackupItem])
|
||||
function dismiss(id: string) {
|
||||
items.value = items.value.filter((i) => i.id !== id)
|
||||
}
|
||||
function reset() {
|
||||
items.value = [completedBackupItem]
|
||||
}
|
||||
return { items, dismiss, reset }
|
||||
},
|
||||
template: /* html */ `
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
style="margin-bottom: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 0.5rem; background: var(--color-button-bg); color: var(--color-contrast);"
|
||||
@click="reset"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
<StackedAdmonitions :items="items">
|
||||
<template #item="{ item }">
|
||||
<Admonition
|
||||
:type="item.type"
|
||||
:header="item.header"
|
||||
:body="item.body"
|
||||
dismissible
|
||||
@dismiss="dismiss(item.id)"
|
||||
/>
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const TwoItems: Story = {
|
||||
render: () => ({
|
||||
components: { StackedAdmonitions, Admonition },
|
||||
setup() {
|
||||
const items = ref<DemoItem[]>(initialItems.slice(0, 2))
|
||||
return { items }
|
||||
},
|
||||
template: /* html */ `
|
||||
<StackedAdmonitions :items="items">
|
||||
<template #item="{ item }">
|
||||
<Admonition :type="item.type" :header="item.header" :body="item.body" />
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const FiveItems: Story = {
|
||||
render: () => ({
|
||||
components: { StackedAdmonitions, Admonition },
|
||||
setup() {
|
||||
const items = ref<DemoItem[]>([
|
||||
...initialItems,
|
||||
{
|
||||
id: 'update-available',
|
||||
type: 'success',
|
||||
header: 'Update available',
|
||||
body: 'A new version of your server software is ready to install.',
|
||||
},
|
||||
{
|
||||
id: 'memory-pressure',
|
||||
type: 'warning',
|
||||
header: 'High memory usage',
|
||||
body: 'Your server is using 89% of allocated memory.',
|
||||
},
|
||||
])
|
||||
return { items }
|
||||
},
|
||||
template: /* html */ `
|
||||
<StackedAdmonitions :items="items">
|
||||
<template #item="{ item }">
|
||||
<Admonition :type="item.type" :header="item.header" :body="item.body" />
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const MixedTypes: Story = {
|
||||
render: () => ({
|
||||
components: { StackedAdmonitions, Admonition },
|
||||
setup() {
|
||||
const items = ref<DemoItem[]>([
|
||||
{
|
||||
id: 'critical',
|
||||
type: 'critical',
|
||||
header: 'Critical admonition',
|
||||
body: 'Red background placeholder when not front.',
|
||||
},
|
||||
{
|
||||
id: 'warning',
|
||||
type: 'warning',
|
||||
header: 'Warning admonition',
|
||||
body: 'Orange background placeholder when not front.',
|
||||
},
|
||||
{
|
||||
id: 'info',
|
||||
type: 'info',
|
||||
header: 'Info admonition',
|
||||
body: 'Blue background placeholder when not front.',
|
||||
},
|
||||
{
|
||||
id: 'success',
|
||||
type: 'success',
|
||||
header: 'Success admonition',
|
||||
body: 'Green background placeholder when not front.',
|
||||
},
|
||||
])
|
||||
return { items }
|
||||
},
|
||||
template: /* html */ `
|
||||
<StackedAdmonitions :items="items">
|
||||
<template #item="{ item }">
|
||||
<Admonition :type="item.type" :header="item.header" :body="item.body" />
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const VariedHeights: Story = {
|
||||
render: () => ({
|
||||
components: { StackedAdmonitions, Admonition },
|
||||
setup() {
|
||||
const items = ref<DemoItem[]>(variedHeightItems)
|
||||
const expanded = ref(false)
|
||||
let nextId = 1
|
||||
|
||||
function addAlert() {
|
||||
const type = ['info', 'warning', 'critical', 'success'][nextId % 4] as DemoItem['type']
|
||||
items.value = [
|
||||
...items.value,
|
||||
{
|
||||
id: `new-alert-${nextId}`,
|
||||
type,
|
||||
header: `New alert ${nextId}`,
|
||||
body:
|
||||
nextId % 2 === 0
|
||||
? 'A short dynamically added alert.'
|
||||
: 'A dynamically added alert with a longer body so the stack can exercise measurement updates when new mixed-height items enter.',
|
||||
},
|
||||
]
|
||||
nextId += 1
|
||||
}
|
||||
|
||||
function reset() {
|
||||
items.value = variedHeightItems
|
||||
expanded.value = false
|
||||
nextId = 1
|
||||
}
|
||||
|
||||
return { items, expanded, addAlert, reset }
|
||||
},
|
||||
template: /* html */ `
|
||||
<div>
|
||||
<div style="display: flex; gap: 0.5rem; margin-bottom: 0.75rem;">
|
||||
<button
|
||||
type="button"
|
||||
style="padding: 0.25rem 0.75rem; border-radius: 0.5rem; background: var(--color-button-bg); color: var(--color-contrast);"
|
||||
@click="addAlert"
|
||||
>
|
||||
Add alert
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
style="padding: 0.25rem 0.75rem; border-radius: 0.5rem; background: var(--color-button-bg); color: var(--color-contrast);"
|
||||
@click="reset"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
<StackedAdmonitions
|
||||
:items="items"
|
||||
:expanded="expanded"
|
||||
@update:expanded="expanded = $event"
|
||||
>
|
||||
<template #item="{ item }">
|
||||
<Admonition :type="item.type" :header="item.header" :body="item.body" />
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const ForceExpanded: Story = {
|
||||
render: () => ({
|
||||
components: { StackedAdmonitions, Admonition },
|
||||
setup() {
|
||||
const items = ref<DemoItem[]>(variedHeightItems)
|
||||
const expanded = ref(true)
|
||||
return { items, expanded }
|
||||
},
|
||||
template: /* html */ `
|
||||
<StackedAdmonitions :items="items" :expanded="expanded" @update:expanded="expanded = $event">
|
||||
<template #item="{ item }">
|
||||
<Admonition :type="item.type" :header="item.header" :body="item.body" />
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const DismissIndividual: Story = {
|
||||
render: () => ({
|
||||
components: { StackedAdmonitions, Admonition },
|
||||
setup() {
|
||||
const items = ref<DemoItem[]>([...initialItems])
|
||||
function dismiss(id: string) {
|
||||
items.value = items.value.filter((i) => i.id !== id)
|
||||
}
|
||||
function reset() {
|
||||
items.value = [...initialItems]
|
||||
}
|
||||
return { items, dismiss, reset }
|
||||
},
|
||||
template: /* html */ `
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
style="margin-bottom: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 0.5rem; background: var(--color-button-bg); color: var(--color-contrast);"
|
||||
@click="reset"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
<StackedAdmonitions :items="items">
|
||||
<template #item="{ item }">
|
||||
<Admonition
|
||||
:type="item.type"
|
||||
:header="item.header"
|
||||
:body="item.body"
|
||||
dismissible
|
||||
@dismiss="dismiss(item.id)"
|
||||
/>
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const DismissAll: Story = {
|
||||
render: () => ({
|
||||
components: { StackedAdmonitions, Admonition },
|
||||
setup() {
|
||||
const items = ref<DemoItem[]>([...initialItems])
|
||||
function dismiss(id: string) {
|
||||
items.value = items.value.filter((i) => i.id !== id)
|
||||
}
|
||||
function dismissAll() {
|
||||
items.value = []
|
||||
}
|
||||
function reset() {
|
||||
items.value = [...initialItems]
|
||||
}
|
||||
return { items, dismiss, dismissAll, reset }
|
||||
},
|
||||
template: /* html */ `
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
style="margin-bottom: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 0.5rem; background: var(--color-button-bg); color: var(--color-contrast);"
|
||||
@click="reset"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
<StackedAdmonitions :items="items" @dismiss-all="dismissAll">
|
||||
<template #item="{ item, dismissible }">
|
||||
<Admonition
|
||||
:type="item.type"
|
||||
:header="item.header"
|
||||
:body="item.body"
|
||||
:dismissible="dismissible"
|
||||
@dismiss="dismiss(item.id)"
|
||||
/>
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
interface RichItem extends StackedAdmonitionItem {
|
||||
header: string
|
||||
body: string
|
||||
progress?: number
|
||||
canRetry?: boolean
|
||||
canCancel?: boolean
|
||||
}
|
||||
|
||||
export const RichContent: Story = {
|
||||
render: () => ({
|
||||
components: { StackedAdmonitions, Admonition, ButtonStyled },
|
||||
setup() {
|
||||
const items = ref<RichItem[]>([
|
||||
{
|
||||
id: 'upload-1',
|
||||
type: 'info',
|
||||
header: 'Uploading files (2/5)',
|
||||
body: '128 KB / 1.2 MB (45%)',
|
||||
progress: 0.45,
|
||||
canCancel: true,
|
||||
},
|
||||
{
|
||||
id: 'extract-1',
|
||||
type: 'critical',
|
||||
header: 'Extraction failed',
|
||||
body: 'Something went wrong while extracting the archive.',
|
||||
canRetry: true,
|
||||
},
|
||||
{
|
||||
id: 'install-1',
|
||||
type: 'success',
|
||||
header: 'Installation complete',
|
||||
body: 'All files have been installed successfully.',
|
||||
},
|
||||
])
|
||||
function dismiss(id: string) {
|
||||
items.value = items.value.filter((i) => i.id !== id)
|
||||
}
|
||||
function dismissAll() {
|
||||
items.value = []
|
||||
}
|
||||
return { items, dismiss, dismissAll }
|
||||
},
|
||||
template: /* html */ `
|
||||
<StackedAdmonitions :items="items" @dismiss-all="dismissAll">
|
||||
<template #item="{ item, dismissible }">
|
||||
<Admonition
|
||||
:type="item.type"
|
||||
:header="item.header"
|
||||
:dismissible="dismissible && !item.canCancel"
|
||||
:progress="item.progress"
|
||||
progress-color="blue"
|
||||
@dismiss="dismiss(item.id)"
|
||||
>
|
||||
{{ item.body }}
|
||||
<template #top-right-actions>
|
||||
<ButtonStyled v-if="item.canCancel" type="outlined" color="blue">
|
||||
<button class="!border" type="button" @click="dismiss(item.id)">Cancel</button>
|
||||
</ButtonStyled>
|
||||
<ButtonStyled v-if="item.canRetry" color="red">
|
||||
<button type="button" @click="dismiss(item.id)">Retry</button>
|
||||
</ButtonStyled>
|
||||
</template>
|
||||
</Admonition>
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const KeyboardAndA11y: Story = {
|
||||
render: () => ({
|
||||
components: { StackedAdmonitions, Admonition },
|
||||
setup() {
|
||||
const items = ref<DemoItem[]>([...initialItems])
|
||||
function dismiss(id: string) {
|
||||
items.value = items.value.filter((i) => i.id !== id)
|
||||
}
|
||||
return { items, dismiss }
|
||||
},
|
||||
template: /* html */ `
|
||||
<div>
|
||||
<p style="color: var(--color-secondary); margin-bottom: 0.75rem; font-size: 0.875rem;">
|
||||
Tab to the stack and press <kbd>Enter</kbd> or <kbd>Space</kbd> to expand.
|
||||
While collapsed, only the front card's buttons are focusable (inert on back cards).
|
||||
</p>
|
||||
<StackedAdmonitions :items="items">
|
||||
<template #item="{ item }">
|
||||
<Admonition
|
||||
:type="item.type"
|
||||
:header="item.header"
|
||||
:body="item.body"
|
||||
dismissible
|
||||
@dismiss="dismiss(item.id)"
|
||||
/>
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
|
||||
export const TwoInstances: Story = {
|
||||
render: () => ({
|
||||
components: { StackedAdmonitions, Admonition },
|
||||
setup() {
|
||||
const stackA = ref<DemoItem[]>([initialItems[0], initialItems[1]])
|
||||
const stackB = ref<DemoItem[]>([initialItems[2]])
|
||||
function dismissA(id: string) {
|
||||
stackA.value = stackA.value.filter((i) => i.id !== id)
|
||||
}
|
||||
function dismissB(id: string) {
|
||||
stackB.value = stackB.value.filter((i) => i.id !== id)
|
||||
}
|
||||
return { stackA, stackB, dismissA, dismissB }
|
||||
},
|
||||
template: /* html */ `
|
||||
<div style="display: flex; flex-direction: column; gap: 1.5rem;">
|
||||
<StackedAdmonitions :items="stackA">
|
||||
<template #item="{ item }">
|
||||
<Admonition :type="item.type" :header="item.header" :body="item.body" dismissible @dismiss="dismissA(item.id)" />
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
<StackedAdmonitions :items="stackB">
|
||||
<template #item="{ item }">
|
||||
<Admonition :type="item.type" :header="item.header" :body="item.body" dismissible @dismiss="dismissB(item.id)" />
|
||||
</template>
|
||||
</StackedAdmonitions>
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
}
|
||||
Reference in New Issue
Block a user