css-zero 0.0.48 → 0.0.50

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2c2fa4f9172129b3e90a0a4cdcb7870f5467d8cbee3fd8d9d621eebd65212912
-  data.tar.gz: 0ddf2089702a14920122e9ce9d421dc8017e6a2c3fe9aa42284b83700b83a357
+  metadata.gz: 91b801a2c291cc802d00718d9ab4cade87e214b4ba369b11f6f5a479cab99701
+  data.tar.gz: dca783296168520201298efa156a848e37667b08b275015e4ca216c9baaa091b
 SHA512:
-  metadata.gz: a98928f94335f61b029d53858d524919c940f14012bdaa9af96b22c924f03d6bff5b79c1aa774caebb4d7b494de2a9392f4e6315dc7445c9734244f09e88313f
-  data.tar.gz: d682b0a2a721c13c04e250ca332eaf1bd531b173b96552b60fd1f93f8cb94813a139b4926fdb718c423412d9151be3b18242235d0e51cc21886411ad28ab2a93
+  metadata.gz: 84e0431f0af1beb34e11a7ee0cd1e8a247b469880a832185b4f2d555c15133ebe622741949f51686869d3bb98673b5664503f71d0de72f702301e412a3f99dfd
+  data.tar.gz: cc5ed39f59c52469fbb6bb5e162f04da66d570350ff83982d2a211d8790b4e1424a9e4567d79f6bc8e2cf0ec8c2b14f5c4f45792a76b80909cdbf4ffb898e5e6

data/lib/css_zero/version.rb

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

data/lib/generators/css_zero/add/USAGE

@@ -2,7 +2,7 @@ Description:
     This will add components into your project.
 
 Components:
-  accordion alert avatar badge breadcrumb button card carousel check_all command collapsible dialog dropdown flash fullscreen hotkey input input_concerns layouts lightbox local_time pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
+  accordion alert avatar badge breadcrumb button card carousel check_all command collapsible dialog dropdown flash form fullscreen hotkey input input_concerns layouts lightbox local_time pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
 
 Example:
     bin/rails generate css_zero:add [components...]

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
@@ -40,6 +41,8 @@ dropdown:
 flash:
   - app/assets/stylesheets/flash.css
   - app/javascript/controllers/element_removal_controller.js
+form:
+  - app/javascript/controllers/form_controller.js
 fullscreen:
   - app/javascript/controllers/fullscreen_controller.js
 hotkey:
@@ -88,7 +91,6 @@ skeleton:
   - app/assets/stylesheets/skeleton.css
 switch:
   - app/assets/stylesheets/switch.css
-  - app/javascript/controllers/form_controller.js
 table:
   - app/assets/stylesheets/table.css
 tabs:

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/form_controller.js

@@ -10,4 +10,8 @@ export default class extends Controller {
   cancel() {
     this.cancelTarget?.click()
   }
+
+  preventAttachment(event) {
+    event.preventDefault()
+  }
 }

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,29 +4,42 @@ export default class extends Controller {
   static targets = [ "item" ]
   static values  = { index: Number }
 
-  indexValueChanged(index, previousIndex) {
-    this.#updateTabstops(previousIndex !== undefined)
+  connect() {
+    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()
+    }
   }
 
   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
   }
 }

data/lib/generators/css_zero/install/install_generator.rb

@@ -16,6 +16,16 @@ class CssZero::InstallGenerator < Rails::Generators::Base
     append_to_file "config/importmap.rb", %(pin_all_from "app/javascript/helpers", under: "helpers"\n)
   end
 
+  def copy_javascript_initializers
+    copy_file "app/javascript/initializers/index.js"
+  end
+
+  def pin_javascript_initializers
+    return unless install_with_importmap?
+    append_to_file "config/importmap.rb", %(pin_all_from "app/javascript/initializers", under: "initializers"\n)
+    append_to_file "app/javascript/application.js", %(import "initializers"\n)
+  end
+
   private
     def install_with_importmap?
       Rails.root.join("config/importmap.rb").exist?

data/lib/generators/css_zero/install/templates/app/javascript/initializers/index.js

@@ -0,0 +1,2 @@
+// import "initializers/current"
+// import "initializers/time_zone_cookie"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.48
+  version: 0.0.50
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-10-15 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
@@ -105,6 +106,7 @@ files:
 - lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css
 - lib/generators/css_zero/install/templates/app/javascript/helpers/cookie_helpers.js
 - lib/generators/css_zero/install/templates/app/javascript/helpers/timing_helpers.js
+- lib/generators/css_zero/install/templates/app/javascript/initializers/index.js
 homepage: https://github.com/lazaronixon/css-zero
 licenses:
 - MIT