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

package/dist/display/Tag.d.ts

@@ -0,0 +1,99 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type IconProps } from '../base/Icon';
+import { type PartProps } from '../utils/props';
+import type { MobileTone } from '../utils/scales';
+/** 标签样式 */
+export interface TagVariants {
+    /** 实底 */
+    solid: unknown;
+    /** 浅色底 */
+    soft: unknown;
+    /** 描边 */
+    outline: unknown;
+}
+/** 未声明的属性落到根元素（span）上 */
+export interface TagProps extends PartProps<'span'> {
+    /**
+     * 样式
+     * @default 'soft'
+     */
+    variant?: keyof TagVariants;
+    /**
+     * 色调
+     * @default 'neutral'
+     */
+    tone?: MobileTone;
+    /**
+     * 尺寸
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * 圆角
+     * @default 'sm'
+     */
+    radius?: 'sm' | 'full';
+    /** 右边显示关闭按钮 */
+    closable?: boolean;
+    /** 点了关闭按钮 */
+    onClose?: (event: Event) => void;
+    /** 标签文字 */
+    children?: VNodeChild;
+    /** 关闭按钮的部件属性 */
+    propsClose?: PartProps<'button'>;
+    /** 关闭图标的部件属性 */
+    propsCloseIcon?: Partial<IconProps>;
+}
+/** Tag 的部件 */
+export type TagPart = 'root' | 'close';
+/** Tag 的配方：样式 × 色调 × 尺寸 × 圆角 */
+export declare const tagRecipe: css.Recipe<"close" | "root", {
+    readonly size: {
+        readonly sm: {
+            readonly root: {
+                readonly fontSize: "_xs";
+                readonly lineHeight: "1.25";
+                readonly paddingInline: "0.3em";
+            };
+        };
+        readonly md: {
+            readonly root: {
+                readonly fontSize: "_xs";
+            };
+        };
+        readonly lg: {
+            readonly root: {
+                readonly fontSize: "_sm";
+                readonly paddingInline: "0.6em";
+            };
+        };
+    };
+    readonly radius: {
+        readonly sm: {
+            readonly root: {
+                readonly borderRadius: "_sm";
+            };
+        };
+        readonly full: {
+            readonly root: {
+                readonly borderRadius: "_full";
+            };
+        };
+    };
+    readonly variant: {
+        solid: {};
+        soft: {};
+        outline: {};
+    };
+    readonly tone: {
+        accent: {};
+        neutral: {};
+        danger: {};
+        success: {};
+        warning: {};
+        info: {};
+    };
+}>;
+/** 标签（span > 文字 + 关闭按钮） */
+export declare const Tag: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<TagProps>;

package/dist/display/Tag.js

