@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.2.0

package/dist/layout/PageScrollbar.js

@@ -0,0 +1,49 @@
+import { OverlayScrollbar } from "./ScrollArea.js";
+import { createVNode, onBeforeUnmount, onMounted, shallowRef } from "vue";
+import { _component, readonlyProp } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/layout/PageScrollbar.tsx
+/** PageScrollbar 的属性 */
+/** PageScrollbar 的样式：document（写在页面根元素上，隐藏原生滚动条） */
+var pageScrollbarStyles = css.create({ document: {
+	scrollbarWidth: "none",
+	"::-webkit-scrollbar": { display: "none" }
+} });
+/** 整页的浮层滚动条：挂载期间隐藏页面的原生滚动条 */
+var PageScrollbar = /*#__PURE__*/ _component((_props, _ctx) => {
+	const type = readonlyProp(_props, "type", "scroll");
+	const hideDelay = readonlyProp(_props, "hideDelay", 800);
+	const propsScrollbar = readonlyProp(_props, "propsScrollbar");
+	const propsThumb = readonlyProp(_props, "propsThumb");
+	let viewport = shallowRef(null);
+	let content = shallowRef(null);
+	const classes = (css.attrs(pageScrollbarStyles.document).class ?? "").split(" ").filter(Boolean);
+	onMounted(() => {
+		viewport.value = document.scrollingElement;
+		content.value = document.body;
+		document.documentElement.classList.add(...classes);
+	});
+	onBeforeUnmount(() => document.documentElement.classList.remove(...classes));
+	return () => createVNode(OverlayScrollbar, {
+		"axis": "y",
+		"viewport": viewport.value,
+		"content": content.value,
+		"type": type.value,
+		"hideDelay": hideDelay.value,
+		"fixed": true,
+		"propsScrollbar": propsScrollbar.value,
+		"propsThumb": propsThumb.value
+	}, null);
+}, {
+	name: "PageScrollbar",
+	props: [
+		"type",
+		"hideDelay",
+		"propsScrollbar",
+		"propsThumb"
+	]
+});
+//#endregion
+export { PageScrollbar, pageScrollbarStyles };
+
+//# sourceMappingURL=PageScrollbar.js.map

