@leavepulse/ui 0.43.4 → 0.45.0

package/src/components/LpTableFilter.vue

@@ -0,0 +1,175 @@
+<script lang="ts">
+export interface TableFilterOption {
+  value: unknown
+  label: string
+  /** Rows holding the value; omitted when unknown (a server-backed table). */
+  count?: number
+}
+
+export interface TableFilterLabels {
+  search: string
+  all: string
+  none: string
+  invert: string
+  only: string
+  onlyShown: string
+  addShown: string
+  noValues: string
+}
+</script>
+
+<script setup lang="ts">
+/*
+ * The value filter of one LpTable column, opened from the funnel in its
+ * header. Built for columns with many values: a search narrows the LIST
+ * without touching what is ticked, "Only" next to a value shows just that one
+ * in a click, and after a search the matches can be taken as a whole.
+ */
+import { computed, ref } from "vue"
+import LpCheckbox from "./LpCheckbox.vue"
+import LpInput from "./LpInput.vue"
+import LpShift from "./LpShift.vue"
+import { usePaintSelect } from "../composables/usePaintSelect"
+import { hideAllValues, invertHidden, matchesQuery, onlyValues, unhideValues } from "./tableFilter"
+
+const props = defineProps<{
+  options: TableFilterOption[]
+  hidden: ReadonlySet<unknown>
+  labels: TableFilterLabels
+}>()
+
+const emit = defineEmits<{ (e: "update:hidden", value: Set<unknown>): void }>()
+
+/** Past this many values a list is easier searched than scanned. */
+const SEARCH_FROM = 8
+
+const query = ref("")
+const values = computed(() => props.options.map((o) => o.value))
+const shown = computed(() => props.options.filter((o) => matchesQuery(o.label, query.value)))
+
+function set(next: Set<unknown>) {
+  emit("update:hidden", next)
+}
+
+function toggle(value: unknown) {
+  const next = new Set(props.hidden)
+  if (next.has(value)) next.delete(value)
+  else next.add(value)
+  set(next)
+}
+
+const list = ref<HTMLElement | null>(null)
+
+/*
+ * Press a value's tick and sweep down the list to tick or clear the run, the
+ * same way rows of the table are painted. The selection here is the values
+ * shown, so painting writes back the complement as the hidden set.
+ */
+const byKey = computed(() => new Map(props.options.map((o) => [String(o.value), o.value])))
+const paint = usePaintSelect<unknown>({
+  root: list,
+  selection: () => values.value.filter((v) => !props.hidden.has(v)),
+  set: (shownValues) => {
+    const keep = new Set(shownValues)
+    set(new Set(values.value.filter((v) => !keep.has(v))))
+  },
+  resolve: (raw) => (byKey.value.has(raw) ? byKey.value.get(raw) : undefined),
+})
+
+/* Up and down walk the ticks, so a long list is not a long run of Tab. */
+function onListKeydown(event: KeyboardEvent) {
+  if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return
+  const boxes = [...(list.value?.querySelectorAll<HTMLElement>("[role=checkbox]") ?? [])]
+  const at = boxes.indexOf(document.activeElement as HTMLElement)
+  const next = boxes[at + (event.key === "ArrowDown" ? 1 : -1)]
+  if (!next) return
+  event.preventDefault()
+  next.focus()
+}
+
+const action =
+  "rounded-control px-1.5 py-0.5 text-xs font-medium text-muted outline-none transition-colors duration-fast hover:bg-surface-soft hover:text-ink focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40"
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <LpInput
+      v-if="options.length >= SEARCH_FROM"
+      v-model="query"
+      size="sm"
+      icon="lucide:search"
+      :placeholder="labels.search"
+      :aria-label="labels.search"
+    />
+
+    <div class="flex flex-wrap items-center gap-1">
+      <template v-if="query">
+        <button
+          type="button"
+          :class="action"
+          :disabled="!shown.length"
+          @click="set(onlyValues(values, shown.map((o) => o.value)))"
+        >
+          {{ labels.onlyShown.replace("{count}", String(shown.length)) }}
+        </button>
+        <button
+          type="button"
+          :class="action"
+          :disabled="!shown.length"
+          @click="set(unhideValues(hidden, shown.map((o) => o.value)))"
+        >
+          {{ labels.addShown.replace("{count}", String(shown.length)) }}
+        </button>
+      </template>
+      <template v-else>
+        <button type="button" :class="action" :disabled="!hidden.size" @click="set(new Set())">
+          {{ labels.all }}
+        </button>
+        <button
+          type="button"
+          :class="action"
+          :disabled="hidden.size === options.length"
+          @click="set(hideAllValues(values))"
+        >
+          {{ labels.none }}
+        </button>
+        <button type="button" :class="action" @click="set(invertHidden(values, hidden))">
+          {{ labels.invert }}
+        </button>
+      </template>
+    </div>
+
+    <LpShift>
+      <div
+        ref="list"
+        class="-mx-1 flex max-h-64 flex-col overflow-y-auto overscroll-contain"
+        @keydown="onListKeydown"
+      >
+        <div
+          v-for="option in shown"
+          :key="String(option.value)"
+          class="group/opt flex items-center gap-2 rounded-control px-1.5 py-1 transition-colors duration-fast select-none hover:bg-surface-soft"
+          :data-paint-key="String(option.value)"
+        >
+          <LpCheckbox
+            :model-value="!hidden.has(option.value)"
+            class="min-w-0 flex-1"
+            @pointerdown="paint.onPointerDown($event, option.value)"
+            @update:model-value="toggle(option.value)"
+          >
+            <span class="truncate">{{ option.label }}</span>
+          </LpCheckbox>
+          <span v-if="option.count !== undefined" class="text-xs text-muted tabular-nums">{{ option.count }}</span>
+          <button
+            type="button"
+            class="rounded-control px-1.5 py-0.5 text-xs font-medium text-brand opacity-0 outline-none transition-opacity duration-fast group-hover/opt:opacity-100 hover:bg-brand-soft focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring"
+            @click="set(onlyValues(values, [option.value]))"
+          >
+            {{ labels.only }}
+          </button>
+        </div>
+        <p v-if="!shown.length" class="px-1.5 py-2 text-xs text-muted">{{ labels.noValues }}</p>
+      </div>
+    </LpShift>
+  </div>
+</template>

