notid/integreat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

alpine for dropdown.

Browse Source
This commit is contained in:
Bryce
2023-10-20 17:52:15 -07:00
parent 8684a68471
commit ffcc43ba5e
8 changed files with 215 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/clj/auto_ap/ssr/components/inputs.clj
View File

@@ -2,7 +2,9 @@
(:require
[hiccup2.core :as hiccup]
[auto-ap.ssr.hiccup-helper :as hh]
[clojure.string :as str]))
[clojure.string :as str]
[auto-ap.ssr.svg :as svg]
[auto-ap.ssr.hx :as hx]))
(def default-input-classes
@@ -68,6 +70,72 @@ c.clearChoices();
(:url params)
))]])
(defn typeahead-2- [params]
[:div {:x-data (hx/json {:open false
:baseUrl (if (str/includes? (:url params) "?")
(str (:url params) "&q=")
(str (:url params) "?q="))
:value {:value ((:value-fn params first) (:value params)) :label ((:content-fn params second) (:value params))}
:search ""
:active 0
:elements (if (:value params)
[{:value ((:value-fn params first) (:value params)) :label ((:content-fn params second) (:value params))}]
[])})
}
[:a {:class (-> (hh/add-class (or (:class params) "") default-input-classes)
(hh/add-class "cursor-pointer"))
"@click.prevent.stop" "open = !open;"
"@keydown.enter.prevent.stop" "open = !open;"
:x-init (:x-init params)
:tabindex 0}
[:input (-> params
(dissoc :class)
(dissoc :value-fn)
(dissoc :content-fn)
(dissoc :x-init)
(dissoc :placeholder)
(assoc
"x-ref" "hidden"
:type "hidden"
":value" "value.value"
:x-init "$watch('value', v => $dispatch('change'))"))]
[:div.flex.w-full.justify-items-stretch
[:span.flex-grow.text-left {"x-text" "value.label"}]
[:div {:class "w-5 h-5 inline ml-1 justify-self-end"}
svg/drop-down]]]
[:ul.dropdown-contents {:class "absolute bg-white rounded-lg shadow-lg py-1 w-max z-10 mt-1"
"@keydown.escape.window" "open = false"
"x-transition:enter" "ease-[cubic-bezier(.3,2.3,.6,1)] duration-200"
"x-transition:enter-start" "!opacity-0 !mt-0"
"x-transition:enter-end" "!opacity-1 !mt-1"
"x-transition:leave" "ease-out duration-200"
"x-transition:leave-start" "!opacity-1 !mt-1"
"x-transition:leave-end" "!opacity-0 !mt-0"
"x-show ""open"
"x-trap" "open"
"@click.outside" "open=false"}
[:input {:type "text" :class (hh/add-class (or (:class params) "") default-input-classes)
"x-model" "search"
"placeholder" (:placeholder params)
"@keydown.down.prevent" "active ++; active = active >= elements.length - 1 ? elements.length - 1 : active"
"@keydown.up.prevent" "active --; active = active < 0 ? 0 : active"
"@keydown.enter.prevent" "open = false; value = elements.length > 0 ? $data.elements[active] : {'value': '', label: ''}; console.log('are we here')"
"x-init" "$watch('search', s => { if($el.value.length > 2) {fetch(baseUrl + s).then(data=>data.json()).then(data => {elements = data; active=-1}) }})"}]
[:div.dropdown-options
[:template {:x-for "(element, index) in elements"}
[:li [:a {:class "px-4 py-2 flex gap-2 items-center outline-0 focus:bg-neutral-100 hover:bg-neutral-100 whitespace-nowrap [&.active]:bg-primary-500"
:href "#"
":class" "active == index ? 'active' : ''"
"@mouseover" "active = index"
"@mouseout" "active = -1"
"@click.prevent" "value = element; open=false; "
"x-html" "element.label"
}]]]
[:template {:x-if "elements.length == 0"}
[:li {:class "px-4 py-2 flex gap-2 items-center outline-0 focus:bg-neutral-100 hover:bg-neutral-100 whitespace-nowrap [&.active]:bg-primary-500 text-gray-500 text-xs "}
"No results found"]]]]])
(defn use-size [size]
(if (= :small size)