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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 534451ca0aee9a1bf1b81e3831c6716e7ac071dbf0ec5f0c2e4805ef86cf9638
4
- data.tar.gz: a9a70ae47d1253368e596483adab0134242292465b8b2e4dc20df18b246c7852
3
+ metadata.gz: 7304e9420f4574059f34a6be6f69f7dca6d94b3e2fd0be6d497cc59bdab99a52
4
+ data.tar.gz: ed1bc4913357f8eac01ab39cf26f05b60399bafd9c707520d1fb59853a55de5b
5
5
  SHA512:
6
- metadata.gz: ffd516034332e7b6092dfa659536321295a5047d7e4ab745725c6ea3e9b03611caf8913a89417f680bf0a660c924eaf93264b29d0b4e57681556b3b87568e380
7
- data.tar.gz: 8104a1a8a350126a5d5dbe74276ffaafd76aa4f85d8156e45aaf4630edf7fc9c0add9972e21c68392deb88666697117d52a01b02f077129910e729578b65b483
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 id="alert_dialog" class="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-controller="dialog-control" data-dialog-control-target-value="alert_dialog" data-action="dialog-control#showModal">
242
- Show alert dialog
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="dismissible dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/50c8af20-46bb-4bf9-a233-78877f49e086">
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 id="dismissible_dialog" class="dialog" style="max-inline-size: 430px;" popover>
258
- <button class="btn btn--plain p-0 dialog__close" popovertarget="dismissible_dialog" popovertargetaction="hide">
259
- <%= image_tag "x.svg", aria: { hidden: "true" }, size: 16 %>
260
- <span class="sr-only">Close</span>
261
- </button>
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" popovertarget="dismissible_dialog">
288
- Show dismissible dialog
289
+ <button class="btn" data-action="dialog#showModal">
290
+ Show dialog
289
291
  </button>
290
292
  </div>
291
293
  ```
@@ -1,3 +1,3 @@
1
1
  module CssZero
2
- VERSION = "0.0.14"
2
+ VERSION = "0.0.15"
3
3
  end
@@ -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/dialog_control_controller.js
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
- &:is([open], :popover-open) {
32
+ &[open] {
32
33
  opacity: 1; transform: var(--scale-100);
33
34
  }
34
35
 
35
- &:is([open], :popover-open)::backdrop {
36
+ &[open]::backdrop {
36
37
  opacity: 1;
37
38
  }
38
39
 
39
40
  /* Out animation */
40
41
  @starting-style {
41
- &:is([open], :popover-open) {
42
+ &[open] {
42
43
  opacity: 0; transform: var(--scale-95);
43
44
  }
44
45
 
45
- &:is([open], :popover-open)::backdrop {
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:is([open], :popover-open)) {
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.14
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-02 00:00:00.000000000 Z
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/dialog_control_controller.js
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
@@ -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
- }