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

does not change now.

Browse Source
This commit is contained in:
Bryce
2023-10-21 12:43:01 -07:00
parent aa14a310ab
commit fc3634c6bd
4 changed files with 103 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -81,12 +81,14 @@ c.clearChoices();
: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;"
[:a {:class (-> (hh/add-class (or (:class params) "") default-input-classes)
(hh/add-class "cursor-pointer"))
"@click.prevent" "open = !open;"
"@keydown.enter.prevent.stop" "open = !open;"
:tabindex 0
:x-init (:x-init params)}
"@keydown.down.prevent.stop" "open = true;"
"@keydown.backspace" "value = {value: '', label: '' }"
:tabindex 0
:x-init (:x-init params)}
[:input (-> params
(dissoc :class)
(dissoc :value-fn)
@@ -94,42 +96,43 @@ c.clearChoices();
(dissoc :placeholder)
(assoc
"x-ref" "hidden"
:type "hidden"
":value" "value.value"
:x-init (hiccup/raw (str "$watch('value', v => $dispatch('change')); "))))]
"x-ref" "hidden"
:type "hidden"
":value" "value.value"
:x-init (hiccup/raw (str "$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"}
[:div {:class "w-3 h-3 m-1 inline ml-1 justify-self-end text-gray-500 self-center"}
svg/drop-down]]]
[:ul.dropdown-contents {:class "absolute bg-gray-50 dark:bg-gray-600 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"
[:ul.dropdown-contents {:class "absolute bg-gray-50 dark:bg-gray-600 rounded-lg shadow-lg py-1 w-max z-10 mt-1"
"@keydown.escape" "open = false; value = {value: '', label: '' }"
"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: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; console.log('is this ihid')"}
[: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"
"x-transition:leave-end" "!opacity-0 !mt-0"
"x-show " "open"
"x-trap" "open"
"@click.outside" "open=false; console.log('is this ihid')"}
[: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}) }})"}]
"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-300 [&.active]:dark:bg-primary-700 text-gray-800 dark:text-gray-100"
:href "#"
":class" "active == index ? 'active' : ''"
"@mouseover" "active = index"
"@mouseout" "active = -1"
[: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-300 [&.active]:dark:bg-primary-700 text-gray-800 dark:text-gray-100"
:href "#"
":class" "active == index ? 'active' : ''"
"@mouseover" "active = index"
"@mouseout" "active = -1"
"@click.prevent" "value = element; open=false; "
"x-html" "element.label"}]]]
"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-800 dark:text-gray-100 text-xs "}
"No results found"]]]]])