sugoidogo/modrinth
1
0
Fork 0
mirror of https://github.com/modrinth/code.git synced 2026-08-31 12:05:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rename NewModal -> Modal and rid the world of ModalWrapper

Browse Source
This commit is contained in:
Prospector
2026-07-28 21:23:39 -07:00
parent ee60b1adbc
commit b9a65175a0
141 changed files with 484 additions and 802 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/affiliate/AffiliateLinkCreateModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal ref="modal" :header="formatMessage(messages.createHeader)">
<Modal ref="modal" :header="formatMessage(messages.createHeader)">
<div class="flex flex-col">
<label v-if="showUserField" class="contents" for="create-affiliate-user-input">
<span class="text-lg font-semibold text-contrast mb-1">
@@ -55,7 +55,7 @@
</ButtonStyled>
</div>
</div>
</NewModal>
</Modal>
</template>
<script lang="ts"></script>
<script setup lang="ts">
@@ -64,7 +64,7 @@ import { computed, ref, useTemplateRef } from 'vue'
import { defineMessages, useVIntl } from '../../composables/i18n'
import { commonMessages } from '../../utils/common-messages'
import { AutoBrandIcon, ButtonStyled, NewModal, StyledInput } from '../index'
import { AutoBrandIcon, ButtonStyled, Modal, StyledInput } from '../index'
export type CreateAffiliateProps = { sourceName: string; username?: string }
const props = withDefaults(
@@ -82,7 +82,7 @@ const emit = defineEmits<{
(e: 'create', data: CreateAffiliateProps): void
}>()
const modal = useTemplateRef<typeof NewModal>('modal')
const modal = useTemplateRef<typeof Modal>('modal')
const { formatMessage } = useVIntl()
const affiliateLinkTitle = ref('')
packages/ui/src/components/base/MarkdownEditor.vue
+10 -10
View File
@@ -1,5 +1,5 @@
<template>
<NewModal ref="linkModal" :header="formatMessage(messages.linkModalHeader)" class="!w-[40rem]">
<Modal ref="linkModal" :header="formatMessage(messages.linkModalHeader)" class="!w-[40rem]">
<div class="modal-insert">
<label class="label" for="insert-link-label">
<span class="label__title">{{ formatMessage(messages.linkModalLabelFieldTitle) }}</span>
@@ -66,8 +66,8 @@
</ButtonStyled>
</div>
</div>
</NewModal>
<NewModal ref="imageModal" :header="formatMessage(messages.imageModalHeader)" class="!w-[40rem]">
</Modal>
<Modal ref="imageModal" :header="formatMessage(messages.imageModalHeader)" class="!w-[40rem]">
<div class="modal-insert">
<label class="label" for="insert-image-alt">
<span class="label__title">
@@ -164,8 +164,8 @@
</ButtonStyled>
</div>
</div>
</NewModal>
<NewModal ref="videoModal" :header="formatMessage(messages.videoModalHeader)" class="!w-[40rem]">
</Modal>
<Modal ref="videoModal" :header="formatMessage(messages.videoModalHeader)" class="!w-[40rem]">
<div class="modal-insert">
<label class="label" for="insert-video-url">
<span class="label__title">
@@ -224,7 +224,7 @@
</ButtonStyled>
</div>
</div>
</NewModal>
</Modal>
<div class="block grow w-full">
<div class="editor-action-row w-full">
<div class="w-full flex justify-between items-center flex-wrap gap-2">
@@ -335,7 +335,7 @@ import { type Component, computed, onBeforeUnmount, onMounted, ref, toRef, watch
import { defineMessages, type MessageDescriptor, useVIntl } from '../../composables/i18n'
import { commonMessages } from '../../utils/common-messages.ts'
import NewModal from '../modal/NewModal.vue'
import Modal from '../modal/Modal.vue'
import ButtonStyled from './ButtonStyled.vue'
import Chips from './Chips.vue'
import FileInput from './FileInput.vue'
@@ -1042,9 +1042,9 @@ const videoMarkdown = computed(() => {
return ''
})
const linkModal = ref<InstanceType<typeof NewModal> | null>(null)
const imageModal = ref<InstanceType<typeof NewModal> | null>(null)
const videoModal = ref<InstanceType<typeof NewModal> | null>(null)
const linkModal = ref<InstanceType<typeof Modal> | null>(null)
const imageModal = ref<InstanceType<typeof Modal> | null>(null)
const videoModal = ref<InstanceType<typeof Modal> | null>(null)
function resetModalStates() {
linkText.value = ''
packages/ui/src/components/base/MultiStageModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal
<Modal
ref="modal"
:scrollable="true"
max-content-height="72vh"
@@ -114,12 +114,12 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script lang="ts">
import { ChevronRightIcon, SpinnerIcon } from '@modrinth/assets'
import { ButtonStyled, NewModal } from '@modrinth/ui'
import { ButtonStyled, Modal } from '@modrinth/ui'
import type { Component } from 'vue'
import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
@@ -175,7 +175,7 @@ const props = withDefaults(
},
)
const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
const modal = useTemplateRef<InstanceType<typeof Modal>>('modal')
const currentStageIndex = ref<number>(0)
function show() {
packages/ui/src/components/billing/AddPaymentMethodModal.vue
+4 -4
View File
@@ -5,13 +5,13 @@ import { nextTick, ref, useTemplateRef } from 'vue'
import { defineMessages, useVIntl } from '../../composables/i18n'
import { commonMessages } from '../../utils'
import { ButtonStyled, NewModal } from '../index'
import { ButtonStyled, Modal } from '../index'
import type { AddPaymentMethodProps } from './AddPaymentMethod.vue'
import AddPaymentMethod from './AddPaymentMethod.vue'
const { formatMessage } = useVIntl()
const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
const modal = useTemplateRef<InstanceType<typeof Modal>>('modal')
const addPaymentMethod = useTemplateRef<InstanceType<typeof AddPaymentMethod>>('addPaymentMethod')
const props = defineProps<AddPaymentMethodProps>()
@@ -40,7 +40,7 @@ defineExpose({
</script>
<template>
<NewModal ref="modal">
<Modal ref="modal">
<template #title>
<span class="text-lg font-extrabold text-contrast">
{{ formatMessage(messages.addingPaymentMethod) }}
@@ -71,5 +71,5 @@ defineExpose({
</ButtonStyled>
</div>
</div>
</NewModal>
</Modal>
</template>
packages/ui/src/components/billing/ModrinthServersPurchaseModal.vue
+4 -4
View File
@@ -19,7 +19,7 @@ import { useStripe } from '../../composables/stripe'
import { commonMessages } from '../../utils'
import { ButtonStyled } from '../index'
import ModalLoadingIndicator from '../modal/ModalLoadingIndicator.vue'
import NewModal from '../modal/NewModal.vue'
import Modal from '../modal/Modal.vue'
import PlanSelector from './ServersPurchase0Plan.vue'
import RegionSelector from './ServersPurchase1Region.vue'
import PaymentMethodSelector from './ServersPurchase2PaymentMethod.vue'
@@ -65,7 +65,7 @@ const props = defineProps<{
affiliateCode?: string | null
}>()
const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
const modal = useTemplateRef<InstanceType<typeof Modal>>('modal')
const selectedPlan = ref<Labrinth.Billing.Internal.Product>()
const selectedInterval = ref<ServerBillingInterval>('quarterly')
const loading = ref(false)
@@ -448,7 +448,7 @@ function goToBreadcrumbStep(id: string) {
}
</script>
<template>
<NewModal ref="modal" @hide="handleHide">
<Modal ref="modal" @hide="handleHide">
<template #title>
<div class="flex items-center gap-1 font-bold text-secondary">
<template v-for="(step, index) in visibleSteps" :key="step">
@@ -601,5 +601,5 @@ function goToBreadcrumbStep(id: string) {
</button>
</ButtonStyled>
</div>
</NewModal>
</Modal>
</template>
packages/ui/src/components/billing/PurchaseModal.vue
+3 -3
View File
@@ -1,5 +1,5 @@
<template>
<NewModal ref="purchaseModal">
<Modal ref="purchaseModal">
<template #title>
<span class="text-contrast text-xl font-extrabold">
<template v-if="productType === 'midas'">Subscribe to Modrinth+!</template>
@@ -446,7 +446,7 @@
</button>
</template>
</div>
</NewModal>
</Modal>
</template>
<script setup>
@@ -479,7 +479,7 @@ import Combobox from '../base/Combobox.vue'
import Slider from '../base/Slider.vue'
import StyledInput from '../base/StyledInput.vue'
import AnimatedLogo from '../brand/AnimatedLogo.vue'
import NewModal from '../modal/NewModal.vue'
import Modal from '../modal/Modal.vue'
import LoaderIcon from '../servers/icons/LoaderIcon.vue'
const { formatMessage } = useVIntl()
packages/ui/src/components/billing/ResubscribeModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal ref="modal" max-width="550px">
<Modal ref="modal" max-width="550px">
<template #title>
<div class="text-2xl font-semibold text-contrast">{{ formatMessage(messages.title) }}</div>
</template>
@@ -92,7 +92,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -105,7 +105,7 @@ import { injectNotificationManager } from '#ui/providers/web-notifications.ts'
import { useFormatDateTime, useFormatPrice } from '../../composables'
import { defineMessages, useVIntl } from '../../composables/i18n'
import IntlFormatted from '../base/IntlFormatted.vue'
import { ButtonStyled, NewModal } from '../index'
import { ButtonStyled, Modal } from '../index'
const { addNotification } = injectNotificationManager()
const { formatMessage } = useVIntl()
@@ -148,7 +148,7 @@ const emit = defineEmits<{
const formatDate = useFormatDateTime({ dateStyle: 'long' })
const formatPrice = useFormatPrice()
const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
const modal = useTemplateRef<InstanceType<typeof Modal>>('modal')
const modalData = ref<ResubscribeModalState | null>(null)
packages/ui/src/components/billing/ServersGuestPlanModal.vue
+4 -4
View File
@@ -4,7 +4,7 @@ import { ChevronRightIcon, ExternalIcon, XIcon } from '@modrinth/assets'
import { computed, ref, useTemplateRef } from 'vue'
import ButtonStyled from '../base/ButtonStyled.vue'
import NewModal from '../modal/NewModal.vue'
import Modal from '../modal/Modal.vue'
import type { ServerBillingInterval } from './ModrinthServersPurchaseModal.vue'
import PlanSelector from './ServersPurchase0Plan.vue'
@@ -23,7 +23,7 @@ const emit = defineEmits<{
(e: 'continue', payload: { interval: ServerBillingInterval; planId: string | null }): void
}>()
const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
const modal = useTemplateRef<InstanceType<typeof Modal>>('modal')
const selectedPlan = ref<Labrinth.Billing.Internal.Product>()
const selectedInterval = ref<ServerBillingInterval>('quarterly')
@@ -91,7 +91,7 @@ defineExpose({
</script>
<template>
<NewModal ref="modal" :on-hide="handleModalHide" no-padding>
<Modal ref="modal" :on-hide="handleModalHide" no-padding>
<template #title>
<div class="flex items-center gap-1 font-bold text-secondary">
<span class="text-contrast">Plan</span>
@@ -165,5 +165,5 @@ defineExpose({
</div>
</Transition>
</div>
</NewModal>
</Modal>
</template>
packages/ui/src/components/external_files/AddFilesToAttributionGroupModal.vue
+4 -4
View File
@@ -3,7 +3,7 @@ import type { Labrinth } from '@modrinth/api-client'
import { CheckIcon, PlusIcon, SearchIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
import { computed, nextTick, ref } from 'vue'
import { ButtonStyled, NewModal, StyledInput } from '#ui/components'
import { ButtonStyled, Modal, StyledInput } from '#ui/components'
import { commonMessages } from '#ui/utils'
import { defineMessages, useVIntl } from '../../composables/i18n'
@@ -60,7 +60,7 @@ type AssignableFileEntry = {
sourceLabel: string
}
const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
const modalRef = ref<InstanceType<typeof Modal> | null>(null)
const assignableEntries = ref<AssignableFileEntry[]>([])
const searchQuery = ref('')
const searchInputRef = ref<{ focus: () => void } | null>(null)
@@ -176,7 +176,7 @@ defineExpose({ show, hide })
</script>
<template>
<NewModal
<Modal
ref="modalRef"
:header="formatMessage(messages.addFilesModalTitle)"
max-width="560px"
@@ -283,5 +283,5 @@ defineExpose({ show, hide })
</div>
</div>
</template>
</NewModal>
</Modal>
</template>
packages/ui/src/components/external_files/AddToExistingExternalProjectModal.vue
+4 -4
View File
@@ -4,7 +4,7 @@ import { PlusIcon, SearchIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
import { useMutation } from '@tanstack/vue-query'
import { computed, ref, useTemplateRef } from 'vue'
import { Accordion, ButtonStyled, NewModal, StyledInput } from '#ui/components'
import { Accordion, ButtonStyled, Modal, StyledInput } from '#ui/components'
import { injectModrinthClient, injectNotificationManager } from '../../providers'
import AttributionGroupFilePicker from './AttributionGroupFilePicker.vue'
@@ -41,7 +41,7 @@ type ExternalProject = {
const client = injectModrinthClient()
const { addNotification } = injectNotificationManager()
const modalRef = useTemplateRef<InstanceType<typeof NewModal>>('modalRef')
const modalRef = useTemplateRef<InstanceType<typeof Modal>>('modalRef')
const searchAccordionRef = useTemplateRef<InstanceType<typeof Accordion>>('searchAccordionRef')
const filesAccordionRef = useTemplateRef<InstanceType<typeof Accordion>>('filesAccordionRef')
const searchInputRef = useTemplateRef<InstanceType<typeof StyledInput>>('searchInputRef')
@@ -185,7 +185,7 @@ defineExpose({ show, hide })
</script>
<template>
<NewModal
<Modal
ref="modalRef"
header="Add to existing entry"
max-width="720px"
@@ -324,5 +324,5 @@ defineExpose({ show, hide })
</ButtonStyled>
</div>
</div>
</NewModal>
</Modal>
</template>
packages/ui/src/components/external_files/AddToGlobalPermissionsDatabaseModal.vue
+4 -4
View File
@@ -9,7 +9,7 @@ import {
ButtonStyled,
Combobox,
type ComboboxOption,
NewModal,
Modal,
StyledInput,
} from '#ui/components'
@@ -35,7 +35,7 @@ const emit = defineEmits<{
const client = injectModrinthClient()
const { addNotification } = injectNotificationManager()
const modalRef = useTemplateRef<InstanceType<typeof NewModal>>('modalRef')
const modalRef = useTemplateRef<InstanceType<typeof Modal>>('modalRef')
const statusOptions: ComboboxOption<ExternalLicenseStatus>[] = [
{ value: 'yes', label: 'Yes' },
@@ -140,7 +140,7 @@ defineExpose({ show, hide })
</script>
<template>
<NewModal
<Modal
ref="modalRef"
header="Adding to global permissions database"
max-width="640px"
@@ -241,5 +241,5 @@ defineExpose({ show, hide })
</ButtonStyled>
</div>
</div>
</NewModal>
</Modal>
</template>
packages/ui/src/components/modal/ConfirmLeaveModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal ref="modal" :header="localizeIfPossible(title)" fade="warning" max-width="500px">
<Modal ref="modal" :header="localizeIfPossible(title)" fade="warning" max-width="500px">
<div class="flex flex-col gap-6">
<Admonition :type="admonitionType" :header="localizeIfPossible(header)">
{{ localizeIfPossible(body) }}
@@ -22,7 +22,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -33,7 +33,7 @@ import Admonition from '#ui/components/base/Admonition.vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import { defineMessage, type MessageDescriptor, useVIntl } from '#ui/composables/i18n'
import NewModal from './NewModal.vue'
import Modal from './Modal.vue'
const { formatMessage } = useVIntl()
@@ -80,7 +80,7 @@ function localizeIfPossible(message: MessageDescriptor | string) {
return typeof message === 'string' ? message : formatMessage(message)
}
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
let resolvePromise: ((value: boolean) => void) | null = null
function prompt(): Promise<boolean> {
packages/ui/src/components/modal/ConfirmModal.vue
+3 -3
View File
@@ -1,5 +1,5 @@
<template>
<NewModal ref="modal" :noblur="noblur" :danger="danger" :on-hide="onHide" max-width="550px">
<Modal ref="modal" :noblur="noblur" :danger="danger" :on-hide="onHide" max-width="550px">
<template #title>
<slot name="title">
<span class="font-extrabold text-contrast text-lg">{{ title }}</span>
@@ -45,7 +45,7 @@
</ButtonStyled>
</div>
</div>
</NewModal>
</Modal>
</template>
<script setup>
@@ -55,7 +55,7 @@ import { computed, ref } from 'vue'
import ButtonStyled from '../base/ButtonStyled.vue'
import StyledInput from '../base/StyledInput.vue'
import NewModal from './NewModal.vue'
import Modal from './Modal.vue'
const props = defineProps({
confirmationText: {
packages/ui/src/components/modal/NewModal.vue → packages/ui/src/components/modal/Modal.vue
View File
packages/ui/src/components/modal/ShareModal.vue
+3 -3
View File
@@ -14,7 +14,7 @@ import { computed, nextTick, ref } from 'vue'
import { injectNotificationManager } from '#ui/providers'
import { ButtonStyled, NewModal, StyledInput } from '../index'
import { ButtonStyled, Modal, StyledInput } from '../index'
const props = defineProps({
header: {
@@ -147,7 +147,7 @@ defineExpose({
</script>
<template>
<NewModal ref="shareModal" :header="header" :noblur="noblur" :on-hide="onHide">
<Modal ref="shareModal" :header="header" :noblur="noblur" :on-hide="onHide">
<div class="flex flex-col items-center gap-2">
<div
:class="['flex items-center justify-center', link ? 'flex-wrap gap-4' : 'flex-col gap-2']"
@@ -280,5 +280,5 @@ defineExpose({
</div>
</div>
</div>
</NewModal>
</Modal>
</template>
packages/ui/src/components/modal/TabbedModal.vue
+4 -4
View File
@@ -6,7 +6,7 @@ import { type Component, computed, nextTick, ref } from 'vue'
import { type MessageDescriptor, useVIntl } from '../../composables/i18n'
import { useScrollIndicator } from '../../composables/scroll-indicator'
import NewModal from './NewModal.vue'
import Modal from './Modal.vue'
export interface Tab {
name: MessageDescriptor
category?: MessageDescriptor
@@ -60,7 +60,7 @@ const {
checkScrollState: checkSidebarScrollState,
} = useScrollIndicator(sidebarScrollContainer)
const modal = ref<InstanceType<typeof NewModal> | null>(null)
const modal = ref<InstanceType<typeof Modal> | null>(null)
function setTab(index: number) {
if (index === selectedTab.value) return
@@ -85,7 +85,7 @@ function startsCategory(index: number) {
defineExpose({ show, hide, selectedTab, setTab })
</script>
<template>
<NewModal
<Modal
ref="modal"
:header="header"
:max-width="maxWidth"
@@ -218,5 +218,5 @@ defineExpose({ show, hide, selectedTab, setTab })
</div>
</div>
</div>
</NewModal>
</Modal>
</template>
packages/ui/src/components/modal/UnknownFileWarningModal.vue
+3 -3
View File
@@ -1,5 +1,5 @@
<template>
<NewModal
<Modal
ref="modal"
:header="formatMessage(messages.header)"
:on-hide="handleHide"
@@ -99,7 +99,7 @@
</ButtonStyled>
</div>
</div>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -112,7 +112,7 @@ import Admonition from '../base/Admonition.vue'
import ButtonStyled from '../base/ButtonStyled.vue'
import Checkbox from '../base/Checkbox.vue'
import Table, { type TableColumn } from '../base/Table.vue'
import NewModal from './NewModal.vue'
import Modal from './Modal.vue'
const props = withDefaults(
defineProps<{
packages/ui/src/components/modal/UploadProgressModal.vue
+4 -4
View File
@@ -1,10 +1,10 @@
<template>
<NewModal ref="modal" :header="formatMessage(messages.header)" :closable="false">
<Modal ref="modal" :header="formatMessage(messages.header)" :closable="false">
<div class="flex flex-col gap-4 md:w-[400px]">
<AppearingProgressBar :max-value="totalBytes" :current-value="uploadedBytes" />
<p class="m-0 text-sm text-secondary">{{ formatMessage(messages.warningText) }}</p>
</div>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -14,7 +14,7 @@ import { ref } from 'vue'
import { AppearingProgressBar } from '#ui/components/base'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import NewModal from './NewModal.vue'
import Modal from './Modal.vue'
const { formatMessage } = useVIntl()
@@ -29,7 +29,7 @@ const messages = defineMessages({
},
})
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
const uploadedBytes = ref(0)
const totalBytes = ref(0)
packages/ui/src/components/modal/index.ts
+1 -1
View File
@@ -1,6 +1,6 @@
export { default as ConfirmLeaveModal } from './ConfirmLeaveModal.vue'
export { default as ConfirmModal } from './ConfirmModal.vue'
export { default as NewModal } from './NewModal.vue'
export { default as Modal } from './Modal.vue'
export type { ServerProject as OpenInAppModalServerProject } from './OpenInAppModal.vue'
export { default as OpenInAppModal } from './OpenInAppModal.vue'
export { default as ShareModal } from './ShareModal.vue'
packages/ui/src/components/project/ProjectSidebarDetails.vue
+3 -3
View File
@@ -1,6 +1,6 @@
<template>
<div class="flex flex-col gap-3">
<NewModal
<Modal
ref="modalLicense"
:header="project.license.name ? project.license.name : formatMessage(messages.licenseTitle)"
>
@@ -11,7 +11,7 @@
</span>
</template>
<div class="markdown-body" v-html="licenseHtml" />
</NewModal>
</Modal>
<h2 class="text-lg m-0">{{ formatMessage(commonMessages.detailsLabel) }}</h2>
<div class="flex flex-col gap-3 [&>div]:flex [&>div]:gap-2 [&>div]:items-center">
<div v-if="!hideLicense">
@@ -104,7 +104,7 @@ import { defineMessages, useVIntl } from '../../composables/i18n'
import { injectModrinthClient } from '../../providers'
import { commonMessages } from '../../utils/common-messages'
import { Avatar, IntlFormatted } from '../base'
import { NewModal } from '../modal'
import { Modal } from '../modal'
const LICENSE_STALE_TIME = 1000 * 60 * 10
packages/ui/src/components/project/settings/environment/ProjectEnvironmentModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal ref="modal" :scrollable="true" max-content-height="82vh" :closable="true">
<Modal ref="modal" :scrollable="true" max-content-height="82vh" :closable="true">
<template #title>
<span class="text-lg font-extrabold text-contrast">Edit project Environment</span>
</template>
@@ -23,7 +23,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -35,7 +35,7 @@ import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { commonMessages } from '../../../../utils/common-messages'
import ButtonStyled from '../../../base/ButtonStyled.vue'
import { NewModal } from '../../../modal'
import { Modal } from '../../../modal'
import EnvironmentMigration from './EnvironmentMigration.vue'
const { formatMessage } = useVIntl()
@@ -47,7 +47,7 @@ const messages = defineMessages({
},
})
const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
const modal = useTemplateRef<InstanceType<typeof Modal>>('modal')
const environmentMigration =
useTemplateRef<InstanceType<typeof EnvironmentMigration>>('environmentMigration')
packages/ui/src/components/servers/access/GrantAccessModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal
<Modal
ref="modal"
:header="formatMessage(messages.header)"
width="min(34rem, calc(100vw - 2rem))"
@@ -140,7 +140,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -155,7 +155,7 @@ import ButtonStyled from '../../base/ButtonStyled.vue'
import Checkbox from '../../base/Checkbox.vue'
import Combobox, { type ComboboxOption } from '../../base/Combobox.vue'
import IntlFormatted from '../../base/IntlFormatted.vue'
import NewModal from '../../modal/NewModal.vue'
import Modal from '../../modal/Modal.vue'
import type {
GrantServerAccessPayload,
ServerAccessInviteSuggestion,
@@ -185,7 +185,7 @@ const emit = defineEmits<{
}>()
const { formatMessage } = useVIntl()
const modal = ref<InstanceType<typeof NewModal> | null>(null)
const modal = ref<InstanceType<typeof Modal> | null>(null)
const target = ref('')
const selectedRole = ref<Exclude<ServerAccessRole, 'owner'>>('editor')
const addAsFriend = ref(true)
packages/ui/src/components/servers/access/RemoveAccessModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal
<Modal
ref="modal"
:header="
formatMessage(modalState.shouldCancel ? messages.cancelHeader : messages.header, {
@@ -79,7 +79,7 @@
</ButtonStyled>
</div>
</div>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -92,7 +92,7 @@ import { commonMessages } from '../../../utils/common-messages'
import Admonition from '../../base/Admonition.vue'
import Avatar from '../../base/Avatar.vue'
import ButtonStyled from '../../base/ButtonStyled.vue'
import NewModal from '../../modal/NewModal.vue'
import Modal from '../../modal/Modal.vue'
import type { ServerAccessRole } from './types'
const props = withDefaults(
@@ -122,7 +122,7 @@ const emit = defineEmits<{
const { formatMessage } = useVIntl()
const formatRelativeTime = useRelativeTime()
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
const cachedState = ref({
username: '',
avatarUrl: undefined as string | undefined,
packages/ui/src/components/servers/backups/BackupCreateModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal ref="modal" header="Create backup" width="500px" @show="focusInput">
<Modal ref="modal" header="Create backup" width="500px" @show="focusInput">
<div class="flex flex-col gap-2 -mb-2">
<label for="backup-name-input">
<span class="text-lg font-semibold text-contrast">Name</span>
@@ -64,7 +64,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -82,7 +82,7 @@ import {
import { commonMessages } from '../../../utils'
import ButtonStyled from '../../base/ButtonStyled.vue'
import StyledInput from '../../base/StyledInput.vue'
import NewModal from '../../modal/NewModal.vue'
import Modal from '../../modal/Modal.vue'
const { addNotification } = injectNotificationManager()
const { formatMessage } = useVIntl()
@@ -111,7 +111,7 @@ const createMutation = useMutation({
onSuccess: () => queryClient.invalidateQueries({ queryKey: backupsQueryKey }),
})
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
const input = ref<HTMLInputElement>()
const isRateLimited = ref(false)
const backupName = ref('')
packages/ui/src/components/servers/backups/BackupDeleteModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal
<Modal
ref="modal"
:header="formatMessage(messages.header, { count })"
fade="danger"
@@ -78,7 +78,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -91,7 +91,7 @@ import { useScrollIndicator } from '../../../composables/scroll-indicator'
import { commonMessages } from '../../../utils'
import Admonition from '../../base/Admonition.vue'
import ButtonStyled from '../../base/ButtonStyled.vue'
import NewModal from '../../modal/NewModal.vue'
import Modal from '../../modal/Modal.vue'
import BackupItem from './BackupItem.vue'
const { formatMessage } = useVIntl()
@@ -136,7 +136,7 @@ const messages = defineMessages({
},
})
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
const backupListRef = ref<HTMLElement | null>(null)
const singleBackup = ref<Archon.BackupsQueue.v1.BackupQueueBackup>()
const bulkBackups = ref<Archon.BackupsQueue.v1.BackupQueueBackup[]>([])
packages/ui/src/components/servers/backups/BackupRenameModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal ref="modal" header="Renaming backup" width="500px" @show="focusInput">
<Modal ref="modal" header="Renaming backup" width="500px" @show="focusInput">
<div class="flex flex-col gap-2">
<label for="backup-name-input">
<span class="text-lg font-semibold text-contrast"> Name </span>
@@ -46,7 +46,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -64,7 +64,7 @@ import {
import { commonMessages } from '../../../utils'
import ButtonStyled from '../../base/ButtonStyled.vue'
import StyledInput from '../../base/StyledInput.vue'
import NewModal from '../../modal/NewModal.vue'
import Modal from '../../modal/Modal.vue'
const { addNotification } = injectNotificationManager()
const { formatMessage } = useVIntl()
@@ -93,7 +93,7 @@ const renameMutation = useMutation({
onSuccess: () => queryClient.invalidateQueries({ queryKey: backupsQueryKey }),
})
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
const input = ref<HTMLInputElement>()
const backupName = ref('')
const originalName = ref('')
packages/ui/src/components/servers/backups/BackupRestoreModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal ref="modal" header="Restore backup" fade="danger" width="500px">
<Modal ref="modal" header="Restore backup" fade="danger" width="500px">
<div class="flex flex-col gap-6">
<Admonition v-if="ctx.isServerRunning.value" type="critical" header="Server is running">
Stop the server before restoring a backup.
@@ -36,7 +36,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -54,7 +54,7 @@ import {
import { commonMessages } from '../../../utils'
import Admonition from '../../base/Admonition.vue'
import ButtonStyled from '../../base/ButtonStyled.vue'
import NewModal from '../../modal/NewModal.vue'
import Modal from '../../modal/Modal.vue'
import BackupItem from './BackupItem.vue'
const { addNotification } = injectNotificationManager()
@@ -87,7 +87,7 @@ const restoreMutation = useMutation({
onSuccess: () => queryClient.invalidateQueries({ queryKey: backupsQueryKey }),
})
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
const currentBackup = ref<Archon.BackupsQueue.v1.BackupQueueBackup | null>(null)
const isRestoring = ref(false)
const restoreDisabled = computed(
packages/ui/src/components/sharing/invite-players-modal/index.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal
<Modal
ref="modal"
:header="header"
width="min(34rem, calc(100vw - 2rem))"
@@ -128,7 +128,7 @@
</div>
</div>
</div>
</NewModal>
</Modal>
<InvitePlayersModalInviteLinkEditor
v-if="updateInviteLink"
@@ -149,7 +149,7 @@ import { injectNotificationManager } from '../../../providers'
import Avatar from '../../base/Avatar.vue'
import ButtonStyled from '../../base/ButtonStyled.vue'
import Combobox from '../../base/Combobox.vue'
import NewModal from '../../modal/NewModal.vue'
import Modal from '../../modal/Modal.vue'
import InvitePlayersModalInviteLinkEditor from './invite-players-modal-invite-link-editor.vue'
import InvitePlayersModalUserRow from './invite-players-modal-user-row.vue'
import type {
@@ -202,7 +202,7 @@ const emit = defineEmits<{
const { formatMessage } = useVIntl()
const notificationManager = injectNotificationManager(null)
const modal = ref<InstanceType<typeof NewModal> | null>(null)
const modal = ref<InstanceType<typeof Modal> | null>(null)
const inviteLinkEditor = ref<InstanceType<typeof InvitePlayersModalInviteLinkEditor> | null>(null)
const messages = defineMessages({
packages/ui/src/components/sharing/invite-players-modal/invite-players-modal-invite-link-editor.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal ref="modal" :header="formatMessage(messages.title)" width="420px" max-width="420px">
<Modal ref="modal" :header="formatMessage(messages.title)" width="420px" max-width="420px">
<div class="flex flex-col gap-6">
<div class="flex flex-col gap-2">
<span class="font-semibold text-contrast">{{ formatMessage(messages.expiryLabel) }}</span>
@@ -88,7 +88,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -102,7 +102,7 @@ import ButtonStyled from '../../base/ButtonStyled.vue'
import Combobox, { type ComboboxOption } from '../../base/Combobox.vue'
import DatePicker from '../../base/DatePicker.vue'
import StyledInput from '../../base/StyledInput.vue'
import NewModal from '../../modal/NewModal.vue'
import Modal from '../../modal/Modal.vue'
import type { InviteLinkSettings } from './types'
const EXPIRY_PRESET_DURATIONS = {
@@ -132,7 +132,7 @@ const props = withDefaults(
)
const { formatMessage } = useVIntl()
const notificationManager = injectNotificationManager(null)
const modal = ref<InstanceType<typeof NewModal> | null>(null)
const modal = ref<InstanceType<typeof Modal> | null>(null)
const expiry = ref('')
const expiryMode = ref<'preset' | 'custom'>('preset')
const expiryPreset = ref<ExpiryPreset>('seven_days')
packages/ui/src/layouts/shared/browse-tab/components/SelectedProjectsLeaveModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal ref="modal" fade="warning" :header="formatMessage(messages.header)" max-width="560px">
<Modal ref="modal" fade="warning" :header="formatMessage(messages.header)" max-width="560px">
<div class="flex flex-col gap-6">
{{ formatMessage(messages.admonitionBody, { count }) }}
</div>
@@ -26,7 +26,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -34,7 +34,7 @@ import { PlusIcon, TrashIcon, XIcon } from '@modrinth/assets'
import { ref } from 'vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import Modal from '#ui/components/modal/Modal.vue'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { commonMessages } from '#ui/utils/common-messages'
@@ -67,7 +67,7 @@ defineProps<{
type SelectedProjectsLeaveResult = 'cancel' | 'discard' | 'install'
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
let resolvePromise: ((value: SelectedProjectsLeaveResult) => void) | null = null
function prompt(): Promise<SelectedProjectsLeaveResult> {
packages/ui/src/layouts/shared/console/layout.vue
+4 -4
View File
@@ -71,7 +71,7 @@
/>
</div>
<ShareModal ref="shareModal" header="Share Logs" link :social-buttons="false" />
<NewModal ref="deleteModal" header="Delete log file" :fade="'danger'" max-width="500px">
<Modal ref="deleteModal" header="Delete log file" :fade="'danger'" max-width="500px">
<div class="flex flex-col gap-6">
<Admonition type="critical" header="This is irreversible">
Deleting this log file cannot be undone. Are you sure you want to continue?
@@ -93,7 +93,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -108,7 +108,7 @@ import type { CollapsibleAdmonitionItem } from '#ui/components/base/CollapsibleA
import CollapsibleAdmonition from '#ui/components/base/CollapsibleAdmonition.vue'
import Combobox from '#ui/components/base/Combobox.vue'
import StyledInput from '#ui/components/base/StyledInput.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import Modal from '#ui/components/modal/Modal.vue'
import ShareModal from '#ui/components/modal/ShareModal.vue'
import { injectModrinthClient } from '#ui/providers'
import { injectModalBehavior } from '#ui/providers/modal-behavior'
@@ -151,7 +151,7 @@ const crashItems = computed<CollapsibleAdmonitionItem[]>(() => {
const terminalRef = ref<InstanceType<typeof BaseTerminal> | null>(null)
const shareModal = ref<InstanceType<typeof ShareModal> | null>(null)
const deleteModal = ref<InstanceType<typeof NewModal> | null>(null)
const deleteModal = ref<InstanceType<typeof Modal> | null>(null)
const isDeleting = ref(false)
const searchQuery = ref('')
const isFullscreen = ref(false)
packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal
<Modal
ref="modal"
:header="formatMessage(messages.header)"
fade="warning"
@@ -40,7 +40,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -49,7 +49,7 @@ import { nextTick, ref } from 'vue'
import Admonition from '#ui/components/base/Admonition.vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import Modal from '#ui/components/modal/Modal.vue'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { commonMessages } from '#ui/utils/common-messages'
@@ -94,7 +94,7 @@ const emit = defineEmits<{
(e: 'update'): void
}>()
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
const backupCreator = ref<InstanceType<typeof InlineBackupCreator>>()
const buttonsDisabled = ref(false)
const visibleCount = ref(props.count)
packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal
<Modal
ref="modal"
:header="
formatMessage(messages.header, {
@@ -41,7 +41,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -50,7 +50,7 @@ import { computed, nextTick, ref } from 'vue'
import Admonition from '#ui/components/base/Admonition.vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import Modal from '#ui/components/modal/Modal.vue'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { commonMessages, formatContentTypeSentence } from '#ui/utils/common-messages'
@@ -102,7 +102,7 @@ const emit = defineEmits<{
(e: 'delete'): void
}>()
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
const backupCreator = ref<InstanceType<typeof InlineBackupCreator>>()
const buttonsDisabled = ref(false)
const visibleCount = ref(props.count)
packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDisableModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal
<Modal
ref="modal"
:header="
formatMessage(messages.header, {
@@ -35,7 +35,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -44,7 +44,7 @@ import { nextTick, ref } from 'vue'
import Admonition from '#ui/components/base/Admonition.vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import Modal from '#ui/components/modal/Modal.vue'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { commonMessages, formatContentTypeSentence } from '#ui/utils/common-messages'
@@ -78,7 +78,7 @@ const emit = defineEmits<{
(e: 'disable'): void
}>()
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
const visibleCount = ref(props.count)
const visibleItemType = ref(props.itemType)
const visibleWarning = ref(props.warning)
packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal
<Modal
ref="modal"
:header="formatMessage(messages.header, { action: downgrade ? 'downgrade' : 'update' })"
fade="warning"
@@ -51,7 +51,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -60,7 +60,7 @@ import { computed, ref } from 'vue'
import Admonition from '#ui/components/base/Admonition.vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import Modal from '#ui/components/modal/Modal.vue'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { commonMessages } from '#ui/utils/common-messages'
@@ -107,7 +107,7 @@ const emit = defineEmits<{
(e: 'confirm' | 'cancel'): void
}>()
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
const backupCreator = ref<InstanceType<typeof InlineBackupCreator>>()
const buttonsDisabled = ref(false)
packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmReinstallModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal
<Modal
ref="modal"
:header="formatMessage(messages.header)"
fade="danger"
@@ -33,7 +33,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -42,7 +42,7 @@ import { ref } from 'vue'
import Admonition from '#ui/components/base/Admonition.vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import Modal from '#ui/components/modal/Modal.vue'
import { useDebugLogger } from '#ui/composables/debug-logger'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { commonMessages } from '#ui/utils/common-messages'
@@ -81,7 +81,7 @@ const emit = defineEmits<{
(e: 'reinstall'): void
}>()
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
const backupCreator = ref<InstanceType<typeof InlineBackupCreator>>()
const buttonsDisabled = ref(false)
packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmRepairModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal
<Modal
ref="modal"
:header="
formatMessage(messages.header, {
@@ -28,7 +28,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -36,7 +36,7 @@ import { HammerIcon, XIcon } from '@modrinth/assets'
import { ref } from 'vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import Modal from '#ui/components/modal/Modal.vue'
import { useDebugLogger } from '#ui/composables/debug-logger'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { commonMessages } from '#ui/utils/common-messages'
@@ -81,7 +81,7 @@ const emit = defineEmits<{
(e: 'repair'): void
}>()
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
function show() {
debug('show: called', { hasModalRef: !!modal.value })
packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmUnlinkModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal
<Modal
ref="modal"
:header="props.header ?? formatMessage(messages.header)"
fade="warning"
@@ -37,7 +37,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -46,7 +46,7 @@ import { computed, ref } from 'vue'
import Admonition from '#ui/components/base/Admonition.vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import Modal from '#ui/components/modal/Modal.vue'
import { useDebugLogger } from '#ui/composables/debug-logger'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { commonMessages } from '#ui/utils/common-messages'
@@ -89,7 +89,7 @@ const emit = defineEmits<{
(e: 'unlink'): void
}>()
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
const backupCreator = ref<InstanceType<typeof InlineBackupCreator>>()
const buttonsDisabled = ref(false)
const admonitionHeader = computed(() => {
packages/ui/src/layouts/shared/content-tab/components/modals/ContentDependencyWarningModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal
<Modal
ref="modal"
:header="formatMessage(messages.header)"
fade="danger"
@@ -186,7 +186,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -196,7 +196,7 @@ import { computed, nextTick, ref } from 'vue'
import Admonition from '#ui/components/base/Admonition.vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import Checkbox from '#ui/components/base/Checkbox.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import Modal from '#ui/components/modal/Modal.vue'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { useScrollIndicator } from '#ui/composables/scroll-indicator'
import { commonMessages, formatContentTypeSentence } from '#ui/utils/common-messages'
@@ -297,7 +297,7 @@ const messages = defineMessages({
},
})
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
const backupCreator = ref<InstanceType<typeof InlineBackupCreator>>()
const deletingListRef = ref<HTMLElement | null>(null)
const dependentListRef = ref<HTMLElement | null>(null)
packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal ref="modal" no-padding scrollable max-width="560px" width="560px" :on-hide="handleHide">
<Modal ref="modal" no-padding scrollable max-width="560px" width="560px" :on-hide="handleHide">
<template #title>
<span class="text-2xl font-semibold text-contrast">
{{ formatMessage(messages.header) }}
@@ -241,7 +241,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -265,7 +265,7 @@ import Chips from '#ui/components/base/Chips.vue'
import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
import LoadingIndicator from '#ui/components/base/LoadingIndicator.vue'
import StyledInput from '#ui/components/base/StyledInput.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import Modal from '#ui/components/modal/Modal.vue'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { injectFilePicker } from '#ui/providers'
import { commonMessages } from '#ui/utils/common-messages'
@@ -391,7 +391,7 @@ const emit = defineEmits<{
cancel: []
}>()
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
type Tab = 'existing' | 'new'
const tabs = computed<Tab[]>(() =>
packages/ui/src/layouts/shared/content-tab/components/modals/ModpackContentModal.vue
+4 -4
View File
@@ -18,7 +18,7 @@ import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import Checkbox from '#ui/components/base/Checkbox.vue'
import type { Option as OverflowMenuOption } from '#ui/components/base/OverflowMenu.vue'
import StyledInput from '#ui/components/base/StyledInput.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import Modal from '#ui/components/modal/Modal.vue'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { injectPageContext } from '#ui/providers/page-context'
import {
@@ -111,7 +111,7 @@ export interface ModpackContentModalState {
scrollTop: number
}
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
const scrollContainer = ref<HTMLElement | null>(null)
const isOpen = ref(false)
const items = ref<ContentItem[]>([])
@@ -456,7 +456,7 @@ defineExpose({ show, showLoading, hide, getState, restore, updateItem, setItems
</script>
<template>
<NewModal
<Modal
ref="modal"
:max-width="'min(928px, calc(95vw - 10rem))'"
:width="'min(928px, calc(95vw - 10rem))'"
@@ -667,5 +667,5 @@ defineExpose({ show, showLoading, hide, getState, restore, updateItem, setItems
@enable="bulkEnable"
@disable="bulkDisable"
/>
</NewModal>
</Modal>
</template>
packages/ui/src/layouts/shared/content-tab/components/modals/content-updater-modal/index.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal
<Modal
ref="modal"
:max-width="'min(928px, calc(95vw - 10rem))'"
:width="'min(928px, calc(95vw - 10rem))'"
@@ -253,7 +253,7 @@
</ButtonStyled>
</div>
</div>
</NewModal>
</Modal>
<ConfirmModal
ref="incompatibleUpdateModal"
@@ -297,7 +297,7 @@ import Avatar from '#ui/components/base/Avatar.vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import StyledInput from '#ui/components/base/StyledInput.vue'
import ConfirmModal from '#ui/components/modal/ConfirmModal.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import Modal from '#ui/components/modal/Modal.vue'
import VersionChannelIndicator from '#ui/components/version/VersionChannelIndicator.vue'
import { useDebugLogger } from '#ui/composables/debug-logger'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
@@ -478,7 +478,7 @@ const emit = defineEmits<{
versionHover: [version: Labrinth.Versions.v2.Version]
}>()
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
const incompatibleUpdateModal = ref<InstanceType<typeof ConfirmModal>>()
const searchQuery = ref('')
const hideIncompatibleState = ref(true)
packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal
<Modal
ref="modal"
:header="
formatMessage(messages.header, {
@@ -46,7 +46,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -55,7 +55,7 @@ import { computed, nextTick, ref } from 'vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import StyledInput from '#ui/components/base/StyledInput.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import Modal from '#ui/components/modal/Modal.vue'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { commonMessages, formatFileItemType } from '#ui/utils/common-messages'
@@ -90,7 +90,7 @@ const emit = defineEmits<{
create: [name: string]
}>()
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
const createInput = ref<HTMLInputElement | null>(null)
const itemName = ref('')
const submitted = ref(false)
packages/ui/src/layouts/shared/files-tab/components/modals/FileDeleteItemModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal ref="modal" fade="danger" :header="formatMessage(messages.header)" max-width="500px">
<Modal ref="modal" fade="danger" :header="formatMessage(messages.header)" max-width="500px">
<Admonition type="critical" class="md:min-w-[400px]">
<template #header>{{ formatMessage(messages.deletingName, { name: item?.name }) }}</template>
{{
@@ -24,7 +24,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -33,7 +33,7 @@ import { ref } from 'vue'
import Admonition from '#ui/components/base/Admonition.vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import Modal from '#ui/components/modal/Modal.vue'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { commonMessages } from '#ui/utils/common-messages'
@@ -69,7 +69,7 @@ const emit = defineEmits<{
delete: []
}>()
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
const handleSubmit = () => {
emit('delete')
packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal
<Modal
ref="modal"
:header="
formatMessage(messages.header, {
@@ -43,7 +43,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -52,7 +52,7 @@ import { nextTick, ref } from 'vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import StyledInput from '#ui/components/base/StyledInput.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import Modal from '#ui/components/modal/Modal.vue'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { commonMessages, formatFileItemType } from '#ui/utils/common-messages'
@@ -90,7 +90,7 @@ const emit = defineEmits<{
move: [destination: string]
}>()
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
const destination = ref('')
const handleSubmit = () => {
packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal
<Modal
ref="modal"
:header="formatMessage(messages.header, { name: item?.name })"
max-width="500px"
@@ -27,7 +27,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -36,7 +36,7 @@ import { computed, nextTick, ref } from 'vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import StyledInput from '#ui/components/base/StyledInput.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import Modal from '#ui/components/modal/Modal.vue'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { commonMessages } from '#ui/utils/common-messages'
@@ -64,7 +64,7 @@ const emit = defineEmits<{
rename: [newName: string]
}>()
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
const renameInput = ref<HTMLInputElement | null>(null)
const itemName = ref('')
const submitted = ref(false)
packages/ui/src/layouts/shared/files-tab/components/modals/FileUnsavedChangesModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal ref="modal" fade="warning" :header="formatMessage(messages.header)" max-width="500px">
<Modal ref="modal" fade="warning" :header="formatMessage(messages.header)" max-width="500px">
<p class="m-0 text-secondary">
{{ formatMessage(messages.body) }}
</p>
@@ -25,7 +25,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -33,7 +33,7 @@ import { SaveIcon, TrashIcon, XIcon } from '@modrinth/assets'
import { ref } from 'vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import Modal from '#ui/components/modal/Modal.vue'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { commonMessages } from '#ui/utils/common-messages'
@@ -57,7 +57,7 @@ const messages = defineMessages({
export type UnsavedChangesResult = 'cancel' | 'discard' | 'save'
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
let resolvePromise: ((value: UnsavedChangesResult) => void) | null = null
function prompt(): Promise<UnsavedChangesResult> {
packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadConflictModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal ref="modal" :header="formatMessage(messages.header)" :closable="true" no-padding>
<Modal ref="modal" :header="formatMessage(messages.header)" :closable="true" no-padding>
<div class="max-w-[500px]">
<div class="flex flex-col gap-4 p-4">
<Admonition type="warning" :header="formatMessage(messages.warningHeader)">
@@ -70,7 +70,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -80,7 +80,7 @@ import { computed, ref } from 'vue'
import Admonition from '#ui/components/base/Admonition.vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import IntlFormatted from '#ui/components/base/IntlFormatted.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import Modal from '#ui/components/modal/Modal.vue'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { commonMessages } from '#ui/utils/common-messages'
@@ -126,7 +126,7 @@ const emit = defineEmits<{
proceed: [path: string]
}>()
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
const hasMany = computed(() => files.value.length > 100)
packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal
<Modal
ref="modal"
:header="cf ? formatMessage(messages.cfHeader) : formatMessage(messages.zipHeader)"
>
@@ -91,7 +91,7 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -107,7 +107,7 @@ import { computed, nextTick, ref } from 'vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import StyledInput from '#ui/components/base/StyledInput.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import Modal from '#ui/components/modal/Modal.vue'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { injectModrinthClient } from '#ui/providers/api-client'
import { injectNotificationManager } from '#ui/providers/web-notifications'
@@ -229,7 +229,7 @@ const steps = [
const cf = ref(false)
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
const url = ref('')
const submitted = ref(false)
const touched = ref(false)
packages/ui/src/layouts/shared/installation-settings/components/ContentDiffModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal
<Modal
ref="modal"
:header="header"
:closable="true"
@@ -189,7 +189,7 @@
</div>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -206,7 +206,7 @@ import { type Component, computed, ref } from 'vue'
import Admonition from '#ui/components/base/Admonition.vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import Modal from '#ui/components/modal/Modal.vue'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { commonMessages } from '#ui/utils/common-messages'
@@ -240,7 +240,7 @@ const emit = defineEmits<{
const { formatMessage } = useVIntl()
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
const backupCreator = ref<InstanceType<typeof InlineBackupCreator>>()
const buttonsDisabled = ref(false)
const closingFromAction = ref(false)
packages/ui/src/layouts/shared/installation-settings/components/IncompatibleContentModal.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<template>
<NewModal ref="modal" :header="formatMessage(messages.header)" :closable="!loading" no-padding>
<Modal ref="modal" :header="formatMessage(messages.header)" :closable="!loading" no-padding>
<div class="flex max-w-[500px] flex-col gap-6 p-6">
<Admonition
:type="variant === 'loader-change' ? 'critical' : 'warning'"
@@ -79,7 +79,7 @@
</template>
</div>
</template>
</NewModal>
</Modal>
</template>
<script setup lang="ts">
@@ -95,7 +95,7 @@ import { ref } from 'vue'
import Admonition from '#ui/components/base/Admonition.vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import Modal from '#ui/components/modal/Modal.vue'
import { defineMessages, useVIntl } from '#ui/composables/i18n'
import { commonMessages } from '#ui/utils/common-messages'
@@ -116,7 +116,7 @@ const emit = defineEmits<{
const { formatMessage } = useVIntl()
const modal = ref<InstanceType<typeof NewModal>>()
const modal = ref<InstanceType<typeof Modal>>()
const buttonsDisabled = ref(false)
const loadingAction = ref<'auto-fix' | 'disable-conflicts' | null>(null)
packages/ui/src/layouts/shared/server-settings/pages/network.vue
+4 -4
View File
@@ -2,7 +2,7 @@
<div>
<Teleport to="body">
<div class="relative z-[100]">
<NewModal ref="editAllocationModal" header="Edit allocation" width="550px">
<Modal ref="editAllocationModal" header="Edit allocation" width="550px">
<form class="flex w-full flex-col gap-2" @submit.prevent="editAllocation">
<label for="edit-allocation-name" class="font-semibold text-contrast"> Name </label>
<StyledInput
@@ -30,7 +30,7 @@
</ButtonStyled>
</div>
</form>
</NewModal>
</Modal>
<ConfirmModal
ref="confirmDeleteModal"
@@ -223,7 +223,7 @@ import {
import { useQuery, useQueryClient } from '@tanstack/vue-query'
import { computed, nextTick, ref } from 'vue'
import { ButtonStyled, ConfirmModal, NewModal, StyledInput, Table, TagItem } from '#ui/components'
import { ButtonStyled, ConfirmModal, Modal, StyledInput, Table, TagItem } from '#ui/components'
import type { TableColumn } from '#ui/components/base'
import { useServerPermissions } from '#ui/composables/server-permissions'
import {
@@ -281,7 +281,7 @@ const dnsColumns: TableColumn[] = [
{ key: 'content', label: 'Content' },
]
const editAllocationModal = ref<typeof NewModal>()
const editAllocationModal = ref<typeof Modal>()
const confirmDeleteModal = ref<typeof ConfirmModal>()
const editAllocationInput = ref<HTMLInputElement | null>(null)
const createAllocationName = ref('')
packages/ui/src/layouts/shared/user-profile/layout.vue
+7 -7
View File
@@ -1,6 +1,6 @@
<template>
<template v-if="user">
<NewModal
<Modal
ref="blockUserModal"
:header="formatMessage(messages.blockUserTitle, { username: user.username })"
:closable="!isBlockingUser"
@@ -28,9 +28,9 @@
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
<NewModal
<Modal
v-if="variant === 'web'"
ref="editRoleModal"
:header="formatMessage(messages.editRoleButton)"
@@ -66,9 +66,9 @@
</ButtonStyled>
</div>
</div>
</NewModal>
</Modal>
<NewModal
<Modal
v-if="variant === 'web' && isStaffViewing"
ref="userDetailsModal"
:header="formatMessage(messages.userDetailsTitle)"
@@ -164,7 +164,7 @@
</span>
</div>
</div>
</NewModal>
</Modal>
<NormalPage :sidebar="sidebarPosition">
<template #header>
@@ -453,7 +453,7 @@ import EmptyState from '#ui/components/base/EmptyState.vue'
import IntlFormatted from '#ui/components/base/IntlFormatted.vue'
import NavTabs from '#ui/components/base/NavTabs.vue'
import SmartClickable from '#ui/components/base/SmartClickable.vue'
import NewModal from '#ui/components/modal/NewModal.vue'
import Modal from '#ui/components/modal/Modal.vue'
import NormalPage from '#ui/components/page/NormalPage.vue'
import ProjectCard from '#ui/components/project/card/ProjectCard.vue'
import ProjectCardList from '#ui/components/project/ProjectCardList.vue'
packages/ui/src/stories/add-stories.md
+4 -4
View File
@@ -153,9 +153,9 @@ For components that need user interaction to show:
```typescript
export const Default: Story = {
render: () => ({
components: { NewModal, ButtonStyled },
components: { Modal, ButtonStyled },
setup() {
const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
const modalRef = ref<InstanceType<typeof Modal> | null>(null)
return { modalRef }
},
template: /* html */ `
@@ -163,9 +163,9 @@ export const Default: Story = {
<ButtonStyled @click="modalRef?.show()">
<button>Open Modal</button>
</ButtonStyled>
<NewModal ref="modalRef" header="Example Modal">
<Modal ref="modalRef" header="Example Modal">
<p>Modal content</p>
</NewModal>
</Modal>
</div>
`,
}),
packages/ui/src/stories/instances/ContentModpackCard.stories.ts
+5 -5
View File
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
import { fn } from 'storybook/test'
import { ref } from 'vue'
import NewModal from '../../components/modal/NewModal.vue'
import Modal from '../../components/modal/Modal.vue'
import ContentCardItem from '../../layouts/shared/content-tab/components/ContentCardItem.vue'
import ContentModpackCard from '../../layouts/shared/content-tab/components/ContentModpackCard.vue'
import type {
@@ -470,9 +470,9 @@ export const WithContentModal: Story = {
project: cobblemonProject,
},
render: () => ({
components: { ContentModpackCard, NewModal, ContentCardItem },
components: { ContentModpackCard, Modal, ContentCardItem },
setup() {
const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
const modalRef = ref<InstanceType<typeof Modal> | null>(null)
const modpackContent = [
{
project: {
@@ -524,7 +524,7 @@ export const WithContentModal: Story = {
@content="modalRef?.show()"
@update="() => alert('Update clicked')"
/>
<NewModal ref="modalRef" header="Modpack Content">
<Modal ref="modalRef" header="Modpack Content">
<div class="flex flex-col gap-4">
<ContentCardItem
v-for="item in modpackContent"
@@ -533,7 +533,7 @@ export const WithContentModal: Story = {
:version="item.version"
/>
</div>
</NewModal>
</Modal>
</div>
`,
}),
packages/ui/src/stories/modal/NewModal.stories.ts → packages/ui/src/stories/modal/Modal.stories.ts
+36 -36
View File
@@ -2,21 +2,21 @@ import type { StoryObj } from '@storybook/vue3-vite'
import { ref } from 'vue'
import ButtonStyled from '../../components/base/ButtonStyled.vue'
import NewModal from '../../components/modal/NewModal.vue'
import Modal from '../../components/modal/Modal.vue'
const meta = {
title: 'Modal/NewModal',
component: NewModal,
title: 'Modal/Modal',
component: Modal,
}
export default meta
type Story = StoryObj<typeof NewModal>
type Story = StoryObj<typeof Modal>
export const Default: Story = {
render: () => ({
components: { NewModal, ButtonStyled },
components: { Modal, ButtonStyled },
setup() {
const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
const modalRef = ref<InstanceType<typeof Modal> | null>(null)
const openModal = () => modalRef.value?.show()
return { modalRef, openModal }
},
@@ -25,10 +25,10 @@ export const Default: Story = {
<ButtonStyled color="brand">
<button @click="openModal">Open Modal</button>
</ButtonStyled>
<NewModal ref="modalRef" header="Example Modal">
<Modal ref="modalRef" header="Example Modal">
<p>This is the modal content.</p>
<p class="text-secondary mt-2">You can put any content here.</p>
</NewModal>
</Modal>
</div>
`,
}),
@@ -36,9 +36,9 @@ export const Default: Story = {
export const WithActions: Story = {
render: () => ({
components: { NewModal, ButtonStyled },
components: { Modal, ButtonStyled },
setup() {
const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
const modalRef = ref<InstanceType<typeof Modal> | null>(null)
const openModal = () => modalRef.value?.show()
return { modalRef, openModal }
},
@@ -47,7 +47,7 @@ export const WithActions: Story = {
<ButtonStyled color="brand">
<button @click="openModal">Open Modal with Actions</button>
</ButtonStyled>
<NewModal ref="modalRef" header="Confirm Action">
<Modal ref="modalRef" header="Confirm Action">
<p>Are you sure you want to proceed with this action?</p>
<template #actions>
<div class="flex gap-2 justify-end">
@@ -59,7 +59,7 @@ export const WithActions: Story = {
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</div>
`,
}),
@@ -67,9 +67,9 @@ export const WithActions: Story = {
export const DangerFade: Story = {
render: () => ({
components: { NewModal, ButtonStyled },
components: { Modal, ButtonStyled },
setup() {
const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
const modalRef = ref<InstanceType<typeof Modal> | null>(null)
const openModal = () => modalRef.value?.show()
return { modalRef, openModal }
},
@@ -78,7 +78,7 @@ export const DangerFade: Story = {
<ButtonStyled color="red">
<button @click="openModal">Open Danger Modal</button>
</ButtonStyled>
<NewModal ref="modalRef" header="Delete Item" fade="danger">
<Modal ref="modalRef" header="Delete Item" fade="danger">
<p>Are you sure you want to delete this item? This action cannot be undone.</p>
<template #actions>
<div class="flex gap-2 justify-end">
@@ -90,7 +90,7 @@ export const DangerFade: Story = {
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</div>
`,
}),
@@ -98,9 +98,9 @@ export const DangerFade: Story = {
export const WarningFade: Story = {
render: () => ({
components: { NewModal, ButtonStyled },
components: { Modal, ButtonStyled },
setup() {
const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
const modalRef = ref<InstanceType<typeof Modal> | null>(null)
const openModal = () => modalRef.value?.show()
return { modalRef, openModal }
},
@@ -109,7 +109,7 @@ export const WarningFade: Story = {
<ButtonStyled color="orange">
<button @click="openModal">Open Warning Modal</button>
</ButtonStyled>
<NewModal ref="modalRef" header="Warning" fade="warning">
<Modal ref="modalRef" header="Warning" fade="warning">
<p>This action may have unintended consequences. Please review before proceeding.</p>
<template #actions>
<div class="flex gap-2 justify-end">
@@ -121,7 +121,7 @@ export const WarningFade: Story = {
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</div>
`,
}),
@@ -129,9 +129,9 @@ export const WarningFade: Story = {
export const Scrollable: Story = {
render: () => ({
components: { NewModal, ButtonStyled },
components: { Modal, ButtonStyled },
setup() {
const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
const modalRef = ref<InstanceType<typeof Modal> | null>(null)
const openModal = () => modalRef.value?.show()
return { modalRef, openModal }
},
@@ -140,7 +140,7 @@ export const Scrollable: Story = {
<ButtonStyled color="brand">
<button @click="openModal">Open Scrollable Modal</button>
</ButtonStyled>
<NewModal ref="modalRef" header="Scrollable Content" scrollable max-content-height="300px">
<Modal ref="modalRef" header="Scrollable Content" scrollable max-content-height="300px">
<div class="space-y-4">
<p v-for="i in 20" :key="i">
This is paragraph {{ i }} of scrollable content. The modal will show fade indicators when scrolled.
@@ -153,7 +153,7 @@ export const Scrollable: Story = {
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</div>
`,
}),
@@ -161,9 +161,9 @@ export const Scrollable: Story = {
export const MergedHeader: Story = {
render: () => ({
components: { NewModal, ButtonStyled },
components: { Modal, ButtonStyled },
setup() {
const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
const modalRef = ref<InstanceType<typeof Modal> | null>(null)
const openModal = () => modalRef.value?.show()
return { modalRef, openModal }
},
@@ -172,12 +172,12 @@ export const MergedHeader: Story = {
<ButtonStyled color="brand">
<button @click="openModal">Open Modal (Merged Header)</button>
</ButtonStyled>
<NewModal ref="modalRef" hide-header merge-header>
<Modal ref="modalRef" hide-header merge-header>
<div class="text-center py-8">
<h2 class="text-xl font-bold mb-4">Custom Header Area</h2>
<p>This modal has the header merged with content and only shows a close button.</p>
</div>
</NewModal>
</Modal>
</div>
`,
}),
@@ -185,9 +185,9 @@ export const MergedHeader: Story = {
export const NotClosable: Story = {
render: () => ({
components: { NewModal, ButtonStyled },
components: { Modal, ButtonStyled },
setup() {
const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
const modalRef = ref<InstanceType<typeof Modal> | null>(null)
const openModal = () => modalRef.value?.show()
return { modalRef, openModal }
},
@@ -196,7 +196,7 @@ export const NotClosable: Story = {
<ButtonStyled color="brand">
<button @click="openModal">Open Non-Closable Modal</button>
</ButtonStyled>
<NewModal ref="modalRef" header="Processing..." :closable="false" :close-on-esc="false" :close-on-click-outside="false">
<Modal ref="modalRef" header="Processing..." :closable="false" :close-on-esc="false" :close-on-click-outside="false">
<p>This modal cannot be closed by clicking outside or pressing escape.</p>
<p class="text-secondary mt-2">Only the action button can close it.</p>
<template #actions>
@@ -206,7 +206,7 @@ export const NotClosable: Story = {
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</div>
`,
}),
@@ -214,9 +214,9 @@ export const NotClosable: Story = {
export const NoPadding: Story = {
render: () => ({
components: { NewModal, ButtonStyled },
components: { Modal, ButtonStyled },
setup() {
const modalRef = ref<InstanceType<typeof NewModal> | null>(null)
const modalRef = ref<InstanceType<typeof Modal> | null>(null)
const openModal = () => modalRef.value?.show()
return { modalRef, openModal }
},
@@ -225,7 +225,7 @@ export const NoPadding: Story = {
<ButtonStyled color="brand">
<button @click="openModal">Open Modal (No Padding)</button>
</ButtonStyled>
<NewModal ref="modalRef" header="No Padding Modal" no-padding>
<Modal ref="modalRef" header="No Padding Modal" no-padding>
<p>This modal has no default padding on the content area.</p>
<template #actions>
<div class="flex gap-2 justify-end p-6 pt-0">
@@ -234,7 +234,7 @@ export const NoPadding: Story = {
</ButtonStyled>
</div>
</template>
</NewModal>
</Modal>
</div>
`,
}),