@leavepulse/ui 0.14.10 → 0.15.0

package/dist/chunks/{LpFileTree-0Ko_uj8q.js → LpFileTree-D0DEpKof.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, watch, computed, openBlock, createElementBlock, Fragment, renderList, normalizeStyle, createBlock, createVNode, withCtx, createElementVNode, renderSlot, mergeProps, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, createCommentVNode } from "vue";
 import { subtreeIds, subtreeSize, formatSize, sortNodes, ancestorIds, checkStateOf } from "../components/fileTree.js";
 import { _ as _sfc_main$1 } from "./LpEmptyState-CrfyRJUG.js";
-import { _ as _sfc_main$3 } from "./LpFileTreeNode-D3lNEP-1.js";
+import { _ as _sfc_main$3 } from "./LpFileTreeNode-3e71ywJV.js";
 import { _ as _sfc_main$2 } from "./LpScrollArea-BtnZCCBT.js";
 const _hoisted_1 = {
   key: 0,
@@ -9,7 +9,7 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = {
   key: 2,
-  class: "flex min-h-0 flex-col"
+  class: "flex h-full min-h-0 flex-col"
 };
 const _hoisted_3 = ["aria-multiselectable"];
 const _hoisted_4 = {
@@ -195,6 +195,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function onSelect(node) {
       if (node.disabled) return;
+      if (props.selected === node.id) {
+        emit("update:selected", "");
+        return;
+      }
       emit("update:selected", node.id);
       emit("select", node);
       if (node.kind === "file") emit("open", node);
@@ -318,7 +322,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ref: root,
               role: "tree",
               "aria-multiselectable": __props.checkable,
-              class: "flex flex-col",
+              class: "flex min-w-0 flex-col",
               onKeydown
             }, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(roots.value, (node) => {

package/dist/chunks/{LpFileTreeNode-D3lNEP-1.js → LpFileTreeNode-3e71ywJV.js}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, withModifiers, normalizeStyle, normalizeClass, createBlock, createCommentVNode, unref, renderSlot, createTextVNode, toDisplayString, Transition, Fragment, renderList, mergeProps } from "vue";
-import { sortNodes, checkStateOf, subtreeSize, formatSize, formatModified, fileIcon } from "../components/fileTree.js";
+import { sortNodes, checkStateOf, subtreeSize, formatSize, checkedCount, formatModified, fileIcon } from "../components/fileTree.js";
 import { _ as _sfc_main$3 } from "./LpCheckbox-BO0zuuPh.js";
 import { _ as _sfc_main$1 } from "./LpContextMenu-D0mzXqA7.js";
 import { _ as _sfc_main$2 } from "./LpIcon-CCnX5_2j.js";
@@ -9,20 +9,24 @@ const _hoisted_3 = { class: "flex size-4 shrink-0 items-center justify-center" }
 const _hoisted_4 = { class: "min-w-0 flex-1 truncate" };
 const _hoisted_5 = {
   key: 1,
-  class: "shrink-0 text-xs text-muted"
+  class: "shrink-0 rounded-pill bg-brand-soft px-1.5 py-0.5 text-[11px] font-medium tabular-nums text-brand"
 };
 const _hoisted_6 = {
   key: 2,
-  class: "shrink-0 text-xs tabular-nums text-muted/80"
+  class: "shrink-0 text-xs text-muted"
 };
 const _hoisted_7 = {
   key: 3,
-  class: "w-16 shrink-0 text-right text-xs tabular-nums text-muted"
+  class: "shrink-0 text-xs tabular-nums text-muted/80"
 };
 const _hoisted_8 = {
+  key: 4,
+  class: "w-16 shrink-0 text-right text-xs tabular-nums text-muted"
+};
+const _hoisted_9 = {
   key: 0,
   role: "group",
-  class: "flex flex-col overflow-hidden"
+  class: "flex min-w-0 flex-col overflow-hidden"
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpFileTreeNode",
@@ -63,6 +67,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const bytes = subtreeSize(props.node);
       return bytes === void 0 ? "" : formatSize(bytes);
     });
+    const countLabel = computed(() => {
+      if (!props.checkable || !isDir.value) return "";
+      const { checked, total } = checkedCount(props.node, props.checked);
+      return total && checked && checked < total ? `${checked} / ${total}` : "";
+    });
     const modifiedLabel = computed(
       () => props.showModified && props.node.modified !== void 0 ? formatModified(props.node.modified) : ""
     );
@@ -104,6 +113,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const _component_LpFileTreeNode = resolveComponent("LpFileTreeNode", true);
       return openBlock(), createElementBlock("li", {
         role: "treeitem",
+        class: "min-w-0",
         "aria-level": __props.depth + 1,
         "aria-selected": isSelected.value,
         "aria-expanded": canExpand.value ? isOpen.value : void 0,
@@ -116,7 +126,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             createElementVNode("div", {
               "data-node-id": __props.node.id,
               tabindex: isFocused.value ? 0 : -1,
-              class: normalizeClass(["group/row relative flex cursor-pointer select-none items-center gap-1.5 rounded-control py-1 pr-2 text-sm outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring", [
+              class: normalizeClass(["group/row relative flex min-w-0 cursor-pointer select-none items-center gap-1.5 rounded-control py-1 pr-2 text-sm outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring", [
                 __props.node.disabled ? "cursor-not-allowed text-muted/50" : isSelected.value ? "bg-brand-soft text-ink" : "text-muted hover:bg-surface-soft hover:text-ink"
               ]]),
               style: normalizeStyle({ paddingLeft: `${__props.depth * 14 + 6}px` }),
@@ -161,9 +171,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   createTextVNode(toDisplayString(__props.node.name), 1)
                 ])
               ]),
-              __props.node.meta ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(__props.node.meta), 1)) : createCommentVNode("", true),
-              modifiedLabel.value ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(modifiedLabel.value), 1)) : createCommentVNode("", true),
-              sizeLabel.value ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(sizeLabel.value), 1)) : createCommentVNode("", true)
+              countLabel.value ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(countLabel.value), 1)) : createCommentVNode("", true),
+              __props.node.meta ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(__props.node.meta), 1)) : createCommentVNode("", true),
+              modifiedLabel.value ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(modifiedLabel.value), 1)) : createCommentVNode("", true),
+              sizeLabel.value ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(sizeLabel.value), 1)) : createCommentVNode("", true)
             ], 14, _hoisted_2)
           ]),
           _: 3
