@zerodep-dev/vue-tsx-pro-mobile 0.0.0-stage → 0.4.1

package/dist/navigation/Sticky.d.ts

@@ -0,0 +1,19 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 未声明的属性落到根元素（div）上 */
+export interface StickyProps extends PartProps<'div'> {
+    /**
+     * 停住时离顶部多远（CSS 长度）
+     * @default 0
+     */
+    offsetTop?: string;
+    /** 吸顶的内容 */
+    children?: VNodeChild;
+}
+/** Sticky 的样式：root */
+export declare const stickyStyles: Readonly<{
+    root: css.CompiledStyles;
+}>;
+/** 吸顶（div） */
+export declare const Sticky: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<StickyProps>;

package/dist/navigation/Sticky.js

@@ -0,0 +1,28 @@
+import { mergeAttrs } from "../utils/props.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode } from "vue";
+//#region src/navigation/Sticky.tsx
+/** 未声明的属性落到根元素（div）上 */
+/** Sticky 的样式：root */
+var stickyStyles = css.create({ root: {
+	position: "sticky",
+	zIndex: 100
+} });
+/** 吸顶（div） */
+var Sticky = /*#__PURE__*/ _component((_props, _ctx) => {
+	const offsetTop = readonlyProp(_props, "offsetTop", "0px");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	return () => createVNode("div", mergeAttrs({
+		sx: stickyStyles.root,
+		style: { insetBlockStart: offsetTop.value }
+	}, rest), [children.value]);
+}, {
+	name: "Sticky",
+	props: ["offsetTop"]
+});
+//#endregion
+export { Sticky, stickyStyles };
+
+//# sourceMappingURL=Sticky.js.map

package/dist/navigation/Sticky.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sticky.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/navigation/Sticky.tsx"],"sourcesContent":["/**\n * 吸顶：内容随页面滚动，滚到顶部（或离顶部 offsetTop）时停住，直到所在的容器滚出去。用 CSS 的 position: sticky，\n * 两端都不用监听滚动。\n *\n *   <Sticky><Tabs …/></Sticky>\n *   <Sticky offsetTop=\"3.15em\">…</Sticky>      停在固定的导航栏下面\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\n\n/** 未声明的属性落到根元素（div）上 */\nexport interface StickyProps extends PartProps<'div'> {\n  /**\n   * 停住时离顶部多远（CSS 长度）\n   * @default 0\n   */\n  offsetTop?: string;\n  /** 吸顶的内容 */\n  children?: VNodeChild;\n}\n\n/** Sticky 的样式：root */\nexport const stickyStyles = css.create({\n  root: { position: 'sticky', zIndex: 100 },\n});\n\n/** 吸顶（div） */\nexport const Sticky = _component(({ offsetTop = '0px', children, ...rest }: StickyProps) => () => (\n  <div\n    {...mergeAttrs<'div'>({ sx: stickyStyles.root, style: { insetBlockStart: offsetTop } }, rest)}\n  >\n    {children}\n  </div>\n));\n"],"mappings":";;;;;;;AAwBA,IAAa,eAAe,IAAI,OAAO,EACrC,MAAM;CAAE,UAAU;CAAU,QAAQ;AAAI,EAC1C,CAAC;;AAGD,IAAa,SAAS,0BAAW,QAAA,SAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,aAAe,KAAK;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAAe,OAAIC,UAAA,QAAA,MAAA,KAAA;CAAA,aAAoBC,YAAA,OAEpF,WAAkB;EAAE,IAAI,aAAa;EAAM,OAAO,EAAE,iBAAe,UAAA,MAAY;CAAE,GAAG,IAAI,GAAC,CAAA,SAAA,KAAA,CAAA;AAIhG,GAAA;CAAA,MAAA;CAAA,OAAA,CAAA,WAAA;AAAA,CAAA"}

package/dist/navigation/TabBar.d.ts