package/dist/layout/PageScrollbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageScrollbar.js","names":["_vtp_readonlyProp","_vue_shallowRef","_createVNode"],"sources":["../../src/layout/PageScrollbar.tsx"],"sourcesContent":["/**\n * 整页的浮层滚动条：页面照常由窗口滚动（前进后退恢复位置、手机上收起地址栏、粘性定位、锚点跳转都不变），\n * 只隐藏页面的原生滚动条，换成固定在视口一侧、半透明的 OverlayScrollbar：滚动时出现，停下后淡出，不占宽度。\n * 指针移到窗口边缘时显示，可以拖动、点击轨道翻页。AppShell 默认带着它。\n *\n *   <PageScrollbar />            放在应用里任意位置，挂载期间生效\n *\n * 模态框打开时页面滚动被锁住（overflow: hidden），滚动条随之隐藏。从右到左排版时在左侧（插入边的逻辑属性）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onBeforeUnmount, onMounted } from 'vue';\nimport type { PartProps } from '../utils/props';\nimport { OverlayScrollbar, type ScrollbarTypes } from './ScrollArea';\n\n/** PageScrollbar 的属性 */\nexport interface PageScrollbarProps {\n  /** 什么时候显示，默认 scroll（滚动时；指针移到窗口边缘时也会显示） */\n  type?: keyof ScrollbarTypes;\n  /** 停止滚动后多久淡出（毫秒），默认 800 */\n  hideDelay?: number;\n  /** 轨道的部件属性 */\n  propsScrollbar?: PartProps<'div', 'aria-hidden'>;\n  /** 滑块的部件属性 */\n  propsThumb?: PartProps<'div'>;\n}\n\n/** PageScrollbar 的样式：document（写在页面根元素上，隐藏原生滚动条） */\nexport const pageScrollbarStyles = css.create({\n  document: { scrollbarWidth: 'none', '::-webkit-scrollbar': { display: 'none' } },\n});\n\n/** 整页的浮层滚动条：挂载期间隐藏页面的原生滚动条 */\nexport const PageScrollbar = _component(\n  ({ type = 'scroll', hideDelay = 800, propsScrollbar, propsThumb }: PageScrollbarProps) => {\n    let viewport = _state.raw<HTMLElement | null>(null);\n    let content = _state.raw<HTMLElement | null>(null);\n    const classes = (css.attrs(pageScrollbarStyles.document).class ?? '')\n      .split(' ')\n      .filter(Boolean);\n\n    onMounted(() => {\n      viewport = document.scrollingElement as HTMLElement;\n      content = document.body;\n      document.documentElement.classList.add(...classes);\n    });\n    onBeforeUnmount(() => document.documentElement.classList.remove(...classes));\n\n    return () => (\n      <OverlayScrollbar\n        axis=\"y\"\n        viewport={viewport}\n        content={content}\n        type={type}\n        hideDelay={hideDelay}\n        fixed\n        propsScrollbar={propsScrollbar}\n        propsThumb={propsThumb}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;AA4BA,IAAa,sBAAsB,IAAI,OAAO,EAC5C,UAAU;CAAE,gBAAgB;CAAQ,uBAAuB,EAAE,SAAS,OAAO;AAAE,EACjF,CAAC;;AAGD,IAAa,gBAAgB,0BAC3B,QAAA,SAA0F;CAAA,MAAA,OAAAA,aAAA,QAAA,QAAhF,QAAQ;CAAA,MAAA,YAAAA,aAAA,QAAA,aAAc,GAAG;CAAA,MAAA,iBAAAA,aAAA,QAAA,gBAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CACjC,IAAI,WAAQC,WAAkC,IAAI;CAClD,IAAI,UAAOA,WAAkC,IAAI;CACjD,MAAM,WAAW,IAAI,MAAM,oBAAoB,QAAQ,CAAC,CAAC,SAAS,GAAA,CAC/D,MAAM,GAAG,CAAC,CACV,OAAO,OAAO;CAEjB,gBAAgB;EACd,SAAA,QAAW,SAAS;EACpB,QAAA,QAAU,SAAS;EACnB,SAAS,gBAAgB,UAAU,IAAI,GAAG,OAAO;CACnD,CAAC;CACD,sBAAsB,SAAS,gBAAgB,UAAU,OAAO,GAAG,OAAO,CAAC;CAE3E,aAAOC,YAAA,kBAAA;EAAA,QAAA;EAAA,YAAA,SAAA;EAAA,WAAA,QAAA;EAAA,QAAA,KAAA;EAAA,aAAA,UAAA;EAAA,SAAA;EAAA,kBAAA,eAAA;EAAA,cAAA,WAAA;CAAA,GAAA,IAAA;AAYT,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/layout/Prose.d.ts

@@ -0,0 +1,19 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import { type Space } from '../utils/style/styles';
+/** 未声明的属性落到 article 上 */
+export interface ProseProps extends PartProps<'article'> {
+    /** 块之间的间距，默认 lg（1em） */
+    gap?: Space;
+    /** 限制行长（约 70 个字宽），默认 true；放在窄栏里时可以关掉 */
+    measure?: boolean;
+    children?: VNodeChild;
+}
+/** Prose 的样式 */
+export declare const proseStyles: Readonly<{
+    measure: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** 长文的容器：块之间的间距、行长与宽松的行高 */
+export declare const Prose: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ProseProps>;

package/dist/layout/Prose.js

@@ -0,0 +1,37 @@
+import { mergeAttrs } from "../utils/props.js";
+import { gapStyles } from "../utils/style/styles.js";
+import { createVNode } from "vue";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/layout/Prose.tsx
+/** 未声明的属性落到 article 上 */
+/** Prose 的样式 */
+var proseStyles = css.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		minWidth: 0,
+		lineHeight: "_relaxed",
+		overflowWrap: "break-word"
+	},
+	measure: { maxWidth: "70ch" }
+});
+/** 长文的容器：块之间的间距、行长与宽松的行高 */
+var Prose = /*#__PURE__*/ _component((_props, _ctx) => {
+	const gap = readonlyProp(_props, "gap", "lg");
+	const measure = readonlyProp(_props, "measure", true);
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	return () => createVNode("article", mergeAttrs({ sx: [
+		proseStyles.root,
+		gapStyles[gap.value],
+		measure.value && proseStyles.measure
+	] }, rest), [children.value]);
+}, {
+	name: "Prose",
+	props: ["gap", "measure"]
+});
+//#endregion
+export { Prose, proseStyles };
+
+//# sourceMappingURL=Prose.js.map

package/dist/layout/Prose.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Prose.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/layout/Prose.tsx"],"sourcesContent":["/**\n * 长文的容器（article）：段落、标题、列表、代码块、表格依次排下来时的间距、行长与行高。\n * 样式里不写“相邻元素之间”的选择器，间距用 flex 的 gap 统一给：子元素各自不带外边距（本库的组件都是这样）。\n *\n *   <Prose>\n *     <H1 id=\"intro\" anchor>介绍</H1>\n *     <Paragraph>…</Paragraph>\n *     <CodeBlock code={…} lang=\"ts\" />\n *   </Prose>\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { gapStyles, type Space } from '../utils/style/styles';\n\n/** 未声明的属性落到 article 上 */\nexport interface ProseProps extends PartProps<'article'> {\n  /** 块之间的间距，默认 lg（1em） */\n  gap?: Space;\n  /** 限制行长（约 70 个字宽），默认 true；放在窄栏里时可以关掉 */\n  measure?: boolean;\n  children?: VNodeChild;\n}\n\n/** Prose 的样式 */\nexport const proseStyles = css.create({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: 0,\n    lineHeight: '_relaxed',\n    overflowWrap: 'break-word',\n  },\n  measure: { maxWidth: '70ch' },\n});\n\n/** 长文的容器：块之间的间距、行长与宽松的行高 */\nexport const Prose = _component(\n  ({ gap = 'lg', measure = true, children, ...rest }: ProseProps) =>\n    () => (\n      <article\n        {...mergeAttrs<'article'>(\n          { sx: [proseStyles.root, gapStyles[gap], measure && proseStyles.measure] },\n          rest,\n        )}\n      >\n        {children}\n      </article>\n    ),\n);\n"],"mappings":";;;;;;;;AA0BA,IAAa,cAAc,IAAI,OAAO;CACpC,MAAM;EACJ,SAAS;EACT,eAAe;EACf,UAAU;EACV,YAAY;EACZ,cAAc;CAChB;CACA,SAAS,EAAE,UAAU,OAAO;AAC9B,CAAC;;AAGD,IAAa,QAAQ,0BACnB,QAAA,SAAA;CAAA,MAAA,MAAAA,aAAA,QAAA,OAAS,IAAI;CAAA,MAAA,UAAAA,aAAA,QAAA,WAAY,IAAI;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAAe,OAAIC,UAAA,QAAA,MAAA,KAAA;CAAA,aAC9CC,YAAA,WAEQ,WACF,EAAE,IAAI;EAAC,YAAY;EAAM,UAAS,IAAA;EAAO,QAAA,SAAW,YAAY;CAAO,EAAE,GACzE,IACF,GAAC,CAAA,SAAA,KAAA,CAAA;AAIJ,GAAA;CAAA,MAAA;CAAA,OAAA,CAAA,OAAA,SAAA;AAAA,CACL"}

