fix: align dev target inconsistencies across hiccup, replicant, squint
- Squint section helper: add missing inner flex-column wrapper div (was putting children directly in section, unlike hiccup/replicant) - Hiccup accordion text: shorten to match replicant/squint wording - Squint dialog ID: rename "demo-dialog-sq" → "demo-dialog" to match others
This commit is contained in:
@@ -70,9 +70,9 @@
|
||||
;; ── Accordion ───────────────────────────────────────────────────────
|
||||
(defn accordion-demo []
|
||||
(section "Accordion"
|
||||
(accordion/accordion {:title "What is this framework?"} "A cross-target component library for Clojure, ClojureScript, and Squint.")
|
||||
(accordion/accordion {:title "How do I use it?" :open true} "Just require the namespace and call the component functions.")
|
||||
(accordion/accordion {:title "Is it accessible?"} "Yes, components follow ARIA best practices.")))
|
||||
(accordion/accordion {:title "What is this framework?"} "A cross-target component library.")
|
||||
(accordion/accordion {:title "How do I use it?" :open true} "Just require the namespace and call functions.")
|
||||
(accordion/accordion {:title "Is it accessible?"} "Yes, follows ARIA best practices.")))
|
||||
|
||||
;; ── Table ───────────────────────────────────────────────────────────
|
||||
(defn table-demo []
|
||||
|
||||
@@ -22,10 +22,10 @@
|
||||
(if (= current "dark") "light" "dark"))))
|
||||
|
||||
(defn section [title & children]
|
||||
(into [:section {:style {"margin-bottom" "2.5rem"}}
|
||||
[:section {:style {"margin-bottom" "2.5rem"}}
|
||||
[:h3 {:style {"color" "var(--fg-1)" "margin-bottom" "1rem"
|
||||
"border-bottom" "var(--border-0)" "padding-bottom" "0.5rem"}} title]]
|
||||
children))
|
||||
"border-bottom" "var(--border-0)" "padding-bottom" "0.5rem"}} title]
|
||||
(into [:div {:style {"display" "flex" "flex-direction" "column" "gap" "1rem"}}] children)])
|
||||
|
||||
;; ── Button ──────────────────────────────────────────────────────────
|
||||
(def button-variants ["primary" "secondary" "ghost" "danger"])
|
||||
@@ -97,18 +97,18 @@
|
||||
[:p {:style {"color" "var(--fg-2)" "font-size" "var(--font-sm)"}} "Click button to open dialog."]
|
||||
(button/button {:variant "primary"
|
||||
:on-click (fn [_]
|
||||
(when-let [el (js/document.getElementById "demo-dialog-sq")]
|
||||
(when-let [el (js/document.getElementById "demo-dialog")]
|
||||
(.showModal el)))}
|
||||
"Open dialog")
|
||||
(dialog/dialog {:id "demo-dialog-sq"}
|
||||
(dialog/dialog {:id "demo-dialog"}
|
||||
(dialog/dialog-header {} [:h3 "Dialog Title"] [:p "Are you sure you want to continue?"])
|
||||
(dialog/dialog-body {} [:p "This action cannot be undone."])
|
||||
(dialog/dialog-footer {}
|
||||
(button/button {:variant "secondary" :size "sm"
|
||||
:on-click (fn [_] (.close (js/document.getElementById "demo-dialog-sq")))}
|
||||
:on-click (fn [_] (.close (js/document.getElementById "demo-dialog")))}
|
||||
"Cancel")
|
||||
(button/button {:variant "primary" :size "sm"
|
||||
:on-click (fn [_] (.close (js/document.getElementById "demo-dialog-sq")))}
|
||||
:on-click (fn [_] (.close (js/document.getElementById "demo-dialog")))}
|
||||
"Confirm")))))
|
||||
|
||||
;; ── Spinner ─────────────────────────────────────────────────────────
|
||||
|
||||
Reference in New Issue
Block a user