Skip to content

Commit 0107913

Browse files
curtis-allancurtis-allan
authored
Merge pull request #29 from curtis-allan/tw-cli
Added Scroll Area & Aspect Ratio
2 parents 8608c39 + 12bbb8e commit 0107913

17 files changed

Lines changed: 667 additions & 140 deletions

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎docs/comp_code.py‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,91 @@
5050
alt="Profile Image",
5151
fallback="CA"
5252
)
53+
""",
54+
"aspect_ratio": """
55+
Div(
56+
AspectRatio(
57+
Img(
58+
src="/public/aspect.webp",
59+
cls="w-full h-full rounded-md object-cover",
60+
loading="lazy",
61+
),
62+
ratio={16 / 9},
63+
),
64+
cls="w-[80%]",
65+
)
66+
""",
67+
"scroll_area": """
68+
def fake_data():
69+
results = []
70+
for i in range(50):
71+
results.append(Div(f"Item Entry #{i}", cls="text-sm"))
72+
return results
73+
74+
ScrollArea(
75+
Div(
76+
H4("Entries", cls="mb-4 text-sm font-medium leading-none"),
77+
*fake_data(),
78+
cls="p-4",
79+
),
80+
cls="h-72 w-48 rounded-md border",
81+
)
82+
""",
83+
"scroll_area2": """
84+
def fake_data_horizontal():
85+
results = ()
86+
data = [
87+
{
88+
"artist": "Ornella Binni",
89+
"art": "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
90+
},
91+
{
92+
"artist": "Tom Byrom",
93+
"art": "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
94+
},
95+
{
96+
"artist": "Vladimir Malyavko",
97+
"art": "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
98+
},
99+
]
100+
for i in data:
101+
results += (
102+
Figure(
103+
Div(
104+
Img(
105+
src=i["art"],
106+
alt=f"Photo by {i['artist']}",
107+
cls="aspect-[3/4] h-fit w-fit object-cover",
108+
),
109+
),
110+
Figcaption(
111+
"Photo by ",
112+
Span(i["artist"], cls="font-semibold text-foreground"),
113+
cls="pt-2 text-xs text-muted-foreground",
114+
),
115+
cls="shrink-0",
116+
),
117+
)
118+
return results
119+
120+
ScrollArea(
121+
Div(*fake_data_horizontal(), cls="flex w-max space-x-4 p-4"),
122+
cls="w-96 whitespace-nowrap rounded-md border",
123+
orientation="horizontal",
124+
)
125+
""",
126+
"aspect_ratio2": """
127+
Div(
128+
AspectRatio(
129+
Img(
130+
src="/public/aspect2.webp",
131+
cls="w-full h-full rounded-md object-cover",
132+
loading="lazy",
133+
),
134+
ratio={9 / 16},
135+
),
136+
cls="min-w-[200px] py-3",
137+
)
53138
""",
54139
"card1": """
55140
Card(

‎docs/comp_demos.py‎

Lines changed: 122 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
from lucide_fasthtml import Lucide
66

77
__all__ = [
8-
"avatar_block, card_block,carousel_block,tabs_block, select_block,ThemeToggle, alert_block, toast_block, separator_block, badge_block, progress_block, dialog_block, input_block, label_block, table_block, checkbox_block, button_block, textarea_block"
8+
"aspect_ratio_block, avatar_block, card_block,carousel_block,tabs_block,scroll_area_block, select_block,ThemeToggle, alert_block, toast_block, separator_block, badge_block, progress_block, dialog_block, input_block, label_block, table_block, checkbox_block, button_block, textarea_block"
99
]
1010

1111

@@ -50,7 +50,7 @@ def Block(*c, id="default", name=None, **kwargs):
5050
themeToggle,
5151
Div(
5252
*c,
53-
cls="block-content flex flex-col items-center h-[350px] justify-center",
53+
cls="block-content flex flex-col items-center min-h-[350px] justify-center",
5454
),
5555
CodeContent(id=id),
5656
BlockChange(),
@@ -116,12 +116,55 @@ def render_code(content):
116116

117117

118118
def CodeContent(id: str = None):
119+
if "-" in id:
120+
id = id.replace("-", "_")
119121
return Div(
120122
render_code(code_dict[id]),
121123
cls="code-content items-center justify-center h-[350px] hidden",
122124
)
123125

124126

127+
def aspect_ratio_block():
128+
return (
129+
Block(
130+
Div(
131+
AspectRatio(
132+
Img(
133+
src="/public/aspect.webp",
134+
cls="w-full h-full rounded-md object-cover",
135+
loading="lazy",
136+
),
137+
ratio={16 / 9},
138+
),
139+
cls="w-[80%]",
140+
),
141+
id="aspect-ratio",
142+
),
143+
H2(
144+
"Aspect Ratio: 9/16",
145+
cls="text-2xl font-semibold tracking-tight h-full border-b pb-1.5 mb-4",
146+
),
147+
AspectRatioAltBlock(),
148+
)
149+
150+
151+
def AspectRatioAltBlock():
152+
return Block(
153+
Div(
154+
AspectRatio(
155+
Img(
156+
src="/public/aspect2.webp",
157+
cls="w-full h-full rounded-md object-cover",
158+
loading="lazy",
159+
),
160+
ratio={9 / 16},
161+
),
162+
cls="min-w-[200px] py-3",
163+
),
164+
id="aspect-ratio2",
165+
)
166+
167+
125168
def card_block():
126169
return (
127170
Block(
@@ -144,6 +187,83 @@ def card_block():
144187
)
145188

146189

190+
def fake_data():
191+
results = ()
192+
for i in range(50):
193+
results += (Div(f"Item Entry #{i}", cls="text-sm"), Separator(cls="my-2"))
194+
return results
195+
196+
197+
def scroll_area_block():
198+
return (
199+
Block(
200+
ScrollArea(
201+
Div(
202+
H4("Entries", cls="mb-4 text-sm font-medium leading-none"),
203+
*fake_data(),
204+
cls="p-4",
205+
),
206+
cls="h-72 w-48 rounded-md border",
207+
),
208+
id="scroll-area",
209+
),
210+
H2(
211+
"Horizontal Scroll",
212+
cls="text-2xl font-semibold tracking-tight h-full border-b pb-1.5 mb-4",
213+
),
214+
ScrollAreaAltBlock(),
215+
)
216+
217+
218+
def fake_data_horizontal():
219+
results = ()
220+
data = [
221+
{
222+
"artist": "Ornella Binni",
223+
"art": "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
224+
},
225+
{
226+
"artist": "Tom Byrom",
227+
"art": "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
228+
},
229+
{
230+
"artist": "Vladimir Malyavko",
231+
"art": "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
232+
},
233+
]
234+
for i in data:
235+
results += (
236+
Figure(
237+
Div(
238+
Img(
239+
src=i["art"],
240+
alt=f"Photo by {i['artist']}",
241+
cls="aspect-[3/4] h-[200px] w-[300px] object-cover",
242+
loading="lazy",
243+
),
244+
),
245+
Figcaption(
246+
"Photo by ",
247+
Span(i["artist"], cls="font-semibold text-foreground"),
248+
cls="pt-2 text-xs text-muted-foreground",
249+
),
250+
cls="shrink-0",
251+
),
252+
)
253+
return results
254+
255+
256+
def ScrollAreaAltBlock():
257+
return Block(
258+
ScrollArea(
259+
Div(*fake_data_horizontal(), cls="flex w-max space-x-4 p-4"),
260+
cls="w-96 whitespace-nowrap rounded-md border",
261+
orientation="horizontal",
262+
),
263+
id="scroll-area2",
264+
)
265+
266+
147267
def CardAltBlock():
148268
return (
149269
Block(

‎docs/md/aspect_ratio_template.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
## Setup
2+
3+
Make sure the relevant packages are installed, and setup the imports as shown below.
4+
5+
> [!NOTE]
6+
> If you wish to seperately import components you can do so too. Make sure to import and setup `ShadHead()` as well.
7+
8+
```python
9+
from fasthtml import *
10+
from shad4fast import *
11+
12+
app, rt = fast_app(pico=False, hdrs=(ShadHead(),))
13+
```
14+
15+
---
16+
17+
## Usage
18+
19+
To use the aspect ratio component, structure your code as with a normal FT method. The component takes a `ratio` parameter, which is the width by height of the aspect ratio you wish to create.
20+
21+
```python
22+
AspectRatio(
23+
Img(
24+
src="/public/aspect.webp",
25+
cls="w-full h-full rounded-md object-cover",
26+
loading="lazy",
27+
),
28+
ratio={16 / 9},
29+
)
30+
```
31+
32+
---
33+
34+
## Parameters
35+
36+
| Parameter | Type | Description |
37+
| --------- | ---------------------------------------------------------------------------------- | --------------------------------------- |
38+
| ratio | ratio value: either `{width / height}`, `height / width` or the ratio as a `float` | The width by height of the aspect ratio |

‎docs/md/input_template.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,4 @@ Input(placeholder="Enter something", type="text", id="title")
2626

2727
## Parameters
2828

29-
For a full reference for attribute options, check out the Mozilla docs for the input tag<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input" target="_blank">here.</a>
29+
For a full reference for attribute options, check out the Mozilla docs for the input tag <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input" target="_blank">here.</a>

‎docs/md/scroll_area_template.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
## Setup
2+
3+
Make sure the relevant packages are installed, and setup the imports as shown below.
4+
5+
> [!NOTE]
6+
> If you wish to seperately import components you can do so too. Make sure to import and setup `ShadHead()` as well.
7+
8+
```python
9+
from fasthtml import *
10+
from shad4fast import *
11+
12+
app, rt = fast_app(pico=False, hdrs=(ShadHead(),))
13+
```
14+
15+
---
16+
17+
## Usage
18+
19+
To use the scroll area component, structure your code as with a normal FT method. The component takes an `orientation` parameter, which is the orientation of the scroll area.
20+
21+
```python
22+
def fake_data():
23+
results = ()
24+
for i in range(50):
25+
results += (Div(f"Item Entry #{i}", cls="text-sm"), Separator(cls="my-2"))
26+
return results
27+
28+
ScrollArea(
29+
Div(
30+
H4("Entries", cls="mb-4 text-sm font-medium leading-none"),
31+
*fake_data(),
32+
cls="p-4",
33+
),
34+
cls="h-72 w-48 rounded-md border",
35+
)
36+
```
37+
38+
> [!NOTE]
39+
> If not set, the orientation will default to `vertical`.
40+
41+
---
42+
43+
## Parameters
44+
45+
| Parameter | Type | Description |
46+
| ----------- | ----- | ---------------------------------------------------------- |
47+
| orientation | `str` | The orientation of the scroll area. Defaults to `vertical` |

0 commit comments

Comments
 (0)