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

package/dist/index.js

@@ -0,0 +1,59 @@
+import { borderWidths, colors, durations, easings, fontSizes, fontWeights, fonts, letterSpacings, lineHeights, opacities, radii, shadows, sizes, space, strokeWidths, t } from "./theme/tokens.js";
+import { darkTheme, systemTheme } from "./theme/dark.js";
+import { enUS, zhCN } from "./config/lang.js";
+import { ConfigContext, useConfig } from "./config/context.js";
+import { dataAttrs, elementProps, hasContent, mergeAttrs, mergePartProps, mergeProps } from "./utils/props.js";
+import { Icon, iconMarkup, iconStyles } from "./base/Icon.js";
+import { Loading, loadingStyles } from "./feedback/Loading.js";
+import { HOST_KEY, isMiniProgram, useHost, webHost } from "./utils/host.js";
+import { Button, buttonRecipe } from "./base/Button.js";
+import { Overlay, overlayStyles, useLockScroll } from "./overlay/Overlay.js";
+import { Popup, popupStyles } from "./overlay/Popup.js";
+import { PrivacyPrompt } from "./capability/PrivacyPrompt.js";
+import { Dialog, dialogState, dialogStyles, settleDialog, showConfirmDialog, showDialog } from "./feedback/Dialog.js";
+import { Notify, closeNotify, notifyState, notifyStyles, showNotify } from "./feedback/Notify.js";
+import { Toast, closeToast, showFailToast, showLoadingToast, showSuccessToast, showToast, toastState, toastStyles } from "./feedback/Toast.js";
+import { ConfigProvider, configProviderStyles } from "./config/ConfigProvider.js";
+import { usePermission } from "./capability/usePermission.js";
+import { useStorage } from "./capability/useStorage.js";
+import { Divider, dividerStyles } from "./layout/Divider.js";
+import { Space, spaceStyles } from "./layout/Space.js";
+import { Cell, CellGroup, cellGroupStyles, cellStyles } from "./display/Cell.js";
+import { Tag, tagRecipe } from "./display/Tag.js";
+import { Badge, badgeStyles } from "./display/Badge.js";
+import { Image, imageStyles } from "./display/Image.js";
+import { SwipeCell, swipeCellStyles } from "./display/SwipeCell.js";
+import { Empty, emptyStyles } from "./display/Empty.js";
+import { NoticeBar, noticeBarStyles } from "./display/NoticeBar.js";
+import { Grid, GridItem, gridStyles } from "./display/Grid.js";
+import { Collapse, CollapseItem, collapseStyles } from "./display/Collapse.js";
+import { Steps, stepsStyles } from "./display/Steps.js";
+import { List, listStyles } from "./display/List.js";
+import { Swiper, SwiperItem, swiperStyles } from "./display/Swiper.js";
+import { IndexAnchor, IndexBar, indexBarStyles } from "./display/IndexBar.js";
+import { NavBar, navBarStyles } from "./navigation/NavBar.js";
+import { TabBar, TabBarItem, tabBarStyles } from "./navigation/TabBar.js";
+import { Sticky, stickyStyles } from "./navigation/Sticky.js";
+import { Tab, Tabs, tabsStyles } from "./navigation/Tabs.js";
+import { BackTop, backTopStyles } from "./navigation/BackTop.js";
+import { Picker, pickerStyles, resolveColumns } from "./picker/Picker.js";
+import { DatePicker, TimePicker } from "./picker/DatePicker.js";
+import { Cascader, cascaderStyles, findPath } from "./picker/Cascader.js";
+import { Calendar, calendarStyles } from "./picker/Calendar.js";
+import { DropdownItem, DropdownMenu, dropdownStyles } from "./picker/DropdownMenu.js";
+import { ActionSheet, actionSheetStyles } from "./overlay/ActionSheet.js";
+import { FormContext, isEmptyValue, useForm, useFormItem } from "./form/context.js";
+import { Form } from "./form/Form.js";
+import { FormItem, formItemStyles, renderFormItem } from "./form/FormItem.js";
+import { Field, fieldStyles } from "./form/Field.js";
+import { Search, searchStyles } from "./form/Search.js";
+import { Switch, switchStyles } from "./form/Switch.js";
+import { Checkbox, CheckboxGroup } from "./form/Checkbox.js";
+import { Radio, RadioGroup } from "./form/Radio.js";
+import { Stepper, stepperStyles } from "./form/Stepper.js";
+import { Rate, rateStyles } from "./form/Rate.js";
+import { Slider, sliderStyles } from "./form/Slider.js";
+import { Uploader, uploaderStyles } from "./form/Uploader.js";
+import { Skeleton, skeletonStyles } from "./feedback/Skeleton.js";
+import { PullRefresh, pullRefreshStyles } from "./feedback/PullRefresh.js";
+export { ActionSheet, BackTop, Badge, Button, Calendar, Cascader, Cell, CellGroup, Checkbox, CheckboxGroup, Collapse, CollapseItem, ConfigContext, ConfigProvider, DatePicker, Dialog, Divider, DropdownItem, DropdownMenu, Empty, Field, Form, FormContext, FormItem, Grid, GridItem, HOST_KEY, Icon, Image, IndexAnchor, IndexBar, List, Loading, NavBar, NoticeBar, Notify, Overlay, Picker, Popup, PrivacyPrompt, PullRefresh, Radio, RadioGroup, Rate, Search, Skeleton, Slider, Space, Stepper, Steps, Sticky, SwipeCell, Swiper, SwiperItem, Switch, Tab, TabBar, TabBarItem, Tabs, Tag, TimePicker, Toast, Uploader, actionSheetStyles, backTopStyles, badgeStyles, borderWidths, buttonRecipe, calendarStyles, cascaderStyles, cellGroupStyles, cellStyles, closeNotify, closeToast, collapseStyles, colors, configProviderStyles, darkTheme, dataAttrs, dialogState, dialogStyles, dividerStyles, dropdownStyles, durations, easings, elementProps, emptyStyles, enUS, fieldStyles, findPath, fontSizes, fontWeights, fonts, formItemStyles, gridStyles, hasContent, iconMarkup, iconStyles, imageStyles, indexBarStyles, isEmptyValue, isMiniProgram, letterSpacings, lineHeights, listStyles, loadingStyles, mergeAttrs, mergePartProps, mergeProps, navBarStyles, noticeBarStyles, notifyState, notifyStyles, opacities, overlayStyles, pickerStyles, popupStyles, pullRefreshStyles, radii, rateStyles, renderFormItem, resolveColumns, searchStyles, settleDialog, shadows, showConfirmDialog, showDialog, showFailToast, showLoadingToast, showNotify, showSuccessToast, showToast, sizes, skeletonStyles, sliderStyles, space, spaceStyles, stepperStyles, stepsStyles, stickyStyles, strokeWidths, swipeCellStyles, swiperStyles, switchStyles, systemTheme, t, tabBarStyles, tabsStyles, tagRecipe, toastState, toastStyles, uploaderStyles, useConfig, useForm, useFormItem, useHost, useLockScroll, usePermission, useStorage, webHost, zhCN };

