css-zero 0.0.78 → 0.0.79

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e2c40e19f8938e3019a7155c158ab2e0f6a0cf2b3679153f7d6f0cf4fcc49b3f
-  data.tar.gz: 7984d6ea0c08a4aa546db122814efe7a13363f40cc2f81015720fcd9baa5fac5
+  metadata.gz: ac5381f999fc236eaa78ad29eb8a89ee368cbb1414740bf14fbda48793a74118
+  data.tar.gz: dfbd29593d603f29321d5a015a1016af4868b5d0ffaf0161bf7a3161de227684
 SHA512:
-  metadata.gz: 8fc1c22536d48f5036b0dca3c06bae05d23553825c9aa5732184b7584b6474fd018cea460f4041afe05c944d55d27824aacc66fce2cf8ebd23170238beb1deae
-  data.tar.gz: abc62cb85cb42c47e7f182da9ea7821869e02a1c74d269cd603fc6200479c69cf506d0a16ae7fa94ee3ca012645720fff53a7a7b849086f7ff48dc2eadf7cbce
+  metadata.gz: 7fc56726cef33481158b4aca435b109b8f277ab1079e1c1efbcf6067d9101d47ef8bc25ea27df22ecadb3c5363186e0b1530ebc04f8c19fcee40b97001a5952f
+  data.tar.gz: 2d3edb86abcd3440ab003b4cd57981a5e28776113ddd1cccd9a83df20a2270627b25899e0dc0e00cd87b198403ac932388ace41276c030fd7465abae73d6f463

data/lib/css_zero/version.rb

@@ -1,3 +1,3 @@
 module CssZero
-  VERSION = "0.0.78"
+  VERSION = "0.0.79"
 end

data/lib/generators/css_zero/add/USAGE

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

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

@@ -120,9 +120,6 @@ table:
 tabs:
   - app/assets/stylesheets/tabs.css
   - app/javascript/controllers/tabs_controller.js
-tooltip:
-  - app/assets/stylesheets/tooltip.css
-  - app/javascript/controllers/tooltip_controller.js
 trix:
   - app/assets/stylesheets/ztrix.css
 upload_preview:

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

@@ -4,10 +4,7 @@
   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);
-  z-index: 1;
 
   /* Setup animation */
   opacity: 0;
@@ -17,26 +14,14 @@
   transition-property: display, overlay, opacity, transform;
 
   /* In animation */
-  &[open] {
+  &:popover-open {
     opacity: 1; transform: var(--scale-100);
   }
 
   /* Out animation */
   @starting-style {
-    &[open] {
+    &:popover-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/popover_controller.js

@@ -1,43 +1,37 @@
 import { Controller } from "@hotwired/stimulus"
-
-const BOTTOM_THRESHOLD = 0
+import { computePosition, flip, shift, offset, autoUpdate } from "https://cdn.skypack.dev/@floating-ui/dom@1.6.12?min"
 
 export default class extends Controller {
   static targets = [ "button", "menu" ]
-  static classes = [ "flip" ]
-
-  show() {
-    this.menuTarget.show()
-    this.#updateExpanded()
-    this.#orient()
+  static values  = { placement: { type: String, default: "bottom" } }
+  
+  initialize() {
+    this.orient = this.orient.bind(this)
   }
-
-  close() {
-    this.menuTarget.close()
-    this.#updateExpanded()
+  
+  connect() {
+    this.cleanup = autoUpdate(this.buttonTarget, this.menuTarget, this.orient)
   }
 
-  toggle() {
-    this.menuTarget.open ? this.close() : this.show()
+  disconnect() {
+    this.cleanup()
   }
-
-  closeOnClickOutside({ target }) {
-    !this.element.contains(target) && this.close()
-  }
-
-  #orient() {
-    this.menuTarget.classList.toggle(this.flipClass, this.#distanceToBottom < BOTTOM_THRESHOLD)
+  
+  show() {
+    this.menuTarget.showPopover()
   }
 
-  #updateExpanded() {
-    this.buttonTarget.ariaExpanded = this.menuTarget.open
+  hide() {
+    this.menuTarget.hidePopover()
   }
 
-  get #distanceToBottom() {
-    return window.innerHeight - this.#boundingClientRect.bottom
+  orient() {
+    computePosition(this.buttonTarget, this.menuTarget, this.#options).then(({x, y}) => {
+      Object.assign(this.menuTarget.style, { insetInlineStart: `${x}px`, insetBlockStart: `${y}px` })
+    })
   }
-
-  get #boundingClientRect() {
-    return this.menuTarget.getBoundingClientRect()
+  
+  get #options() {
+    return { placement: this.placementValue, middleware: [offset(4), flip(), shift({padding: 4})] }
   }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: css-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.78
+  version: 0.0.79
 platform: ruby
 authors:
 - Lázaro Nixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-01-04 00:00:00.000000000 Z
+date: 2025-01-05 00:00:00.000000000 Z
 dependencies: []
 description:
 email: lazaronixon@hotmail.com
@@ -84,7 +84,6 @@ files:
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/tabs.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/toggle.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/tom-select.css
-- lib/generators/css_zero/add/templates/app/assets/stylesheets/tooltip.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/zcombobox.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/zdatepicker.css
 - lib/generators/css_zero/add/templates/app/assets/stylesheets/ztrix.css
@@ -115,7 +114,6 @@ files:
 - lib/generators/css_zero/add/templates/app/javascript/controllers/revealable_input_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/sortable_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/tabs_controller.js
-- lib/generators/css_zero/add/templates/app/javascript/controllers/tooltip_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/upload_preview_controller.js
 - lib/generators/css_zero/add/templates/app/javascript/controllers/web_share_controller.js
 - lib/generators/css_zero/authentication/authentication_generator.rb

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

@@ -1,22 +0,0 @@
-.tippy-box {
-  background-color: var(--color-bg);
-  border: 1px solid var(--color-border);
-  border-radius: var(--rounded-md);
-  box-shadow: var(--shadow-md);
-  color: var(--color-text);
-  font-size: var(--text-sm);
-  line-height: var(--leading-normal);
-  transition-property: transform, visibility, opacity;
-
-  &[data-state=hidden] {
-    opacity: 0;
-  }
-
-  &[data-state=visible] {
-    transition-timing-function: var(--ease-in);
-  }
-
-  .tippy-content {
-    padding: var(--size-1_5) var(--size-3);
-  }
-}

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

@@ -1,14 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-import tippy from "https://cdn.skypack.dev/tippy.js@6.3.7?min"
-
-export default class extends Controller {
-  static values = { content: String }
-
-  connect() {
-    this.tooltip = tippy(this.element, { content: this.contentValue, arrow: false, interactive: true, delay: [700, 0], offset: [0, 3] })
-  }
-
-  disconnect() {
-    this.tooltip.destroy()
-  }
-}