173 lines
8.0 KiB
Clojure
173 lines
8.0 KiB
Clojure
(ns auto-ap.ssr.components.buttons
|
|
(:require [auto-ap.ssr.svg :as svg]))
|
|
|
|
(defn button-icon- [_ i]
|
|
[:div.h-4.w-4 i])
|
|
|
|
(defn bg-colors [color disabled]
|
|
(let [base-color (cond (= :primary color)
|
|
"green"
|
|
(= :secondary color)
|
|
"blue"
|
|
|
|
(nil? color)
|
|
"white"
|
|
|
|
:else
|
|
color)
|
|
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 500)
|
|
|
|
base-color
|
|
(or disabled-weight 600)
|
|
|
|
base-color
|
|
(or disabled-weight 200)
|
|
|
|
base-color
|
|
(or disabled-weight 600)
|
|
|
|
base-color
|
|
(or disabled-weight 700)
|
|
|
|
)))
|
|
|
|
(defn dark-color-weight [disabled]
|
|
(if disabled
|
|
400
|
|
600))
|
|
|
|
(defn hover-color-weight [disabled]
|
|
(if disabled
|
|
400
|
|
600))
|
|
|
|
(for [color ["green" "blue" "white"]
|
|
weight (range 100 900 100)]
|
|
(str "bg-" color "-" weight))
|
|
;;ensuring these colors show up
|
|
;; => ("bg-green-100"
|
|
;; "bg-green-200"
|
|
;; "bg-green-300"
|
|
;; "bg-green-400"
|
|
;; "bg-green-500"
|
|
;; "bg-green-600"
|
|
;; "bg-green-700"
|
|
;; "bg-green-800"
|
|
;; "bg-blue-100"
|
|
;; "bg-blue-200"
|
|
;; "bg-blue-300"
|
|
;; "bg-blue-400"
|
|
;; "bg-blue-500"
|
|
;; "bg-blue-600"
|
|
;; "bg-blue-700"
|
|
;; "bg-blue-800"
|
|
;; "bg-white-100"
|
|
;; "bg-white-200"
|
|
;; "bg-white-300"
|
|
;; "bg-white-400"
|
|
;; "bg-white-500"
|
|
;; "bg-white-600"
|
|
;; "bg-white-700"
|
|
;; "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 justify-center"
|
|
(bg-colors (:color params) (:disabled params)))
|
|
|
|
(not (:disabled params))
|
|
(str " hover:scale-105 transition duration-100")
|
|
|
|
(:disabled params)
|
|
(str " cursor-not-allowed")
|
|
|
|
(not (nil? (:color params)))
|
|
(str " text-white ")
|
|
|
|
(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")))
|
|
[: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.inline-flex.gap-2.items-center.justify-center] children)])
|
|
|
|
(defn a-button- [params & children]
|
|
[:a (-> params
|
|
(update :class #(cond-> %
|
|
true (str " focus:ring-4 font-bold rounded-lg text-xs p-3 text-center mr-2 inline-flex items-center hover:scale-105 transition duration-100 justify-center")
|
|
(= :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")
|
|
))
|
|
(assoc :tabindex 0)
|
|
(assoc :href (:href params "#")))
|
|
[: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.inline-flex.gap-2.items-center.justify-center] children)])
|
|
|
|
(defn icon-button- [params & children]
|
|
(into
|
|
[:button
|
|
|
|
(update params :class
|
|
#(cond-> %
|
|
true (str " inline-flex items-center justify-center items-center p-3 text-sm font-medium border border-gray-300 dark:border-gray-700 text-center rounded-lg ")
|
|
(= :secondary (:color params)) (str " bg-blue-500 hover:bg-blue-600 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700")
|
|
(= :primary (:color params)) (str " bg-green-500 hover:bg-green-600 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 ")
|
|
(= :primary-light (:color params)) (str " bg-green-200 hover:bg-green-300 focus:ring-green-200 dark:bg-green-700 dark:hover:bg-green-600 text-gray-800 dark:text-gray-200")
|
|
(= :secondary-light (:color params)) (str " bg-blue-200 hover:bg-blue-300 focus:ring-blue-200 dark:bg-blue-700 dark:hover:bg-blue-600 text-gray-800 dark:text-gray-200")
|
|
(= :danger-light (:color params)) (str " bg-red-200 hover:bg-red-300 focus:ring-red-200 dark:bg-red-700 dark:hover:bg-red-600 text-gray-800 dark:text-gray-200")
|
|
(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")))
|
|
[:div.htmx-indicator.flex.items-center
|
|
(svg/spinner {:class "inline w-4 h-4 text-white"})]
|
|
[: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 (update params :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")
|
|
[: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"}
|
|
[: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)])
|
|
|
|
|
|
|
|
(defn group-button- [{:keys [size] :or {size :normal} :as params} & children]
|
|
(into [:button (cond-> params
|
|
true (assoc :type (or (:type params) "button"))
|
|
true (update :class (fn [c]
|
|
(cond-> c
|
|
true (str " font-medium text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-2 focus:ring-green-700 focus:text-green-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-green-500 dark:focus:text-white")
|
|
|
|
(= :small size)
|
|
(str " text-xs px-3 py-2")
|
|
|
|
(= :normal size)
|
|
(str " text-sm px-4 py-2")
|
|
)
|
|
))
|
|
true (dissoc :size))] children ))
|
|
|
|
(defn group- [{:keys [name]} & children]
|
|
(let [children (-> children
|
|
vec
|
|
(update-in [0 1 :class] str " rounded-l-lg")
|
|
(update-in [(dec (count children)) 1 :class] str " rounded-r-lg"))]
|
|
(into [:div {:class "inline-flex rounded-md shadow-sm", :role "group"
|
|
:hx-on:click "this.querySelector(\"input\").value = event.target.value; this.querySelector(\"input\").dispatchEvent(new Event('change', {bubbles: true}));"}
|
|
[:input {:type "hidden" :name name}]]
|
|
children)))
|