| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- import inspect
- from typing import Callable, Optional
- import isort
- from nicegui import ui
- from .intersection_observer import IntersectionObserver as intersection_observer
- PYTHON_BGCOLOR = '#00000010'
- PYTHON_COLOR = '#eef5fb'
- BASH_BGCOLOR = '#00000010'
- BASH_COLOR = '#e8e8e8'
- BROWSER_BGCOLOR = '#00000010'
- BROWSER_COLOR = '#ffffff'
- def remove_prefix(text: str, prefix: str) -> str:
- return text[len(prefix):] if text.startswith(prefix) else text
- class demo:
- def __init__(self, browser_title: Optional[str] = None) -> None:
- self.browser_title = browser_title
- def __call__(self, f: Callable) -> Callable:
- with ui.column().classes('w-full items-stretch gap-8 no-wrap min-[1500px]:flex-row'):
- code = inspect.getsource(f).split('# END OF DEMO')[0].strip().splitlines()
- while not code[0].strip().startswith('def') and not code[0].strip().startswith('async def'):
- del code[0]
- del code[0]
- indentation = len(code[0]) - len(code[0].lstrip())
- code = [line[indentation:] for line in code]
- code = ['from nicegui import ui'] + [remove_prefix(line, '# ') for line in code]
- code = ['' if line == '#' else line for line in code]
- if not code[-1].startswith('ui.run('):
- code.append('')
- code.append('ui.run()')
- code = isort.code('\n'.join(code), no_sections=True, lines_after_imports=1)
- with python_window(classes='w-full max-w-[44rem]'):
- async def copy_code():
- await ui.run_javascript('navigator.clipboard.writeText(`' + code + '`)', respond=False)
- ui.notify('Copied to clipboard', type='positive', color='primary')
- ui.markdown(f'````python\n{code}\n````')
- ui.icon('content_copy', size='xs') \
- .classes('absolute right-2 top-10 opacity-10 hover:opacity-80 cursor-pointer') \
- .on('click', copy_code)
- with browser_window(self.browser_title,
- classes='w-full max-w-[44rem] min-[1500px]:max-w-[20rem] min-h-[10rem] browser-window'):
- intersection_observer(on_intersection=f)
- return f
- def _window_header(bgcolor: str) -> ui.row():
- return ui.row().classes(f'w-full h-8 p-2 bg-[{bgcolor}]')
- def _dots() -> None:
- with ui.row().classes('gap-1 relative left-[1px] top-[1px]'):
- ui.icon('circle').classes('text-[13px] text-red-400')
- ui.icon('circle').classes('text-[13px] text-yellow-400')
- ui.icon('circle').classes('text-[13px] text-green-400')
- def _title(title: str) -> None:
- ui.label(title).classes('text-sm text-gray-600 absolute left-1/2 top-[6px]').style('transform: translateX(-50%)')
- def _tab(name: str, color: str, bgcolor: str) -> None:
- with ui.row().classes('gap-0'):
- with ui.label().classes(f'w-2 h-[24px] bg-[{color}]'):
- ui.label().classes(f'w-full h-full bg-[{bgcolor}] rounded-br-[6px]')
- ui.label(name).classes(f'text-sm text-gray-600 px-6 py-1 h-[24px] rounded-t-[6px] bg-[{color}]')
- with ui.label().classes(f'w-2 h-[24px] bg-[{color}]'):
- ui.label().classes(f'w-full h-full bg-[{bgcolor}] rounded-bl-[6px]')
- def window(color: str, bgcolor: str, *, title: str = '', tab: str = '', classes: str = '') -> ui.column:
- with ui.card().classes(f'no-wrap bg-[{color}] rounded-xl p-0 gap-0 {classes}') \
- .style('box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)'):
- with _window_header(bgcolor):
- _dots()
- if title:
- _title(title)
- if tab:
- _tab(tab, color, bgcolor)
- return ui.column().classes('w-full h-full overflow-auto')
- def python_window(title: Optional[str] = None, *, classes: str = '') -> ui.card:
- return window(PYTHON_COLOR, PYTHON_BGCOLOR, title=title or 'main.py', classes=classes).classes('p-2 python-window')
- def bash_window(*, classes: str = '') -> ui.card:
- return window(BASH_COLOR, BASH_BGCOLOR, title='bash', classes=classes).classes('p-2 bash-window')
- def browser_window(title: Optional[str] = None, *, classes: str = '') -> ui.card:
- return window(BROWSER_COLOR, BROWSER_BGCOLOR, tab=title or 'NiceGUI', classes=classes).classes('p-4 browser-window')
|
