v3 - Disabled prop for Popovers & modals

[doolijb]

Maybe I'm just not seeing it, but I believe popups/modals trigger need a disabled: boolean prop at the component or snippet level.

Being that the new modals and popovers are most comfortable to implement with {#snippet trigger()}, we need a convenient way to disable onclick.

Proposal A

<script lang="ts">
  import { Modal } from '@skeletonlabs/skeleton-svelte'

  let open= $state(false)
  let triggerDisabled = $state(true)
</script>

<Modal
  bind:open
  {triggerDisabled}
>
  {#snippet trigger()}
    <span> Click me! </span>
  {/snippet}
  {#snippet content()}
    <!-- Content -->
  {/snippet}
</Modal>

Proposal B

<script lang="ts">
  import { Modal } from '@skeletonlabs/skeleton-svelte'

  let open= $state(false)
  let triggerDisabled = $state(true)
</script>

<Modal
  bind:open
>
  {#snippet trigger({disabled: triggerDisabled)}
    <span> Click me! </span>
  {/snippet}
  {#snippet content()}
    <!-- Content -->
  {/snippet}
</Modal>

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

No response

[phamduylong]

@endigo9740 I'm into this as well. Unsure how the React side looks with all the Floating UI stuff but I can craft this up for Svelte at least.

[endigo9740]

@phamduylong assigning now.

Per the request:

• let's opt for something closer to Proposal A
• Let's keep the prop simple like disabled
• When this is set the disabled state on the trigger button should be set.
• Let's consider adding this for all 4 types of Popover components