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] (:require [auto-ap.ssr.hiccup-helper :as hh]
[auto-ap.ssr.hx :as hx])) [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}] (defn radio-card- [{:keys [options name title size orientation width] :or {size :medium width "w-48"} selected-value :value :as attrs}]
[:h3 {:class "mb-4 font-semibold text-gray-900 dark:text-white"} title] (let [htmx-attrs (select-keys attrs [:hx-post :hx-target :hx-swap :hx-include :hx-trigger])]
[: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" [:h3 {:class "mb-4 font-semibold text-gray-900 dark:text-white"} title]
(= orientation :horizontal) (-> (hh/add-class "flex gap-2 flex-wrap") [: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"
(hh/remove-wildcard ["w-" "rounded-lg" "border" "bg-"])) (= orientation :horizontal) (-> (hh/add-class "flex gap-2 flex-wrap")
true (str " " width " "))} (hh/remove-wildcard ["w-" "rounded-lg" "border" "bg-"]))
(for [{:keys [value content]} options] true (str " " width " "))}
[:li {:class (cond-> "w-full border-b border-gray-200 rounded-t-lg dark:border-gray-600" (for [{:keys [value content]} options]
(= orientation :horizontal) (-> (hh/remove-wildcard ["w-full" "rounded-"]) [:li {:class (cond-> "w-full border-b border-gray-200 rounded-t-lg dark:border-gray-600"
(hh/add-class "w-auto shrink-0 block rounded-lg border border-gray-200 dark:border-gray-600 px-3")))} (= orientation :horizontal) (-> (hh/remove-wildcard ["w-full" "rounded-"])
[:div {:class (cond-> "flex items-center" (hh/add-class "w-auto shrink-0 block rounded-lg border border-gray-200 dark:border-gray-600 px-3")))}
(not= orientation :horizontal) (hh/add-class "pl-3"))} [:div {:class (cond-> "flex items-center"
[:input (cond-> {:id (str "list-" name "-" value) (not= orientation :horizontal) (hh/add-class "pl-3"))}
:type "radio", [:input (cond-> (merge {:id (str "list-" name "-" value)
:value value :type "radio",
:name name :value value
:class :name name
(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" :class
(= size :small) (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"
(str " " "text-xs") (= size :small)
(str " " "text-xs")
(= size :medium) (= size :medium)
(str " " "text-sm"))} (str " " "text-sm"))}
(= (cond-> selected-value (keyword? selected-value) clojure.core/name) value) (assoc :checked true))] htmx-attrs)
[:label {:for (str "list-" name "-" value) (= (cond-> selected-value (keyword? selected-value) clojure.core/name) value) (assoc :checked true))]
:class [:label {:for (str "list-" name "-" value)
(cond-> "w-full ml-2 font-medium text-gray-900 dark:text-gray-300" :class
(= size :small) (cond-> "w-full ml-2 font-medium text-gray-900 dark:text-gray-300"
(str " " "text-xs py-2") (= size :small)
(str " " "text-xs py-2")
(= size :medium) (= size :medium)
(str " " "text-sm py-3") (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}] (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] [: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" [:ul {:class (cond-> "w-48 text-sm font-medium text-gray-900"
@@ -55,7 +57,7 @@
:value value :value value
:name name :name name
:class :class
(cond-> "w-4 h-4 text-blue-600" (cond-> "w-4 h-4 text-blue-600"
(= size :small) (= size :small)
(str " " "text-xs") (str " " "text-xs")
@@ -65,11 +67,11 @@
[:label {:for (str "list-" name "-" value) [:label {:for (str "list-" name "-" value)
:class :class
(cond-> "w-full ml-2 font-medium text-gray-900 dark:text-gray-300" (cond-> "w-full ml-2 font-medium text-gray-900 dark:text-gray-300"
(= size :small) (= size :small)
(str " " "text-xs py-2") (str " " "text-xs py-2")
(= size :medium) (= size :medium)
(str " " "text-sm py-3") (str " " "text-sm py-3")
(= orientation :horizontal) (= orientation :horizontal)
(hh/remove-class "w-full"))} content]]])]) (hh/remove-class "w-full"))} content]]])])