@leavepulse/ui 0.52.0 → 0.53.0

package/dist/assets/{LpTable-D8jvowDb.css → LpTable-BNzavdlv.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-602c1271],
-.lp-row-leave-active[data-v-602c1271] {
+.lp-row-enter-active[data-v-a6bdc221],
+.lp-row-leave-active[data-v-a6bdc221] {
   transition:
     opacity var(--duration-fast) var(--ease-emphasized),
     transform var(--duration-fast) var(--ease-emphasized);
 }
-.lp-row-move[data-v-602c1271] {
+.lp-row-move[data-v-a6bdc221] {
   transition: transform var(--duration-medium) var(--ease-emphasized);
 }
-.lp-row-enter-from[data-v-602c1271],
-.lp-row-leave-to[data-v-602c1271] {
+.lp-row-enter-from[data-v-a6bdc221],
+.lp-row-leave-to[data-v-a6bdc221] {
   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-602c1271] {
+.lp-row-empty.lp-row-leave-active[data-v-a6bdc221] {
   display: none;
 }
 
@@ -54,7 +54,7 @@
  * once anything is selected. An earlier version collapsed the column to nothing
  * and floated the hover box over the first cell, where it sat on the text.
  */
-.lp-tick[data-v-602c1271] {
+.lp-tick[data-v-a6bdc221] {
   display: flex;
   align-items: center;
   max-width: 0;
@@ -66,17 +66,17 @@
     padding var(--duration-medium) var(--ease-emphasized),
     opacity var(--duration-fast) ease;
 }
-.lp-tick-open[data-v-602c1271] {
+.lp-tick-open[data-v-a6bdc221] {
   max-width: 3.25rem;
   padding-inline: 1rem;
   opacity: 1;
 }
-.lp-tick-hidden[data-v-602c1271],
-.lp-tick-cue[data-v-602c1271] {
+.lp-tick-hidden[data-v-a6bdc221],
+.lp-tick-cue[data-v-a6bdc221] {
   opacity: 0;
 }
-tr:hover .lp-tick-cue[data-v-602c1271],
-.lp-tick-cue[data-v-602c1271]:focus-within {
+tr:hover .lp-tick-cue[data-v-a6bdc221],
+.lp-tick-cue[data-v-a6bdc221]:focus-within {
   opacity: 1;
 }
 
@@ -84,24 +84,24 @@ tr:hover .lp-tick-cue[data-v-602c1271],
    turned down the rows change without animating rather than not changing. */
 /* Only where there is a hover to reveal it; a finger long-presses instead. */
 @media (hover: none) {
-tr:hover .lp-tick-cue[data-v-602c1271] {
+tr:hover .lp-tick-cue[data-v-a6bdc221] {
     opacity: 0;
 }
 
   /* Nor is there anything for the column's width to hold until then: on a
      touch screen it stays closed until a long press starts selecting, and
      eases open like the rest of the column. */
-.lp-tick-hidden[data-v-602c1271],
-  .lp-tick-cue[data-v-602c1271] {
+.lp-tick-hidden[data-v-a6bdc221],
+  .lp-tick-cue[data-v-a6bdc221] {
     max-width: 0;
     padding-inline: 0;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-row-enter-active[data-v-602c1271],
-  .lp-row-leave-active[data-v-602c1271],
-  .lp-row-move[data-v-602c1271],
-  .lp-tick[data-v-602c1271] {
+.lp-row-enter-active[data-v-a6bdc221],
+  .lp-row-leave-active[data-v-a6bdc221],
+  .lp-row-move[data-v-a6bdc221],
+  .lp-tick[data-v-a6bdc221] {
     transition: none;
 }
 }

package/dist/chunks/{LpBreadcrumbs-CQJd73Gm.js → LpBreadcrumbs-D4TsoFju.js}

@@ -1,10 +1,12 @@
-import { defineComponent, computed, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeClass, Fragment, renderList, createBlock, createCommentVNode, resolveDynamicComponent, withCtx, createTextVNode, toDisplayString } from "vue";
+import { defineComponent, computed, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeClass, Fragment, renderList, createBlock, createCommentVNode, resolveDynamicComponent, withCtx, toDisplayString } from "vue";
 import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
 import { useLabels, useLinkComponent } from "../composables/useLpConfig.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { resolveLink } from "../components/link.js";
 const _hoisted_1 = ["aria-label"];
-const _hoisted_2 = ["aria-current"];
+const _hoisted_2 = { class: "truncate" };
+const _hoisted_3 = ["aria-current"];
+const _hoisted_4 = { class: "truncate" };
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -34,11 +36,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }))
     );
     const { class: rootClass, attrs: rest } = useMergedAttrs(
-      "flex items-center gap-1.5 text-sm"
+      "flex min-w-0 items-center gap-1.5 text-sm"
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("nav", mergeProps({
-        "aria-label": unref(text).nav
+        "aria-label": unref(text).nav,
+        class: "min-w-0"
       }, unref(rest)), [
         createElementVNode("ol", {
           class: normalizeClass(unref(rootClass))
@@ -46,20 +49,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           (openBlock(true), createElementBlock(Fragment, null, renderList(crumbs.value, ({ item, last, link }, i) => {
             return openBlock(), createElementBlock("li", {
               key: i,
-              class: "inline-flex items-center gap-1.5"
+              class: normalizeClass(["inline-flex min-w-0 items-center gap-1.5", last ? "shrink" : "shrink-0"])
             }, [
               i > 0 ? (openBlock(), createBlock(_sfc_main$1, {
                 key: 0,
                 name: "lucide:chevron-right",
                 size: 14,
-                class: "text-muted",
+                class: "shrink-0 text-muted",
                 "aria-hidden": "true"
               })) : createCommentVNode("", true),
               link ? (openBlock(), createBlock(resolveDynamicComponent(link.is), mergeProps({
                 key: 1,
                 ref_for: true
               }, link.props, {
-                class: "inline-flex items-center gap-1.5 rounded-xs text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
+                class: "inline-flex min-w-0 items-center gap-1.5 rounded-xs text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
                 onClick: ($event) => _ctx.$emit("navigate", item, i)
               }), {
                 default: withCtx(() => [
@@ -68,12 +71,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     name: item.icon,
                     size: 14
                   }, null, 8, ["name"])) : createCommentVNode("", true),
-                  createTextVNode(" " + toDisplayString(item.label), 1)
+                  createElementVNode("span", _hoisted_2, toDisplayString(item.label), 1)
                 ]),
                 _: 2
               }, 1040, ["onClick"])) : (openBlock(), createElementBlock("span", {
                 key: 2,
-                class: normalizeClass(["inline-flex items-center gap-1.5", last ? "text-ink" : "text-muted"]),
+                class: normalizeClass(["inline-flex min-w-0 items-center gap-1.5", last ? "text-ink" : "text-muted"]),
                 "aria-current": last ? "page" : void 0
               }, [
                 item.icon ? (openBlock(), createBlock(_sfc_main$1, {
@@ -81,9 +84,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   name: item.icon,
                   size: 14
                 }, null, 8, ["name"])) : createCommentVNode("", true),
-                createTextVNode(" " + toDisplayString(item.label), 1)
-              ], 10, _hoisted_2))
-            ]);
+                createElementVNode("span", _hoisted_4, toDisplayString(item.label), 1)
+              ], 10, _hoisted_3))
+            ], 2);
           }), 128))
         ], 2)
       ], 16, _hoisted_1);

package/dist/components/LpBreadcrumbs.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpBreadcrumbs-CQJd73Gm.js";
+import { _ as _sfc_main } from "../chunks/LpBreadcrumbs-D4TsoFju.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpTable.vue.d.ts

@@ -211,6 +211,7 @@ declare const __VLS_export: <T extends Record<string, unknown>>(__VLS_props: Non
         [x: `cell-${string}`]: ((props: {
             row: T;
             value: unknown;
+            openMenu: (event: Event) => void;
         }) => any) | undefined;
     } & {
         bulk?: (props: {

package/dist/components/LpTable.vue.js

@@ -18,7 +18,7 @@ import { _ as _sfc_main$1 } from "../chunks/LpButton-CKSwC6Mu.js";
 import { toCsv, downloadFile, fileStem } from "./exportData.js";
 import { summarizeShown, parseTableState, serializeTableState, countValues } from "./tableFilter.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpTable-D8jvowDb.css';const _hoisted_1 = {
+import '../assets/LpTable-BNzavdlv.css';const _hoisted_1 = {
   key: 0,
   class: "flex justify-end"
 };
@@ -164,6 +164,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onRowContextMenu(row) {
       menuRow.value = row;
     }
+    function openRowMenu(event) {
+      const button = event.currentTarget;
+      if (!(button instanceof HTMLElement)) return;
+      const rect = button.getBoundingClientRect();
+      button.dispatchEvent(
+        new MouseEvent("contextmenu", { bubbles: true, cancelable: true, clientX: rect.left, clientY: rect.bottom })
+      );
+    }
     const contextMenu = computed(() => {
       if (paint.painting.value) return [];
       const table = tableMenu();
@@ -917,7 +925,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             }, [
                               renderSlot(_ctx.$slots, `cell-${col.key}`, {
                                 row,
-                                value: row[col.key]
+                                value: row[col.key],
+                                openMenu: openRowMenu
                               }, () => [
                                 createTextVNode(toDisplayString(row[col.key]), 1)
                               ], true)
@@ -947,7 +956,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-602c1271"]]);
+const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a6bdc221"]]);
 export {
   LpTable as default
 };

package/dist/index.js

@@ -8,7 +8,7 @@ import { _ as _6 } from "./chunks/LpAppShell-BmMYcEVx.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-C8IgSMsi.js";
 import { _ as _8 } from "./chunks/LpAvatar-Cb1jtOVv.js";
 import { _ as _9 } from "./chunks/LpBadge-Fe0D1bYx.js";
-import { _ as _10 } from "./chunks/LpBreadcrumbs-CQJd73Gm.js";
+import { _ as _10 } from "./chunks/LpBreadcrumbs-D4TsoFju.js";
 import { _ as _11 } from "./chunks/LpButton-CKSwC6Mu.js";
 import { _ as _12 } from "./chunks/LpCalendar-DrA2McTU.js";
 import { _ as _13 } from "./chunks/LpCard-BdxkMXjo.js";

package/package.json

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

package/src/components/LpBreadcrumbs.vue

@@ -53,43 +53,47 @@ const crumbs = computed(() =>
 
 // The trail sets its own gap, which a dense header bar needs to reduce.
 const { class: rootClass, attrs: rest } = useMergedAttrs(
-  "flex items-center gap-1.5 text-sm",
+  "flex min-w-0 items-center gap-1.5 text-sm",
 )
 </script>
 
 <template>
-  <nav :aria-label="text.nav" v-bind="rest">
+  <!-- One line however long the labels: the earlier crumbs keep their size
+       and the current one gives way with an ellipsis. Wrapping, a long name
+       pushed the trail onto three lines over whatever bar held it. -->
+  <nav :aria-label="text.nav" class="min-w-0" v-bind="rest">
     <ol :class="rootClass">
       <li
         v-for="({ item, last, link }, i) in crumbs"
         :key="i"
-        class="inline-flex items-center gap-1.5"
+        class="inline-flex min-w-0 items-center gap-1.5"
+        :class="last ? 'shrink' : 'shrink-0'"
       >
         <LpIcon
           v-if="i > 0"
           name="lucide:chevron-right"
           :size="14"
-          class="text-muted"
+          class="shrink-0 text-muted"
           aria-hidden="true"
         />
         <component
           :is="link.is"
           v-if="link"
           v-bind="link.props"
-          class="inline-flex items-center gap-1.5 rounded-xs text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+          class="inline-flex min-w-0 items-center gap-1.5 rounded-xs text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
           @click="$emit('navigate', item, i)"
         >
           <LpIcon v-if="item.icon" :name="item.icon" :size="14" />
-          {{ item.label }}
+          <span class="truncate">{{ item.label }}</span>
         </component>
         <span
           v-else
-          class="inline-flex items-center gap-1.5"
+          class="inline-flex min-w-0 items-center gap-1.5"
           :class="last ? 'text-ink' : 'text-muted'"
           :aria-current="last ? 'page' : undefined"
         >
           <LpIcon v-if="item.icon" :name="item.icon" :size="14" />
-          {{ item.label }}
+          <span class="truncate">{{ item.label }}</span>
         </span>
       </li>
     </ol>

package/src/components/LpTable.vue

@@ -355,6 +355,23 @@ function onRowContextMenu(row: T) {
   menuRow.value = row
 }
 
+/*
+ * The same menu on a button of the row's own, a "more" button in an actions
+ * cell: cell slots get `openMenu` for its click. A dropdown per row stood up
+ * the full reka menu stack in every row, closed — some twenty components a
+ * row, which on a phone made a list of a few hundred rows take most of a
+ * second to appear. Here the click becomes a right-click at the button's
+ * corner, which the row remembers on its way up and the shared menu opens at.
+ */
+function openRowMenu(event: Event) {
+  const button = event.currentTarget
+  if (!(button instanceof HTMLElement)) return
+  const rect = button.getBoundingClientRect()
+  button.dispatchEvent(
+    new MouseEvent("contextmenu", { bubbles: true, cancelable: true, clientX: rect.left, clientY: rect.bottom }),
+  )
+}
+
 // Row items first — they are what the pointer is actually on — then the
 // table-wide ones under a rule, when the row has any of its own.
 const contextMenu = computed<ContextMenuItemDef[]>(() => {
@@ -1300,7 +1317,7 @@ const barInsetTop = computed(() =>
             class="px-4 text-ink"
             :class="[alignClass(col.align), cellY, col.nowrap ? 'whitespace-nowrap' : '']"
           >
-            <slot :name="`cell-${col.key}`" :row="row" :value="row[col.key]">
+            <slot :name="`cell-${col.key}`" :row="row" :value="row[col.key]" :open-menu="openRowMenu">
               {{ row[col.key] }}
             </slot>
           </td>