@lobehub/ui 5.63.3 → 5.63.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -79,8 +79,8 @@ const FixedFrost = memo(({ rootRef }) => {
|
|
|
79
79
|
if (!frame) frame = requestAnimationFrame(update);
|
|
80
80
|
};
|
|
81
81
|
update();
|
|
82
|
-
const resize = new ResizeObserver(schedule);
|
|
83
|
-
resize
|
|
82
|
+
const resize = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(schedule);
|
|
83
|
+
resize?.observe(root);
|
|
84
84
|
const mutation = new MutationObserver((records) => {
|
|
85
85
|
if (records.every((r) => r.target.closest?.("[data-table-frost]"))) return;
|
|
86
86
|
schedule();
|
|
@@ -92,7 +92,7 @@ const FixedFrost = memo(({ rootRef }) => {
|
|
|
92
92
|
});
|
|
93
93
|
return () => {
|
|
94
94
|
if (frame) cancelAnimationFrame(frame);
|
|
95
|
-
resize
|
|
95
|
+
resize?.disconnect();
|
|
96
96
|
mutation.disconnect();
|
|
97
97
|
};
|
|
98
98
|
}, [rootRef]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FixedFrost.mjs","names":[],"sources":["../../../src/base-ui/Table/FixedFrost.tsx"],"sourcesContent":["'use client';\n\nimport { memo, type RefObject, useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { PREFIX_CLS, styles } from './style';\n\nconst p = `.${PREFIX_CLS}`;\n\ninterface Rail {\n end: number;\n /** Table hosts size the rail to the table; the virtual body fills its row layer. */\n fill: boolean;\n height: number;\n host: HTMLElement;\n start: number;\n width: number;\n}\n\nconst px = (value: string) => Number.parseFloat(value) || 0;\n\n/** Widths of the fixed-start / fixed-end blocks: max sticky offset + cell width over the rows. */\nconst measureSides = (rows: Element[]) => {\n let start = 0;\n let end = 0;\n for (const row of rows) {\n for (const cell of Array.from(row.children) as HTMLElement[]) {\n if (cell.classList.contains(`${PREFIX_CLS}-cell-fix-start`)) {\n start = Math.max(\n start,\n px(cell.style.insetInlineStart || cell.style.left) + cell.offsetWidth,\n );\n } else if (cell.classList.contains(`${PREFIX_CLS}-cell-fix-end`)) {\n end = Math.max(end, px(cell.style.insetInlineEnd || cell.style.right) + cell.offsetWidth);\n }\n }\n }\n return { end: Math.round(end), start: Math.round(start) };\n};\n\nconst collectRails = (table: HTMLElement): Rail[] => {\n const rails: Rail[] = [];\n const own = (el: Element) => el.closest(p) === table;\n const hosts = table.querySelectorAll<HTMLElement>(\n `${p}-content, ${p}-header, ${p}-body, ${p}-tbody-virtual-holder-inner`,\n );\n\n for (const host of Array.from(hosts)) {\n if (!own(host)) continue;\n // A sticky header is frosted as one element by CSS (it is a backdrop root anyway).\n if (host.closest(`${p}-sticky-holder`)) continue;\n\n if (host.classList.contains(`${PREFIX_CLS}-tbody-virtual-holder-inner`)) {\n const rows = Array.from(host.children).filter(\n (el) =>\n el.classList.contains(`${PREFIX_CLS}-row`) &&\n !el.classList.contains(`${PREFIX_CLS}-row-extra`),\n );\n const { start, end } = measureSides(rows.slice(0, 3));\n if (start || end) rails.push({ end, fill: true, height: 0, host, start, width: 0 });\n continue;\n }\n\n const tableEl = host.querySelector<HTMLTableElement>(':scope > table');\n if (!tableEl) continue;\n const rows = Array.from(tableEl.querySelectorAll(':scope > thead > tr, :scope > tbody > tr'))\n .filter((row) => !row.classList.contains(`${PREFIX_CLS}-measure-row`))\n .slice(0, 6);\n const { start, end } = measureSides(rows);\n if (!start && !end) continue;\n rails.push({\n end,\n fill: false,\n height: tableEl.offsetHeight,\n host,\n start,\n width: tableEl.offsetWidth,\n });\n }\n return rails;\n};\n\nconst sameRails = (a: Rail[], b: Rail[]) =>\n a.length === b.length &&\n a.every(\n (rail, i) =>\n rail.host === b[i].host &&\n rail.start === b[i].start &&\n rail.end === b[i].end &&\n rail.width === b[i].width &&\n rail.height === b[i].height,\n );\n\n/**\n * One frosted backdrop per fixed side instead of one per cell. A per-cell `backdrop-filter`\n * blurs each box on its own, so the column shows seams at every row. Here a rail is portaled\n * into each scroll host (the table's scroll container, a split header / body, or the virtual\n * row layer) and holds two sticky panes spanning the fixed-start / fixed-end width and the\n * full height. The rail sits at z-index 1: above the scrolling cells (z auto), below the\n * fixed cells (z >= 2), so their dividers and content stay sharp on top of the blur.\n */\nconst FixedFrost = memo<{ rootRef: RefObject<HTMLElement | null> }>(({ rootRef }) => {\n const [rails, setRails] = useState<Rail[]>([]);\n\n // Passive effect: the root ref belongs to an ancestor and is attached after this\n // child's layout effects, so a layout effect would see it as null on mount.\n useEffect(() => {\n const root = rootRef.current;\n if (!root) return;\n let frame = 0;\n\n const update = () => {\n frame = 0;\n const table = root.querySelector<HTMLElement>(`${p}`);\n const next = table ? collectRails(table) : [];\n for (const rail of next) {\n if (!rail.fill && getComputedStyle(rail.host).position === 'static') {\n rail.host.style.position = 'relative';\n }\n }\n setRails((prev) => (sameRails(prev, next) ? prev : next));\n };\n const schedule = () => {\n if (!frame) frame = requestAnimationFrame(update);\n };\n\n update();\n const resize = new ResizeObserver(schedule);\n resize
|
|
1
|
+
{"version":3,"file":"FixedFrost.mjs","names":[],"sources":["../../../src/base-ui/Table/FixedFrost.tsx"],"sourcesContent":["'use client';\n\nimport { memo, type RefObject, useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { PREFIX_CLS, styles } from './style';\n\nconst p = `.${PREFIX_CLS}`;\n\ninterface Rail {\n end: number;\n /** Table hosts size the rail to the table; the virtual body fills its row layer. */\n fill: boolean;\n height: number;\n host: HTMLElement;\n start: number;\n width: number;\n}\n\nconst px = (value: string) => Number.parseFloat(value) || 0;\n\n/** Widths of the fixed-start / fixed-end blocks: max sticky offset + cell width over the rows. */\nconst measureSides = (rows: Element[]) => {\n let start = 0;\n let end = 0;\n for (const row of rows) {\n for (const cell of Array.from(row.children) as HTMLElement[]) {\n if (cell.classList.contains(`${PREFIX_CLS}-cell-fix-start`)) {\n start = Math.max(\n start,\n px(cell.style.insetInlineStart || cell.style.left) + cell.offsetWidth,\n );\n } else if (cell.classList.contains(`${PREFIX_CLS}-cell-fix-end`)) {\n end = Math.max(end, px(cell.style.insetInlineEnd || cell.style.right) + cell.offsetWidth);\n }\n }\n }\n return { end: Math.round(end), start: Math.round(start) };\n};\n\nconst collectRails = (table: HTMLElement): Rail[] => {\n const rails: Rail[] = [];\n const own = (el: Element) => el.closest(p) === table;\n const hosts = table.querySelectorAll<HTMLElement>(\n `${p}-content, ${p}-header, ${p}-body, ${p}-tbody-virtual-holder-inner`,\n );\n\n for (const host of Array.from(hosts)) {\n if (!own(host)) continue;\n // A sticky header is frosted as one element by CSS (it is a backdrop root anyway).\n if (host.closest(`${p}-sticky-holder`)) continue;\n\n if (host.classList.contains(`${PREFIX_CLS}-tbody-virtual-holder-inner`)) {\n const rows = Array.from(host.children).filter(\n (el) =>\n el.classList.contains(`${PREFIX_CLS}-row`) &&\n !el.classList.contains(`${PREFIX_CLS}-row-extra`),\n );\n const { start, end } = measureSides(rows.slice(0, 3));\n if (start || end) rails.push({ end, fill: true, height: 0, host, start, width: 0 });\n continue;\n }\n\n const tableEl = host.querySelector<HTMLTableElement>(':scope > table');\n if (!tableEl) continue;\n const rows = Array.from(tableEl.querySelectorAll(':scope > thead > tr, :scope > tbody > tr'))\n .filter((row) => !row.classList.contains(`${PREFIX_CLS}-measure-row`))\n .slice(0, 6);\n const { start, end } = measureSides(rows);\n if (!start && !end) continue;\n rails.push({\n end,\n fill: false,\n height: tableEl.offsetHeight,\n host,\n start,\n width: tableEl.offsetWidth,\n });\n }\n return rails;\n};\n\nconst sameRails = (a: Rail[], b: Rail[]) =>\n a.length === b.length &&\n a.every(\n (rail, i) =>\n rail.host === b[i].host &&\n rail.start === b[i].start &&\n rail.end === b[i].end &&\n rail.width === b[i].width &&\n rail.height === b[i].height,\n );\n\n/**\n * One frosted backdrop per fixed side instead of one per cell. A per-cell `backdrop-filter`\n * blurs each box on its own, so the column shows seams at every row. Here a rail is portaled\n * into each scroll host (the table's scroll container, a split header / body, or the virtual\n * row layer) and holds two sticky panes spanning the fixed-start / fixed-end width and the\n * full height. The rail sits at z-index 1: above the scrolling cells (z auto), below the\n * fixed cells (z >= 2), so their dividers and content stay sharp on top of the blur.\n */\nconst FixedFrost = memo<{ rootRef: RefObject<HTMLElement | null> }>(({ rootRef }) => {\n const [rails, setRails] = useState<Rail[]>([]);\n\n // Passive effect: the root ref belongs to an ancestor and is attached after this\n // child's layout effects, so a layout effect would see it as null on mount.\n useEffect(() => {\n const root = rootRef.current;\n if (!root) return;\n let frame = 0;\n\n const update = () => {\n frame = 0;\n const table = root.querySelector<HTMLElement>(`${p}`);\n const next = table ? collectRails(table) : [];\n for (const rail of next) {\n if (!rail.fill && getComputedStyle(rail.host).position === 'static') {\n rail.host.style.position = 'relative';\n }\n }\n setRails((prev) => (sameRails(prev, next) ? prev : next));\n };\n const schedule = () => {\n if (!frame) frame = requestAnimationFrame(update);\n };\n\n update();\n // Environments without ResizeObserver (e.g. jsdom in consumer tests) still get\n // the initial measurement and DOM-mutation updates.\n const resize = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(schedule);\n resize?.observe(root);\n const mutation = new MutationObserver((records) => {\n // Ignore our own rail nodes.\n if (records.every((r) => (r.target as Element).closest?.('[data-table-frost]'))) return;\n schedule();\n });\n mutation.observe(root, { attributeFilter: ['class', 'style'], childList: true, subtree: true });\n\n return () => {\n if (frame) cancelAnimationFrame(frame);\n resize?.disconnect();\n mutation.disconnect();\n };\n }, [rootRef]);\n\n return (\n <>\n {rails.map((rail, i) =>\n createPortal(\n <div\n aria-hidden\n className={styles.frostRail}\n data-table-frost=\"\"\n style={rail.fill ? { inset: 0 } : { height: rail.height, width: rail.width }}\n >\n {rail.start > 0 && <div className={styles.frostStart} style={{ width: rail.start }} />}\n {rail.end > 0 && <div className={styles.frostEnd} style={{ width: rail.end }} />}\n </div>,\n rail.host,\n `frost-${i}`,\n ),\n )}\n </>\n );\n});\n\nFixedFrost.displayName = 'TableFixedFrost';\n\nexport default FixedFrost;\n"],"mappings":"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"}
|
|
@@ -42,7 +42,7 @@ declare const variants: (props?: ({
|
|
|
42
42
|
mark?: boolean | null | undefined;
|
|
43
43
|
shiny?: boolean | null | undefined;
|
|
44
44
|
strong?: boolean | null | undefined;
|
|
45
|
-
type?: "danger" | "
|
|
45
|
+
type?: "danger" | "success" | "info" | "warning" | "secondary" | null | undefined;
|
|
46
46
|
underline?: boolean | null | undefined;
|
|
47
47
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
48
48
|
//#endregion
|