diff --git a/ex_nbs/01_tasks.ipynb b/ex_nbs/01_tasks.ipynb index 1008108..8a3c93c 100644 --- a/ex_nbs/01_tasks.ipynb +++ b/ex_nbs/01_tasks.ipynb @@ -11,7 +11,7 @@ }, { "cell_type": "code", - "execution_count": 130, + "execution_count": 1, "metadata": {}, "outputs": [], "source": [ @@ -20,7 +20,7 @@ }, { "cell_type": "code", - "execution_count": 131, + "execution_count": 2, "metadata": {}, "outputs": [], "source": [ @@ -30,12 +30,13 @@ }, { "cell_type": "code", - "execution_count": 1, + "execution_count": 3, "metadata": {}, "outputs": [], "source": [ "#| export\n", "from fasthtml.common import *\n", + "import fasthtml.common as fh\n", "from fh_frankenui.core import *\n", "from fh_frankenui.components import *\n", "from fasthtml.svg import *\n", @@ -44,7 +45,7 @@ }, { "cell_type": "code", - "execution_count": 7, + "execution_count": 4, "metadata": {}, "outputs": [], "source": [ @@ -54,7 +55,7 @@ "from uuid import uuid4\n", "from IPython.display import display, HTML\n", "\n", - "if is_port_free(8000) and IN_NOTEBOOK::\n", + "if is_port_free(8000) and IN_NOTEBOOK:\n", " app, rt = fh.fast_app(pico=False, hdrs=Theme.blue.headers())\n", " server = JupyUvi(app)\n", "def HShow(comp, app):\n", @@ -69,7 +70,7 @@ }, { "cell_type": "code", - "execution_count": 134, + "execution_count": 5, "metadata": {}, "outputs": [ { @@ -124,7 +125,7 @@ }, { "cell_type": "code", - "execution_count": 135, + "execution_count": 6, "metadata": {}, "outputs": [], "source": [ @@ -135,7 +136,7 @@ }, { "cell_type": "code", - "execution_count": 136, + "execution_count": 7, "metadata": {}, "outputs": [], "source": [ @@ -156,7 +157,7 @@ }, { "cell_type": "code", - "execution_count": 137, + "execution_count": 8, "metadata": {}, "outputs": [], "source": [ @@ -169,7 +170,7 @@ }, { "cell_type": "code", - "execution_count": 138, + "execution_count": 9, "metadata": {}, "outputs": [], "source": [ @@ -184,7 +185,7 @@ }, { "cell_type": "code", - "execution_count": 145, + "execution_count": 10, "metadata": {}, "outputs": [], "source": [ @@ -209,7 +210,7 @@ }, { "cell_type": "code", - "execution_count": 140, + "execution_count": 11, "metadata": {}, "outputs": [], "source": [ @@ -222,7 +223,7 @@ }, { "cell_type": "code", - "execution_count": 141, + "execution_count": 12, "metadata": {}, "outputs": [ { @@ -241,17 +242,17 @@ "
leader@sveltecult.com
\n", " \n", "
  • \n", - "
  • \n", - "Profile⇧⌘P
    • \n", - "
  • \n", - "Billing⌘B
    • \n", - "
  • \n", - "Settings⌘S
    • \n", - "
  • \n", - "New Team
    • \n", + "
  • \n", + "Profile⇧⌘P
    • \n", + "
  • \n", + "Billing⌘B
    • \n", + "
  • \n", + "Settings⌘S
    • \n", + "
  • \n", + "New Team
    • \n", "
  • \n", - "
  • \n", - "Logout
    • \n", + "
  • \n", + "Logout
    • \n", " \n", " \n", " \n", @@ -261,7 +262,7 @@ "" ] }, - "execution_count": 141, + "execution_count": 12, "metadata": {}, "output_type": "execute_result" } @@ -272,7 +273,7 @@ }, { "cell_type": "code", - "execution_count": 142, + "execution_count": 13, "metadata": {}, "outputs": [], "source": [ @@ -289,7 +290,7 @@ }, { "cell_type": "code", - "execution_count": 143, + "execution_count": 14, "metadata": {}, "outputs": [ { @@ -303,7 +304,7 @@ "button(('Create Task',),{'type': 'button', 'uk-toggle': 'target: #TaskForm', 'class': 'uk-button uk-button-primary uk-text-bold uk-text-small'})" ] }, - "execution_count": 143, + "execution_count": 14, "metadata": {}, "output_type": "execute_result" } @@ -314,7 +315,7 @@ }, { "cell_type": "code", - "execution_count": 144, + "execution_count": 15, "metadata": {}, "outputs": [ { @@ -343,7 +344,7 @@ "" ] }, - "execution_count": 144, + "execution_count": 15, "metadata": {}, "output_type": "execute_result" } @@ -361,7 +362,7 @@ }, { "cell_type": "code", - "execution_count": 123, + "execution_count": 16, "metadata": {}, "outputs": [], "source": [ @@ -378,7 +379,7 @@ }, { "cell_type": "code", - "execution_count": 21, + "execution_count": 17, "metadata": { "scrolled": true }, @@ -395,7 +396,7 @@ }, { "cell_type": "code", - "execution_count": 22, + "execution_count": 18, "metadata": {}, "outputs": [], "source": [ @@ -413,7 +414,7 @@ }, { "cell_type": "code", - "execution_count": 23, + "execution_count": 19, "metadata": { "scrolled": false }, @@ -426,7 +427,9 @@ " header_data=task_columns,\n", " body_data=data,\n", " body_cell_render=cell_render,\n", - " header_cell_render=header_render))\n" + " header_cell_render=header_render,\n", + " sortable=True\n", + "))\n" ] }, { diff --git a/ex_nbs/02_cards.ipynb b/ex_nbs/02_cards.ipynb index 3c03377..656d675 100644 --- a/ex_nbs/02_cards.ipynb +++ b/ex_nbs/02_cards.ipynb @@ -726,7 +726,8 @@ "def page():\n", " return Title(\"Custom\"),Grid(\n", " *map(Div,(Left1,Left2,Middle1,Middle2,Middle3,Middle4,Right1,Right2, Right3)),\n", - " cols=1, cls=(GridT.small,'md:grid-cols-3', 'sm:grid-cols-2'), uk_grid=\"masonry: pack\")" + " cols=1, cls=(GridT.small,'md:grid-cols-3', 'sm:grid-cols-2'), \n", + " uk_grid=\"masonry: next\")\n" ] }, { diff --git a/ex_nbs/app/cards.py b/ex_nbs/app/cards.py index 81831d0..155558e 100644 --- a/ex_nbs/app/cards.py +++ b/ex_nbs/app/cards.py @@ -156,7 +156,9 @@ def page(): return Title("Custom"),Grid( *map(Div,(Left1,Left2,Middle1,Middle2,Middle3,Middle4,Right1,Right2, Right3)), - cols=1, cls=(GridT.small,'md:grid-cols-3', 'sm:grid-cols-2'), uk_grid="masonry: pack") + cols=1, cls=(GridT.small,'md:grid-cols-3', 'sm:grid-cols-2'), + uk_grid="masonry: next") + # %% ../02_cards.ipynb cards_homepage = page() diff --git a/ex_nbs/app/tasks.py b/ex_nbs/app/tasks.py index 68eadf3..b1effe9 100644 --- a/ex_nbs/app/tasks.py +++ b/ex_nbs/app/tasks.py @@ -9,6 +9,7 @@ # %% ../01_tasks.ipynb from fasthtml.common import * +import fasthtml.common as fh from fh_frankenui.core import * from fh_frankenui.components import * from fasthtml.svg import * @@ -110,7 +111,9 @@ def _Td(*args,cls='', **kwargs): return Td(*args, cls=f'p-2 {cls}',**kwargs) header_data=task_columns, body_data=data, body_cell_render=cell_render, - header_cell_render=header_render)) + header_cell_render=header_render, + sortable=True +)) # %% ../01_tasks.ipynb diff --git a/fh_frankenui/core.py b/fh_frankenui/core.py index 25403ec..6223325 100644 --- a/fh_frankenui/core.py +++ b/fh_frankenui/core.py @@ -724,16 +724,17 @@ def Th(*args,**kwargs): return _TableCell(fh.Th, *args, **kwargs) def Tr(*cells, cls=(), **kwargs): return fh.Tr(*cells, cls=stringify(cls), **kwargs) def Thead(*rows, cls=(), **kwargs): return fh.Thead(*rows, cls=stringify(cls), **kwargs) -def Tbody(*rows, cls=(), **kwargs): return fh.Tbody(*rows, cls=stringify(cls), **kwargs) +def Tbody(*rows, cls=(), sortable=False, **kwargs): return fh.Tbody(*rows, cls=stringify(cls), uk_sortable=sortable, **kwargs) # %% ../lib_nbs/01_core.ipynb def TableFromLists(header_data, body_data, footer_data=None, header_cell_render=Th,body_cell_render=Td, footer_cell_render=Td, - cls=(TableT.middle, TableT.divider, TableT.hover, TableT.small), **kwargs): + cls=(TableT.middle, TableT.divider, TableT.hover, TableT.small), + sortable=False, **kwargs): return Table( Thead(Tr(*map(header_cell_render, header_data))), - Tbody(*[Tr(*map(body_cell_render, r)) for r in body_data]), + Tbody(*[Tr(*map(body_cell_render, r)) for r in body_data], sortable=sortable), Tfoot(Tr(*map(footer_cell_render, footer_data))) if footer_data else '', cls=stringify(cls), **kwargs) @@ -741,11 +742,13 @@ def TableFromLists(header_data, body_data, footer_data=None, # %% ../lib_nbs/01_core.ipynb def TableFromDicts(header_data:Sequence, body_data:Sequence[dict], footer_data=None, header_cell_render=Th, body_cell_render=lambda k,v : Td(v), footer_cell_render=lambda k,v : Td(v), - cls=(TableT.middle, TableT.divider, TableT.hover, TableT.small), **kwargs): + cls=(TableT.middle, TableT.divider, TableT.hover, TableT.small), + sortable=False, + **kwargs): return Table( Thead(Tr(*[header_cell_render(h) for h in header_data])), - Tbody(*[Tr(*[body_cell_render(k, r) for k in header_data]) for r in body_data]), + Tbody(*[Tr(*[body_cell_render(k, r) for k in header_data]) for r in body_data], sortable=sortable), Tfoot(Tr(*[footer_cell_render(k, footer_data.get(k.lower(), '')) for k in header_data])) if footer_data else '', cls=stringify(cls), **kwargs diff --git a/lib_nbs/01_core.ipynb b/lib_nbs/01_core.ipynb index 47b3735..302c7e8 100644 --- a/lib_nbs/01_core.ipynb +++ b/lib_nbs/01_core.ipynb @@ -160,19 +160,7 @@ "cell_type": "code", "execution_count": null, "metadata": {}, - "outputs": [ - { - "ename": "NameError", - "evalue": "name 'Enum' is not defined", - "output_type": "error", - "traceback": [ - "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m", - "\u001b[0;31mNameError\u001b[0m Traceback (most recent call last)", - "Cell \u001b[0;32mIn[1], line 2\u001b[0m\n\u001b[1;32m 1\u001b[0m \u001b[38;5;66;03m#| export\u001b[39;00m\n\u001b[0;32m----> 2\u001b[0m \u001b[38;5;28;01mclass\u001b[39;00m \u001b[38;5;21;01mTheme\u001b[39;00m(\u001b[43mEnum\u001b[49m):\n\u001b[1;32m 3\u001b[0m slate \u001b[38;5;241m=\u001b[39m \u001b[38;5;124m\"\u001b[39m\u001b[38;5;124mslate\u001b[39m\u001b[38;5;124m\"\u001b[39m\n\u001b[1;32m 4\u001b[0m stone \u001b[38;5;241m=\u001b[39m \u001b[38;5;124m\"\u001b[39m\u001b[38;5;124mstone\u001b[39m\u001b[38;5;124m\"\u001b[39m\n", - "\u001b[0;31mNameError\u001b[0m: name 'Enum' is not defined" - ] - } - ], + "outputs": [], "source": [ "#| export\n", "class Theme(Enum):\n", @@ -3150,7 +3138,33 @@ "\n", "def Tr(*cells, cls=(), **kwargs): return fh.Tr(*cells, cls=stringify(cls), **kwargs)\n", "def Thead(*rows, cls=(), **kwargs): return fh.Thead(*rows, cls=stringify(cls), **kwargs)\n", - "def Tbody(*rows, cls=(), **kwargs): return fh.Tbody(*rows, cls=stringify(cls), **kwargs)" + "def Tbody(*rows, cls=(), sortable=False, **kwargs): return fh.Tbody(*rows, cls=stringify(cls), uk_sortable=sortable, **kwargs)" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [ + { + "data": { + "text/markdown": [ + "```html\n", + "\n", + "\n", + "```" + ], + "text/plain": [ + "tbody((),{'uk-sortable': True, 'class': ''})" + ] + }, + "execution_count": null, + "metadata": {}, + "output_type": "execute_result" + } + ], + "source": [ + "Tbody(sortable=True)" ] }, { @@ -3162,11 +3176,12 @@ "#|export\n", "def TableFromLists(header_data, body_data, footer_data=None, \n", " header_cell_render=Th,body_cell_render=Td, footer_cell_render=Td,\n", - " cls=(TableT.middle, TableT.divider, TableT.hover, TableT.small), **kwargs):\n", + " cls=(TableT.middle, TableT.divider, TableT.hover, TableT.small), \n", + " sortable=False, **kwargs):\n", " \n", " return Table(\n", " Thead(Tr(*map(header_cell_render, header_data))),\n", - " Tbody(*[Tr(*map(body_cell_render, r)) for r in body_data]),\n", + " Tbody(*[Tr(*map(body_cell_render, r)) for r in body_data], sortable=sortable),\n", " Tfoot(Tr(*map(footer_cell_render, footer_data))) if footer_data else '',\n", " cls=stringify(cls), \n", " **kwargs)" @@ -3180,39 +3195,24 @@ { "data": { "text/html": [ - "\n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - "
    NameAgeCity
    Alice25New York
    Bob30San Francisco
    Charlie35London
    Total90
    \n" + "Open in new tab" + ], + "text/plain": [ + "" + ] + }, + "metadata": {}, + "output_type": "display_data" + }, + { + "data": { + "text/html": [ + " " ], "text/plain": [ "" @@ -3233,7 +3233,7 @@ "]\n", "footer = ['Total', '90', '']\n", "\n", - "fh.show(TableFromLists(header, body, footer))" + "Show(TableFromLists(header, body, footer))" ] }, { @@ -3245,11 +3245,13 @@ "#| export\n", "def TableFromDicts(header_data:Sequence, body_data:Sequence[dict], footer_data=None, \n", " header_cell_render=Th, body_cell_render=lambda k,v : Td(v), footer_cell_render=lambda k,v : Td(v),\n", - " cls=(TableT.middle, TableT.divider, TableT.hover, TableT.small), **kwargs):\n", + " cls=(TableT.middle, TableT.divider, TableT.hover, TableT.small),\n", + " sortable=False,\n", + " **kwargs):\n", " \n", " return Table(\n", " Thead(Tr(*[header_cell_render(h) for h in header_data])),\n", - " Tbody(*[Tr(*[body_cell_render(k, r) for k in header_data]) for r in body_data]),\n", + " Tbody(*[Tr(*[body_cell_render(k, r) for k in header_data]) for r in body_data], sortable=sortable),\n", " Tfoot(Tr(*[footer_cell_render(k, footer_data.get(k.lower(), '')) for k in header_data])) if footer_data else '',\n", " cls=stringify(cls), \n", " **kwargs\n", @@ -3264,27 +3266,24 @@ { "data": { "text/html": [ - "\n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - "
    NAMEAGECITY
    Alice30 yearsNew York
    Bob25 yearsLondon
    \n" + "Open in new tab" + ], + "text/plain": [ + "" + ] + }, + "metadata": {}, + "output_type": "display_data" + }, + { + "data": { + "text/html": [ + " " ], "text/plain": [ "" @@ -3310,7 +3309,7 @@ " {'name': 'Bob', 'age': 25, 'city': 'London'}\n", "]\n", "\n", - "fh.show(TableFromDicts(header_data, body_data, header_cell_render=header_render, body_cell_render=body_render))" + "Show(TableFromDicts(header_data, body_data, header_cell_render=header_render, body_cell_render=body_render,sortable=True))" ] }, {