css-zero 0.0.13 → 0.0.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9fa9b5a675b170c1792a89b840dea6339ee14768644531ec3a1d2b465068e4f5
-  data.tar.gz: 165ee0886c7f61ffe76c06545b367c6b1c5a3cb883a49345433dd6965b748e6b
+  metadata.gz: 7304e9420f4574059f34a6be6f69f7dca6d94b3e2fd0be6d497cc59bdab99a52
+  data.tar.gz: ed1bc4913357f8eac01ab39cf26f05b60399bafd9c707520d1fb59853a55de5b
 SHA512:
-  metadata.gz: f6c36eb3cc7eb625ee8ed8255bac1aaa409e30ae6202a3e1e6683df5f3be36c74f052d011ba49ed7fda0a1d91dc5fea3ef24aa15392e9ccf0b7c3b1431280dcb
-  data.tar.gz: 52f6d8133c48e4b9e6fd0e6c57f844a7121a516d6cbef6fefac54a0db69759cf42224d9963431eabb05158d802b6a4f1271d869abf056988d034b9bced5d2120
+  metadata.gz: ac3e38e755a91f8b33a88f0880ceb12ff6a582a861bad0e5031147d070b0e794d779524b96e46bf4cc8640e002b8342f64b58c685afa76e04ae59c1f72484568
+  data.tar.gz: 82a577ab39f939842b1e1d1b30827f43cf692acb3cf6feeac56364793a8a6e95f0de33779971851d6ff17dfb7fc91a97d55348743674db3b309a682a0ac000da

data/README.md

@@ -19,7 +19,7 @@ bin/rails generate css_zero:install
 Add only the components you need. (Optional)
 
 ```
-bin/rails generate css_zero:add accordion alert alert_dialog badge button card dialog input progress switch table
+bin/rails generate css_zero:add accordion alert badge button card dialog input progress switch table
 ```
 
 ### Requirements
@@ -96,7 +96,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 <details>
 <summary>Show me the code</summary>
 
-```html
+```html+erb
 <div class="accordion">
   <details name="my_accordion">
     <summary>Is it accessible?</summary>
@@ -132,32 +132,6 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 ```
 </details>
 
-### Alert Dialog
-
-<img width="500" alt="alert_dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/483b00fc-0330-45b3-82c5-dc4118987564">
-
-<details>
-<summary>Show me the code</summary>
-
-```html
-<div>
-  <dialog id="my_alert_dialog" class="alert-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>
-
-    <div class="flex justify-end gap-sm mbs-4">
-      <form method="dialog"><button class="btn btn--outline">Cancel</button></form>
-      <button class="btn btn--primary">Continue</button>
-    </div>
-  </dialog>
-
-  <button class="btn" data-controller="dialog-control" data-dialog-control-target-value="my_alert_dialog" data-action="dialog-control#showModal">
-    Show alert dialog
-  </button>
-</div>
-```
-</details>
-
 ### Badge
 
 <img width="400" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/6a700dc4-0fd5-46f6-9902-a9bde5f7febb">
@@ -165,7 +139,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 <details>
 <summary>Show me the code</summary>
 
-```html
+```html+erb
 <div class="flex justify-start gap">
   <div class="badge">Badge</div>
   <div class="badge badge--secondary">Secondary</div>
@@ -183,7 +157,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 <details>
 <summary>Show me the code</summary>
 
-```html
+```html+erb
 <div class="flex flex-wrap items-center gap" aria-busy>
   <button class="btn">Primary</button>
   <button class="btn btn--secondary">Secondary</button>
@@ -211,7 +185,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 <details>
 <summary>Show me the code</summary>
 
-```html
+```html+erb
 <div class="card flex flex-col gap" style="width: 350px; gap: 1.5rem;">
   <div class="flex flex-col gap-sm">
     <h1 class="text-2xl font-semibold leading-none">Create project</h1>
@@ -245,19 +219,48 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 
 ### Dialog
 
-<img width="400" alt="dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/50c8af20-46bb-4bf9-a233-78877f49e086">
+#### Alert Dialog
+
+<img width="500" alt="alert_dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/483b00fc-0330-45b3-82c5-dc4118987564">
 
 <details>
 <summary>Show me the code</summary>
 
-```html
-<artice class="flex flex-col pb-10 pi-2 mi-auto w-full" style="gap: 4rem; max-width: 32rem">
-<div>
-  <dialog id="my_dialog" class="dialog" style="max-inline-size: 430px;" popover>
-    <button class="btn btn--plain p-0 dialog__close" popovertarget="my_dialog" popovertargetaction="hide">
-      <%= image_tag "x.svg", aria: { hidden: "true" }, size: 16 %>
-      <span class="sr-only">Close</span>
-    </button>
+```html+erb
+<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>
+
+    <div class="flex justify-end gap-sm mbs-4">
+      <form method="dialog"><button class="btn btn--outline">Cancel</button></form>
+      <button class="btn btn--primary">Continue</button>
+    </div>
+  </dialog>
+
+  <button class="btn" data-action="dialog#showModal">
+    Show dialog
+  </button>
+</div>
+```
+</details>
+
+#### Dismissible Dialog
+
+<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 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">
@@ -283,7 +286,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
     </div>
   </dialog>
 
