Packages

glaze_basecoat

2.1.0
3.1.0 3.0.0 2.1.0 2.0.0 1.0.0

🍩 Lustre Bindings to Basecoat UI Components

HexDocs

Current section

5 Versions

Jump to
Readme
5 Versions
2 Dependencies
Dependants
Files
Activity
Hide whitespace

Compare versions

57 files changed
+1642 additions
-1941 deletions
  @@ -13,6 +13,8 @@ Latest supported version is [Basecoat v0.3.11](https://github.com/hunvreus/basec
13 13
14 14 GitHub Pages Demo: <https://daniellionel01.github.io/glaze/glaze_basecoat/>
15 15
16 + *This package is part of a larger monorepository with other UI library bindings: <https://github.com/daniellionel01/glaze>*
17 +
16 18 ## Getting Started
17 19
18 20 ```sh
  @@ -1,5 +1,5 @@
1 1 name = "glaze_basecoat"
2 - version = "2.0.0"
2 + version = "2.1.0"
3 3 description = "🍩 Lustre Bindings to Basecoat UI Components"
4 4
5 5 licences = ["Apache-2.0"]
  @@ -9,6 +9,11 @@ links = [
9 9 { title = "Basecoat UI", href = "https://basecoatui.com/" },
10 10 ]
11 11
12 + internal_modules = [
13 + "glaze/basecoat/internal",
14 + "glaze/basecoat/internal/*",
15 + ]
16 +
12 17 [dependencies]
13 18 gleam_stdlib = ">= 0.44.0 and < 2.0.0"
14 19 lustre = ">= 5.6.0 and < 6.0.0"
  @@ -1,6 +1,6 @@
1 1 {<<"name">>, <<"glaze_basecoat">>}.
2 2 {<<"app">>, <<"glaze_basecoat">>}.
3 - {<<"version">>, <<"2.0.0">>}.
3 + {<<"version">>, <<"2.1.0">>}.
4 4 {<<"description">>, <<"🍩 Lustre Bindings to Basecoat UI Components"/utf8>>}.
5 5 {<<"licenses">>, [<<"Apache-2.0">>]}.
6 6 {<<"build_tools">>, [<<"gleam">>]}.
  @@ -45,6 +45,7 @@
45 45 <<"src/glaze/basecoat/form.gleam">>,
46 46 <<"src/glaze/basecoat/icon.gleam">>,
47 47 <<"src/glaze/basecoat/input.gleam">>,
48 + <<"src/glaze/basecoat/internal/listx.gleam">>,
48 49 <<"src/glaze/basecoat/item.gleam">>,
49 50 <<"src/glaze/basecoat/kbd.gleam">>,
50 51 <<"src/glaze/basecoat/label.gleam">>,
  @@ -83,6 +84,7 @@
83 84 <<"src/glaze@basecoat@form.erl">>,
84 85 <<"src/glaze@basecoat@icon.erl">>,
85 86 <<"src/glaze@basecoat@input.erl">>,
87 + <<"src/glaze@basecoat@internal@listx.erl">>,
86 88 <<"src/glaze@basecoat@item.erl">>,
87 89 <<"src/glaze@basecoat@kbd.erl">>,
88 90 <<"src/glaze@basecoat@label.erl">>,
  @@ -31,16 +31,16 @@
31 31 //// - MDN `<details>`: <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details>
32 32 //// - MDN `<summary>`: <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary>
33 33
34 - import gleam/list
35 34 import lustre/attribute.{type Attribute, attribute}
36 - import lustre/element.{type Element, element}
35 + import lustre/element.{type Element}
37 36 import lustre/element/html
37 + import lustre/element/svg
38 38
39 39 pub fn accordion(
40 40 attrs: List(Attribute(msg)),
41 41 children: List(Element(msg)),
42 42 ) -> Element(msg) {
43 - html.section(list.append([attribute.class("accordion")], attrs), children)
43 + html.section([attribute.class("accordion"), ..attrs], children)
44 44 }
45 45
46 46 pub fn item(
  @@ -48,50 +48,47 @@ pub fn item(
48 48 attrs: List(Attribute(msg)),
49 49 children: List(Element(msg)),
50 50 ) -> Element(msg) {
51 - html.details(
52 - list.append([attribute.class("group border-b last:border-b-0")], attrs),
53 - [
54 - html.summary(
55 - [
56 - attribute.class(
57 - "w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md",
58 - ),
59 - ],
60 - [
61 - html.h2(
62 - [
63 - attribute.class(
64 - "flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline",
65 - ),
66 - ],
67 - list.append([html.text(title)], [
68 - element(
69 - "svg",
70 - [
71 - attribute("xmlns", "http://www.w3.org/2000/svg"),
72 - attribute("width", "24"),
73 - attribute("height", "24"),
74 - attribute("viewBox", "0 0 24 24"),
75 - attribute("fill", "none"),
76 - attribute("stroke", "currentColor"),
77 - attribute("stroke-width", "2"),
78 - attribute("stroke-linecap", "round"),
79 - attribute("stroke-linejoin", "round"),
80 - attribute.class(
81 - "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180",
82 - ),
83 - ],
84 - [
85 - element("path", [attribute("d", "m6 9 6 6 6-6")], []),
86 - ],
87 - ),
88 - ]),
89 - ),
90 - ],
91 - ),
92 - html.section([attribute.class("pb-4")], children),
93 - ],
94 - )
51 + html.details([attribute.class("group border-b last:border-b-0"), ..attrs], [
52 + html.summary(
53 + [
54 + attribute.class(
55 + "w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md",
56 + ),
57 + ],
58 + [
59 + html.h2(
60 + [
61 + attribute.class(
62 + "flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline",
63 + ),
64 + ],
65 + [
66 + html.text(title),
67 + svg.svg(
68 + [
69 + attribute("xmlns", "http://www.w3.org/2000/svg"),
70 + attribute("width", "24"),
71 + attribute("height", "24"),
72 + attribute("viewBox", "0 0 24 24"),
73 + attribute("fill", "none"),
74 + attribute("stroke", "currentColor"),
75 + attribute("stroke-width", "2"),
76 + attribute("stroke-linecap", "round"),
77 + attribute("stroke-linejoin", "round"),
78 + attribute.class(
79 + "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200 group-open:rotate-180",
80 + ),
81 + ],
82 + [
83 + svg.path([attribute("d", "m6 9 6 6 6-6")]),
84 + ],
85 + ),
86 + ],
87 + ),
88 + ],
89 + ),
90 + html.section([attribute.class("pb-4")], children),
91 + ])
95 92 }
96 93
97 94 pub fn item_open(
  @@ -100,10 +97,11 @@ pub fn item_open(
100 97 children: List(Element(msg)),
101 98 ) -> Element(msg) {
102 99 html.details(
103 - list.append(
104 - [attribute.class("group border-b last:border-b-0"), attribute.open(True)],
105 - attrs,
106 - ),
100 + [
101 + attribute.class("group border-b last:border-b-0"),
102 + attribute.open(True),
103 + ..attrs
104 + ],
107 105 [
108 106 html.summary(
109 107 [
  @@ -118,9 +116,9 @@ pub fn item_open(
118 116 "flex flex-1 items-start justify-between gap-4 py-4 text-left text-sm font-medium hover:underline",
119 117 ),
120 118 ],
121 - list.append([html.text(title)], [
122 - element(
123 - "svg",
119 + [
120 + html.text(title),
121 + svg.svg(
124 122 [
125 123 attribute("xmlns", "http://www.w3.org/2000/svg"),
126 124 attribute("width", "24"),
  @@ -136,10 +134,10 @@ pub fn item_open(
136 134 ),
137 135 ],
138 136 [
139 - element("path", [attribute("d", "m6 9 6 6 6-6")], []),
137 + svg.path([attribute("d", "m6 9 6 6 6-6")]),
140 138 ],
141 139 ),
142 - ]),
140 + ],
143 141 ),
144 142 ],
145 143 ),
  @@ -29,7 +29,6 @@
29 29 //// - MDN `<dialog>`: <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog>
30 30 //// - MDN `HTMLDialogElement`: <https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement>
31 31
32 - import gleam/list
33 32 import lustre/attribute.{type Attribute, attribute}
34 33 import lustre/element.{type Element}
35 34 import lustre/element/html
  @@ -42,29 +41,22 @@ pub fn alert_dialog(
42 41 let title_id = id <> "-title"
43 42 let desc_id = id <> "-description"
44 43 html.dialog(
45 - list.append(
46 - [
47 - attribute.class("alert-dialog"),
48 - attribute.id(id),
49 - attribute.aria_labelledby(title_id),
50 - attribute.aria_describedby(desc_id),
51 - attribute("onclick", "if (event.target === this) this.close()"),
52 - ],
53 - attrs,
54 - ),
55 44 [
56 - html.div(
57 - [],
58 - list.append(
59 - [
60 - header([], [
61 - html.h2([attribute.id(title_id)], []),
62 - ]),
63 - html.p([attribute.id(desc_id), attribute.class("sr-only")], []),
64 - ],
65 - children,
66 - ),
67 - ),
45 + attribute.class("alert-dialog"),
46 + attribute.id(id),
47 + attribute.aria_labelledby(title_id),
48 + attribute.aria_describedby(desc_id),
49 + attribute("onclick", "if (event.target === this) this.close()"),
50 + ..attrs
51 + ],
52 + [
53 + html.div([], [
54 + header([], [
55 + html.h2([attribute.id(title_id)], []),
56 + ]),
57 + html.p([attribute.id(desc_id), attribute.class("sr-only")], []),
58 + ..children
59 + ]),
68 60 ],
69 61 )
70 62 }
  @@ -79,29 +71,22 @@ pub fn alert_dialog_with_text(
79 71 let title_id = id <> "-title"
80 72 let desc_id = id <> "-description"
81 73 html.dialog(
82 - list.append(
83 - [
84 - attribute.class("alert-dialog"),
85 - attribute.id(id),
86 - attribute.aria_labelledby(title_id),
87 - attribute.aria_describedby(desc_id),
88 - attribute("onclick", "if (event.target === this) this.close()"),
89 - ],
90 - attrs,
91 - ),
92 74 [
93 - html.div(
94 - [],
95 - list.append(
96 - [
97 - header([], [
98 - html.h2([attribute.id(title_id)], [html.text(title)]),
99 - ]),
100 - html.p([attribute.id(desc_id)], [html.text(description)]),
101 - ],
102 - children,
103 - ),
104 - ),
75 + attribute.class("alert-dialog"),
76 + attribute.id(id),
77 + attribute.aria_labelledby(title_id),
78 + attribute.aria_describedby(desc_id),
79 + attribute("onclick", "if (event.target === this) this.close()"),
80 + ..attrs
81 + ],
82 + [
83 + html.div([], [
84 + header([], [
85 + html.h2([attribute.id(title_id)], [html.text(title)]),
86 + ]),
87 + html.p([attribute.id(desc_id)], [html.text(description)]),
88 + ..children
89 + ]),
105 90 ],
106 91 )
107 92 }
  @@ -146,7 +131,7 @@ pub fn action(
146 131 children: List(Element(msg)),
147 132 ) -> Element(msg) {
148 133 html.button(
149 - list.append([attribute.type_("button"), attribute.class("btn")], attrs),
134 + [attribute.type_("button"), attribute.class("btn"), ..attrs],
150 135 children,
151 136 )
152 137 }
  @@ -156,14 +141,12 @@ pub fn cancel(
156 141 children: List(Element(msg)),
157 142 ) -> Element(msg) {
158 143 html.button(
159 - list.append(
160 - [
161 - attribute.type_("button"),
162 - attribute.class("btn-outline"),
163 - attribute("onclick", "this.closest('dialog').close()"),
164 - ],
165 - attrs,
166 - ),
144 + [
145 + attribute.type_("button"),
146 + attribute.class("btn-outline"),
147 + attribute("onclick", "this.closest('dialog').close()"),
148 + ..attrs
149 + ],
167 150 children,
168 151 )
169 152 }
  @@ -173,14 +156,12 @@ pub fn destructive(
173 156 children: List(Element(msg)),
174 157 ) -> Element(msg) {
175 158 html.button(
176 - list.append(
177 - [
178 - attribute.type_("button"),
179 - attribute.class("btn-destructive"),
180 - attribute("onclick", "this.closest('dialog').close()"),
181 - ],
182 - attrs,
183 - ),
159 + [
160 + attribute.type_("button"),
161 + attribute.class("btn-destructive"),
162 + attribute("onclick", "this.closest('dialog').close()"),
163 + ..attrs
164 + ],
184 165 children,
185 166 )
186 167 }
  @@ -199,13 +180,11 @@ pub fn trigger_button(
199 180 children: List(Element(msg)),
200 181 ) -> Element(msg) {
201 182 html.button(
202 - list.append(
203 - [
204 - attribute.type_("button"),
205 - attribute("onclick", open_script(dialog_id)),
206 - ],
207 - attrs,
208 - ),
183 + [
184 + attribute.type_("button"),
185 + attribute("onclick", open_script(dialog_id)),
186 + ..attrs
187 + ],
209 188 children,
210 189 )
211 190 }
Loading more files…