@lobehub/ui 5.63.2 → 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.
- package/es/base-ui/Input/style.d.mts +1 -1
- package/es/base-ui/Table/FixedFrost.mjs +3 -3
- package/es/base-ui/Table/FixedFrost.mjs.map +1 -1
- package/es/base-ui/Text/style.d.mts +1 -1
- package/es/dashboard/AuthLayout/AuthLayout.mjs +4 -5
- package/es/dashboard/AuthLayout/AuthLayout.mjs.map +1 -1
- package/es/dashboard/AuthLayout/style.mjs +20 -13
- package/es/dashboard/AuthLayout/style.mjs.map +1 -1
- package/es/dashboard/FilterSidebar/FilterSidebar.mjs +1 -1
- package/es/dashboard/index.mjs +2 -2
- package/package.json +1 -1
|
@@ -30,7 +30,7 @@ declare const styles: {
|
|
|
30
30
|
};
|
|
31
31
|
declare const rootVariants: (props?: ({
|
|
32
32
|
shadow?: boolean | null | undefined;
|
|
33
|
-
size?: "
|
|
33
|
+
size?: "large" | "middle" | "small" | null | undefined;
|
|
34
34
|
variant?: "filled" | "outlined" | "borderless" | null | undefined;
|
|
35
35
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
36
36
|
//#endregion
|
|
@@ -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
|
|
@@ -4,10 +4,9 @@ import Skeleton from "../../base-ui/Skeleton/index.mjs";
|
|
|
4
4
|
import Text from "../../base-ui/Text/Text.mjs";
|
|
5
5
|
import { styles } from "./style.mjs";
|
|
6
6
|
import AuthLayoutAside from "./Aside.mjs";
|
|
7
|
-
import { useSurfaceCardClassName } from "../Surface/link.mjs";
|
|
8
7
|
import { isValidElement } from "react";
|
|
9
8
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
|
-
import { cx } from "antd-style";
|
|
9
|
+
import { cx, useThemeMode } from "antd-style";
|
|
11
10
|
//#region src/dashboard/AuthLayout/AuthLayout.tsx
|
|
12
11
|
const FormSkeleton = () => /* @__PURE__ */ jsxs(FlexBasic_default, {
|
|
13
12
|
"aria-hidden": true,
|
|
@@ -31,7 +30,7 @@ const FormSkeleton = () => /* @__PURE__ */ jsxs(FlexBasic_default, {
|
|
|
31
30
|
]
|
|
32
31
|
});
|
|
33
32
|
function AuthLayout({ alert, aside, background = "plain", brand, card = true, children, className, description, footer, loading, logo, title, tools, variant = "default", ...rest }) {
|
|
34
|
-
const
|
|
33
|
+
const { isDarkMode } = useThemeMode();
|
|
35
34
|
const split = Boolean(aside);
|
|
36
35
|
const art = isValidElement(background) ? background : null;
|
|
37
36
|
const heading = title === void 0 || title === null ? null : typeof title === "string" ? /* @__PURE__ */ jsx(Text, {
|
|
@@ -59,8 +58,8 @@ function AuthLayout({ alert, aside, background = "plain", brand, card = true, ch
|
|
|
59
58
|
]
|
|
60
59
|
}) : null;
|
|
61
60
|
return /* @__PURE__ */ jsxs("div", {
|
|
62
|
-
className: cx(styles.page, background === "grid" && styles.grid, className),
|
|
63
61
|
"data-auth-layout": "",
|
|
62
|
+
className: cx(styles.page, background === "grid" && styles.grid, background === "grid" && isDarkMode && styles.gridDark, className),
|
|
64
63
|
...rest,
|
|
65
64
|
children: [
|
|
66
65
|
art ? /* @__PURE__ */ jsx("div", {
|
|
@@ -78,7 +77,7 @@ function AuthLayout({ alert, aside, background = "plain", brand, card = true, ch
|
|
|
78
77
|
className: styles.main,
|
|
79
78
|
children: card ? /* @__PURE__ */ jsx("div", {
|
|
80
79
|
"data-auth-card": "",
|
|
81
|
-
className: cx(styles.lift, split && styles.liftSplit,
|
|
80
|
+
className: cx(styles.lift, split && styles.liftSplit, variant === "elevated" && styles.elevated),
|
|
82
81
|
children: /* @__PURE__ */ jsxs("div", {
|
|
83
82
|
className: cx(styles.frame, split && styles.split),
|
|
84
83
|
children: [/* @__PURE__ */ jsxs("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AuthLayout.mjs","names":["Flexbox","Aside"],"sources":["../../../src/dashboard/AuthLayout/AuthLayout.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { isValidElement } from 'react';\n\nimport Skeleton from '@/base-ui/Skeleton';\nimport Text from '@/base-ui/Text';\nimport { Flexbox } from '@/Flex';\n\nimport
|
|
1
|
+
{"version":3,"file":"AuthLayout.mjs","names":["Flexbox","Aside"],"sources":["../../../src/dashboard/AuthLayout/AuthLayout.tsx"],"sourcesContent":["'use client';\n\nimport { cx, useThemeMode } from 'antd-style';\nimport { isValidElement } from 'react';\n\nimport Skeleton from '@/base-ui/Skeleton';\nimport Text from '@/base-ui/Text';\nimport { Flexbox } from '@/Flex';\n\nimport Aside from './Aside';\nimport { styles } from './style';\nimport type { AuthLayoutProps } from './type';\n\nconst FormSkeleton = () => (\n <Flexbox aria-hidden gap={12}>\n <Skeleton height={36} radius={8} width=\"100%\" />\n <Skeleton height={36} radius={8} width=\"100%\" />\n <Skeleton height={36} radius={8} width=\"100%\" />\n </Flexbox>\n);\n\nfunction AuthLayout({\n alert,\n aside,\n background = 'plain',\n brand,\n card = true,\n children,\n className,\n description,\n footer,\n loading,\n logo,\n title,\n tools,\n variant = 'default',\n ...rest\n}: AuthLayoutProps) {\n const { isDarkMode } = useThemeMode();\n const split = Boolean(aside);\n const art = isValidElement(background) ? background : null;\n const heading =\n title === undefined || title === null ? null : typeof title === 'string' ? (\n <Text as=\"h1\" className={styles.title} weight=\"bold\">\n {title}\n </Text>\n ) : (\n <div className={styles.titleNode}>{title}</div>\n );\n const intro =\n logo || heading || description ? (\n <Flexbox gap={8}>\n {logo ? <div className={styles.logo}>{logo}</div> : null}\n {heading}\n {description ? (\n <Text className={styles.description} type=\"secondary\">\n {description}\n </Text>\n ) : null}\n </Flexbox>\n ) : null;\n\n return (\n <div\n data-auth-layout=\"\"\n className={cx(\n styles.page,\n background === 'grid' && styles.grid,\n background === 'grid' && isDarkMode && styles.gridDark,\n className,\n )}\n {...rest}\n >\n {art ? <div className={styles.backdrop}>{art}</div> : null}\n <header className={styles.header}>\n {brand}\n {tools ? <div className={styles.tools}>{tools}</div> : null}\n </header>\n <main className={styles.main}>\n {card ? (\n <div\n data-auth-card=\"\"\n className={cx(\n styles.lift,\n split && styles.liftSplit,\n variant === 'elevated' && styles.elevated,\n )}\n >\n <div className={cx(styles.frame, split && styles.split)}>\n <div className={cx(styles.form, split && styles.formSplit)}>\n {intro}\n {alert}\n {loading ? <FormSkeleton /> : children}\n {footer ? <div className={styles.footer}>{footer}</div> : null}\n </div>\n {aside ? <div className={styles.aside}>{aside}</div> : null}\n </div>\n </div>\n ) : (\n children\n )}\n </main>\n </div>\n );\n}\n\nAuthLayout.displayName = 'AuthLayout';\nAuthLayout.Aside = Aside;\n\nexport default AuthLayout;\n"],"mappings":";;;;;;;;;;AAaA,MAAM,qBACJ,qBAACA,mBAAD;CAAS,eAAA;CAAY,KAAK;CAA1B,UAAA;EACE,oBAAC,UAAD;GAAU,QAAQ;GAAI,QAAQ;GAAG,OAAM;EAAQ,CAAA;EAC/C,oBAAC,UAAD;GAAU,QAAQ;GAAI,QAAQ;GAAG,OAAM;EAAQ,CAAA;EAC/C,oBAAC,UAAD;GAAU,QAAQ;GAAI,QAAQ;GAAG,OAAM;EAAQ,CAAA;CACxC;;AAGX,SAAS,WAAW,EAClB,OACA,OACA,aAAa,SACb,OACA,OAAO,MACP,UACA,WACA,aACA,QACA,SACA,MACA,OACA,OACA,UAAU,WACV,GAAG,QACe;CAClB,MAAM,EAAE,eAAe,aAAa;CACpC,MAAM,QAAQ,QAAQ,KAAK;CAC3B,MAAM,MAAM,eAAe,UAAU,IAAI,aAAa;CACtD,MAAM,UACJ,UAAU,KAAA,KAAa,UAAU,OAAO,OAAO,OAAO,UAAU,WAC9D,oBAAC,MAAD;EAAM,IAAG;EAAK,WAAW,OAAO;EAAO,QAAO;EAC3C,UAAA;CACG,CAAA,IAEN,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAY,UAAA;CAAW,CAAA;CAElD,MAAM,QACJ,QAAQ,WAAW,cACjB,qBAACA,mBAAD;EAAS,KAAK;EAAd,UAAA;GACG,OAAO,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAO,UAAA;GAAU,CAAA,IAAI;GACnD;GACA,cACC,oBAAC,MAAD;IAAM,WAAW,OAAO;IAAa,MAAK;IACvC,UAAA;GACG,CAAA,IACJ;EACG;CACP,CAAA,IAAA;CAEN,OACE,qBAAC,OAAD;EACE,oBAAiB;EACjB,WAAW,GACT,OAAO,MACP,eAAe,UAAU,OAAO,MAChC,eAAe,UAAU,cAAc,OAAO,UAC9C,SACF;EACA,GAAI;EARN,UAAA;GAUG,MAAM,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAW,UAAA;GAAS,CAAA,IAAI;GACtD,qBAAC,UAAD;IAAQ,WAAW,OAAO;IAA1B,UAAA,CACG,OACA,QAAQ,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAQ,UAAA;IAAW,CAAA,IAAI,IACjD;;GACR,oBAAC,QAAD;IAAM,WAAW,OAAO;IACrB,UAAA,OACC,oBAAC,OAAD;KACE,kBAAe;KACf,WAAW,GACT,OAAO,MACP,SAAS,OAAO,WAChB,YAAY,cAAc,OAAO,QACnC;KAEA,UAAA,qBAAC,OAAD;MAAK,WAAW,GAAG,OAAO,OAAO,SAAS,OAAO,KAAK;MAAtD,UAAA,CACE,qBAAC,OAAD;OAAK,WAAW,GAAG,OAAO,MAAM,SAAS,OAAO,SAAS;OAAzD,UAAA;QACG;QACA;QACA,UAAU,oBAAC,cAAD,CAAe,CAAA,IAAI;QAC7B,SAAS,oBAAC,OAAD;SAAK,WAAW,OAAO;SAAS,UAAA;QAAY,CAAA,IAAI;OACvD;MACJ,CAAA,GAAA,QAAQ,oBAAC,OAAD;OAAK,WAAW,OAAO;OAAQ,UAAA;MAAW,CAAA,IAAI,IACpD;;IACF,CAAA,IAEL;GAEE,CAAA;EACH;;AAET;AAEA,WAAW,cAAc;AACzB,WAAW,QAAQC"}
|
|
@@ -60,7 +60,7 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
|
|
|
60
60
|
asidePlate: css`
|
|
61
61
|
position: absolute;
|
|
62
62
|
inset: 0;
|
|
63
|
-
background:
|
|
63
|
+
background: ${cssVar.colorBgContainer};
|
|
64
64
|
`,
|
|
65
65
|
asideScrim: css`
|
|
66
66
|
pointer-events: none;
|
|
@@ -85,8 +85,7 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
|
|
|
85
85
|
color: ${cssVar.colorTextSecondary};
|
|
86
86
|
`,
|
|
87
87
|
elevated: css`
|
|
88
|
-
|
|
89
|
-
&&&:hover {
|
|
88
|
+
&& {
|
|
90
89
|
border-radius: 28px;
|
|
91
90
|
}
|
|
92
91
|
`,
|
|
@@ -139,21 +138,20 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
|
|
|
139
138
|
border-radius: inherit;
|
|
140
139
|
`,
|
|
141
140
|
grid: css`
|
|
141
|
+
/* Light: colorText 5%. Dark overrides it in gridDark (colorBgLayout base is darker). */
|
|
142
|
+
--lobe-auth-grid-line: color-mix(in srgb, ${cssVar.colorText} 5%, transparent);
|
|
143
|
+
|
|
142
144
|
&& {
|
|
143
|
-
background-color:
|
|
145
|
+
background-color: ${cssVar.colorBgLayout};
|
|
144
146
|
background-image:
|
|
145
|
-
linear-gradient(
|
|
146
|
-
|
|
147
|
-
transparent 1px
|
|
148
|
-
),
|
|
149
|
-
linear-gradient(
|
|
150
|
-
90deg,
|
|
151
|
-
color-mix(in srgb, ${cssVar.colorText} 5%, transparent) 1px,
|
|
152
|
-
transparent 1px
|
|
153
|
-
);
|
|
147
|
+
linear-gradient(var(--lobe-auth-grid-line) 1px, transparent 1px),
|
|
148
|
+
linear-gradient(90deg, var(--lobe-auth-grid-line) 1px, transparent 1px);
|
|
154
149
|
background-position: -1px -1px;
|
|
155
150
|
background-size: 32px 32px;
|
|
156
151
|
}
|
|
152
|
+
`,
|
|
153
|
+
gridDark: css`
|
|
154
|
+
--lobe-auth-grid-line: ${cssVar.colorBorderSecondary};
|
|
157
155
|
`,
|
|
158
156
|
header: css`
|
|
159
157
|
position: relative;
|
|
@@ -170,8 +168,17 @@ const styles = createStaticStyles(({ css, cssVar, responsive }) => ({
|
|
|
170
168
|
`,
|
|
171
169
|
lift: css`
|
|
172
170
|
position: relative;
|
|
171
|
+
|
|
173
172
|
display: flex;
|
|
173
|
+
|
|
174
174
|
inline-size: min(440px, 100%);
|
|
175
|
+
|
|
176
|
+
/* Plain panel (no Surface): same radius / shadow the dashboard card had, own colors. */
|
|
177
|
+
border: 1px solid ${cssVar.colorBorder};
|
|
178
|
+
border-radius: ${cssVar.borderRadiusLG};
|
|
179
|
+
|
|
180
|
+
background: ${cssVar.colorBgContainer};
|
|
181
|
+
box-shadow: rgb(0 0 0 / 4%) 0 1px 2px 0;
|
|
175
182
|
`,
|
|
176
183
|
liftSplit: css`
|
|
177
184
|
inline-size: min(880px, 100%);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/AuthLayout/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n aside: css`\n position: relative;\n\n flex: none;\n\n box-sizing: border-box;\n inline-size: 50%;\n min-inline-size: 0;\n max-inline-size: 50%;\n\n background: ${cssVar.colorFillSecondary};\n\n ${responsive.laptop} {\n display: none;\n }\n `,\n asideCopy: css`\n pointer-events: none;\n\n position: absolute;\n z-index: 2;\n inset-block-end: 64px;\n inset-inline: 40px;\n\n display: flex;\n flex-direction: column;\n gap: 8px;\n `,\n asideKicker: css`\n margin: 0;\n\n font-size: ${cssVar.fontSize};\n line-height: 1.4;\n color: #fff;\n\n opacity: 0.82;\n `,\n asideLine: css`\n margin: 0;\n\n font-size: ${cssVar.fontSizeHeading2};\n font-weight: 600;\n line-height: 1.25;\n color: #fff;\n letter-spacing: -0.02em;\n `,\n asidePanel: css`\n position: absolute;\n inset: 8px;\n\n overflow: hidden;\n\n border-radius: 20px;\n\n background: linear-gradient(165deg, #ff9ffc 0%, #5227ff 46%, #b497cf 100%);\n `,\n asidePlate: css`\n position: absolute;\n inset: 0;\n background:
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/dashboard/AuthLayout/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar, responsive }) => ({\n aside: css`\n position: relative;\n\n flex: none;\n\n box-sizing: border-box;\n inline-size: 50%;\n min-inline-size: 0;\n max-inline-size: 50%;\n\n background: ${cssVar.colorFillSecondary};\n\n ${responsive.laptop} {\n display: none;\n }\n `,\n asideCopy: css`\n pointer-events: none;\n\n position: absolute;\n z-index: 2;\n inset-block-end: 64px;\n inset-inline: 40px;\n\n display: flex;\n flex-direction: column;\n gap: 8px;\n `,\n asideKicker: css`\n margin: 0;\n\n font-size: ${cssVar.fontSize};\n line-height: 1.4;\n color: #fff;\n\n opacity: 0.82;\n `,\n asideLine: css`\n margin: 0;\n\n font-size: ${cssVar.fontSizeHeading2};\n font-weight: 600;\n line-height: 1.25;\n color: #fff;\n letter-spacing: -0.02em;\n `,\n asidePanel: css`\n position: absolute;\n inset: 8px;\n\n overflow: hidden;\n\n border-radius: 20px;\n\n background: linear-gradient(165deg, #ff9ffc 0%, #5227ff 46%, #b497cf 100%);\n `,\n asidePlate: css`\n position: absolute;\n inset: 0;\n background: ${cssVar.colorBgContainer};\n `,\n asideScrim: css`\n pointer-events: none;\n\n position: absolute;\n z-index: 1;\n inset-block-end: 0;\n inset-inline: 0;\n\n block-size: 58%;\n\n background: linear-gradient(to top, rgb(24 10 48 / 42%), transparent);\n `,\n backdrop: css`\n pointer-events: none;\n position: absolute;\n z-index: 0;\n inset: 0;\n `,\n description: css`\n line-height: 1.6;\n color: ${cssVar.colorTextSecondary};\n `,\n elevated: css`\n && {\n border-radius: 28px;\n }\n `,\n footer: css`\n margin: 0;\n font-size: ${cssVar.fontSizeSM};\n line-height: 1.6;\n color: ${cssVar.colorTextSecondary};\n\n a {\n font-weight: 600;\n color: ${cssVar.colorLink};\n text-decoration: none;\n }\n `,\n form: css`\n display: flex;\n flex: none;\n flex-direction: column;\n gap: 24px;\n justify-content: center;\n\n box-sizing: border-box;\n inline-size: 100%;\n min-inline-size: 0;\n padding-block: 40px;\n padding-inline: 36px;\n\n ${responsive.laptop} {\n padding-block: 28px;\n padding-inline: 24px;\n }\n `,\n formSplit: css`\n inline-size: 50%;\n max-inline-size: 50%;\n\n ${responsive.laptop} {\n inline-size: 100%;\n max-inline-size: 100%;\n }\n `,\n frame: css`\n overflow: hidden;\n display: flex;\n flex: none;\n\n inline-size: 100%;\n min-inline-size: 0;\n border-radius: inherit;\n `,\n grid: css`\n /* Light: colorText 5%. Dark overrides it in gridDark (colorBgLayout base is darker). */\n --lobe-auth-grid-line: color-mix(in srgb, ${cssVar.colorText} 5%, transparent);\n\n && {\n background-color: ${cssVar.colorBgLayout};\n background-image:\n linear-gradient(var(--lobe-auth-grid-line) 1px, transparent 1px),\n linear-gradient(90deg, var(--lobe-auth-grid-line) 1px, transparent 1px);\n background-position: -1px -1px;\n background-size: 32px 32px;\n }\n `,\n gridDark: css`\n --lobe-auth-grid-line: ${cssVar.colorBorderSecondary};\n `,\n header: css`\n position: relative;\n z-index: 1;\n\n display: flex;\n flex: none;\n gap: 12px;\n align-items: center;\n justify-content: space-between;\n\n block-size: 56px;\n padding-inline: 16px;\n `,\n lift: css`\n position: relative;\n\n display: flex;\n\n inline-size: min(440px, 100%);\n\n /* Plain panel (no Surface): same radius / shadow the dashboard card had, own colors. */\n border: 1px solid ${cssVar.colorBorder};\n border-radius: ${cssVar.borderRadiusLG};\n\n background: ${cssVar.colorBgContainer};\n box-shadow: rgb(0 0 0 / 4%) 0 1px 2px 0;\n `,\n liftSplit: css`\n inline-size: min(880px, 100%);\n\n ${responsive.laptop} {\n inline-size: min(440px, 100%);\n }\n `,\n logo: css`\n display: flex;\n margin-block-end: 8px;\n `,\n main: css`\n position: relative;\n z-index: 1;\n\n display: grid;\n flex: 1;\n place-items: center;\n\n padding-block: 24px 48px;\n padding-inline: 16px;\n `,\n page: css`\n position: relative;\n\n overflow: auto;\n display: flex;\n flex: 1;\n flex-direction: column;\n\n box-sizing: border-box;\n inline-size: 100%;\n block-size: 100%;\n min-block-size: 100dvh;\n\n background: ${cssVar.colorBgLayout};\n `,\n split: css`\n min-block-size: 520px;\n\n ${responsive.laptop} {\n min-block-size: 0;\n }\n `,\n title: css`\n margin: 0;\n font-size: ${cssVar.fontSizeHeading3};\n line-height: ${cssVar.lineHeightHeading3};\n `,\n titleNode: css`\n display: flex;\n min-inline-size: 0;\n `,\n tools: css`\n display: flex;\n gap: 6px;\n align-items: center;\n margin-inline-start: auto;\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,QAAQ,kBAAkB;CACzE,OAAO,GAAG;;;;;;;;;;kBAUM,OAAO,mBAAmB;;MAEtC,WAAW,OAAO;;;;CAItB,WAAW,GAAG;;;;;;;;;;;;CAYd,aAAa,GAAG;;;iBAGD,OAAO,SAAS;;;;;;CAM/B,WAAW,GAAG;;;iBAGC,OAAO,iBAAiB;;;;;;CAMvC,YAAY,GAAG;;;;;;;;;;CAUf,YAAY,GAAG;;;kBAGC,OAAO,iBAAiB;;CAExC,YAAY,GAAG;;;;;;;;;;;;CAYf,UAAU,GAAG;;;;;;CAMb,aAAa,GAAG;;aAEL,OAAO,mBAAmB;;CAErC,UAAU,GAAG;;;;;CAKb,QAAQ,GAAG;;iBAEI,OAAO,WAAW;;aAEtB,OAAO,mBAAmB;;;;eAIxB,OAAO,UAAU;;;;CAI9B,MAAM,GAAG;;;;;;;;;;;;;MAaL,WAAW,OAAO;;;;;CAKtB,WAAW,GAAG;;;;MAIV,WAAW,OAAO;;;;;CAKtB,OAAO,GAAG;;;;;;;;;CASV,MAAM,GAAG;;gDAEqC,OAAO,UAAU;;;0BAGvC,OAAO,cAAc;;;;;;;;CAQ7C,UAAU,GAAG;6BACc,OAAO,qBAAqB;;CAEvD,QAAQ,GAAG;;;;;;;;;;;;;CAaX,MAAM,GAAG;;;;;;;;wBAQa,OAAO,YAAY;qBACtB,OAAO,eAAe;;kBAEzB,OAAO,iBAAiB;;;CAGxC,WAAW,GAAG;;;MAGV,WAAW,OAAO;;;;CAItB,MAAM,GAAG;;;;CAIT,MAAM,GAAG;;;;;;;;;;;CAWT,MAAM,GAAG;;;;;;;;;;;;;kBAaO,OAAO,cAAc;;CAErC,OAAO,GAAG;;;MAGN,WAAW,OAAO;;;;CAItB,OAAO,GAAG;;iBAEK,OAAO,iBAAiB;mBACtB,OAAO,mBAAmB;;CAE3C,WAAW,GAAG;;;;CAId,OAAO,GAAG;;;;;;AAMZ,EAAE"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import Button from "../../base-ui/Button/Button.mjs";
|
|
3
3
|
import Drawer from "../../base-ui/Drawer/Drawer.mjs";
|
|
4
4
|
import DraggablePanel from "../../base-ui/DraggablePanel/DraggablePanel.mjs";
|
|
5
|
-
import { useSurfaceCardClassName } from "../Surface/link.mjs";
|
|
6
5
|
import { useIsCompact, useLocalStorage } from "../hooks.mjs";
|
|
6
|
+
import { useSurfaceCardClassName } from "../Surface/link.mjs";
|
|
7
7
|
import { FilterSplitProvider } from "./context.mjs";
|
|
8
8
|
import { styles } from "./style.mjs";
|
|
9
9
|
import { clampSidebarWidth, sidebarWidth } from "./width.mjs";
|
package/es/dashboard/index.mjs
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import AuthLayoutAside from "./AuthLayout/Aside.mjs";
|
|
2
|
-
import { styles } from "./Surface/style.mjs";
|
|
3
|
-
import { SurfaceLinkProvider, useSurfaceCardClassName, useSurfaceDepth, useSurfaceLink } from "./Surface/link.mjs";
|
|
4
2
|
import AuthLayout from "./AuthLayout/AuthLayout.mjs";
|
|
5
3
|
import AuthLocaleSwitch from "./AuthTools/AuthLocaleSwitch.mjs";
|
|
6
4
|
import AuthThemeSwitch from "./AuthTools/AuthThemeSwitch.mjs";
|
|
@@ -11,6 +9,8 @@ import { useConsoleShell } from "./ConsoleShell/context.mjs";
|
|
|
11
9
|
import ConsoleNav from "./ConsoleNav/ConsoleNav.mjs";
|
|
12
10
|
import ConsoleNavSkeleton, { ConsoleFooterSkeleton } from "./ConsoleNav/Skeleton.mjs";
|
|
13
11
|
import ConsoleBrand from "./ConsoleShell/ConsoleBrand.mjs";
|
|
12
|
+
import { styles } from "./Surface/style.mjs";
|
|
13
|
+
import { SurfaceLinkProvider, useSurfaceCardClassName, useSurfaceDepth, useSurfaceLink } from "./Surface/link.mjs";
|
|
14
14
|
import PageLoading, { LoadingAnnouncer, PageHeaderSkeleton, StatCardSkeleton, TableSkeleton } from "./PageSkeleton/PageSkeleton.mjs";
|
|
15
15
|
import ConsoleShell from "./ConsoleShell/ConsoleShell.mjs";
|
|
16
16
|
import { useInFilterSplit } from "./FilterSidebar/context.mjs";
|