@@ -0,0 +1,54 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type IconData } from '../base/Icon';
+import { type PartProps } from '../utils/props';
+/** 未声明的属性落到栏（div）上 */
+export interface TabBarProps extends Omit<PartProps<'div', 'role' | 'placeholder'>, 'onChange'> {
+    /** 选中的项；双向绑定写 `_value={x}` */
+    _value?: string;
+    /**
+     * 固定在页面底部
+     * @default true
+     */
+    fixed?: boolean;
+    /**
+     * 固定时在原位置留出同样高的空
+     * @default true
+     */
+    placeholder?: boolean;
+    /**
+     * 顶部的细线
+     * @default true
+     */
+    border?: boolean;
+    /** 换了一项 */
+    onChange?: (name: string) => void;
+    /** 各个 TabBarItem */
+    children?: VNodeChild;
+}
+/** TabBar、TabBarItem 的样式 */
+export declare const tabBarStyles: Readonly<{
+    border: css.CompiledStyles;
+    fixed: css.CompiledStyles;
+    icon: css.CompiledStyles;
+    item: css.CompiledStyles;
+    placeholder: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** 标签栏（div[role=tablist]） */
+export declare const TabBar: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<TabBarProps>;
+/** 未声明的属性落到按钮上 */
+export interface TabBarItemProps extends PartProps<'button', 'role' | 'aria-selected' | 'type' | 'name'> {
+    /** 名字：选中的状态按它记 */
+    name: string;
+    /** 图标 */
+    icon?: IconData;
+    /** 选中时的图标（不给时用 icon，只换成主色） */
+    activeIcon?: IconData;
+    /** 图标右上角的徽标：数字、文字，true 是小红点 */
+    badge?: number | string | boolean;
+    /** 文字 */
+    children?: VNodeChild;
+}
+/** 标签栏的一项（button[role=tab]） */
+export declare const TabBarItem: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<TabBarItemProps>;

package/dist/navigation/TabBar.js

@@ -0,0 +1,138 @@
+import { hasContent, mergeAttrs } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { Badge } from "../display/Badge.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, bindable, childrenProp, createContext, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, isVNode } from "vue";
+//#region src/navigation/TabBar.tsx
+/** 标签栏提供给各项的 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var TabBarContext = createContext("TabBar");
+/** 未声明的属性落到栏（div）上 */
+/** TabBar、TabBarItem 的样式 */
+var tabBarStyles = css.create({
+	root: {
+		boxSizing: "content-box",
+		display: "flex",
+		height: "3.5em",
+		paddingBlockEnd: "env(safe-area-inset-bottom)",
+		backgroundColor: "_surface",
+		fontSize: "_md"
+	},
+	fixed: {
+		position: "fixed",
+		insetBlockEnd: 0,
+		insetInline: 0,
+		zIndex: 1e3
+	},
+	border: {
+		borderBlockStartWidth: "_hairline",
+		borderBlockStartStyle: "solid",
+		borderBlockStartColor: "_border"
+	},
+	placeholder: {
+		height: "calc(3.5em + env(safe-area-inset-bottom))",
+		fontSize: "_md"
+	},
+	item: {
+		flex: "1 1 0",
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: "0.2em",
+		margin: 0,
+		padding: 0,
+		borderWidth: 0,
+		backgroundColor: "transparent",
+		color: {
+			default: "_textMuted",
+			"[aria-selected=\"true\"]": "_accentText"
+		},
+		fontFamily: "inherit",
+		fontSize: "_xs",
+		cursor: "pointer",
+		userSelect: "none"
+	},
+	icon: { fontSize: "1.65em" }
+});
+/** 标签栏（div[role=tablist]） */
+var TabBar = /*#__PURE__*/ _component((_props, _ctx) => {
+	const value = bindable(_props, "_value", () => void 0, _ctx.emit);
+	const fixed = readonlyProp(_props, "fixed", true);
+	const placeholder = readonlyProp(_props, "placeholder", true);
+	const border = readonlyProp(_props, "border", true);
+	const onChange = readonlyProp(_props, "onChange");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	TabBarContext.provide({
+		get value() {
+			return value.value;
+		},
+		select(name) {
+			if (name === value.value) return;
+			value.value = name;
+			onChange.value?.(name);
+		}
+	});
+	return () => {
+		const bar = createVNode("div", mergeAttrs({ sx: [
+			tabBarStyles.root,
+			fixed.value && tabBarStyles.fixed,
+			border.value && tabBarStyles.border
+		] }, rest, { role: "tablist" }), [children.value]);
+		return fixed.value && placeholder.value ? [createVNode("div", mergeAttrs({ sx: tabBarStyles.placeholder }), null), bar] : bar;
+	};
+}, {
+	name: "TabBar",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"fixed",
+		"placeholder",
+		"border",
+		"onChange"
+	]
+});
+/** 未声明的属性落到按钮上 */
+/** 标签栏的一项（button[role=tab]） */
+var TabBarItem = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const name = readonlyProp(_props2, "name");
+	const icon = readonlyProp(_props2, "icon");
+	const activeIcon = readonlyProp(_props2, "activeIcon");
+	const badge = readonlyProp(_props2, "badge");
+	const children = childrenProp(_props2);
+	const rest = restProps(_props2, _ctx2, false);
+	const bar = TabBarContext.inject();
+	return () => {
+		const selected = bar.value === name.value;
+		const current = selected && activeIcon.value || icon.value;
+		const glyph = current && createVNode(Icon, {
+			"icon": current,
+			"sx": tabBarStyles.icon
+		}, null);
+		return createVNode("button", mergeAttrs({ sx: tabBarStyles.item }, rest, {
+			type: "button",
+			role: "tab",
+			"aria-selected": selected ? "true" : "false",
+			onClick: () => bar.select(name.value)
+		}), [glyph && (badge.value === void 0 || badge.value === false ? glyph : createVNode(Badge, {
+			"content": badge.value === true ? void 0 : badge.value,
+			"dot": badge.value === true
+		}, _isSlot(glyph) ? glyph : { default: () => [glyph] })), hasContent(children.value) && createVNode("span", null, [children.value])]);
+	};
+}, {
+	name: "TabBarItem",
+	props: [
+		"name",
+		"icon",
+		"activeIcon",
+		"badge"
+	]
+});
+//#endregion
+export { TabBar, TabBarItem, tabBarStyles };
+
+//# sourceMappingURL=TabBar.js.map

