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

keyboard navigation

Browse Source
This commit is contained in:
Bryce
2024-03-27 15:57:03 -07:00
parent 13a083e053
commit 0d75df522d
5 changed files with 82 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/clj/auto_ap/ssr/components.clj
View File

@@ -21,6 +21,8 @@
(def a-icon-button buttons/a-icon-button-)
(def button-group buttons/group-)
(def button-group-button buttons/group-button-)
(def navigation-button-list buttons/navigation-button-list-)
(def navigation-button buttons/navigation-button-)
(def modal dialog/modal-)
(def modal-card dialog/modal-card-)
(def modal-card-advanced dialog/modal-card-advanced-)

75
src/clj/auto_ap/ssr/components/buttons.clj
View File

@@ -26,7 +26,7 @@
(second color))
500)
disabled-weight (when disabled 400)]
(format " bg-%s-%d hover:bg-%s-%d focus:ring-%s-%d dark:bg-%s-%d dark:hover:bg-%s-%d "
base-color
(or disabled-weight (+ base-weight 0))
@@ -41,9 +41,7 @@
(or disabled-weight (+ base-weight 100))
base-color
(or disabled-weight (+ base-weight 200))
)))
(or disabled-weight (+ base-weight 200)))))
(defn dark-color-weight [disabled]
(if disabled
@@ -57,7 +55,7 @@
(for [color ["green" "blue" "white"]
weight (range 100 900 100)]
(str "bg-" color "-" weight))
(str "bg-" color "-" weight))
;;ensuring these colors show up
;; => ("bg-green-100"
;; "bg-green-200"
@@ -85,7 +83,7 @@
;; "bg-white-800")
(defn button- [params & children]
[:button (update params
:class #(cond-> %
true (str " focus:ring-4 font-bold rounded-lg text-xs p-3 text-center mr-2 inline-flex items-center relative justify-center"
@@ -115,8 +113,7 @@
(= :secondary (:color params)) (str " text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700")
(= :primary (:color params)) (str " text-white bg-green-500 hover:bg-green-600 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 ")
(nil? (:color params))
(str " bg-white dark:bg-gray-600 border-gray-300 dark:border-gray-700 text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100 font-medium border border-gray-300 dark:border-gray-700")
))
(str " bg-white dark:bg-gray-600 border-gray-300 dark:border-gray-700 text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100 font-medium border border-gray-300 dark:border-gray-700")))
(assoc :tabindex 0)
(assoc :href (:href params "#")))
[:div.htmx-indicator.flex.items-center
@@ -143,18 +140,17 @@
[:div.htmx-indicator-hidden.inline-flex.gap-2.items-center.justify-center (into [:div.h-4.w-4] children)]]))
(defn a-icon-button- [params & children]
(into
[:a (-> params (update :class str " inline-flex items-center justify-center bg-white dark:bg-gray-600 items-center p-3 text-sm font-medium border border-gray-300 dark:border-gray-700 text-center text-gray-500 hover:text-gray-800 rounded-lg dark:text-gray-400 dark:hover:text-gray-100"
)
(update :href #(or % "")))
[:div.h-4.w-4 children]]))
(into
[:a (-> params (update :class str " inline-flex items-center justify-center bg-white dark:bg-gray-600 items-center p-3 text-sm font-medium border border-gray-300 dark:border-gray-700 text-center text-gray-500 hover:text-gray-800 rounded-lg dark:text-gray-400 dark:hover:text-gray-100")
(update :href #(or % "")))
[:div.h-4.w-4 children]]))
(defn save-button- [params & children]
[:button { :class "text-white bg-green-500 hover:bg-green-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800 inline-flex items-center hover:scale-105 transition duration-300"}
[:button {:class "text-white bg-green-500 hover:bg-green-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800 inline-flex items-center hover:scale-105 transition duration-300"}
[:div.htmx-indicator.flex.items-center
(svg/spinner {:class "inline w-4 h-4 text-white"})
[:div.ml-3 "Loading..."]]
(into [:div.htmx-indicator-hidden ] children)])
(into [:div.htmx-indicator-hidden] children)])
@@ -169,10 +165,8 @@
(str " text-xs px-3 py-2")
(= :normal size)
(str " text-sm px-4 py-2")
)
))
true (dissoc :size))] children ))
(str " text-sm px-4 py-2"))))
true (dissoc :size))] children))
(defn group- [{:keys [name]} & children]
(let [children (-> children
@@ -184,6 +178,49 @@
[:input {:type "hidden" :name name}]]
children)))
(defn navigation-button- [{:keys [class next-arrow?] :or {next-arrow? true} :as params} & children]
[:button
(-> params
(update :class (fnil hh/add-class "")
"p-4 text-green-700 border border-gray-300 rounded-lg bg-gray-50
dark:bg-gray-800 dark:border-green-800 dark:text-green-400
focus:ring-green-400 focus:ring-2
hover:border-green-300 hover:bg-green-200 hover:dark:bg-gray-800 hover:dark:border-green-800
hover:dark:text-green-400")
(dissoc :next-arrow?))
[:div
{:class "flex items-center justify-between"}
[:span {:class "sr-only"} children]
[:h3 {:class "font-medium"} children]
(when next-arrow?
[:div.w-4.h-4
svg/arrow-right])]])
(defn navigation-button-list- [{:keys []} & children]
[:ol
{:class "space-y-4 w-72"}
(for [n children]
[:li n])
#_[:li
[:div
{:class
"w-full p-4 text-gray-900 bg-gray-100 border border-gray-300 rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400",
:role "alert"}
[:div
{:class "flex items-center justify-between"}
[:span {:class "sr-only"} "Review"]
[:h3 {:class "font-medium"} "4. Review"]]]]
#_[:li
[:div
{:class
"w-full p-4 text-gray-900 bg-gray-100 border border-gray-300 rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400",
:role "alert"}
[:div
{:class "flex items-center justify-between"}
[:span {:class "sr-only"} "Confirmation"]
[:h3 {:class "font-medium"} "5. Confirmation"]]]]])
(defn validated-save-button- [{:keys [errors class] :as params} & children]
(button- (-> {:color (or (:color params) :primary)

15
src/clj/auto_ap/ssr/hx.clj
View File

@@ -20,13 +20,13 @@
(str/join ", " triggers))
(defn alpine-appear [m]
(assoc m
(assoc m
"x-transition:enter" "transition-opacity duration-500"
"x-transition:enter-start" "opacity-0"
"x-transition:enter-end" "opacity-100"))
(defn alpine-disappear [m]
(assoc m
(assoc m
"x-transition:leave" "transition duration-500"
"x-transition:leave-start" "opacity-100"
"x-transition:leave-end" "opacity-0"))
@@ -41,12 +41,15 @@
(defn bind-alpine-vals [m field->alpine-field]
(assoc m "x-bind:hx-vals"
(format "JSON.stringify({%s})"
(str/join ", "
(map
(fn [[field alpine-field]]
(format "\"%s\": $data.%s || ''" field alpine-field))
(fn [[field alpine-field]]
(format "\"%s\": $data.%s || ''" field alpine-field))
field->alpine-field)))))
field->alpine-field)))))
(defn trigger-click-or-enter [m]
(assoc m :hx-trigger "click, keyup[keyCode==13]"))

