feat(ssr): restore forward/back step slide in the wizard engine
The engine migration replaced the old mm/* modal-stack wizards (which slid forward/back between steps) with wizard2, but never carried the slide over — step transitions went flat. Restore the original mechanism in the shared engine so all wizards (new-invoice, vendor, client, pay, transaction-rule) get it: - wizard2/step-slide-classes: the group-[.forward]/transition:htmx-* and group-[.backward]/* slide variants, applied to the swapped <form>. - wizard2/transitioner: the #transitioner wrapper whose @htmx:after-request hook reads the x-transition-type response header and toggles group/transition + forward|backward on itself. All 5 configs' :open-response now use it. - wizard2/handle-step-submit sets x-transition-type (forward on advance, backward on Back, none on a same-step validation re-render) + HX-reswap "outerHTML swap:0.16s" so the slide-out plays before the swap. Direction computed from step order (transition-type). - Removed the interim per-card fade-in in favor of this. - Rebuilt output.css so the 16 fwd + 16 back slide variants are compiled. REPL-verified: open-wizard emits the transitioner, the form carries the slide classes, and submit responses carry the transition headers. Live verification needs a server refresh (the dev server froze its route table at startup). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1609,10 +1609,6 @@ input:checked + .toggle-bg {
|
||||
width: 5em;
|
||||
}
|
||||
|
||||
.w-\[600px\] {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.w-\[700px\] {
|
||||
width: 700px;
|
||||
}
|
||||
@@ -3996,6 +3992,44 @@ input:checked + .toggle-bg {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.group\/transition.backward .group-\[\.backward\]\/transition\:htmx-swapping\:translate-x-1\/4.htmx-swapping {
|
||||
--tw-translate-x: 25%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.group\/transition.forward .group-\[\.forward\]\/transition\:htmx-swapping\:-translate-x-1\/4.htmx-swapping {
|
||||
--tw-translate-x: -25%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.group\/transition.backward .group-\[\.backward\]\/transition\:htmx-swapping\:scale-75.htmx-swapping {
|
||||
--tw-scale-x: .75;
|
||||
--tw-scale-y: .75;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.group\/transition.forward .group-\[\.forward\]\/transition\:htmx-swapping\:scale-75.htmx-swapping {
|
||||
--tw-scale-x: .75;
|
||||
--tw-scale-y: .75;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.group\/transition.backward .group-\[\.backward\]\/transition\:htmx-swapping\:opacity-0.htmx-swapping {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.group\/transition.forward .group-\[\.forward\]\/transition\:htmx-swapping\:opacity-0.htmx-swapping {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.group\/transition.backward .group-\[\.backward\]\/transition\:htmx-swapping\:ease-in.htmx-swapping {
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
||||
}
|
||||
|
||||
.group\/transition.forward .group-\[\.forward\]\/transition\:htmx-swapping\:ease-in.htmx-swapping {
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
||||
}
|
||||
|
||||
.htmx-swapping .htmx-swapping\:-translate-x-2\/3 {
|
||||
--tw-translate-x: -66.666667%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
@@ -4011,6 +4045,44 @@ input:checked + .toggle-bg {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.group\/transition.backward .htmx-swapping .group-\[\.backward\]\/transition\:htmx-swapping\:translate-x-1\/4 {
|
||||
--tw-translate-x: 25%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.group\/transition.forward .htmx-swapping .group-\[\.forward\]\/transition\:htmx-swapping\:-translate-x-1\/4 {
|
||||
--tw-translate-x: -25%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.group\/transition.backward .htmx-swapping .group-\[\.backward\]\/transition\:htmx-swapping\:scale-75 {
|
||||
--tw-scale-x: .75;
|
||||
--tw-scale-y: .75;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.group\/transition.forward .htmx-swapping .group-\[\.forward\]\/transition\:htmx-swapping\:scale-75 {
|
||||
--tw-scale-x: .75;
|
||||
--tw-scale-y: .75;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.group\/transition.backward .htmx-swapping .group-\[\.backward\]\/transition\:htmx-swapping\:opacity-0 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.group\/transition.forward .htmx-swapping .group-\[\.forward\]\/transition\:htmx-swapping\:opacity-0 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.group\/transition.backward .htmx-swapping .group-\[\.backward\]\/transition\:htmx-swapping\:ease-in {
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
||||
}
|
||||
|
||||
.group\/transition.forward .htmx-swapping .group-\[\.forward\]\/transition\:htmx-swapping\:ease-in {
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
||||
}
|
||||
|
||||
.htmx-added\:translate-x-2\/3.htmx-added {
|
||||
--tw-translate-x: 66.666667%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
@@ -4026,6 +4098,44 @@ input:checked + .toggle-bg {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.group\/transition.backward .group-\[\.backward\]\/transition\:htmx-added\:-translate-x-1\/4.htmx-added {
|
||||
--tw-translate-x: -25%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.group\/transition.forward .group-\[\.forward\]\/transition\:htmx-added\:translate-x-1\/4.htmx-added {
|
||||
--tw-translate-x: 25%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.group\/transition.backward .group-\[\.backward\]\/transition\:htmx-added\:scale-75.htmx-added {
|
||||
--tw-scale-x: .75;
|
||||
--tw-scale-y: .75;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.group\/transition.forward .group-\[\.forward\]\/transition\:htmx-added\:scale-75.htmx-added {
|
||||
--tw-scale-x: .75;
|
||||
--tw-scale-y: .75;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.group\/transition.backward .group-\[\.backward\]\/transition\:htmx-added\:opacity-0.htmx-added {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.group\/transition.forward .group-\[\.forward\]\/transition\:htmx-added\:opacity-0.htmx-added {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.group\/transition.backward .group-\[\.backward\]\/transition\:htmx-added\:ease-out.htmx-added {
|
||||
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.group\/transition.forward .group-\[\.forward\]\/transition\:htmx-added\:ease-out.htmx-added {
|
||||
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.htmx-added .htmx-added\:translate-x-2\/3 {
|
||||
--tw-translate-x: 66.666667%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
@@ -4041,6 +4151,44 @@ input:checked + .toggle-bg {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.group\/transition.backward .htmx-added .group-\[\.backward\]\/transition\:htmx-added\:-translate-x-1\/4 {
|
||||
--tw-translate-x: -25%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.group\/transition.forward .htmx-added .group-\[\.forward\]\/transition\:htmx-added\:translate-x-1\/4 {
|
||||
--tw-translate-x: 25%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.group\/transition.backward .htmx-added .group-\[\.backward\]\/transition\:htmx-added\:scale-75 {
|
||||
--tw-scale-x: .75;
|
||||
--tw-scale-y: .75;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.group\/transition.forward .htmx-added .group-\[\.forward\]\/transition\:htmx-added\:scale-75 {
|
||||
--tw-scale-x: .75;
|
||||
--tw-scale-y: .75;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.group\/transition.backward .htmx-added .group-\[\.backward\]\/transition\:htmx-added\:opacity-0 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.group\/transition.forward .htmx-added .group-\[\.forward\]\/transition\:htmx-added\:opacity-0 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.group\/transition.backward .htmx-added .group-\[\.backward\]\/transition\:htmx-added\:ease-out {
|
||||
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.group\/transition.forward .htmx-added .group-\[\.forward\]\/transition\:htmx-added\:ease-out {
|
||||
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
:is(.dark .dark\:border-blue-500) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(0 156 234 / var(--tw-border-opacity));
|
||||
|
||||
Reference in New Issue
Block a user