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

popper makes it work better.

Browse Source
This commit is contained in:
Bryce
2023-10-25 13:30:40 -07:00
parent deaad7513c
commit 3f36936063
2 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -80,18 +80,22 @@ c.clearChoices();
:active -1 :active -1
:elements (if ((:value-fn params identity) (:value params)) :elements (if ((:value-fn params identity) (:value params))
[{:value ((:value-fn params identity) (:value params)) :label ((:content-fn params identity) (:value params))}] [{:value ((:value-fn params identity) (:value params)) :label ((:content-fn params identity) (:value params))}]
[])}) [])
:popper nil})
:x-modelable "value.value" :x-modelable "value.value"
:x-model (:x-model params) :x-model (:x-model params)
:class "relative"} :x-init "popper = Popper.createPopper($refs.input, $refs.dropdown, {placement: 'bottom-start', strategy: 'fixed'})"
}
[:a {:class (-> (hh/add-class (or (:class params) "") default-input-classes) [:a {:class (-> (hh/add-class (or (:class params) "") default-input-classes)
(hh/add-class "cursor-pointer")) (hh/add-class "cursor-pointer"))
"@click.prevent" "open = !open;" "@click.prevent" "open = !open; popper.update()"
"@keydown.enter.prevent.stop" "open = !open;" "@keydown.enter.prevent.stop" "open = !open; popper.update()"
"@keydown.down.prevent.stop" "open = true;" "@keydown.down.prevent.stop" "open = true; popper.update()"
"@keydown.backspace" "value = {value: '', label: '' }" "@keydown.backspace" "value = {value: '', label: '' }"
:tabindex 0 :tabindex 0
:x-init (:x-init params)} :x-init (:x-init params)
:x-ref "input"
}
[:input (-> params [:input (-> params
(dissoc :class) (dissoc :class)
(dissoc :value-fn) (dissoc :value-fn)
@@ -109,7 +113,8 @@ c.clearChoices();
[:div {:class "w-3 h-3 m-1 inline ml-1 justify-self-end text-gray-500 self-center"} [:div {:class "w-3 h-3 m-1 inline ml-1 justify-self-end text-gray-500 self-center"}
svg/drop-down]]] svg/drop-down]]]
[:ul.dropdown-contents {:class "absolute bg-gray-50 dark:bg-gray-600 rounded-lg shadow-lg py-1 w-max z-50 mt-1" [:ul.dropdown-contents {:class "bg-gray-100 dark:bg-gray-600 rounded-lg shadow-lg py-1 w-max z-50"
"x-ref" "dropdown"
"@keydown.escape" "open = false; value = {value: '', label: '' }" "@keydown.escape" "open = false; value = {value: '', label: '' }"
"x-transition:enter" "ease-[cubic-bezier(.3,2.3,.6,1)] duration-200" "x-transition:enter" "ease-[cubic-bezier(.3,2.3,.6,1)] duration-200"
"x-transition:enter-start" "!opacity-0 !mt-0" "x-transition:enter-start" "!opacity-0 !mt-0"

3
src/clj/auto_ap/ssr/ui.clj
View File

@@ -61,9 +61,12 @@ input[type=number] {
-moz-appearance:textfield; /* Firefox */ -moz-appearance:textfield; /* Firefox */
} "] } "]
[:body {:hx-ext "disable-submit"} [:body {:hx-ext "disable-submit"}
contents contents
[:script {:src "/js/flowbite.min.js"}] [:script {:src "/js/flowbite.min.js"}]
[:div#tooltip.bg-red-500.p-12 {:role "tooltip"}]
[:div#modal-holder [:div#modal-holder
{:tabindex "-1", :class "fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen" {:tabindex "-1", :class "fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen"
"x-show" "open" "x-show" "open"