css-zero 0.0.85 → 0.0.86

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9d55393b875fa276f7e2ea8a7968c8cbcc3d09a3321a8c5e779c6a15dd698820
-  data.tar.gz: bd3e87ca9591451c225ef969da3c1a165eab5d3922b79380b99dbb46973ad31e
+  metadata.gz: 9db39d993375c71281634dcc6d4cf952d063cc91fa06a5dac1d570ed73970b4c
+  data.tar.gz: b317d56e8be1be45f5eb781c8db8a776acd43f8cf6c49058758bc65ed5573fdb
 SHA512:
-  metadata.gz: bd4379518ff6301804054816b1d55f76d2b625892630e1b20de2c4e4699f87d822786b158063397319162505abb699ff1f97d11c121b7b80aaeba2f95b75621f
-  data.tar.gz: 64d396a25c47d11e0e868880ad756c799628850e92baad28cf6689fce0b829835b4670827a41f341e7fa943fd2e9681e7da1eeb6e2019b12d52a9b26629f27de
+  metadata.gz: 80cd9c9f10bd5dc571ebb119606cfc3c2555243157a85d1175054f3ebbed55524f5ee22d9a84e54de02eccc7d6e1855a6cf77e481f2f7ebd228259180b02b3a9
+  data.tar.gz: 97792e3a516b4eab80d530fa5f01e4f7e429c4f5201b61636ca85b4033bd6946f4109a79620620723a6760dd01d0666da44ba4fd2eee65a480dcfe3ec34ebee6

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.85"
+  VERSION = "0.0.86"
 end

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

@@ -52,6 +52,7 @@ dropdown:
   - app/javascript/controllers/popover_controller.js
   - app/assets/stylesheets/menu.css
   - app/javascript/controllers/menu_controller.js
+  - app/javascript/controllers/context_menu_controller.js
 flash:
   - app/assets/stylesheets/flash.css
   - app/javascript/controllers/element_removal_controller.js

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

@@ -37,7 +37,7 @@
   }
 
   h6 {
-    font-size: 0.9em;
+    font-size: 0.8em;
   }
 
   :is(ul, ol, menu) {

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

@@ -99,8 +99,3 @@
 .invalid .ts-control {
   border-color: var(--color-negative);
 }
-
-[data-controller*="combobox"] {
-  clip: rect(0 0 0 0);
-  position: absolute;
-}

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

@@ -0,0 +1,11 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "menu" ]
+
+  show(event) {
+    this.menuTarget.style.insetInlineStart = `${event.clientX - 5}px`
+    this.menuTarget.style.insetBlockStart  = `${event.clientY - 5}px`
+    setTimeout(() => this.menuTarget.showPopover(), 150)
+  }
+}

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

@@ -4,31 +4,46 @@ export default class extends Controller {
   static targets = [ "item" ]
   static values  = { index: Number }
 
+  #observer
+
+  initialize() {
+    this.#observer = new IntersectionObserver(this.#reset.bind(this))
+  }
+
   connect() {
-    this.#updateTabstops()
+    this.#observer.observe(this.element)
   }
 
-  reset() {
-    this.indexValue = 0
-    this.#updateTabstops()
+  disconnect() {
+    this.#observer.disconnect()
   }
 
   prev() {
     if (this.indexValue > 0) {
       this.indexValue--
-      this.#updateTabstops()
-      this.#focusCurrentItem()
+      this.#update()
     }
   }
 
   next() {
     if (this.indexValue < this.#lastIndex) {
       this.indexValue++
-      this.#updateTabstops()
-      this.#focusCurrentItem()
+      this.#update()
     }
   }
 
+  #reset([ entry ]) {
+    if (entry.isIntersecting) {
+      this.indexValue = 0
+      this.#update()
+    }
+  }
+
+  #update() {
+    this.#updateTabstops()
+    this.#focusCurrentItem()
+  }
+
   #updateTabstops() {
     this.itemTargets.forEach((element, index) => {
       element.tabIndex = index === this.indexValue ? 0 : -1

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

@@ -31,7 +31,8 @@ export default class extends Controller {
 
   orient() {
     computePosition(this.buttonTarget, this.menuTarget, this.#options).then(({x, y}) => {
-      Object.assign(this.menuTarget.style, { insetInlineStart: `${x}px`, insetBlockStart: `${y}px` })
+      this.menuTarget.style.insetInlineStart = `${x}px`
+      this.menuTarget.style.insetBlockStart  = `${y}px`
     })
   }
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.85
+  version: 0.0.86
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-01-10 00:00:00.000000000 Z
+date: 2025-01-11 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -96,6 +96,7 @@ files:
 - lib/generators/css_zero/add/templates/app/javascript/controllers/collapsible_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/combobox_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/command_controller.js
+- lib/generators/css_zero/add/templates/app/javascript/controllers/context_menu_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/copyable_input_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/datepicker_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_controller.js