@leavepulse/ui 0.49.1 → 0.50.0

package/dist/assets/{LpTable-xWwI4KPZ.css → LpTable-BAMDVi1u.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-4fa70e89],
-.lp-row-leave-active[data-v-4fa70e89] {
+.lp-row-enter-active[data-v-5877be26],
+.lp-row-leave-active[data-v-5877be26] {
   transition:
     opacity var(--duration-fast) var(--ease-emphasized),
     transform var(--duration-fast) var(--ease-emphasized);
 }
-.lp-row-move[data-v-4fa70e89] {
+.lp-row-move[data-v-5877be26] {
   transition: transform var(--duration-medium) var(--ease-emphasized);
 }
-.lp-row-enter-from[data-v-4fa70e89],
-.lp-row-leave-to[data-v-4fa70e89] {
+.lp-row-enter-from[data-v-5877be26],
+.lp-row-leave-to[data-v-5877be26] {
   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-4fa70e89] {
+.lp-row-empty.lp-row-leave-active[data-v-5877be26] {
   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-4fa70e89] {
+.lp-tick[data-v-5877be26] {
   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-4fa70e89] {
+.lp-tick-open[data-v-5877be26] {
   max-width: 3.25rem;
   padding-inline: 1rem;
   opacity: 1;
 }
-.lp-tick-hidden[data-v-4fa70e89],
-.lp-tick-cue[data-v-4fa70e89] {
+.lp-tick-hidden[data-v-5877be26],
+.lp-tick-cue[data-v-5877be26] {
   opacity: 0;
 }
-tr:hover .lp-tick-cue[data-v-4fa70e89],
-.lp-tick-cue[data-v-4fa70e89]:focus-within {
+tr:hover .lp-tick-cue[data-v-5877be26],
+.lp-tick-cue[data-v-5877be26]:focus-within {
   opacity: 1;
 }
 
@@ -84,15 +84,15 @@ tr:hover .lp-tick-cue[data-v-4fa70e89],
    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-4fa70e89] {
+tr:hover .lp-tick-cue[data-v-5877be26] {
     opacity: 0;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-row-enter-active[data-v-4fa70e89],
-  .lp-row-leave-active[data-v-4fa70e89],
-  .lp-row-move[data-v-4fa70e89],
-  .lp-tick[data-v-4fa70e89] {
+.lp-row-enter-active[data-v-5877be26],
+  .lp-row-leave-active[data-v-5877be26],
+  .lp-row-move[data-v-5877be26],
+  .lp-tick[data-v-5877be26] {
     transition: none;
 }
 }

package/dist/chunks/{LpTabs-29iW1XOx.js → LpTabs-UM0FQmPA.js}

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, useId, computed, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, createElementBlock, Fragment, renderList, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from "vue";
+import { defineComponent, ref, watch, nextTick, useId, computed, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, createElementBlock, Fragment, renderList, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from "vue";
 import { useReducedMotion, Motion } from "motion-v";
 import { TabsRoot, TabsList, TabsTrigger, TabsContent } from "reka-ui";
 import { usePillTransition } from "../composables/usePillTransition.js";
@@ -25,6 +25,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (value !== void 0) current.value = value;
       }
     );
+    const list = ref(null);
+    watch(current, () => {
+      void nextTick(() => {
+        const row = list.value?.$el;
+        const active = row?.querySelector('[data-state="active"]');
+        if (!row || !active || row.scrollWidth <= row.clientWidth) return;
+        const start = active.offsetLeft - row.offsetLeft;
+        const end = start + active.offsetWidth;
+        if (start >= row.scrollLeft && end <= row.scrollLeft + row.clientWidth) return;
+        const left = start < row.scrollLeft ? start : end - row.clientWidth;
+        row.scrollTo({ left, behavior: reduceMotion.value ? "auto" : "smooth" });
+      });
+    });
     function select(value) {
       if (props.modelValue === void 0) current.value = value;
       emit("update:modelValue", value);
@@ -50,7 +63,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           createVNode(unref(TabsList), {
-            class: normalizeClass(["gap-1", [
+            ref_key: "list",
+            ref: list,
+            class: normalizeClass(["max-w-full gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", [
               __props.block ? "flex w-full" : "inline-flex",
               __props.variant === "contained" ? "rounded-control border border-line bg-surface-soft p-1" : "",
               __props.variant === "underline" ? "border-b border-line" : ""
@@ -62,7 +77,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 return openBlock(), createBlock(unref(TabsTrigger), {
                   key: item.value,
                   value: item.value,
-                  class: normalizeClass(["relative inline-flex items-center justify-center gap-1.5 text-sm outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring", [
+                  class: normalizeClass(["relative inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap text-sm outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring", [
                     __props.block ? "flex-1" : "",
                     __props.variant === "underline" ? "rounded-t-md px-3 pt-1.5 pb-2" : "rounded-md px-3 py-1.5",
                     __props.accent ? "data-[state=active]:text-brand" : "data-[state=active]:text-ink",

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

@@ -34,6 +34,13 @@ export interface TableColumn<Row> {
     /** Keep this column out of the show/hide list — an actions column has no
      *  name to offer and nothing to gain from being hidden. */
     alwaysVisible?: boolean;
+    /**
+     * Leave the column out while the table is narrower than this many pixels
+     * (a phone, a narrow card), so the columns that matter keep their room
+     * instead of the whole table scrolling sideways. Wider than that, the
+     * user's own show/hide applies as usual.
+     */
+    hideBelow?: number;
 }
 export interface TableLabels {
     [key: string]: string;

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-xWwI4KPZ.css';const _hoisted_1 = {
+import '../assets/LpTable-BAMDVi1u.css';const _hoisted_1 = {
   key: 0,
   class: "flex justify-end"
 };
@@ -43,19 +43,18 @@ const _hoisted_9 = {
   class: "flex items-center gap-2"
 };
 const _hoisted_10 = { class: "hidden sm:inline" };
-const _hoisted_11 = { class: "w-full border-collapse text-sm" };
-const _hoisted_12 = { class: "border-b border-line bg-surface-soft" };
-const _hoisted_13 = ["inert"];
-const _hoisted_14 = ["aria-sort"];
-const _hoisted_15 = ["onClick"];
-const _hoisted_16 = ["aria-label", "data-lp-filter"];
-const _hoisted_17 = {
+const _hoisted_11 = { class: "border-b border-line bg-surface-soft" };
+const _hoisted_12 = ["inert"];
+const _hoisted_13 = ["aria-sort"];
+const _hoisted_14 = ["onClick"];
+const _hoisted_15 = ["aria-label", "data-lp-filter"];
+const _hoisted_16 = {
   key: "lp-table-empty",
   class: "lp-row-empty"
 };
-const _hoisted_18 = ["colspan"];
-const _hoisted_19 = ["onContextmenu", "data-paint-key", "onClick", "onPointerdown"];
-const _hoisted_20 = ["onPointerdown"];
+const _hoisted_17 = ["colspan"];
+const _hoisted_18 = ["onContextmenu", "data-paint-key", "onClick", "onPointerdown"];
+const _hoisted_19 = ["onPointerdown"];
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -203,8 +202,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       change();
     }
     const hiddenColumns = ref(/* @__PURE__ */ new Set());
+    const tableEl = ref(null);
+    const tableWidth = ref(Number.POSITIVE_INFINITY);
+    let widthObserver;
+    watch(
+      tableEl,
+      (table) => {
+        widthObserver?.disconnect();
+        const el = table?.closest("[data-reka-scroll-area-viewport]") ?? table?.parentElement;
+        if (!el || typeof ResizeObserver === "undefined") return;
+        widthObserver = new ResizeObserver(() => tableWidth.value = el.clientWidth);
+        widthObserver.observe(el);
+        tableWidth.value = el.clientWidth;
+      },
+      { flush: "post" }
+    );
     const visibleColumns = computed(
-      () => props.columns.filter((c) => !hiddenColumns.value.has(c.key))
+      () => props.columns.filter(
+        (c) => !hiddenColumns.value.has(c.key) && !(c.hideBelow && tableWidth.value < c.hideBelow)
+      )
     );
     function valuesOf(col) {
       if (props.load && facets.value[col.key]) return facets.value[col.key];
@@ -606,6 +622,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     onBeforeUnmount(() => {
       ro?.disconnect();
+      widthObserver?.disconnect();
       if (motionTimer) clearTimeout(motionTimer);
     });
     const barInsetTop = computed(
@@ -738,13 +755,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               always: ""
             }, {
               default: withCtx(() => [
-                createElementVNode("table", _hoisted_11, [
+                createElementVNode("table", {
+                  ref_key: "tableEl",
+                  ref: tableEl,
+                  class: "w-full border-collapse text-sm"
+                }, [
                   createElementVNode("thead", {
                     ref_key: "headEl",
                     ref: headEl,
                     class: normalizeClass(__props.stickyHeader ? "sticky top-0 z-10 bg-surface-soft" : "")
                   }, [
-                    createElementVNode("tr", _hoisted_12, [
+                    createElementVNode("tr", _hoisted_11, [
                       __props.selectable ? (openBlock(), createElementBlock("th", {
                         key: 0,
                         class: normalizeClass(["w-px p-0", cellY.value])
@@ -758,7 +779,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             indeterminate: someChecked.value,
                             "onUpdate:modelValue": toggleAll
                           }, null, 8, ["model-value", "indeterminate"])
-                        ], 10, _hoisted_13)
+                        ], 10, _hoisted_12)
                       ], 2)) : createCommentVNode("", true),
                       (openBlock(true), createElementBlock(Fragment, null, renderList(visibleColumns.value, (col) => {
                         return openBlock(), createElementBlock("th", {
@@ -790,7 +811,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                     activeSort.value?.key === col.key ? "opacity-100" : "opacity-40 group-hover/sort:opacity-70"
                                   ])
                                 }, null, 8, ["name", "class"])) : createCommentVNode("", true)
-                              ], 10, _hoisted_15)
+                              ], 10, _hoisted_14)
                             ]),
                             _: 2
                           }, 1032, ["items"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
@@ -813,7 +834,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                   name: hiddenValues.value[col.key]?.size ? "lucide:filter-x" : "lucide:filter",
                                   size: 12
                                 }, null, 8, ["name"])
-                              ], 10, _hoisted_16)
+                              ], 10, _hoisted_15)
                             ]),
                             default: withCtx(() => [
                               createVNode(_sfc_main$9, {
@@ -825,7 +846,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             ]),
                             _: 2
                           }, 1032, ["aria-label"])) : createCommentVNode("", true)
-                        ], 14, _hoisted_14);
+                        ], 14, _hoisted_13);
                       }), 128))
                     ])
                   ], 2),
@@ -837,7 +858,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ref: (el) => unref(roving).setContainer(el?.$el ?? null)
                   }, {
                     default: withCtx(() => [
-                      displayRows.value.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_17, [
+                      displayRows.value.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_16, [
                         createElementVNode("td", {
                           colspan: colSpan.value,
                           class: "px-4 py-10 text-center text-muted"
@@ -860,7 +881,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             ]),
                             _: 1
                           })) : createCommentVNode("", true)
-                        ], 8, _hoisted_18)
+                        ], 8, _hoisted_17)
                       ])) : createCommentVNode("", true),
                       (openBlock(true), createElementBlock(Fragment, null, renderList(displayRows.value, (row, index) => {
                         return openBlock(), createElementBlock("tr", mergeProps({
@@ -888,7 +909,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 "onUpdate:modelValue": (v) => toggleRow(keyFor(row, index), v)
                               }, null, 8, ["model-value", "onUpdate:modelValue"])
                             ], 2)
-                          ], 42, _hoisted_20)) : createCommentVNode("", true),
+                          ], 42, _hoisted_19)) : createCommentVNode("", true),
                           (openBlock(true), createElementBlock(Fragment, null, renderList(visibleColumns.value, (col, ci) => {
                             return openBlock(), createElementBlock("td", {
                               key: col.key,
@@ -902,12 +923,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               ], true)
                             ], 2);
                           }), 128))
