odt-ui-rails 2.2.5 → 2.2.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fcba58b390c748340a5bfd2d50e9f54c90684e481c5973801d6747a5dd5aa646
-  data.tar.gz: f87d24815c3a9748d1afc89bb11687f655d2022890d9ca53f0589575e25ab20e
+  metadata.gz: ab34fa664bc14d7404f1775d69778c07beaa8e02a02986b249f99290cd678a24
+  data.tar.gz: acb1f1ec60f3532a9a8f2ab2d873a2cab4d01561afe86836bef75b766f0872bc
 SHA512:
-  metadata.gz: 89b0db215f2b52c3e046d0b16ea1bd9098ff4f896f4e19f31d4d1c078173444e9143da6497d491baba8ce6761fc0c419e3d4d2251eb76bad0dfc157427595c17
-  data.tar.gz: 607db973d0fea09189079c15e88c1810e45bed02f20c3b9bb6577521cc0c09776e5fac940a3f3c866de85f6d16f401553b07826ea12c486f91bedf3368787789
+  metadata.gz: e2c5806ac69d61d9fe95beba963735de017ae27356d089959d8ecb6c22aeaeace327ca1fcf89cefbd3730d1da9efd15748af951e73d2b628b3214973ddf314ae
+  data.tar.gz: 97d5a781fa5532a80c9283f469c6b8f49c2eb3ebebc6e09f3c9c2084eef29b5e3a001ff0bfbd1961933e4a68c96fdba3f74b89ab06ed242e951d1bba7934b9e7

data/README.md

@@ -58,7 +58,7 @@
 Add the gem to your application's `Gemfile`:
 
 ```ruby
-gem "odt-ui-rails", "~> 2.2.5"
+gem "odt-ui-rails", "~> 2.2.6"
 ```
 
 Install dependencies:
@@ -74,6 +74,7 @@ bin/rails g odt:install
 ```
 
 The generator will:
+
 1. Inject `<%= stylesheet_link_tag "odt_ui", "data-turbo-track": "reload" %>` into your `app/views/layouts/application.html.erb`.
 2. Configure Tailwind CSS v4 `@theme` (`odt_theme.css`) if Tailwind is detected.
 3. Copy `sig/odt_ui.rbs` for Ruby LSP IDE autocompletion.
@@ -104,7 +105,7 @@ If using Tailwind CSS v4 and you want ODT design token utilities (`bg-primary-50
 @import "./odt_theme.css";
 ```
 
-*(Note: `odt_theme.css` is placed in your tailwind assets folder by `bin/rails g odt:install`)*
+_(Note: `odt_theme.css` is placed in your tailwind assets folder by `bin/rails g odt:install`)_
 
 ---
 

data/lib/generators/odt/templates/odt_toaster_controller.js

@@ -12,6 +12,29 @@ export default class extends Controller {
     this.mutationObserver = new MutationObserver(() => this.handleMutations())
     this.mutationObserver.observe(this.element, { childList: true })
     this.handleMutations()
+
+    this.boundTriggerHandler = (event) => {
+      const trigger = event.target.closest("[data-odt-toast-message], [data-odt-toast-title]")
+      if (trigger) {
+        event.preventDefault()
+        this.show({
+          title: trigger.dataset.odtToastTitle,
+          message: trigger.dataset.odtToastMessage,
+          type: trigger.dataset.odtToastType || "default",
+          variant: trigger.dataset.odtToastVariant || "elevated",
+          duration: Number(trigger.dataset.odtToastDuration) || 4000
+        })
+      }
+    }
+    document.addEventListener("click", this.boundTriggerHandler)
+
+    window.odtToast = {
+      show: (options) => this.show(options),
+      success: (title, message) => this.show({ title, message, type: "success" }),
+      error: (title, message) => this.show({ title, message, type: "danger" }),
+      warning: (title, message) => this.show({ title, message, type: "warning" }),
+      info: (title, message) => this.show({ title, message, type: "info" })
+    }
   }
 
   disconnect() {
@@ -21,6 +44,64 @@ export default class extends Controller {
     if (this.leaveTimeout) {
       clearTimeout(this.leaveTimeout)
     }
+    if (this.boundTriggerHandler) {
+      document.removeEventListener("click", this.boundTriggerHandler)
+    }
+    if (window.odtToast) {
+      delete window.odtToast
+    }
+  }
+
+  show(eventOrOptions = {}) {
+    const options = eventOrOptions?.params || eventOrOptions || {}
+    const title = options.title || ""
+    const message = options.message || ""
+    const type = options.type || "default"
+    const variant = options.variant || "elevated"
+    const duration = options.duration !== undefined ? Number(options.duration) : 4000
+
+    const toast = document.createElement("div")
+    toast.className = `odt-toast odt-toast--variant-${variant}`
+    toast.setAttribute("role", "status")
+    toast.setAttribute("data-controller", "odt-toast")
+    toast.setAttribute("data-odt-toast-duration-value", duration.toString())
+
+    const parts = []
+
+    const icons = {
+      success: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>',
+      info: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',
+      warning: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
+      danger: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
+      error: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
+      loading: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 11-6.219-8.56"/></svg>'
+    }
+
+    if (icons[type]) {
+      parts.push(`<span class="odt-toast__icon odt-toast__icon--${type}">${icons[type]}</span>`)
+    }
+
+    let bodyHtml = '<div class="odt-toast__body">'
+    if (title) {
+      bodyHtml += `<div class="odt-toast__title">${title}</div>`
+    }
+    if (message) {
+      bodyHtml += `<div class="odt-toast__description">${message}</div>`
+    }
+    bodyHtml += '</div>'
+    parts.push(bodyHtml)
+
+    parts.push(`
+      <button type="button" class="odt-toast__close" aria-label="Close" data-action="click->odt-toast#dismiss">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+    `)
+
+    toast.innerHTML = parts.join("")
+    this.element.appendChild(toast)
   }
 
   handleMutations() {

data/lib/odt_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module OdtUi
-  VERSION = "2.2.5"
+  VERSION = "2.2.6"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: odt-ui-rails
 version: !ruby/object:Gem::Version
-  version: 2.2.5
+  version: 2.2.6
 platform: ruby
 authors:
 - Pixel