sigpro-ui/docs/demo_overlay.md

Overlays

Alert

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

Chat

mount(
  div({ class: 'flex flex-col gap-4' }, [
    // Mensaje izquierdo (Obi-Wan)
    Chat({ class: 'chat-start' }, [
      ChatImage({}, img({
        src: 'https://img.daisyui.com/images/profile/demo/kenobee@192.webp',
        alt: 'Obi-Wan Kenobi'
      })),
      ChatHeader({}, [
        'Obi-Wan Kenobi',
        time({ class: 'text-xs opacity-50' }, '12:45')
      ]),
      ChatBubble({}, 'You were the Chosen One!'),
      ChatFooter({ class: 'opacity-50' }, 'Delivered')
    ]),
    // Mensaje derecho (Anakin)
    Chat({ class: 'chat-end' }, [
      ChatImage({}, img({
        src: 'https://img.daisyui.com/images/profile/demo/anakeen@192.webp',
        alt: 'Anakin'
      })),
      ChatHeader({}, [
        'Anakin',
        time({ class: 'text-xs opacity-50' }, '12:46')
      ]),
      ChatBubble({}, 'I hate you!'),
      ChatFooter({ class: 'opacity-50' }, 'Seen at 12:46')
    ])
  ]),
  '#demo-chat'
);

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'
);