-                        ], 16, _hoisted_19);
+                        ], 16, _hoisted_18);
                       }), 128))
                     ]),
                     _: 3
                   }, 8, ["css", "class"])
-                ])
+                ], 512)
               ]),
               _: 3
             }, 8, ["items"])
@@ -926,7 +947,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4fa70e89"]]);
+const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5877be26"]]);
 export {
   LpTable as default
 };

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

@@ -22,13 +22,13 @@ type __VLS_Props = {
     /** Stretch the bar to full width with equal-share triggers. */
     block?: boolean;
 };
-declare var __VLS_49: {
+declare var __VLS_51: {
     value: string;
-}, __VLS_51: {};
+}, __VLS_53: {};
 type __VLS_Slots = {} & {
-    panel?: (props: typeof __VLS_49) => any;
+    panel?: (props: typeof __VLS_51) => any;
 } & {
-    default?: (props: typeof __VLS_51) => any;
+    default?: (props: typeof __VLS_53) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;

package/dist/components/LpTabs.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTabs-29iW1XOx.js";
+import { _ as _sfc_main } from "../chunks/LpTabs-UM0FQmPA.js";
 export {
   _sfc_main as default
 };

package/dist/index.js

@@ -96,7 +96,7 @@ import { _ as _69 } from "./chunks/LpSwitch-OrcOJX9m.js";
 import { default as default12 } from "./components/LpTable.vue.js";
 import { compareValues } from "./components/tableSort.js";
 import { _ as _70 } from "./chunks/LpTableOfContents-BUcAfGPQ.js";
-import { _ as _71 } from "./chunks/LpTabs-29iW1XOx.js";
+import { _ as _71 } from "./chunks/LpTabs-UM0FQmPA.js";
 import { _ as _72 } from "./chunks/LpTagsInput-D1SuqbhB.js";
 import { addTags, splitTags } from "./components/tags.js";
 import { _ as _73 } from "./chunks/LpTextarea-uuScWo6-.js";

package/package.json

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

package/src/components/LpTable.vue

@@ -59,6 +59,13 @@ export interface TableColumn<Row> {
   /** Keep this column out of the show/hide list — an actions column has no
    *  name to offer and nothing to gain from being hidden. */
   alwaysVisible?: boolean
+  /**
+   * Leave the column out while the table is narrower than this many pixels
+   * (a phone, a narrow card), so the columns that matter keep their room
+   * instead of the whole table scrolling sideways. Wider than that, the
+   * user's own show/hide applies as usual.
+   */
+  hideBelow?: number
 }
 
 export interface TableLabels {
@@ -430,8 +437,30 @@ function withMotion(change: () => void) {
 }
 const hiddenColumns = ref<Set<string>>(new Set())
 
+// The table's own width, for `hideBelow`: what decides is the room the table
+// has, not the window, which a sidebar or a card can take most of.
+// Measured on the scroll viewport around the table: that is the room it has,
+// while the table itself widens with whatever it overflows by.
+const tableEl = ref<HTMLElement | null>(null)
+const tableWidth = ref(Number.POSITIVE_INFINITY)
+let widthObserver: ResizeObserver | undefined
+watch(
+  tableEl,
+  (table) => {
+    widthObserver?.disconnect()
+    const el = table?.closest<HTMLElement>("[data-reka-scroll-area-viewport]") ?? table?.parentElement
+    if (!el || typeof ResizeObserver === "undefined") return
+    widthObserver = new ResizeObserver(() => (tableWidth.value = el.clientWidth))
+    widthObserver.observe(el)
+    tableWidth.value = el.clientWidth
+  },
+  { flush: "post" },
+)
+
 const visibleColumns = computed(() =>
-  props.columns.filter((c) => !hiddenColumns.value.has(c.key)),
+  props.columns.filter(
+    (c) => !hiddenColumns.value.has(c.key) && !(c.hideBelow && tableWidth.value < c.hideBelow),
+  ),
 )
 
 /** The distinct values a filterable column holds, in first-seen order. */
@@ -997,6 +1026,7 @@ watch(
 )
 onBeforeUnmount(() => {
   ro?.disconnect()
+  widthObserver?.disconnect()
   if (motionTimer) clearTimeout(motionTimer)
 })
 
@@ -1111,7 +1141,7 @@ const barInsetTop = computed(() =>
          reaches: rows and headers carry their own and take the event first, so
          this is the fallback rather than a competitor. -->
     <LpContextMenu :items="contextMenu" always>
-    <table class="w-full border-collapse text-sm">
+    <table ref="tableEl" class="w-full border-collapse text-sm">
       <!-- The background belongs on `thead` itself, not only on its row:
            `border-collapse` collapses the borders, and with a sticky header the
            rows show through that seam — a band of body text rides across the

package/src/components/LpTabs.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Motion, useReducedMotion } from "motion-v"
 import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "reka-ui"
-import { computed, ref, useId, watch } from "vue"
+import { computed, nextTick, ref, useId, watch } from "vue"
 import { usePillTransition } from "../composables/usePillTransition"
 import LpIcon from "./LpIcon.vue"
 
@@ -45,6 +45,23 @@ watch(
   },
 )
 
+// A row wider than its container scrolls sideways (a phone, a narrow card)
+// instead of wrapping each label onto two lines; the active tab is brought
+// into view whenever it changes, including from outside.
+const list = ref<{ $el: HTMLElement } | null>(null)
+watch(current, () => {
+  void nextTick(() => {
+    const row = list.value?.$el
+    const active = row?.querySelector<HTMLElement>('[data-state="active"]')
+    if (!row || !active || row.scrollWidth <= row.clientWidth) return
+    const start = active.offsetLeft - row.offsetLeft
+    const end = start + active.offsetWidth
+    if (start >= row.scrollLeft && end <= row.scrollLeft + row.clientWidth) return
+    const left = start < row.scrollLeft ? start : end - row.clientWidth
+    row.scrollTo({ left, behavior: reduceMotion.value ? "auto" : "smooth" })
+  })
+})
+
 function select(value: string) {
   if (props.modelValue === undefined) current.value = value
   emit("update:modelValue", value)
@@ -101,7 +118,8 @@ function releaseFocusAfterPointer(event: PointerEvent) {
     @update:model-value="(v) => select(v as string)"
   >
     <TabsList
-      class="gap-1"
+      ref="list"
+      class="max-w-full gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
       :class="[
         block ? 'flex w-full' : 'inline-flex',
         variant === 'contained' ? 'rounded-control border border-line bg-surface-soft p-1' : '',
@@ -113,7 +131,7 @@ function releaseFocusAfterPointer(event: PointerEvent) {
         v-for="item in items"
         :key="item.value"
         :value="item.value"
-        class="relative inline-flex items-center justify-center gap-1.5 text-sm outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring"
+        class="relative inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap text-sm outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring"
         :class="[
           block ? 'flex-1' : '',
           variant === 'underline' ? 'rounded-t-md px-3 pt-1.5 pb-2' : 'rounded-md px-3 py-1.5',