css-zero 0.0.47 → 0.0.49

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e2efe1919888b0e11a440ada88d32d728814c3a96f67e877e87009836a5c9e3a
-  data.tar.gz: eac6e9c80a23b456a92dec265859959fadb0e34298904308714df91bb3220d84
+  metadata.gz: 20f634891b019d8f1daeb601e8c4f095ad0bc4a0e17e4dc8af56a265a8d578d3
+  data.tar.gz: 1be7e6e2f94347c1419523f814f60f11bac915072c171a3d657d50cf576b8ab0
 SHA512:
-  metadata.gz: 9180e92a3179e523600fe9c2a1090a56fc1625798f9d261262f0d2fe6e998e11b777db777c9a3982d7ca76570bc8d43bc68c48efc6016879462adcd23c300cab
-  data.tar.gz: e05418691df476b525df12b6df0e4a1159947bc45cc21b3d2f7378dfb7767dd235bb20f3d4fdb4dd6c481851ac60b0d2255101b3f09dd01d323bdbd27a9d7acc
+  metadata.gz: e49c19d5180e28cbfce2db4d3f7c21205de6708d8ef4cd340622846b52a4d089a7a32f829859e41577d68251e9d4f64cbaad629bf0d114ea9ad86087cdbe55d4
+  data.tar.gz: d2855e45ea3959712e2736746fdc1da91e0266da4bff2c0db1629317e5cff53eb4b32392841ef93b3b42e218ed369dc375bdc8249776c30e62a3cb6a8e640f2d

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.47"
+  VERSION = "0.0.49"
 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

@@ -40,6 +40,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 +90,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/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/menu_controller.js

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

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

@@ -6,10 +6,7 @@ export default class extends Controller {
   static targets = [ "button", "menu" ]
   static classes = [ "flip" ]
 
-  #closeTimer
-
   show() {
-    this.#resetTimer()
     this.menuTarget.show()
     this.#updateExpanded()
     this.#orient()
@@ -20,10 +17,6 @@ export default class extends Controller {
     this.#updateExpanded()
   }
 
-  closeLater() {
-    this.#closeTimer = setTimeout(() => this.close(), 300)
-  }
-
   toggle() {
     this.menuTarget.open ? this.close() : this.show()
   }
@@ -32,10 +25,6 @@ export default class extends Controller {
     !this.element.contains(target) && this.close()
   }
 
-  #resetTimer() {
-    clearTimeout(this.#closeTimer)
-  }
-
   #orient() {
     this.menuTarget.classList.toggle(this.flipClass, this.#distanceToBottom < BOTTOM_THRESHOLD)
   }

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

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

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.47
+  version: 0.0.49
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-10-15 00:00:00.000000000 Z
+date: 2024-10-17 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -105,6 +105,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