@leavepulse/ui 0.37.2 → 0.37.3

package/dist/assets/{LpTable-BbOFmZfc.css → LpTable-BgPLJOXa.css}

@@ -11,17 +11,17 @@
  * fade before closing the gap and the whole list lurches at the end instead of
  * gliding.
  */
-.lp-row-enter-active[data-v-63738e53],
-.lp-row-leave-active[data-v-63738e53] {
+.lp-row-enter-active[data-v-e0bb036b],
+.lp-row-leave-active[data-v-e0bb036b] {
   transition:
     opacity var(--duration-fast) var(--ease-emphasized),
     transform var(--duration-fast) var(--ease-emphasized);
 }
-.lp-row-move[data-v-63738e53] {
+.lp-row-move[data-v-e0bb036b] {
   transition: transform var(--duration-medium) var(--ease-emphasized);
 }
-.lp-row-enter-from[data-v-63738e53],
-.lp-row-leave-to[data-v-63738e53] {
+.lp-row-enter-from[data-v-e0bb036b],
+.lp-row-leave-to[data-v-e0bb036b] {
   opacity: 0;
   transform: translateX(-0.5rem);
 }
@@ -35,7 +35,7 @@
  * drops out of the table layout entirely. Nothing sits below this row to be
  * dragged around, so simply not animating its exit costs nothing.
  */
-.lp-row-empty.lp-row-leave-active[data-v-63738e53] {
+.lp-row-empty.lp-row-leave-active[data-v-e0bb036b] {
   display: none;
 }
 
@@ -50,9 +50,9 @@
 /* A filter that redraws the list is information, not decoration: with motion
    turned down the rows change without animating rather than not changing. */
 @media (prefers-reduced-motion: reduce) {
-.lp-row-enter-active[data-v-63738e53],
-  .lp-row-leave-active[data-v-63738e53],
-  .lp-row-move[data-v-63738e53] {
+.lp-row-enter-active[data-v-e0bb036b],
+  .lp-row-leave-active[data-v-e0bb036b],
+  .lp-row-move[data-v-e0bb036b] {
     transition: none;
 }
 }

package/dist/components/LpTable.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, shallowRef, watch, onBeforeUnmount, openBlock, createElementBlock, createVNode, mergeProps, withCtx, createElementVNode, normalizeClass, createCommentVNode, Fragment, renderList, normalizeStyle, createBlock, createTextVNode, toDisplayString, TransitionGroup, unref, withModifiers, renderSlot, nextTick } from "vue";
+import { defineComponent, useAttrs, computed, ref, shallowRef, watch, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createVNode, mergeProps, withCtx, createElementVNode, createCommentVNode, Fragment, renderList, normalizeStyle, createBlock, createTextVNode, toDisplayString, TransitionGroup, unref, withModifiers, renderSlot, nextTick } from "vue";
 import { _ as _sfc_main$3 } from "../chunks/LpCheckbox-CVccKYaH.js";
 import { _ as _sfc_main$2 } from "../chunks/LpContextMenu-B6WBLleS.js";
 import { _ as _sfc_main$4 } from "../chunks/LpIcon-CCnX5_2j.js";
@@ -7,20 +7,19 @@ import { _ as _sfc_main$1 } from "../chunks/LpScrollArea-D8xyKXcF.js";
 import { useAsyncTask } from "../composables/useAsyncTask.js";
 import { useRovingFocus } from "../composables/useRovingFocus.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpTable-BbOFmZfc.css';const _hoisted_1 = { class: "flex flex-col gap-3" };
-const _hoisted_2 = { class: "border-b border-line bg-surface-soft" };
-const _hoisted_3 = {
+import '../assets/LpTable-BgPLJOXa.css';const _hoisted_1 = { class: "border-b border-line bg-surface-soft" };
+const _hoisted_2 = {
   key: 0,
   class: "w-px px-4 py-3"
 };
-const _hoisted_4 = ["aria-sort"];
-const _hoisted_5 = ["onClick"];
-const _hoisted_6 = {
+const _hoisted_3 = ["aria-sort"];
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = {
   key: "lp-table-empty",
   class: "lp-row-empty"
 };
-const _hoisted_7 = ["colspan"];
-const _hoisted_8 = ["onContextmenu", "onClick"];
+const _hoisted_6 = ["colspan"];
+const _hoisted_7 = ["onContextmenu", "onClick"];
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -51,6 +50,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:selected", "update:sort", "rowClick"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const attrs = useAttrs();
+    const rootClass = computed(() => attrs.class);
+    const scrollAttrs = computed(() => {
+      const { class: _class, ...rest } = attrs;
+      return rest;
+    });
     const emit = __emit;
     function keyFor(row, index) {
       if (typeof props.rowKey === "function") return props.rowKey(row);
@@ -351,10 +356,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => props.stickyHeader && headHeight.value ? `${headHeight.value}px` : void 0
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(_sfc_main$1, mergeProps(_ctx.$attrs, {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["flex flex-col gap-3", rootClass.value])
+      }, [
+        createVNode(_sfc_main$1, mergeProps(scrollAttrs.value, {
           fade: false,
-          class: "rounded-card border border-line",
+          class: "min-h-0 flex-1 rounded-card border border-line",
           style: __props.load && floor.value ? { minHeight: `${floor.value + 2}px` } : void 0,
           "bar-inset-top": barInsetTop.value
         }), {
@@ -374,8 +381,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ref: headEl,
                     class: normalizeClass(__props.stickyHeader ? "sticky top-0 z-10 bg-surface-soft" : "")
                   }, [
-                    createElementVNode("tr", _hoisted_2, [
-                      __props.selectable ? (openBlock(), createElementBlock("th", _hoisted_3, [
+                    createElementVNode("tr", _hoisted_1, [
+                      __props.selectable ? (openBlock(), createElementBlock("th", _hoisted_2, [
                         createVNode(_sfc_main$3, {
                           "model-value": allChecked.value,
                           indeterminate: someChecked.value,
@@ -417,13 +424,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                     activeSort.value?.key === col.key ? "opacity-100" : "opacity-40 group-hover/sort:opacity-70"
                                   ])
                                 }, null, 8, ["name", "class"]))
-                              ], 10, _hoisted_5)
+                              ], 10, _hoisted_4)
                             ]),
                             _: 2
                           }, 1032, ["items"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                             createTextVNode(toDisplayString(col.label), 1)
                           ], 64))
-                        ], 14, _hoisted_4);
+                        ], 14, _hoisted_3);
                       }), 128))
                     ])
                   ], 2),
