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

Makes an okay experience of editing vendors through a wizard

Browse Source
This commit is contained in:
Bryce
2023-11-01 23:06:18 -07:00
parent 3211635dce
commit 99e4f05769
12 changed files with 683 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/clj/auto_ap/ssr/components/dialog.clj
View File

@@ -6,28 +6,31 @@
(defn modal- [params & children]
[:div (-> params
(assoc "@click.outside" "open=false"
:x-data (hx/json {:index 0 :hidingIndex -1 :unexpectedError false})
:x-data (hx/json {:index 0 :hidingIndex -1 :unexpectedError false :transitioning false})
"x-on:htmx:response-error" "unexpectedError=true"
"x-on:htmx:before-request" "unexpectedError=false"
:x-ref "modalStack"
"@modalnext"
"$refs.modalStack.children[index].setAttribute('x-transition:leave-end', '-translate-x-full scale-0 opacity-0' );
"@modalnext.window"
" $refs.modalStack.children[index].setAttribute('x-transition:leave-end', '-translate-x-full scale-0 opacity-0' );
$refs.modalStack.children[index + 1].setAttribute('x-transition:enter-start', 'translate-x-full scale-0 opacity-0' );
hidingIndex = index;
setTimeout(() => {index ++; hidingIndex = -1 }, 150)"
setTimeout(() => {index ++; transitioning=true; hidingIndex = -1; }, 150);
setTimeout(() => transitioning=false, 320)"
"@modalprevious"
"$refs.modalStack.children[index].setAttribute('x-transition:leave-end', 'translate-x-full scale-0 opacity-0' );
"@modalprevious.window"
" $refs.modalStack.children[index].setAttribute('x-transition:leave-end', 'translate-x-full scale-0 opacity-0' );
$refs.modalStack.children[index - 1].setAttribute('x-transition:enter-start', '-translate-x-full scale-0 opacity-0' );
hidingIndex = index;
setTimeout(() => { index --; hidingIndex = -1; }, 150)"
setTimeout(() => { index --; hidingIndex = -1; transitioning=true; }, 150);
setTimeout(() => transitioning=false, 320)"
"@modalpop"
"$refs.modalStack.children[index].setAttribute('x-transition:leave-end', 'translate-x-full scale-0 opacity-0' );
"@modalpop.window"
" $refs.modalStack.children[index].setAttribute('x-transition:leave-end', 'translate-x-full scale-0 opacity-0' );
$refs.modalStack.children[index - 1].setAttribute('x-transition:enter-start', '-translate-x-full scale-0 opacity-0' );
hidingIndex = index;
setTimeout(() => index --, 150)
setTimeout(() => { $refs.modalStack.removeChild($refs.modalStack.children[index+1]); hidingIndex=-1; }, 300)
setTimeout(() => {index --; transitioning=true;}, 150);
setTimeout(() => { $refs.modalStack.removeChild($refs.modalStack.children[index+1]); hidingIndex=-1; }, 300);
setTimeout(() => transitioning=false, 320)
"
)
(update :class (fnil hh/add-class "") "w-full h-full modal-stack"))
@@ -58,6 +61,7 @@
{:class "bg-white rounded-lg shadow dark:bg-gray-700 dark:text-white modal-content flex flex-col h-full"
:x-data (hx/json {:i index})
:x-show "index == i && hidingIndex != i"
"x-trap" "index == i && hidingIndex == -1 && !transitioning"
"x-transition:enter" "transition duration-150",
"x-transition:enter-end" "translate-x-0 scale-100 opacity-100",
"x-transition:leave" "transition duration-150",