Lots of less customization when creating and editing forms
This commit is contained in:
@@ -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)})))
|
||||
|
||||
|
||||
Reference in New Issue
Block a user