@@ -435,7 +442,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ref: (el) => unref(roving).setContainer(el?.$el ?? null)
                   }, {
                     default: withCtx(() => [
-                      displayRows.value.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_6, [
+                      displayRows.value.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_5, [
                         createElementVNode("td", {
                           colspan: colSpan.value,
                           class: "px-4 py-10 text-center text-muted"
@@ -446,7 +453,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             class: normalizeClass(["mx-auto mb-2 opacity-60", unref(loading) ? "animate-spin" : ""])
                           }, null, 8, ["name", "class"]),
                           createElementVNode("div", null, toDisplayString(unref(loading) ? __props.loadingLabel : failed.value ? __props.errorLabel : __props.emptyLabel), 1)
-                        ], 8, _hoisted_7)
+                        ], 8, _hoisted_6)
                       ])) : createCommentVNode("", true),
                       (openBlock(true), createElementBlock(Fragment, null, renderList(displayRows.value, (row, index) => {
                         return openBlock(), createElementBlock("tr", mergeProps({
@@ -481,7 +488,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               ], true)
                             ], 2);
                           }), 128))
-                        ], 16, _hoisted_8);
+                        ], 16, _hoisted_7);
                       }), 128))
                     ]),
                     _: 3
@@ -501,11 +508,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "page-size": __props.pageSize,
           disabled: unref(loading)
         }, null, 8, ["page", "total", "page-size", "disabled"])) : createCommentVNode("", true)
-      ]);
+      ], 2);
     };
   }
 });
-const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-63738e53"]]);
+const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e0bb036b"]]);
 export {
   LpTable as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.37.2",
+  "version": "0.37.3",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpTable.vue

@@ -5,7 +5,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts" generic="T extends Record<string, unknown>">
-import { computed, nextTick, onBeforeUnmount, ref, shallowRef, watch } from "vue"
+import { computed, nextTick, onBeforeUnmount, ref, shallowRef, useAttrs, watch } from "vue"
 import LpCheckbox from "./LpCheckbox.vue"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
@@ -132,6 +132,21 @@ const props = withDefaults(
   },
 )
 
+/*
+ * Layout classes belong on the root, not on the scroll area. Since the pager
+ * wrapper became the root, a caller's `min-h-0 flex-1` landed on the inner
+ * scroll area while the wrapper kept sizing to its content — in a flex column
+ * the table grew past its container and its bottom edge was clipped away.
+ * Everything else (style, aria, listeners) still goes to the scroll area, so a
+ * `max-height` keeps capping the scrolling part.
+ */
+const attrs = useAttrs()
+const rootClass = computed(() => attrs.class)
+const scrollAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs
+  return rest
+})
+
 const emit = defineEmits<{
   (e: "update:selected", value: RowKey[]): void
   (e: "update:sort", value: SortState | null): void
@@ -577,11 +592,11 @@ const barInsetTop = computed(() =>
 <template>
   <!-- No top fade: a sticky header sits in the masked band and would be dimmed
        by it. The bottom edge is left crisp with it for symmetry. -->
-  <div class="flex flex-col gap-3">
+  <div class="flex flex-col gap-3" :class="rootClass">
   <LpScrollArea
-    v-bind="$attrs"
+    v-bind="scrollAttrs"
     :fade="false"
-    class="rounded-card border border-line"
+    class="min-h-0 flex-1 rounded-card border border-line"
     :style="load && floor ? { minHeight: `${floor + 2}px` } : undefined"
     :bar-inset-top="barInsetTop"
   >