sigpro-ui/docs/demo_overlay.md

Overlays

Alert

mount(
  Alert({ class: 'alert-success' }, [
    span({}, 'Operation completed successfully!'),
    Button({ class: 'btn-sm' }, 'Undo')
  ]),
  '#demo-alert'
);

Modal

const modalOpen = $(false);

mount(
  div({ class: 'flex flex-col items-start gap-2' }, [
    Button({
      class: 'btn',
      onclick: () => modalOpen(true)
    }, 'Abrir modal'),
    Modal({
      open: modalOpen,
      title: 'Congratulations!',
      backdrop: true,
      actions: [
        form({ method: 'dialog' },
          Button({ class: 'btn', onclick: () => modalOpen(false) }, 'Close')
        )
      ]
    }, [
      p({}, 'You have successfully created a reactive DaisyUI modal with SigPro.')
    ])
  ]),
  '#demo-modal'
);

Toast

mount(
  div({ class: 'flex flex-wrap gap-2' }, [
    Button({ class: 'btn', onclick: () => Toast('File saved!') }, 'Simple'),
    Button({ class: 'btn', onclick: () => Toast('Error', 'alert-error', 5000) }, 'Error (5s)'),
    Button({ class: 'btn', onclick: () => Toast(
      div({ class: 'flex items-center gap-2' }, [
        span({ class: 'icon-[lucide--check] text-lg' }),
        span({}, 'Report generated successfully')
      ]),
      'alert-success'
    ) }, 'With icon'),
    Button({ class: 'btn', onclick: () => Toast(
      h('div', { class: 'flex flex-col' }, [
        h('strong', {}, '¡ATTENTION!'),
        h('span', {}, 'Error saving!'),
        h('button', { class: 'btn btn-xs mt-1', onclick: () => console.log('retry') }, 'Retry')
      ]),
      'alert-warning',
      7000
    ) }, 'Complex')
  ]),
  '#demo-toast'
);

Tooltip

mount(
  Tooltip({ tip: 'Click to save', class: 'tooltip-right' },
    Button({ class: 'btn' }, 'Save')
  ),
  '#demo-tooltip'
);