@leavepulse/ui 0.88.0 → 0.90.0

package/README.md

@@ -312,7 +312,7 @@ from the comment that opens the component.
 - `LpPopover`: A floating panel anchored to a trigger, for content that is more than a tip.
 - `LpRelativeTime`: A date said the way people say it ("3 min ago", "in 2 h"), kept true as time passes, with the exact date one hover away.
 - `LpScrollArea`: Drawn overlay scrollbar (reka ScrollArea).
-- `LpSection`: A section heading: a title, an optional line under it, and actions on the right.
+- `LpSection`: A section heading with no default slot: a title, an optional line under it and actions on the right; the section's content goes after it, not inside.
 - `LpSkeleton`: Loading placeholder, in two shapes.
 - `LpStatus`: What state something is in, as a light and a word: a server online, a bot starting, a region degraded.
 - `LpTooltip`: Tooltip for controls whose meaning is not written on them — an icon button, a truncated value, a disabled action that owes an explanation.

package/dist/assets/{LpTable-BqZNpWgC.css → LpTable-DAVNb-x2.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-c73bcf2c],
-.lp-row-leave-active[data-v-c73bcf2c] {
+.lp-row-enter-active[data-v-f0750892],
+.lp-row-leave-active[data-v-f0750892] {
   transition:
     opacity var(--duration-fast) var(--ease-emphasized),
     transform var(--duration-fast) var(--ease-emphasized);
 }
-.lp-row-move[data-v-c73bcf2c] {
+.lp-row-move[data-v-f0750892] {
   transition: transform var(--duration-medium) var(--ease-emphasized);
 }
-.lp-row-enter-from[data-v-c73bcf2c],
-.lp-row-leave-to[data-v-c73bcf2c] {
+.lp-row-enter-from[data-v-f0750892],
+.lp-row-leave-to[data-v-f0750892] {
   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-c73bcf2c] {
+.lp-row-empty.lp-row-leave-active[data-v-f0750892] {
   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-c73bcf2c] {
+.lp-tick[data-v-f0750892] {
   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-c73bcf2c] {
+.lp-tick-open[data-v-f0750892] {
   max-width: 3.25rem;
   padding-inline: 1rem;
   opacity: 1;
 }
-.lp-tick-hidden[data-v-c73bcf2c],
-.lp-tick-cue[data-v-c73bcf2c] {
+.lp-tick-hidden[data-v-f0750892],
+.lp-tick-cue[data-v-f0750892] {
   opacity: 0;
 }
-tr:hover .lp-tick-cue[data-v-c73bcf2c],
-.lp-tick-cue[data-v-c73bcf2c]:focus-within {
+tr:hover .lp-tick-cue[data-v-f0750892],
+.lp-tick-cue[data-v-f0750892]:focus-within {
   opacity: 1;
 }
 
@@ -84,15 +84,15 @@ tr:hover .lp-tick-cue[data-v-c73bcf2c],
    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-c73bcf2c] {
+tr:hover .lp-tick-cue[data-v-f0750892] {
     opacity: 0;
 }
 
   /* Nor is there anything for the column's width to hold until then: on a
      touch screen it stays closed until a long press starts selecting, and
      eases open like the rest of the column. */
-.lp-tick-hidden[data-v-c73bcf2c],
-  .lp-tick-cue[data-v-c73bcf2c] {
+.lp-tick-hidden[data-v-f0750892],
+  .lp-tick-cue[data-v-f0750892] {
     max-width: 0;
     padding-inline: 0;
 }
@@ -102,7 +102,7 @@ tr:hover .lp-tick-cue[data-v-c73bcf2c] {
  * A list line's tick opens from nothing, as the table's column does, so lines
  * do not carry an empty gap until selection starts.
  */
-.lp-tick-line[data-v-c73bcf2c] {
+.lp-tick-line[data-v-f0750892] {
   max-width: 2rem;
   opacity: 1;
 }
@@ -112,28 +112,28 @@ tr:hover .lp-tick-cue[data-v-c73bcf2c] {
  * open; a cue shows it only while
  * the card is pointed at or holds focus, the same rule as a row's.
  */
-.lp-tick-card[data-v-c73bcf2c] {
+.lp-tick-card[data-v-f0750892] {
   max-width: none;
   padding-inline: 0;
   opacity: 1;
 }
-.lp-tick[data-cue][data-v-c73bcf2c] {
+.lp-tick[data-cue][data-v-f0750892] {
   opacity: 0;
 }
-.lp-item:hover .lp-tick[data-cue][data-v-c73bcf2c],
-.lp-tick[data-cue][data-v-c73bcf2c]:focus-within {
+.lp-item:hover .lp-tick[data-cue][data-v-f0750892],
+.lp-tick[data-cue][data-v-f0750892]:focus-within {
   opacity: 1;
 }
 @media (hover: none) {
-.lp-item:hover .lp-tick[data-cue][data-v-c73bcf2c] {
+.lp-item:hover .lp-tick[data-cue][data-v-f0750892] {
     opacity: 0;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-row-enter-active[data-v-c73bcf2c],
-  .lp-row-leave-active[data-v-c73bcf2c],
-  .lp-row-move[data-v-c73bcf2c],
-  .lp-tick[data-v-c73bcf2c] {
+.lp-row-enter-active[data-v-f0750892],
+  .lp-row-leave-active[data-v-f0750892],
+  .lp-row-move[data-v-f0750892],
+  .lp-tick[data-v-f0750892] {
     transition: none;
 }
 }

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

@@ -472,6 +472,13 @@ declare const __VLS_export: <T extends Record<string, unknown>>(__VLS_props: Non
             toggle: () => void;
             openMenu: (event: Event) => void;
         }) => any;
+    } & {
+        line?: (props: {
+            row: T;
+            selected: boolean;
+            toggle: () => void;
+            openMenu: (event: Event) => void;
+        }) => any;
     };
     emit: {
         (e: "update:selected", value: (string | number)[]): void;

package/dist/components/LpTable.vue.js

@@ -34,7 +34,7 @@ import { toCsv, downloadFile, fileStem } from "./exportData.js";
 import { toHiddenSets, sameHidden, summarizeShown, parseTableState, mergeRestored, serializeTableState, fromHiddenSets } from "./tableFilter.js";
 import { resolveRowMenu } from "./tableRowMenu.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpTable-BqZNpWgC.css';const _hoisted_1 = {
+import '../assets/LpTable-DAVNb-x2.css';const _hoisted_1 = {
   key: 0,
   class: "flex min-h-8 flex-wrap items-center gap-x-3 gap-y-2 pb-3 text-xs"
 };
@@ -1825,36 +1825,43 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               ])) : createCommentVNode("", true)
                             ])
                           ], true) : (openBlock(), createElementBlock("div", _hoisted_43, [
-                            titleColumn.value ? (openBlock(), createElementBlock("div", _hoisted_44, [
-                              renderSlot(_ctx.$slots, `cell-${titleColumn.value.key}`, {
-                                row: entry.row,
-                                value: entry.row[titleColumn.value.key],
-                                openMenu: openRowMenu
-                              }, () => [
-                                createTextVNode(toDisplayString(entry.row[titleColumn.value.key]), 1)
-                              ], true)
-                            ])) : createCommentVNode("", true),
-                            fieldColumns.value.length ? (openBlock(), createElementBlock("div", _hoisted_45, [
-                              (openBlock(true), createElementBlock(Fragment, null, renderList(fieldColumns.value, (col, ci) => {
-                                return openBlock(), createElementBlock(Fragment, {
-                                  key: col.key
-                                }, [
-                                  ci > 0 ? (openBlock(), createElementBlock("span", _hoisted_46, "·")) : createCommentVNode("", true),
-                                  createElementVNode("span", {
-                                    class: "min-w-0 truncate",
-                                    title: col.label
+                            renderSlot(_ctx.$slots, "line", {
+                              row: entry.row,
+                              selected: isSelected(keyFor(entry.row, entry.index)),
+                              toggle: () => toggleRow(keyFor(entry.row, entry.index), !isSelected(keyFor(entry.row, entry.index))),
+                              openMenu: openRowMenu
+                            }, () => [
+                              titleColumn.value ? (openBlock(), createElementBlock("div", _hoisted_44, [
+                                renderSlot(_ctx.$slots, `cell-${titleColumn.value.key}`, {
+                                  row: entry.row,
+                                  value: entry.row[titleColumn.value.key],
+                                  openMenu: openRowMenu
+                                }, () => [
+                                  createTextVNode(toDisplayString(entry.row[titleColumn.value.key]), 1)
+                                ], true)
+                              ])) : createCommentVNode("", true),
+                              fieldColumns.value.length ? (openBlock(), createElementBlock("div", _hoisted_45, [
+                                (openBlock(true), createElementBlock(Fragment, null, renderList(fieldColumns.value, (col, ci) => {
+                                  return openBlock(), createElementBlock(Fragment, {
+                                    key: col.key
                                   }, [
-                                    renderSlot(_ctx.$slots, `cell-${col.key}`, {
-                                      row: entry.row,
-                                      value: entry.row[col.key],
-                                      openMenu: openRowMenu
-                                    }, () => [
-                                      createTextVNode(toDisplayString(entry.row[col.key]), 1)
-                                    ], true)
-                                  ], 8, _hoisted_47)
-                                ], 64);
-                              }), 128))
-                            ])) : createCommentVNode("", true)
+                                    ci > 0 ? (openBlock(), createElementBlock("span", _hoisted_46, "·")) : createCommentVNode("", true),
+                                    createElementVNode("span", {
+                                      class: "min-w-0 truncate",
+                                      title: col.label
+                                    }, [
+                                      renderSlot(_ctx.$slots, `cell-${col.key}`, {
+                                        row: entry.row,
+                                        value: entry.row[col.key],
+                                        openMenu: openRowMenu
+                                      }, () => [
+                                        createTextVNode(toDisplayString(entry.row[col.key]), 1)
+                                      ], true)
+                                    ], 8, _hoisted_47)
+                                  ], 64);
+                                }), 128))
+                              ])) : createCommentVNode("", true)
+                            ], true)
                           ]))
                         ], 16, _hoisted_35))
                       ], 64);
@@ -1880,7 +1887,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c73bcf2c"]]);
+const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f0750892"]]);
 export {
   LpTable as default
 };

package/package.json

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

package/src/components/LpSection.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 /*
- * A section heading: a title, an optional line under it, and actions on the
- * right.
+ * A section heading with no default slot: a title, an optional line under
+ * it and actions on the right; the section's content goes after it, not
+ * inside.
  *
  *   <LpSection title="Recent invoices">
  *     <template #actions><LpButton size="sm">Export</LpButton></template>

package/src/components/LpTable.vue

@@ -2362,7 +2362,18 @@ usePaletteCommands(() => {
               </dl>
             </div>
           </slot>
+          <!-- `#line` is to a list line what `#card` is to a card: the inside
+               only. Without it the line is built from the columns: the first
+               names the row, the rest follow it in one muted line, which
+               reads well for words and badly for meters or several badges. -->
           <div v-else class="min-w-0 flex-1">
+            <slot
+              name="line"
+              :row="entry.row"
+              :selected="isSelected(keyFor(entry.row, entry.index))"
+              :toggle="() => toggleRow(keyFor(entry.row, entry.index), !isSelected(keyFor(entry.row, entry.index)))"
+              :open-menu="openRowMenu"
+            >
               <div v-if="titleColumn" class="min-w-0 truncate font-medium text-ink">
                 <slot :name="`cell-${titleColumn.key}`" :row="entry.row" :value="entry.row[titleColumn.key]" :open-menu="openRowMenu">{{ entry.row[titleColumn.key] }}</slot>
               </div>
@@ -2374,7 +2385,8 @@ usePaletteCommands(() => {
                   </span>
                 </template>
               </div>
-            </div>
+            </slot>
+          </div>
         </div>
       </template>
     </TransitionGroup>

package/src/iconSubset.d.mts

@@ -5,6 +5,8 @@ export interface IconCollection {
   width?: number
   height?: number
 }
+export function refsInText(text: string): [prefix: string, name: string][]
+export function refsInDirs(dirs: string[]): Map<string, Set<string>>
 export function namesInText(text: string): string[]
 export function namesInDirs(dirs: string[]): Set<string>
 export function subset(collection: IconCollection, names: Iterable<string>): IconCollection

package/src/iconSubset.mjs

@@ -1,19 +1,32 @@
 // Shared by the kit's own icon generator and the Nuxt module's app scan: find
-// "lucide:<name>" literals in source text and cut an iconify collection down to
-// just those icons (aliases keep their parent).
+// "<prefix>:<name>" literals in source text and cut an iconify collection down
+// to just those icons (aliases keep their parent). Any prefix is collected;
+// whoever reads the result decides which prefixes are icon sets (the module
+// keeps those the app has an @iconify-json package for), so "node:fs" in a
+// source file costs nothing.
 import { readdirSync, readFileSync, statSync } from "node:fs"
 import { join } from "node:path"
 
-const NAME = /lucide:([a-z0-9]+(?:-[a-z0-9]+)*)/g
+const PART = "[a-z0-9]+(?:-[a-z0-9]+)*"
+const REF = new RegExp(`(?<![a-z0-9-])(${PART}):(${PART})`, "g")
 const SOURCE = /\.(vue|ts|tsx|js|jsx|mjs|md|html)$/
 const SKIP = new Set(["node_modules", "dist", ".nuxt", ".output", ".git"])
 
+/** Every "<prefix>:<name>" literal, as [prefix, name] pairs. */
+export function refsInText(text) {
+  return [...text.matchAll(REF)].map((m) => [m[1], m[2]])
+}
+
+/** The lucide names in a text. */
 export function namesInText(text) {
-  return [...text.matchAll(NAME)].map((m) => m[1])
+  return refsInText(text)
+    .filter(([prefix]) => prefix === "lucide")
+    .map(([, name]) => name)
 }
 
-export function namesInDirs(dirs) {
-  const names = new Set()
+/** Every "<prefix>:<name>" literal under the dirs, as prefix -> names. */
+export function refsInDirs(dirs) {
+  const refs = new Map()
   const walk = (dir) => {
     let entries
     try {
@@ -25,11 +38,21 @@ export function namesInDirs(dirs) {
       if (SKIP.has(entry)) continue
       const path = join(dir, entry)
       if (statSync(path).isDirectory()) walk(path)
-      else if (SOURCE.test(entry)) for (const n of namesInText(readFileSync(path, "utf8"))) names.add(n)
+      else if (SOURCE.test(entry)) {
+        for (const [prefix, name] of refsInText(readFileSync(path, "utf8"))) {
+          if (!refs.has(prefix)) refs.set(prefix, new Set())
+          refs.get(prefix).add(name)
+        }
+      }
     }
   }
   for (const dir of dirs) walk(dir)
-  return names
+  return refs
+}
+
+/** The lucide names under the dirs. */
+export function namesInDirs(dirs) {
+  return refsInDirs(dirs).get("lucide") ?? new Set()
 }
 
 export function subset(collection, names) {

package/src/nuxt.ts

@@ -18,11 +18,16 @@
  *   link         false to skip providing NuxtLink as the kit's link component
  *   exclude      component names not to auto-register (e.g. ["LayoutCanvas"]
  *                when the app has its own component of that name)
- *   icons        which lucide icons render in the server pass and ship in the
- *                main bundle: "scan" (default) finds "lucide:*" literals in the
- *                app's source, "all" registers the whole set, "kit" only the
- *                kit's own, or a list of names. Anything else still renders,
- *                from a lazily loaded chunk of the bundled collection.
+ *   icons        which icons render in the server pass and ship in the main
+ *                bundle: "scan" (default) finds "lucide:*" literals in the
+ *                app's source, "all" registers the whole lucide set, "kit"
+ *                only the kit's own, or a list of names. Anything else in
+ *                lucide still renders, from a lazily loaded chunk of the
+ *                bundled collection. Other sets ("logos:google-icon") are
+ *                found the same way, by "scan" or in the list, for every
+ *                prefix the app has an @iconify-json/<prefix> package for:
+ *                registered offline from that package, never fetched from
+ *                the iconify API.
  *   propCheck    false to skip the dev warning for an unknown prop on a kit
  *                component (default: on in `nuxt dev`, never in a build)
  */
@@ -30,7 +35,7 @@ import { readFileSync } from "node:fs"
 import { createRequire } from "node:module"
 import { addComponent, addPlugin, addPluginTemplate, addTemplate, createResolver, defineNuxtModule } from "@nuxt/kit"
 import { COMPONENT_NAMES } from "./component-names"
-import { namesInDirs, subset } from "./iconSubset.mjs"
+import { type IconCollection, refsInDirs, subset } from "./iconSubset.mjs"
 
 export interface LeavepulseUiOptions {
   /** Register the SSR theme plugin. Disable to wire theming yourself. */
@@ -43,18 +48,52 @@ export interface LeavepulseUiOptions {
   link?: boolean
   /** Component names to leave unregistered. */
   exclude?: string[]
-  /** Lucide icons registered up front (default "scan"). */
+  /** Icons registered up front (default "scan"). */
   icons?: "scan" | "all" | "kit" | string[]
   /** Warn in `nuxt dev` about an unknown prop on a kit component (default true). */
   propCheck?: boolean
 }
 
-function iconsPlugin(mode: LeavepulseUiOptions["icons"], srcDir: string): string {
+/** The names asked for, as prefix -> names; a bare name is lucide. */
+function iconRefs(mode: LeavepulseUiOptions["icons"], srcDir: string): Map<string, Set<string>> {
+  if (!Array.isArray(mode)) return refsInDirs([srcDir])
+  const refs = new Map<string, Set<string>>()
+  for (const ref of mode) {
+    const [prefix, name] = ref.includes(":") ? ref.split(":", 2) : ["lucide", ref]
+    if (!refs.has(prefix!)) refs.set(prefix!, new Set())
+    refs.get(prefix!)!.add(name!)
+  }
+  return refs
+}
+
+/** An installed iconify set, read from the app's own dependencies; null if it has none. */
+function collectionOf(prefix: string, rootDir: string): IconCollection | null {
+  try {
+    const path = createRequire(`${rootDir}/package.json`).resolve(`@iconify-json/${prefix}/icons.json`)
+    return JSON.parse(readFileSync(path, "utf8")) as IconCollection
+  } catch {
+    return null
+  }
+}
+
+export function iconsPlugin(mode: LeavepulseUiOptions["icons"], srcDir: string, rootDir: string): string {
   if (mode === "kit") return ""
-  if (mode === "all") return 'import "@leavepulse/ui/icons-all"\n'
-  const lucide = JSON.parse(readFileSync(createRequire(import.meta.url).resolve("@iconify-json/lucide/icons.json"), "utf8"))
-  const names = Array.isArray(mode) ? mode.map((n) => n.replace(/^lucide:/, "")) : namesInDirs([srcDir])
-  return `import { registerIconCollection } from "@leavepulse/ui"\nregisterIconCollection(${JSON.stringify(subset(lucide, names))})\n`
+  const refs = iconRefs(mode, srcDir)
+  const sets: IconCollection[] = []
+  if (mode !== "all") {
+    const lucide = JSON.parse(readFileSync(createRequire(import.meta.url).resolve("@iconify-json/lucide/icons.json"), "utf8"))
+    sets.push(subset(lucide, refs.get("lucide") ?? []))
+  }
+  for (const [prefix, names] of refs) {
+    if (prefix === "lucide") continue
+    const collection = collectionOf(prefix, rootDir)
+    if (!collection) continue
+    const cut = subset(collection, names)
+    if (Object.keys(cut.icons).length) sets.push(cut)
+  }
+  const head = mode === "all" ? 'import "@leavepulse/ui/icons-all"\n' : ""
+  if (!sets.length) return head
+  return `${head}import { registerIconCollection } from "@leavepulse/ui"\n${sets.map((set) => `registerIconCollection(${JSON.stringify(set)})\n`).join("")}`
 }
 
 export default defineNuxtModule<LeavepulseUiOptions>({
@@ -74,7 +113,7 @@ export default defineNuxtModule<LeavepulseUiOptions>({
       })
     }
 
-    const icons = iconsPlugin(options.icons, nuxt.options.srcDir)
+    const icons = iconsPlugin(options.icons, nuxt.options.srcDir, nuxt.options.rootDir)
     if (icons) {
       addPluginTemplate({
         filename: "leavepulse-ui-icons.mjs",