101 lines
3.7 KiB
Clojure
101 lines
3.7 KiB
Clojure
(ns auto-ap.ssr.components.inputs
|
|
(:require
|
|
[hiccup2.core :as hiccup]))
|
|
|
|
|
|
(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)
|
|
)
|
|
(for [[k v] (if (:multiple params)
|
|
(:value params)
|
|
[(:value params)])
|
|
:when k]
|
|
[:option {:value k :selected true} v]
|
|
)
|
|
|
|
[: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'});
|
|
|
|
element.addEventListener('search', function (e) {
|
|
let data = fetch('%s?q=' + e.detail.value)
|
|
.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 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- [params & rest]
|
|
(into
|
|
[:div {:id (:id params)}
|
|
[:label {:class "block mb-2 text-sm font-medium text-gray-900 dark:text-white"} (:label params)]]
|
|
rest))
|