@leavepulse/ui 0.29.1 → 0.29.3

package/dist/assets/{LpTable-DMOyAUOh.css → LpTable-B9Iko3XD.css}

@@ -11,34 +11,35 @@
  * fade before closing the gap and the whole list lurches at the end instead of
  * gliding.
  */
-.lp-row-enter-active[data-v-7884aed8],
-.lp-row-leave-active[data-v-7884aed8] {
+.lp-row-enter-active[data-v-4fedb617],
+.lp-row-leave-active[data-v-4fedb617] {
   transition:
     opacity var(--duration-fast) var(--ease-emphasized),
     transform var(--duration-fast) var(--ease-emphasized);
 }
-.lp-row-move[data-v-7884aed8] {
+.lp-row-move[data-v-4fedb617] {
   transition: transform var(--duration-medium) var(--ease-emphasized);
 }
-.lp-row-enter-from[data-v-7884aed8],
-.lp-row-leave-to[data-v-7884aed8] {
+.lp-row-enter-from[data-v-4fedb617],
+.lp-row-leave-to[data-v-4fedb617] {
   opacity: 0;
   transform: translateX(-0.5rem);
 }
-.lp-row-leave-active[data-v-7884aed8] {
-  position: absolute;
-  width: 100%;
-}
+
+/*
+ * The leaving row stays in the flow. Taking it out with `position: absolute` is
+ * the usual trick for a list, but a `<tr>` positioned that way loses the table's
+ * column grid and collapses to its content width — the row visibly breaks apart
+ * on its way out. The rows below close the gap through `lp-row-move` instead,
+ * which is a moment slower and stays a table the whole time.
+ */
 
 /* 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-7884aed8],
-  .lp-row-leave-active[data-v-7884aed8],
-  .lp-row-move[data-v-7884aed8] {
+.lp-row-enter-active[data-v-4fedb617],
+  .lp-row-leave-active[data-v-4fedb617],
+  .lp-row-move[data-v-4fedb617] {
     transition: none;
 }
-.lp-row-leave-active[data-v-7884aed8] {
-    position: static;
-}
 }

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

@@ -31,6 +31,11 @@ declare const __VLS_export: <T extends Record<string, unknown>>(__VLS_props: Non
         /** Per-row right-click menu. Return [] (or omit the prop) to disable it for
          *  a row; the row then keeps the browser's native context menu. */
         rowMenu?: (row: T) => ContextMenuItemDef[];
+        /** Wording for the header's right-click menu. Passed in because the kit
+         *  carries no translations: an app that leaves these alone gets English. */
+        sortAscLabel?: string;
+        sortDescLabel?: string;
+        sortClearLabel?: string;
     } & {
         "onUpdate:selected"?: ((value: (string | number)[]) => any) | undefined;
         "onUpdate:sort"?: ((value: SortState | null) => any) | undefined;

package/dist/components/LpTable.vue.js

@@ -1,11 +1,11 @@
 import { defineComponent, ref, computed, watch, onBeforeUnmount, openBlock, createBlock, withCtx, createElementVNode, normalizeClass, createElementBlock, createVNode, createCommentVNode, Fragment, renderList, normalizeStyle, createTextVNode, toDisplayString, TransitionGroup, unref, mergeProps, withModifiers, renderSlot } from "vue";
 import { _ as _sfc_main$2 } from "../chunks/LpCheckbox-BO0zuuPh.js";
-import { _ as _sfc_main$4 } from "../chunks/LpContextMenu-D0mzXqA7.js";
-import { _ as _sfc_main$3 } from "../chunks/LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$3 } from "../chunks/LpContextMenu-D0mzXqA7.js";
+import { _ as _sfc_main$4 } from "../chunks/LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$1 } from "../chunks/LpScrollArea-D8xyKXcF.js";
 import { useRovingFocus } from "../composables/useRovingFocus.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpTable-DMOyAUOh.css';const _hoisted_1 = { class: "w-full border-collapse text-sm" };
+import '../assets/LpTable-B9Iko3XD.css';const _hoisted_1 = { class: "w-full border-collapse text-sm" };
 const _hoisted_2 = { class: "border-b border-line bg-surface-soft" };
 const _hoisted_3 = {
   key: 0,
@@ -28,7 +28,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     selected: { default: () => [] },
     sort: { default: null },
     stickyHeader: { type: Boolean },
-    rowMenu: {}
+    rowMenu: {},
+    sortAscLabel: { default: "Sort ascending" },
+    sortDescLabel: { default: "Sort descending" },
+    sortClearLabel: { default: "Clear sorting" }
   },
   emits: ["update:selected", "update:sort", "rowClick"],
   setup(__props, { emit: __emit }) {
@@ -79,6 +82,35 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (s?.key !== col.key) return "lucide:chevrons-up-down";
       return s.dir === "asc" ? "lucide:arrow-up" : "lucide:arrow-down";
     }
+    function headerMenu(col) {
+      if (!col.sortable) return [];
+      const s = activeSort.value;
+      const set = (next) => () => {
+        ownSort.value = next;
+        emit("update:sort", next);
+      };
+      return [
+        {
+          label: props.sortAscLabel,
+          icon: "lucide:arrow-up",
+          disabled: s?.key === col.key && s.dir === "asc",
+          onSelect: set({ key: col.key, dir: "asc" })
+        },
+        {
+          label: props.sortDescLabel,
+          icon: "lucide:arrow-down",
+          disabled: s?.key === col.key && s.dir === "desc",
+          onSelect: set({ key: col.key, dir: "desc" })
+        },
+        {
+          label: props.sortClearLabel,
+          icon: "lucide:x",
+          separatorBefore: true,
+          disabled: !s,
+          onSelect: set(null)
+        }
+      ];
+    }
     const selectedSet = computed(() => new Set(props.selected));
     const allKeys = computed(() => props.rows.map((r, i) => keyFor(r, i)));
     const allChecked = computed(
@@ -179,25 +211,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     class: normalizeClass(["px-4 py-3 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted", alignClass(col.align)]),
                     "aria-sort": activeSort.value?.key === col.key ? activeSort.value.dir === "asc" ? "ascending" : "descending" : void 0
                   }, [
-                    col.sortable ? (openBlock(), createElementBlock("button", {
+                    col.sortable ? (openBlock(), createBlock(_sfc_main$3, {
                       key: 0,
-                      type: "button",
-                      class: normalizeClass(["group/sort -mx-1 inline-flex items-center gap-1 rounded px-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring", [
-                        col.align === "right" ? "flex-row-reverse" : "",
-                        activeSort.value?.key === col.key ? "text-ink" : ""
-                      ]]),
-                      onClick: ($event) => toggleSort(col)
-                    }, [
-                      createTextVNode(toDisplayString(col.label) + " ", 1),
-                      createVNode(_sfc_main$3, {
-                        name: sortIcon(col),
-                        size: 13,
-                        class: normalizeClass([
-                          "shrink-0 transition-[transform,opacity] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)]",
-                          activeSort.value?.key === col.key ? "opacity-100" : "opacity-40 group-hover/sort:opacity-70"
-                        ])
-                      }, null, 8, ["name", "class"])
-                    ], 10, _hoisted_5)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                      items: headerMenu(col)
+                    }, {
+                      default: withCtx(() => [
+                        createElementVNode("button", {
+                          type: "button",
+                          class: normalizeClass(["group/sort -mx-1 inline-flex items-center gap-1 rounded px-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring", [
+                            col.align === "right" ? "flex-row-reverse" : "",
+                            activeSort.value?.key === col.key ? "text-ink" : ""
+                          ]]),
+                          onClick: ($event) => toggleSort(col)
+                        }, [
+                          createTextVNode(toDisplayString(col.label) + " ", 1),
+                          createVNode(_sfc_main$4, {
+                            name: sortIcon(col),
+                            size: 13,
+                            class: normalizeClass([
+                              "shrink-0 transition-[transform,opacity] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)]",
+                              activeSort.value?.key === col.key ? "opacity-100" : "opacity-40 group-hover/sort:opacity-70"
+                            ])
+                          }, null, 8, ["name", "class"])
+                        ], 10, _hoisted_5)
+                      ]),
+                      _: 2
+                    }, 1032, ["items"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                       createTextVNode(toDisplayString(col.label), 1)
                     ], 64))
                   ], 14, _hoisted_4);
@@ -215,7 +254,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     colspan: colSpan.value,
                     class: "px-4 py-10 text-center text-muted"
                   }, [
-                    createVNode(_sfc_main$3, {
+                    createVNode(_sfc_main$4, {
                       name: __props.emptyIcon,
                       size: 22,
                       class: "mx-auto mb-2 opacity-60"
@@ -224,7 +263,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   ], 8, _hoisted_7)
                 ])) : createCommentVNode("", true),
                 (openBlock(true), createElementBlock(Fragment, null, renderList(displayRows.value, (row, index) => {
-                  return openBlock(), createBlock(_sfc_main$4, {
+                  return openBlock(), createBlock(_sfc_main$3, {
                     key: keyFor(row, index),
                     items: menuFor(row)
                   }, {
@@ -274,7 +313,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7884aed8"]]);
+const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4fedb617"]]);
 export {
   LpTable as default
 };

package/package.json

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

package/src/components/LpTable.vue

@@ -42,6 +42,11 @@ const props = withDefaults(
     /** Per-row right-click menu. Return [] (or omit the prop) to disable it for
      *  a row; the row then keeps the browser's native context menu. */
     rowMenu?: (row: T) => ContextMenuItemDef[]
+    /** Wording for the header's right-click menu. Passed in because the kit
+     *  carries no translations: an app that leaves these alone gets English. */
+    sortAscLabel?: string
+    sortDescLabel?: string
+    sortClearLabel?: string
   }>(),
   {
     emptyLabel: "Nothing here yet",
@@ -49,6 +54,9 @@ const props = withDefaults(
     selectable: false,
     selected: () => [],
     sort: null,
+    sortAscLabel: "Sort ascending",
+    sortDescLabel: "Sort descending",
+    sortClearLabel: "Clear sorting",
   },
 )
 
@@ -124,6 +132,46 @@ function sortIcon(col: TableColumn<T>): string {
   return s.dir === "asc" ? "lucide:arrow-up" : "lucide:arrow-down"
 }
 
+/**
+ * What right-clicking a header offers: the directions by name.
+ *
+ * The click cycles none → asc → desc → none, which is right for the common
+ * case and clumsy for the rest — going back to unsorted from ascending is two
+ * more clicks. Naming the three states makes each one reachable at once.
+ *
+ * Empty for a column that does not sort, and LpContextMenu passes an empty
+ * list straight through to the browser's own menu.
+ */
+function headerMenu(col: TableColumn<T>): ContextMenuItemDef[] {
+  if (!col.sortable) return []
+  const s = activeSort.value
+  const set = (next: SortState | null) => () => {
+    ownSort.value = next
+    emit("update:sort", next)
+  }
+  return [
+    {
+      label: props.sortAscLabel,
+      icon: "lucide:arrow-up",
+      disabled: s?.key === col.key && s.dir === "asc",
+      onSelect: set({ key: col.key, dir: "asc" }),
+    },
+    {
+      label: props.sortDescLabel,
+      icon: "lucide:arrow-down",
+      disabled: s?.key === col.key && s.dir === "desc",
+      onSelect: set({ key: col.key, dir: "desc" }),
+    },
+    {
+      label: props.sortClearLabel,
+      icon: "lucide:x",
+      separatorBefore: true,
+      disabled: !s,
+      onSelect: set(null),
+    },
+  ]
+}
+
 // ── selection ────────────────────────────────────────────────
 const selectedSet = computed(() => new Set(props.selected))
 const allKeys = computed(() => props.rows.map((r, i) => keyFor(r, i)))
@@ -256,8 +304,15 @@ const barInsetTop = computed(() =>
                 : undefined
             "
           >
+            <!-- The menu wraps the button rather than the cell: a component
+                 cannot sit between `<tr>` and `<th>` — the template compiler
+                 drops it there, silently — so the trigger goes on the one
+                 element inside the header that is already interactive.
+                 Right-clicking names the directions instead of making you cycle
+                 through them: getting back to unsorted from ascending is two
+                 more clicks otherwise. -->
+            <LpContextMenu v-if="col.sortable" :items="headerMenu(col)">
             <button
-              v-if="col.sortable"
               type="button"
               class="group/sort -mx-1 inline-flex items-center gap-1 rounded px-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
               :class="[
@@ -278,6 +333,7 @@ const barInsetTop = computed(() =>
                 "
               />
             </button>
+            </LpContextMenu>
             <template v-else>{{ col.label }}</template>
           </th>
         </tr>
@@ -375,10 +431,13 @@ const barInsetTop = computed(() =>
   transform: translateX(-0.5rem);
 }
 
-.lp-row-leave-active {
-  position: absolute;
-  width: 100%;
-}
+/*
+ * The leaving row stays in the flow. Taking it out with `position: absolute` is
+ * the usual trick for a list, but a `<tr>` positioned that way loses the table's
+ * column grid and collapses to its content width — the row visibly breaks apart
+ * on its way out. The rows below close the gap through `lp-row-move` instead,
+ * which is a moment slower and stays a table the whole time.
+ */
 
 /* A filter that redraws the list is information, not decoration: with motion
    turned down the rows change without animating rather than not changing. */
@@ -388,9 +447,5 @@ const barInsetTop = computed(() =>
   .lp-row-move {
     transition: none;
   }
-
-  .lp-row-leave-active {
-    position: static;
-  }
 }
 </style>