From 535ef4d113966609fc72735ee5193c228194e9db Mon Sep 17 00:00:00 2001 From: Bryce Date: Wed, 20 May 2026 23:23:19 -0700 Subject: [PATCH] Fix radio-card to pass through HTMX attributes for $/% toggle The radio-card component was ignoring HTMX attributes (:hx-post, :hx-target, etc.) passed to it. Modified the component to extract these attributes and merge them into each radio input element, so the $/% toggle now properly triggers HTMX requests when changed. --- src/clj/auto_ap/ssr/components/radio.clj | 82 ++++++++++++------------ 1 file changed, 42 insertions(+), 40 deletions(-) diff --git a/src/clj/auto_ap/ssr/components/radio.clj b/src/clj/auto_ap/ssr/components/radio.clj index aa9fc81e..7f9e633d 100644 --- a/src/clj/auto_ap/ssr/components/radio.clj +++ b/src/clj/auto_ap/ssr/components/radio.clj @@ -2,42 +2,44 @@ (:require [auto-ap.ssr.hiccup-helper :as hh] [auto-ap.ssr.hx :as hx])) -(defn radio-card- [{:keys [options name title size orientation width] :or {size :medium width "w-48"} selected-value :value}] - [:h3 {:class "mb-4 font-semibold text-gray-900 dark:text-white"} title] - [:ul {:class (cond-> " text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white" - (= orientation :horizontal) (-> (hh/add-class "flex gap-2 flex-wrap") - (hh/remove-wildcard ["w-" "rounded-lg" "border" "bg-"])) - true (str " " width " "))} - (for [{:keys [value content]} options] - [:li {:class (cond-> "w-full border-b border-gray-200 rounded-t-lg dark:border-gray-600" - (= orientation :horizontal) (-> (hh/remove-wildcard ["w-full" "rounded-"]) - (hh/add-class "w-auto shrink-0 block rounded-lg border border-gray-200 dark:border-gray-600 px-3")))} - [:div {:class (cond-> "flex items-center" - (not= orientation :horizontal) (hh/add-class "pl-3"))} - [:input (cond-> {:id (str "list-" name "-" value) - :type "radio", - :value value - :name name - :class - (cond-> "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500" - (= size :small) - (str " " "text-xs") +(defn radio-card- [{:keys [options name title size orientation width] :or {size :medium width "w-48"} selected-value :value :as attrs}] + (let [htmx-attrs (select-keys attrs [:hx-post :hx-target :hx-swap :hx-include :hx-trigger])] + [:h3 {:class "mb-4 font-semibold text-gray-900 dark:text-white"} title] + [:ul {:class (cond-> " text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white" + (= orientation :horizontal) (-> (hh/add-class "flex gap-2 flex-wrap") + (hh/remove-wildcard ["w-" "rounded-lg" "border" "bg-"])) + true (str " " width " "))} + (for [{:keys [value content]} options] + [:li {:class (cond-> "w-full border-b border-gray-200 rounded-t-lg dark:border-gray-600" + (= orientation :horizontal) (-> (hh/remove-wildcard ["w-full" "rounded-"]) + (hh/add-class "w-auto shrink-0 block rounded-lg border border-gray-200 dark:border-gray-600 px-3")))} + [:div {:class (cond-> "flex items-center" + (not= orientation :horizontal) (hh/add-class "pl-3"))} + [:input (cond-> (merge {:id (str "list-" name "-" value) + :type "radio", + :value value + :name name + :class + (cond-> "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500" + (= size :small) + (str " " "text-xs") - (= size :medium) - (str " " "text-sm"))} - (= (cond-> selected-value (keyword? selected-value) clojure.core/name) value) (assoc :checked true))] - [:label {:for (str "list-" name "-" value) - :class - (cond-> "w-full ml-2 font-medium text-gray-900 dark:text-gray-300" - (= size :small) - (str " " "text-xs py-2") + (= size :medium) + (str " " "text-sm"))} + htmx-attrs) + (= (cond-> selected-value (keyword? selected-value) clojure.core/name) value) (assoc :checked true))] + [:label {:for (str "list-" name "-" value) + :class + (cond-> "w-full ml-2 font-medium text-gray-900 dark:text-gray-300" + (= size :small) + (str " " "text-xs py-2") - (= size :medium) - (str " " "text-sm py-3") + (= size :medium) + (str " " "text-sm py-3") + + (= orientation :horizontal) + (hh/remove-class "w-full"))} content]]])])) - (= orientation :horizontal) - (hh/remove-class "w-full"))} content]]])]) - (defn radio-list- [{:keys [options name x-model title size orientation] :or {size :medium} selected-value :value}] [:h3 {:class "mb-4 font-semibold text-gray-900 dark:text-white"} title] [:ul {:class (cond-> "w-48 text-sm font-medium text-gray-900" @@ -55,7 +57,7 @@ :value value :name name :class - (cond-> "w-4 h-4 text-blue-600" + (cond-> "w-4 h-4 text-blue-600" (= size :small) (str " " "text-xs") @@ -65,11 +67,11 @@ [:label {:for (str "list-" name "-" value) :class (cond-> "w-full ml-2 font-medium text-gray-900 dark:text-gray-300" - (= size :small) - (str " " "text-xs py-2") + (= size :small) + (str " " "text-xs py-2") - (= size :medium) - (str " " "text-sm py-3") + (= size :medium) + (str " " "text-sm py-3") - (= orientation :horizontal) - (hh/remove-class "w-full"))} content]]])]) + (= orientation :horizontal) + (hh/remove-class "w-full"))} content]]])])