Modals allow any type of property

[blessedbythestorm]

Describe what feature you'd like. Pseudo-code, mockups, or screenshots of similar solutions are encouraged!

I want to be able to pass any property to a modal component that has exported properties.

At the moment I have to stringify data and I'm unable to pass functions into the component.

Currently:

const detailsModal: ModalComponent = {
        ref: modal,
        props: {
            data: JSON.stringify(inData),
        },
        slot: '<p>Skeleton</p>'
    };

Expected:

const detailsModal: ModalComponent = {
        ref: modal,
        props: {
            data: inData,
            callback: inFunction,
        },
        slot: '<p>Skeleton</p>'
    };

Maybe there is a different way to do this?

What type of pull request would this be?

Enhancement

Any links to similar examples or other references we should review?

No response

[endigo9740]

Any particular reason you stringify your prop data? That's not a requirement or suggestion we put in place. I suppose an additional way to pass data like Drawers would be useful in some scenarios though, so I think we can add something like that. See the meta key for Drawers to see what I mean.

I'd also recommend viewing this ticket where we have some expansions planned for the modal system:

• Modals: allow per instance override of button text (ex: Confirm yes/no) #683

I'll cross reference this here as the work will probably be handled for all of these at the same time.

[endigo9740]

Here's the updated documentation for this feature. This be available in the next release.

[endigo9740]

The PR is available here to test and provide feedback

• Feat/expand modal options #716

Preview URL:

• https://skeleton-docs-git-feat-expand-modal-options-skeleton-labs.vercel.app/