pages._explore-components-structural-modal.title

pages._explore.sections.basic-usage.title

html

<div>
    <BaseButton 
        text="Open Modal" 
        :color="BaseButtonColors.PRIMARY"
        @triggered="fnToggleUIActivityState('basic-modal')"
    />

    <Modal 
        item-key="basic-modal"
    >
        <div class="p-6">
            <Text 
                text="Basic Modal" 
                :size="TextSizes.LG" 
                :weight="TextWeights.BOLD" 
                class="mb-4" 
            />
            <Text 
                text="This is a basic modal with some content." 
                class="mb-4" 
            />
        </div>
    </Modal>
</div>

typescript

<script setup lang="ts">
import { BaseButtonColors } from '#core-types/components/base/base-button'
import { TextSizes, TextWeights } from '#core-types/components/presentational/text'

const { fnToggleUIActivityState } = useUIState()
</script>

pages._explore.sections.complex-usage.title

html

<div class="space-y-4">
    <div class="flex gap-2 flex-wrap">
        <BaseButton 
            text="Confirmation Modal" 
            :color="BaseButtonColors.PRIMARY"
            @triggered="fnToggleUIActivityState('confirm-modal')"
        />
        <BaseButton 
            text="Form Modal" 
            :color="BaseButtonColors.PRIMARY"
            @triggered="fnToggleUIActivityState('form-modal')"
        />
        <BaseButton 
            text="Large Content Modal" 
            :color="BaseButtonColors.PRIMARY"
            @triggered="fnToggleUIActivityState('content-modal')"
        />
    </div>

    <!-- Confirmation Modal -->
    <Modal 
        item-key="confirm-modal"
        content-size-classes="w-96"
        :content-position="BaseOverlayContentPositionOptions.CENTER"
    >
        <div class="p-6">
            <div class="flex items-center mb-4">
                <Icon 
                    name="solar:danger-circle-bold" 
                    :color="IconColors.WARNING" 
                    :size="IconSizes.LG" 
                    class="mr-3" 
                />
                <Text 
                    text="Confirm Action" 
                    :size="TextSizes.LG" 
                    :weight="TextWeights.BOLD" 
                />
            </div>
            <Text 
                text="Are you sure you want to delete this item? This action cannot be undone." 
                class="mb-6" 
            />
            <div class="flex gap-2 justify-end">
                <BaseButton 
                    text="Cancel" 
                    :color="BaseButtonColors.SURFACE_RAISED"
                    @triggered="fnToggleUIActivityState('confirm-modal')"
                />
                <BaseButton 
                    text="Delete" 
                    :color="BaseButtonColors.ERROR"
                />
            </div>
        </div>
    </Modal>

    <!-- Form Modal -->
    <Modal 
        item-key="form-modal"
        content-size-classes="w-full max-w-md"
    >
        <div class="p-6">
            <Text 
                text="User Information" 
                :size="TextSizes.LG" 
                :weight="TextWeights.BOLD" 
                class="mb-6" 
            />
            <div class="space-y-4">
                <Input 
                    v-model="userForm.name" 
                    label="Name" 
                    placeholder="Enter your name" 
                />
                <Input 
                    v-model="userForm.email" 
                    label="Email" 
                    placeholder="Enter your email" 
                    type="email" 
                />
                <Textarea 
                    v-model="userForm.bio" 
                    label="Bio" 
                    placeholder="Tell us about yourself..." 
                />
                <div class="space-y-2">
                    <Text text="Preferences:" :weight="TextWeights.MEDIUM" />
                    <div class="flex items-center gap-4">
                        <Toggle v-model="userForm.newsletter" />
                        <Text text="Subscribe to newsletter" />
                    </div>
                </div>
            </div>
            <div class="flex gap-2 justify-end mt-6">
                <BaseButton 
                    text="Cancel" 
                    :color="BaseButtonColors.SURFACE_RAISED"
                    @triggered="fnToggleUIActivityState('form-modal')"
                />
                <BaseButton 
                    text="Save" 
                    :color="BaseButtonColors.SUCCESS"
                />
            </div>
        </div>
    </Modal>

    <!-- Large Content Modal -->
    <Modal 
        item-key="content-modal"
        content-size-classes="w-full max-w-4xl h-3/4"
    >
        <div class="h-full flex flex-col">
            <div class="p-6 border-b">
                <div class="flex items-center justify-between">
                    <Text 
                        text="Documentation" 
                        :size="TextSizes.LG" 
                        :weight="TextWeights.BOLD" 
                    />
                    <BaseButton 
                        text="Close" 
                        :color="BaseButtonColors.SURFACE_RAISED"
                        @triggered="fnToggleUIActivityState('content-modal')"
                    />
                </div>
            </div>
            <Content :scrollbar="true" class="flex-1">
                <div class="p-6 space-y-6">
                    <div v-for="section in documentationSections" :key="section.id">
                        <Text 
                            :text="section.title" 
                            :size="TextSizes.LG" 
                            :weight="TextWeights.BOLD" 
                            class="mb-3" 
                        />
                        <Text 
                            :text="section.content" 
                            class="mb-4" 
                        />
                    </div>
                </div>
            </Content>
        </div>
    </Modal>
</div>

typescript

<script setup lang="ts">
import { BaseButtonColors } from '#core-types/components/base/base-button'
import { BaseOverlayContentPositionOptions } from '#core-types/components/base/base-overlay'
import { IconColors, IconSizes } from '#core-types/components/media/icon'
import { TextSizes, TextWeights } from '#core-types/components/presentational/text'

const { stConfirmModalOpen, stFormModalOpen, stContentModalOpen } = useModalState()

const userForm = ref({
    name: '',
    email: '',
    bio: '',
    newsletter: false
})

const documentationSections = ref([
    {
        id: 1,
        title: 'Getting Started',
        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
    },
    {
        id: 2,
        title: 'Advanced Usage',
        content: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
    },
    {
        id: 3,
        title: 'Best Practices',
        content: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
    }
])
</script>

pages._explore.sections.props.title

Prop	Default	Type
itemKey	""	string
backdropClasses	defaultBaseOverlayProps.backdropClasses	string
contentPosition	BaseOverlayContentPositionOptions.CENTER	BaseOverlayContentPositionOptions
contentClasses	"transition-all duration-400..."	string
contentSizeClasses	"size-50%"	string
toggleEffect	BaseOverlayToggleEffects.FADE	BaseOverlayToggleEffects

pages._explore.sections.types.title

Name	Type	Options
ModalProps	interface	Main props interface for Modal component
BaseOverlayContentPositionOptions	enum	Position options for modal content
BaseOverlayToggleEffects	enum	Animation effects for modal transitions

pages._explore.sections.slots.title

Slot	Type
default	Modal content to be displayed