package/src/components/LpTableOfContents.vue

@@ -11,6 +11,7 @@
  */
 import { Motion } from "motion-v"
 import { computed, onBeforeUnmount, onMounted, ref, useId, watch } from "vue"
+import { useLabels } from "../composables/useLpConfig"
 import { usePillTransition } from "../composables/usePillTransition"
 
 export interface TocLink {
@@ -23,14 +24,29 @@ export interface TocLink {
 const props = withDefaults(
   defineProps<{
     links: TocLink[]
-    /** Heading shown above the list. */
+    /** Heading shown above the list (defaults to the `title` label). */
     title?: string
     /** px offset from the top used as the scroll-spy trigger line. */
     offset?: number
+    labels?: Partial<{ title: string }>
   }>(),
-  { title: "On this page", offset: 96 },
+  { offset: 96 },
 )
 
+const text = useLabels("toc", { title: "On this page" }, () => props.labels)
+const heading = computed(() => props.title ?? text.value.title)
+
+// Every level of the tree as one ordered list; depth drives the indent, so
+// links nested deeper than two levels render instead of vanishing.
+interface TocRow {
+  link: TocLink
+  depth: number
+}
+function flatten(links: TocLink[], depth = 0): TocRow[] {
+  return links.flatMap((link) => [{ link, depth }, ...flatten(link.children ?? [], depth + 1)])
+}
+const rows = computed(() => flatten(props.links))
+
 const activeId = ref<string>("")
 // The id the pointer is hovering (null when not hovering). The indicator bar
 // follows the hovered link, falling back to the scroll-spy active one — same
@@ -97,13 +113,28 @@ function unfreeze() {
   safetyTimer = null
 }
 
-function suppressSpyUntilScrollEnds() {
+/*
+ * The element that actually scrolls to the heading. Inside an app shell that is
+ * a scroll region, not the window, and watching window.scrollY there saw no
+ * movement and unfroze on the first frame.
+ */
+function scrollerOf(el: HTMLElement): HTMLElement | null {
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    const { overflowY } = getComputedStyle(node)
+    if (/(auto|scroll|overlay)/.test(overflowY) && node.scrollHeight > node.clientHeight) return node
+  }
+  return null
+}
+
+function suppressSpyUntilScrollEnds(target: HTMLElement) {
   spySuppressed = true
   if (rafId != null) cancelAnimationFrame(rafId)
   if (safetyTimer != null) clearTimeout(safetyTimer)
-  let last = window.scrollY
+  const scroller = scrollerOf(target)
+  const position = () => (scroller ? scroller.scrollTop : window.scrollY)
+  let last = position()
   const tick = () => {
-    const y = window.scrollY
+    const y = position()
     if (y === last) {
       unfreeze() // position held for a frame → scrolling has come to rest
       return
@@ -122,9 +153,11 @@ function onClick(id: string, ev: MouseEvent) {
   if (!el) return
   ev.preventDefault()
   activeId.value = id // mark immediately so the bar jumps to the clicked item
-  suppressSpyUntilScrollEnds()
+  suppressSpyUntilScrollEnds(el)
   el.scrollIntoView({ behavior: "smooth", block: "start" })
-  history.replaceState(null, "", `#${id}`)
+  // Keep the router's own state: replacing it with null broke scroll
+  // restoration and back/forward bookkeeping in vue-router apps.
+  history.replaceState(history.state, "", `#${id}`)
 }
 
 onMounted(setup)
@@ -136,16 +169,21 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <nav :aria-label="title" class="text-sm">
+  <nav :aria-label="heading" class="text-sm">
     <p class="mb-2.5 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted">
-      {{ title }}
+      {{ heading }}
     </p>
     <ul class="relative flex flex-col gap-0.5 border-l border-line" @mouseleave="hoveredId = null">
-      <li v-for="link in links" :key="link.id" class="flex flex-col">
+      <li v-for="{ link, depth } in rows" :key="link.id" class="flex flex-col">
         <a
           :href="`#${link.id}`"
-          class="relative -ml-px block py-1 pl-3.5 leading-snug transition-colors duration-[var(--duration-fast)]"
-          :class="litId === link.id ? 'text-brand' : 'text-muted hover:text-ink'"
+          class="relative -ml-px block py-1 leading-snug transition-colors duration-[var(--duration-fast)]"
+          :class="[
+            depth > 0 ? 'text-[13px]' : '',
+            litId === link.id ? 'text-brand' : 'text-muted hover:text-ink',
+          ]"
+          :style="{ paddingLeft: `${0.875 + depth * 0.875}rem` }"
+          :aria-current="activeId === link.id ? 'location' : undefined"
           @click="onClick(link.id, $event)"
           @mouseenter="hoveredId = link.id"
         >
@@ -157,26 +195,6 @@ onBeforeUnmount(() => {
           />
           {{ link.text }}
         </a>
-
-        <ul v-if="link.children?.length" class="flex flex-col gap-0.5">
-          <li v-for="child in link.children" :key="child.id">
-            <a
-              :href="`#${child.id}`"
-              class="relative -ml-px block py-1 pl-7 text-[13px] leading-snug transition-colors duration-[var(--duration-fast)]"
-              :class="litId === child.id ? 'text-brand' : 'text-muted hover:text-ink'"
-              @click="onClick(child.id, $event)"
-              @mouseenter="hoveredId = child.id"
-            >
-              <Motion
-                v-if="litId === child.id"
-                :layout-id="pillId"
-                :transition="pillTransition"
-                class="absolute -left-px top-0 h-full w-0.5 rounded-full bg-brand"
-              />
-              {{ child.text }}
-            </a>
-          </li>
-        </ul>
       </li>
     </ul>
   </nav>

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 } from "vue"
+import { computed, ref, useId, watch } from "vue"
 import { usePillTransition } from "../composables/usePillTransition"
 import LpIcon from "./LpIcon.vue"
 
@@ -12,9 +12,11 @@ export interface TabItem {
   icon?: string
 }
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     modelValue?: string
+    /** Initially active tab when `v-model` is not bound (default: the first). */
+    defaultValue?: string
     items: TabItem[]
     /**
      * "contained" (default) wraps the triggers in a bordered, filled bar.
@@ -31,7 +33,22 @@ withDefaults(
   }>(),
   { variant: "contained", accent: false, block: false },
 )
-defineEmits<{ (e: "update:modelValue", value: string): void }>()
+const emit = defineEmits<{ (e: "update:modelValue", value: string): void }>()
+
+// Held here rather than left to reka, so the active marker follows the active
+// tab in uncontrolled use too: reading the prop alone left it unmarked.
+const current = ref(props.modelValue ?? props.defaultValue ?? props.items[0]?.value)
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (value !== undefined) current.value = value
+  },
+)
+
+function select(value: string) {
+  if (props.modelValue === undefined) current.value = value
+  emit("update:modelValue", value)
+}
 
 // The pill sits under the hovered tab, falling back to the active one
 // (UAProject header behaviour). motion-v shared layoutId animates the move.
@@ -80,8 +97,8 @@ function releaseFocusAfterPointer(event: PointerEvent) {
 
 <template>
   <TabsRoot
-    :model-value="modelValue"
-    @update:model-value="(v) => $emit('update:modelValue', v as string)"
+    :model-value="current"
+    @update:model-value="(v) => select(v as string)"
   >
     <TabsList
       class="gap-1"
@@ -109,7 +126,7 @@ function releaseFocusAfterPointer(event: PointerEvent) {
         <!-- Active marker: a bottom bar in "underline", a filled pill otherwise.
              Both slide between tabs via the shared motion layoutId. -->
         <Motion
-          v-if="pillUnder(item.value, modelValue)"
+          v-if="pillUnder(item.value, current)"
           :layout-id="pillId"
           :transition="pillTransition"
           :class="variant === 'underline'