package/dist/layout/ResizeHandle.d.ts

@@ -0,0 +1,28 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type PartProps } from '../utils/props';
+/** 分隔条的角色、可聚焦与取值由组件管理 */
+export type ResizeHandleManaged = 'role' | 'tabindex' | 'aria-orientation' | 'aria-valuenow' | 'aria-valuemin' | 'aria-valuemax';
+/** 未声明的属性落到手柄（span）上；无障碍名称写 aria-label */
+export interface ResizeHandleProps extends PartProps<'span', ResizeHandleManaged> {
+    /** 当前宽度（px）；没有时从父元素的实际宽度起算 */
+    width?: number;
+    /** 最小宽度（px），默认 64 */
+    minWidth?: number;
+    /** 最大宽度（px），默认不限 */
+    maxWidth?: number;
+    /** 双击回到的宽度（px）；不写时双击不做什么 */
+    defaultWidth?: number;
+    /** 键盘每按一次调整多少（px），默认 16 */
+    step?: number;
+    /** 手柄在父元素的哪一边，默认 end；start 时往起始方向拖是变宽（从结束边滑入的抽屉） */
+    edge?: 'start' | 'end';
+    /** 拖动或用键盘调整了宽度（已经夹在最小、最大宽度之间） */
+    onWidthChange: (width: number) => void;
+}
+/** ResizeHandle 的样式：贴着父元素结束边的细线 */
+export declare const resizeHandleStyles: Readonly<{
+    handle: css.CompiledStyles;
+    start: css.CompiledStyles;
+}>;
+/** 宽度调整手柄：拖动或用 ← / → 调整父元素的宽度 */
+export declare const ResizeHandle: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ResizeHandleProps>;

