css-zero 0.0.49 → 0.0.50

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 20f634891b019d8f1daeb601e8c4f095ad0bc4a0e17e4dc8af56a265a8d578d3
-  data.tar.gz: 1be7e6e2f94347c1419523f814f60f11bac915072c171a3d657d50cf576b8ab0
+  metadata.gz: 91b801a2c291cc802d00718d9ab4cade87e214b4ba369b11f6f5a479cab99701
+  data.tar.gz: dca783296168520201298efa156a848e37667b08b275015e4ca216c9baaa091b
 SHA512:
-  metadata.gz: e49c19d5180e28cbfce2db4d3f7c21205de6708d8ef4cd340622846b52a4d089a7a32f829859e41577d68251e9d4f64cbaad629bf0d114ea9ad86087cdbe55d4
-  data.tar.gz: d2855e45ea3959712e2736746fdc1da91e0266da4bff2c0db1629317e5cff53eb4b32392841ef93b3b42e218ed369dc375bdc8249776c30e62a3cb6a8e640f2d
+  metadata.gz: 84e0431f0af1beb34e11a7ee0cd1e8a247b469880a832185b4f2d555c15133ebe622741949f51686869d3bb98673b5664503f71d0de72f702301e412a3f99dfd
+  data.tar.gz: cc5ed39f59c52469fbb6bb5e162f04da66d570350ff83982d2a211d8790b4e1424a9e4567d79f6bc8e2cf0ec8c2b14f5c4f45792a76b80909cdbf4ffb898e5e6

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.49"
+  VERSION = "0.0.50"
 end

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

@@ -25,6 +25,7 @@ check_all:
 command:
   - app/assets/stylesheets/command.css
   - app/javascript/controllers/filter_controller.js
+  - app/javascript/controllers/list_controller.js
   - app/assets/images/search.svg
 collapsible:
   - app/javascript/controllers/collapsible_controller.js

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

@@ -47,11 +47,7 @@
   --btn-outline-size: 0;
   --btn-padding: var(--size-1_5) var(--size-2);
 
-  &:hover {
-    --btn-background: var(--color-secondary);
-  }
-
-  &:focus-visible {
+  &:is(:hover, [aria-selected=true]) {
     --btn-background: var(--color-secondary);
   }
 }

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

@@ -28,11 +28,7 @@
   --btn-outline-size: 0;
   --btn-padding: var(--size-1_5) var(--size-2);
 
-  &:hover {
-    --btn-background: var(--color-secondary);
-  }
-
-  &:focus-visible {
+  &:is(:hover, :focus-visible) {
     --btn-background: var(--color-secondary);
   }
 }

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

@@ -27,16 +27,18 @@ export default class extends Controller {
   }
 
   #selectMatches(value) {
-    this.listTarget.querySelectorAll(`[data-value*=${value.toLowerCase()}]`).forEach((element) => {
+    this.listTarget.querySelectorAll(`[data-value*="${value.toLowerCase()}"]`).forEach((element) => {
       element.classList.add(this.selectedClass)
     })
   }
 
   #activate() {
     this.listTarget.classList.add(this.activeClass)
+    this.dispatch("after")
   }
 
   #deactivate() {
     this.listTarget.classList.remove(this.activeClass)
+    this.dispatch("after")
   }
 }

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

@@ -0,0 +1,79 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "list", "option" ]
+  static values  = { index: Number }
+
+  connect() {
+    this.#removeTabstops()
+    this.#selectFirstItem()
+  }
+
+  navigate(event) {
+    switch (event.key) {
+      case "ArrowUp":
+        event.preventDefault()
+        this.#prev()
+        break
+      case "ArrowDown":
+        event.preventDefault()
+        this.#next()
+        break
+      case "Enter":
+        event.preventDefault()
+        this.#clickSelected()
+        break
+    }
+  }
+
+  reset() {
+    this.indexValue = 0
+    this.#selectCurrentItem()
+  }
+
+  #prev() {
+    if (this.indexValue > 0) {
+      this.indexValue--
+      this.#selectCurrentItem()
+    }
+  }
+
+  #next() {
+    if (this.indexValue < this.#lastIndex) {
+      this.indexValue++
+      this.#selectCurrentItem()
+    }
+  }
+
+  #clickSelected() {
+    this.#visibleOptions[this.indexValue]?.click()
+  }
+
+  #removeTabstops() {
+    this.optionTargets.forEach(e => e.tabIndex = -1)
+  }
+
+  #selectFirstItem() {
+    this.optionTargets.forEach((element, index) => {
+      element.ariaSelected = index === 0
+    })
+  }
+
+  #selectCurrentItem() {
+    this.optionTargets.forEach((element, index) => {
+      element.ariaSelected = false
+    })
+
+    this.#visibleOptions.forEach((element, index) => {
+      element.ariaSelected = index === this.indexValue
+    })
+  }
+
+  get #lastIndex() {
+    return this.#visibleOptions.length -1
+  }
+
+  get #visibleOptions() {
+    return this.optionTargets.filter(e => e.offsetParent != null)
+  }
+}

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

