notid/integreat
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Fix radio-card to pass through HTMX attributes for $/% toggle

Browse Source 
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.
This commit is contained in:
Bryce
2026-05-20 23:23:19 -07:00
parent 351659f8eb
commit 535ef4d113
1 changed files with 42 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/clj/auto_ap/ssr/components/radio.clj
View File

@@ -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]]])])