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 leftOpen = $(false)
const rightOpen = $(false)

mount(
  Drawer({ open: leftOpen }, [
    DrawerToggle({ id: 'left-drawer', checked: leftOpen }),
    DrawerContent({}, [
      Drawer({ open: rightOpen, class: 'drawer-end' }, [
        DrawerToggle({ id: 'right-drawer', checked: rightOpen }),
        DrawerContent({}, [
          div({ class: 'p-4' }, [
            h3({ class: 'text-lg font-bold' }, 'Panel central'),
            label({ for: 'left-drawer', class: 'btn' }, 'Abrir izquierdo'),
            label({ for: 'right-drawer', class: 'btn ml-2' }, 'Abrir derecho'),
            p({}, 'Contenido principal aquí...')
          ])
        ]),
        DrawerSide({}, [
          DrawerOverlay({ for: 'right-drawer' }),
          div({ class: 'min-h-full bg-base-200 w-60 p-4' },
            h4({ class: 'font-semibold' }, 'Menú derecho')
          )
        ])
      ])
    ]),
    DrawerSide({}, [
      DrawerOverlay({ for: 'left-drawer' }),
      div({ class: 'min-h-full bg-base-200 w-60 p-4' },
        h4({ class: 'font-semibold' }, 'Menú izquierdo')
      )
    ])
  ]),
  '#demo-drawer'
)

Dropdown

mount(
  div({ class: 'flex gap-4' }, [
    Dropdown({}, [
      DropdownButton({}, 'Options'),
      DropdownContent({ class: 'menu bg-base-100 rounded-box w-52 p-2 shadow' }, [
        Menu({
          items: [
            { label: 'Edit', onclick: () => close() },
            { label: 'Delete', onclick: () => close() },
            { label: 'Archive' }
          ]
        })
      ])
    ]),
    Dropdown({}, [
      DropdownButton({}, 'More'),
      DropdownContent({ class: 'menu bg-base-100 rounded-box w-40 p-2 shadow' }, 
        ul({}, [
          li({}, a({ href: '#', onclick: (e) => { e.preventDefault(); close(); } }, 'Profile')),
          li({}, a({ 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'
)