package/dist/layout/ResizeHandle.js

@@ -0,0 +1,94 @@
+import { clamp } from "../utils/data/number.js";
+import { mergeAttrs } from "../utils/props.js";
+import { startMove } from "../utils/dom/move.js";
+import { inlineArrows, isRtl } from "../utils/dom/direction.js";
+import { useResizeObserver } from "../utils/dom/resize.js";
+import { createVNode, ref, shallowRef } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/layout/ResizeHandle.tsx
+/** 分隔条的角色、可聚焦与取值由组件管理 */
+/** 未声明的属性落到手柄（span）上；无障碍名称写 aria-label */
+/** ResizeHandle 的样式：贴着父元素结束边的细线 */
+var resizeHandleStyles = css.create({
+	handle: {
+		position: "absolute",
+		top: 0,
+		bottom: 0,
+		insetInlineEnd: 0,
+		width: "_space.sm",
+		cursor: "col-resize",
+		touchAction: "none",
+		backgroundColor: {
+			default: "transparent",
+			":hover": "_borderStrong",
+			":focus-visible": "_accent"
+		},
+		outlineStyle: "none"
+	},
+	start: {
+		insetInlineEnd: "auto",
+		insetInlineStart: 0
+	}
+});
+/** 宽度调整手柄：拖动或用 ← / → 调整父元素的宽度 */
+var ResizeHandle = /*#__PURE__*/ _component((_props, _ctx) => {
+	const width = readonlyProp(_props, "width");
+	const minWidth = readonlyProp(_props, "minWidth", 64);
+	const maxWidth = readonlyProp(_props, "maxWidth", () => Number.POSITIVE_INFINITY);
+	const defaultWidth = readonlyProp(_props, "defaultWidth");
+	const step = readonlyProp(_props, "step", 16);
+	const edge = readonlyProp(_props, "edge", "end");
+	const onWidthChange = readonlyProp(_props, "onWidthChange");
+	const rest = restProps(_props, _ctx, true);
+	const parentOf = (event) => event.currentTarget.parentElement;
+	const fit = (px) => Math.round(clamp(px, minWidth.value, maxWidth.value));
+	let handle = shallowRef(null);
+	let measured = ref(void 0);
+	useResizeObserver(() => width.value == null ? handle.value?.parentElement : null, () => {
+		const parent = handle.value?.parentElement;
+		if (parent) measured.value = Math.round(parent.getBoundingClientRect().width);
+	});
+	function onPointerdown(event) {
+		const parent = parentOf(event);
+		const from = parent.getBoundingClientRect().width;
+		const sign = (isRtl(parent) ? -1 : 1) * (edge.value === "start" ? -1 : 1);
+		event.preventDefault();
+		startMove(event, { onMove: ({ deltaX }) => onWidthChange.value(fit(from + sign * deltaX)) });
+	}
+	function onKeydown(event) {
+		const parent = parentOf(event);
+		const { forward, backward } = inlineArrows(isRtl(parent));
+		const delta = (event.key === forward ? step.value : event.key === backward ? -step.value : 0) * (edge.value === "start" ? -1 : 1);
+		if (!delta) return;
+		event.preventDefault();
+		onWidthChange.value(fit((width.value ?? parent.getBoundingClientRect().width) + delta));
+	}
+	return () => createVNode("span", mergeAttrs({ sx: [resizeHandleStyles.handle, edge.value === "start" && resizeHandleStyles.start] }, rest, {
+		ref: (element) => handle.value = element instanceof HTMLElement ? element : null,
+		role: "separator",
+		tabindex: 0,
+		"aria-orientation": "vertical",
+		"aria-valuenow": width.value ?? measured.value ?? minWidth.value,
+		"aria-valuemin": minWidth.value,
+		"aria-valuemax": Number.isFinite(maxWidth.value) ? maxWidth.value : void 0,
+		onPointerdown,
+		onKeydown,
+		onDblclick: defaultWidth.value == null ? void 0 : () => onWidthChange.value(fit(defaultWidth.value))
+	}), null);
+}, {
+	name: "ResizeHandle",
+	props: [
+		"width",
+		"minWidth",
+		"maxWidth",
+		"defaultWidth",
+		"step",
+		"edge",
+		"onWidthChange"
+	]
+});
+//#endregion
+export { ResizeHandle, resizeHandleStyles };
+
+//# sourceMappingURL=ResizeHandle.js.map