package/dist/navigation/TabBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.js","names":["_isVNode","_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/navigation/TabBar.tsx"],"sourcesContent":["/**\n * 标签栏：页面底部的一排入口（首页、分类、购物车、我的），图标加文字，选中的用主色，可带徽标。\n *\n *   <TabBar _value={tab}>\n *     <TabBarItem name=\"home\" icon={House}>首页</TabBarItem>\n *     <TabBarItem name=\"cart\" icon={ShoppingCart} badge={3}>购物车</TabBarItem>\n *   </TabBar>\n *\n * 默认固定在底部、让出全面屏的安全区，并在原位置留出同样高的空。小程序也有原生的 tabBar（app.json），\n * 这一个是页面里自己画的，样式与 H5 一致。\n */\nimport { _component, createContext } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Icon, type IconData } from '../base/Icon';\nimport { Badge } from '../display/Badge';\nimport { hasContent, mergeAttrs, type PartProps } from '../utils/props';\n\n/** 标签栏提供给各项的 */\ninterface TabBarState {\n  readonly value: string | undefined;\n  select(name: string): void;\n}\n\nconst TabBarContext = createContext<TabBarState>('TabBar');\n\n/** 未声明的属性落到栏（div）上 */\nexport interface TabBarProps extends Omit<PartProps<'div', 'role' | 'placeholder'>, 'onChange'> {\n  /** 选中的项；双向绑定写 `_value={x}` */\n  _value?: string;\n  /**\n   * 固定在页面底部\n   * @default true\n   */\n  fixed?: boolean;\n  /**\n   * 固定时在原位置留出同样高的空\n   * @default true\n   */\n  placeholder?: boolean;\n  /**\n   * 顶部的细线\n   * @default true\n   */\n  border?: boolean;\n  /** 换了一项 */\n  onChange?: (name: string) => void;\n  /** 各个 TabBarItem */\n  children?: VNodeChild;\n}\n\n/** TabBar、TabBarItem 的样式 */\nexport const tabBarStyles = css.create({\n  root: {\n    boxSizing: 'content-box',\n    display: 'flex',\n    height: '3.5em',\n    paddingBlockEnd: 'env(safe-area-inset-bottom)',\n    backgroundColor: '_surface',\n    fontSize: '_md',\n  },\n  fixed: { position: 'fixed', insetBlockEnd: 0, insetInline: 0, zIndex: 1000 },\n  border: {\n    borderBlockStartWidth: '_hairline',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_border',\n  },\n  placeholder: { height: 'calc(3.5em + env(safe-area-inset-bottom))', fontSize: '_md' },\n  item: {\n    flex: '1 1 0',\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '0.2em',\n    margin: 0,\n    padding: 0,\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: { default: '_textMuted', '[aria-selected=\"true\"]': '_accentText' },\n    fontFamily: 'inherit',\n    fontSize: '_xs',\n    cursor: 'pointer',\n    userSelect: 'none',\n  },\n  icon: { fontSize: '1.65em' },\n});\n\n/** 标签栏（div[role=tablist]） */\nexport const TabBar = _component(\n  ({\n    _value: value = _bindable<string | undefined>(undefined),\n    fixed = true,\n    placeholder = true,\n    border = true,\n    onChange,\n    children,\n    ...rest\n  }: TabBarProps) => {\n    TabBarContext.provide({\n      get value() {\n        return value;\n      },\n      select(name) {\n        if (name === value) return;\n        value = name;\n        onChange?.(name);\n      },\n    });\n    return () => {\n      const bar = (\n        <div\n          {...mergeAttrs<'div'>(\n            { sx: [tabBarStyles.root, fixed && tabBarStyles.fixed, border && tabBarStyles.border] },\n            rest,\n            { role: 'tablist' },\n          )}\n        >\n          {children}\n        </div>\n      );\n      return fixed && placeholder\n        ? [<div {...mergeAttrs<'div'>({ sx: tabBarStyles.placeholder })} />, bar]\n        : bar;\n    };\n  },\n);\n\n/** 未声明的属性落到按钮上 */\nexport interface TabBarItemProps extends PartProps<\n  'button',\n  'role' | 'aria-selected' | 'type' | 'name'\n> {\n  /** 名字：选中的状态按它记 */\n  name: string;\n  /** 图标 */\n  icon?: IconData;\n  /** 选中时的图标（不给时用 icon，只换成主色） */\n  activeIcon?: IconData;\n  /** 图标右上角的徽标：数字、文字，true 是小红点 */\n  badge?: number | string | boolean;\n  /** 文字 */\n  children?: VNodeChild;\n}\n\n/** 标签栏的一项（button[role=tab]） */\nexport const TabBarItem = _component(\n  ({ name, icon, activeIcon, badge, children, ...rest }: TabBarItemProps) => {\n    const bar = TabBarContext.inject();\n    return () => {\n      const selected = bar.value === name;\n      const current = (selected && activeIcon) || icon;\n      const glyph = current && <Icon icon={current} sx={tabBarStyles.icon} />;\n      return (\n        <button\n          {...mergeAttrs<'button'>({ sx: tabBarStyles.item }, rest, {\n            type: 'button',\n            role: 'tab',\n            'aria-selected': selected ? 'true' : 'false',\n            onClick: () => bar.select(name),\n          })}\n        >\n          {glyph &&\n            (badge === undefined || badge === false ? (\n              glyph\n            ) : (\n              <Badge content={badge === true ? undefined : badge} dot={badge === true}>\n                {glyph}\n              </Badge>\n            ))}\n          {hasContent(children) && <span>{children}</span>}\n        </button>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/navigation/Tabs.d.ts

@@ -0,0 +1,45 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 未声明的属性落到根元素（div）上 */
+export interface TabsProps extends Omit<PartProps<'div'>, 'onChange'> {
+    /** 选中的标签；双向绑定写 `_value={x}`。不给时选第一个 */
+    _value?: string;
+    /** 左右滑内容切换标签 */
+    swipeable?: boolean;
+    /** 标题栏吸顶 */
+    sticky?: boolean;
+    /** 吸顶时离顶部多远（CSS 长度） */
+    offsetTop?: string;
+    /** 换了标签 */
+    onChange?: (name: string) => void;
+    /** 各个 Tab */
+    children?: VNodeChild;
+    /** 标题栏的部件属性 */
+    propsNav?: PartProps<'div'>;
+}
+/** Tabs、Tab 的样式 */
+export declare const tabsStyles: Readonly<{
+    line: css.CompiledStyles;
+    nav: css.CompiledStyles;
+    panel: css.CompiledStyles;
+    scrollable: css.CompiledStyles;
+    tab: css.CompiledStyles;
+}>;
+/** 标签页（div > 标题栏 + 内容） */
+export declare const Tabs: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<TabsProps>;
+/** 未声明的属性落到内容（div）上 */
+export interface TabProps extends PartProps<'div', 'role' | 'title' | 'hidden'> {
+    /** 名字：选中的状态按它记 */
+    name: string;
+    /** 标题 */
+    title: VNodeChild;
+    /** 不能选 */
+    disabled?: boolean;
+    /** 标题右上角的徽标：数字、文字，true 是小红点 */
+    badge?: number | string | boolean;
+    /** 内容 */
+    children?: VNodeChild;
+}
+/** 标签（div[role=tabpanel]）：第一次选中时才渲染内容，切走后藏起来 */
+export declare const Tab: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<TabProps>;

package/dist/navigation/Tabs.js

@@ -0,0 +1,206 @@
+import { dataAttrs, mergeAttrs } from "../utils/props.js";
+import { Badge } from "../display/Badge.js";
+import { Sticky } from "./Sticky.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, bindable, childrenProp, createContext, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, isVNode, onBeforeUnmount, shallowReactive } from "vue";
+//#region src/navigation/Tabs.tsx
+/** 一个标签登记给标签页的 */
+/** 标签页提供给各个标签的 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var TabsContext = createContext("Tabs");
+/** 未声明的属性落到根元素（div）上 */
+/** Tabs、Tab 的样式 */
+var tabsStyles = css.create({
+	nav: {
+		display: "flex",
+		overflowX: "auto",
+		backgroundColor: "_surface",
+		borderBlockEndWidth: "_hairline",
+		borderBlockEndStyle: "solid",
+		borderBlockEndColor: "_border",
+		scrollbarWidth: "none"
+	},
+	tab: {
+		position: "relative",
+		flex: "1 0 auto",
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		minWidth: "4.5em",
+		height: "2.9em",
+		margin: 0,
+		paddingBlock: 0,
+		paddingInline: "_md",
+		borderWidth: 0,
+		backgroundColor: "transparent",
+		color: {
+			default: "_textMuted",
+			"[aria-selected=\"true\"]": "_text",
+			"[disabled]": "_textDisabled"
+		},
+		fontFamily: "inherit",
+		fontSize: "_md",
+		fontWeight: {
+			default: "_normal",
+			"[aria-selected=\"true\"]": "_semibold"
+		},
+		whiteSpace: "nowrap",
+		cursor: {
+			default: "pointer",
+			"[disabled]": "not-allowed"
+		}
+	},
+	scrollable: { flex: "none" },
+	line: {
+		position: "absolute",
+		insetBlockEnd: 0,
+		insetInlineStart: "50%",
+		width: "1.6em",
+		height: "0.2em",
+		borderRadius: "_full",
+		backgroundColor: "_accent",
+		transform: {
+			default: "translateX(-50%) scaleX(0)",
+			"[data-selected]": "translateX(-50%) scaleX(1)"
+		},
+		transitionProperty: "transform",
+		transitionDuration: "_md",
+		transitionTimingFunction: "_standard"
+	},
+	panel: { display: {
+		default: "block",
+		"[hidden]": "none"
+	} }
+});
+/** 两次触摸之间横向移动多少（px）算滑动 */
+var SWIPE_DISTANCE = 50;
+/** 标签页（div > 标题栏 + 内容） */
+var Tabs = /*#__PURE__*/ _component((_props, _ctx) => {
+	const value = bindable(_props, "_value", () => void 0, _ctx.emit);
+	const swipeable = readonlyProp(_props, "swipeable", false);
+	const sticky = readonlyProp(_props, "sticky", false);
+	const offsetTop = readonlyProp(_props, "offsetTop");
+	const onChange = readonlyProp(_props, "onChange");
+	const children = childrenProp(_props);
+	const propsNav = readonlyProp(_props, "propsNav");
+	const rest = restProps(_props, _ctx, false);
+	const entries = shallowReactive([]);
+	const current = () => value.value ?? entries.find((entry) => !entry.disabled)?.name;
+	const select = (name) => {
+		if (name === current()) return;
+		value.value = name;
+		onChange.value?.(name);
+	};
+	TabsContext.provide({
+		get value() {
+			return current();
+		},
+		register(entry) {
+			entries.push(entry);
+			return () => entries.splice(entries.indexOf(entry), 1);
+		}
+	});
+	let start = null;
+	const onTouchstart = (event) => {
+		const touch = event.touches[0];
+		start = touch ? {
+			x: touch.clientX,
+			y: touch.clientY
+		} : null;
+	};
+	const onTouchend = (event) => {
+		const touch = event.changedTouches[0];
+		if (!start || !touch) return;
+		const dx = touch.clientX - start.x;
+		const dy = touch.clientY - start.y;
+		start = null;
+		if (Math.abs(dx) < SWIPE_DISTANCE || Math.abs(dx) < Math.abs(dy) * 1.5) return;
+		const enabled = entries.filter((entry) => !entry.disabled);
+		const next = enabled[enabled.findIndex((entry) => entry.name === current()) + (dx < 0 ? 1 : -1)];
+		if (next) select(next.name);
+	};
+	return () => {
+		const active = current();
+		const scrollable = entries.length > 4;
+		const nav = createVNode("div", mergeAttrs({ sx: tabsStyles.nav }, propsNav.value, { role: "tablist" }), [entries.map((entry) => {
+			const selected = entry.name === active;
+			const title = entry.badge === void 0 || entry.badge === false ? entry.title : createVNode(Badge, {
+				"content": entry.badge === true ? void 0 : entry.badge,
+				"dot": entry.badge === true
+			}, { default: () => [entry.title] });
+			return createVNode("button", mergeAttrs({ sx: [tabsStyles.tab, scrollable && tabsStyles.scrollable] }, {
+				type: "button",
+				role: "tab",
+				"aria-selected": selected ? "true" : "false",
+				disabled: entry.disabled,
+				onClick: () => select(entry.name)
+			}), [title, createVNode("span", mergeAttrs({ sx: tabsStyles.line }, dataAttrs({ "data-selected": selected })), null)]);
+		})]);
+		return createVNode("div", mergeAttrs({}, rest, swipeable.value ? {
+			onTouchstart,
+			onTouchend
+		} : {}), [sticky.value ? createVNode(Sticky, { "offsetTop": offsetTop.value }, _isSlot(nav) ? nav : { default: () => [nav] }) : nav, children.value]);
+	};
+}, {
+	name: "Tabs",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"swipeable",
+		"sticky",
+		"offsetTop",
+		"onChange",
+		"propsNav"
+	]
+});
+/** 未声明的属性落到内容（div）上 */
+/** 标签（div[role=tabpanel]）：第一次选中时才渲染内容，切走后藏起来 */
+var Tab = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const name = readonlyProp(_props2, "name");
+	const title = readonlyProp(_props2, "title");
+	const disabled = readonlyProp(_props2, "disabled", false);
+	const badge = readonlyProp(_props2, "badge");
+	const children = childrenProp(_props2);
+	const rest = restProps(_props2, _ctx2, false);
+	const tabs = TabsContext.inject();
+	const unregister = tabs.register({
+		get name() {
+			return name.value;
+		},
+		get title() {
+			return title.value;
+		},
+		get disabled() {
+			return disabled.value;
+		},
+		get badge() {
+			return badge.value;
+		}
+	});
+	onBeforeUnmount(unregister);
+	let visited = false;
+	return () => {
+		const active = tabs.value === name.value;
+		if (active) visited = true;
+		if (!visited) return null;
+		return createVNode("div", mergeAttrs({ sx: tabsStyles.panel }, rest, {
+			role: "tabpanel",
+			hidden: !active
+		}), [children.value]);
+	};
+}, {
+	name: "Tab",
+	props: [
+		"name",
+		"title",
+		"disabled",
+		"badge"
+	]
+});
+//#endregion
+export { Tab, Tabs, tabsStyles };
+
+//# sourceMappingURL=Tabs.js.map

package/dist/navigation/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","names":["_isVNode","_vtp_bindable","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/navigation/Tabs.tsx"],"sourcesContent":["/**\n * 标签页：一排标题切换下面的内容（全部、待付款、待收货）。选中的标题下面一条主色短线；可以左右滑内容切换，标题栏可以吸顶。\n *\n *   <Tabs _value={status} swipeable sticky>\n *     <Tab name=\"all\" title=\"全部\">…</Tab>\n *     <Tab name=\"unpaid\" title=\"待付款\" badge={2}>…</Tab>\n *   </Tabs>\n *\n * 内容在第一次切到时才渲染，之后切走只是藏起来（保留滚动、输入的状态）。标题多于 4 个时标题栏可以横向滚动。\n */\nimport { _component, createContext } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onBeforeUnmount, shallowReactive, type VNodeChild } from 'vue';\nimport { Badge } from '../display/Badge';\nimport { dataAttrs, mergeAttrs, type PartProps } from '../utils/props';\nimport { Sticky } from './Sticky';\n\n/** 一个标签登记给标签页的 */\ninterface TabEntry {\n  readonly name: string;\n  readonly title: VNodeChild;\n  readonly disabled: boolean;\n  readonly badge: number | string | boolean | undefined;\n}\n\n/** 标签页提供给各个标签的 */\ninterface TabsState {\n  readonly value: string | undefined;\n  register(entry: TabEntry): () => void;\n}\n\nconst TabsContext = createContext<TabsState>('Tabs');\n\n/** 未声明的属性落到根元素（div）上 */\nexport interface TabsProps extends Omit<PartProps<'div'>, 'onChange'> {\n  /** 选中的标签；双向绑定写 `_value={x}`。不给时选第一个 */\n  _value?: string;\n  /** 左右滑内容切换标签 */\n  swipeable?: boolean;\n  /** 标题栏吸顶 */\n  sticky?: boolean;\n  /** 吸顶时离顶部多远（CSS 长度） */\n  offsetTop?: string;\n  /** 换了标签 */\n  onChange?: (name: string) => void;\n  /** 各个 Tab */\n  children?: VNodeChild;\n  /** 标题栏的部件属性 */\n  propsNav?: PartProps<'div'>;\n}\n\n/** Tabs、Tab 的样式 */\nexport const tabsStyles = css.create({\n  nav: {\n    display: 'flex',\n    overflowX: 'auto',\n    backgroundColor: '_surface',\n    borderBlockEndWidth: '_hairline',\n    borderBlockEndStyle: 'solid',\n    borderBlockEndColor: '_border',\n    scrollbarWidth: 'none',\n  },\n  tab: {\n    position: 'relative',\n    flex: '1 0 auto',\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: '4.5em',\n    height: '2.9em',\n    margin: 0,\n    paddingBlock: 0,\n    paddingInline: '_md',\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: {\n      default: '_textMuted',\n      '[aria-selected=\"true\"]': '_text',\n      '[disabled]': '_textDisabled',\n    },\n    fontFamily: 'inherit',\n    fontSize: '_md',\n    fontWeight: { default: '_normal', '[aria-selected=\"true\"]': '_semibold' },\n    whiteSpace: 'nowrap',\n    cursor: { default: 'pointer', '[disabled]': 'not-allowed' },\n  },\n  // 少于 5 个时平分整行；多了按内容宽度排、可以横向滚动\n  scrollable: { flex: 'none' },\n  line: {\n    position: 'absolute',\n    insetBlockEnd: 0,\n    insetInlineStart: '50%',\n    width: '1.6em',\n    height: '0.2em',\n    borderRadius: '_full',\n    backgroundColor: '_accent',\n    transform: {\n      default: 'translateX(-50%) scaleX(0)',\n      '[data-selected]': 'translateX(-50%) scaleX(1)',\n    },\n    transitionProperty: 'transform',\n    transitionDuration: '_md',\n    transitionTimingFunction: '_standard',\n  },\n  panel: { display: { default: 'block', '[hidden]': 'none' } },\n});\n\n/** 两次触摸之间横向移动多少（px）算滑动 */\nconst SWIPE_DISTANCE = 50;\n\n/** 标签页（div > 标题栏 + 内容） */\nexport const Tabs = _component(\n  ({\n    _value: value = _bindable<string | undefined>(undefined),\n    swipeable = false,\n    sticky = false,\n    offsetTop,\n    onChange,\n    children,\n    propsNav,\n    ...rest\n  }: TabsProps) => {\n    const entries = shallowReactive<TabEntry[]>([]);\n    const current = () => value ?? entries.find((entry) => !entry.disabled)?.name;\n    const select = (name: string) => {\n      if (name === current()) return;\n      value = name;\n      onChange?.(name);\n    };\n    TabsContext.provide({\n      get value() {\n        return current();\n      },\n      register(entry) {\n        entries.push(entry);\n        return () => entries.splice(entries.indexOf(entry), 1);\n      },\n    });\n\n    // 左右滑内容：按下与松手的位置比较（滑动不需要 touchmove，页面照常竖着滚）\n    let start: { x: number; y: number } | null = null;\n    const onTouchstart = (event: TouchEvent) => {\n      const touch = event.touches[0];\n      start = touch ? { x: touch.clientX, y: touch.clientY } : null;\n    };\n    const onTouchend = (event: TouchEvent) => {\n      const touch = event.changedTouches[0];\n      if (!start || !touch) return;\n      const dx = touch.clientX - start.x;\n      const dy = touch.clientY - start.y;\n      start = null;\n      if (Math.abs(dx) < SWIPE_DISTANCE || Math.abs(dx) < Math.abs(dy) * 1.5) return;\n      const enabled = entries.filter((entry) => !entry.disabled);\n      const index = enabled.findIndex((entry) => entry.name === current());\n      const next = enabled[index + (dx < 0 ? 1 : -1)];\n      if (next) select(next.name);\n    };\n\n    return () => {\n      const active = current();\n      const scrollable = entries.length > 4;\n      const nav = (\n        <div {...mergeAttrs<'div'>({ sx: tabsStyles.nav }, propsNav, { role: 'tablist' })}>\n          {entries.map((entry) => {\n            const selected = entry.name === active;\n            const title =\n              entry.badge === undefined || entry.badge === false ? (\n                entry.title\n              ) : (\n                <Badge\n                  content={entry.badge === true ? undefined : entry.badge}\n                  dot={entry.badge === true}\n                >\n                  {entry.title}\n                </Badge>\n              );\n            return (\n              <button\n                {...mergeAttrs<'button'>(\n                  { sx: [tabsStyles.tab, scrollable && tabsStyles.scrollable] },\n                  {\n                    type: 'button',\n                    role: 'tab',\n                    'aria-selected': selected ? 'true' : 'false',\n                    disabled: entry.disabled,\n                    onClick: () => select(entry.name),\n                  },\n                )}\n              >\n                {title}\n                <span\n                  {...mergeAttrs<'span'>(\n                    { sx: tabsStyles.line },\n                    dataAttrs({ 'data-selected': selected }),\n                  )}\n                />\n              </button>\n            );\n          })}\n        </div>\n      );\n      return (\n        <div {...mergeAttrs<'div'>({}, rest, swipeable ? { onTouchstart, onTouchend } : {})}>\n          {sticky ? <Sticky offsetTop={offsetTop}>{nav}</Sticky> : nav}\n          {children}\n        </div>\n      );\n    };\n  },\n);\n\n/** 未声明的属性落到内容（div）上 */\nexport interface TabProps extends PartProps<'div', 'role' | 'title' | 'hidden'> {\n  /** 名字：选中的状态按它记 */\n  name: string;\n  /** 标题 */\n  title: VNodeChild;\n  /** 不能选 */\n  disabled?: boolean;\n  /** 标题右上角的徽标：数字、文字，true 是小红点 */\n  badge?: number | string | boolean;\n  /** 内容 */\n  children?: VNodeChild;\n}\n\n/** 标签（div[role=tabpanel]）：第一次选中时才渲染内容，切走后藏起来 */\nexport const Tab = _component(\n  ({ name, title, disabled = false, badge, children, ...rest }: TabProps) => {\n    const tabs = TabsContext.inject();\n    const unregister = tabs.register({\n      get name() {\n        return name;\n      },\n      get title() {\n        return title;\n      },\n      get disabled() {\n        return disabled;\n      },\n      get badge() {\n        return badge;\n      },\n    });\n    onBeforeUnmount(unregister);\n    let visited = false;\n    return () => {\n      const active = tabs.value === name;\n      if (active) visited = true;\n      if (!visited) return null;\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: tabsStyles.panel }, rest, {\n            role: 'tabpanel',\n            hidden: !active,\n          })}\n        >\n          {children}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/overlay/ActionSheet.d.ts

@@ -0,0 +1,80 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type IconData } from '../base/Icon';
+import { type PartProps } from '../utils/props';
+import { type PopupProps } from './Popup';
+/** 一个操作项 */
+export interface ActionSheetAction {
+    /** 名称 */
+    name: VNodeChild;
+    /** 名称下的说明 */
+    description?: VNodeChild;
+    /** 名称前的图标 */
+    icon?: IconData;
+    /** 色调：删除这类操作用 danger */
+    tone?: 'accent' | 'danger';
+    /** 禁用 */
+    disabled?: boolean;
+    /** 加载中：显示转圈，不能选 */
+    loading?: boolean;
+}
+/** 关闭的原因 */
+export type ActionSheetCloseReason = 'select' | 'cancel' | 'overlay';
+/** 未声明的属性落到面板（弹出层的 div）上 */
+export interface ActionSheetProps extends Omit<PartProps<'div', 'role'>, 'title' | 'onSelect'> {
+    /** 是否打开；双向绑定写 `_open={x}` */
+    _open?: boolean;
+    /** 操作项 */
+    actions?: ActionSheetAction[];
+    /** 标题 */
+    title?: VNodeChild;
+    /** 标题下的说明 */
+    description?: VNodeChild;
+    /**
+     * 显示取消
+     * @default true
+     */
+    showCancel?: boolean;
+    /** 取消的文字；不给时用语言包的"取消" */
+    cancelText?: VNodeChild;
+    /**
+     * 选了之后关闭
+     * @default true
+     */
+    closeOnSelect?: boolean;
+    /**
+     * 点遮罩关闭（等于取消）
+     * @default true
+     */
+    closeOnOverlay?: boolean;
+    /** 选了一项 */
+    onSelect?: (action: ActionSheetAction, index: number) => void;
+    /** 点了取消（或点遮罩关闭） */
+    onCancel?: () => void;
+    /** 关闭时带原因 */
+    onOpenChange?: (open: boolean, details: {
+        reason: ActionSheetCloseReason;
+    }) => void;
+    /** 自定义内容（代替操作项） */
+    children?: VNodeChild;
+    /** 弹出层的部件属性 */
+    propsPopup?: Partial<PopupProps>;
+    /** 每个操作项（button）的部件属性 */
+    propsAction?: PartProps<'button'>;
+    /** 取消（button）的部件属性 */
+    propsCancel?: PartProps<'button'>;
+}
+/** ActionSheet 的样式：header、title、description、action、各色调、actionDescription、gap、cancel */
+export declare const actionSheetStyles: Readonly<{
+    accent: css.CompiledStyles;
+    action: css.CompiledStyles;
+    actionDescription: css.CompiledStyles;
+    danger: css.CompiledStyles;
+    description: css.CompiledStyles;
+    gap: css.CompiledStyles;
+    header: css.CompiledStyles;
+    name: css.CompiledStyles;
+    title: css.CompiledStyles;
+}>;
+/** 动作面板（弹出层 > 标题 + 操作项 + 取消） */
+export declare const ActionSheet: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ActionSheetProps>;