package/dist/layout/Divider.d.ts

@@ -0,0 +1,34 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 文字的位置 */
+export interface DividerAligns {
+    /** 靠起始边 */
+    start: unknown;
+    /** 居中 */
+    center: unknown;
+    /** 靠结束边 */
+    end: unknown;
+}
+/** 未声明的属性落到根元素（div）上 */
+export interface DividerProps extends PartProps<'div', 'role'> {
+    /** 线上的文字 */
+    children?: VNodeChild;
+    /**
+     * 文字的位置
+     * @default 'center'
+     */
+    align?: keyof DividerAligns;
+    /** 虚线 */
+    dashed?: boolean;
+}
+/** Divider 的样式：root、line、shortLine、dashed、text */
+export declare const dividerStyles: Readonly<{
+    dashed: css.CompiledStyles;
+    line: css.CompiledStyles;
+    root: css.CompiledStyles;
+    shortLine: css.CompiledStyles;
+    text: css.CompiledStyles;
+}>;
+/** 分隔线（div[role=separator] > 线 + 文字 + 线） */
+export declare const Divider: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<DividerProps>;

package/dist/layout/Divider.js

@@ -0,0 +1,55 @@
+import { hasContent, 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/layout/Divider.tsx
+/** 文字的位置 */
+/** 未声明的属性落到根元素（div）上 */
+/** Divider 的样式：root、line、shortLine、dashed、text */
+var dividerStyles = css.create({
+	root: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_lg",
+		marginBlock: "_lg",
+		paddingInline: "_lg",
+		fontSize: "_sm",
+		color: "_textMuted"
+	},
+	line: {
+		flex: "1 1 0",
+		borderBlockStartWidth: "_hairline",
+		borderBlockStartStyle: "solid",
+		borderBlockStartColor: "_border"
+	},
+	shortLine: { flex: "0 0 10%" },
+	dashed: { borderBlockStartStyle: "dashed" },
+	text: { flex: "0 0 auto" }
+});
+/** 分隔线（div[role=separator] > 线 + 文字 + 线） */
+var Divider = /*#__PURE__*/ _component((_props, _ctx) => {
+	const children = childrenProp(_props);
+	const align = readonlyProp(_props, "align", "center");
+	const dashed = readonlyProp(_props, "dashed", false);
+	const rest = restProps(_props, _ctx, false);
+	return () => {
+		const line = (short) => createVNode("div", mergeAttrs({ sx: [
+			dividerStyles.line,
+			short && dividerStyles.shortLine,
+			dashed.value && dividerStyles.dashed
+		] }), null);
+		const labelled = hasContent(children.value);
+		return createVNode("div", mergeAttrs({ sx: dividerStyles.root }, rest, { role: "separator" }), [
+			line(labelled && align.value === "start"),
+			labelled && createVNode("span", mergeAttrs({ sx: dividerStyles.text }), [children.value]),
+			labelled && line(align.value === "end")
+		]);
+	};
+}, {
+	name: "Divider",
+	props: ["align", "dashed"]
+});
+//#endregion
+export { Divider, dividerStyles };
+
+//# sourceMappingURL=Divider.js.map