27
src/clj/auto_ap/ssr/invoice/new_invoice_wizard.clj
View File

@@ -467,19 +467,20 @@
:body (mm/default-step-body
{}
[:p.text-lg "Would you like to pay this invoice now?"]
[:div.flex.flex-col.gap-2
(com/button {:color :primary
:class "w-24"
:hx-get (hu/url (bidi.bidi/path-for ssr-routes/only-routes ::route/pay-wizard)
{:selected (:db/id snapshot)
:replace-modal true})} "Pay now")
(com/button {:color :secondary
:class "w-24"
:hx-get (hu/url (bidi.bidi/path-for ssr-routes/only-routes ::route/new-wizard)
{:replace-modal true})} "Add another")
(com/button {:class "w-24"
"@click" "$dispatch('modalclose')"}
"Close")])
(com/navigation-button-list {}
(com/navigation-button (-> {:class "w-48"
:hx-get (hu/url (bidi.bidi/path-for ssr-routes/only-routes ::route/pay-wizard)
{:selected (:db/id snapshot)
:replace-modal true})}
hx/trigger-click-or-enter) "Pay now")
(com/navigation-button (-> {:class "w-48"
:hx-get (hu/url (bidi.bidi/path-for ssr-routes/only-routes ::route/new-wizard)
{:replace-modal true})}
hx/trigger-click-or-enter) "Add another")
(com/navigation-button {:class "w-48" :next-arrow? false
"@click" "$dispatch('modalclose') "
"@keyup.enter.stop" "$dispatch('modalclose')"} "Close")))
:footer
nil
:validation-route ::route/new-wizard-navigate)))