css-zero 0.0.44 → 0.0.45

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ec1e04072b39a7556be9b33bc9c9736689f9463cdd1acc56076727394035a6b6
-  data.tar.gz: 54997d4c8310db5f9366cac4f51bb3db65fac4616e5336779180e8ce2ae5b5d2
+  metadata.gz: fd059d67d4f761e329571d4e4eefac0325a6cf14224717ed3581a7ffe7acaf0e
+  data.tar.gz: 13afe2beaba626b1925504904160f01ab1c5589eb87d3bbe2baa9009c3e04cc2
 SHA512:
-  metadata.gz: 480ea51dad6b42f1fd414823868aee05cb709a44038d243d931a079d037f60b477612cd289b7ee5da55ae0f635db3cbf747f0506a73cd7b8c34f89afce2f2955
-  data.tar.gz: c48c5b925f47966e8b67f3a25582e6980b70cc02f7cc3c5d89f30ac1c1262611795a2f20d18b5faead4b3a3d25980f02759bfda555287fd42ca16c179788e654
+  metadata.gz: 5bfb100356389b839542aa74775abce26f05fc0f8816df589fabb91af96892b28fac6fe2179bb8aa11476595ae7457ce0a33b9faef7b91d771151ef2100f581b
+  data.tar.gz: 340f487beff85601804945afe83121df0c2ac1cf42ddd8fa80261a746754f788e8a31f2264b159de654745a7ee56dfa8b89e37175bdcbcdd5d9ca37aa32ae436

data/README.md

@@ -19,7 +19,8 @@ bin/rails generate css_zero:install
 Add only the components you need. (Optional)
 
 ```
-bin/rails generate css_zero:add accordion alert avatar badge breadcrumb button card carousel check_all command collapsible dialog flash fullscreen hotkey input input_concerns layouts lightbox local_time pagination progress prose sheet skeleton switch table tabs upload_preview toggle web_share
+bin/rails generate css_zero:add --help
+bin/rails generate css_zero:add layouts flash button input switch table ...
 ```
 
 ### Requirements

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.44"
+  VERSION = "0.0.45"
 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_call command collapsible dialog 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 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

@@ -32,6 +32,11 @@ dialog:
   - app/assets/stylesheets/dialog.css
   - app/javascript/controllers/dialog_controller.js
   - app/assets/images/x.svg
+dropdown:
+  - app/assets/stylesheets/popover.css
+  - app/javascript/controllers/popover_controller.js
+  - app/assets/stylesheets/menu.css
+  - app/javascript/controllers/menu_controller.js
 flash:
   - app/assets/stylesheets/flash.css
   - app/javascript/controllers/element_removal_controller.js
@@ -68,6 +73,9 @@ pagination:
   - app/assets/images/chevron-right.svg
   - app/assets/images/chevron-left.svg
   - app/assets/images/ellipsis.svg
+popover:
+  - app/assets/stylesheets/popover.css
+  - app/javascript/controllers/popover_controller.js
 progress:
   - app/assets/stylesheets/progress.css
 prose:

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

