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

package/dist/base/Button.d.ts

@@ -0,0 +1,170 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type LoadingProps } from '../feedback/Loading';
+import { type PartProps } from '../utils/props';
+import type { MobileRadius, MobileSize, MobileTone } from '../utils/scales';
+import { type IconData, type IconProps } from './Icon';
+/** 按钮样式 */
+export interface ButtonVariants {
+    /** 实底：一组操作里的主要操作 */
+    solid: unknown;
+    /** 浅色底：次要但仍需突出的操作 */
+    soft: unknown;
+    /** 描边：次要操作 */
+    outline: unknown;
+    /** 无底无边，按下时才有底色：导航栏、列表里的文字按钮 */
+    ghost: unknown;
+}
+/** 状态与语义属性由组件管理 */
+export type ButtonManaged = 'disabled' | 'aria-busy' | 'aria-disabled';
+/**
+ * 小程序按钮的开放能力（原生 button 的 open-type），H5 里不起作用：
+ * getPhoneNumber 手机号、chooseAvatar 选头像、agreePrivacyAuthorization 同意隐私协议、share 转发、contact 客服、
+ * openSetting 设置页（以上是微信）；getAuthorize 授权（支付宝，配合 authScope）
+ */
+export type ButtonOpenType = 'getPhoneNumber' | 'chooseAvatar' | 'agreePrivacyAuthorization' | 'share' | 'contact' | 'openSetting' | 'getAuthorize';
+/** 未声明的属性落到 button 上 */
+export interface ButtonProps extends PartProps<'button', ButtonManaged> {
+    /**
+     * 样式
+     * @default 'solid'
+     */
+    variant?: keyof ButtonVariants;
+    /**
+     * 色调
+     * @default 'accent'
+     */
+    tone?: MobileTone;
+    /**
+     * 尺寸
+     * @default 'md'
+     */
+    size?: MobileSize;
+    /**
+     * 圆角
+     * @default 'md'
+     */
+    radius?: MobileRadius;
+    /** 占满容器宽度 */
+    fullWidth?: boolean;
+    /** 不可用 */
+    disabled?: boolean;
+    /** 加载中：图标换成旋转指示，不响应点击 */
+    loading?: boolean;
+    /** 加载中显示的文字；不给时保留原来的文字 */
+    loadingText?: VNodeChild;
+    /** 文字前的图标 */
+    icon?: IconData;
+    /** 文字后的图标 */
+    iconEnd?: IconData;
+    /** 小程序的开放能力：只能由用户点这个按钮触发的平台能力（手机号、头像、隐私协议同意……） */
+    openType?: ButtonOpenType;
+    /** 支付宝 getAuthorize 的授权范围：phoneNumber 手机号、userInfo 会员基础信息 */
+    authScope?: 'phoneNumber' | 'userInfo';
+    /** 开放能力的结果（平台事件的 detail）：手机号交给 useHost().phoneNumber 换凭证，头像的 detail.avatarUrl 是临时路径 */
+    onOpenType?: (detail: unknown) => void;
+    /** 按钮文字 */
+    children?: VNodeChild;
+    /** 内容层（包着图标与文字的 span）的部件属性 */
+    propsContent?: PartProps<'span'>;
+    /** 前置图标的部件属性 */
+    propsIcon?: Partial<IconProps>;
+    /** 后置图标的部件属性 */
+    propsIconEnd?: Partial<IconProps>;
+    /** 加载指示的部件属性 */
+    propsLoading?: Partial<LoadingProps>;
+}
+/** Button 的部件 */
+export type ButtonPart = 'root' | 'content' | 'icon';
+/** Button 的配方：样式 × 色调 × 尺寸 × 圆角 */
+export declare const buttonRecipe: css.Recipe<"content" | "icon" | "root", {
+    readonly size: {
+        readonly xs: {
+            readonly root: {
+                readonly fontSize: "_xs";
+                readonly minHeight: "2em";
+                readonly paddingInline: "_sm";
+            };
+        };
+        readonly sm: {
+            readonly root: {
+                readonly fontSize: "_md";
+                readonly minHeight: "2.3em";
+                readonly paddingInline: "_md";
+            };
+        };
+        readonly md: {
+            readonly root: {
+                readonly fontSize: "_lg";
+                readonly minHeight: "_control";
+                readonly paddingInline: "_lg";
+            };
+        };
+        readonly lg: {
+            readonly root: {
+                readonly fontSize: "_lg";
+                readonly minHeight: "3.125em";
+                readonly paddingInline: "_xl";
+            };
+        };
+    };
+    readonly radius: {
+        readonly none: {
+            readonly root: {
+                readonly borderRadius: "_none";
+            };
+        };
+        readonly sm: {
+            readonly root: {
+                readonly borderRadius: "_sm";
+            };
+        };
+        readonly md: {
+            readonly root: {
+                readonly borderRadius: "_md";
+            };
+        };
+        readonly lg: {
+            readonly root: {
+                readonly borderRadius: "_lg";
+            };
+        };
+        readonly full: {
+            readonly root: {
+                readonly borderRadius: "_full";
+            };
+        };
+    };
+    readonly fullWidth: {
+        readonly true: {
+            readonly root: {
+                readonly display: "flex";
+                readonly width: "100%";
+            };
+        };
+    };
+    readonly variant: {
+        readonly solid: {};
+        readonly soft: {};
+        readonly outline: {
+            readonly root: {
+                readonly backgroundColor: "_surface";
+            };
+        };
+        readonly ghost: {
+            readonly root: {
+                readonly backgroundColor: "transparent";
+            };
+        };
+    };
+    readonly tone: {
+        accent: {};
+        neutral: {};
+        danger: {};
+        success: {};
+        warning: {};
+        info: {};
+    };
+}>;
+/** 按钮（button > span 内容） */
+export declare const Button: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ButtonProps>;

