diff --git a/demo/shared.py b/demo/shared.py index 70b44de4..409ce619 100644 --- a/demo/shared.py +++ b/demo/shared.py @@ -32,6 +32,43 @@ def demo_page(*components: AnyComponent, title: str | None = None) -> list[AnyCo on_click=GoToEvent(url='/forms/login'), active='startswith:/forms', ), + c.LinkListDropdown( + name='All', + links=[ + c.Link( + components=[c.Text(text='Components')], + on_click=GoToEvent(url='/components'), + active='startswith:/components', + ), + c.Link( + components=[c.Text(text='Tables')], + on_click=GoToEvent(url='/table/cities'), + active='startswith:/table', + ), + c.Link( + components=[c.Text(text='Auth')], + on_click=GoToEvent(url='/auth/login/password'), + active='startswith:/auth', + ), + [ + c.Link( + components=[c.Text(text='Forms Login')], + on_click=GoToEvent(url='/forms/login'), + active='startswith:/forms', + ), + c.Link( + components=[c.Text(text='Forms Select')], + on_click=GoToEvent(url='/forms/select'), + active='startswith:/forms', + ), + c.Link( + components=[c.Text(text='Forms Big')], + on_click=GoToEvent(url='/forms/big'), + active='startswith:/forms', + ), + ], + ], + ), ], ), c.Page( diff --git a/demo/tests.py b/demo/tests.py index f1cab0ab..19a3f417 100644 --- a/demo/tests.py +++ b/demo/tests.py @@ -32,7 +32,7 @@ def test_api_root(client: TestClient): { 'title': 'FastUI Demo', 'titleEvent': {'url': '/', 'type': 'go-to'}, - 'startLinks': IsList(length=4), + 'startLinks': IsList(length=5), 'endLinks': [], 'type': 'Navbar', }, @@ -61,9 +61,19 @@ def get_menu_links(): r = client.get('/api/') assert r.status_code == 200 data = r.json() - for link in data[1]['startLinks']: - url = link['onClick']['url'] - yield pytest.param(f'/api{url}', id=url) + for navitem in data[1]['startLinks']: + if navitem['type'] == 'Link': + url = navitem['onClick']['url'] + yield pytest.param(f'/api{url}', id=url) + elif navitem['type'] == 'LinkListDropdown': + for link in navitem['links']: + if isinstance(link, list): + for inner_link in link: + url = inner_link['onClick']['url'] + yield pytest.param(f'/api{url}', id=url) + else: + url = link['onClick']['url'] + yield pytest.param(f'/api{url}', id=url) @pytest.mark.parametrize('url', get_menu_links()) diff --git a/package-lock.json b/package-lock.json index 5cc21c61..801a92f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7043,7 +7043,7 @@ }, "src/npm-fastui": { "name": "@pydantic/fastui", - "version": "0.0.22", + "version": "0.0.23", "license": "MIT", "dependencies": { "@microsoft/fetch-event-source": "^2.0.1", @@ -7060,7 +7060,7 @@ }, "src/npm-fastui-bootstrap": { "name": "@pydantic/fastui-bootstrap", - "version": "0.0.22", + "version": "0.0.23", "license": "MIT", "dependencies": { "bootstrap": "^5.3.2", @@ -7070,12 +7070,12 @@ "sass": "^1.69.5" }, "peerDependencies": { - "@pydantic/fastui": "0.0.22" + "@pydantic/fastui": "0.0.23" } }, "src/npm-fastui-prebuilt": { "name": "@pydantic/fastui-prebuilt", - "version": "0.0.22", + "version": "0.0.23", "license": "MIT", "devDependencies": { "@vitejs/plugin-react-swc": "^3.3.2", diff --git a/src/npm-fastui-bootstrap/src/navbar.tsx b/src/npm-fastui-bootstrap/src/navbar.tsx index 3f5adec8..a02df121 100644 --- a/src/npm-fastui-bootstrap/src/navbar.tsx +++ b/src/npm-fastui-bootstrap/src/navbar.tsx @@ -1,6 +1,7 @@ -import { FC } from 'react' +import { FC, Fragment } from 'react' import { components, useClassName, models } from 'fastui' import BootstrapNavbar from 'react-bootstrap/Navbar' +import NavDropdown from 'react-bootstrap/NavDropdown' export const Navbar: FC = (props) => { const startLinks = props.startLinks.map((link) => { @@ -18,16 +19,16 @@ export const Navbar: FC = (props) => {
    - {startLinks.map((link, i) => ( + {startLinks.map((item, i) => (
  • - +
    • ))}
    - {endLinks.map((link, i) => ( + {endLinks.map((item, i) => (
  • - +
    • ))}
@@ -37,6 +38,32 @@ export const Navbar: FC = (props) => { ) } +const NavBarItem = (props: models.Link | models.LinkListDropdown) => { + if (props.type === 'LinkListDropdown') { + return ( + + {props.links.map((link, j) => + Array.isArray(link) ? ( + link.map((innerLink, jj) => ( + + + {j !== props.links.length - 1 && } + + )) + ) : ( + + + {j !== props.links.length - 1 && } + + ), + )} + + ) + } else { + return + } +} + const NavbarTitle = (props: models.Navbar) => { const { title, titleEvent } = props const className = useClassName(props, { el: 'title' }) diff --git a/src/npm-fastui/src/components/navbar.tsx b/src/npm-fastui/src/components/navbar.tsx index 6e735fe8..3cc85c42 100644 --- a/src/npm-fastui/src/components/navbar.tsx +++ b/src/npm-fastui/src/components/navbar.tsx @@ -17,12 +17,24 @@ export const NavbarComp = (props: Navbar) => { ) diff --git a/src/npm-fastui/src/models.d.ts b/src/npm-fastui/src/models.d.ts index 258254de..8d1259b8 100644 --- a/src/npm-fastui/src/models.d.ts +++ b/src/npm-fastui/src/models.d.ts @@ -213,11 +213,21 @@ export interface LinkList { export interface Navbar { title?: string titleEvent?: PageEvent | GoToEvent | BackEvent | AuthEvent - startLinks: Link[] - endLinks: Link[] + startLinks: (Link | LinkListDropdown)[] + endLinks: (Link | LinkListDropdown)[] className?: ClassName type: 'Navbar' } +/** + * List of Link components for dropdowns used in the `Navbar` component. + */ +export interface LinkListDropdown { + name: string + links: (Link | Link[])[] + mode: 'navbar' + className?: ClassName + type: 'LinkListDropdown' +} /** * Footer component. */ diff --git a/src/python-fastui/fastui/components/__init__.py b/src/python-fastui/fastui/components/__init__.py index f74fafc2..964fac9b 100644 --- a/src/python-fastui/fastui/components/__init__.py +++ b/src/python-fastui/fastui/components/__init__.py @@ -281,6 +281,25 @@ class LinkList(BaseModel, extra='forbid'): """The type of the component. Always 'LinkList'.""" +class LinkListDropdown(BaseModel, extra='forbid'): + """List of Link components for dropdowns used in the `Navbar` component.""" + + name: str + """Name of the link list.""" + + links: _t.List[_t.Union[Link, _t.List[Link]]] + """List of links to render.""" + + mode: _t.Literal['navbar'] = 'navbar' + """Mode can only be navbar due its sole purpose of serving as dropdown.""" + + class_name: _class_name.ClassNameField = None + """Optional class name to apply to the link list's HTML component.""" + + type: _t.Literal['LinkListDropdown'] = 'LinkListDropdown' + """The type of the component. Always 'LinkListDropdown'.""" + + class Navbar(BaseModel, extra='forbid'): """Navbar component used for moving between pages.""" @@ -290,10 +309,10 @@ class Navbar(BaseModel, extra='forbid'): title_event: _t.Union[events.AnyEvent, None] = None """Optional event to trigger when the title is clicked. Often used to navigate to the home page.""" - start_links: _t.List[Link] = [] + start_links: _t.List[_t.Union[Link, LinkListDropdown]] = [] """List of links to render at the start of the navbar.""" - end_links: _t.List[Link] = [] + end_links: _t.List[_t.Union[Link, LinkListDropdown]] = [] """List of links to render at the end of the navbar.""" class_name: _class_name.ClassNameField = None