klods-ruby 0.2.1 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4e3ab8d782489ea35bb1c52b06491530b44f3c3679feb3523fa7ad95e715b4b3
-  data.tar.gz: cc6334fa4a3c4376b721eea8bf4a616866786bbab49c2b20a2fa6c7666af0af2
+  metadata.gz: 844cc92165c4952be948f23654939d6781ca0feda123c8ea10e8296e22b806a0
+  data.tar.gz: c4952d7416e7f9dbf522649725e1d28deaad0722d3ceea78899961e18186a4e6
 SHA512:
-  metadata.gz: 2300e7387f53982d140dc85858e06065d1b956320f059aa4ee90eca25d19816421d1966e9618a84c3a4034f9ae67d8d0ba426f2e3f4367f6ba9d1646f9be1035
-  data.tar.gz: 8a1dc30aa6f622e80528d8cc78ab9a7c4e10e6f50a0a6b6e13ed4e6966c550cf73ca00d01169d0c6225703857046fafc48b6f60368ea97c8e911062998076687
+  metadata.gz: df8ed9b618d7d6f9b3b9400a323e3128d70ef8ee1749ed687362c5640a5a8a3015127b6449b4d240b009496147179ac8ab15639d2dd01dbbc598ac565e20066d
+  data.tar.gz: b0ee9c030e8d944baa807a2c2971142f6b9a39889624233daba59c1caa34ec02f09f8dbec5ba7070a7b01a30b29799c6ef4a3d33d6078a5bab097fd09741c5a4

data/lib/klods/components/modal.rb

@@ -37,16 +37,56 @@ module Klods
         Core.build(tag: "div", base: "klods-modal__actions", props: props, children: children)
       end
 
+      # Close button — the × icon is provided by CSS via a ::before mask-image.
+      # Closes the containing dialog automatically via inline JS.
       def modal_close(attrs = nil)
         attrs = (attrs || {}).transform_keys(&:to_s)
         extra_class = attrs.delete("class")
         cls = Core.class_names("klods-modal__close", Core.resolve_class(extra_class))
-        final_attrs = {"type" => "button", "aria-label" => "Close"}
+        final_attrs = {
+          "type" => "button",
+          "aria-label" => "Close",
+          "onclick" => "this.closest('dialog').close()"
+        }
           .merge(attrs)
           .merge("class" => cls.empty? ? nil : cls)
           .compact
         Core.el("button", final_attrs)
       end
