sigpro-ui/docs/demo_layout.md

Layout

Accordion

const accItems = $([
  { title: 'What is SigPro?', content: 'A lightweight UI library built on DaisyUI and a fine‑grained reactivity system.' },
  { title: 'Why use it?', content: 'No build step, minimal boilerplate, and all components are just JavaScript functions.' },
  { title: 'Browser support?', content: 'All modern browsers that support ES2020+' }
]);

mount(
  div({ class: 'flex flex-col gap-8' }, [
    Accordion({items: accItems, class: "collapse-arrow bg-base-100 border border-base-300"})
  ]),
  '#demo-accordion'
);

Drawer

const drawerOpen = $(false);

mount(
  div({}, [
    Drawer({ open: drawerOpen, id: 'drw', side: Menu({ items: [
      { label: 'Dashboard', onclick: () => drawerOpen(false) },
      { label: 'Settings' },
      { label: 'Help' }
    ]}) }, [
      div({ class: 'p-4 border border-base-300' }, [
        h3({ class: 'text-lg font-bold' }, 'Main Content'),
        Button({ class: 'btn', onclick: () => drawerOpen(true) }, 'Open Drawer'),
        p({}, 'This is the main page. Click the button above to open the drawer.')
      ])
    ])
  ]),
  '#demo-drawer'
);

Dropdown

mount(
  div({ class: 'flex gap-4' }, [
    // Example 1: con Menu (cierre automático al hacer clic en un ítem)
    Dropdown({ label: 'Options', class: 'dropdown' }, [
      Menu({
        items: [
          { label: 'Edit', onclick: () => close() },
          { label: 'Delete', onclick: () => close() },
          { label: 'Archive' }
        ],
        class: 'dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow z-1'
      })
    ]),
    // Example 2: manual (cerrar ítems con blur)
    Dropdown({ label: 'More', class: 'dropdown' }, [
      ul({ class: 'dropdown-content menu bg-base-100 rounded-box w-40 p-2 shadow' }, [
        li({}, a({ 
          tabindex: '-1',
          href: '#', 
          onclick: (e) => { e.preventDefault();  close(); } 
        }, 'Profile')),
        li({}, a({ 
          tabindex: '-1',
          href: '#', 
          onclick: (e) => { e.preventDefault();  close(); } 
        }, 'Logout'))
      ])
    ])
  ]),
  '#demo-dropdown'
)

Fab

mount(
  div({ class: 'flex gap-4' }, [
    Fab({ class: 'btn-lg btn-circle btn-secondary', icon:"R" }, [
      Button({},"C"),
      Button({},"B"),
      Button({},"A"),
    ])
  ]),
  '#demo-fab'
);

Fieldset

mount(
  div({ class: 'flex gap-4 bg' }, [
    Fieldset({ label: 'Personal Info', class:"bg-base-200 border-base-300 rounded-box w-xs border gap-3 p-4" }, [
      Input({ label: 'Name', float: true, value: $('') }),
      Select({ label: 'Country', float: true, items: ['Spain', 'France', 'Italy'], value: $('') })
    ]),
    Fieldset({ class: 'bg-base-200 p-4 rounded-box' , label: "Any content"}, [
      div({}, 'Any content')
    ])
  ]),
  '#demo-fieldset'
);

Menu

const menuItems = $([
  { label: 'Home' },
  { label: 'Products', children: [
    { label: 'Laptops' },
    { label: 'Phones' }
  ]},
  { label: 'About', onclick: () => console.log('About clicked') }
]);

mount(
  div({ class: 'flex gap-4' }, [
    Menu({ items: menuItems, class: 'bg-base-200 rounded-box w-56' }),
  ]),
  '#demo-menu'
);

Navbar

mount(
  Navbar({ class: 'bg-base-200 rounded-box' }, [
    div({ class: 'flex-1' },
      a({ class: 'btn btn-ghost text-xl' }, 'SigPro')
    ),
    div({ class: 'flex-none gap-2' }, [
      Button({ class: 'btn btn-ghost' }, 'Login'),
      Button({ class: 'btn btn-primary' }, 'Sign up')
    ])
  ]),
  '#demo-navbar'
);

Tabs

const activeTab = $(0);
const tabsData = $([
  { label: 'Tab A', content: 'Content of tab A' },
  { label: 'Tab B', content: 'Content of tab B', closable: true },
  { label: 'Tab C', content: 'Content of tab C' }
])

mount(
  Tabs({ class: 'tabs-box', items: tabsData, activeIndex: activeTab }),
  '#demo-tabs'
)