css-zero 0.0.14 → 0.0.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 534451ca0aee9a1bf1b81e3831c6716e7ac071dbf0ec5f0c2e4805ef86cf9638
-  data.tar.gz: a9a70ae47d1253368e596483adab0134242292465b8b2e4dc20df18b246c7852
+  metadata.gz: 7304e9420f4574059f34a6be6f69f7dca6d94b3e2fd0be6d497cc59bdab99a52
+  data.tar.gz: ed1bc4913357f8eac01ab39cf26f05b60399bafd9c707520d1fb59853a55de5b
 SHA512:
-  metadata.gz: ffd516034332e7b6092dfa659536321295a5047d7e4ab745725c6ea3e9b03611caf8913a89417f680bf0a660c924eaf93264b29d0b4e57681556b3b87568e380
-  data.tar.gz: 8104a1a8a350126a5d5dbe74276ffaafd76aa4f85d8156e45aaf4630edf7fc9c0add9972e21c68392deb88666697117d52a01b02f077129910e729578b65b483
+  metadata.gz: ac3e38e755a91f8b33a88f0880ceb12ff6a582a861bad0e5031147d070b0e794d779524b96e46bf4cc8640e002b8342f64b58c685afa76e04ae59c1f72484568
+  data.tar.gz: 82a577ab39f939842b1e1d1b30827f43cf692acb3cf6feeac56364793a8a6e95f0de33779971851d6ff17dfb7fc91a97d55348743674db3b309a682a0ac000da

data/README.md

@@ -227,8 +227,8 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 <summary>Show me the code</summary>
 
 ```html+erb
-<div>
-  <dialog id="alert_dialog" class="dialog">
+<div data-controller="dialog">
+  <dialog data-dialog-target="box" class="dialog">
     <h1 class="text-lg font-semibold">Are you absolutely sure?</h1>
     <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>
 
@@ -238,8 +238,8 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
     </div>
   </dialog>
 
-  <button class="btn" data-controller="dialog-control" data-dialog-control-target-value="alert_dialog" data-action="dialog-control#showModal">
-    Show alert dialog
+  <button class="btn" data-action="dialog#showModal">
+    Show dialog
   </button>
 </div>
 ```
@@ -247,18 +247,20 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 
 #### Dismissible Dialog
 
-<img width="400" alt="dismissible dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/50c8af20-46bb-4bf9-a233-78877f49e086">
+<img width="400" alt="dismissible_dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/50c8af20-46bb-4bf9-a233-78877f49e086">
 
 <details>
 <summary>Show me the code</summary>
 
 ```html+erb
-<div>
-  <dialog id="dismissible_dialog" class="dialog" style="max-inline-size: 430px;" popover>
-    <button class="btn btn--plain p-0 dialog__close" popovertarget="dismissible_dialog" popovertargetaction="hide">
-      <%= image_tag "x.svg", aria: { hidden: "true" }, size: 16 %>
-      <span class="sr-only">Close</span>
-    </button>
+<div data-controller="dialog">
+  <dialog data-dialog-target="box" data-action="click->dialog#closeOnClickOutside" class="dialog" style="max-inline-size: 430px;">
+    <form method="dialog">
+      <button class="btn btn--plain p-0 dialog__close">
+        <%= image_tag "x.svg", aria: { hidden: "true" }, size: 16 %>
+        <span class="sr-only">Close</span>
+      </button>
+    </form>
 
     <div class="flex flex-col gap">
       <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
     </div>
   </dialog>
 
-  <button class="btn" popovertarget="dismissible_dialog">
-    Show dismissible dialog
+  <button class="btn" data-action="dialog#showModal">
+    Show dialog
   </button>
 </div>
 ```

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.14"
+  VERSION = "0.0.15"
 end

data/lib/generators/css_zero/add/resources.yml

@@ -13,7 +13,7 @@ card:
 dialog:
   - app/assets/stylesheets/dialog.css
   - app/assets/images/x.svg
-  - app/javascript/controllers/dialog_control_controller.js
+  - app/javascript/controllers/dialog_controller.js
 input:
   - app/assets/stylesheets/input.css
   - app/assets/images/select-arrow.svg

data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css

@@ -7,6 +7,7 @@
   inline-size: var(--size-full);
   margin: auto;
   max-inline-size: var(--width-lg);
+  overflow: hidden;
   padding: var(--size-6);
 
   &::backdrop {
@@ -28,21 +29,21 @@
   }
 
   /* In animation */
-  &:is([open], :popover-open) {
+  &[open] {
     opacity: 1; transform: var(--scale-100);
   }
 
-  &:is([open], :popover-open)::backdrop {
+  &[open]::backdrop {
     opacity: 1;
   }
 
   /* Out animation */
   @starting-style {
-    &:is([open], :popover-open) {
+    &[open] {
       opacity: 0; transform: var(--scale-95);
     }
 
-    &:is([open], :popover-open)::backdrop {
+    &[open]::backdrop {
       opacity: 0;
     }
   }
@@ -59,6 +60,6 @@
 }
 
 /* Prevent page scroll when dialog is open */
-html:has(.dialog:is([open], :popover-open)) {
+html:has(.dialog[open]) {
   overflow: hidden;
 }

data/lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "box" ]
+
+  show() {
+    this.boxTarget.show()
+  }
+
+  showModal() {
+    this.boxTarget.showModal()
+  }
+
+  close() {
+    this.boxTarget.close("dismiss")
+  }
+
+  closeOnClickOutside({ target }) {
+    if (target.nodeName === "DIALOG") this.close()
+  }
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.14
+  version: 0.0.15
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-02 00:00:00.000000000 Z
+date: 2024-07-03 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -51,7 +51,7 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css
-- lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_control_controller.js
+- lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js
 - lib/generators/css_zero/install/USAGE
 - lib/generators/css_zero/install/install_generator.rb
 - 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

@@ -1,17 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static values = { target: String }
-
-  close() {
-    document.getElementById(this.targetValue).close()
-  }
-
-  show() {
-    document.getElementById(this.targetValue).show()
-  }
-
-  showModal() {
-    document.getElementById(this.targetValue).showModal()
-  }
-}