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

package/dist/layout/Flex.js

@@ -0,0 +1,109 @@
+import { mergeAttrs } from "../utils/props.js";
+import { columnGapStyles, gapStyles, listRole, listStyles, rowGapStyles } from "../utils/style/styles.js";
+import { createVNode, isVNode } from "vue";
+import { _component, childrenProp, forwardChildren, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/layout/Flex.tsx
+/** 主轴方向（flex-direction） */
+/** 交叉轴对齐（align-items）：横排时是竖直方向，竖排时是水平方向 */
+/** 主轴分布（justify-content） */
+/** flex 布局的选项，Flex、FlexList 与 createFlex 生成的组件共用 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** Flex 的样式：root、inline、row、column、row-reverse、column-reverse、wrap、grow 等 */
+var flexStyles = css.create({
+	root: { display: "flex" },
+	inline: { display: "inline-flex" },
+	row: { flexDirection: "row" },
+	column: { flexDirection: "column" },
+	"row-reverse": { flexDirection: "row-reverse" },
+	"column-reverse": { flexDirection: "column-reverse" },
+	wrap: { flexWrap: "wrap" },
+	wrapReverse: { flexWrap: "wrap-reverse" },
+	grow: {
+		flexGrow: 1,
+		minWidth: 0,
+		minHeight: 0
+	}
+});
+/** Flex 的样式：start、center、end、stretch、baseline */
+var flexAlignStyles = css.create({
+	start: { alignItems: "flex-start" },
+	center: { alignItems: "center" },
+	end: { alignItems: "flex-end" },
+	stretch: { alignItems: "stretch" },
+	baseline: { alignItems: "baseline" }
+});
+/** Flex 的样式：start、center、end、between、around、evenly */
+var flexJustifyStyles = css.create({
+	start: { justifyContent: "flex-start" },
+	center: { justifyContent: "center" },
+	end: { justifyContent: "flex-end" },
+	between: { justifyContent: "space-between" },
+	around: { justifyContent: "space-around" },
+	evenly: { justifyContent: "space-evenly" }
+});
+/** 未声明的属性落到元素上：Flex 为 div，FlexList 为 ul，createFlex 生成的为给定的标签 */
+/**
+* 生成渲染为指定语义标签的 flex 布局组件；列表标签（ul、ol）自动去掉圆点并补上 role="list"。
+* name 是 DevTools 与警告信息里显示的组件名。
+*/
+function createFlex(tag, name) {
+	return /*#__PURE__*/ _component((_props, _ctx) => {
+		const direction = readonlyProp(_props, "direction", "row");
+		const align = readonlyProp(_props, "align");
+		const justify = readonlyProp(_props, "justify");
+		const wrap = readonlyProp(_props, "wrap", false);
+		const gap = readonlyProp(_props, "gap");
+		const rowGap = readonlyProp(_props, "rowGap");
+		const columnGap = readonlyProp(_props, "columnGap");
+		const inline = readonlyProp(_props, "inline", false);
+		const grow = readonlyProp(_props, "grow", false);
+		childrenProp(_props);
+		const rest = restProps(_props, _ctx, false);
+		return () => {
+			let _slot;
+			const Tag = tag;
+			const sx = [
+				inline.value ? flexStyles.inline : flexStyles.root,
+				flexStyles[direction.value],
+				wrap.value && (wrap.value === "reverse" ? flexStyles.wrapReverse : flexStyles.wrap),
+				align.value && flexAlignStyles[align.value],
+				justify.value && flexJustifyStyles[justify.value],
+				gap.value && gapStyles[gap.value],
+				rowGap.value && rowGapStyles[rowGap.value],
+				columnGap.value && columnGapStyles[columnGap.value],
+				grow.value && flexStyles.grow,
+				listRole(tag) && listStyles.reset
+			];
+			return createVNode(Tag, mergeAttrs({
+				sx,
+				role: listRole(tag)
+			}, rest), _isSlot(_slot = forwardChildren(_props)) ? _slot : { default: () => [_slot] });
+		};
+	}, {
+		props: [
+			"direction",
+			"align",
+			"justify",
+			"wrap",
+			"gap",
+			"rowGap",
+			"columnGap",
+			"inline",
+			"grow"
+		],
+		name
+	});
+}
+/** flex 布局（div） */
+var Flex = createFlex("div", "Flex");
+/** flex 布局的列表（ul）：去掉圆点与缩进，保留列表语义；子元素用 li */
+var FlexList = createFlex("ul", "FlexList");
+/** 有序列表（ol）的 flex 布局：顺序有意义的一组（面包屑、步骤、时间线、通知），去掉编号并保留列表语义 */
+var FlexOrderedList = createFlex("ol", "FlexOrderedList");
+//#endregion
+export { Flex, FlexList, FlexOrderedList, createFlex, flexAlignStyles, flexJustifyStyles, flexStyles };
+
+//# sourceMappingURL=Flex.js.map

package/dist/layout/Flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_createVNode","_vtp_forwardChildren"],"sources":["../../src/layout/Flex.tsx"],"sourcesContent":["/**\n * 一维布局（flex）。不拆 Stack / Group：竖排写 direction=\"column\"。\n * 一个元素一个组件（COMPONENTS.md §1）：Flex 是 div，FlexList 是 ul；\n * 其他语义容器用 createFlex 生成，如 `const Toolbar = createFlex('nav', 'Toolbar')`。\n *\n *   <Flex gap=\"sm\" align=\"center\">…</Flex>\n *   <FlexList direction=\"column\" gap=\"xs\">…</FlexList>   列表：去掉圆点并保留列表语义（有序的用 FlexOrderedList）\n */\nimport { _component, type TsxComponent } 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 {\n  columnGapStyles,\n  gapStyles,\n  listRole,\n  listStyles,\n  rowGapStyles,\n  type LayoutTag,\n  type Space,\n} from '../utils/style/styles';\n\n/** 主轴方向（flex-direction） */\nexport interface FlexDirections {\n  /** 横排：子元素从起始边排到结束边 */\n  row: unknown;\n  /** 竖排：子元素从上到下 */\n  column: unknown;\n  /** 横排，顺序反过来 */\n  'row-reverse': unknown;\n  /** 竖排，顺序反过来 */\n  'column-reverse': unknown;\n}\n\n/** 交叉轴对齐（align-items）：横排时是竖直方向，竖排时是水平方向 */\nexport interface FlexAligns {\n  /** 贴着交叉轴的起点（横排时顶部对齐） */\n  start: unknown;\n  /** 居中 */\n  center: unknown;\n  /** 贴着交叉轴的终点（横排时底部对齐） */\n  end: unknown;\n  /** 拉伸填满交叉轴（默认） */\n  stretch: unknown;\n  /** 按文字基线对齐：字号不同的文字、图标与文字混排 */\n  baseline: unknown;\n}\n\n/** 主轴分布（justify-content） */\nexport interface FlexJustifies {\n  /** 靠主轴起点（默认） */\n  start: unknown;\n  /** 居中 */\n  center: unknown;\n  /** 靠主轴终点 */\n  end: unknown;\n  /** 两端对齐，中间等距：首尾贴边 */\n  between: unknown;\n  /** 每项两侧留白相等：首尾留白是中间的一半 */\n  around: unknown;\n  /** 所有空隙相等，包括首尾 */\n  evenly: unknown;\n}\n\n/** flex 布局的选项，Flex、FlexList 与 createFlex 生成的组件共用 */\nexport interface FlexOptions {\n  /** 主轴方向，默认 row */\n  direction?: keyof FlexDirections;\n  /** 交叉轴对齐（align-items），默认 stretch */\n  align?: keyof FlexAligns;\n  /** 主轴分布（justify-content），默认 start */\n  justify?: keyof FlexJustifies;\n  /** 换行；'reverse' 为反向换行 */\n  wrap?: boolean | 'reverse';\n  /** 间距档位，对应主题的 space */\n  gap?: Space;\n  /** 换行时行与行之间的间距，盖过 gap（同 Grid） */\n  rowGap?: Space;\n  /** 同一行里项与项之间的间距，盖过 gap（同 Grid） */\n  columnGap?: Space;\n  /** 行内 flex（inline-flex） */\n  inline?: boolean;\n  /** 在父级的 flex 布局里占满剩余空间，并允许收缩到比内容窄（里面的文字才能截断）：头像旁边的正文、图标旁边的说明 */\n  grow?: boolean;\n  children?: VNodeChild;\n}\n\n/** Flex 的样式：root、inline、row、column、row-reverse、column-reverse、wrap、grow 等 */\nexport const flexStyles = css.create({\n  root: { display: 'flex' },\n  inline: { display: 'inline-flex' },\n  row: { flexDirection: 'row' },\n  column: { flexDirection: 'column' },\n  'row-reverse': { flexDirection: 'row-reverse' },\n  'column-reverse': { flexDirection: 'column-reverse' },\n  wrap: { flexWrap: 'wrap' },\n  wrapReverse: { flexWrap: 'wrap-reverse' },\n  // 占满剩下的空间；横排、竖排都能缩小到比内容小（列表、表格在里面自己滚动）\n  grow: { flexGrow: 1, minWidth: 0, minHeight: 0 },\n});\n\n/** Flex 的样式：start、center、end、stretch、baseline */\nexport const flexAlignStyles = css.create({\n  start: { alignItems: 'flex-start' },\n  center: { alignItems: 'center' },\n  end: { alignItems: 'flex-end' },\n  stretch: { alignItems: 'stretch' },\n  baseline: { alignItems: 'baseline' },\n});\n\n/** Flex 的样式：start、center、end、between、around、evenly */\nexport const flexJustifyStyles = css.create({\n  start: { justifyContent: 'flex-start' },\n  center: { justifyContent: 'center' },\n  end: { justifyContent: 'flex-end' },\n  between: { justifyContent: 'space-between' },\n  around: { justifyContent: 'space-around' },\n  evenly: { justifyContent: 'space-evenly' },\n});\n\n/** 未声明的属性落到元素上：Flex 为 div，FlexList 为 ul，createFlex 生成的为给定的标签 */\nexport type FlexProps<Tag extends LayoutTag = 'div'> = PartProps<Tag> & FlexOptions;\n\n/**\n * 生成渲染为指定语义标签的 flex 布局组件；列表标签（ul、ol）自动去掉圆点并补上 role=\"list\"。\n * name 是 DevTools 与警告信息里显示的组件名。\n */\nexport function createFlex<Tag extends LayoutTag>(\n  tag: Tag,\n  name: string,\n): TsxComponent<FlexProps<Tag>> {\n  // 实现按布局标签共有的属性写，对外每个组件只接受自己元素的属性\n  return _component(\n    ({\n      direction = 'row',\n      align,\n      justify,\n      wrap = false,\n      gap,\n      rowGap,\n      columnGap,\n      inline = false,\n      grow = false,\n      children,\n      ...rest\n    }: FlexProps<LayoutTag>) =>\n      () => {\n        const Tag = tag as LayoutTag;\n        const sx = [\n          inline ? flexStyles.inline : flexStyles.root,\n          flexStyles[direction],\n          wrap && (wrap === 'reverse' ? flexStyles.wrapReverse : flexStyles.wrap),\n          align && flexAlignStyles[align],\n          justify && flexJustifyStyles[justify],\n          gap && gapStyles[gap],\n          rowGap && rowGapStyles[rowGap],\n          columnGap && columnGapStyles[columnGap],\n          grow && flexStyles.grow,\n          listRole(tag) && listStyles.reset,\n        ];\n        return <Tag {...mergeAttrs<LayoutTag>({ sx, role: listRole(tag) }, rest)}>{children}</Tag>;\n      },\n    { name },\n  ) as unknown as TsxComponent<FlexProps<Tag>>;\n}\n\n/** flex 布局（div） */\nexport const Flex = createFlex('div', 'Flex');\n/** flex 布局的列表（ul）：去掉圆点与缩进，保留列表语义；子元素用 li */\nexport const FlexList = createFlex('ul', 'FlexList');\n\n/** 有序列表（ol）的 flex 布局：顺序有意义的一组（面包屑、步骤、时间线、通知），去掉编号并保留列表语义 */\nexport const FlexOrderedList = createFlex('ol', 'FlexOrderedList');\n"],"mappings":";;;;;;;;;;AAgEA,SAAA,QAAA,GAAA;CAAA,OAAA,OAAA,MAAA,cAAA,OAAA,UAAA,SAAA,KAAA,CAAA,MAAA,qBAAA,CAAAA,QAAA,CAAA;AAAA;;AAwBA,IAAa,aAAa,IAAI,OAAO;CACnC,MAAM,EAAE,SAAS,OAAO;CACxB,QAAQ,EAAE,SAAS,cAAc;CACjC,KAAK,EAAE,eAAe,MAAM;CAC5B,QAAQ,EAAE,eAAe,SAAS;CAClC,eAAe,EAAE,eAAe,cAAc;CAC9C,kBAAkB,EAAE,eAAe,iBAAiB;CACpD,MAAM,EAAE,UAAU,OAAO;CACzB,aAAa,EAAE,UAAU,eAAe;CAExC,MAAM;EAAE,UAAU;EAAG,UAAU;EAAG,WAAW;CAAE;AACjD,CAAC;;AAGD,IAAa,kBAAkB,IAAI,OAAO;CACxC,OAAO,EAAE,YAAY,aAAa;CAClC,QAAQ,EAAE,YAAY,SAAS;CAC/B,KAAK,EAAE,YAAY,WAAW;CAC9B,SAAS,EAAE,YAAY,UAAU;CACjC,UAAU,EAAE,YAAY,WAAW;AACrC,CAAC;;AAGD,IAAa,oBAAoB,IAAI,OAAO;CAC1C,OAAO,EAAE,gBAAgB,aAAa;CACtC,QAAQ,EAAE,gBAAgB,SAAS;CACnC,KAAK,EAAE,gBAAgB,WAAW;CAClC,SAAS,EAAE,gBAAgB,gBAAgB;CAC3C,QAAQ,EAAE,gBAAgB,eAAe;CACzC,QAAQ,EAAE,gBAAgB,eAAe;AAC3C,CAAC;;;;;;AASD,SAAgB,WACd,KACA,MAC8B;CAE9B,OAAO,0BACL,QAAA,SAAA;EAAA,MAAA,YAAAC,aAAA,QAAA,aACc,KAAK;EAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;EAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;EAAA,MAAA,OAAAA,aAAA,QAAA,QAGV,KAAK;EAAA,MAAA,MAAAA,aAAA,QAAA,KAAA;EAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;EAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;EAAA,MAAA,SAAAA,aAAA,QAAA,UAIH,KAAK;EAAA,MAAA,OAAAA,aAAA,QAAA,QACP,KAAK;EAAA,aAAA,MAAA;EAAA,MAET,OAAIC,UAAA,QAAA,MAAA,KAAA;EAAA,aAED;GAAA,IAAA;GACJ,MAAM,MAAM;GACZ,MAAM,KAAK;IACT,OAAA,QAAS,WAAW,SAAS,WAAW;IACxC,WAAU,UAAA;IACV,KAAA,UAAS,KAAA,UAAS,YAAY,WAAW,cAAc,WAAW;IAClE,MAAA,SAAS,gBAAe,MAAA;IACxB,QAAA,SAAW,kBAAiB,QAAA;IAC5B,IAAA,SAAO,UAAS,IAAA;IAChB,OAAA,SAAU,aAAY,OAAA;IACtB,UAAA,SAAa,gBAAe,UAAA;IAC5B,KAAA,SAAQ,WAAW;IACnB,SAAS,GAAG,KAAK,WAAW;GAAK;GAEnC,OAAAC,YAAA,KAAgB,WAAsB;IAAE;IAAI,MAAM,SAAS,GAAG;GAAE,GAAG,IAAI,GAAC,QAAA,QAAjEC,gBAAA,MAAkF,CAAC,IAAA,QAAA,EAAA,eAAA,CAAA,KAAA,EAAA,CAAA;EAC5F;CAAC,GACH;EAAA,OAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;EAAA;EAAE;CAAK,CACT;AACF;;AAGA,IAAa,OAAO,WAAW,OAAO,MAAM;;AAE5C,IAAa,WAAW,WAAW,MAAM,UAAU;;AAGnD,IAAa,kBAAkB,WAAW,MAAM,iBAAiB"}

package/dist/layout/Grid.d.ts

@@ -0,0 +1,139 @@
+/**
+ * 二维布局（grid）。
+ *
+ *   <Grid columns={3} gap="md">…</Grid>                 固定列数，等宽
+ *   <Grid minItemWidth="14em" gap="md">…</Grid>         按宽度自动换列：容器多宽就放几列，不需要断点
+ *   <GridItem span={2}>…</GridItem>                     跨两列；span="full" 占满一整行；自动换列窄到放不下时跨当前的列数
+ *
+ * 响应式不引入断点：minItemWidth 覆盖最常见的自动换列，其余用 sx 加容器查询。
+ * 一个元素一个组件（COMPONENTS.md §1）：Grid 是 div，GridList 是 ul；其他语义容器用 createGrid 生成。
+ */
+import { type TsxComponent } from '@zerodep-dev/vue-tsx-pro-tsx';
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+import { type LayoutTag, type Space } from '../utils/style/styles';
+/** 单元格内容在格子里的对齐（align-items 为块方向、justify-items 为行内方向） */
+export interface GridAligns {
+    /** 贴着格子的起始边 */
+    start: unknown;
+    /** 居中 */
+    center: unknown;
+    /** 贴着格子的结束边 */
+    end: unknown;
+    /** 拉伸填满格子（默认） */
+    stretch: unknown;
+}
+/** 自动排布方向（grid-auto-flow） */
+export interface GridFlows {
+    /** 逐行填充（默认） */
+    row: unknown;
+    /** 逐列填充 */
+    column: unknown;
+    /** 逐行填充，并回填前面留下的空位（顺序可能变化） */
+    'row dense': unknown;
+    /** 逐列填充，并回填空位 */
+    'column dense': unknown;
+}
+/** grid 布局的选项，Grid、GridList 与 createGrid 生成的组件共用 */
+export interface GridOptions {
+    /** 列数（等宽列）；与 minItemWidth 同时给时以 minItemWidth 为准 */
+    columns?: number;
+    /**
+     * 每项的最小宽度（CSS 长度，如 '14em'）：按容器宽度自动决定列数，窄于它时单列。
+     * 项目比放得下的列数少时，空列收起、各项拉宽占满（auto-fit，同 Chakra 的 minChildWidth），不在右边留空
+     */
+    minItemWidth?: string;
+    /** 间距档位，对应主题的 space */
+    gap?: Space;
+    /** 行间距，覆盖 gap */
+    rowGap?: Space;
+    /** 列间距，覆盖 gap */
+    columnGap?: Space;
+    /** 单元格在块方向的对齐（align-items），默认 stretch */
+    align?: keyof GridAligns;
+    /** 单元格在行内方向的对齐（justify-items），默认 stretch */
+    justify?: keyof GridAligns;
+    /** 自动排布方向（grid-auto-flow），dense 回填空位 */
+    flow?: keyof GridFlows;
+    children?: VNodeChild;
+}
+/** Grid 的样式：root */
+export declare const gridStyles: Readonly<{
+    root: css.CompiledStyles;
+}>;
+/** Grid 的样式：columns、minItemWidth */
+export declare const gridDynamicStyles: Readonly<{
+    readonly columns: (count: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly minItemWidth: (width: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** Grid 的样式：start、center、end、stretch */
+export declare const gridAlignStyles: Readonly<{
+    center: css.CompiledStyles;
+    end: css.CompiledStyles;
+    start: css.CompiledStyles;
+    stretch: css.CompiledStyles;
+}>;
+/** Grid 的样式：start、center、end、stretch */
+export declare const gridJustifyStyles: Readonly<{
+    center: css.CompiledStyles;
+    end: css.CompiledStyles;
+    start: css.CompiledStyles;
+    stretch: css.CompiledStyles;
+}>;
+/** Grid 的样式：row、column、row dense、column dense */
+export declare const gridFlowStyles: Readonly<{
+    column: css.CompiledStyles;
+    "column dense": css.CompiledStyles;
+    row: css.CompiledStyles;
+    "row dense": css.CompiledStyles;
+}>;
+/**
+ * 网格的列数交给里面的 GridItem（数字 span 不超过它）：按宽度自动换列（auto-fill / auto-fit）时量出来，
+ * 不然窄到一列时 span={2} 会撑出一条隐式的列、内容溢出。返回给网格元素的 ref；FormSection 也用它。
+ */
+export declare function provideGridColumns(read: () => {
+    columns?: number;
+    minItemWidth?: string;
+}): (element: unknown) => void;
+/** 未声明的属性落到元素上：Grid 为 div，GridList 为 ul，createGrid 生成的为给定的标签 */
+export type GridProps<Tag extends LayoutTag = 'div'> = PartProps<Tag> & GridOptions;
+/**
+ * 生成渲染为指定语义标签的 grid 布局组件；列表标签（ul、ol）自动去掉圆点并补上 role="list"。
+ * name 是 DevTools 与警告信息里显示的组件名。
+ */
+export declare function createGrid<Tag extends LayoutTag>(tag: Tag, name: string): TsxComponent<GridProps<Tag>>;
+/** grid 布局（div） */
+export declare const Grid: TsxComponent<GridProps<"div">>;
+/** grid 布局的列表（ul）：卡片列表等，去掉圆点与缩进，保留列表语义；子元素用 li */
+export declare const GridList: TsxComponent<GridProps<"ul">>;
+/** 网格里一项的跨度，GridItem、GridListItem 共用 */
+export interface GridItemOptions {
+    /**
+     * 跨几列；`'full'` 占满一整行（从第一列到最后一列）。按宽度自动换列的网格（minItemWidth、FormSection）
+     * 窄到放不下时跨当前的列数（量的是 px、em、rem 写的最小宽度）
+     */
+    span?: number | 'full';
+    /** 跨几行 */
+    rowSpan?: number;
+    children?: VNodeChild;
+}
+/** 网格项的标签 */
+export type GridItemTag = 'div' | 'li';
+/** 未声明的属性落到元素上：GridItem 为 div，GridListItem 为 li */
+export type GridItemProps<Tag extends GridItemTag = 'div'> = PartProps<Tag> & GridItemOptions;
+/** GridItem 的样式：full */
+export declare const gridItemStyles: Readonly<{
+    full: css.CompiledStyles;
+}>;
+/** GridItem 的样式：span、rowSpan */
+export declare const gridItemDynamicStyles: Readonly<{
+    readonly span: (count: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+    readonly rowSpan: (count: number) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 生成网格项组件：跨列、跨行 */
+export declare function createGridItem<Tag extends GridItemTag>(tag: Tag, name: string): TsxComponent<GridItemProps<Tag>>;
+/** 网格里的一项（div）：跨列、跨行 */
+export declare const GridItem: TsxComponent<GridItemProps<"div">>;
+/** GridList 里的一项（li）：跨列、跨行 */
+export declare const GridListItem: TsxComponent<GridItemProps<"li">>;

package/dist/layout/Grid.js

@@ -0,0 +1,168 @@
+import { mergeAttrs } from "../utils/props.js";
+import { columnGapStyles, gapStyles, listRole, listStyles, rowGapStyles } from "../utils/style/styles.js";
+import { useResizeObserver } from "../utils/dom/resize.js";
+import { createVNode, inject, isVNode, provide, ref, shallowRef } from "vue";
+import { _component, childrenProp, forwardChildren, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/layout/Grid.tsx
+/** 单元格内容在格子里的对齐（align-items 为块方向、justify-items 为行内方向） */
+/** 自动排布方向（grid-auto-flow） */
+/** grid 布局的选项，Grid、GridList 与 createGrid 生成的组件共用 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** Grid 的样式：root */
+var gridStyles = css.create({ root: { display: "grid" } });
+/** Grid 的样式：columns、minItemWidth */
+var gridDynamicStyles = css.create({
+	columns: (count) => ({ gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))` }),
+	minItemWidth: (width) => ({ gridTemplateColumns: `repeat(auto-fit, minmax(min(${width}, 100%), 1fr))` })
+});
+/** Grid 的样式：start、center、end、stretch */
+var gridAlignStyles = css.create({
+	start: { alignItems: "start" },
+	center: { alignItems: "center" },
+	end: { alignItems: "end" },
+	stretch: { alignItems: "stretch" }
+});
+/** Grid 的样式：start、center、end、stretch */
+var gridJustifyStyles = css.create({
+	start: { justifyItems: "start" },
+	center: { justifyItems: "center" },
+	end: { justifyItems: "end" },
+	stretch: { justifyItems: "stretch" }
+});
+/** Grid 的样式：row、column、row dense、column dense */
+var gridFlowStyles = css.create({
+	row: { gridAutoFlow: "row" },
+	column: { gridAutoFlow: "column" },
+	"row dense": { gridAutoFlow: "row dense" },
+	"column dense": { gridAutoFlow: "column dense" }
+});
+var gridColumnsKey = Symbol("GridColumns");
+/** CSS 长度换成 px：认 px、em（按元素的字号）、rem；别的单位（calc、%）返回 null */
+function lengthToPx(length, element) {
+	const match = /^(\d*\.?\d+)(px|r?em)$/.exec(length.trim());
+	if (!match) return null;
+	const value = Number(match[1]);
+	if (match[2] === "px") return value;
+	const from = match[2] === "rem" ? document.documentElement : element;
+	return value * parseFloat(getComputedStyle(from).fontSize);
+}
+/**
+* 网格的列数交给里面的 GridItem（数字 span 不超过它）：按宽度自动换列（auto-fill / auto-fit）时量出来，
+* 不然窄到一列时 span={2} 会撑出一条隐式的列、内容溢出。返回给网格元素的 ref；FormSection 也用它。
+*/
+function provideGridColumns(read) {
+	let element = shallowRef(null);
+	let measured = ref(null);
+	useResizeObserver(() => read().minItemWidth == null ? null : element.value, () => {
+		const { columns, minItemWidth } = read();
+		if (!element.value || minItemWidth == null) return;
+		const style = getComputedStyle(element.value);
+		const gap = parseFloat(style.columnGap) || 0;
+		const width = element.value.clientWidth - parseFloat(style.paddingInlineStart) - parseFloat(style.paddingInlineEnd);
+		const min = lengthToPx(minItemWidth, element.value);
+		const fits = min == null ? null : Math.max(1, Math.floor((width + gap) / (Math.min(min, width) + gap)));
+		measured.value = fits == null ? null : Math.min(fits, columns ?? fits);
+	});
+	provide(gridColumnsKey, () => read().minItemWidth == null ? read().columns ?? null : measured.value);
+	return (next) => element.value = next;
+}
+/** 未声明的属性落到元素上：Grid 为 div，GridList 为 ul，createGrid 生成的为给定的标签 */
+/**
+* 生成渲染为指定语义标签的 grid 布局组件；列表标签（ul、ol）自动去掉圆点并补上 role="list"。
+* name 是 DevTools 与警告信息里显示的组件名。
+*/
+function createGrid(tag, name) {
+	return /*#__PURE__*/ _component((_props, _ctx) => {
+		const columns = readonlyProp(_props, "columns");
+		const minItemWidth = readonlyProp(_props, "minItemWidth");
+		const gap = readonlyProp(_props, "gap");
+		const rowGap = readonlyProp(_props, "rowGap");
+		const columnGap = readonlyProp(_props, "columnGap");
+		const align = readonlyProp(_props, "align");
+		const justify = readonlyProp(_props, "justify");
+		const flow = readonlyProp(_props, "flow");
+		childrenProp(_props);
+		const rest = restProps(_props, _ctx, false);
+		const gridRef = provideGridColumns(() => ({
+			columns: columns.value,
+			minItemWidth: minItemWidth.value
+		}));
+		return () => {
+			let _slot;
+			const Tag = tag;
+			const template = minItemWidth.value != null ? gridDynamicStyles.minItemWidth(minItemWidth.value) : columns.value != null && gridDynamicStyles.columns(columns.value);
+			const sx = [
+				gridStyles.root,
+				template,
+				gap.value && gapStyles[gap.value],
+				rowGap.value && rowGapStyles[rowGap.value],
+				columnGap.value && columnGapStyles[columnGap.value],
+				align.value && gridAlignStyles[align.value],
+				justify.value && gridJustifyStyles[justify.value],
+				flow.value && gridFlowStyles[flow.value],
+				listRole(tag) && listStyles.reset
+			];
+			return createVNode(Tag, mergeAttrs({
+				sx,
+				role: listRole(tag)
+			}, rest, { ref: gridRef }), _isSlot(_slot = forwardChildren(_props)) ? _slot : { default: () => [_slot] });
+		};
+	}, {
+		props: [
+			"columns",
+			"minItemWidth",
+			"gap",
+			"rowGap",
+			"columnGap",
+			"align",
+			"justify",
+			"flow"
+		],
+		name
+	});
+}
+/** grid 布局（div） */
+var Grid = createGrid("div", "Grid");
+/** grid 布局的列表（ul）：卡片列表等，去掉圆点与缩进，保留列表语义；子元素用 li */
+var GridList = createGrid("ul", "GridList");
+/** 网格里一项的跨度，GridItem、GridListItem 共用 */
+/** 网格项的标签 */
+/** 未声明的属性落到元素上：GridItem 为 div，GridListItem 为 li */
+/** GridItem 的样式：full */
+var gridItemStyles = css.create({ full: { gridColumn: "1 / -1" } });
+/** GridItem 的样式：span、rowSpan */
+var gridItemDynamicStyles = css.create({
+	span: (count) => ({ gridColumn: `span ${count} / span ${count}` }),
+	rowSpan: (count) => ({ gridRow: `span ${count} / span ${count}` })
+});
+/** 生成网格项组件：跨列、跨行 */
+function createGridItem(tag, name) {
+	return /*#__PURE__*/ _component((_props2, _ctx2) => {
+		const span = readonlyProp(_props2, "span");
+		const rowSpan = readonlyProp(_props2, "rowSpan");
+		childrenProp(_props2);
+		const rest = restProps(_props2, _ctx2, false);
+		const columns = inject(gridColumnsKey, () => null);
+		return () => {
+			let _slot2;
+			const Tag = tag;
+			const across = typeof span.value === "number" ? Math.min(span.value, columns() ?? span.value) : span.value;
+			const sx = [across === "full" ? gridItemStyles.full : across != null && across > 1 && gridItemDynamicStyles.span(across), rowSpan.value != null && rowSpan.value > 1 && gridItemDynamicStyles.rowSpan(rowSpan.value)];
+			return createVNode(Tag, mergeAttrs({ sx }, rest), _isSlot(_slot2 = forwardChildren(_props2)) ? _slot2 : { default: () => [_slot2] });
+		};
+	}, {
+		props: ["span", "rowSpan"],
+		name
+	});
+}
+/** 网格里的一项（div）：跨列、跨行 */
+var GridItem = createGridItem("div", "GridItem");
+/** GridList 里的一项（li）：跨列、跨行 */
+var GridListItem = createGridItem("li", "GridListItem");
+//#endregion
+export { Grid, GridItem, GridList, GridListItem, createGrid, createGridItem, gridAlignStyles, gridDynamicStyles, gridFlowStyles, gridItemDynamicStyles, gridItemStyles, gridJustifyStyles, gridStyles, provideGridColumns };
+
+//# sourceMappingURL=Grid.js.map

package/dist/layout/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","names":["_isVNode","_vue_shallowRef","_vue_ref","_vtp_readonlyProp","_vtp_restProps","_createVNode","_vtp_forwardChildren"],"sources":["../../src/layout/Grid.tsx"],"sourcesContent":["/**\n * 二维布局（grid）。\n *\n *   <Grid columns={3} gap=\"md\">…</Grid>                 固定列数，等宽\n *   <Grid minItemWidth=\"14em\" gap=\"md\">…</Grid>         按宽度自动换列：容器多宽就放几列，不需要断点\n *   <GridItem span={2}>…</GridItem>                     跨两列；span=\"full\" 占满一整行；自动换列窄到放不下时跨当前的列数\n *\n * 响应式不引入断点：minItemWidth 覆盖最常见的自动换列，其余用 sx 加容器查询。\n * 一个元素一个组件（COMPONENTS.md §1）：Grid 是 div，GridList 是 ul；其他语义容器用 createGrid 生成。\n */\nimport { _component, type TsxComponent } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { inject, provide, type InjectionKey, type VNodeChild } from 'vue';\nimport { useResizeObserver } from '../utils/dom/resize';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport {\n  columnGapStyles,\n  gapStyles,\n  listRole,\n  listStyles,\n  rowGapStyles,\n  type LayoutTag,\n  type Space,\n} from '../utils/style/styles';\n\n/** 单元格内容在格子里的对齐（align-items 为块方向、justify-items 为行内方向） */\nexport interface GridAligns {\n  /** 贴着格子的起始边 */\n  start: unknown;\n  /** 居中 */\n  center: unknown;\n  /** 贴着格子的结束边 */\n  end: unknown;\n  /** 拉伸填满格子（默认） */\n  stretch: unknown;\n}\n\n/** 自动排布方向（grid-auto-flow） */\nexport interface GridFlows {\n  /** 逐行填充（默认） */\n  row: unknown;\n  /** 逐列填充 */\n  column: unknown;\n  /** 逐行填充，并回填前面留下的空位（顺序可能变化） */\n  'row dense': unknown;\n  /** 逐列填充，并回填空位 */\n  'column dense': unknown;\n}\n\n/** grid 布局的选项，Grid、GridList 与 createGrid 生成的组件共用 */\nexport interface GridOptions {\n  /** 列数（等宽列）；与 minItemWidth 同时给时以 minItemWidth 为准 */\n  columns?: number;\n  /**\n   * 每项的最小宽度（CSS 长度，如 '14em'）：按容器宽度自动决定列数，窄于它时单列。\n   * 项目比放得下的列数少时，空列收起、各项拉宽占满（auto-fit，同 Chakra 的 minChildWidth），不在右边留空\n   */\n  minItemWidth?: string;\n  /** 间距档位，对应主题的 space */\n  gap?: Space;\n  /** 行间距，覆盖 gap */\n  rowGap?: Space;\n  /** 列间距，覆盖 gap */\n  columnGap?: Space;\n  /** 单元格在块方向的对齐（align-items），默认 stretch */\n  align?: keyof GridAligns;\n  /** 单元格在行内方向的对齐（justify-items），默认 stretch */\n  justify?: keyof GridAligns;\n  /** 自动排布方向（grid-auto-flow），dense 回填空位 */\n  flow?: keyof GridFlows;\n  children?: VNodeChild;\n}\n\n/** Grid 的样式：root */\nexport const gridStyles = css.create({\n  root: { display: 'grid' },\n});\n\n// 列数与最小宽度是任意值，用动态样式（编译为 CSS 变量）；单独一个 create，见 COMPONENTS.md §4\n/** Grid 的样式：columns、minItemWidth */\nexport const gridDynamicStyles = css.create({\n  columns: (count: number) => ({ gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))` }),\n  // min(…, 100%)：容器比最小宽度还窄时不溢出\n  minItemWidth: (width: string) => ({\n    gridTemplateColumns: `repeat(auto-fit, minmax(min(${width}, 100%), 1fr))`,\n  }),\n});\n\n/** Grid 的样式：start、center、end、stretch */\nexport const gridAlignStyles = css.create({\n  start: { alignItems: 'start' },\n  center: { alignItems: 'center' },\n  end: { alignItems: 'end' },\n  stretch: { alignItems: 'stretch' },\n});\n\n/** Grid 的样式：start、center、end、stretch */\nexport const gridJustifyStyles = css.create({\n  start: { justifyItems: 'start' },\n  center: { justifyItems: 'center' },\n  end: { justifyItems: 'end' },\n  stretch: { justifyItems: 'stretch' },\n});\n\n/** Grid 的样式：row、column、row dense、column dense */\nexport const gridFlowStyles = css.create({\n  row: { gridAutoFlow: 'row' },\n  column: { gridAutoFlow: 'column' },\n  'row dense': { gridAutoFlow: 'row dense' },\n  'column dense': { gridAutoFlow: 'column dense' },\n});\n\n// 网格现在实际有几列；null 是不知道（没有固定列数，也量不出来），GridItem 照写的 span 跨\nconst gridColumnsKey: InjectionKey<() => number | null> = Symbol('GridColumns');\n\n/** CSS 长度换成 px：认 px、em（按元素的字号）、rem；别的单位（calc、%）返回 null */\nfunction lengthToPx(length: string, element: Element): number | null {\n  const match = /^(\\d*\\.?\\d+)(px|r?em)$/.exec(length.trim());\n  if (!match) return null;\n  const value = Number(match[1]);\n  if (match[2] === 'px') return value;\n  const from = match[2] === 'rem' ? document.documentElement : element;\n  return value * parseFloat(getComputedStyle(from).fontSize);\n}\n\n/**\n * 网格的列数交给里面的 GridItem（数字 span 不超过它）：按宽度自动换列（auto-fill / auto-fit）时量出来，\n * 不然窄到一列时 span={2} 会撑出一条隐式的列、内容溢出。返回给网格元素的 ref；FormSection 也用它。\n */\nexport function provideGridColumns(\n  read: () => { columns?: number; minItemWidth?: string },\n): (element: unknown) => void {\n  let element = _state.raw<HTMLElement | null>(null);\n  let measured = _state<number | null>(null);\n  useResizeObserver(\n    () => (read().minItemWidth == null ? null : element),\n    () => {\n      const { columns, minItemWidth } = read();\n      if (!element || minItemWidth == null) return;\n      const style = getComputedStyle(element);\n      const gap = parseFloat(style.columnGap) || 0;\n      const width =\n        element.clientWidth -\n        parseFloat(style.paddingInlineStart) -\n        parseFloat(style.paddingInlineEnd);\n      const min = lengthToPx(minItemWidth, element);\n      const fits =\n        min == null ? null : Math.max(1, Math.floor((width + gap) / (Math.min(min, width) + gap)));\n      measured = fits == null ? null : Math.min(fits, columns ?? fits);\n    },\n  );\n  provide(gridColumnsKey, () =>\n    read().minItemWidth == null ? (read().columns ?? null) : measured,\n  );\n  return (next) => (element = next as HTMLElement | null);\n}\n\n/** 未声明的属性落到元素上：Grid 为 div，GridList 为 ul，createGrid 生成的为给定的标签 */\nexport type GridProps<Tag extends LayoutTag = 'div'> = PartProps<Tag> & GridOptions;\n\n/**\n * 生成渲染为指定语义标签的 grid 布局组件；列表标签（ul、ol）自动去掉圆点并补上 role=\"list\"。\n * name 是 DevTools 与警告信息里显示的组件名。\n */\nexport function createGrid<Tag extends LayoutTag>(\n  tag: Tag,\n  name: string,\n): TsxComponent<GridProps<Tag>> {\n  // 实现按布局标签共有的属性写，对外每个组件只接受自己元素的属性\n  return _component(\n    ({\n      columns,\n      minItemWidth,\n      gap,\n      rowGap,\n      columnGap,\n      align,\n      justify,\n      flow,\n      children,\n      ...rest\n    }: GridProps<LayoutTag>) => {\n      const gridRef = provideGridColumns(() => ({ columns, minItemWidth }));\n      return () => {\n        const Tag = tag as LayoutTag;\n        const template =\n          minItemWidth != null\n            ? gridDynamicStyles.minItemWidth(minItemWidth)\n            : columns != null && gridDynamicStyles.columns(columns);\n        const sx = [\n          gridStyles.root,\n          template,\n          gap && gapStyles[gap],\n          rowGap && rowGapStyles[rowGap],\n          columnGap && columnGapStyles[columnGap],\n          align && gridAlignStyles[align],\n          justify && gridJustifyStyles[justify],\n          flow && gridFlowStyles[flow],\n          listRole(tag) && listStyles.reset,\n        ];\n        return (\n          <Tag {...mergeAttrs<LayoutTag>({ sx, role: listRole(tag) }, rest, { ref: gridRef })}>\n            {children}\n          </Tag>\n        );\n      };\n    },\n    { name },\n  ) as unknown as TsxComponent<GridProps<Tag>>;\n}\n\n/** grid 布局（div） */\nexport const Grid = createGrid('div', 'Grid');\n/** grid 布局的列表（ul）：卡片列表等，去掉圆点与缩进，保留列表语义；子元素用 li */\nexport const GridList = createGrid('ul', 'GridList');\n\n/** 网格里一项的跨度，GridItem、GridListItem 共用 */\nexport interface GridItemOptions {\n  /**\n   * 跨几列；`'full'` 占满一整行（从第一列到最后一列）。按宽度自动换列的网格（minItemWidth、FormSection）\n   * 窄到放不下时跨当前的列数（量的是 px、em、rem 写的最小宽度）\n   */\n  span?: number | 'full';\n  /** 跨几行 */\n  rowSpan?: number;\n  children?: VNodeChild;\n}\n\n/** 网格项的标签 */\nexport type GridItemTag = 'div' | 'li';\n\n/** 未声明的属性落到元素上：GridItem 为 div，GridListItem 为 li */\nexport type GridItemProps<Tag extends GridItemTag = 'div'> = PartProps<Tag> & GridItemOptions;\n\n/** GridItem 的样式：full */\nexport const gridItemStyles = css.create({\n  full: { gridColumn: '1 / -1' },\n});\n\n/** GridItem 的样式：span、rowSpan */\nexport const gridItemDynamicStyles = css.create({\n  span: (count: number) => ({ gridColumn: `span ${count} / span ${count}` }),\n  rowSpan: (count: number) => ({ gridRow: `span ${count} / span ${count}` }),\n});\n\n/** 生成网格项组件：跨列、跨行 */\nexport function createGridItem<Tag extends GridItemTag>(\n  tag: Tag,\n  name: string,\n): TsxComponent<GridItemProps<Tag>> {\n  return _component(\n    ({ span, rowSpan, children, ...rest }: GridItemProps<GridItemTag>) => {\n      const columns = inject(gridColumnsKey, () => null);\n      return () => {\n        const Tag = tag as GridItemTag;\n        const across = typeof span === 'number' ? Math.min(span, columns() ?? span) : span;\n        const sx = [\n          across === 'full'\n            ? gridItemStyles.full\n            : across != null && across > 1 && gridItemDynamicStyles.span(across),\n          rowSpan != null && rowSpan > 1 && gridItemDynamicStyles.rowSpan(rowSpan),\n        ];\n        return <Tag {...mergeAttrs<GridItemTag>({ sx }, rest)}>{children}</Tag>;\n      };\n    },\n    { name },\n  ) as unknown as TsxComponent<GridItemProps<Tag>>;\n}\n\n/** 网格里的一项（div）：跨列、跨行 */\nexport const GridItem = createGridItem('div', 'GridItem');\n/** GridList 里的一项（li）：跨列、跨行 */\nexport const GridListItem = createGridItem('li', 'GridListItem');\n"],"mappings":";;;;;;;;;;AAiDA,SAAA,QAAA,GAAA;CAAA,OAAA,OAAA,MAAA,cAAA,OAAA,UAAA,SAAA,KAAA,CAAA,MAAA,qBAAA,CAAAA,QAAA,CAAA;AAAA;;AAyBA,IAAa,aAAa,IAAI,OAAO,EACnC,MAAM,EAAE,SAAS,OAAO,EAC1B,CAAC;;AAID,IAAa,oBAAoB,IAAI,OAAO;CAC1C,UAAU,WAAmB,EAAE,qBAAqB,UAAU,MAAK,mBAAoB;CAEvF,eAAe,WAAmB,EAChC,qBAAqB,+BAA+B,MAAK,gBAC3D;AACF,CAAC;;AAGD,IAAa,kBAAkB,IAAI,OAAO;CACxC,OAAO,EAAE,YAAY,QAAQ;CAC7B,QAAQ,EAAE,YAAY,SAAS;CAC/B,KAAK,EAAE,YAAY,MAAM;CACzB,SAAS,EAAE,YAAY,UAAU;AACnC,CAAC;;AAGD,IAAa,oBAAoB,IAAI,OAAO;CAC1C,OAAO,EAAE,cAAc,QAAQ;CAC/B,QAAQ,EAAE,cAAc,SAAS;CACjC,KAAK,EAAE,cAAc,MAAM;CAC3B,SAAS,EAAE,cAAc,UAAU;AACrC,CAAC;;AAGD,IAAa,iBAAiB,IAAI,OAAO;CACvC,KAAK,EAAE,cAAc,MAAM;CAC3B,QAAQ,EAAE,cAAc,SAAS;CACjC,aAAa,EAAE,cAAc,YAAY;CACzC,gBAAgB,EAAE,cAAc,eAAe;AACjD,CAAC;AAGD,IAAM,iBAAoD,OAAO,aAAa;;AAG9E,SAAS,WAAW,QAAgB,SAAiC;CACnE,MAAM,QAAQ,yBAAyB,KAAK,OAAO,KAAK,CAAC;CACzD,IAAI,CAAC,OAAO,OAAO;CACnB,MAAM,QAAQ,OAAO,MAAM,EAAE;CAC7B,IAAI,MAAM,OAAO,MAAM,OAAO;CAC9B,MAAM,OAAO,MAAM,OAAO,QAAQ,SAAS,kBAAkB;CAC7D,OAAO,QAAQ,WAAW,iBAAiB,IAAI,CAAC,CAAC,QAAQ;AAC3D;;;;;AAMA,SAAgB,mBACd,MAC4B;CAC5B,IAAI,UAAOC,WAAkC,IAAI;CACjD,IAAI,WAAQC,IAAyB,IAAI;CACzC,wBACS,KAAK,CAAC,CAAC,gBAAgB,OAAO,OAAI,QAAA,aACnC;EACJ,MAAM,EAAE,SAAS,iBAAiB,KAAK;EACvC,IAAI,CAAA,QAAA,SAAY,gBAAgB,MAAM;EACtC,MAAM,QAAQ,iBAAgB,QAAA,KAAQ;EACtC,MAAM,MAAM,WAAW,MAAM,SAAS,KAAK;EAC3C,MAAM,QACJ,QAAA,MAAQ,cACR,WAAW,MAAM,kBAAkB,IACnC,WAAW,MAAM,gBAAgB;EACnC,MAAM,MAAM,WAAW,cAAY,QAAA,KAAS;EAC5C,MAAM,OACJ,OAAO,OAAO,OAAO,KAAK,IAAI,GAAG,KAAK,OAAO,QAAQ,QAAQ,KAAK,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC;EAC3F,SAAA,QAAW,QAAQ,OAAO,OAAO,KAAK,IAAI,MAAM,WAAW,IAAI;CACjE,CACF;CACA,QAAQ,sBACN,KAAK,CAAC,CAAC,gBAAgB,OAAQ,KAAK,CAAC,CAAC,WAAW,OAAI,SAAA,KACvD;CACA,QAAQ,SAAU,QAAA,QAAU;AAC9B;;;;;;AASA,SAAgB,WACd,KACA,MAC8B;CAE9B,OAAO,0BACL,QAAA,SAW4B;EAAA,MAAA,UAAAC,aAAA,QAAA,SAAA;EAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;EAAA,MAAA,MAAAA,aAAA,QAAA,KAAA;EAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;EAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;EAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;EAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;EAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;EAAA,aAAA,MAAA;EAAA,MADvB,OAAIC,UAAA,QAAA,MAAA,KAAA;EAEP,MAAM,UAAU,0BAA0B;GAAE,SAAO,QAAA;GAAE,cAAY,aAAA;EAAC,EAAE;EACpE,aAAa;GAAA,IAAA;GACX,MAAM,MAAM;GACZ,MAAM,WACJ,aAAA,SAAgB,OACZ,kBAAkB,aAAY,aAAA,KAAa,IAC3C,QAAA,SAAW,QAAQ,kBAAkB,QAAO,QAAA,KAAQ;GAC1D,MAAM,KAAK;IACT,WAAW;IACX;IACA,IAAA,SAAO,UAAS,IAAA;IAChB,OAAA,SAAU,aAAY,OAAA;IACtB,UAAA,SAAa,gBAAe,UAAA;IAC5B,MAAA,SAAS,gBAAe,MAAA;IACxB,QAAA,SAAW,kBAAiB,QAAA;IAC5B,KAAA,SAAQ,eAAc,KAAA;IACtB,SAAS,GAAG,KAAK,WAAW;GAAK;GAEnC,OAAAC,YAAA,KACW,WAAsB;IAAE;IAAI,MAAM,SAAS,GAAG;GAAE,GAAG,MAAM,EAAE,KAAK,QAAQ,CAAC,GAAC,QAAA,QAAnFC,gBAAA,MAEK,CAAC,IAAA,QAAA,EAAA,eAAA,CAAA,KAAA,EAAA,CAAA;EAEV;CACF,GACA;EAAA,OAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;GAAA;EAAA;EAAE;CAAK,CACT;AACF;;AAGA,IAAa,OAAO,WAAW,OAAO,MAAM;;AAE5C,IAAa,WAAW,WAAW,MAAM,UAAU;;;;;AAqBnD,IAAa,iBAAiB,IAAI,OAAO,EACvC,MAAM,EAAE,YAAY,SAAS,EAC/B,CAAC;;AAGD,IAAa,wBAAwB,IAAI,OAAO;CAC9C,OAAO,WAAmB,EAAE,YAAY,QAAQ,MAAK,UAAW,QAAQ;CACxE,UAAU,WAAmB,EAAE,SAAS,QAAQ,MAAK,UAAW,QAAQ;AAC1E,CAAC;;AAGD,SAAgB,eACd,KACA,MACkC;CAClC,OAAO,0BACL,SAAA,UAAsE;EAAA,MAAA,OAAAH,aAAA,SAAA,MAAA;EAAA,MAAA,UAAAA,aAAA,SAAA,SAAA;EAAA,aAAA,OAAA;EAAA,MAAvC,OAAIC,UAAA,SAAA,OAAA,KAAA;EACjC,MAAM,UAAU,OAAO,sBAAsB,IAAI;EACjD,aAAa;GAAA,IAAA;GACX,MAAM,MAAM;GACZ,MAAM,SAAS,OAAA,KAAA,UAAgB,WAAW,KAAK,IAAG,KAAA,OAAO,QAAQ,KAAC,KAAA,KAAQ,IAAC,KAAA;GAC3E,MAAM,KAAK,CACT,WAAW,SACP,eAAe,OACf,UAAU,QAAQ,SAAS,KAAK,sBAAsB,KAAK,MAAM,GACrE,QAAA,SAAW,QAAQ,QAAA,QAAU,KAAK,sBAAsB,QAAO,QAAA,KAAQ,CAAC;GAE1E,OAAAC,YAAA,KAAgB,WAAwB,EAAE,GAAG,GAAG,IAAI,GAAC,QAAA,SAA9CC,gBAAA,OAA+D,CAAC,IAAA,SAAA,EAAA,eAAA,CAAA,MAAA,EAAA,CAAA;EACzE;CACF,GACA;EAAA,OAAA,CAAA,QAAA,SAAA;EAAE;CAAK,CACT;AACF;;AAGA,IAAa,WAAW,eAAe,OAAO,UAAU;;AAExD,IAAa,eAAe,eAAe,MAAM,cAAc"}

package/dist/layout/PageScrollbar.d.ts

@@ -0,0 +1,20 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { PartProps } from '../utils/props';
+import { type ScrollbarTypes } from './ScrollArea';
+/** PageScrollbar 的属性 */
+export interface PageScrollbarProps {
+    /** 什么时候显示，默认 scroll（滚动时；指针移到窗口边缘时也会显示） */
+    type?: keyof ScrollbarTypes;
+    /** 停止滚动后多久淡出（毫秒），默认 800 */
+    hideDelay?: number;
+    /** 轨道的部件属性 */
+    propsScrollbar?: PartProps<'div', 'aria-hidden'>;
+    /** 滑块的部件属性 */
+    propsThumb?: PartProps<'div'>;
+}
+/** PageScrollbar 的样式：document（写在页面根元素上，隐藏原生滚动条） */
+export declare const pageScrollbarStyles: Readonly<{
+    document: css.CompiledStyles;
+}>;
+/** 整页的浮层滚动条：挂载期间隐藏页面的原生滚动条 */
+export declare const PageScrollbar: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<PageScrollbarProps>;

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"}