@@ -4,43 +4,42 @@ export default class extends Controller {
   static targets = [ "item" ]
   static values  = { index: Number }
 
-  #observer
-
-  initialize() {
-    this.#observer = new IntersectionObserver(this.#resetOnVisible.bind(this))
-  }
-
   connect() {
-    this.#observer.observe(this.element)
-  }
-
-  disconnect() {
-    this.#observer.disconnect()
-  }
-
-  indexValueChanged(index, previousIndex) {
-    this.#updateTabstops(previousIndex !== undefined)
+    this.#updateTabstops()
   }
 
   prev() {
-    this.indexValue > 0 && this.indexValue--
+    if (this.indexValue > 0) {
+      this.indexValue--
+      this.#updateTabstops()
+      this.#focusCurrentItem()
+    }
   }
 
   next() {
-    this.indexValue < this.itemTargets.length -1 && this.indexValue++
+    if (this.indexValue < this.#lastIndex) {
+      this.indexValue++
+      this.#updateTabstops()
+      this.#focusCurrentItem()
+    }
   }
 
-  #resetOnVisible([ entry ]) {
-    if (entry.isIntersecting) this.indexValue = 0
+  reset() {
+    this.indexValue = 0
+    this.#updateTabstops()
   }
 
-  #updateTabstops(shouldFocus) {
+  #updateTabstops() {
     this.itemTargets.forEach((element, index) => {
-      element.tabIndex = index == this.indexValue ? 0 : -1
+      element.tabIndex = index === this.indexValue ? 0 : -1
     })
+  }
 
-    if (shouldFocus) {
-      this.itemTargets[this.indexValue].focus()
-    }
+  #focusCurrentItem() {
+    this.itemTargets[this.indexValue].focus()
+  }
+
+  get #lastIndex() {
+    return this.itemTargets.length -1
   }
 }

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

@@ -4,34 +4,47 @@ export default class extends Controller {
   static targets = [ "button", "tab" ]
   static values  = { index: Number }
 
-  indexValueChanged(index, previousIndex) {
-    this.#showCurrentTab(previousIndex !== undefined)
+  connect() {
+    this.#showCurrentTab()
   }
 
   select({ target }) {
     this.indexValue = this.buttonTargets.indexOf(target)
+    this.#showCurrentTab()
   }
 
   prev() {
-    this.indexValue > 0 && this.indexValue--
+    if (this.indexValue > 0) {
+      this.indexValue--
+      this.#showCurrentTab()
+      this.#focusCurrentButton()
+    }
   }
 
   next() {
-    this.indexValue < this.tabTargets.length -1 && this.indexValue++
+    if (this.indexValue < this.#lastIndex) {
+      this.indexValue++
+      this.#showCurrentTab()
+      this.#focusCurrentButton()
+    }
   }
 
   #showCurrentTab(shouldFocus) {
     this.buttonTargets.forEach((element, index) => {
-      element.ariaSelected = index == this.indexValue
-      element.tabIndex     = index == this.indexValue ? 0 : -1
+      element.ariaSelected = index === this.indexValue
+      element.tabIndex = index === this.indexValue ? 0 : -1
     })
 
     this.tabTargets.forEach((element, index) => {
       element.hidden = index !== this.indexValue
     })
+  }
 
-    if (shouldFocus) {
-      this.buttonTargets[this.indexValue].focus()
-    }
+  #focusCurrentButton() {
+    this.buttonTargets[this.indexValue].focus()
+  }
+
+  get #lastIndex() {
+    return this.tabTargets.length -1
   }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.49
+  version: 0.0.50
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-10-17 00:00:00.000000000 Z
+date: 2024-10-18 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -93,6 +93,7 @@ files:
 - 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/lightbox_controller.js
+- lib/generators/css_zero/add/templates/app/javascript/controllers/list_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/popover_controller.js