@@ -1,12 +1,12 @@
 .dialog {
   background-color: var(--color-bg);
-  border-width: var(--border);
   border-radius: var(--rounded-lg);
+  border-width: var(--border);
   box-shadow: var(--shadow-lg);
   color: var(--color-text);
   inline-size: var(--size-full);
   margin: auto;
-  max-inline-size: var(--dialog-width, var(--max-i-lg));
+  max-inline-size: var(--max-i-lg);
 
   &::backdrop {
     background-color: rgba(0, 0, 0, .8);

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

@@ -0,0 +1,39 @@
+.menu {
+  display: flex;
+  flex-direction: column;
+  padding: var(--size-1);
+  gap: var(--size-1);
+}
+
+.menu__header {
+  font-size: var(--text-xs);
+  font-weight: var(--font-semibold);
+  padding: var(--size-1_5) var(--size-2);
+}
+
+.menu__group {
+  display: flex;
+  flex-direction: column;
+}
+
+.menu__separator {
+  margin-inline: -0.25rem;
+}
+
+.menu__item {
+  --btn-border-color: transparent;
+  --btn-font-weight: var(--font-normal);
+  --btn-justify-content: start;
+  --btn-outline-size: 0;
+  --btn-padding: var(--size-1_5) var(--size-2);
+
+  .menu:not(:hover) &:focus {
+    --btn-background: var(--color-secondary);
+  }
+}
+
+.menu__item-key {
+  color: var(--color-text-subtle);
+  font-size: var(--text-xs);
+  margin-inline-start: auto;
+}

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

@@ -0,0 +1,41 @@
+.popover {
+  background-color: var(--color-bg);
+  border-radius: var(--rounded-md);
+  border-width: var(--border);
+  box-shadow: var(--shadow-md);
+  color: var(--color-text);
+  margin-block: var(--size-1);
+  inline-size: var(--popover-size, max-content);
+  inset-inline-start: var(--popover-position, 0);
+
+  /* Setup animation */
+  opacity: 0;
+  transform: var(--scale-95);
+  transition-behavior: allow-discrete;
+  transition-duration: var(--time-150);
+  transition-property: display, overlay, opacity, transform;
+
+  /* In animation */
+  &[open] {
+    opacity: 1; transform: var(--scale-100);
+  }
+
+  /* Out animation */
+  @starting-style {
+    &[open] {
+      opacity: 0; transform: var(--scale-95);
+    }
+  }
+}
+
+.popover--flip {
+  inset-block-end: 100%;
+}
+
+.popover--start {
+  --popover-position: 0;
+}
+
+.popover--end {
+  --popover-position: auto;
+}

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

@@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   connect() {
-    if (this.autoselect) this.element.select()
+    this.autoselect && this.element.select()
   }
 
   get autoselect() {

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

@@ -3,10 +3,6 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = [ "menu" ]
 
-  show() {
-    this.menuTarget.show()
-  }
-
   showModal() {
     this.menuTarget.showModal()
   }
@@ -16,6 +12,6 @@ export default class extends Controller {
   }
 
   closeOnClickOutside({ target }) {
-    if (target.nodeName === "DIALOG") this.close()
+    target.nodeName === "DIALOG" && this.close()
   }
 }

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

@@ -4,7 +4,7 @@ export default class extends Controller {
   static targets = [ "button" ]
 
   connect() {
-    if (this.hasButtonTarget) this.#hideButtonIfNotSupported()
+    this.hasButtonTarget && this.#hideButtonIfNotSupported()
   }
 
   toggle() {

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

@@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   click(event) {
-    if (this.#isClickable && !this.#shouldIgnore(event)) this.element.click()
+    this.#isClickable && !this.#shouldIgnore(event) && this.element.click()
   }
 
   #shouldIgnore(event) {

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

@@ -0,0 +1,36 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "item" ]
+  static values  = { index: Number }
+
+  indexValueChanged() {
+    this.#removeTabstops()
+    this.#focusCurrentItem()
+  }
+
+  prev() {
+    this.indexValue > 0 && this.indexValue--
+  }
+
+  next() {
+    this.indexValue < this.#lastIndex && this.indexValue++
+  }
+
+  reset() {
+    this.indexValue = 0
+  }
+
+  #removeTabstops() {
+    this.itemTargets.forEach(item => item.tabIndex = -1)
+  }
+
+  #focusCurrentItem() {
+    this.itemTargets[this.indexValue].tabIndex = 0
+    this.itemTargets[this.indexValue].focus()
+  }
+
+  get #lastIndex() {
+    return this.itemTargets.length -1
+  }
+}

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

@@ -0,0 +1,54 @@
+import { Controller } from "@hotwired/stimulus"
+
+const BOTTOM_THRESHOLD = 0
+
+export default class extends Controller {
+  static targets = [ "button", "menu" ]
+  static classes = [ "flip" ]
+
+  #closeTimer
+
+  show() {
+    this.#resetTimer()
+    this.menuTarget.show()
+    this.#updateExpanded()
+    this.#orient()
+  }
+
+  close() {
+    this.menuTarget.close()
+    this.#updateExpanded()
+  }
+
+  closeLater() {
+    this.#closeTimer = setTimeout(() => this.close(), 300)
+  }
+
+  toggle() {
+    this.menuTarget.open ? this.close() : this.show()
+  }
+
+  closeOnClickOutside({ target }) {
+    !this.element.contains(target) && this.close()
+  }
+
+  #resetTimer() {
+    clearTimeout(this.#closeTimer)
+  }
+
+  #orient() {
+    this.menuTarget.classList.toggle(this.flipClass, this.#distanceToBottom < BOTTOM_THRESHOLD)
+  }
+
+  #updateExpanded() {
+    this.buttonTarget.ariaExpanded = this.menuTarget.open
+  }
+
+  get #distanceToBottom() {
+    return window.innerHeight - this.#boundingClientRect.bottom
+  }
+
+  get #boundingClientRect() {
+    return this.menuTarget.getBoundingClientRect()
+  }
+}

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

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

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

@@ -1,10 +1,10 @@
 import { Controller } from "@hotwired/stimulus"
 
+const APPLICATION_NAME = "my_application"
+
 export default class extends Controller {
   static values = { title: String, text: String, url: String, file: String }
 
-  #applicationName = 'MyApplication'
-
   connect() {
     this.element.hidden = !navigator.canShare
   }
@@ -34,7 +34,7 @@ export default class extends Controller {
   async #getFileObject() {
     const response = await fetch(this.fileValue)
     const blob = await response.blob()
-    const randomPrefix = `${this.#applicationName}_${Math.random().toString(36).slice(2)}`
+    const randomPrefix = `${APPLICATION_NAME}_${Math.random().toString(36).slice(2)}`
     const fileName = `${randomPrefix}.${blob.type.split('/').pop()}`
 
     return new File([ blob ], fileName, { type: blob.type })

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.44
+  version: 0.0.45
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-10-09 00:00:00.000000000 Z
+date: 2024-10-13 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -70,6 +70,8 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/layouts.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/lightbox.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/menu.css
+- lib/generators/css_zero/add/templates/app/assets/stylesheets/popover.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/prose.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/sheet.css
@@ -92,6 +94,8 @@ files:
 - 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/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
 - lib/generators/css_zero/add/templates/app/javascript/controllers/revealable_input_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/upload_preview_controller.js