package/dist/layout/ResizeHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeHandle.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode"],"sources":["../../src/layout/ResizeHandle.tsx"],"sourcesContent":["/**\n * 宽度调整手柄：所在元素结束边（edge=\"start\" 时是起始边，如从右侧滑入的抽屉）的一条细线（role=\"separator\"），悬停、聚焦时显示。\n * 拖动（startMove）或聚焦后用 ← / →（WCAG 2.5.7 拖动的替代操作）调整，从右到左排版下方向自动镜像；\n * 双击回到 defaultWidth。宽度从父元素量起，所以要放在要调整的那个元素里（它需要 position: relative 或 fixed）。\n * AppShell 的抽屉式侧栏、DataTable 的列宽（ColumnResizer）都用它。\n *\n *   <aside style=\"position: relative; width: …\">…<ResizeHandle aria-label=\"调整侧栏宽度\" width={width} onWidthChange={(px) => (width = px)} /></aside>\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { clamp } from '../utils/data/number';\nimport { inlineArrows, isRtl } from '../utils/dom/direction';\nimport { startMove } from '../utils/dom/move';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { mergeAttrs, type PartProps } from '../utils/props';\n\n/** 分隔条的角色、可聚焦与取值由组件管理 */\nexport type ResizeHandleManaged =\n  'role' | 'tabindex' | 'aria-orientation' | 'aria-valuenow' | 'aria-valuemin' | 'aria-valuemax';\n\n/** 未声明的属性落到手柄（span）上；无障碍名称写 aria-label */\nexport interface ResizeHandleProps extends PartProps<'span', ResizeHandleManaged> {\n  /** 当前宽度（px）；没有时从父元素的实际宽度起算 */\n  width?: number;\n  /** 最小宽度（px），默认 64 */\n  minWidth?: number;\n  /** 最大宽度（px），默认不限 */\n  maxWidth?: number;\n  /** 双击回到的宽度（px）；不写时双击不做什么 */\n  defaultWidth?: number;\n  /** 键盘每按一次调整多少（px），默认 16 */\n  step?: number;\n  /** 手柄在父元素的哪一边，默认 end；start 时往起始方向拖是变宽（从结束边滑入的抽屉） */\n  edge?: 'start' | 'end';\n  /** 拖动或用键盘调整了宽度（已经夹在最小、最大宽度之间） */\n  onWidthChange: (width: number) => void;\n}\n\n/** ResizeHandle 的样式：贴着父元素结束边的细线 */\nexport const resizeHandleStyles = css.create({\n  handle: {\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    insetInlineEnd: 0,\n    width: '_space.sm',\n    cursor: 'col-resize',\n    touchAction: 'none',\n    backgroundColor: {\n      default: 'transparent',\n      ':hover': '_borderStrong',\n      ':focus-visible': '_accent',\n    },\n    outlineStyle: 'none',\n  },\n  start: { insetInlineEnd: 'auto', insetInlineStart: 0 },\n});\n\n/** 宽度调整手柄：拖动或用 ← / → 调整父元素的宽度 */\nexport const ResizeHandle = _component(\n  ({\n    width,\n    minWidth = 64,\n    maxWidth = Number.POSITIVE_INFINITY,\n    defaultWidth,\n    step = 16,\n    edge = 'end',\n    onWidthChange,\n    ...rest\n  }: ResizeHandleProps) => {\n    const parentOf = (event: Event) => (event.currentTarget as HTMLElement).parentElement!;\n    const fit = (px: number) => Math.round(clamp(px, minWidth, maxWidth));\n    // 没给 width 时量父元素的实际宽度：可聚焦的分隔条必须有当前值（aria-valuenow）\n    let handle = _state.raw<HTMLElement | null>(null);\n    let measured = _state<number | undefined>(undefined);\n    useResizeObserver(\n      () => (width == null ? handle?.parentElement : null),\n      () => {\n        const parent = handle?.parentElement;\n        if (parent) measured = Math.round(parent.getBoundingClientRect().width);\n      },\n    );\n\n    function onPointerdown(event: PointerEvent) {\n      const parent = parentOf(event);\n      const from = parent.getBoundingClientRect().width;\n      // 起始边的手柄往起始方向拖是变宽：方向与结束边相反\n      const sign = (isRtl(parent) ? -1 : 1) * (edge === 'start' ? -1 : 1);\n      event.preventDefault();\n      startMove(event, {\n        onMove: ({ deltaX }) => onWidthChange(fit(from + sign * deltaX)),\n      });\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      const parent = parentOf(event);\n      const { forward, backward } = inlineArrows(isRtl(parent));\n      const delta =\n        (event.key === forward ? step : event.key === backward ? -step : 0) *\n        (edge === 'start' ? -1 : 1);\n      if (!delta) return;\n      event.preventDefault();\n      onWidthChange(fit((width ?? parent.getBoundingClientRect().width) + delta));\n    }\n\n    return () => (\n      <span\n        {...mergeAttrs<'span'>(\n          { sx: [resizeHandleStyles.handle, edge === 'start' && resizeHandleStyles.start] },\n          rest,\n          {\n            ref: (element: unknown) => (handle = element instanceof HTMLElement ? element : null),\n            role: 'separator',\n            tabindex: 0,\n            'aria-orientation': 'vertical',\n            'aria-valuenow': width ?? measured ?? minWidth,\n            'aria-valuemin': minWidth,\n            'aria-valuemax': Number.isFinite(maxWidth) ? maxWidth : undefined,\n            onPointerdown,\n            onKeydown,\n            onDblclick: defaultWidth == null ? undefined : () => onWidthChange(fit(defaultWidth)),\n          },\n        )}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;AAuCA,IAAa,qBAAqB,IAAI,OAAO;CAC3C,QAAQ;EACN,UAAU;EACV,KAAK;EACL,QAAQ;EACR,gBAAgB;EAChB,OAAO;EACP,QAAQ;EACR,aAAa;EACb,iBAAiB;GACf,SAAS;GACT,UAAU;GACV,kBAAkB;EACpB;EACA,cAAc;CAChB;CACA,OAAO;EAAE,gBAAgB;EAAQ,kBAAkB;CAAE;AACvD,CAAC;;AAGD,IAAa,eAAe,0BAC1B,QAAA,SASyB;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,YAPZ,EAAE;CAAA,MAAA,WAAAA,aAAA,QAAA,kBACF,OAAO,iBAAiB;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAE5B,EAAE;CAAA,MAAA,OAAAA,aAAA,QAAA,QACF,KAAK;CAAA,MAAA,gBAAAA,aAAA,QAAA,eAAA;CAAA,MAET,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,YAAY,UAAkB,MAAM,cAA8B;CACxE,MAAM,OAAO,OAAe,KAAK,MAAM,MAAM,IAAE,SAAA,OAAA,SAAA,KAAoB,CAAC;CAEpE,IAAI,SAAMC,WAAkC,IAAI;CAChD,IAAI,WAAQC,IAA8B,KAAA,CAAS;CACnD,wBACS,MAAA,SAAS,OAAO,OAAA,OAAQ,gBAAgB,YACzC;EACJ,MAAM,SAAS,OAAA,OAAQ;EACvB,IAAI,QAAQ,SAAA,QAAW,KAAK,MAAM,OAAO,sBAAsB,CAAC,CAAC,KAAK;CACxE,CACF;CAEA,SAAS,cAAc,OAAqB;EAC1C,MAAM,SAAS,SAAS,KAAK;EAC7B,MAAM,OAAO,OAAO,sBAAsB,CAAC,CAAC;EAE5C,MAAM,QAAQ,MAAM,MAAM,IAAI,KAAK,MAAM,KAAA,UAAS,UAAU,KAAK;EACjE,MAAM,eAAe;EACrB,UAAU,OAAO,EACf,SAAS,EAAE,aAAa,cAAA,MAAc,IAAI,OAAO,OAAO,MAAM,CAAC,EACjE,CAAC;CACH;CAEA,SAAS,UAAU,OAAsB;EACvC,MAAM,SAAS,SAAS,KAAK;EAC7B,MAAM,EAAE,SAAS,aAAa,aAAa,MAAM,MAAM,CAAC;EACxD,MAAM,SACH,MAAM,QAAQ,UAAO,KAAA,QAAU,MAAM,QAAQ,WAAW,CAAA,KAAA,QAAQ,MAChE,KAAA,UAAS,UAAU,KAAK;EAC3B,IAAI,CAAC,OAAO;EACZ,MAAM,eAAe;EACrB,cAAA,MAAc,KAAK,MAAA,SAAS,OAAO,sBAAsB,CAAC,CAAC,SAAS,KAAK,CAAC;CAC5E;CAEA,aAAOC,YAAA,QAEC,WACF,EAAE,IAAI,CAAC,mBAAmB,QAAQ,KAAA,UAAS,WAAW,mBAAmB,KAAK,EAAE,GAChF,MACA;EACE,MAAM,YAAsB,OAAA,QAAS,mBAAmB,cAAc,UAAU;EAChF,MAAM;EACN,UAAU;EACV,oBAAoB;EACpB,iBAAiB,MAAA,SAAA,SAAA,SAAiB,SAAA;EAClC,iBAAe,SAAA;EACf,iBAAiB,OAAO,SAAQ,SAAA,KAAS,IAAC,SAAA,QAAc,KAAA;EACxD;EACA;EACA,YAAY,aAAA,SAAgB,OAAO,KAAA,UAAkB,cAAA,MAAc,IAAG,aAAA,KAAa,CAAC;CACtF,CACF,GAAC,IAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/layout/ScrollArea.d.ts

@@ -0,0 +1,99 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 哪个方向可以滚动 */
+export interface ScrollAreaAxes {
+    /** 纵向（默认），横向超出的部分裁掉 */
+    y: unknown;
+    /** 横向，纵向超出的部分裁掉 */
+    x: unknown;
+    /** 两个方向 */
+    both: unknown;
+}
+/** 滚动条什么时候显示 */
+export interface ScrollbarTypes {
+    /** 指针在区域上方或正在滚动时显示（默认） */
+    hover: unknown;
+    /** 只在滚动时显示，停下后淡出 */
+    scroll: unknown;
+    /** 内容超出时一直显示 */
+    always: unknown;
+}
+/** 未声明的属性落到外层（决定尺寸的那一层）；视口的属性（aria-label 等）用 propsViewport */
+export interface ScrollAreaProps extends PartProps<'div'> {
+    /** 可以滚动的方向，默认 y */
+    axis?: keyof ScrollAreaAxes;
+    /** 滚动条什么时候显示，默认 hover */
+    type?: keyof ScrollbarTypes;
+    /** 停止滚动、指针离开后多久淡出（毫秒），默认 600 */
+    hideDelay?: number;
+    /**
+     * 内容超出时视口可以用 Tab 聚焦（键盘滚动），默认 true。视口本身另有角色并自己管焦点（列表框、菜单），
+     * 或焦点在别处、由那里控制滚动（命令面板的输入框）时关掉，tabindex 由使用方经 propsViewport 给
+     */
+    focusable?: boolean;
+    /** 视口（真正滚动的元素）的部件属性；ref 拿到它可以自己控制滚动 */
+    propsViewport?: PartProps<'div'>;
+    /** 内容层（视口里包着 children 的 div）的部件属性 */
+    propsContent?: PartProps<'div'>;
+    /** 滚动条轨道的部件属性，两个方向都用它（data-axis 区分 x、y） */
+    propsScrollbar?: PartProps<'div', 'aria-hidden'>;
+    /** 滑块的部件属性；大小与位置由组件写在行内样式上 */
+    propsThumb?: PartProps<'div'>;
+    children?: VNodeChild;
+}
+/** ScrollArea 的样式：root、viewport、y、x、both、wideContent */
+export declare const scrollAreaStyles: Readonly<{
+    both: css.CompiledStyles;
+    root: css.CompiledStyles;
+    viewport: css.CompiledStyles;
+    wideContent: css.CompiledStyles;
+    x: css.CompiledStyles;
+    y: css.CompiledStyles;
+}>;
+/** OverlayScrollbar 的样式：track、hidden、y、x、yCorner、xCorner、thumb 等 */
+export declare const scrollAreaBarStyles: Readonly<{
+    fixed: css.CompiledStyles;
+    hidden: css.CompiledStyles;
+    hiddenReveal: css.CompiledStyles;
+    thumb: css.CompiledStyles;
+    thumbX: css.CompiledStyles;
+    thumbY: css.CompiledStyles;
+    track: css.CompiledStyles;
+    x: css.CompiledStyles;
+    xCorner: css.CompiledStyles;
+    y: css.CompiledStyles;
+    yCorner: css.CompiledStyles;
+}>;
+/** OverlayScrollbar 的属性 */
+export interface OverlayScrollbarProps {
+    /** 方向 */
+    axis: 'x' | 'y';
+    /** 真正滚动的元素；整页滚动时是 document.scrollingElement（滚动事件在 window 上） */
+    viewport: HTMLElement | null;
+    /** 内容：它的尺寸变化时重新计算滑块 */
+    content: HTMLElement | null;
+    /** 指针进入它时显示滚动条（type 为 hover 时）；不给时只看指针是否在滚动条上 */
+    hoverTarget?: HTMLElement | null;
+    /** 什么时候显示，默认 hover */
+    type?: keyof ScrollbarTypes;
+    /** 停止滚动、指针离开后多久淡出（毫秒），默认 600 */
+    hideDelay?: number;
+    /** 两个方向都有滚动条：让出右下角 */
+    corner?: boolean;
+    /** 固定在视口一侧（整页的滚动条）：隐藏时仍接收指针，移到窗口边缘就显示 */
+    fixed?: boolean;
+    /** 轨道的部件属性 */
+    propsScrollbar?: PartProps<'div', 'aria-hidden'>;
+    /** 滑块的部件属性 */
+    propsThumb?: PartProps<'div'>;
+    /** 内容是否超出视口（这个方向能不能滚动）变化时调用 */
+    onOverflowChange?: (overflowing: boolean) => void;
+}
+/**
+ * 一个方向的浮层滚动条：轨道与滑块，滚动、悬停时出现，停下后淡出；拖动滑块、点击轨道翻页、滚轮转交给视口。
+ * ScrollArea 与 PageScrollbar 都用它。单独一个组件，滚动、悬停只让它自己重新渲染，不牵动内容
+ */
+export declare const OverlayScrollbar: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<OverlayScrollbarProps>;
+/** 滚动区域：原生滚动 + 半透明的浮层滚动条，出现与消失都不占位 */
+export declare const ScrollArea: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ScrollAreaProps>;