@leavepulse/ui 0.95.2 → 0.96.1

package/src/components/LpShift.vue

@@ -24,9 +24,14 @@
  *
  * The mechanism — measure the natural size, pin it in pixels, tween — lives in
  * `useShift`, and LpModal drives its panel with the same composable.
+ *
+ * Whether a tween is holding the box (`resizing`) is read through a ref to the
+ * component (`defineExpose`), not from the slot: a slot prop is read by this
+ * component's render, which would render the whole content again at both ends
+ * of every tween. See docs/migrations/lpshift-resizing-slot.md.
  */
 import { isElement, isHTMLElement, nodeWindow } from "../composables/useView"
-import { computed, onBeforeUnmount, watch } from "vue"
+import { computed, onBeforeUnmount, onUpdated, watch } from "vue"
 import { prefersReducedMotion } from "../composables/easing"
 import { useShift, type ShiftAxis } from "../composables/useShift"
 
@@ -289,6 +294,48 @@ onBeforeUnmount(() => {
   clearTimeout(rememberTimer)
 })
 
+/*
+ * The tween's classes go onto the box from here, not from the template. A
+ * render that read `tweening` or `resizing` would run again at the start and
+ * the end of every tween, and the slot runs inside that render: the whole
+ * content re-rendered twice per resize for two classes on one element. A
+ * table's sixty rows were each rendered again, and TransitionGroup measured
+ * every one of them again, for nothing in the rows having changed.
+ *
+ * Applied after every render too: a class bound by the parent replaces the
+ * element's whole class attribute when it changes, and these are put back.
+ */
+const shiftClasses = computed(() => {
+  const on = [
+    tweening.value && !props.disabled
+      ? `${transitionClass.value} duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none`
+      : "",
+    resizing.value ? "overflow-hidden" : "",
+    // While the box holds a width its content has outgrown, a flex row would
+    // squeeze its children to fit (a button's keys folding into a column)
+    // instead of letting the easing edge clip them.
+    resizing.value && props.axis !== "height" ? "[&>*]:shrink-0" : "",
+    resizing.value && props.anchor === "end" ? "justify-end" : "",
+  ]
+  return on.join(" ").split(" ").filter(Boolean)
+})
+let applied: readonly string[] = []
+function applyShiftClasses() {
+  const box = el.value
+  if (!box) return
+  const next = shiftClasses.value
+  for (const name of applied) if (!next.includes(name)) box.classList.remove(name)
+  for (const name of next) box.classList.add(name)
+  applied = next
+}
+watch(shiftClasses, applyShiftClasses, { flush: "post" })
+onUpdated(() => {
+  // The parent's class binding may have rewritten the attribute: what was
+  // applied is gone from the element, so all of it goes back on.
+  applied = []
+  applyShiftClasses()
+})
+
 defineExpose({ resizing })
 </script>
 
@@ -297,21 +344,9 @@ defineExpose({ resizing })
        smaller than the content it already holds, and without the clip that
        content spills past the easing edge. Dropped once settled, so nothing
        that legitimately overflows — a dropdown, a focus ring — is clipped at
-       rest. -->
-  <div
-    ref="el"
-    :class="[
-      tweening && !disabled
-        ? `${transitionClass} duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none`
-        : '',
-      resizing ? 'overflow-hidden' : '',
-      // While the box holds a width its content has outgrown, a flex row would
-      // squeeze its children to fit (a button's keys folding into a column)
-      // instead of letting the easing edge clip them.
-      resizing && axis !== 'height' ? '[&>*]:shrink-0' : '',
-      resizing && anchor === 'end' ? 'justify-end' : '',
-    ]"
-  >
-    <slot :resizing="resizing" />
+       rest. The classes are put on in script (`applyShiftClasses`), so a
+       tween starting or ending never renders the content again. -->
+  <div ref="el">
+    <slot />
   </div>
 </template>

package/src/components/LpTable.vue

@@ -1736,6 +1736,17 @@ const motionIds = computed(() => (headerless.value ? allEntries.value : viewEntr
 let shownIds: readonly string[] = []
 const bigSwap = computed(() => rowChanges(shownIds, motionIds.value) > ROW_MOTION_LIMIT)
 let settleFlip = false
+/*
+ * Whether the rows carry their own enter, leave and move transitions, read by
+ * the templates through these two computeds and never as `animating` itself:
+ * the motion window closing flips `animating` 600 ms after every change, and
+ * a template reading it re-renders the whole table for it. TransitionGroup then
+ * measures every row again (it records positions on each render), sixty forced
+ * reads for a switch that, after a big swap, was off already. A computed whose
+ * value does not change does not re-render anything.
+ */
+const rowMotion = computed(() => animating.value && !props.virtualRowHeight && !bigSwap.value)
+const cardMotion = computed(() => animating.value && !bigSwap.value)
 watch(
   motionIds,
   (ids) => {
@@ -2131,7 +2142,7 @@ usePaletteCommands(() => {
       <TransitionGroup
         tag="tbody"
         name="lp-row"
-        :css="animating && !virtualRowHeight && !bigSwap"
+        :css="rowMotion"
         :move-class="bigSwap ? 'lp-row-still' : undefined"
         :class="busy && displayRows.length ? 'opacity-60 transition-opacity' : 'transition-opacity'"
         :aria-busy="busy || undefined"
@@ -2296,7 +2307,7 @@ usePaletteCommands(() => {
       :key="activeLayout"
       tag="div"
       name="lp-row"
-      :css="animating && !bigSwap"
+      :css="cardMotion"
       :move-class="bigSwap ? 'lp-row-still' : undefined"
       v-bind="scrollAttrs"
       class="min-h-0 transition-opacity"

package/src/components/LpTooltip.vue

@@ -494,7 +494,10 @@ const triggerProps = computed(() =>
   mergeProps(attrs, hold.handlers, triggerEvents, {
     "aria-label": props.label ? props.content : undefined,
     "aria-describedby": root.value?.open.value ? root.value.contentId : undefined,
-    "data-state": root.value?.stateAttribute.value ?? "closed",
+    // Its own attribute, not `data-state`: the trigger is the caller's element,
+    // and a switch, checkbox or tab already says its own state there. Written
+    // over it, a checked switch inside a tooltip was drawn unchecked.
+    "data-tooltip-state": root.value?.stateAttribute.value ?? "closed",
     "data-grace-area-trigger": "",
     class: props.touch === "hold" && !props.followCursor ? "[-webkit-touch-callout:none]" : undefined,
   }),