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

package/dist/form/Uploader.js

@@ -0,0 +1,207 @@
+import { useConfig } from "../config/context.js";
+import { dataAttrs, hasContent, mergeAttrs } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { Loading } from "../feedback/Loading.js";
+import { useHost } from "../utils/host.js";
+import { Image } from "../display/Image.js";
+import { useForm } from "./context.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, reactive } from "vue";
+import { Camera, CircleX, X } from "@lucide/icons";
+//#region src/form/Uploader.tsx
+/**
+* 图片上传：已选的图片排成方格（可删除、显示上传中与失败），最后一格点了选图（H5 是文件选择，小程序是相册或拍照）。
+* 只管选图与展示；上传由使用方在 onRead 里做，改文件的 status 显示进度。
+*
+*   <Uploader _value={photos} maxCount={6} onRead={(files) => files.forEach(upload)} />
+*
+*   async function upload(file: UploaderFile) {
+*     file.status = 'uploading';
+*     try { file.url = await api.upload(file.file!); file.status = 'done'; }
+*     catch { file.status = 'failed'; file.message = '上传失败'; }
+*   }
+*/
+/** 一个文件 */
+/** 未声明的属性落到根元素（div）上 */
+/** Uploader 的样式：root、item、mask、remove、upload */
+var uploaderStyles = css.create({
+	root: {
+		display: "flex",
+		flexWrap: "wrap",
+		gap: "0.5em"
+	},
+	item: {
+		position: "relative",
+		flex: "none",
+		overflow: "hidden",
+		borderRadius: "_md"
+	},
+	mask: {
+		position: "absolute",
+		inset: 0,
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: "0.25em",
+		backgroundColor: "_overlay",
+		color: "#fff",
+		fontSize: "_xs"
+	},
+	remove: {
+		position: "absolute",
+		insetBlockStart: 0,
+		insetInlineEnd: 0,
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		width: "1.4em",
+		height: "1.4em",
+		margin: 0,
+		padding: 0,
+		borderWidth: 0,
+		borderEndStartRadius: "_md",
+		backgroundColor: "_overlay",
+		color: "#fff",
+		fontSize: "_xs",
+		cursor: "pointer"
+	},
+	upload: {
+		boxSizing: "border-box",
+		flex: "none",
+		display: "inline-flex",
+		flexDirection: "column",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: "0.3em",
+		margin: 0,
+		padding: "0.25em",
+		borderWidth: 0,
+		borderRadius: "_md",
+		backgroundColor: {
+			default: "_fill",
+			":active:not([disabled])": "_fillActive"
+		},
+		color: "_textMuted",
+		fontFamily: "inherit",
+		fontSize: "_xs",
+		cursor: {
+			default: "pointer",
+			"[disabled]": "not-allowed"
+		},
+		opacity: {
+			default: 1,
+			"[disabled]": "_disabled"
+		}
+	},
+	uploadIcon: { fontSize: "1.9em" }
+});
+/** 图片上传（div > 预览的方格 + 选图的一格） */
+var Uploader = /*#__PURE__*/ _component((_props, _ctx) => {
+	const value = bindable(_props, "_value", () => [], _ctx.emit);
+	const maxCount = readonlyProp(_props, "maxCount", () => Number.POSITIVE_INFINITY);
+	const maxSize = readonlyProp(_props, "maxSize");
+	const multiple = readonlyProp(_props, "multiple", true);
+	const deletable = readonlyProp(_props, "deletable", true);
+	const disabled = readonlyProp(_props, "disabled");
+	const previewSize = readonlyProp(_props, "previewSize", "5em");
+	const uploadText = readonlyProp(_props, "uploadText");
+	const onRead = readonlyProp(_props, "onRead");
+	const onOversize = readonlyProp(_props, "onOversize");
+	const onDelete = readonlyProp(_props, "onDelete");
+	const onPreview = readonlyProp(_props, "onPreview");
+	const propsItem = readonlyProp(_props, "propsItem");
+	const propsUpload = readonlyProp(_props, "propsUpload");
+	const rest = restProps(_props, _ctx, true);
+	const config = useConfig();
+	const host = useHost();
+	const form = useForm();
+	const isDisabled = () => disabled.value ?? form?.disabled ?? false;
+	const choose = async () => {
+		const room = maxCount.value - value.value.length;
+		if (room <= 0) return;
+		const files = (await host.chooseImages({ count: multiple.value ? Math.min(room, 9) : 1 })).slice(0, room).map((image) => reactive({
+			url: image.url,
+			file: image.file,
+			size: image.size
+		}));
+		const oversize = maxSize.value === void 0 ? [] : files.filter((file) => (file.size ?? 0) > maxSize.value);
+		const accepted = files.filter((file) => !oversize.includes(file));
+		if (oversize.length) onOversize.value?.(oversize);
+		if (!accepted.length) return;
+		value.value = [...value.value, ...accepted];
+		onRead.value?.(accepted);
+	};
+	const remove = (index) => {
+		const file = value.value[index];
+		value.value = value.value.filter((_, position) => position !== index);
+		onDelete.value?.(file, index);
+	};
+	return () => {
+		const off = isDisabled();
+		const size = {
+			width: previewSize.value,
+			height: previewSize.value
+		};
+		return createVNode("div", mergeAttrs({ sx: uploaderStyles.root }, rest, dataAttrs({ "data-disabled": off })), [value.value.map((file, index) => createVNode("div", mergeAttrs({
+			sx: uploaderStyles.item,
+			style: size
+		}, propsItem.value, {
+			onClick: () => onPreview.value?.(file, index),
+			...dataAttrs({ "data-status": file.status })
+		}), [
+			createVNode(Image, {
+				"src": file.url,
+				"width": previewSize.value,
+				"height": previewSize.value,
+				"fit": "cover"
+			}, null),
+			(file.status === "uploading" || file.status === "failed") && createVNode("div", mergeAttrs({ sx: uploaderStyles.mask }), [file.status === "uploading" ? createVNode(Loading, { "size": 20 }, null) : createVNode(Icon, {
+				"icon": CircleX,
+				"size": 20
+			}, null), hasContent(file.message) && createVNode("span", null, [file.message])]),
+			deletable.value && !off && file.status !== "uploading" && createVNode("button", mergeJsxProps(mergeAttrs({ sx: uploaderStyles.remove }), {
+				"type": "button",
+				"aria-label": config.lang.remove,
+				"onClick": (event) => {
+					event.stopPropagation();
+					remove(index);
+				}
+			}), [createVNode(Icon, { "icon": X }, null)])
+		])), value.value.length < maxCount.value && createVNode("button", mergeAttrs({
+			sx: uploaderStyles.upload,
+			style: size
+		}, propsUpload.value, {
+			type: "button",
+			disabled: off,
+			onClick: () => void choose()
+		}), [createVNode(Icon, {
+			"icon": Camera,
+			"sx": uploaderStyles.uploadIcon
+		}, null), uploadText.value ?? config.lang.upload])]);
+	};
+}, {
+	name: "Uploader",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"maxCount",
+		"maxSize",
+		"multiple",
+		"deletable",
+		"disabled",
+		"previewSize",
+		"uploadText",
+		"onRead",
+		"onOversize",
+		"onDelete",
+		"onPreview",
+		"propsItem",
+		"propsUpload"
+	]
+});
+//#endregion
+export { Uploader, uploaderStyles };
+
+//# sourceMappingURL=Uploader.js.map