package/dist/layout/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","names":["_vtp_childrenProp","_vtp_readonlyProp","_vtp_restProps","_createVNode"],"sources":["../../src/layout/Divider.tsx"],"sourcesContent":["/**\n * 分隔线：把内容分成几段；可在线上放文字（居中或靠一边）。\n *\n *   <Divider />\n *   <Divider>以下为历史订单</Divider>\n *   <Divider align=\"start\" dashed>备注</Divider>\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 { hasContent, mergeAttrs, type PartProps } from '../utils/props';\n\n/** 文字的位置 */\nexport interface DividerAligns {\n  /** 靠起始边 */\n  start: unknown;\n  /** 居中 */\n  center: unknown;\n  /** 靠结束边 */\n  end: unknown;\n}\n\n/** 未声明的属性落到根元素（div）上 */\nexport interface DividerProps extends PartProps<'div', 'role'> {\n  /** 线上的文字 */\n  children?: VNodeChild;\n  /**\n   * 文字的位置\n   * @default 'center'\n   */\n  align?: keyof DividerAligns;\n  /** 虚线 */\n  dashed?: boolean;\n}\n\n/** Divider 的样式：root、line、shortLine、dashed、text */\nexport const dividerStyles = css.create({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_lg',\n    marginBlock: '_lg',\n    // 与单元格、分组标题的左右留白对齐\n    paddingInline: '_lg',\n    fontSize: '_sm',\n    color: '_textMuted',\n  },\n  line: {\n    flex: '1 1 0',\n    borderBlockStartWidth: '_hairline',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_border',\n  },\n  // 文字靠边时那一侧的线短一截\n  shortLine: { flex: '0 0 10%' },\n  dashed: { borderBlockStartStyle: 'dashed' },\n  text: { flex: '0 0 auto' },\n});\n\n/** 分隔线（div[role=separator] > 线 + 文字 + 线） */\nexport const Divider = _component(\n  ({ children, align = 'center', dashed = false, ...rest }: DividerProps) =>\n    () => {\n      const line = (short: boolean) => (\n        <div\n          {...mergeAttrs<'div'>({\n            sx: [\n              dividerStyles.line,\n              short && dividerStyles.shortLine,\n              dashed && dividerStyles.dashed,\n            ],\n          })}\n        />\n      );\n      const labelled = hasContent(children);\n      return (\n        <div {...mergeAttrs<'div'>({ sx: dividerStyles.root }, rest, { role: 'separator' })}>\n          {line(labelled && align === 'start')}\n          {labelled && <span {...mergeAttrs<'span'>({ sx: dividerStyles.text })}>{children}</span>}\n          {labelled && line(align === 'end')}\n        </div>\n      );\n    },\n);\n"],"mappings":";;;;;;;;AAoCA,IAAa,gBAAgB,IAAI,OAAO;CACtC,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,KAAK;EACL,aAAa;EAEb,eAAe;EACf,UAAU;EACV,OAAO;CACT;CACA,MAAM;EACJ,MAAM;EACN,uBAAuB;EACvB,uBAAuB;EACvB,uBAAuB;CACzB;CAEA,WAAW,EAAE,MAAM,UAAU;CAC7B,QAAQ,EAAE,uBAAuB,SAAS;CAC1C,MAAM,EAAE,MAAM,WAAW;AAC3B,CAAC;;AAGD,IAAa,UAAU,0BACrB,QAAA,SAAA;CAAA,MAAA,WAAAA,aAAA,MAAA;CAAA,MAAA,QAAAC,aAAA,QAAA,SAAqB,QAAQ;CAAA,MAAA,SAAAA,aAAA,QAAA,UAAW,KAAK;CAAA,MAAK,OAAIC,UAAA,QAAA,MAAA,KAAA;CAAA,aAC9C;EACJ,MAAM,QAAQ,UAAcC,YAAA,OAEpB,WAAkB,EACpB,IAAI;GACF,cAAc;GACd,SAAS,cAAc;GACvB,OAAA,SAAU,cAAc;EAAM,EAElC,CAAC,GAAC,IAAA;EAGN,MAAM,WAAW,WAAU,SAAA,KAAS;EACpC,OAAAA,YAAA,OACW,WAAkB,EAAE,IAAI,cAAc,KAAK,GAAG,MAAM,EAAE,MAAM,YAAY,CAAC,GAAC;GAChF,KAAK,YAAY,MAAA,UAAU,OAAO;GAClC,YAAQA,YAAA,QAAc,WAAmB,EAAE,IAAI,cAAc,KAAK,CAAC,GAAC,CAAA,SAAA,KAAA,CAAA;GACpE,YAAY,KAAK,MAAA,UAAU,KAAK;EAAC,CAAA;CAGxC;AAAC,GAAA;CAAA,MAAA;CAAA,OAAA,CAAA,SAAA,QAAA;AAAA,CACL"}

package/dist/layout/Space.d.ts

@@ -0,0 +1,66 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 排列方向 */
+export interface SpaceDirections {
+    /** 横排（默认换行） */
+    horizontal: unknown;
+    /** 竖排 */
+    vertical: unknown;
+}
+/** 交叉轴上的对齐 */
+export interface SpaceAligns {
+    /** 起始边 */
+    start: unknown;
+    /** 居中 */
+    center: unknown;
+    /** 结束边 */
+    end: unknown;
+    /** 文字基线 */
+    baseline: unknown;
+    /** 拉伸 */
+    stretch: unknown;
+}
+/** 未声明的属性落到根元素（div）上 */
+export interface SpaceProps extends PartProps<'div'> {
+    /**
+     * 方向
+     * @default 'horizontal'
+     */
+    direction?: keyof SpaceDirections;
+    /**
+     * 间距档位（随字号缩放）
+     * @default 'sm'
+     */
+    gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** 交叉轴上的对齐；横排默认居中 */
+    align?: keyof SpaceAligns;
+    /**
+     * 横排时放不下就换行
+     * @default true
+     */
+    wrap?: boolean;
+    /** 占满容器宽度（竖排时子元素也撑满） */
+    fill?: boolean;
+    /** 内容 */
+    children?: VNodeChild;
+}
+/** Space 的样式：root、vertical、wrap、fill、各间距与对齐 */
+export declare const spaceStyles: Readonly<{
+    baseline: css.CompiledStyles;
+    center: css.CompiledStyles;
+    end: css.CompiledStyles;
+    fill: css.CompiledStyles;
+    lg: css.CompiledStyles;
+    md: css.CompiledStyles;
+    root: css.CompiledStyles;
+    sm: css.CompiledStyles;
+    start: css.CompiledStyles;
+    stretch: css.CompiledStyles;
+    vertical: css.CompiledStyles;
+    wrap: css.CompiledStyles;
+    xl: css.CompiledStyles;
+    xs: css.CompiledStyles;
+}>;
+/** 间距（div，弹性布局） */
+export declare const Space: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<SpaceProps>;

package/dist/layout/Space.js

@@ -0,0 +1,65 @@
+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/layout/Space.tsx
+/** 排列方向 */
+/** 交叉轴上的对齐 */
+/** 未声明的属性落到根元素（div）上 */
+/** Space 的样式：root、vertical、wrap、fill、各间距与对齐 */
+var spaceStyles = css.create({
+	root: {
+		display: "inline-flex",
+		alignItems: "center"
+	},
+	vertical: {
+		flexDirection: "column",
+		alignItems: "stretch"
+	},
+	wrap: { flexWrap: "wrap" },
+	fill: {
+		display: "flex",
+		width: "100%"
+	},
+	xs: { gap: "_xs" },
+	sm: { gap: "_sm" },
+	md: { gap: "_md" },
+	lg: { gap: "_lg" },
+	xl: { gap: "_xl" },
+	start: { alignItems: "flex-start" },
+	center: { alignItems: "center" },
+	end: { alignItems: "flex-end" },
+	baseline: { alignItems: "baseline" },
+	stretch: { alignItems: "stretch" }
+});
+/** 间距（div，弹性布局） */
+var Space = /*#__PURE__*/ _component((_props, _ctx) => {
+	const direction = readonlyProp(_props, "direction", "horizontal");
+	const gap = readonlyProp(_props, "gap", "sm");
+	const align = readonlyProp(_props, "align");
+	const wrap = readonlyProp(_props, "wrap", true);
+	const fill = readonlyProp(_props, "fill", false);
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	return () => createVNode("div", mergeAttrs({ sx: [
+		spaceStyles.root,
+		spaceStyles[gap.value],
+		direction.value === "vertical" && spaceStyles.vertical,
+		direction.value === "horizontal" && wrap.value && spaceStyles.wrap,
+		fill.value && spaceStyles.fill,
+		align.value && spaceStyles[align.value]
+	] }, rest), [children.value]);
+}, {
+	name: "Space",
+	props: [
+		"direction",
+		"gap",
+		"align",
+		"wrap",
+		"fill"
+	]
+});
+//#endregion
+export { Space, spaceStyles };
+
+//# sourceMappingURL=Space.js.map

package/dist/layout/Space.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Space.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/layout/Space.tsx"],"sourcesContent":["/**\n * 间距：一组元素横排或竖排，之间留同样的空；横排时可换行。\n *\n *   <Space><Button>甲</Button><Button>乙</Button></Space>\n *   <Space direction=\"vertical\" gap=\"lg\" fill>…</Space>\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/** 排列方向 */\nexport interface SpaceDirections {\n  /** 横排（默认换行） */\n  horizontal: unknown;\n  /** 竖排 */\n  vertical: unknown;\n}\n\n/** 交叉轴上的对齐 */\nexport interface SpaceAligns {\n  /** 起始边 */\n  start: unknown;\n  /** 居中 */\n  center: unknown;\n  /** 结束边 */\n  end: unknown;\n  /** 文字基线 */\n  baseline: unknown;\n  /** 拉伸 */\n  stretch: unknown;\n}\n\n/** 未声明的属性落到根元素（div）上 */\nexport interface SpaceProps extends PartProps<'div'> {\n  /**\n   * 方向\n   * @default 'horizontal'\n   */\n  direction?: keyof SpaceDirections;\n  /**\n   * 间距档位（随字号缩放）\n   * @default 'sm'\n   */\n  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** 交叉轴上的对齐；横排默认居中 */\n  align?: keyof SpaceAligns;\n  /**\n   * 横排时放不下就换行\n   * @default true\n   */\n  wrap?: boolean;\n  /** 占满容器宽度（竖排时子元素也撑满） */\n  fill?: boolean;\n  /** 内容 */\n  children?: VNodeChild;\n}\n\n/** Space 的样式：root、vertical、wrap、fill、各间距与对齐 */\nexport const spaceStyles = css.create({\n  root: { display: 'inline-flex', alignItems: 'center' },\n  vertical: { flexDirection: 'column', alignItems: 'stretch' },\n  wrap: { flexWrap: 'wrap' },\n  fill: { display: 'flex', width: '100%' },\n  xs: { gap: '_xs' },\n  sm: { gap: '_sm' },\n  md: { gap: '_md' },\n  lg: { gap: '_lg' },\n  xl: { gap: '_xl' },\n  start: { alignItems: 'flex-start' },\n  center: { alignItems: 'center' },\n  end: { alignItems: 'flex-end' },\n  baseline: { alignItems: 'baseline' },\n  stretch: { alignItems: 'stretch' },\n});\n\n/** 间距（div，弹性布局） */\nexport const Space = _component(\n  ({\n    direction = 'horizontal',\n    gap = 'sm',\n    align,\n    wrap = true,\n    fill = false,\n    children,\n    ...rest\n  }: SpaceProps) =>\n    () => (\n      <div\n        {...mergeAttrs<'div'>(\n          {\n            sx: [\n              spaceStyles.root,\n              spaceStyles[gap],\n              direction === 'vertical' && spaceStyles.vertical,\n              direction === 'horizontal' && wrap && spaceStyles.wrap,\n              fill && spaceStyles.fill,\n              align && spaceStyles[align],\n            ],\n          },\n          rest,\n        )}\n      >\n        {children}\n      </div>\n    ),\n);\n"],"mappings":";;;;;;;;;AA2DA,IAAa,cAAc,IAAI,OAAO;CACpC,MAAM;EAAE,SAAS;EAAe,YAAY;CAAS;CACrD,UAAU;EAAE,eAAe;EAAU,YAAY;CAAU;CAC3D,MAAM,EAAE,UAAU,OAAO;CACzB,MAAM;EAAE,SAAS;EAAQ,OAAO;CAAO;CACvC,IAAI,EAAE,KAAK,MAAM;CACjB,IAAI,EAAE,KAAK,MAAM;CACjB,IAAI,EAAE,KAAK,MAAM;CACjB,IAAI,EAAE,KAAK,MAAM;CACjB,IAAI,EAAE,KAAK,MAAM;CACjB,OAAO,EAAE,YAAY,aAAa;CAClC,QAAQ,EAAE,YAAY,SAAS;CAC/B,KAAK,EAAE,YAAY,WAAW;CAC9B,UAAU,EAAE,YAAY,WAAW;CACnC,SAAS,EAAE,YAAY,UAAU;AACnC,CAAC;;AAGD,IAAa,QAAQ,0BACnB,QAAA,SAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,aACc,YAAY;CAAA,MAAA,MAAAA,aAAA,QAAA,OAClB,IAAI;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAEH,IAAI;CAAA,MAAA,OAAAA,aAAA,QAAA,QACJ,KAAK;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAET,OAAIC,UAAA,QAAA,MAAA,KAAA;CAAA,aAEPC,YAAA,OAEQ,WACF,EACE,IAAI;EACF,YAAY;EACZ,YAAW,IAAA;EACX,UAAA,UAAc,cAAc,YAAY;EACxC,UAAA,UAAc,gBAAY,KAAA,SAAY,YAAY;EAClD,KAAA,SAAQ,YAAY;EACpB,MAAA,SAAS,YAAW,MAAA;CAAO,EAE/B,GACA,IACF,GAAC,CAAA,SAAA,KAAA,CAAA;AAIJ,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACL"}

package/dist/navigation/BackTop.d.ts

@@ -0,0 +1,29 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 未声明的属性落到按钮上 */
+export interface BackTopProps extends PartProps<'button', 'type'> {
+    /**
+     * 滚过多少（px）才出现
+     * @default 200
+     */
+    offset?: number;
+    /**
+     * 离底部多远（CSS 长度，另加安全区）
+     * @default '6em'
+     */
+    bottom?: string;
+    /**
+     * 离右边多远（CSS 长度）
+     * @default '1.25em'
+     */
+    right?: string;
+    /** 按钮里的内容（代替向上的箭头） */
+    children?: VNodeChild;
+}
+/** BackTop 的样式：root */
+export declare const backTopStyles: Readonly<{
+    root: css.CompiledStyles;
+}>;
+/** 回到顶部（button，渲染到浮层根） */
+export declare const BackTop: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<BackTopProps>;

package/dist/navigation/BackTop.js

@@ -0,0 +1,89 @@
+import { useConfig } from "../config/context.js";
+import { dataAttrs, mergeAttrs } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { useHost } from "../utils/host.js";
+import { usePresence } from "../utils/presence.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { Teleport, createVNode, onBeforeUnmount, onMounted, ref } from "vue";
+import { ArrowUp } from "@lucide/icons";
+//#region src/navigation/BackTop.tsx
+/**
+* 回到顶部：页面往下滚过一段之后，右下角出现一个圆按钮，点了平滑滚回顶部。
+*
+*   <BackTop />
+*   <BackTop offset={800} bottom="5em" />
+*
+* 滚动位置经宿主约定取（H5 是窗口，小程序是页面的 onPageScroll），浮在浮层根里。
+*/
+/** 未声明的属性落到按钮上 */
+/** BackTop 的样式：root */
+var backTopStyles = css.create({ root: {
+	position: "fixed",
+	zIndex: 1500,
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	width: "2.85em",
+	height: "2.85em",
+	margin: 0,
+	padding: 0,
+	borderWidth: 0,
+	borderRadius: "_full",
+	backgroundColor: {
+		default: "_surface",
+		":active": "_fillActive"
+	},
+	boxShadow: "_md",
+	color: "_text",
+	fontSize: "_md",
+	cursor: "pointer",
+	opacity: {
+		default: 0,
+		"[data-state=\"open\"]": 1
+	},
+	transform: {
+		default: "scale(0.8)",
+		"[data-state=\"open\"]": "none"
+	},
+	transitionProperty: "opacity, transform",
+	transitionDuration: "_md"
+} });
+/** 回到顶部（button，渲染到浮层根） */
+var BackTop = /*#__PURE__*/ _component((_props, _ctx) => {
+	const offset = readonlyProp(_props, "offset", 200);
+	const bottom = readonlyProp(_props, "bottom", "6em");
+	const right = readonlyProp(_props, "right", "1.25em");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const host = useHost();
+	const config = useConfig();
+	let shown = ref(false);
+	onMounted(() => shown.value = host.scrollTop() > offset.value);
+	const stop = host.onScroll((top) => shown.value = top > offset.value);
+	onBeforeUnmount(stop);
+	const presence = usePresence(() => shown.value, 240);
+	return () => presence.mounted && createVNode(Teleport, { "to": host.overlayRoot() }, { default: () => [createVNode("button", mergeAttrs({
+		sx: [config.rootSx, backTopStyles.root],
+		style: {
+			insetBlockEnd: `calc(${bottom.value} + env(safe-area-inset-bottom))`,
+			insetInlineEnd: right.value
+		}
+	}, rest, {
+		type: "button",
+		"aria-label": config.lang.backTop,
+		onClick: () => host.scrollTo(0, { smooth: true }),
+		...dataAttrs({ "data-state": presence.visible ? "open" : "closed" })
+	}), [children.value ?? createVNode(Icon, { "icon": ArrowUp }, null)])] });
+}, {
+	name: "BackTop",
+	props: [
+		"offset",
+		"bottom",
+		"right"
+	]
+});
+//#endregion
+export { BackTop, backTopStyles };
+
+//# sourceMappingURL=BackTop.js.map

package/dist/navigation/BackTop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackTop.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_vue_ref","_createVNode"],"sources":["../../src/navigation/BackTop.tsx"],"sourcesContent":["/**\n * 回到顶部：页面往下滚过一段之后，右下角出现一个圆按钮，点了平滑滚回顶部。\n *\n *   <BackTop />\n *   <BackTop offset={800} bottom=\"5em\" />\n *\n * 滚动位置经宿主约定取（H5 是窗口，小程序是页面的 onPageScroll），浮在浮层根里。\n */\nimport { ArrowUp } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Teleport, onBeforeUnmount, onMounted, type VNodeChild } from 'vue';\nimport { Icon } from '../base/Icon';\nimport { useConfig } from '../config/context';\nimport { useHost } from '../utils/host';\nimport { usePresence } from '../utils/presence';\nimport { dataAttrs, mergeAttrs, type PartProps } from '../utils/props';\n\n/** 未声明的属性落到按钮上 */\nexport interface BackTopProps extends PartProps<'button', 'type'> {\n  /**\n   * 滚过多少（px）才出现\n   * @default 200\n   */\n  offset?: number;\n  /**\n   * 离底部多远（CSS 长度，另加安全区）\n   * @default '6em'\n   */\n  bottom?: string;\n  /**\n   * 离右边多远（CSS 长度）\n   * @default '1.25em'\n   */\n  right?: string;\n  /** 按钮里的内容（代替向上的箭头） */\n  children?: VNodeChild;\n}\n\n/** BackTop 的样式：root */\nexport const backTopStyles = css.create({\n  root: {\n    position: 'fixed',\n    zIndex: 1500,\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '2.85em',\n    height: '2.85em',\n    margin: 0,\n    padding: 0,\n    borderWidth: 0,\n    borderRadius: '_full',\n    backgroundColor: { default: '_surface', ':active': '_fillActive' },\n    boxShadow: '_md',\n    color: '_text',\n    fontSize: '_md',\n    cursor: 'pointer',\n    opacity: { default: 0, '[data-state=\"open\"]': 1 },\n    transform: { default: 'scale(0.8)', '[data-state=\"open\"]': 'none' },\n    transitionProperty: 'opacity, transform',\n    transitionDuration: '_md',\n  },\n});\n\n/** 回到顶部（button，渲染到浮层根） */\nexport const BackTop = _component(\n  ({ offset = 200, bottom = '6em', right = '1.25em', children, ...rest }: BackTopProps) => {\n    const host = useHost();\n    const config = useConfig();\n    let shown = _state(false);\n    // 挂上时按当前的位置判断一次（从别的页面返回时页面可能已经滚下去了）\n    onMounted(() => (shown = host.scrollTop() > offset));\n    const stop = host.onScroll((top) => (shown = top > offset));\n    onBeforeUnmount(stop);\n    const presence = usePresence(() => shown, 240);\n    return () =>\n      presence.mounted && (\n        <Teleport to={host.overlayRoot() as never}>\n          <button\n            {...mergeAttrs<'button'>(\n              {\n                sx: [config.rootSx, backTopStyles.root],\n                style: {\n                  insetBlockEnd: `calc(${bottom} + env(safe-area-inset-bottom))`,\n                  insetInlineEnd: right,\n                },\n              },\n              rest,\n              {\n                type: 'button',\n                'aria-label': config.lang.backTop,\n                onClick: () => host.scrollTo(0, { smooth: true }),\n                ...dataAttrs({ 'data-state': presence.visible ? 'open' : 'closed' }),\n              },\n            )}\n          >\n            {children ?? <Icon icon={ArrowUp} />}\n          </button>\n        </Teleport>\n      );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwCA,IAAa,gBAAgB,IAAI,OAAO,EACtC,MAAM;CACJ,UAAU;CACV,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,aAAa;CACb,cAAc;CACd,iBAAiB;EAAE,SAAS;EAAY,WAAW;CAAc;CACjE,WAAW;CACX,OAAO;CACP,UAAU;CACV,QAAQ;CACR,SAAS;EAAE,SAAS;EAAG,yBAAuB;CAAE;CAChD,WAAW;EAAE,SAAS;EAAc,yBAAuB;CAAO;CAClE,oBAAoB;CACpB,oBAAoB;AACtB,EACF,CAAC;;AAGD,IAAa,UAAU,0BACrB,QAAA,SAAyF;CAAA,MAAA,SAAAA,aAAA,QAAA,UAA7E,GAAG;CAAA,MAAA,SAAAA,aAAA,QAAA,UAAW,KAAK;CAAA,MAAA,QAAAA,aAAA,QAAA,SAAU,QAAQ;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAAe,OAAIC,UAAA,QAAA,MAAA,KAAA;CAClE,MAAM,OAAO,QAAQ;CACrB,MAAM,SAAS,UAAU;CACzB,IAAI,QAAKC,IAAU,KAAK;CAExB,gBAAiB,MAAA,QAAQ,KAAK,UAAU,IAAC,OAAA,KAAU;CACnD,MAAM,OAAO,KAAK,UAAU,QAAS,MAAA,QAAQ,MAAG,OAAA,KAAU;CAC1D,gBAAgB,IAAI;CACpB,MAAM,WAAW,kBAAY,MAAA,OAAa,GAAG;CAC7C,aACE,SAAS,WAAOC,YAAA,UAAA,EAAA,MACA,KAAK,YAAY,EAAC,GAAA,EAAA,eAAA,CAAAA,YAAA,UAExB,WACF;EACE,IAAI,CAAC,OAAO,QAAQ,cAAc,IAAI;EACtC,OAAO;GACL,eAAe,QAAA,OAAA,MAAA;GACf,gBAAc,MAAA;EAChB;CACF,GACA,MACA;EACE,MAAM;EACN,cAAc,OAAO,KAAK;EAC1B,eAAe,KAAK,SAAS,GAAG,EAAE,QAAQ,KAAK,CAAC;EAChD,GAAG,UAAU,EAAE,cAAc,SAAS,UAAU,SAAS,SAAS,CAAC;CACrE,CACF,GAAC,CAEA,SAAA,SAAAA,YAAA,MAAA,EAAA,QAAwB,QAAO,GAAA,IAAA,CAAI,CAAA,CAAA,EAAA,CAAA;AAI9C,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/navigation/NavBar.d.ts

@@ -0,0 +1,46 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 未声明的属性落到根元素（div）上 */
+export interface NavBarProps extends PartProps<'div', 'title' | 'placeholder'> {
+    /** 标题 */
+    title?: VNodeChild;
+    /** 左边显示返回箭头 */
+    leftArrow?: boolean;
+    /** 左边的文字（箭头后面） */
+    left?: VNodeChild;
+    /** 右边的内容（文字、图标按钮） */
+    right?: VNodeChild;
+    /** 固定在页面顶部 */
+    fixed?: boolean;
+    /** 固定时在原位置留出同样高的空 */
+    placeholder?: boolean;
+    /**
+     * 底部的细线
+     * @default true
+     */
+    border?: boolean;
+    /** 点了左边 */
+    onClickLeft?: (event: Event) => void;
+    /** 点了右边 */
+    onClickRight?: (event: Event) => void;
+    /** 左边按钮的部件属性 */
+    propsLeft?: PartProps<'button'>;
+    /** 右边按钮的部件属性 */
+    propsRight?: PartProps<'button'>;
+}
+/** NavBar 的样式：root、fixed、border、bar、title、side、left、right、placeholder */
+export declare const navBarStyles: Readonly<{
+    arrow: css.CompiledStyles;
+    bar: css.CompiledStyles;
+    border: css.CompiledStyles;
+    fixed: css.CompiledStyles;
+    left: css.CompiledStyles;
+    placeholder: css.CompiledStyles;
+    right: css.CompiledStyles;
+    root: css.CompiledStyles;
+    side: css.CompiledStyles;
+    title: css.CompiledStyles;
+}>;
+/** 导航栏（div > 左 + 标题 + 右） */
+export declare const NavBar: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<NavBarProps>;

package/dist/navigation/NavBar.js

@@ -0,0 +1,141 @@
+import { useConfig } from "../config/context.js";
+import { hasContent, mergeAttrs } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode } from "vue";
+import { ChevronLeft } from "@lucide/icons";
+//#region src/navigation/NavBar.tsx
+/**
+* 导航栏：页面顶部的一条，中间标题，左边返回，右边操作。H5 页面用；小程序有原生的导航栏，自定义导航栏（navigationStyle: custom）时也可以用它。
+*
+*   <NavBar title="订单详情" leftArrow onClickLeft={() => history.back()} />
+*   <NavBar title="购物车" right="编辑" onClickRight={edit} fixed placeholder />
+*
+* fixed 时固定在顶部并让出刘海屏的安全区；placeholder 在原位置留出同样高的空，下面的内容不被盖住。
+*/
+/** 未声明的属性落到根元素（div）上 */
+/** NavBar 的样式：root、fixed、border、bar、title、side、left、right、placeholder */
+var navBarStyles = css.create({
+	root: {
+		backgroundColor: "_surface",
+		color: "_text"
+	},
+	fixed: {
+		position: "fixed",
+		insetBlockStart: 0,
+		insetInline: 0,
+		zIndex: 1e3,
+		paddingBlockStart: "env(safe-area-inset-top)"
+	},
+	border: {
+		borderBlockEndWidth: "_hairline",
+		borderBlockEndStyle: "solid",
+		borderBlockEndColor: "_border"
+	},
+	bar: {
+		position: "relative",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		height: "3.15em",
+		fontSize: "_md"
+	},
+	title: {
+		maxWidth: "60%",
+		overflow: "hidden",
+		whiteSpace: "nowrap",
+		textOverflow: "ellipsis",
+		fontSize: "_lg",
+		fontWeight: "_semibold"
+	},
+	side: {
+		position: "absolute",
+		insetBlock: 0,
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "0.15em",
+		margin: 0,
+		paddingBlock: 0,
+		paddingInline: "_lg",
+		borderWidth: 0,
+		backgroundColor: "transparent",
+		color: {
+			default: "_accentText",
+			":active": "_accentActive"
+		},
+		fontFamily: "inherit",
+		fontSize: "inherit",
+		cursor: "pointer"
+	},
+	left: { insetInlineStart: 0 },
+	right: { insetInlineEnd: 0 },
+	arrow: {
+		fontSize: "1.4em",
+		marginInlineStart: "-0.3em"
+	},
+	placeholder: {
+		height: "calc(3.15em + env(safe-area-inset-top))",
+		fontSize: "_md"
+	}
+});
+/** 导航栏（div > 左 + 标题 + 右） */
+var NavBar = /*#__PURE__*/ _component((_props, _ctx) => {
+	const title = readonlyProp(_props, "title");
+	const leftArrow = readonlyProp(_props, "leftArrow", false);
+	const left = readonlyProp(_props, "left");
+	const right = readonlyProp(_props, "right");
+	const fixed = readonlyProp(_props, "fixed", false);
+	const placeholder = readonlyProp(_props, "placeholder", false);
+	const border = readonlyProp(_props, "border", true);
+	const onClickLeft = readonlyProp(_props, "onClickLeft");
+	const onClickRight = readonlyProp(_props, "onClickRight");
+	const propsLeft = readonlyProp(_props, "propsLeft");
+	const propsRight = readonlyProp(_props, "propsRight");
+	const rest = restProps(_props, _ctx, true);
+	const config = useConfig();
+	return () => {
+		const bar = createVNode("div", mergeAttrs({ sx: [
+			navBarStyles.root,
+			fixed.value && navBarStyles.fixed,
+			border.value && navBarStyles.border
+		] }, rest), [createVNode("div", mergeAttrs({ sx: navBarStyles.bar }), [
+			(leftArrow.value || hasContent(left.value)) && createVNode("button", mergeAttrs({ sx: [navBarStyles.side, navBarStyles.left] }, propsLeft.value, {
+				type: "button",
+				"aria-label": hasContent(left.value) ? void 0 : config.lang.back,
+				onClick: (event) => onClickLeft.value?.(event)
+			}), [leftArrow.value && createVNode(Icon, {
+				"icon": ChevronLeft,
+				"sx": navBarStyles.arrow
+			}, null), left.value]),
+			hasContent(title.value) && createVNode("div", mergeJsxProps(mergeAttrs({ sx: navBarStyles.title }), {
+				"role": "heading",
+				"aria-level": 1
+			}), [title.value]),
+			hasContent(right.value) && createVNode("button", mergeAttrs({ sx: [navBarStyles.side, navBarStyles.right] }, propsRight.value, {
+				type: "button",
+				onClick: (event) => onClickRight.value?.(event)
+			}), [right.value])
+		])]);
+		return fixed.value && placeholder.value ? [createVNode("div", mergeAttrs({ sx: navBarStyles.placeholder }), null), bar] : bar;
+	};
+}, {
+	name: "NavBar",
+	props: [
+		"title",
+		"leftArrow",
+		"left",
+		"right",
+		"fixed",
+		"placeholder",
+		"border",
+		"onClickLeft",
+		"onClickRight",
+		"propsLeft",
+		"propsRight"
+	]
+});
+//#endregion
+export { NavBar, navBarStyles };
+
+//# sourceMappingURL=NavBar.js.map

package/dist/navigation/NavBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBar.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/navigation/NavBar.tsx"],"sourcesContent":["/**\n * 导航栏：页面顶部的一条，中间标题，左边返回，右边操作。H5 页面用；小程序有原生的导航栏，自定义导航栏（navigationStyle: custom）时也可以用它。\n *\n *   <NavBar title=\"订单详情\" leftArrow onClickLeft={() => history.back()} />\n *   <NavBar title=\"购物车\" right=\"编辑\" onClickRight={edit} fixed placeholder />\n *\n * fixed 时固定在顶部并让出刘海屏的安全区；placeholder 在原位置留出同样高的空，下面的内容不被盖住。\n */\nimport { ChevronLeft } from '@lucide/icons';\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 { Icon } from '../base/Icon';\nimport { useConfig } from '../config/context';\nimport { hasContent, mergeAttrs, type PartProps } from '../utils/props';\n\n/** 未声明的属性落到根元素（div）上 */\nexport interface NavBarProps extends PartProps<'div', 'title' | 'placeholder'> {\n  /** 标题 */\n  title?: VNodeChild;\n  /** 左边显示返回箭头 */\n  leftArrow?: boolean;\n  /** 左边的文字（箭头后面） */\n  left?: VNodeChild;\n  /** 右边的内容（文字、图标按钮） */\n  right?: VNodeChild;\n  /** 固定在页面顶部 */\n  fixed?: boolean;\n  /** 固定时在原位置留出同样高的空 */\n  placeholder?: boolean;\n  /**\n   * 底部的细线\n   * @default true\n   */\n  border?: boolean;\n  /** 点了左边 */\n  onClickLeft?: (event: Event) => void;\n  /** 点了右边 */\n  onClickRight?: (event: Event) => void;\n  /** 左边按钮的部件属性 */\n  propsLeft?: PartProps<'button'>;\n  /** 右边按钮的部件属性 */\n  propsRight?: PartProps<'button'>;\n}\n\n/** NavBar 的样式：root、fixed、border、bar、title、side、left、right、placeholder */\nexport const navBarStyles = css.create({\n  root: { backgroundColor: '_surface', color: '_text' },\n  fixed: {\n    position: 'fixed',\n    insetBlockStart: 0,\n    insetInline: 0,\n    zIndex: 1000,\n    paddingBlockStart: 'env(safe-area-inset-top)',\n  },\n  border: {\n    borderBlockEndWidth: '_hairline',\n    borderBlockEndStyle: 'solid',\n    borderBlockEndColor: '_border',\n  },\n  bar: {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    height: '3.15em',\n    fontSize: '_md',\n  },\n  title: {\n    maxWidth: '60%',\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n    textOverflow: 'ellipsis',\n    fontSize: '_lg',\n    fontWeight: '_semibold',\n  },\n  side: {\n    position: 'absolute',\n    insetBlock: 0,\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '0.15em',\n    margin: 0,\n    paddingBlock: 0,\n    paddingInline: '_lg',\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: { default: '_accentText', ':active': '_accentActive' },\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    cursor: 'pointer',\n  },\n  left: { insetInlineStart: 0 },\n  right: { insetInlineEnd: 0 },\n  arrow: { fontSize: '1.4em', marginInlineStart: '-0.3em' },\n  placeholder: { height: 'calc(3.15em + env(safe-area-inset-top))', fontSize: '_md' },\n});\n\n/** 导航栏（div > 左 + 标题 + 右） */\nexport const NavBar = _component(\n  ({\n    title,\n    leftArrow = false,\n    left,\n    right,\n    fixed = false,\n    placeholder = false,\n    border = true,\n    onClickLeft,\n    onClickRight,\n    propsLeft,\n    propsRight,\n    ...rest\n  }: NavBarProps) => {\n    const config = useConfig();\n    return () => {\n      const bar = (\n        <div\n          {...mergeAttrs<'div'>(\n            { sx: [navBarStyles.root, fixed && navBarStyles.fixed, border && navBarStyles.border] },\n            rest,\n          )}\n        >\n          <div {...mergeAttrs<'div'>({ sx: navBarStyles.bar })}>\n            {(leftArrow || hasContent(left)) && (\n              <button\n                {...mergeAttrs<'button'>(\n                  { sx: [navBarStyles.side, navBarStyles.left] },\n                  propsLeft,\n                  {\n                    type: 'button',\n                    // 只有箭头时按钮没有文字，给读屏一个名称\n                    'aria-label': hasContent(left) ? undefined : config.lang.back,\n                    onClick: (event: Event) => onClickLeft?.(event),\n                  },\n                )}\n              >\n                {leftArrow && <Icon icon={ChevronLeft} sx={navBarStyles.arrow} />}\n                {left}\n              </button>\n            )}\n            {hasContent(title) && (\n              <div {...mergeAttrs<'div'>({ sx: navBarStyles.title })} role=\"heading\" aria-level={1}>\n                {title}\n              </div>\n            )}\n            {hasContent(right) && (\n              <button\n                {...mergeAttrs<'button'>(\n                  { sx: [navBarStyles.side, navBarStyles.right] },\n                  propsRight,\n                  {\n                    type: 'button',\n                    onClick: (event: Event) => onClickRight?.(event),\n                  },\n                )}\n              >\n                {right}\n              </button>\n            )}\n          </div>\n        </div>\n      );\n      return fixed && placeholder\n        ? [<div {...mergeAttrs<'div'>({ sx: navBarStyles.placeholder })} />, bar]\n        : bar;\n    };\n  },\n);\n"],"mappings":"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"}