css-zero 0.0.14 → 0.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +15 -13
- data/lib/css_zero/version.rb +1 -1
- data/lib/generators/css_zero/add/resources.yml +1 -1
- data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css +6 -5
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js +21 -0
- metadata +3 -3
- data/lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_control_controller.js +0 -17
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 7304e9420f4574059f34a6be6f69f7dca6d94b3e2fd0be6d497cc59bdab99a52
|
4
|
+
data.tar.gz: ed1bc4913357f8eac01ab39cf26f05b60399bafd9c707520d1fb59853a55de5b
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: ac3e38e755a91f8b33a88f0880ceb12ff6a582a861bad0e5031147d070b0e794d779524b96e46bf4cc8640e002b8342f64b58c685afa76e04ae59c1f72484568
|
7
|
+
data.tar.gz: 82a577ab39f939842b1e1d1b30827f43cf692acb3cf6feeac56364793a8a6e95f0de33779971851d6ff17dfb7fc91a97d55348743674db3b309a682a0ac000da
|
data/README.md
CHANGED
@@ -227,8 +227,8 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
227
227
|
<summary>Show me the code</summary>
|
228
228
|
|
229
229
|
```html+erb
|
230
|
-
<div>
|
231
|
-
<dialog
|
230
|
+
<div data-controller="dialog">
|
231
|
+
<dialog data-dialog-target="box" class="dialog">
|
232
232
|
<h1 class="text-lg font-semibold">Are you absolutely sure?</h1>
|
233
233
|
<p class="text-sm text-subtle mbs-2">This action cannot be undone. This will permanently delete your account and remove your data from our servers.</p>
|
234
234
|
|
@@ -238,8 +238,8 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
238
238
|
</div>
|
239
239
|
</dialog>
|
240
240
|
|
241
|
-
<button class="btn" data-
|
242
|
-
Show
|
241
|
+
<button class="btn" data-action="dialog#showModal">
|
242
|
+
Show dialog
|
243
243
|
</button>
|
244
244
|
</div>
|
245
245
|
```
|
@@ -247,18 +247,20 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
247
247
|
|
248
248
|
#### Dismissible Dialog
|
249
249
|
|
250
|
-
<img width="400" alt="
|
250
|
+
<img width="400" alt="dismissible_dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/50c8af20-46bb-4bf9-a233-78877f49e086">
|
251
251
|
|
252
252
|
<details>
|
253
253
|
<summary>Show me the code</summary>
|
254
254
|
|
255
255
|
```html+erb
|
256
|
-
<div>
|
257
|
-
<dialog
|
258
|
-
<
|
259
|
-
|
260
|
-
|
261
|
-
|
256
|
+
<div data-controller="dialog">
|
257
|
+
<dialog data-dialog-target="box" data-action="click->dialog#closeOnClickOutside" class="dialog" style="max-inline-size: 430px;">
|
258
|
+
<form method="dialog">
|
259
|
+
<button class="btn btn--plain p-0 dialog__close">
|
260
|
+
<%= image_tag "x.svg", aria: { hidden: "true" }, size: 16 %>
|
261
|
+
<span class="sr-only">Close</span>
|
262
|
+
</button>
|
263
|
+
</form>
|
262
264
|
|
263
265
|
<div class="flex flex-col gap">
|
264
266
|
<div class="flex flex-col gap-sm">
|
@@ -284,8 +286,8 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
|
|
284
286
|
</div>
|
285
287
|
</dialog>
|
286
288
|
|
287
|
-
<button class="btn"
|
288
|
-
Show
|
289
|
+
<button class="btn" data-action="dialog#showModal">
|
290
|
+
Show dialog
|
289
291
|
</button>
|
290
292
|
</div>
|
291
293
|
```
|
data/lib/css_zero/version.rb
CHANGED
@@ -13,7 +13,7 @@ card:
|
|
13
13
|
dialog:
|
14
14
|
- app/assets/stylesheets/dialog.css
|
15
15
|
- app/assets/images/x.svg
|
16
|
-
- app/javascript/controllers/
|
16
|
+
- app/javascript/controllers/dialog_controller.js
|
17
17
|
input:
|
18
18
|
- app/assets/stylesheets/input.css
|
19
19
|
- app/assets/images/select-arrow.svg
|
@@ -7,6 +7,7 @@
|
|
7
7
|
inline-size: var(--size-full);
|
8
8
|
margin: auto;
|
9
9
|
max-inline-size: var(--width-lg);
|
10
|
+
overflow: hidden;
|
10
11
|
padding: var(--size-6);
|
11
12
|
|
12
13
|
&::backdrop {
|
@@ -28,21 +29,21 @@
|
|
28
29
|
}
|
29
30
|
|
30
31
|
/* In animation */
|
31
|
-
|
32
|
+
&[open] {
|
32
33
|
opacity: 1; transform: var(--scale-100);
|
33
34
|
}
|
34
35
|
|
35
|
-
|
36
|
+
&[open]::backdrop {
|
36
37
|
opacity: 1;
|
37
38
|
}
|
38
39
|
|
39
40
|
/* Out animation */
|
40
41
|
@starting-style {
|
41
|
-
|
42
|
+
&[open] {
|
42
43
|
opacity: 0; transform: var(--scale-95);
|
43
44
|
}
|
44
45
|
|
45
|
-
|
46
|
+
&[open]::backdrop {
|
46
47
|
opacity: 0;
|
47
48
|
}
|
48
49
|
}
|
@@ -59,6 +60,6 @@
|
|
59
60
|
}
|
60
61
|
|
61
62
|
/* Prevent page scroll when dialog is open */
|
62
|
-
html:has(.dialog
|
63
|
+
html:has(.dialog[open]) {
|
63
64
|
overflow: hidden;
|
64
65
|
}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import { Controller } from "@hotwired/stimulus"
|
2
|
+
|
3
|
+
export default class extends Controller {
|
4
|
+
static targets = [ "box" ]
|
5
|
+
|
6
|
+
show() {
|
7
|
+
this.boxTarget.show()
|
8
|
+
}
|
9
|
+
|
10
|
+
showModal() {
|
11
|
+
this.boxTarget.showModal()
|
12
|
+
}
|
13
|
+
|
14
|
+
close() {
|
15
|
+
this.boxTarget.close("dismiss")
|
16
|
+
}
|
17
|
+
|
18
|
+
closeOnClickOutside({ target }) {
|
19
|
+
if (target.nodeName === "DIALOG") this.close()
|
20
|
+
}
|
21
|
+
}
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: css-zero
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.15
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Lázaro Nixon
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2024-07-
|
11
|
+
date: 2024-07-03 00:00:00.000000000 Z
|
12
12
|
dependencies: []
|
13
13
|
description:
|
14
14
|
email: lazaronixon@hotmail.com
|
@@ -51,7 +51,7 @@ files:
|
|
51
51
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
|
52
52
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
|
53
53
|
- lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css
|
54
|
-
- lib/generators/css_zero/add/templates/app/javascript/controllers/
|
54
|
+
- lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js
|
55
55
|
- lib/generators/css_zero/install/USAGE
|
56
56
|
- lib/generators/css_zero/install/install_generator.rb
|
57
57
|
- lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css
|
data/lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_control_controller.js
DELETED
@@ -1,17 +0,0 @@
|
|
1
|
-
import { Controller } from "@hotwired/stimulus"
|
2
|
-
|
3
|
-
export default class extends Controller {
|
4
|
-
static values = { target: String }
|
5
|
-
|
6
|
-
close() {
|
7
|
-
document.getElementById(this.targetValue).close()
|
8
|
-
}
|
9
|
-
|
10
|
-
show() {
|
11
|
-
document.getElementById(this.targetValue).show()
|
12
|
-
}
|
13
|
-
|
14
|
-
showModal() {
|
15
|
-
document.getElementById(this.targetValue).showModal()
|
16
|
-
}
|
17
|
-
}
|