-  <button class="btn" popovertarget="my_dialog">
+  <button class="btn" data-action="dialog#showModal">
     Show dialog
   </button>
 </div>
@@ -364,7 +367,7 @@ Check the [CSS files](app/assets/stylesheets) in the repository to see the avail
 <details>
 <summary>Show me the code</summary>
 
-```html
+```html+erb
 <table class="table">
   <thead>
     <tr>

data/lib/css_zero/version.rb

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

data/lib/generators/css_zero/add/USAGE

@@ -2,7 +2,7 @@ Description:
     This will add components into your project.
 
 Components:
-  accordion alert alert_dialog badge button card dialog input progress switch table
+  accordion alert badge button card dialog input progress switch table
 
 Example:
     bin/rails generate css_zero:add [components...]

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

@@ -3,9 +3,6 @@ accordion:
   - app/assets/images/chevron-down.svg
 alert:
   - app/assets/stylesheets/alert.css
-alert_dialog:
-  - app/assets/stylesheets/alert_dialog.css
-  - app/javascript/controllers/dialog_control_controller.js
 badge:
   - app/assets/stylesheets/badge.css
 button:
@@ -16,6 +13,7 @@ card:
 dialog:
   - app/assets/stylesheets/dialog.css
   - app/assets/images/x.svg
+  - 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 */
-  &:popover-open {
+  &[open] {
     opacity: 1; transform: var(--scale-100);
   }
 
-  &:popover-open::backdrop {
+  &[open]::backdrop {
     opacity: 1;
   }
 
   /* Out animation */
   @starting-style {
-    &:popover-open {
+    &[open] {
       opacity: 0; transform: var(--scale-95);
     }
 
-    &:popover-open::backdrop {
+    &[open]::backdrop {
       opacity: 0;
     }
   }
@@ -59,6 +60,6 @@
 }
 
 /* Prevent page scroll when dialog is open */
-html:has(.dialog: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.13
+  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
@@ -43,7 +43,6 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/images/x.svg
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/alert.css
-- lib/generators/css_zero/add/templates/app/assets/stylesheets/alert_dialog.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/badge.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css
@@ -52,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/assets/stylesheets/alert_dialog.css

@@ -1,59 +0,0 @@
-.alert-dialog {
-  background-color: var(--color-bg);
-  border-width: var(--border);
-  border-radius: var(--rounded-lg);
-  box-shadow: var(--shadow-lg);
-  color: var(--color-text);
-  inline-size: var(--size-full);
-  margin: auto;
-  max-inline-size: var(--width-lg);
-  padding: var(--size-6);
-
-  &::backdrop {
-    background-color: rgba(0, 0, 0, .8);
-  }
-
-  /* Setup animation */
-  opacity: 0;
-  transform: var(--scale-95);
-  transition-behavior: allow-discrete;
-  transition-duration: var(--time-150);
-  transition-property: display overlay opacity transform;
-
-  &::backdrop {
-    opacity: 0;
-    transition-behavior: allow-discrete;
-    transition-duration: var(--time-150);
-    transition-property: display overlay opacity;
-  }
-
-  /* In animation */
-  &[open] {
-    opacity: 1; transform: var(--scale-100);
-  }
-
-  &[open]::backdrop {
-    opacity: 1;
-  }
-
-  /* Out animation */
-  @starting-style {
-    &[open] {
-      opacity: 0; transform: var(--scale-95);
-    }
-
-    &[open]::backdrop {
-      opacity: 0;
-    }
-  }
-
-  /* Small screens */
-  @media (width < 40rem) {
-    border-radius: 0;
-  }
-}
-
-/* Prevent page scroll when alert dialog is open */
-html:has(.alert-dialog[open]) {
-  overflow: hidden;
-}

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()
-  }
-}