135 lines
5.1 KiB
Clojure
135 lines
5.1 KiB
Clojure
(ns auto-ap.ssr.components.inputs
|
|
(:require
|
|
[hiccup2.core :as hiccup]
|
|
[clojure.string :as str]))
|
|
|
|
|
|
(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")
|
|
|
|
)
|
|
(cond->>
|
|
(map (fn [[k v]]
|
|
[:option {:value k :selected (= k (:value params))} v])
|
|
(:options params))
|
|
(:allow-blank? params) (conj [:option {:value "" :selected (not (:value params))} ""]))]
|
|
children))
|
|
|
|
(defn typeahead- [params]
|
|
[:select (-> params
|
|
(dissoc :url)
|
|
(dissoc :value)
|
|
(dissoc :value-fn)
|
|
(dissoc :content-fn))
|
|
(for [value (if (:multiple params)
|
|
(:value params)
|
|
[(:value params)])
|
|
:when ((:value-fn params first) value)]
|
|
[:option {:value ((:value-fn params first) value) :selected true} ((:content-fn params second) value)])
|
|
|
|
[:script {:lang "javascript"}
|
|
(hiccup/raw (format "
|
|
(function () {
|
|
var element = document.getElementById('%s');
|
|
var c = new Choices(element, {removeItems: true, removeItemButton:true, searchFloor: 3, searchPlaceholderValue: '%s'});
|
|
let baseUrl = '%s';
|
|
|
|
element.addEventListener('search', function (e) {
|
|
let fullUrl = baseUrl + (baseUrl.includes(\"?\") ? \"&\" : \"?\") + \"q=\" + e.detail.value;
|
|
let data = fetch(fullUrl)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
c.setChoices(data, 'value', 'label', true)
|
|
});
|
|
});
|
|
element.addEventListener('choice', function (e) {
|
|
c.clearChoices();
|
|
})
|
|
})();
|
|
|
|
"
|
|
(:id params)
|
|
(:placeholder params)
|
|
(:url params)
|
|
))]])
|
|
|
|
|
|
(defn use-size [size]
|
|
(if (= :small size)
|
|
(str " " "text-xs p-2")
|
|
(str " " "text-sm p-2.25")))
|
|
(defn text-input- [{:keys [size] :as params}]
|
|
[:input
|
|
(-> params
|
|
(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)))
|
|
)
|
|
])
|
|
|
|
(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 #(str % (use-size size)))
|
|
(assoc :type "number"
|
|
:step "0.01")
|
|
(dissoc :size))])
|
|
|
|
(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 #(str % (use-size size)))
|
|
(assoc :type "number"
|
|
:step "1")
|
|
(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")
|
|
(assoc :type "text")
|
|
(assoc "_" (hiccup/raw "init initDatepicker(me)"))
|
|
(assoc "hx-on" (hiccup/raw "changeDate: htmx.trigger(this, \"change\")
|
|
htmx:beforeCleanupElement: this.dp.destroy()"))
|
|
(update :class #(str % (use-size size)))
|
|
(dissoc :size))]])
|
|
|
|
|
|
|
|
(defn field-errors- [{:keys [source key]} & rest]
|
|
(let [errors (:errors (cond-> (meta source)
|
|
key (get key)))]
|
|
[: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)]
|
|
rest
|
|
(when (:error-source params)
|
|
(field-errors- {:source (:error-source params)
|
|
:key (:error-key params)}))])
|
|
|
|
(defn errors- [{:keys [errors]}]
|
|
[:p.mt-2.text-xs.text-red-600.dark:text-red-500.h-4 (str/join ", " errors)])
|
|
|
|
(defn validated-field- [params & rest]
|
|
(field- (dissoc params :errors)
|
|
rest
|
|
(errors- {:errors (:errors params)})))
|
|
|
|
(defn hidden- [{:keys [name value]}]
|
|
[:input {:type "hidden" :value value :name name}])
|