@@ -0,0 +1,320 @@
+import { useConfig } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Icon } from "../base/Icon.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";
+import { X } from "@lucide/icons";
+//#region src/display/Tag.tsx
+/**
+* 标签：状态、分类、筛选条件。可关闭（右边一个 ×，点了调用 onClose）。
+*
+*   <Tag tone="success">已付款</Tag>
+*   <Tag variant="outline" radius="full">新品</Tag>
+*   <Tag closable onClose={() => remove(item)}>{item.name}</Tag>
+*/
+/** 标签样式 */
+/** 未声明的属性落到根元素（span）上 */
+/** Tag 的部件 */
+/** Tag 的配方：样式 × 色调 × 尺寸 × 圆角 */
+var tagRecipe = css.recipe({
+	name: "Tag",
+	parts: ["root", "close"],
+	base: {
+		root: {
+			boxSizing: "border-box",
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "0.2em",
+			paddingInline: "0.45em",
+			borderWidth: "_xs",
+			borderStyle: "solid",
+			borderColor: "transparent",
+			lineHeight: "1.5",
+			whiteSpace: "nowrap",
+			verticalAlign: "middle"
+		},
+		close: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			margin: 0,
+			marginInlineEnd: "-0.2em",
+			padding: 0,
+			borderWidth: 0,
+			backgroundColor: "transparent",
+			color: "inherit",
+			fontSize: "1em",
+			opacity: {
+				default: .7,
+				":active": 1
+			},
+			cursor: "pointer"
+		}
+	},
+	variants: {
+		size: {
+			sm: { root: {
+				fontSize: "_xs",
+				lineHeight: "1.25",
+				paddingInline: "0.3em"
+			} },
+			md: { root: { fontSize: "_xs" } },
+			lg: { root: {
+				fontSize: "_sm",
+				paddingInline: "0.6em"
+			} }
+		},
+		radius: {
+			sm: { root: { borderRadius: "_sm" } },
+			full: { root: { borderRadius: "_full" } }
+		},
+		variant: {
+			solid: {},
+			soft: {},
+			outline: {}
+		},
+		tone: {
+			accent: {},
+			neutral: {},
+			danger: {},
+			success: {},
+			warning: {},
+			info: {}
+		}
+	},
+	compound: [
+		{
+			when: {
+				variant: "solid",
+				tone: "accent"
+			},
+			root: {
+				color: "_accentContrast",
+				backgroundColor: "_accent"
+			}
+		},
+		{
+			when: {
+				variant: "solid",
+				tone: "neutral"
+			},
+			root: {
+				color: "_inverseText",
+				backgroundColor: "_inverseSurface"
+			}
+		},
+		{
+			when: {
+				variant: "solid",
+				tone: "danger"
+			},
+			root: {
+				color: "_dangerContrast",
+				backgroundColor: "_danger"
+			}
+		},
+		{
+			when: {
+				variant: "solid",
+				tone: "success"
+			},
+			root: {
+				color: "_successContrast",
+				backgroundColor: "_success"
+			}
+		},
+		{
+			when: {
+				variant: "solid",
+				tone: "warning"
+			},
+			root: {
+				color: "_warningContrast",
+				backgroundColor: "_warning"
+			}
+		},
+		{
+			when: {
+				variant: "solid",
+				tone: "info"
+			},
+			root: {
+				color: "_infoContrast",
+				backgroundColor: "_info"
+			}
+		},
+		{
+			when: {
+				variant: "soft",
+				tone: "accent"
+			},
+			root: {
+				color: "_accentText",
+				backgroundColor: "_accentSoft"
+			}
+		},
+		{
+			when: {
+				variant: "soft",
+				tone: "neutral"
+			},
+			root: {
+				color: "_textMuted",
+				backgroundColor: "_fill"
+			}
+		},
+		{
+			when: {
+				variant: "soft",
+				tone: "danger"
+			},
+			root: {
+				color: "_dangerText",
+				backgroundColor: "_dangerSoft"
+			}
+		},
+		{
+			when: {
+				variant: "soft",
+				tone: "success"
+			},
+			root: {
+				color: "_successText",
+				backgroundColor: "_successSoft"
+			}
+		},
+		{
+			when: {
+				variant: "soft",
+				tone: "warning"
+			},
+			root: {
+				color: "_warningText",
+				backgroundColor: "_warningSoft"
+			}
+		},
+		{
+			when: {
+				variant: "soft",
+				tone: "info"
+			},
+			root: {
+				color: "_infoText",
+				backgroundColor: "_infoSoft"
+			}
+		},
+		{
+			when: {
+				variant: "outline",
+				tone: "accent"
+			},
+			root: {
+				color: "_accentText",
+				borderColor: "_accentBorder"
+			}
+		},
+		{
+			when: {
+				variant: "outline",
+				tone: "neutral"
+			},
+			root: {
+				color: "_textMuted",
+				borderColor: "_borderStrong"
+			}
+		},
+		{
+			when: {
+				variant: "outline",
+				tone: "danger"
+			},
+			root: {
+				color: "_dangerText",
+				borderColor: "_dangerBorder"
+			}
+		},
+		{
+			when: {
+				variant: "outline",
+				tone: "success"
+			},
+			root: {
+				color: "_successText",
+				borderColor: "_successBorder"
+			}
+		},
+		{
+			when: {
+				variant: "outline",
+				tone: "warning"
+			},
+			root: {
+				color: "_warningText",
+				borderColor: "_warningBorder"
+			}
+		},
+		{
+			when: {
+				variant: "outline",
+				tone: "info"
+			},
+			root: {
+				color: "_infoText",
+				borderColor: "_infoBorder"
+			}
+		}
+	],
+	defaults: {
+		variant: "soft",
+		tone: "neutral",
+		size: "md",
+		radius: "sm"
+	}
+});
+/** 标签（span > 文字 + 关闭按钮） */
+var Tag = /*#__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 closable = readonlyProp(_props, "closable", false);
+	const onClose = readonlyProp(_props, "onClose");
+	const children = childrenProp(_props);
+	const propsClose = readonlyProp(_props, "propsClose");
+	const propsCloseIcon = readonlyProp(_props, "propsCloseIcon");
+	const rest = restProps(_props, _ctx, false);
+	const config = useConfig();
+	return () => {
+		const s = tagRecipe({
+			variant: variant.value,
+			tone: tone.value,
+			size: size.value,
+			radius: radius.value
+		});
+		return createVNode("span", mergeAttrs({ sx: s.root }, rest), [children.value, closable.value && createVNode("button", mergeAttrs({ sx: s.close }, propsClose.value, {
+			type: "button",
+			"aria-label": config.lang.close,
+			onClick: (event) => {
+				event.stopPropagation();
+				onClose.value?.(event);
+			}
+		}), [createVNode(Icon, mergePartProps({ icon: X }, propsCloseIcon.value), null)])]);
+	};
+}, {
+	name: "Tag",
+	props: [
+		"variant",
+		"tone",
+		"size",
+		"radius",
+		"closable",
+		"onClose",
+		"propsClose",
+		"propsCloseIcon"
+	]
+});
+//#endregion
+export { Tag, tagRecipe };
+
+//# sourceMappingURL=Tag.js.map

package/dist/display/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/display/Tag.tsx"],"sourcesContent":["/**\n * 标签：状态、分类、筛选条件。可关闭（右边一个 ×，点了调用 onClose）。\n *\n *   <Tag tone=\"success\">已付款</Tag>\n *   <Tag variant=\"outline\" radius=\"full\">新品</Tag>\n *   <Tag closable onClose={() => remove(item)}>{item.name}</Tag>\n */\nimport { X } 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, type IconProps } from '../base/Icon';\nimport { useConfig } from '../config/context';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport type { MobileTone } from '../utils/scales';\n\n/** 标签样式 */\nexport interface TagVariants {\n  /** 实底 */\n  solid: unknown;\n  /** 浅色底 */\n  soft: unknown;\n  /** 描边 */\n  outline: unknown;\n}\n\n/** 未声明的属性落到根元素（span）上 */\nexport interface TagProps extends PartProps<'span'> {\n  /**\n   * 样式\n   * @default 'soft'\n   */\n  variant?: keyof TagVariants;\n  /**\n   * 色调\n   * @default 'neutral'\n   */\n  tone?: MobileTone;\n  /**\n   * 尺寸\n   * @default 'md'\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * 圆角\n   * @default 'sm'\n   */\n  radius?: 'sm' | 'full';\n  /** 右边显示关闭按钮 */\n  closable?: boolean;\n  /** 点了关闭按钮 */\n  onClose?: (event: Event) => void;\n  /** 标签文字 */\n  children?: VNodeChild;\n  /** 关闭按钮的部件属性 */\n  propsClose?: PartProps<'button'>;\n  /** 关闭图标的部件属性 */\n  propsCloseIcon?: Partial<IconProps>;\n}\n\n/** Tag 的部件 */\nexport type TagPart = 'root' | 'close';\n\n/** Tag 的配方：样式 × 色调 × 尺寸 × 圆角 */\nexport const tagRecipe = css.recipe({\n  name: 'Tag',\n  parts: ['root', 'close'],\n  base: {\n    root: {\n      boxSizing: 'border-box',\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: '0.2em',\n      paddingInline: '0.45em',\n      borderWidth: '_xs',\n      borderStyle: 'solid',\n      borderColor: 'transparent',\n      lineHeight: '1.5',\n      whiteSpace: 'nowrap',\n      verticalAlign: 'middle',\n    },\n    close: {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      margin: 0,\n      marginInlineEnd: '-0.2em',\n      padding: 0,\n      borderWidth: 0,\n      backgroundColor: 'transparent',\n      color: 'inherit',\n      fontSize: '1em',\n      opacity: { default: 0.7, ':active': 1 },\n      cursor: 'pointer',\n    },\n  },\n  variants: {\n    size: {\n      sm: { root: { fontSize: '_xs', lineHeight: '1.25', paddingInline: '0.3em' } },\n      md: { root: { fontSize: '_xs' } },\n      lg: { root: { fontSize: '_sm', paddingInline: '0.6em' } },\n    },\n    radius: {\n      sm: { root: { borderRadius: '_sm' } },\n      full: { root: { borderRadius: '_full' } },\n    },\n    variant: { solid: {}, soft: {}, outline: {} },\n    tone: { accent: {}, neutral: {}, danger: {}, success: {}, warning: {}, info: {} },\n  },\n  compound: [\n    {\n      when: { variant: 'solid', tone: 'accent' },\n      root: { color: '_accentContrast', backgroundColor: '_accent' },\n    },\n    {\n      when: { variant: 'solid', tone: 'neutral' },\n      root: { color: '_inverseText', backgroundColor: '_inverseSurface' },\n    },\n    {\n      when: { variant: 'solid', tone: 'danger' },\n      root: { color: '_dangerContrast', backgroundColor: '_danger' },\n    },\n    {\n      when: { variant: 'solid', tone: 'success' },\n      root: { color: '_successContrast', backgroundColor: '_success' },\n    },\n    {\n      when: { variant: 'solid', tone: 'warning' },\n      root: { color: '_warningContrast', backgroundColor: '_warning' },\n    },\n    {\n      when: { variant: 'solid', tone: 'info' },\n      root: { color: '_infoContrast', backgroundColor: '_info' },\n    },\n    {\n      when: { variant: 'soft', tone: 'accent' },\n      root: { color: '_accentText', backgroundColor: '_accentSoft' },\n    },\n    {\n      when: { variant: 'soft', tone: 'neutral' },\n      root: { color: '_textMuted', backgroundColor: '_fill' },\n    },\n    {\n      when: { variant: 'soft', tone: 'danger' },\n      root: { color: '_dangerText', backgroundColor: '_dangerSoft' },\n    },\n    {\n      when: { variant: 'soft', tone: 'success' },\n      root: { color: '_successText', backgroundColor: '_successSoft' },\n    },\n    {\n      when: { variant: 'soft', tone: 'warning' },\n      root: { color: '_warningText', backgroundColor: '_warningSoft' },\n    },\n    {\n      when: { variant: 'soft', tone: 'info' },\n      root: { color: '_infoText', backgroundColor: '_infoSoft' },\n    },\n    {\n      when: { variant: 'outline', tone: 'accent' },\n      root: { color: '_accentText', borderColor: '_accentBorder' },\n    },\n    {\n      when: { variant: 'outline', tone: 'neutral' },\n      root: { color: '_textMuted', borderColor: '_borderStrong' },\n    },\n    {\n      when: { variant: 'outline', tone: 'danger' },\n      root: { color: '_dangerText', borderColor: '_dangerBorder' },\n    },\n    {\n      when: { variant: 'outline', tone: 'success' },\n      root: { color: '_successText', borderColor: '_successBorder' },\n    },\n    {\n      when: { variant: 'outline', tone: 'warning' },\n      root: { color: '_warningText', borderColor: '_warningBorder' },\n    },\n    {\n      when: { variant: 'outline', tone: 'info' },\n      root: { color: '_infoText', borderColor: '_infoBorder' },\n    },\n  ],\n  defaults: { variant: 'soft', tone: 'neutral', size: 'md', radius: 'sm' },\n});\n\n/** 标签（span > 文字 + 关闭按钮） */\nexport const Tag = _component(\n  ({\n    variant,\n    tone,\n    size,\n    radius,\n    closable = false,\n    onClose,\n    children,\n    propsClose,\n    propsCloseIcon,\n    ...rest\n  }: TagProps) => {\n    const config = useConfig();\n    return () => {\n      const s = tagRecipe({ variant, tone, size, radius });\n      return (\n        <span {...mergeAttrs<'span'>({ sx: s.root }, rest)}>\n          {children}\n          {closable && (\n            <button\n              {...mergeAttrs<'button'>({ sx: s.close }, propsClose, {\n                type: 'button',\n                'aria-label': config.lang.close,\n                onClick: (event: Event) => {\n                  // 标签常放在可点击的单元格、卡片里：关闭不连带触发外层的点击\n                  event.stopPropagation();\n                  onClose?.(event);\n                },\n              })}\n            >\n              <Icon {...mergePartProps<IconProps>({ icon: X }, propsCloseIcon)} />\n            </button>\n          )}\n        </span>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/feedback/Dialog.d.ts

@@ -0,0 +1,79 @@
+import { css } from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type ButtonProps } from '../base/Button';
+import { type PopupProps } from '../overlay/Popup';
+import { type PartProps } from '../utils/props';
+/** 关闭的原因 */
+export type DialogCloseReason = 'confirm' | 'cancel' | 'overlay';
+/** 对话框的选项（组件的 props 与 showDialog 的参数共用） */
+export interface DialogOptions {
+    /** 标题 */
+    title?: VNodeChild;
+    /** 说明 */
+    message?: VNodeChild;
+    /** 确认按钮的文字；不给时用语言包的"确认" */
+    confirmText?: VNodeChild;
+    /** 取消按钮的文字；不给时用语言包的"取消" */
+    cancelText?: VNodeChild;
+    /** 显示取消按钮 */
+    showCancel?: boolean;
+    /**
+     * 确认按钮的色调：删除这类操作用 danger
+     * @default 'accent'
+     */
+    confirmTone?: 'accent' | 'danger';
+    /** 点遮罩关闭（等于取消） */
+    closeOnOverlay?: boolean;
+    /** 点了确认；返回 Promise 时按钮转圈，完成后才关闭 */
+    onConfirm?: () => void | Promise<unknown>;
+    /** 点了取消（或点遮罩关闭） */
+    onCancel?: () => void;
+}
+/** 未声明的属性落到对话框的面板上 */
+export interface DialogProps extends DialogOptions, Omit<PartProps<'div', 'role'>, 'title'> {
+    /** 是否打开；双向绑定写 `_open={x}` */
+    _open?: boolean;
+    /** 关闭时带原因 */
+    onOpenChange?: (open: boolean, details: {
+        reason: DialogCloseReason;
+    }) => void;
+    /** 说明（与 message 二选一），可以放任意内容 */
+    children?: VNodeChild;
+    /** 自定义底部（代替确认、取消按钮） */
+    footer?: VNodeChild;
+    /** 弹出层的部件属性 */
+    propsPopup?: Partial<PopupProps>;
+    /** 确认按钮的部件属性 */
+    propsConfirm?: Partial<ButtonProps>;
+    /** 取消按钮的部件属性 */
+    propsCancel?: Partial<ButtonProps>;
+}
+/** Dialog 的样式：panel、header、title、message、footer、action */
+export declare const dialogStyles: Readonly<{
+    action: css.CompiledStyles;
+    footer: css.CompiledStyles;
+    header: css.CompiledStyles;
+    message: css.CompiledStyles;
+    panel: css.CompiledStyles;
+    title: css.CompiledStyles;
+    titleOnly: css.CompiledStyles;
+}>;
+/** 对话框（弹出层 > 标题 + 说明 + 按钮） */
+export declare const Dialog: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<DialogProps>;
+/** 命令式对话框：排队显示，前一个关了才显示下一个 */
+interface DialogRequest {
+    options: DialogOptions;
+    resolve: (confirmed: boolean) => void;
+}
+/** 命令式对话框的状态：ConfigProvider 里的出口按它渲染 */
+export declare const dialogState: import("vue").ShallowReactive<{
+    open: boolean;
+    queue: DialogRequest[];
+}>;
+/** 显示一个对话框；确认时结果为 true，取消（或点遮罩关闭）时为 false */
+export declare function showDialog(options: DialogOptions): Promise<boolean>;
+/** 带取消按钮的确认对话框 */
+export declare const showConfirmDialog: (options: DialogOptions) => Promise<boolean>;
+/** 当前的命令式对话框关闭后：交出结果，过了离场动画再显示下一个 */
+export declare function settleDialog(confirmed: boolean): void;
+export {};