Lots of less customization when creating and editing forms

This commit is contained in:
2023-10-20 11:38:29 -07:00
parent e3443a3dd8
commit c0db7eb763
7 changed files with 318 additions and 91 deletions

View File

@@ -1,17 +1,28 @@
(ns auto-ap.ssr.components.inputs
(:require
[hiccup2.core :as hiccup]
[auto-ap.ssr.hiccup-helper :as hh]
[clojure.string :as str]))
(def default-input-classes
["bg-gray-50" "border" "text-sm" "rounded-lg" "" "block"
"p-2.5" "border-gray-300" "text-gray-900" "focus:ring-blue-500" "focus:border-blue-500"
"dark:bg-gray-700" "dark:border-gray-600" "dark:placeholder-gray-400" "dark:text-white"
"dark:focus:ring-blue-500" "dark:focus:border-blue-500"
"group-[.has-error]:bg-red-50" "group-[.has-error]:border-red-500" "group-[.has-error]:text-red-900"
"group-[.has-error]:placeholder-red-700" "group-[.has-error]:focus:ring-red-500"
"group-[.has-error]:dark:bg-gray-700" "group-[.has-error]:focus:border-red-500"
"group-[.has-error]:dark:text-red-500" "group-[.has-error]:dark:placeholder-red-500"
"group-[.has-error]:dark:border-red-500"])
(defn select- [params & children]
(into
[:select (-> params
(dissoc :allow-blank? :value :options)
(update
:class str " bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500")
)
:class (fnil hh/add-class "") default-input-classes))
(cond->>
(map (fn [[k v]]
[:option {:value k :selected (= k (:value params))} v])
@@ -62,21 +73,22 @@ c.clearChoices();
(if (= :small size)
(str " " "text-xs p-2")
(str " " "text-sm p-2.25")))
(defn text-input- [{:keys [size] :as params}]
(defn text-input- [{:keys [size error?] :as params}]
[:input
(-> params
(dissoc :error?)
(update
:class str " bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500")
(update :class #(str % (use-size size)))
)
])
:class (fnil hh/add-class "") default-input-classes)
(update :class #(str % (use-size size))))])
(defn money-input- [{:keys [size] :as params}]
[:input
(-> params
(update
:class str " bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 text-right appearance-none"
)
(update :class (fnil hh/add-class "") default-input-classes)
(update :class hh/add-class "appearance-none text-right")
(update :class #(str % (use-size size)))
(assoc :type "number"
:step "0.01")
@@ -85,21 +97,18 @@ c.clearChoices();
(defn int-input- [{:keys [size] :as params}]
[:input
(-> params
(update
:class str " bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 text-right appearance-none"
)
(update :class (fnil hh/add-class "") default-input-classes)
(update :class hh/add-class "appearance-none text-right")
(update :class #(str % (use-size size)))
(assoc :type "number"
:step "1")
(dissoc :size))
])
(dissoc :size))])
(defn date-input- [{:keys [size] :as params}]
[:div
[:input
(-> params
(update
:class str " bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500")
(update :class (fnil hh/add-class "") default-input-classes)
(assoc :type "text")
(assoc "_" (hiccup/raw "init initDatepicker(me)"))
(assoc "hx-on" (hiccup/raw "changeDate: htmx.trigger(this, \"change\")
@@ -115,8 +124,9 @@ c.clearChoices();
[:p.mt-2.text-xs.text-red-600.dark:text-red-500.h-4 (str/join ", " errors)]))
(defn field- [params & rest]
[:div {:id (:id params)}
[:label {:class "block mb-2 text-sm font-medium text-gray-900 dark:text-white"} (:label params)]
[:div {:id (:id params) :class (hh/add-class "group" (:class params))}
(when (:label params)
[:label {:class "block mb-2 text-sm font-medium text-gray-900 dark:text-white"} (:label params)])
rest
(when (:error-source params)
(field-errors- {:source (:error-source params)
@@ -128,7 +138,9 @@ c.clearChoices();
(str/join ", " (filter string? errors)))])
(defn validated-field- [params & rest]
(field- (dissoc params :errors)
(field- (cond-> params
true (dissoc :errors)
(sequential? (:errors params)) (update :class #(hh/add-class (or % "") "has-error")))
rest
(errors- {:errors (:errors params)})))