@@ -174,7 +185,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           onLeave: onBranchLeave
         }, {
           default: withCtx(() => [
-            isOpen.value && hasChildren.value ? (openBlock(), createElementBlock("ul", _hoisted_8, [
+            isOpen.value && hasChildren.value ? (openBlock(), createElementBlock("ul", _hoisted_9, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(children.value, (child, i) => {
                 return openBlock(), createBlock(_component_LpFileTreeNode, {
                   key: child.id,

package/dist/components/LpFileTree.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpFileTree-0Ko_uj8q.js";
+import { _ as _sfc_main } from "../chunks/LpFileTree-D0DEpKof.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpFileTreeNode.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpFileTreeNode-D3lNEP-1.js";
+import { _ as _sfc_main } from "../chunks/LpFileTreeNode-3e71ywJV.js";
 export {
   _sfc_main as default
 };

package/dist/components/fileTree.d.ts

@@ -50,5 +50,14 @@ export type CheckState = "checked" | "unchecked" | "indeterminate";
  * ticked as a whole — which is exactly what a backup picker needs.
  */
 export declare function checkStateOf(node: FileNode, checked: ReadonlySet<string>): CheckState;
+/**
+ * How much of a directory's subtree is ticked, counting FILES only (folders are
+ * containers, not payload). Lets a row say "3 / 12" so a half-filled checkbox
+ * isn't the only clue that a folder is partially selected.
+ */
+export declare function checkedCount(node: FileNode, checked: ReadonlySet<string>): {
+    checked: number;
+    total: number;
+};
 /** Ids of every ancestor directory of `id`, so callers can reveal a deep node. */
 export declare function ancestorIds(nodes: FileNode[], id: string): string[];

package/dist/components/fileTree.js

@@ -128,6 +128,22 @@ function checkStateOf(node, checked) {
   if (all) return "checked";
   return any ? "indeterminate" : "unchecked";
 }
+function checkedCount(node, checked) {
+  let count = 0;
+  let total = 0;
+  function walk(list) {
+    for (const child of list) {
+      if (child.kind === "file") {
+        total++;
+        if (checked.has(child.id)) count++;
+      } else if (child.children?.length) {
+        walk(child.children);
+      }
+    }
+  }
+  walk(node.children ?? []);
+  return { checked: count, total };
+}
 function ancestorIds(nodes, id) {
   const path = [];
   function walk(list, trail) {
@@ -146,6 +162,7 @@ function ancestorIds(nodes, id) {
 export {
   ancestorIds,
   checkStateOf,
+  checkedCount,
   fileIcon,
   formatModified,
   formatSize,

package/dist/index.d.ts

@@ -28,7 +28,7 @@ export { default as LpEmptyState } from './components/LpEmptyState.vue';
 export { default as LpFileTree } from './components/LpFileTree.vue';
 export type { FileTreeSummary } from './components/LpFileTree.vue';
 export type { CheckState, FileNode } from './components/fileTree';
-export { ancestorIds, checkStateOf, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize, } from './components/fileTree';
+export { ancestorIds, checkedCount, checkStateOf, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize, } from './components/fileTree';
 export { default as LpFormField } from './components/LpFormField.vue';
 export { default as LpIcon } from './components/LpIcon.vue';
 export { default as LpInfraNode } from './components/LpInfraNode.vue';

package/dist/index.js

@@ -19,8 +19,8 @@ import { _ as _17 } from "./chunks/LpDivider-CUX46KR0.js";
 import { _ as _18 } from "./chunks/LpDrawer-6n5Hd-iF.js";
 import { _ as _19 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
 import { _ as _20 } from "./chunks/LpEmptyState-CrfyRJUG.js";
-import { _ as _21 } from "./chunks/LpFileTree-0Ko_uj8q.js";
-import { ancestorIds, checkStateOf, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
+import { _ as _21 } from "./chunks/LpFileTree-D0DEpKof.js";
+import { ancestorIds, checkStateOf, checkedCount, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
 import { _ as _22 } from "./chunks/LpFormField-Bn-ZwC6z.js";
 import { _ as _23 } from "./chunks/LpIcon-CCnX5_2j.js";
 import { _ as _24 } from "./chunks/LpInfraNode-C_PHcthC.js";
@@ -168,6 +168,7 @@ export {
   blockTitle,
   e as bootstrapTheme,
   checkStateOf,
+  checkedCount,
   countBlocks,
   countLeaves,
   f as dark,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.14.10",
+  "version": "0.15.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {
@@ -31,7 +31,8 @@
     "./dist/*": "./dist/*"
   },
   "publishConfig": {
-    "registry": "https://registry.npmjs.org"
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
   },
   "sideEffects": [
     "**/*.css",

package/src/components/LpFileTree.vue

@@ -321,6 +321,12 @@ function onToggle(node: FileNode) {
 
 function onSelect(node: FileNode) {
   if (node.disabled) return
+  // Clicking the highlighted row again clears it — a selection you can't undo
+  // without picking something else is a trap.
+  if (props.selected === node.id) {
+    emit("update:selected", "")
+    return
+  }
   emit("update:selected", node.id)
   emit("select", node)
   if (node.kind === "file") emit("open", node)

package/src/components/LpFileTreeNode.vue

@@ -11,6 +11,7 @@
  */
 import { computed } from "vue"
 import {
+  checkedCount,
   checkStateOf,
   fileIcon,
   formatModified,
@@ -82,6 +83,17 @@ const sizeLabel = computed(() => {
   return bytes === undefined ? "" : formatSize(bytes)
 })
 
+/**
+ * "3 / 12" on a directory whose subtree is partly ticked. Only shown while it
+ * actually differs from the whole — a fully ticked or untouched folder reads
+ * fine from the checkbox alone, and a count on every row would be noise.
+ */
+const countLabel = computed(() => {
+  if (!props.checkable || !isDir.value) return ""
+  const { checked, total } = checkedCount(props.node, props.checked)
+  return total && checked && checked < total ? `${checked} / ${total}` : ""
+})
+
 const modifiedLabel = computed(() =>
   props.showModified && props.node.modified !== undefined
     ? formatModified(props.node.modified)
@@ -207,6 +219,15 @@ function onActivate() {
           </slot>
         </span>
 
+        <!-- Partial-selection counter: says outright how much of the folder is
+             ticked, which a half-state checkbox alone doesn't convey. -->
+        <span
+          v-if="countLabel"
+          class="shrink-0 rounded-pill bg-brand-soft px-1.5 py-0.5 text-[11px] font-medium tabular-nums text-brand"
+        >
+          {{ countLabel }}
+        </span>
+
         <!-- Metadata columns: tabular figures so sizes line up down the tree. -->
         <span v-if="node.meta" class="shrink-0 text-xs text-muted">{{ node.meta }}</span>
         <span

package/src/components/fileTree.ts

@@ -196,6 +196,31 @@ export function checkStateOf(node: FileNode, checked: ReadonlySet<string>): Chec
   return any ? "indeterminate" : "unchecked"
 }
 
+/**
+ * How much of a directory's subtree is ticked, counting FILES only (folders are
+ * containers, not payload). Lets a row say "3 / 12" so a half-filled checkbox
+ * isn't the only clue that a folder is partially selected.
+ */
+export function checkedCount(
+  node: FileNode,
+  checked: ReadonlySet<string>,
+): { checked: number; total: number } {
+  let count = 0
+  let total = 0
+  function walk(list: FileNode[]) {
+    for (const child of list) {
+      if (child.kind === "file") {
+        total++
+        if (checked.has(child.id)) count++
+      } else if (child.children?.length) {
+        walk(child.children)
+      }
+    }
+  }
+  walk(node.children ?? [])
+  return { checked: count, total }
+}
+
 /** Ids of every ancestor directory of `id`, so callers can reveal a deep node. */
 export function ancestorIds(nodes: FileNode[], id: string): string[] {
   const path: string[] = []

package/src/index.ts

@@ -30,6 +30,7 @@ export type { FileTreeSummary } from "./components/LpFileTree.vue"
 export type { CheckState, FileNode } from "./components/fileTree"
 export {
   ancestorIds,
+  checkedCount,
   checkStateOf,
   fileIcon,
   formatModified,