package/dist/form/Uploader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Uploader.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/form/Uploader.tsx"],"sourcesContent":["/**\n * 图片上传：已选的图片排成方格（可删除、显示上传中与失败），最后一格点了选图（H5 是文件选择，小程序是相册或拍照）。\n * 只管选图与展示；上传由使用方在 onRead 里做，改文件的 status 显示进度。\n *\n *   <Uploader _value={photos} maxCount={6} onRead={(files) => files.forEach(upload)} />\n *\n *   async function upload(file: UploaderFile) {\n *     file.status = 'uploading';\n *     try { file.url = await api.upload(file.file!); file.status = 'done'; }\n *     catch { file.status = 'failed'; file.message = '上传失败'; }\n *   }\n */\nimport { Camera, CircleX, X } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { reactive, type VNodeChild } from 'vue';\nimport { Icon } from '../base/Icon';\nimport { useConfig } from '../config/context';\nimport { Image } from '../display/Image';\nimport { Loading } from '../feedback/Loading';\nimport { useHost } from '../utils/host';\nimport { dataAttrs, hasContent, mergeAttrs, type PartProps } from '../utils/props';\nimport { useForm } from './context';\n\n/** 一个文件 */\nexport interface UploaderFile {\n  /** 预览（及上传完）的地址 */\n  url: string;\n  /** H5 里选到的 File，上传时用；小程序里没有（用 url 这个临时路径上传） */\n  file?: File;\n  /** 字节数 */\n  size?: number;\n  /** 上传的状态；不给时是已完成 */\n  status?: 'uploading' | 'failed' | 'done';\n  /** 状态下面的文字（“上传中”“上传失败”） */\n  message?: string;\n}\n\n/** 未声明的属性落到根元素（div）上 */\nexport interface UploaderProps extends Omit<PartProps<'div'>, 'onChange'> {\n  /** 已选的文件；双向绑定写 `_value={x}` */\n  _value?: UploaderFile[];\n  /** 最多几张 */\n  maxCount?: number;\n  /** 单张最大字节数；超过的不加进来，交给 onOversize */\n  maxSize?: number;\n  /**\n   * 一次可以选多张\n   * @default true\n   */\n  multiple?: boolean;\n  /**\n   * 能删除\n   * @default true\n   */\n  deletable?: boolean;\n  /** 禁用 */\n  disabled?: boolean;\n  /**\n   * 方格的边长（CSS 长度）\n   * @default '5em'\n   */\n  previewSize?: string;\n  /** 选图那一格的文字；不给时用语言包的“上传图片” */\n  uploadText?: VNodeChild;\n  /** 选好了：新加的文件（已经在 _value 里，是响应式的，改 status 会刷新） */\n  onRead?: (files: UploaderFile[]) => void;\n  /** 有文件超过 maxSize */\n  onOversize?: (files: UploaderFile[]) => void;\n  /** 删除了一张 */\n  onDelete?: (file: UploaderFile, index: number) => void;\n  /** 点了一张预览 */\n  onPreview?: (file: UploaderFile, index: number) => void;\n  /** 每一格预览的部件属性 */\n  propsItem?: PartProps<'div'>;\n  /** 选图那一格的部件属性 */\n  propsUpload?: PartProps<'button'>;\n}\n\n/** Uploader 的样式：root、item、mask、remove、upload */\nexport const uploaderStyles = css.create({\n  root: { display: 'flex', flexWrap: 'wrap', gap: '0.5em' },\n  item: { position: 'relative', flex: 'none', overflow: 'hidden', borderRadius: '_md' },\n  mask: {\n    position: 'absolute',\n    inset: 0,\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '0.25em',\n    // 盖在图片上的深色层：两套主题里都是深底白字\n    backgroundColor: '_overlay',\n    color: '#fff',\n    fontSize: '_xs',\n  },\n  remove: {\n    position: 'absolute',\n    insetBlockStart: 0,\n    insetInlineEnd: 0,\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '1.4em',\n    height: '1.4em',\n    margin: 0,\n    padding: 0,\n    borderWidth: 0,\n    borderEndStartRadius: '_md',\n    backgroundColor: '_overlay',\n    color: '#fff',\n    fontSize: '_xs',\n    cursor: 'pointer',\n  },\n  upload: {\n    boxSizing: 'border-box',\n    flex: 'none',\n    display: 'inline-flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '0.3em',\n    margin: 0,\n    padding: '0.25em',\n    borderWidth: 0,\n    borderRadius: '_md',\n    backgroundColor: { default: '_fill', ':active:not([disabled])': '_fillActive' },\n    color: '_textMuted',\n    fontFamily: 'inherit',\n    fontSize: '_xs',\n    cursor: { default: 'pointer', '[disabled]': 'not-allowed' },\n    opacity: { default: 1, '[disabled]': '_disabled' },\n  },\n  uploadIcon: { fontSize: '1.9em' },\n});\n\n/** 图片上传（div > 预览的方格 + 选图的一格） */\nexport const Uploader = _component(\n  ({\n    _value: value = _bindable<UploaderFile[]>([]),\n    maxCount = Number.POSITIVE_INFINITY,\n    maxSize,\n    multiple = true,\n    deletable = true,\n    disabled,\n    previewSize = '5em',\n    uploadText,\n    onRead,\n    onOversize,\n    onDelete,\n    onPreview,\n    propsItem,\n    propsUpload,\n    ...rest\n  }: UploaderProps) => {\n    const config = useConfig();\n    const host = useHost();\n    const form = useForm();\n    const isDisabled = () => disabled ?? form?.disabled ?? false;\n\n    const choose = async () => {\n      const room = maxCount - value.length;\n      if (room <= 0) return;\n      const chosen = await host.chooseImages({ count: multiple ? Math.min(room, 9) : 1 });\n      // 响应式：使用方在 onRead 里改 status、url 会刷新\n      const files = chosen\n        .slice(0, room)\n        .map((image) =>\n          reactive<UploaderFile>({ url: image.url, file: image.file, size: image.size }),\n        );\n      const oversize =\n        maxSize === undefined ? [] : files.filter((file) => (file.size ?? 0) > maxSize);\n      const accepted = files.filter((file) => !oversize.includes(file));\n      if (oversize.length) onOversize?.(oversize);\n      if (!accepted.length) return;\n      value = [...value, ...accepted];\n      onRead?.(accepted);\n    };\n    const remove = (index: number) => {\n      const file = value[index]!;\n      value = value.filter((_, position) => position !== index);\n      onDelete?.(file, index);\n    };\n\n    return () => {\n      const off = isDisabled();\n      const size = { width: previewSize, height: previewSize };\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { sx: uploaderStyles.root },\n            rest,\n            dataAttrs({ 'data-disabled': off }),\n          )}\n        >\n          {value.map((file, index) => (\n            <div\n              {...mergeAttrs<'div'>({ sx: uploaderStyles.item, style: size }, propsItem, {\n                onClick: () => onPreview?.(file, index),\n                ...dataAttrs({ 'data-status': file.status }),\n              })}\n            >\n              <Image src={file.url} width={previewSize} height={previewSize} fit=\"cover\" />\n              {(file.status === 'uploading' || file.status === 'failed') && (\n                <div {...mergeAttrs<'div'>({ sx: uploaderStyles.mask })}>\n                  {file.status === 'uploading' ? (\n                    <Loading size={20} />\n                  ) : (\n                    <Icon icon={CircleX} size={20} />\n                  )}\n                  {hasContent(file.message) && <span>{file.message}</span>}\n                </div>\n              )}\n              {deletable && !off && file.status !== 'uploading' && (\n                <button\n                  {...mergeAttrs<'button'>({ sx: uploaderStyles.remove })}\n                  type=\"button\"\n                  aria-label={config.lang.remove}\n                  onClick={(event: Event) => {\n                    // 不当成点了预览\n                    event.stopPropagation();\n                    remove(index);\n                  }}\n                >\n                  <Icon icon={X} />\n                </button>\n              )}\n            </div>\n          ))}\n          {value.length < maxCount && (\n            <button\n              {...mergeAttrs<'button'>({ sx: uploaderStyles.upload, style: size }, propsUpload, {\n                type: 'button',\n                disabled: off,\n                onClick: () => void choose(),\n              })}\n            >\n              <Icon icon={Camera} sx={uploaderStyles.uploadIcon} />\n              {uploadText ?? config.lang.upload}\n            </button>\n          )}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/form/choice.d.ts

@@ -0,0 +1,42 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 选框的形状 */
+export interface ChoiceShapes {
+    /** 圆（默认） */
+    round: unknown;
+    /** 圆角方块 */
+    square: unknown;
+}
+/** 选项的排列 */
+export interface ChoiceDirections {
+    /** 竖着一行一个（默认） */
+    vertical: unknown;
+    /** 横着排，放不下时换行 */
+    horizontal: unknown;
+}
+/** 选框、分组的样式：root、box、square、checked、label、group、horizontal */
+export declare const choiceStyles: Readonly<{
+    box: css.CompiledStyles;
+    checked: css.CompiledStyles;
+    group: css.CompiledStyles;
+    horizontal: css.CompiledStyles;
+    label: css.CompiledStyles;
+    root: css.CompiledStyles;
+    square: css.CompiledStyles;
+}>;
+/** 一个选框的状态 */
+export interface ChoiceState {
+    role: 'checkbox' | 'radio';
+    checked: boolean;
+    /** 半选（复选框的全选在部分选中时） */
+    indeterminate?: boolean;
+    disabled: boolean;
+    shape: keyof ChoiceShapes;
+    onToggle: () => void;
+}
+/** 画一个选框：button[role] > 框 + 文字 */
+export declare function renderChoice(state: ChoiceState, attrs: Record<string, unknown> | undefined, label: VNodeChild, parts: {
+    propsBox?: PartProps<'span'>;
+    propsLabel?: PartProps<'span'>;
+}): import("@zerodep-dev/vue-tsx-pro-tsx/jsx-runtime").JSX.Element;

package/dist/form/choice.js

@@ -0,0 +1,109 @@
+import { dataAttrs, hasContent, mergeAttrs } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { createVNode } from "vue";
+import { Check, Minus } from "@lucide/icons";
+//#region src/form/choice.tsx
+/**
+* 复选框与单选框共用的外观：前面一个圆（或方）框，选中时填上主色、画对勾，后面是文字。
+* Checkbox、Radio 只在角色、状态与分组的逻辑上不同（内部模块，不从包导出）。
+*/
+/** 选框的形状 */
+/** 选项的排列 */
+/** 选框、分组的样式：root、box、square、checked、label、group、horizontal */
+var choiceStyles = css.create({
+	root: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: "0.5em",
+		margin: 0,
+		padding: 0,
+		borderWidth: 0,
+		backgroundColor: "transparent",
+		color: {
+			default: "_text",
+			"[data-disabled]": "_textDisabled"
+		},
+		fontFamily: "inherit",
+		fontSize: "inherit",
+		lineHeight: "1.5",
+		textAlign: "start",
+		cursor: {
+			default: "pointer",
+			"[data-disabled]": "not-allowed"
+		},
+		userSelect: "none"
+	},
+	box: {
+		boxSizing: "border-box",
+		flex: "none",
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		width: "1.3em",
+		height: "1.3em",
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_borderStrong",
+		borderRadius: "_full",
+		backgroundColor: {
+			default: "_surface",
+			"[data-disabled]": "_fill"
+		},
+		color: "_accentContrast",
+		fontSize: "1em",
+		transitionProperty: "background-color, border-color",
+		transitionDuration: "_sm"
+	},
+	square: { borderRadius: "_sm" },
+	checked: {
+		borderColor: {
+			default: "_accent",
+			"[data-disabled]": "_borderStrong"
+		},
+		backgroundColor: {
+			default: "_accent",
+			"[data-disabled]": "_fillActive"
+		}
+	},
+	label: { overflowWrap: "anywhere" },
+	group: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "flex-start",
+		gap: "_sm"
+	},
+	horizontal: {
+		flexDirection: "row",
+		flexWrap: "wrap",
+		alignItems: "center",
+		columnGap: "_lg"
+	}
+});
+/** 一个选框的状态 */
+/** 画一个选框：button[role] > 框 + 文字 */
+function renderChoice(state, attrs, label, parts) {
+	const marked = state.checked || state.indeterminate;
+	return createVNode("button", mergeAttrs({ sx: choiceStyles.root }, attrs, {
+		type: "button",
+		role: state.role,
+		"aria-checked": state.indeterminate ? "mixed" : state.checked ? "true" : "false",
+		disabled: state.disabled,
+		onClick: state.onToggle,
+		...dataAttrs({
+			"data-disabled": state.disabled,
+			"data-checked": marked
+		})
+	}), [createVNode("span", mergeAttrs({ sx: [
+		choiceStyles.box,
+		state.shape === "square" && choiceStyles.square,
+		marked && choiceStyles.checked
+	] }, parts.propsBox, dataAttrs({ "data-disabled": state.disabled })), [marked && createVNode(Icon, {
+		"icon": state.indeterminate ? Minus : Check,
+		"strokeWidth": 3
+	}, null)]), hasContent(label) && createVNode("span", mergeAttrs({ sx: choiceStyles.label }, parts.propsLabel), [label])]);
+}
+//#endregion
+export { choiceStyles, renderChoice };
+
+//# sourceMappingURL=choice.js.map

package/dist/form/choice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice.js","names":["_createVNode"],"sources":["../../src/form/choice.tsx"],"sourcesContent":["/**\n * 复选框与单选框共用的外观：前面一个圆（或方）框，选中时填上主色、画对勾，后面是文字。\n * Checkbox、Radio 只在角色、状态与分组的逻辑上不同（内部模块，不从包导出）。\n */\nimport { Check, Minus } from '@lucide/icons';\nimport { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { Icon } from '../base/Icon';\nimport { dataAttrs, hasContent, mergeAttrs, type PartProps } from '../utils/props';\n\n/** 选框的形状 */\nexport interface ChoiceShapes {\n  /** 圆（默认） */\n  round: unknown;\n  /** 圆角方块 */\n  square: unknown;\n}\n\n/** 选项的排列 */\nexport interface ChoiceDirections {\n  /** 竖着一行一个（默认） */\n  vertical: unknown;\n  /** 横着排，放不下时换行 */\n  horizontal: unknown;\n}\n\n/** 选框、分组的样式：root、box、square、checked、label、group、horizontal */\nexport const choiceStyles = css.create({\n  root: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '0.5em',\n    margin: 0,\n    padding: 0,\n    borderWidth: 0,\n    backgroundColor: 'transparent',\n    color: { default: '_text', '[data-disabled]': '_textDisabled' },\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    lineHeight: '1.5',\n    textAlign: 'start',\n    cursor: { default: 'pointer', '[data-disabled]': 'not-allowed' },\n    userSelect: 'none',\n  },\n  box: {\n    boxSizing: 'border-box',\n    flex: 'none',\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '1.3em',\n    height: '1.3em',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_borderStrong',\n    borderRadius: '_full',\n    backgroundColor: { default: '_surface', '[data-disabled]': '_fill' },\n    color: '_accentContrast',\n    fontSize: '1em',\n    transitionProperty: 'background-color, border-color',\n    transitionDuration: '_sm',\n  },\n  square: { borderRadius: '_sm' },\n  checked: {\n    borderColor: { default: '_accent', '[data-disabled]': '_borderStrong' },\n    backgroundColor: { default: '_accent', '[data-disabled]': '_fillActive' },\n  },\n  label: { overflowWrap: 'anywhere' },\n  group: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '_sm' },\n  horizontal: { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', columnGap: '_lg' },\n});\n\n/** 一个选框的状态 */\nexport interface ChoiceState {\n  role: 'checkbox' | 'radio';\n  checked: boolean;\n  /** 半选（复选框的全选在部分选中时） */\n  indeterminate?: boolean;\n  disabled: boolean;\n  shape: keyof ChoiceShapes;\n  onToggle: () => void;\n}\n\n/** 画一个选框：button[role] > 框 + 文字 */\nexport function renderChoice(\n  state: ChoiceState,\n  attrs: Record<string, unknown> | undefined,\n  label: VNodeChild,\n  parts: { propsBox?: PartProps<'span'>; propsLabel?: PartProps<'span'> },\n) {\n  const marked = state.checked || state.indeterminate;\n  return (\n    <button\n      {...mergeAttrs<'button'>({ sx: choiceStyles.root }, attrs, {\n        type: 'button',\n        role: state.role,\n        'aria-checked': state.indeterminate ? 'mixed' : state.checked ? 'true' : 'false',\n        disabled: state.disabled,\n        onClick: state.onToggle,\n        ...dataAttrs({ 'data-disabled': state.disabled, 'data-checked': marked }),\n      })}\n    >\n      <span\n        {...mergeAttrs<'span'>(\n          {\n            sx: [\n              choiceStyles.box,\n              state.shape === 'square' && choiceStyles.square,\n              marked && choiceStyles.checked,\n            ],\n          },\n          parts.propsBox,\n          dataAttrs({ 'data-disabled': state.disabled }),\n        )}\n      >\n        {marked && <Icon icon={state.indeterminate ? Minus : Check} strokeWidth={3} />}\n      </span>\n      {hasContent(label) && (\n        <span {...mergeAttrs<'span'>({ sx: choiceStyles.label }, parts.propsLabel)}>{label}</span>\n      )}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA2BA,IAAa,eAAe,IAAI,OAAO;CACrC,MAAM;EACJ,SAAS;EACT,YAAY;EACZ,KAAK;EACL,QAAQ;EACR,SAAS;EACT,aAAa;EACb,iBAAiB;EACjB,OAAO;GAAE,SAAS;GAAS,mBAAmB;EAAgB;EAC9D,YAAY;EACZ,UAAU;EACV,YAAY;EACZ,WAAW;EACX,QAAQ;GAAE,SAAS;GAAW,mBAAmB;EAAc;EAC/D,YAAY;CACd;CACA,KAAK;EACH,WAAW;EACX,MAAM;EACN,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,OAAO;EACP,QAAQ;EACR,aAAa;EACb,aAAa;EACb,aAAa;EACb,cAAc;EACd,iBAAiB;GAAE,SAAS;GAAY,mBAAmB;EAAQ;EACnE,OAAO;EACP,UAAU;EACV,oBAAoB;EACpB,oBAAoB;CACtB;CACA,QAAQ,EAAE,cAAc,MAAM;CAC9B,SAAS;EACP,aAAa;GAAE,SAAS;GAAW,mBAAmB;EAAgB;EACtE,iBAAiB;GAAE,SAAS;GAAW,mBAAmB;EAAc;CAC1E;CACA,OAAO,EAAE,cAAc,WAAW;CAClC,OAAO;EAAE,SAAS;EAAQ,eAAe;EAAU,YAAY;EAAc,KAAK;CAAM;CACxF,YAAY;EAAE,eAAe;EAAO,UAAU;EAAQ,YAAY;EAAU,WAAW;CAAM;AAC/F,CAAC;;;AAcD,SAAgB,aACd,OACA,OACA,OACA,OACA;CACA,MAAM,SAAS,MAAM,WAAW,MAAM;CACtC,OAAAA,YAAA,UAEQ,WAAqB,EAAE,IAAI,aAAa,KAAK,GAAG,OAAO;EACzD,MAAM;EACN,MAAM,MAAM;EACZ,gBAAgB,MAAM,gBAAgB,UAAU,MAAM,UAAU,SAAS;EACzE,UAAU,MAAM;EAChB,SAAS,MAAM;EACf,GAAG,UAAU;GAAE,iBAAiB,MAAM;GAAU,gBAAgB;EAAO,CAAC;CAC1E,CAAC,GAAC,CAAAA,YAAA,QAGI,WACF,EACE,IAAI;EACF,aAAa;EACb,MAAM,UAAU,YAAY,aAAa;EACzC,UAAU,aAAa;CAAO,EAElC,GACA,MAAM,UACN,UAAU,EAAE,iBAAiB,MAAM,SAAS,CAAC,CAC/C,GAAC,CAEA,UAAMA,YAAA,MAAA;EAAA,QAAgB,MAAM,gBAAgB,QAAQ;EAAK,eAAe;CAAC,GAAA,IAAA,CAAI,CAAA,GAE/E,WAAW,KAAK,KAACA,YAAA,QACN,WAAmB,EAAE,IAAI,aAAa,MAAM,GAAG,MAAM,UAAU,GAAC,CAAG,KAAK,CAAA,CACnF,CAAA;AAGP"}

package/dist/form/context.d.ts

@@ -0,0 +1,83 @@
+import { type VNodeChild } from 'vue';
+/** 标题的位置 */
+export interface FormLabelPositions {
+    /** 左边，固定宽度（默认） */
+    left: unknown;
+    /** 上面，控件占满一行 */
+    top: unknown;
+}
+/** 什么时候校验 */
+export interface FormValidateTriggers {
+    /** 失去焦点时（输入框的默认） */
+    blur: unknown;
+    /** 值变了就校验 */
+    change: unknown;
+    /** 只在提交时 */
+    submit: unknown;
+}
+/** 一条校验规则；按顺序检查，第一条不通过的给出消息 */
+export interface FormRule {
+    /** 必填：空字符串、空数组、null、undefined、false 算没填 */
+    required?: boolean;
+    /** 字符串要匹配的格式 */
+    pattern?: RegExp;
+    /** 自定义：返回 false 或消息表示不通过，可以是异步的（查重名） */
+    validator?: (value: unknown) => boolean | string | Promise<boolean | string>;
+    /** 不通过时的消息；不给时必填用语言包的“请填写…” */
+    message?: string;
+    /**
+     * 什么时候检查这一条；不给时按 Form 的 validateTrigger
+     */
+    trigger?: keyof FormValidateTriggers;
+}
+/** 登记到表单里的一项 */
+export interface FormItemHandle {
+    /** 字段名：提交时作为值的键 */
+    readonly name: string | undefined;
+    /** 当前的值 */
+    readonly value: unknown;
+    /** 当前的错误消息 */
+    readonly error: string | undefined;
+    /** 校验；trigger 为 submit 时检查所有规则，否则只检查这个时机的 */
+    validate(trigger?: keyof FormValidateTriggers): Promise<string | undefined>;
+    /** 清掉错误消息 */
+    resetValidation(): void;
+    /** 滚到这一项（出错时） */
+    scrollIntoView(): Promise<void>;
+}
+/** 表单提供给各项的 */
+export interface FormState {
+    readonly disabled: boolean;
+    readonly readonly: boolean;
+    readonly labelWidth: string | undefined;
+    readonly labelPosition: keyof FormLabelPositions;
+    readonly inputAlign: 'left' | 'right';
+    readonly validateTrigger: keyof FormValidateTriggers;
+    register(item: FormItemHandle): () => void;
+    /** 提交：校验所有项，通过时调用 onSubmit */
+    submit(): void;
+}
+/** 表单的上下文 */
+export declare const FormContext: import("@zerodep-dev/vue-tsx-pro-tsx").Context<FormState>;
+/** 不在 Form 里也能单独用的项：读不到上下文时为 null */
+export declare const useForm: () => FormState | null;
+/** 值是不是“没填” */
+export declare function isEmptyValue(value: unknown): boolean;
+/** useFormItem 的参数：都是 getter，跟着组件的 props 变 */
+export interface FormItemOptions {
+    name: () => string | undefined;
+    rules: () => readonly FormRule[] | undefined;
+    value: () => unknown;
+    /** 标题：必填消息里用 */
+    label: () => VNodeChild;
+    /** 滚到这一项要量的元素 */
+    element?: () => unknown;
+}
+/** 一个表单项的校验状态；在 Form 里时登记进去，提交时一起校验 */
+export declare function useFormItem(options: FormItemOptions): {
+    readonly error: string | undefined;
+    readonly required: boolean;
+    form: FormState | null;
+    validate: (trigger?: keyof FormValidateTriggers) => Promise<string | undefined>;
+    resetValidation: () => void;
+};

package/dist/form/context.js

@@ -0,0 +1,89 @@
+import { useConfig } from "../config/context.js";
+import { useHost } from "../utils/host.js";
+import { createContext } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { onBeforeUnmount, shallowRef, watch } from "vue";
+//#region src/form/context.ts
+/**
+* 表单的上下文与校验：Form 提供，Field、FormItem 用 `useFormItem` 登记自己（名字、规则、取值），
+* 提交时按顺序校验，出错的项显示消息。单独一个模块（不带组件），Form、FormItem、Field 都要导入。
+*
+*   const item = useFormItem({ name: () => name, rules: () => rules, value: () => value, label: () => label });
+*   item.error             // 当前的错误消息（没有时 undefined）
+*   await item.validate('blur')
+*/
+/** 表单的上下文 */
+var FormContext = createContext("Form");
+/** 不在 Form 里也能单独用的项：读不到上下文时为 null */
+var useForm = () => FormContext.inject(null);
+/** 值是不是“没填” */
+function isEmptyValue(value) {
+	return value === void 0 || value === null || value === false || typeof value === "string" && value.trim() === "" || Array.isArray(value) && value.length === 0;
+}
+/** 用一条规则检查值：通过时 undefined，不通过时消息 */
+async function check(rule, value, label, requiredText) {
+	if (rule.required && isEmptyValue(value)) return rule.message ?? requiredText(label);
+	if (isEmptyValue(value)) return void 0;
+	if (rule.pattern && !rule.pattern.test(String(value))) return rule.message ?? "";
+	if (rule.validator) {
+		const result = await rule.validator(value);
+		if (result === false) return rule.message ?? "";
+		if (typeof result === "string" && result) return result;
+	}
+}
+/** 一个表单项的校验状态；在 Form 里时登记进去，提交时一起校验 */
+function useFormItem(options) {
+	const form = useForm();
+	const config = useConfig();
+	const host = useHost();
+	const error = shallowRef();
+	let version = 0;
+	const handle = {
+		get name() {
+			return options.name();
+		},
+		get value() {
+			return options.value();
+		},
+		get error() {
+			return error.value;
+		},
+		async validate(trigger = "submit") {
+			const current = ++version;
+			const fallback = form?.validateTrigger ?? "blur";
+			const label = options.label();
+			for (const rule of options.rules() ?? []) {
+				if (trigger !== "submit" && (rule.trigger ?? fallback) !== trigger) continue;
+				const message = await check(rule, options.value(), typeof label === "string" ? label : "", config.lang.fieldRequired);
+				if (current !== version) return error.value;
+				if (message !== void 0) return error.value = message;
+			}
+			error.value = void 0;
+		},
+		resetValidation() {
+			version++;
+			error.value = void 0;
+		},
+		async scrollIntoView() {
+			const rect = await host.measure(options.element?.());
+			if (rect) host.scrollTo(host.scrollTop() + rect.top - 16, { smooth: true });
+		}
+	};
+	watch(options.value, () => void handle.validate(error.value === void 0 ? "change" : "submit"));
+	const unregister = form?.register(handle);
+	if (unregister) onBeforeUnmount(unregister);
+	return {
+		get error() {
+			return error.value;
+		},
+		get required() {
+			return options.rules()?.some((rule) => rule.required) ?? false;
+		},
+		form,
+		validate: (trigger) => handle.validate(trigger),
+		resetValidation: () => handle.resetValidation()
+	};
+}
+//#endregion
+export { FormContext, isEmptyValue, useForm, useFormItem };
+
+//# sourceMappingURL=context.js.map

package/dist/form/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../src/form/context.ts"],"sourcesContent":["/**\n * 表单的上下文与校验：Form 提供，Field、FormItem 用 `useFormItem` 登记自己（名字、规则、取值），\n * 提交时按顺序校验，出错的项显示消息。单独一个模块（不带组件），Form、FormItem、Field 都要导入。\n *\n *   const item = useFormItem({ name: () => name, rules: () => rules, value: () => value, label: () => label });\n *   item.error             // 当前的错误消息（没有时 undefined）\n *   await item.validate('blur')\n */\nimport { createContext } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { onBeforeUnmount, shallowRef, watch, type VNodeChild } from 'vue';\nimport { useConfig } from '../config/context';\nimport { useHost } from '../utils/host';\n\n/** 标题的位置 */\nexport interface FormLabelPositions {\n  /** 左边，固定宽度（默认） */\n  left: unknown;\n  /** 上面，控件占满一行 */\n  top: unknown;\n}\n\n/** 什么时候校验 */\nexport interface FormValidateTriggers {\n  /** 失去焦点时（输入框的默认） */\n  blur: unknown;\n  /** 值变了就校验 */\n  change: unknown;\n  /** 只在提交时 */\n  submit: unknown;\n}\n\n/** 一条校验规则；按顺序检查，第一条不通过的给出消息 */\nexport interface FormRule {\n  /** 必填：空字符串、空数组、null、undefined、false 算没填 */\n  required?: boolean;\n  /** 字符串要匹配的格式 */\n  pattern?: RegExp;\n  /** 自定义：返回 false 或消息表示不通过，可以是异步的（查重名） */\n  validator?: (value: unknown) => boolean | string | Promise<boolean | string>;\n  /** 不通过时的消息；不给时必填用语言包的“请填写…” */\n  message?: string;\n  /**\n   * 什么时候检查这一条；不给时按 Form 的 validateTrigger\n   */\n  trigger?: keyof FormValidateTriggers;\n}\n\n/** 登记到表单里的一项 */\nexport interface FormItemHandle {\n  /** 字段名：提交时作为值的键 */\n  readonly name: string | undefined;\n  /** 当前的值 */\n  readonly value: unknown;\n  /** 当前的错误消息 */\n  readonly error: string | undefined;\n  /** 校验；trigger 为 submit 时检查所有规则，否则只检查这个时机的 */\n  validate(trigger?: keyof FormValidateTriggers): Promise<string | undefined>;\n  /** 清掉错误消息 */\n  resetValidation(): void;\n  /** 滚到这一项（出错时） */\n  scrollIntoView(): Promise<void>;\n}\n\n/** 表单提供给各项的 */\nexport interface FormState {\n  readonly disabled: boolean;\n  readonly readonly: boolean;\n  readonly labelWidth: string | undefined;\n  readonly labelPosition: keyof FormLabelPositions;\n  readonly inputAlign: 'left' | 'right';\n  readonly validateTrigger: keyof FormValidateTriggers;\n  register(item: FormItemHandle): () => void;\n  /** 提交：校验所有项，通过时调用 onSubmit */\n  submit(): void;\n}\n\n/** 表单的上下文 */\nexport const FormContext = createContext<FormState>('Form');\n\n/** 不在 Form 里也能单独用的项：读不到上下文时为 null */\nexport const useForm = (): FormState | null => FormContext.inject(null);\n\n/** 值是不是“没填” */\nexport function isEmptyValue(value: unknown): boolean {\n  return (\n    value === undefined ||\n    value === null ||\n    value === false ||\n    (typeof value === 'string' && value.trim() === '') ||\n    (Array.isArray(value) && value.length === 0)\n  );\n}\n\n/** 用一条规则检查值：通过时 undefined，不通过时消息 */\nasync function check(\n  rule: FormRule,\n  value: unknown,\n  label: string,\n  requiredText: (label: string) => string,\n) {\n  if (rule.required && isEmptyValue(value)) return rule.message ?? requiredText(label);\n  // 没填的非必填项不查格式\n  if (isEmptyValue(value)) return undefined;\n  if (rule.pattern && !rule.pattern.test(String(value as string))) return rule.message ?? '';\n  if (rule.validator) {\n    const result = await rule.validator(value);\n    if (result === false) return rule.message ?? '';\n    if (typeof result === 'string' && result) return result;\n  }\n  return undefined;\n}\n\n/** useFormItem 的参数：都是 getter，跟着组件的 props 变 */\nexport interface FormItemOptions {\n  name: () => string | undefined;\n  rules: () => readonly FormRule[] | undefined;\n  value: () => unknown;\n  /** 标题：必填消息里用 */\n  label: () => VNodeChild;\n  /** 滚到这一项要量的元素 */\n  element?: () => unknown;\n}\n\n/** 一个表单项的校验状态；在 Form 里时登记进去，提交时一起校验 */\nexport function useFormItem(options: FormItemOptions) {\n  const form = useForm();\n  const config = useConfig();\n  const host = useHost();\n  const error = shallowRef<string>();\n  // 异步校验可能交错：只认最后一次\n  let version = 0;\n  const handle: FormItemHandle = {\n    get name() {\n      return options.name();\n    },\n    get value() {\n      return options.value();\n    },\n    get error() {\n      return error.value;\n    },\n    async validate(trigger = 'submit') {\n      const current = ++version;\n      const fallback = form?.validateTrigger ?? 'blur';\n      const label = options.label();\n      for (const rule of options.rules() ?? []) {\n        if (trigger !== 'submit' && (rule.trigger ?? fallback) !== trigger) continue;\n        const message = await check(\n          rule,\n          options.value(),\n          typeof label === 'string' ? label : '',\n          config.lang.fieldRequired,\n        );\n        if (current !== version) return error.value;\n        if (message !== undefined) return (error.value = message);\n      }\n      return (error.value = undefined);\n    },\n    resetValidation() {\n      version++;\n      error.value = undefined;\n    },\n    async scrollIntoView() {\n      const rect = await host.measure(options.element?.());\n      // 顶部留一点空，不贴着导航栏\n      if (rect) host.scrollTo(host.scrollTop() + rect.top - 16, { smooth: true });\n    },\n  };\n  // 值变了：已经报错的项整个重查（改对了消息就消失），否则只查 change 时机的规则\n  watch(options.value, () => void handle.validate(error.value === undefined ? 'change' : 'submit'));\n  const unregister = form?.register(handle);\n  if (unregister) onBeforeUnmount(unregister);\n  return {\n    get error() {\n      return error.value;\n    },\n    get required() {\n      return options.rules()?.some((rule) => rule.required) ?? false;\n    },\n    form,\n    validate: (trigger?: keyof FormValidateTriggers) => handle.validate(trigger),\n    resetValidation: () => handle.resetValidation(),\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;AA6EA,IAAa,cAAc,cAAyB,MAAM;;AAG1D,IAAa,gBAAkC,YAAY,OAAO,IAAI;;AAGtE,SAAgB,aAAa,OAAyB;CACpD,OACE,UAAU,KAAA,KACV,UAAU,QACV,UAAU,SACT,OAAO,UAAU,YAAY,MAAM,KAAK,MAAM,MAC9C,MAAM,QAAQ,KAAK,KAAK,MAAM,WAAW;AAE9C;;AAGA,eAAe,MACb,MACA,OACA,OACA,cACA;CACA,IAAI,KAAK,YAAY,aAAa,KAAK,GAAG,OAAO,KAAK,WAAW,aAAa,KAAK;CAEnF,IAAI,aAAa,KAAK,GAAG,OAAO,KAAA;CAChC,IAAI,KAAK,WAAW,CAAC,KAAK,QAAQ,KAAK,OAAO,KAAe,CAAC,GAAG,OAAO,KAAK,WAAW;CACxF,IAAI,KAAK,WAAW;EAClB,MAAM,SAAS,MAAM,KAAK,UAAU,KAAK;EACzC,IAAI,WAAW,OAAO,OAAO,KAAK,WAAW;EAC7C,IAAI,OAAO,WAAW,YAAY,QAAQ,OAAO;CACnD;AAEF;;AAcA,SAAgB,YAAY,SAA0B;CACpD,MAAM,OAAO,QAAQ;CACrB,MAAM,SAAS,UAAU;CACzB,MAAM,OAAO,QAAQ;CACrB,MAAM,QAAQ,WAAmB;CAEjC,IAAI,UAAU;CACd,MAAM,SAAyB;EAC7B,IAAI,OAAO;GACT,OAAO,QAAQ,KAAK;EACtB;EACA,IAAI,QAAQ;GACV,OAAO,QAAQ,MAAM;EACvB;EACA,IAAI,QAAQ;GACV,OAAO,MAAM;EACf;EACA,MAAM,SAAS,UAAU,UAAU;GACjC,MAAM,UAAU,EAAE;GAClB,MAAM,WAAW,MAAM,mBAAmB;GAC1C,MAAM,QAAQ,QAAQ,MAAM;GAC5B,KAAK,MAAM,QAAQ,QAAQ,MAAM,KAAK,CAAC,GAAG;IACxC,IAAI,YAAY,aAAa,KAAK,WAAW,cAAc,SAAS;IACpE,MAAM,UAAU,MAAM,MACpB,MACA,QAAQ,MAAM,GACd,OAAO,UAAU,WAAW,QAAQ,IACpC,OAAO,KAAK,aACd;IACA,IAAI,YAAY,SAAS,OAAO,MAAM;IACtC,IAAI,YAAY,KAAA,GAAW,OAAQ,MAAM,QAAQ;GACnD;GACQ,MAAM,QAAQ,KAAA;EACxB;EACA,kBAAkB;GAChB;GACA,MAAM,QAAQ,KAAA;EAChB;EACA,MAAM,iBAAiB;GACrB,MAAM,OAAO,MAAM,KAAK,QAAQ,QAAQ,UAAU,CAAC;GAEnD,IAAI,MAAM,KAAK,SAAS,KAAK,UAAU,IAAI,KAAK,MAAM,IAAI,EAAE,QAAQ,KAAK,CAAC;EAC5E;CACF;CAEA,MAAM,QAAQ,aAAa,KAAK,OAAO,SAAS,MAAM,UAAU,KAAA,IAAY,WAAW,QAAQ,CAAC;CAChG,MAAM,aAAa,MAAM,SAAS,MAAM;CACxC,IAAI,YAAY,gBAAgB,UAAU;CAC1C,OAAO;EACL,IAAI,QAAQ;GACV,OAAO,MAAM;EACf;EACA,IAAI,WAAW;GACb,OAAO,QAAQ,MAAM,CAAC,EAAE,MAAM,SAAS,KAAK,QAAQ,KAAK;EAC3D;EACA;EACA,WAAW,YAAyC,OAAO,SAAS,OAAO;EAC3E,uBAAuB,OAAO,gBAAgB;CAChD;AACF"}

package/dist/index.d.ts

@@ -0,0 +1,66 @@
+/**
+ * @zerodep-dev/vue-tsx-pro-mobile：移动端组件库。H5 直接用；小程序经 @zerodep-dev/vue-tsx-pro-mini 渲染。
+ * 规范见 MOBILE.md。
+ */
+export * from './theme/tokens';
+export * from './theme/dark';
+import './theme/token-names';
+export * from './config/lang';
+export * from './config/context';
+export * from './config/ConfigProvider';
+export * from './utils/props';
+export * from './utils/host';
+export * from './capability/types';
+export * from './capability/usePermission';
+export * from './capability/useStorage';
+export * from './capability/PrivacyPrompt';
+export * from './utils/scales';
+export * from './base/Icon';
+export * from './base/Button';
+export * from './layout/Divider';
+export * from './layout/Space';
+export * from './display/Cell';
+export * from './display/Tag';
+export * from './display/Badge';
+export * from './display/Image';
+export * from './display/SwipeCell';
+export * from './display/Empty';
+export * from './display/NoticeBar';
+export * from './display/Grid';
+export * from './display/Collapse';
+export * from './display/Steps';
+export * from './display/List';
+export * from './display/Swiper';
+export * from './display/IndexBar';
+export * from './navigation/NavBar';
+export * from './navigation/TabBar';
+export * from './navigation/Tabs';
+export * from './navigation/Sticky';
+export * from './navigation/BackTop';
+export * from './picker/Picker';
+export * from './picker/DatePicker';
+export * from './picker/Cascader';
+export * from './picker/Calendar';
+export * from './picker/DropdownMenu';
+export * from './overlay/Overlay';
+export * from './overlay/Popup';
+export * from './overlay/ActionSheet';
+export * from './form/context';
+export * from './form/Form';
+export * from './form/FormItem';
+export * from './form/Field';
+export * from './form/Search';
+export * from './form/Switch';
+export * from './form/Checkbox';
+export * from './form/Radio';
+export * from './form/Stepper';
+export * from './form/Rate';
+export * from './form/Slider';
+export * from './form/Uploader';
+export type { ChoiceDirections, ChoiceShapes } from './form/choice';
+export * from './feedback/Loading';
+export * from './feedback/Toast';
+export * from './feedback/Dialog';
+export * from './feedback/Notify';
+export * from './feedback/Skeleton';
+export * from './feedback/PullRefresh';