+
+      # Button that closes the containing <dialog> when clicked.
+      # Accepts the same props as button (e.g. variant:).
+      def modal_dismiss(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        merged = {
+          "type" => "button",
+          "onclick" => "this.closest('dialog').close()"
+        }.merge(props.transform_keys(&:to_s))
+        Core.build(
+          tag: "button", base: "klods-button",
+          modifiers: {
+            variant: ->(v) { (v && v.to_s != "default") ? "klods-button--#{v}" : nil }
+          },
+          props: merged, children: children
+        )
+      end
+
+      # Button that opens the next sibling <dialog> as a modal when clicked.
+      # Accepts the same props as button (e.g. variant:).
+      def modal_trigger(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        merged = {
+          "type" => "button",
+          "onclick" => "this.nextElementSibling.showModal()"
+        }.merge(props.transform_keys(&:to_s))
+        Core.build(
+          tag: "button", base: "klods-button",
+          modifiers: {
+            variant: ->(v) { (v && v.to_s != "default") ? "klods-button--#{v}" : nil }
+          },
+          props: merged, children: children
+        )
+      end
     end
   end
 end

data/lib/klods/components/tabs.rb

@@ -22,6 +22,18 @@ module Klods
           {panel: panel, label: label, tab_id: tab_id, panel_id: panel_id, active: i == 0}
         end
 
+        activate_tab_js =
+          "var c=this.closest('.klods-tabs');" \
+          "c.querySelectorAll('[role=tab]').forEach(t=>{" \
+          "var a=t===this;" \
+          "t.setAttribute('aria-selected',a);" \
+          "t.classList.toggle('klods-tabs__tab--active',a);" \
+          "a?t.removeAttribute('tabindex'):t.setAttribute('tabindex','-1')" \
+          "});" \
+          "c.querySelectorAll(':scope>.klods-tabs__panel').forEach(p=>{" \
+          "p.hidden=p.id!==this.getAttribute('aria-controls')" \
+          "})"
+
         tab_list = Core.el(
           "div",
           {"class" => "klods-tabs__list", "role" => "tablist"},
@@ -32,7 +44,8 @@ module Klods
               "id" => item[:tab_id],
               "aria-selected" => item[:active].to_s,
               "aria-controls" => item[:panel_id],
-              "class" => item[:active] ? "klods-tabs__tab klods-tabs__tab--active" : "klods-tabs__tab"
+              "class" => item[:active] ? "klods-tabs__tab klods-tabs__tab--active" : "klods-tabs__tab",
+              "onclick" => activate_tab_js
             }
             tab_attrs["tabindex"] = "-1" unless item[:active]
             Core.el("button", tab_attrs, item[:label])

data/lib/klods/components/toast.rb

@@ -28,9 +28,52 @@ module Klods
         )
         attrs = props.merge("role" => "status", "class" => cls.empty? ? nil : cls).compact
         body = Core.el("span", {"class" => "klods-toast__body"}, children)
-        close_btn = Core.el("button", {"type" => "button", "class" => "klods-toast__close", "aria-label" => "Dismiss"})
+        dismiss_js = "var e=this.closest('.klods-toast');if(e){e.setAttribute('data-dismissing','');var f=setTimeout(function(){e.remove()},200);e.addEventListener('animationend',function(){clearTimeout(f);e.remove()},{once:true})}"
+        close_btn = Core.el("button", {"type" => "button", "class" => "klods-toast__close", "aria-label" => "Dismiss", "onclick" => dismiss_js})
         Core.el("div", attrs, [body, close_btn])
       end
+
+      # Renders a button that dynamically creates and shows a toast on click.
+      # message: the toast body text (string). toast_variant: toast style. duration: ms (0 = persistent).
+      def toast_trigger(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        props = props.transform_keys(&:to_s)
+        message = props.delete("message")
+        message = children if message.nil?
+        variant = props.delete("toast_variant") || "default"
+        duration = props.key?("duration") ? props.delete("duration").to_i : 5000
+
+        escaped = message.to_s.gsub(/[\\']/) { |c| "\\#{c}" }
+        toast_class = (variant.to_s == "default") ? "klods-toast" : "klods-toast klods-toast--#{variant}"
+
+        dismiss_fn = "function _kd(e){e.setAttribute('data-dismissing','');var f=setTimeout(function(){e.remove()},200);e.addEventListener('animationend',function(){clearTimeout(f);e.remove()},{once:true})}"
+        get_region = "var r=document.querySelector('.klods-toast-region');" \
+          "if(!r){r=document.createElement('div');r.className='klods-toast-region';" \
+          "r.setAttribute('aria-live','polite');r.setAttribute('aria-atomic','false');" \
+          "r.setAttribute('role','region');r.setAttribute('aria-label','Notifications');" \
+          "document.body.appendChild(r)}"
+        make_toast = "var t=document.createElement('div');t.className='#{toast_class}';t.setAttribute('role','status');" \
+          "var b=document.createElement('span');b.className='klods-toast__body';b.textContent='#{escaped}';t.appendChild(b);" \
+          "var c=document.createElement('button');c.type='button';c.className='klods-toast__close';" \
+          "c.setAttribute('aria-label','Dismiss');c.onclick=function(){_kd(t)};t.appendChild(c);r.appendChild(t)"
+        auto_dismiss = (duration > 0) ? ";setTimeout(function(){_kd(t)},#{duration})" : ""
+        onclick = "(function(){#{dismiss_fn};#{get_region};#{make_toast}#{auto_dismiss}})()"
+
+        Core.build(tag: "button", base: "klods-button",
+          modifiers: {variant: ->(v) { (v && v.to_s != "default") ? "klods-button--#{v}" : nil }},
+          props: props.merge("type" => "button", "onclick" => onclick),
+          children: children)
+      end
+
+      # Renders a button that removes all visible toasts on click.
+      def clear_toasts_trigger(a = nil, b = nil)
+        props, children = Core.normalize_args(a, b)
+        onclick = "document.querySelectorAll('.klods-toast-region').forEach(function(r){r.remove()})"
+        Core.build(tag: "button", base: "klods-button",
+          modifiers: {variant: ->(v) { (v && v.to_s != "default") ? "klods-button--#{v}" : nil }},
+          props: props.transform_keys(&:to_s).merge("type" => "button", "onclick" => onclick),
+          children: children)
+      end
     end
   end
 end

data/lib/klods/components/tooltip.rb

@@ -1,8 +1,6 @@
 module Klods
   module Components
     module Tooltip
-      # tooltip(props, children) — renders the static HTML structure.
-      # Visibility is toggled by data-open via client JS; event wiring is omitted here.
       def tooltip(props, children)
         props = props.transform_keys(&:to_s)
         tip = props.delete("tip")
@@ -16,10 +14,19 @@ module Klods
           tip
         )
 
+        # Inline JS mirrors showTooltip/hideTooltip from klods-js.
+        # _kh (klods hide) is stored on the tip element to cancel pending hides.
+        show_js = "var t=this.querySelector('[role=tooltip]');if(t){clearTimeout(t._kh);t.setAttribute('data-open','')}"
+        hide_js = "var t=this.querySelector('[role=tooltip]');if(t){t._kh=setTimeout(()=>t.removeAttribute('data-open'),80)}"
+
         cls = Core.class_names("klods-tooltip", Core.resolve_class(extra_class))
         attrs = props.merge(
           "class" => cls.empty? ? nil : cls,
-          "aria-describedby" => id
+          "aria-describedby" => id,
+          "onmouseenter" => show_js,
+          "onmouseleave" => hide_js,
+          "onfocusin" => show_js,
+          "onfocusout" => "if(!this.contains(event.relatedTarget)){var t=this.querySelector('[role=tooltip]');if(t)t.removeAttribute('data-open')}"
         ).compact
 
         Core.el("span", attrs, [children, tip_node])

data/lib/klods/version.rb

@@ -1,3 +1,3 @@
 module Klods
-  VERSION = "0.2.1"
+  VERSION = "1.0.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: klods-ruby
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 1.0.0
 platform: ruby
 authors:
 - Drue Wilding