@leavepulse/ui 0.71.1 → 0.72.0

package/dist/chunks/LpSidebar-BftYsk5d.js

@@ -0,0 +1,494 @@
+import { defineComponent, computed, ref, useId, openBlock, createElementBlock, Fragment, createElementVNode, mergeProps, unref, normalizeClass, createCommentVNode, toDisplayString, renderSlot, createBlock, withCtx, createVNode, createSlots, normalizeProps, guardReactiveProps, nextTick } from "vue";
+import { useHotkeys, parseCombo } from "../composables/useHotkeys.js";
+import { usePersisted } from "../composables/usePersisted.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { _ as _sfc_main$5 } from "./LpDrawer-RRamxbLV.js";
+import { _ as _sfc_main$2 } from "./LpIcon--5WSb3jJ.js";
+import { _ as _sfc_main$3 } from "./LpInput-1eNvtzXs.js";
+import { _ as _sfc_main$1 } from "./LpTooltip-BcBvIx4z.js";
+import { _ as _sfc_main$4 } from "./LpSidebarNav-BzNWMZfc.js";
+const _hoisted_1 = ["data-compact", "aria-label"];
+const _hoisted_2 = {
+  key: 0,
+  class: "flex w-16 shrink-0 justify-center"
+};
+const _hoisted_3 = ["aria-label"];
+const _hoisted_4 = ["aria-label", "aria-pressed"];
+const _hoisted_5 = {
+  key: 0,
+  class: "truncate"
+};
+const _hoisted_6 = {
+  key: 7,
+  class: "mt-2 shrink-0 overflow-hidden border-t border-line pt-3"
+};
+const _hoisted_7 = {
+  key: 0,
+  class: "flex w-12 justify-center"
+};
+const _hoisted_8 = ["aria-label", "title"];
+const _hoisted_9 = ["aria-label"];
+const _hoisted_10 = {
+  key: 2,
+  class: "mt-2 flex shrink-0 flex-col gap-2"
+};
+const _hoisted_11 = {
+  key: 3,
+  class: "mt-2 shrink-0 border-t border-line pt-3"
+};
+const DEFAULT_WIDTH = 240;
+const COMPACT_WIDTH = 64;
+const FOLD_AT = 132;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ inheritAttrs: false },
+  __name: "LpSidebar",
+  props: {
+    modelValue: {},
+    items: {},
+    sections: {},
+    isActive: {},
+    searchable: { type: Boolean },
+    searchPlaceholder: {},
+    labels: {},
+    search: {},
+    loading: { type: Boolean },
+    skeletonRows: { default: 6 },
+    skeletonHeader: { type: Boolean, default: true },
+    responsive: { type: Boolean, default: false },
+    open: { type: Boolean },
+    mobileBreakpoint: { default: "md" },
+    edgeOpen: { type: Boolean },
+    divider: { type: Boolean, default: true },
+    variant: { default: "rail" },
+    width: {},
+    collapsed: {},
+    persist: {},
+    autoCollapseAfter: { default: 14 },
+    hoverFollow: { type: Boolean, default: false },
+    compact: { type: Boolean, default: void 0 },
+    resizable: { type: Boolean },
+    minWidth: { default: 180 },
+    maxWidth: { default: 420 },
+    compactHotkey: { type: [String, Boolean], default: "Ctrl+B" },
+    pinnable: { type: Boolean },
+    pinned: {},
+    previewDelay: { default: 900 },
+    environment: {},
+    hints: {}
+  },
+  emits: ["update:modelValue", "update:open", "update:collapsed", "select", "update:search", "update:compact", "update:pinned"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const text = useLabels(
+      "sidebar",
+      {
+        nav: "Sidebar",
+        search: "Search",
+        pinned: "Pinned",
+        pin: "Pin to top",
+        unpin: "Unpin",
+        expand: "Show the pages under it",
+        compact: "Collapse the sidebar",
+        expandRail: "Expand the sidebar",
+        resize: "Drag to resize, double-click to reset"
+      },
+      () => props.labels
+    );
+    const placeholder = computed(() => props.searchPlaceholder ?? text.value.search);
+    function withNews(item) {
+      const children = item.children?.map(withNews);
+      const pages = item.hintPage === void 0 ? [] : Array.isArray(item.hintPage) ? item.hintPage : [item.hintPage];
+      const fresh = !!props.hints && pages.some((p) => props.hints.unreadNews(p).length > 0);
+      return fresh || children ? { ...item, children, dot: item.dot || fresh } : item;
+    }
+    const allGroups = computed(() => {
+      const groups2 = props.sections ?? (props.items ? [{ items: props.items }] : []);
+      return props.hints ? groups2.map((g) => ({ ...g, items: g.items.map(withNews) })) : groups2;
+    });
+    const ownSearch = ref("");
+    const query = computed({
+      get: () => props.search ?? ownSearch.value,
+      set: (v) => {
+        ownSearch.value = v;
+        emit("update:search", v);
+      }
+    });
+    function normalise(s) {
+      return s.normalize("NFD").replace(new RegExp("\\p{Diacritic}", "gu"), "").toLowerCase();
+    }
+    function matches(item, needle) {
+      if (normalise(item.label).includes(needle)) return true;
+      return (item.keywords ?? []).some((k) => normalise(k).includes(needle));
+    }
+    function narrowed(item, needle) {
+      if (matches(item, needle)) return item;
+      const children = (item.children ?? []).filter((c) => matches(c, needle));
+      return children.length ? { ...item, children } : null;
+    }
+    const groups = computed(() => {
+      const needle = normalise(query.value.trim());
+      if (!needle) return allGroups.value;
+      return allGroups.value.map((section) => ({
+        ...section,
+        items: section.items.map((i) => narrowed(i, needle)).filter((i) => i !== null)
+      })).filter((section) => section.items.length > 0);
+    });
+    const filtering = computed(() => query.value.trim().length > 0);
+    function itemActive(item) {
+      return props.isActive ? props.isActive(item) : item.id === props.modelValue;
+    }
+    function keyOf(section) {
+      return section.key ?? section.title ?? "";
+    }
+    const ownCollapsed = usePersisted(
+      () => props.persist && `lp-sidebar:${props.persist}`,
+      null,
+      { validate: (value) => value === null || Array.isArray(value) && value.every((k) => typeof k === "string") }
+    );
+    const navLength = computed(
+      () => groups.value.reduce((n, g) => n + g.items.length + (g.title ? 1 : 0), 0)
+    );
+    const autoCollapsed = computed(() => {
+      const limit = props.autoCollapseAfter;
+      if (!limit || navLength.value <= limit) return [];
+      return groups.value.filter((g) => g.collapsible && !g.items.some((i) => itemActive(i) || !!i.children?.some(itemActive))).map(keyOf).filter(Boolean);
+    });
+    const collapsedKeys = computed(
+      () => (
+        // Nothing stays folded while a query is on: a section that matched but is
+        // closed looks exactly like a section that did not match, and the person is
+        // typing precisely because they cannot find the thing by eye.
+        filtering.value ? [] : props.collapsed ?? ownCollapsed.value ?? autoCollapsed.value
+      )
+    );
+    function toggleSection(key, collapsed) {
+      const next = collapsed ? [.../* @__PURE__ */ new Set([...collapsedKeys.value, key])] : collapsedKeys.value.filter((k) => k !== key);
+      ownCollapsed.value = next;
+      emit("update:collapsed", next);
+    }
+    const ownCompact = usePersisted(() => props.persist && `lp-sidebar:${props.persist}:compact`, false);
+    const isCompact = computed(() => props.compact ?? ownCompact.value);
+    function setCompact(value) {
+      ownCompact.value = value;
+      emit("update:compact", value);
+    }
+    const ENV_TONE = {
+      warning: "bg-accent text-ink-inverse",
+      danger: "bg-danger text-white",
+      action: "bg-action text-ink-inverse",
+      brand: "bg-brand text-ink-inverse"
+    };
+    const env = computed(() => {
+      const e = props.environment;
+      if (!e) return null;
+      const { label, tone = "warning" } = typeof e === "string" ? { label: e } : e;
+      return { label, tone: ENV_TONE[tone] };
+    });
+    const ownWidth = usePersisted(() => props.resizable && props.persist && `lp-sidebar:${props.persist}:width`, DEFAULT_WIDTH);
+    const dragging = ref(false);
+    const railWidth = computed(() => {
+      if (isCompact.value) return `${COMPACT_WIDTH}px`;
+      if (props.resizable) return `${ownWidth.value}px`;
+      return props.width;
+    });
+    function startResize(event) {
+      if (event.button !== 0) return;
+      const handle = event.currentTarget;
+      handle.setPointerCapture(event.pointerId);
+      const from = event.clientX;
+      const start = isCompact.value ? COMPACT_WIDTH : ownWidth.value;
+      dragging.value = true;
+      const move = (e) => {
+        const wanted = start + (e.clientX - from);
+        if (wanted < FOLD_AT) {
+          if (!isCompact.value) setCompact(true);
+          if (start !== COMPACT_WIDTH) ownWidth.value = start;
+          return;
+        }
+        if (isCompact.value) setCompact(false);
+        ownWidth.value = Math.round(Math.min(props.maxWidth, Math.max(props.minWidth, wanted)));
+      };
+      const stop = () => {
+        dragging.value = false;
+        handle.removeEventListener("pointermove", move);
+        handle.removeEventListener("pointerup", stop);
+        handle.removeEventListener("pointercancel", stop);
+      };
+      handle.addEventListener("pointermove", move);
+      handle.addEventListener("pointerup", stop);
+      handle.addEventListener("pointercancel", stop);
+    }
+    const railEl = ref(null);
+    async function searchFromCompact() {
+      setCompact(false);
+      await nextTick();
+      railEl.value?.querySelector("input")?.focus();
+    }
+    function resetWidth() {
+      ownWidth.value = DEFAULT_WIDTH;
+      setCompact(false);
+    }
+    useHotkeys(
+      () => props.resizable && props.compactHotkey ? [
+        {
+          ...parseCombo(props.compactHotkey),
+          help: { group: text.value.nav, label: text.value.compact, combo: props.compactHotkey },
+          handler: () => setCompact(!isCompact.value)
+        }
+      ] : []
+    );
+    const ownPinned = usePersisted(() => props.persist && `lp-sidebar:${props.persist}:pinned`, [], {
+      validate: (value) => Array.isArray(value) && value.every((k) => typeof k === "string")
+    });
+    const pinnedIds = computed(() => props.pinned ?? ownPinned.value);
+    const everyItem = computed(() => allGroups.value.flatMap((g) => g.items.flatMap((i) => [i, ...i.children ?? []])));
+    const pinnedItems = computed(
+      () => props.pinnable ? pinnedIds.value.map((id) => everyItem.value.find((i) => i.id === id)).filter((i) => !!i) : []
+    );
+    function togglePin(id) {
+      const next = pinnedIds.value.includes(id) ? pinnedIds.value.filter((k) => k !== id) : [...pinnedIds.value, id];
+      ownPinned.value = next;
+      emit("update:pinned", next);
+    }
+    function activate(item) {
+      if (item.disabled) return;
+      emit("update:modelValue", item.id);
+      emit("select", item);
+      if (props.responsive && props.open) emit("update:open", false);
+    }
+    const baseId = `lp-sidebar-${useId()}`;
+    const railPillId = `${baseId}-rail`;
+    const drawerPillId = `${baseId}-drawer`;
+    const RAIL_VISIBILITY = {
+      sm: "hidden sm:flex",
+      md: "hidden md:flex",
+      lg: "hidden lg:flex",
+      xl: "hidden xl:flex"
+    };
+    const railClass = computed(
+      () => props.responsive ? RAIL_VISIBILITY[props.mobileBreakpoint] : "flex"
+    );
+    const chromeClass = computed(
+      () => props.variant === "panel" ? "rounded-card border border-line bg-surface-raised" : "border-r border-line bg-surface-raised"
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("nav", mergeProps({
+          ref_key: "railEl",
+          ref: railEl,
+          class: ["relative h-full shrink-0 flex-col gap-1", [
+            railClass.value,
+            chromeClass.value,
+            isCompact.value ? "px-2 py-3" : "p-3",
+            railWidth.value ? "" : "w-60",
+            dragging.value ? "" : "transition-[width] duration-(--duration-medium) ease-[var(--ease-emphasized)] motion-reduce:transition-none"
+          ]],
+          style: railWidth.value ? { width: railWidth.value } : void 0,
+          "data-compact": isCompact.value || void 0,
+          "aria-label": unref(text).nav
+        }, _ctx.$attrs), [
+          env.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(["pointer-events-none absolute inset-x-0 top-0 z-20 h-[3px]", env.value.tone])
+          }, null, 2)) : createCommentVNode("", true),
+          env.value && !isCompact.value ? (openBlock(), createElementBlock("span", {
+            key: 1,
+            class: normalizeClass(["pointer-events-none absolute left-1/2 top-0 z-20 -translate-x-1/2 rounded-b-small px-2 pb-0.5 text-[10px] font-semibold uppercase tracking-wide", env.value.tone])
+          }, toDisplayString(env.value.label), 3)) : createCommentVNode("", true),
+          _ctx.$slots.header ? (openBlock(), createElementBlock("div", {
+            key: 2,
+            class: normalizeClass(["mb-3 flex shrink-0 items-center", [
+              __props.variant === "panel" ? "pb-3" : isCompact.value ? "-mx-2 -mt-3 h-16 overflow-hidden" : "-mx-3 -mt-3 h-16 px-3",
+              __props.divider ? "border-b border-line" : ""
+            ]])
+          }, [
+            isCompact.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+              renderSlot(_ctx.$slots, "header", { compact: true })
+            ])) : renderSlot(_ctx.$slots, "header", {
+              key: 1,
+              compact: false
+            })
+          ], 2)) : createCommentVNode("", true),
+          __props.searchable && isCompact.value ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 3,
+            content: placeholder.value,
+            side: "right"
+          }, {
+            default: withCtx(() => [
+              createElementVNode("button", {
+                type: "button",
+                class: "mb-2 ml-1 grid size-10 shrink-0 place-items-center rounded-control text-muted outline-none transition-colors hover:bg-ink/[0.05] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
+                "aria-label": placeholder.value,
+                onClick: searchFromCompact
+              }, [
+                createVNode(_sfc_main$2, {
+                  name: "lucide:search",
+                  size: 17
+                })
+              ], 8, _hoisted_3)
+            ]),
+            _: 1
+          }, 8, ["content"])) : createCommentVNode("", true),
+          __props.searchable && !isCompact.value ? (openBlock(), createBlock(_sfc_main$3, {
+            key: 4,
+            modelValue: query.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
+            size: "sm",
+            icon: "lucide:search",
+            clearable: "",
+            class: "mb-2 shrink-0",
+            placeholder: placeholder.value,
+            "aria-label": placeholder.value
+          }, null, 8, ["modelValue", "placeholder", "aria-label"])) : createCommentVNode("", true),
+          createVNode(_sfc_main$4, {
+            groups: groups.value,
+            "pill-id": railPillId,
+            compact: isCompact.value,
+            pinnable: __props.pinnable,
+            pinned: pinnedItems.value,
+            "preview-delay": __props.previewDelay,
+            labels: unref(text),
+            "item-active": itemActive,
+            loading: __props.loading,
+            "skeleton-rows": __props.skeletonRows,
+            "skeleton-header": __props.skeletonHeader,
+            "collapsed-keys": collapsedKeys.value,
+            "hover-follow": __props.hoverFollow,
+            onActivate: activate,
+            onToggleSection: toggleSection,
+            onTogglePin: togglePin
+          }, createSlots({ _: 2 }, [
+            _ctx.$slots.item ? {
+              name: "item",
+              fn: withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "item", normalizeProps(guardReactiveProps(slotProps)))
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["groups", "compact", "pinnable", "pinned", "preview-delay", "labels", "loading", "skeleton-rows", "skeleton-header", "collapsed-keys", "hover-follow"]),
+          __props.resizable ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 5,
+            content: isCompact.value ? unref(text).expandRail : unref(text).compact,
+            side: "right"
+          }, {
+            default: withCtx(() => [
+              createElementVNode("button", {
+                type: "button",
+                class: normalizeClass(["mt-1 flex h-8 shrink-0 items-center gap-2 rounded-control px-3 text-xs text-muted outline-none transition-colors hover:bg-ink/[0.05] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring", isCompact.value ? "ml-1 w-10 justify-center px-0" : ""]),
+                "aria-label": isCompact.value ? unref(text).expandRail : unref(text).compact,
+                "aria-pressed": isCompact.value,
+                onClick: _cache[1] || (_cache[1] = ($event) => setCompact(!isCompact.value))
+              }, [
+                createVNode(_sfc_main$2, {
+                  name: isCompact.value ? "lucide:panel-left-open" : "lucide:panel-left-close",
+                  size: 16,
+                  class: "shrink-0"
+                }, null, 8, ["name"]),
+                !isCompact.value ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(unref(text).compact), 1)) : createCommentVNode("", true)
+              ], 10, _hoisted_4)
+            ]),
+            _: 1
+          }, 8, ["content"])) : createCommentVNode("", true),
+          _ctx.$slots.actions ? (openBlock(), createElementBlock("div", {
+            key: 6,
+            class: normalizeClass(["mt-2 flex shrink-0 flex-col gap-2", isCompact.value ? "w-12 items-center" : ""])
+          }, [
+            renderSlot(_ctx.$slots, "actions", { compact: isCompact.value })
+          ], 2)) : createCommentVNode("", true),
+          _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6, [
+            isCompact.value ? (openBlock(), createElementBlock("div", _hoisted_7, [
+              renderSlot(_ctx.$slots, "footer", { compact: true })
+            ])) : renderSlot(_ctx.$slots, "footer", {
+              key: 1,
+              compact: false
+            })
+          ])) : createCommentVNode("", true),
+          __props.resizable && __props.variant === "rail" ? (openBlock(), createElementBlock("div", {
+            key: 8,
+            role: "separator",
+            "aria-orientation": "vertical",
+            "aria-label": unref(text).resize,
+            title: unref(text).resize,
+            class: "group/resize absolute inset-y-0 -right-1.5 z-10 w-3 cursor-col-resize touch-none",
+            onPointerdown: startResize,
+            onDblclick: resetWidth
+          }, [
+            createElementVNode("span", {
+              class: normalizeClass(["absolute inset-y-0 left-1/2 w-0.5 -translate-x-1/2 bg-brand opacity-0 transition-opacity duration-(--duration-fast) group-hover/resize:opacity-60", dragging.value ? "!opacity-100" : ""])
+            }, null, 2)
+          ], 40, _hoisted_8)) : createCommentVNode("", true)
+        ], 16, _hoisted_1),
+        __props.responsive ? (openBlock(), createBlock(_sfc_main$5, {
+          key: 0,
+          open: __props.open,
+          direction: "left",
+          size: "sm",
+          "edge-open": __props.edgeOpen,
+          "edge-breakpoint": __props.mobileBreakpoint,
+          "onUpdate:open": _cache[3] || (_cache[3] = (v) => emit("update:open", v))
+        }, {
+          default: withCtx(() => [
+            createElementVNode("nav", {
+              class: "flex h-full flex-col gap-1",
+              "aria-label": unref(text).nav
+            }, [
+              _ctx.$slots.header ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: normalizeClass(["shrink-0", __props.divider ? "mb-3 border-b border-line pb-3" : "mb-2"])
+              }, [
+                renderSlot(_ctx.$slots, "header")
+              ], 2)) : createCommentVNode("", true),
+              __props.searchable ? (openBlock(), createBlock(_sfc_main$3, {
+                key: 1,
+                modelValue: query.value,
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => query.value = $event),
+                size: "sm",
+                icon: "lucide:search",
+                clearable: "",
+                class: "mb-2 shrink-0",
+                placeholder: placeholder.value,
+                "aria-label": placeholder.value
+              }, null, 8, ["modelValue", "placeholder", "aria-label"])) : createCommentVNode("", true),
+              createVNode(_sfc_main$4, {
+                groups: groups.value,
+                "pill-id": drawerPillId,
+                pinnable: __props.pinnable,
+                pinned: pinnedItems.value,
+                "preview-delay": __props.previewDelay,
+                labels: unref(text),
+                "item-active": itemActive,
+                loading: __props.loading,
+                "skeleton-rows": __props.skeletonRows,
+                "skeleton-header": __props.skeletonHeader,
+                "collapsed-keys": collapsedKeys.value,
+                "hover-follow": __props.hoverFollow,
+                onActivate: activate,
+                onToggleSection: toggleSection,
+                onTogglePin: togglePin
+              }, createSlots({ _: 2 }, [
+                _ctx.$slots.item ? {
+                  name: "item",
+                  fn: withCtx((slotProps) => [
+                    renderSlot(_ctx.$slots, "item", normalizeProps(guardReactiveProps(slotProps)))
+                  ]),
+                  key: "0"
+                } : void 0
+              ]), 1032, ["groups", "pinnable", "pinned", "preview-delay", "labels", "loading", "skeleton-rows", "skeleton-header", "collapsed-keys", "hover-follow"]),
+              _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_10, [
+                renderSlot(_ctx.$slots, "actions")
+              ])) : createCommentVNode("", true),
+              _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_11, [
+                renderSlot(_ctx.$slots, "footer")
+              ])) : createCommentVNode("", true)
+            ], 8, _hoisted_9)
+          ]),
+          _: 3
+        }, 8, ["open", "edge-open", "edge-breakpoint"])) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};