package/dist/base/Button.js

@@ -0,0 +1,537 @@
+import { dataAttrs, hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Icon } from "./Icon.js";
+import { Loading } from "../feedback/Loading.js";
+import { isMiniProgram, useHost } from "../utils/host.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/base/Button.tsx
+/** 按钮样式 */
+/** 状态与语义属性由组件管理 */
+/**
+* 小程序按钮的开放能力（原生 button 的 open-type），H5 里不起作用：
+* getPhoneNumber 手机号、chooseAvatar 选头像、agreePrivacyAuthorization 同意隐私协议、share 转发、contact 客服、
+* openSetting 设置页（以上是微信）；getAuthorize 授权（支付宝，配合 authScope）
+*/
+/** 未声明的属性落到 button 上 */
+/** Button 的部件 */
+/** Button 的配方：样式 × 色调 × 尺寸 × 圆角 */
+var buttonRecipe = css.recipe({
+	name: "Button",
+	parts: [
+		"root",
+		"content",
+		"icon"
+	],
+	base: {
+		root: {
+			boxSizing: "border-box",
+			position: "relative",
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			margin: 0,
+			borderWidth: "_xs",
+			borderStyle: "solid",
+			borderColor: "transparent",
+			fontFamily: "inherit",
+			fontWeight: "_medium",
+			lineHeight: "_tight",
+			whiteSpace: "nowrap",
+			textAlign: "center",
+			verticalAlign: "middle",
+			userSelect: "none",
+			cursor: {
+				default: "pointer",
+				_disabled: "not-allowed"
+			},
+			touchAction: "manipulation",
+			WebkitTapHighlightColor: "transparent",
+			opacity: {
+				default: 1,
+				"[data-disabled]": "_disabled"
+			},
+			transitionProperty: "background-color, border-color, color, opacity",
+			transitionDuration: "_xs",
+			transitionTimingFunction: "_standard"
+		},
+		content: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "_xs"
+		},
+		icon: { fontSize: "1.15em" }
+	},
+	variants: {
+		size: {
+			xs: { root: {
+				fontSize: "_xs",
+				minHeight: "2em",
+				paddingInline: "_sm"
+			} },
+			sm: { root: {
+				fontSize: "_md",
+				minHeight: "2.3em",
+				paddingInline: "_md"
+			} },
+			md: { root: {
+				fontSize: "_lg",
+				minHeight: "_control",
+				paddingInline: "_lg"
+			} },
+			lg: { root: {
+				fontSize: "_lg",
+				minHeight: "3.125em",
+				paddingInline: "_xl"
+			} }
+		},
+		radius: {
+			none: { root: { borderRadius: "_none" } },
+			sm: { root: { borderRadius: "_sm" } },
+			md: { root: { borderRadius: "_md" } },
+			lg: { root: { borderRadius: "_lg" } },
+			full: { root: { borderRadius: "_full" } }
+		},
+		fullWidth: { true: { root: {
+			display: "flex",
+			width: "100%"
+		} } },
+		variant: {
+			solid: {},
+			soft: {},
+			outline: { root: { backgroundColor: "_surface" } },
+			ghost: { root: { backgroundColor: "transparent" } }
+		},
+		tone: {
+			accent: {},
+			neutral: {},
+			danger: {},
+			success: {},
+			warning: {},
+			info: {}
+		}
+	},
+	compound: [
+		{
+			when: {
+				variant: "solid",
+				tone: "accent"
+			},
+			root: {
+				color: "_accentContrast",
+				backgroundColor: {
+					default: "_accent",
+					":active:not([data-disabled])": "_accentActive"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "solid",
+				tone: "neutral"
+			},
+			root: {
+				color: "_inverseText",
+				backgroundColor: "_inverseSurface",
+				opacity: {
+					default: 1,
+					":active:not([data-disabled])": .85,
+					"[data-disabled]": "_disabled"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "solid",
+				tone: "danger"
+			},
+			root: {
+				color: "_dangerContrast",
+				backgroundColor: {
+					default: "_danger",
+					":active:not([data-disabled])": "_dangerActive"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "solid",
+				tone: "success"
+			},
+			root: {
+				color: "_successContrast",
+				backgroundColor: {
+					default: "_success",
+					":active:not([data-disabled])": "_successActive"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "solid",
+				tone: "warning"
+			},
+			root: {
+				color: "_warningContrast",
+				backgroundColor: {
+					default: "_warning",
+					":active:not([data-disabled])": "_warningActive"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "solid",
+				tone: "info"
+			},
+			root: {
+				color: "_infoContrast",
+				backgroundColor: {
+					default: "_info",
+					":active:not([data-disabled])": "_infoActive"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "soft",
+				tone: "accent"
+			},
+			root: {
+				color: "_accentText",
+				backgroundColor: {
+					default: "_accentSoft",
+					":active:not([data-disabled])": "_accentSoftActive"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "soft",
+				tone: "neutral"
+			},
+			root: {
+				color: "_text",
+				backgroundColor: {
+					default: "_fill",
+					":active:not([data-disabled])": "_fillActive"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "soft",
+				tone: "danger"
+			},
+			root: {
+				color: "_dangerText",
+				backgroundColor: {
+					default: "_dangerSoft",
+					":active:not([data-disabled])": "_dangerSoftActive"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "soft",
+				tone: "success"
+			},
+			root: {
+				color: "_successText",
+				backgroundColor: {
+					default: "_successSoft",
+					":active:not([data-disabled])": "_successSoftActive"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "soft",
+				tone: "warning"
+			},
+			root: {
+				color: "_warningText",
+				backgroundColor: {
+					default: "_warningSoft",
+					":active:not([data-disabled])": "_warningSoftActive"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "soft",
+				tone: "info"
+			},
+			root: {
+				color: "_infoText",
+				backgroundColor: {
+					default: "_infoSoft",
+					":active:not([data-disabled])": "_infoSoftActive"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "outline",
+				tone: "accent"
+			},
+			root: {
+				color: "_accentText",
+				borderColor: "_accent",
+				backgroundColor: {
+					default: "_surface",
+					":active:not([data-disabled])": "_accentSoft"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "outline",
+				tone: "neutral"
+			},
+			root: {
+				color: "_text",
+				borderColor: "_borderStrong",
+				backgroundColor: {
+					default: "_surface",
+					":active:not([data-disabled])": "_fill"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "outline",
+				tone: "danger"
+			},
+			root: {
+				color: "_dangerText",
+				borderColor: "_danger",
+				backgroundColor: {
+					default: "_surface",
+					":active:not([data-disabled])": "_dangerSoft"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "outline",
+				tone: "success"
+			},
+			root: {
+				color: "_successText",
+				borderColor: "_success",
+				backgroundColor: {
+					default: "_surface",
+					":active:not([data-disabled])": "_successSoft"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "outline",
+				tone: "warning"
+			},
+			root: {
+				color: "_warningText",
+				borderColor: "_warning",
+				backgroundColor: {
+					default: "_surface",
+					":active:not([data-disabled])": "_warningSoft"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "outline",
+				tone: "info"
+			},
+			root: {
+				color: "_infoText",
+				borderColor: "_info",
+				backgroundColor: {
+					default: "_surface",
+					":active:not([data-disabled])": "_infoSoft"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "ghost",
+				tone: "accent"
+			},
+			root: {
+				color: "_accentText",
+				backgroundColor: {
+					default: "transparent",
+					":active:not([data-disabled])": "_accentSoft"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "ghost",
+				tone: "neutral"
+			},
+			root: {
+				color: "_text",
+				backgroundColor: {
+					default: "transparent",
+					":active:not([data-disabled])": "_fill"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "ghost",
+				tone: "danger"
+			},
+			root: {
+				color: "_dangerText",
+				backgroundColor: {
+					default: "transparent",
+					":active:not([data-disabled])": "_dangerSoft"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "ghost",
+				tone: "success"
+			},
+			root: {
+				color: "_successText",
+				backgroundColor: {
+					default: "transparent",
+					":active:not([data-disabled])": "_successSoft"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "ghost",
+				tone: "warning"
+			},
+			root: {
+				color: "_warningText",
+				backgroundColor: {
+					default: "transparent",
+					":active:not([data-disabled])": "_warningSoft"
+				}
+			}
+		},
+		{
+			when: {
+				variant: "ghost",
+				tone: "info"
+			},
+			root: {
+				color: "_infoText",
+				backgroundColor: {
+					default: "transparent",
+					":active:not([data-disabled])": "_infoSoft"
+				}
+			}
+		}
+	],
+	defaults: {
+		variant: "solid",
+		tone: "accent",
+		size: "md",
+		radius: "md"
+	}
+});
+/**
+* 开放能力的属性：小程序运行时按 open-type 换成原生 button，平台事件统一成 opentype（mini 的 page.ts）。
+* 这些不是 button 的 DOM 属性，H5 里不写
+*/
+function openTypeAttrs(openType, scope, onOpenType) {
+	if (!openType) return {};
+	return {
+		"open-type": openType,
+		scope,
+		onOpentype: onOpenType && ((event) => onOpenType(event.detail))
+	};
+}
+/** 按钮（button > span 内容） */
+var Button = /*#__PURE__*/ _component((_props, _ctx) => {
+	const variant = readonlyProp(_props, "variant");
+	const tone = readonlyProp(_props, "tone");
+	const size = readonlyProp(_props, "size");
+	const radius = readonlyProp(_props, "radius");
+	const fullWidth = readonlyProp(_props, "fullWidth", false);
+	const disabled = readonlyProp(_props, "disabled", false);
+	const loading = readonlyProp(_props, "loading", false);
+	const loadingText = readonlyProp(_props, "loadingText");
+	const icon = readonlyProp(_props, "icon");
+	const iconEnd = readonlyProp(_props, "iconEnd");
+	const children = childrenProp(_props);
+	const propsContent = readonlyProp(_props, "propsContent");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const propsIconEnd = readonlyProp(_props, "propsIconEnd");
+	const propsLoading = readonlyProp(_props, "propsLoading");
+	const onClick = readonlyProp(_props, "onClick");
+	const openType = readonlyProp(_props, "openType");
+	const authScope = readonlyProp(_props, "authScope");
+	const onOpenType = readonlyProp(_props, "onOpenType");
+	const type = readonlyProp(_props, "type", "button");
+	const rest = restProps(_props, _ctx, false);
+	const mini = isMiniProgram(useHost());
+	return () => {
+		const s = buttonRecipe({
+			variant: variant.value,
+			tone: tone.value,
+			size: size.value,
+			radius: radius.value,
+			fullWidth: fullWidth.value
+		});
+		const busy = disabled.value || loading.value;
+		return createVNode("button", mergeAttrs({ sx: s.root }, rest, {
+			type: type.value,
+			disabled: disabled.value,
+			onClick: busy ? void 0 : onClick.value,
+			"aria-busy": loading.value || void 0,
+			...mini ? openTypeAttrs(openType.value, authScope.value, onOpenType.value) : {},
+			...dataAttrs({
+				"data-disabled": disabled.value || void 0,
+				"data-loading": loading.value || void 0
+			})
+		}), [createVNode("span", mergeAttrs({ sx: s.content }, propsContent.value), [
+			loading.value ? createVNode(Loading, mergePartProps({ sx: s.icon }, propsLoading.value), null) : icon.value && createVNode(Icon, mergePartProps({
+				icon: icon.value,
+				sx: s.icon
+			}, propsIcon.value), null),
+			loading.value && hasContent(loadingText.value) ? loadingText.value : children.value,
+			iconEnd.value && !loading.value && createVNode(Icon, mergePartProps({
+				icon: iconEnd.value,
+				sx: s.icon
+			}, propsIconEnd.value), null)
+		])]);
+	};
+}, {
+	name: "Button",
+	props: [
+		"variant",
+		"tone",
+		"size",
+		"radius",
+		"fullWidth",
+		"disabled",
+		"loading",
+		"loadingText",
+		"icon",
+		"iconEnd",
+		"propsContent",
+		"propsIcon",
+		"propsIconEnd",
+		"propsLoading",
+		"onClick",
+		"openType",
+		"authScope",
+		"onOpenType",
+		"type"
+	]
+});
+//#endregion
+export { Button, buttonRecipe };
+
+//# sourceMappingURL=Button.js.map