css-zero 0.0.84 → 0.0.86

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0d6d7165606f68bfeaf5ea3257f89a0930e1e4ff4f1e98fab0a02f832cf0fb0a
-  data.tar.gz: cef16687bf6571c5e7af1454519bfb69a72cf66cfc48ca0b5ea90e809d8138e1
+  metadata.gz: 9db39d993375c71281634dcc6d4cf952d063cc91fa06a5dac1d570ed73970b4c
+  data.tar.gz: b317d56e8be1be45f5eb781c8db8a776acd43f8cf6c49058758bc65ed5573fdb
 SHA512:
-  metadata.gz: f3f726e4812aea10b251fc6dd3d3532d7ddb67899f99dfe8677742a7c7e82876273274b03cf53d6ba859e6ee1cfdfdf65123b5e2f0f99b1cd3ce02ee4c7b8add
-  data.tar.gz: 4a269b0b7868152d856552a537f09753bf6297a3cf9cbd4bb1cc9ec4d92bd5fd3cf5c5185b1f0ffb8cb8691a0aa8d2b20176cc31e67041ec822c060611f6d6f4
+  metadata.gz: 80cd9c9f10bd5dc571ebb119606cfc3c2555243157a85d1175054f3ebbed55524f5ee22d9a84e54de02eccc7d6e1855a6cf77e481f2f7ebd228259180b02b3a9
+  data.tar.gz: 97792e3a516b4eab80d530fa5f01e4f7e429c4f5201b61636ca85b4033bd6946f4109a79620620723a6760dd01d0666da44ba4fd2eee65a480dcfe3ec34ebee6

data/lib/css_zero/version.rb

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

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

@@ -35,8 +35,7 @@ combobox:
   - app/assets/images/select-arrow.svg
 command:
   - app/assets/stylesheets/command.css
-  - app/javascript/controllers/filter_controller.js
-  - app/javascript/controllers/listbox_controller.js
+  - app/javascript/controllers/command_controller.js
   - app/assets/images/search.svg
 collapsible:
   - app/javascript/controllers/collapsible_controller.js
@@ -53,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/{filter_controller.js → command_controller.js}

@@ -1,14 +1,31 @@
 import { Controller } from "@hotwired/stimulus"
 import { debounce } from "https://cdn.skypack.dev/lodash-es@4.17.21?min"
+import Combobox from "https://cdn.skypack.dev/@github/combobox-nav@3.0.1?min"
 
 export default class extends Controller {
-  static targets = [ "list" ]
+  static targets = [ "input", "list" ]
   static classes = [ "active", "selected" ]
 
   initialize() {
     this.filter = debounce(this.filter.bind(this), 300)
   }
 
+  connect() {
+    this.combobox = new Combobox(this.inputTarget, this.listTarget)
+  }
+
+  disconnect() {
+    this.combobox.destroy()
+  }
+
+  start() {
+    this.combobox.start()
+  }
+
+  stop() {
+    this.combobox.stop()
+  }
+
   filter({ target }) {
     this.#reset()
 

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.84
+  version: 0.0.86
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-01-09 00:00:00.000000000 Z
+date: 2025-01-11 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -95,17 +95,17 @@ files:
 - lib/generators/css_zero/add/templates/app/javascript/controllers/clearable_input_controller.js
 - 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
 - lib/generators/css_zero/add/templates/app/javascript/controllers/element_removal_controller.js
-- lib/generators/css_zero/add/templates/app/javascript/controllers/filter_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/form_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/fullscreen_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/hotkey_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/inputmask_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/lightbox_controller.js
-- lib/generators/css_zero/add/templates/app/javascript/controllers/listbox_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/local_time_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/menu_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/navigation_controller.js

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

@@ -1,22 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-import Listbox from "https://cdn.skypack.dev/@github/combobox-nav@3.0.1?min"
-
-export default class extends Controller {
-  static targets = [ "input", "list" ]
-
-  connect() {
-    this.listbox = new Listbox(this.inputTarget, this.listTarget)
-  }
-
-  disconnect() {
-    this.listbox.destroy()
-  }
-
-  start() {
-    this.listbox.start()
-  }
-
-  stop() {
-    this.listbox.stop()
-  }
-}