notid/integreat
1
0
Fork 0
Code Issues Pull Requests 2 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
resources/public/output.css
View File

File diff suppressed because one or more lines are too long

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

@@ -21,6 +21,8 @@
(def a-icon-button buttons/a-icon-button-) (def a-icon-button buttons/a-icon-button-)
(def button-group buttons/group-) (def button-group buttons/group-)
(def button-group-button buttons/group-button-) (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 dialog/modal-)
(def modal-card dialog/modal-card-) (def modal-card dialog/modal-card-)
(def modal-card-advanced dialog/modal-card-advanced-) (def modal-card-advanced dialog/modal-card-advanced-)

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

@@ -41,9 +41,7 @@
(or disabled-weight (+ base-weight 100)) (or disabled-weight (+ base-weight 100))
base-color base-color
(or disabled-weight (+ base-weight 200)) (or disabled-weight (+ base-weight 200)))))
)))
(defn dark-color-weight [disabled] (defn dark-color-weight [disabled]
(if disabled (if disabled
@@ -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") (= :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 ") (= :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)) (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 :tabindex 0)
(assoc :href (:href params "#"))) (assoc :href (:href params "#")))
[:div.htmx-indicator.flex.items-center [:div.htmx-indicator.flex.items-center
@@ -144,17 +141,16 @@
(defn a-icon-button- [params & children] (defn a-icon-button- [params & children]
(into (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" [: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 % "")))
(update :href #(or % ""))) [:div.h-4.w-4 children]]))
[:div.h-4.w-4 children]]))
(defn save-button- [params & 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 [:div.htmx-indicator.flex.items-center
(svg/spinner {:class "inline w-4 h-4 text-white"}) (svg/spinner {:class "inline w-4 h-4 text-white"})
[:div.ml-3 "Loading..."]] [: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") (str " text-xs px-3 py-2")
(= :normal size) (= :normal size)
(str " text-sm px-4 py-2") (str " text-sm px-4 py-2"))))
) true (dissoc :size))] children))
))
true (dissoc :size))] children ))
(defn group- [{:keys [name]} & children] (defn group- [{:keys [name]} & children]
(let [children (-> children (let [children (-> children
@@ -184,6 +178,49 @@
[:input {:type "hidden" :name name}]] [:input {:type "hidden" :name name}]]
children))) 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] (defn validated-save-button- [{:keys [errors class] :as params} & children]
(button- (-> {:color (or (:color params) :primary) (button- (-> {:color (or (:color params) :primary)

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

@@ -45,8 +45,11 @@
(format "JSON.stringify({%s})" (format "JSON.stringify({%s})"
(str/join ", " (str/join ", "
(map (map
(fn [[field alpine-field]] (fn [[field alpine-field]]
(format "\"%s\": $data.%s || ''" 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 :body (mm/default-step-body
{} {}
[:p.text-lg "Would you like to pay this invoice now?"] [:p.text-lg "Would you like to pay this invoice now?"]
[:div.flex.flex-col.gap-2
(com/button {:color :primary (com/navigation-button-list {}
:class "w-24" (com/navigation-button (-> {:class "w-48"
:hx-get (hu/url (bidi.bidi/path-for ssr-routes/only-routes ::route/pay-wizard) :hx-get (hu/url (bidi.bidi/path-for ssr-routes/only-routes ::route/pay-wizard)
{:selected (:db/id snapshot) {:selected (:db/id snapshot)
:replace-modal true})} "Pay now") :replace-modal true})}
(com/button {:color :secondary hx/trigger-click-or-enter) "Pay now")
:class "w-24" (com/navigation-button (-> {:class "w-48"
:hx-get (hu/url (bidi.bidi/path-for ssr-routes/only-routes ::route/new-wizard) :hx-get (hu/url (bidi.bidi/path-for ssr-routes/only-routes ::route/new-wizard)
{:replace-modal true})} "Add another") {:replace-modal true})}
(com/button {:class "w-24" hx/trigger-click-or-enter) "Add another")
"@click" "$dispatch('modalclose')"} (com/navigation-button {:class "w-48" :next-arrow? false
"Close")]) "@click" "$dispatch('modalclose') "
"@keyup.enter.stop" "$dispatch('modalclose')"} "Close")))
:footer :footer
nil nil
:validation-route ::route/new-wizard-navigate))) :validation-route ::route/new-wizard-navigate)))