@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.2.0

package/dist/config/Provider.d.ts

@@ -0,0 +1,52 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type Highlighter, type TextMatcher, type UiRouter } from './context';
+import { type ComponentDefaults } from './defaults';
+import { type ComponentStyles } from './styles';
+import { type Lang } from './lang/lang';
+import type { WorkCalendar } from '../utils/data/workdays';
+import type { HttpClient } from '../utils/request/http';
+import { type ThemeInput } from './theme/theme';
+/** 局部配置；都不写时只是透明的容器，沿用上层配置 */
+export interface ProviderProps {
+    /** 主题；不写时沿用上层配置 */
+    theme?: ThemeInput;
+    /** 语言；只写要改的字段，其余沿用上层配置 */
+    lang?: Partial<Lang>;
+    /** 代码高亮器（CodeBlock 用）；不写时沿用上层配置 */
+    highlighter?: Highlighter;
+    /** 额外的文字匹配（拼音）；不写时沿用上层配置 */
+    textMatcher?: TextMatcher;
+    /** 组件默认值：按组件逐个与上层合并，只写要改的 */
+    defaults?: ComponentDefaults;
+    /** 组件的主题定制：追加在上层的定制之后（见 styles.ts） */
+    styles?: ComponentStyles;
+    /** 路由适配；不写时沿用上层配置 */
+    router?: UiRouter;
+    /** 请求客户端；不写时沿用上层配置 */
+    http?: HttpClient;
+    /** 工作日历；不写时沿用上层配置 */
+    workCalendar?: WorkCalendar;
+    /** 波纹效果的开关；不写时沿用上层配置 */
+    ripple?: boolean;
+    children?: VNodeChild;
+}
+/** Provider 的样式：root、themed */
+export declare const providerStyles: Readonly<{
+    root: css.CompiledStyles;
+    themed: css.CompiledStyles;
+}>;
+/**
+ * 局部配置主题与语言，可以嵌套：内层只写要改的部分，其余继承外层。
+ * 应用级配置见 createUi。
+ */
+export declare const Provider: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ProviderProps>;
+/** ConfigScope 的 props */
+export interface ConfigScopeProps {
+    children?: VNodeChild;
+}
+/**
+ * 给移出 Provider 的内容（Teleport 到 body 的 Toaster 等）重新带上当前的主题、语言与文字方向：
+ * 主题变量、lang、dir 都挂在 Provider 的元素上，传送出去的元素不再是它的后代。
+ */
+export declare const ConfigScope: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ConfigScopeProps>;

package/dist/config/Provider.js

@@ -0,0 +1,111 @@
+import { ConfigContext, useConfig } from "./context.js";
+import { mergeDefaults } from "./defaults.js";
+import { mergeStyles } from "./styles.js";
+import { resolveTheme, themeAttrs } from "./theme/theme.js";
+import { usePrefersDark } from "../utils/dom/media-query.js";
+import { defineLang } from "./lang/lang.js";
+import { computed, createVNode, mergeProps } from "vue";
+import { _component, childrenProp, readonlyProp } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/config/Provider.tsx
+/** 局部配置；都不写时只是透明的容器，沿用上层配置 */
+/** Provider 的样式：root、themed */
+var providerStyles = css.create({
+	root: { display: "contents" },
+	themed: {
+		color: "_text",
+		fontFamily: "_sans",
+		fontSize: "_md",
+		lineHeight: "_normal"
+	}
+});
+/**
+* 局部配置主题与语言，可以嵌套：内层只写要改的部分，其余继承外层。
+* 应用级配置见 createUi。
+*/
+var Provider = /*#__PURE__*/ _component((_props, _ctx) => {
+	const theme = readonlyProp(_props, "theme");
+	const lang = readonlyProp(_props, "lang");
+	const highlighter = readonlyProp(_props, "highlighter");
+	const textMatcher = readonlyProp(_props, "textMatcher");
+	const defaults = readonlyProp(_props, "defaults");
+	const styles = readonlyProp(_props, "styles");
+	const router = readonlyProp(_props, "router");
+	const http = readonlyProp(_props, "http");
+	const workCalendar = readonlyProp(_props, "workCalendar");
+	const ripple = readonlyProp(_props, "ripple");
+	const children = childrenProp(_props);
+	const parent = useConfig();
+	const prefersDark = usePrefersDark();
+	const currentTheme = computed(() => theme.value ? resolveTheme(theme.value, prefersDark.value) : parent.theme);
+	const currentLang = computed(() => lang.value ? defineLang(parent.lang, lang.value) : parent.lang);
+	const currentDefaults = computed(() => mergeDefaults(parent.defaults, defaults.value));
+	const currentStyles = computed(() => mergeStyles(parent.styles, styles.value));
+	ConfigContext.provide({
+		get theme() {
+			return currentTheme.value;
+		},
+		get lang() {
+			return currentLang.value;
+		},
+		get highlighter() {
+			return highlighter.value ?? parent.highlighter;
+		},
+		get textMatcher() {
+			return textMatcher.value ?? parent.textMatcher;
+		},
+		get defaults() {
+			return currentDefaults.value;
+		},
+		get styles() {
+			return currentStyles.value;
+		},
+		get router() {
+			return router.value ?? parent.router;
+		},
+		get http() {
+			return http.value ?? parent.http;
+		},
+		get workCalendar() {
+			return workCalendar.value ?? parent.workCalendar;
+		},
+		get ripple() {
+			return ripple.value ?? parent.ripple;
+		}
+	});
+	return () => createVNode("div", mergeProps(theme.value ? themeAttrs(currentTheme.value) : {}, css.attrs(providerStyles.root, theme.value != null && providerStyles.themed), {
+		"lang": currentLang.value.code,
+		"dir": currentLang.value.direction
+	}), [children.value]);
+}, {
+	name: "Provider",
+	props: [
+		"theme",
+		"lang",
+		"highlighter",
+		"textMatcher",
+		"defaults",
+		"styles",
+		"router",
+		"http",
+		"workCalendar",
+		"ripple"
+	]
+});
+/** ConfigScope 的 props */
+/**
+* 给移出 Provider 的内容（Teleport 到 body 的 Toaster 等）重新带上当前的主题、语言与文字方向：
+* 主题变量、lang、dir 都挂在 Provider 的元素上，传送出去的元素不再是它的后代。
+*/
+var ConfigScope = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const children = childrenProp(_props2);
+	const config = useConfig();
+	return () => createVNode("div", mergeProps(themeAttrs(config.theme), css.attrs(providerStyles.root, providerStyles.themed), {
+		"lang": config.lang.code,
+		"dir": config.lang.direction
+	}), [children.value]);
+}, { name: "ConfigScope" });
+//#endregion
+export { ConfigScope, Provider, providerStyles };
+
+//# sourceMappingURL=Provider.js.map

package/dist/config/Provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Provider.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/config/Provider.tsx"],"sourcesContent":["import { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport {\n  ConfigContext,\n  useConfig,\n  type Highlighter,\n  type TextMatcher,\n  type UiRouter,\n} from './context';\nimport { mergeDefaults, type ComponentDefaults } from './defaults';\nimport { mergeStyles, type ComponentStyles } from './styles';\nimport { defineLang, type Lang } from './lang/lang';\nimport { usePrefersDark } from '../utils/dom/media-query';\nimport type { WorkCalendar } from '../utils/data/workdays';\nimport type { HttpClient } from '../utils/request/http';\nimport { resolveTheme, themeAttrs, type ThemeInput } from './theme/theme';\n\n/** 局部配置；都不写时只是透明的容器，沿用上层配置 */\nexport interface ProviderProps {\n  /** 主题；不写时沿用上层配置 */\n  theme?: ThemeInput;\n  /** 语言；只写要改的字段，其余沿用上层配置 */\n  lang?: Partial<Lang>;\n  /** 代码高亮器（CodeBlock 用）；不写时沿用上层配置 */\n  highlighter?: Highlighter;\n  /** 额外的文字匹配（拼音）；不写时沿用上层配置 */\n  textMatcher?: TextMatcher;\n  /** 组件默认值：按组件逐个与上层合并，只写要改的 */\n  defaults?: ComponentDefaults;\n  /** 组件的主题定制：追加在上层的定制之后（见 styles.ts） */\n  styles?: ComponentStyles;\n  /** 路由适配；不写时沿用上层配置 */\n  router?: UiRouter;\n  /** 请求客户端；不写时沿用上层配置 */\n  http?: HttpClient;\n  /** 工作日历；不写时沿用上层配置 */\n  workCalendar?: WorkCalendar;\n  /** 波纹效果的开关；不写时沿用上层配置 */\n  ripple?: boolean;\n  children?: VNodeChild;\n}\n\n/** Provider 的样式：root、themed */\nexport const providerStyles = css.create({\n  // 不产生盒子，不影响布局；主题变量与文字样式照常由子元素继承\n  root: { display: 'contents' },\n  themed: {\n    color: '_text',\n    fontFamily: '_sans',\n    fontSize: '_md',\n    lineHeight: '_normal',\n  },\n});\n\n/**\n * 局部配置主题与语言，可以嵌套：内层只写要改的部分，其余继承外层。\n * 应用级配置见 createUi。\n */\nexport const Provider = _component(\n  ({\n    theme,\n    lang,\n    highlighter,\n    textMatcher,\n    defaults,\n    styles,\n    router,\n    http,\n    workCalendar,\n    ripple,\n    children,\n  }: ProviderProps) => {\n    const parent = useConfig();\n    const prefersDark = usePrefersDark();\n    const currentTheme = _derived(theme ? resolveTheme(theme, prefersDark.value) : parent.theme);\n    const currentLang = _derived(lang ? defineLang(parent.lang, lang) : parent.lang);\n    const currentDefaults = _derived(mergeDefaults(parent.defaults, defaults));\n    const currentStyles = _derived(mergeStyles(parent.styles, styles));\n    ConfigContext.provide({\n      get theme() {\n        return currentTheme;\n      },\n      get lang() {\n        return currentLang;\n      },\n      get highlighter() {\n        return highlighter ?? parent.highlighter;\n      },\n      get textMatcher() {\n        return textMatcher ?? parent.textMatcher;\n      },\n      get defaults() {\n        return currentDefaults;\n      },\n      get styles() {\n        return currentStyles;\n      },\n      get router() {\n        return router ?? parent.router;\n      },\n      get http() {\n        return http ?? parent.http;\n      },\n      get workCalendar() {\n        return workCalendar ?? parent.workCalendar;\n      },\n      get ripple() {\n        return ripple ?? parent.ripple;\n      },\n    });\n\n    return () => (\n      <div\n        {...(theme ? themeAttrs(currentTheme) : {})}\n        {...css.attrs(providerStyles.root, theme != null && providerStyles.themed)}\n        lang={currentLang.code}\n        dir={currentLang.direction}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\n/** ConfigScope 的 props */\nexport interface ConfigScopeProps {\n  children?: VNodeChild;\n}\n\n/**\n * 给移出 Provider 的内容（Teleport 到 body 的 Toaster 等）重新带上当前的主题、语言与文字方向：\n * 主题变量、lang、dir 都挂在 Provider 的元素上，传送出去的元素不再是它的后代。\n */\nexport const ConfigScope = _component(({ children }: ConfigScopeProps) => {\n  const config = useConfig();\n  return () => (\n    <div\n      {...themeAttrs(config.theme)}\n      {...css.attrs(providerStyles.root, providerStyles.themed)}\n      lang={config.lang.code}\n      dir={config.lang.direction}\n    >\n      {children}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;;AA4CA,IAAa,iBAAiB,IAAI,OAAO;CAEvC,MAAM,EAAE,SAAS,WAAW;CAC5B,QAAQ;EACN,OAAO;EACP,YAAY;EACZ,UAAU;EACV,YAAY;CACd;AACF,CAAC;;;;;AAMD,IAAa,WAAW,0BACtB,QAAA,SAYqB;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,UAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CACnB,MAAM,SAAS,UAAU;CACzB,MAAM,cAAc,eAAe;CACnC,MAAM,eAAYC,eAAY,MAAA,QAAQ,aAAY,MAAA,OAAQ,YAAY,KAAK,IAAI,OAAO,KAAK;CAC3F,MAAM,cAAWA,eAAY,KAAA,QAAO,WAAW,OAAO,MAAI,KAAA,KAAM,IAAI,OAAO,IAAI;CAC/E,MAAM,kBAAeA,eAAY,cAAc,OAAO,UAAQ,SAAA,KAAU,CAAC;CACzE,MAAM,gBAAaA,eAAY,YAAY,OAAO,QAAM,OAAA,KAAQ,CAAC;CACjE,cAAc,QAAQ;EACpB,IAAI,QAAQ;GACV,OAAA,aAAA;EACF;EACA,IAAI,OAAO;GACT,OAAA,YAAA;EACF;EACA,IAAI,cAAc;GAChB,OAAO,YAAA,SAAe,OAAO;EAC/B;EACA,IAAI,cAAc;GAChB,OAAO,YAAA,SAAe,OAAO;EAC/B;EACA,IAAI,WAAW;GACb,OAAA,gBAAA;EACF;EACA,IAAI,SAAS;GACX,OAAA,cAAA;EACF;EACA,IAAI,SAAS;GACX,OAAO,OAAA,SAAU,OAAO;EAC1B;EACA,IAAI,OAAO;GACT,OAAO,KAAA,SAAQ,OAAO;EACxB;EACA,IAAI,eAAe;GACjB,OAAO,aAAA,SAAgB,OAAO;EAChC;EACA,IAAI,SAAS;GACX,OAAO,OAAA,SAAU,OAAO;EAC1B;CACF,CAAC;CAED,aAAOC,YAAA,OAAAC,WAEE,MAAA,QAAQ,WAAU,aAAA,KAAa,IAAI,CAAC,GACrC,IAAI,MAAM,eAAe,MAAM,MAAA,SAAS,QAAQ,eAAe,MAAM,GAAC;EAAA,QACpE,YAAA,MAAY;EAAI,OACjB,YAAA,MAAY;CAAS,CAAA,GAAA,CAAA,SAAA,KAAA,CAAA;AAKhC,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH;;;;;;AAWA,IAAa,cAAc,0BAAW,SAAA,UAAoC;CAAA,MAAA,WAAAH,aAAA,OAAA;CACxE,MAAM,SAAS,UAAU;CACzB,aAAOE,YAAA,OAAAC,WAEC,WAAW,OAAO,KAAK,GACvB,IAAI,MAAM,eAAe,MAAM,eAAe,MAAM,GAAC;EAAA,QACnD,OAAO,KAAK;EAAI,OACjB,OAAO,KAAK;CAAS,CAAA,GAAA,CAAA,SAAA,KAAA,CAAA;AAKhC,GAAC,EAAA,MAAA,cAAA,CAAA"}

package/dist/config/context.d.ts

@@ -0,0 +1,90 @@
+import type { WorkCalendar } from '../utils/data/workdays';
+import type { HttpClient } from '../utils/request/http';
+import type { ComponentDefaults } from './defaults';
+import type { StyleLayers } from './styles';
+import type { Lang } from './lang/lang';
+import type { Theme } from './theme/theme';
+/**
+ * 代码高亮器：代码 + 语言 → 高亮后的行内 HTML（只含 span 与换行的 br，不含 pre、code），交给 CodeBlock。
+ * 组件库不依赖具体实现；Shiki 的实现见子路径 `@zerodep-dev/vue-tsx-pro-ui/shiki` 的 createShikiHighlighter。
+ * 返回的 HTML 直接写进页面，实现方负责转义代码里的文字。
+ */
+export type Highlighter = (code: string, lang: string) => Promise<string>;
+/**
+ * 额外的文字匹配：选项过滤、命令面板、树的搜索在内置匹配（忽略大小写与重音的包含）之外再试它，任一命中就算。
+ * 拼音匹配见子路径 `@zerodep-dev/vue-tsx-pro-ui/pinyin` 的 createPinyinMatcher
+ */
+export type TextMatcher = (text: string, query: string) => boolean;
+/**
+ * 路由适配（参考 React Aria 的 RouterProvider 与 useHref）：组件库不依赖具体的路由库。
+ * Link、LinkButton、导航组件渲染的仍是 <a href>；普通左键点击站内链接时改由 navigate 跳转（不刷新页面），
+ * 新窗口打开、按着修饰键、外部链接、下载照常交给浏览器。
+ *
+ *   createUi({ router: { navigate: (href) => router.push(href), isActive: (href) => route.path === href } })
+ */
+export interface UiRouter {
+    /** 站内跳转；收到的是组件上写的原文（/orders），不是 resolve 之后的地址 */
+    navigate: (href: string) => void;
+    /**
+     * 站内链接渲染到 <a href> 上的真实地址：补上路由的 base（/admin/orders）、hash 模式的 #（#/orders），
+     * 新标签页打开、复制链接才对。不写时原样渲染
+     */
+    resolve?: (href: string) => string;
+    /** href 是不是当前页：导航组件据此加 aria-current="page"。在渲染时调用，读路由的响应式状态就能跟随变化 */
+    isActive?: (href: string) => boolean;
+    /**
+     * 站内跳转之前问一下（useLeaveConfirmation 用）：guard 返回 false（或 resolve 成 false）时不跳转；返回注销函数。
+     * 只在路径变了时问，同一页里换 query、锚点不问
+     */
+    beforeLeave?: (guard: () => boolean | Promise<boolean>) => () => void;
+    /** 当前地址的查询参数（useQueryState 用）；读路由的响应式状态，在 watch、渲染里读能跟随变化 */
+    query?: () => QueryValues;
+    /**
+     * 改当前地址的查询参数（replace，不加历史记录）：patch 里的键覆盖，值为 undefined 的删掉，其余不动。
+     * 同一轮里调用几次要合并成一次跳转（各状态分别写入时互不覆盖）
+     */
+    replaceQuery?: (patch: QueryPatch) => void;
+}
+/** 地址里的查询参数：同名多个时是数组；只写了键（?flag）时是空字符串 */
+export type QueryValues = Readonly<Record<string, string | readonly string[]>>;
+/** 要改的查询参数：undefined 是删掉 */
+export type QueryPatch = Readonly<Record<string, string | readonly string[] | undefined>>;
+/** 提供方用 getter 暴露当前值，读取方在渲染或 computed 里读取即可跟随变化 */
+export interface UiConfig {
+    /** 当前主题（明暗已按系统设置选定） */
+    readonly theme: Theme;
+    /** 当前语言：地区格式与界面文案 */
+    readonly lang: Lang;
+    /** 代码高亮器；没有时 CodeBlock 显示纯文本 */
+    readonly highlighter?: Highlighter;
+    /** 额外的文字匹配（拼音）；没有时只按字面匹配 */
+    readonly textMatcher?: TextMatcher;
+    /** 组件默认值（见 defaults.ts） */
+    readonly defaults: ComponentDefaults;
+    /** 组件的主题定制，外层在前（见 styles.ts） */
+    readonly styles: StyleLayers;
+    /** 路由适配；没有时链接就是普通的页面跳转 */
+    readonly router?: UiRouter;
+    /** 请求客户端（远程选项、上传、列表查询用）；没有时 useHttp 给一个默认的 createHttpClient() */
+    readonly http?: HttpClient;
+    /** 工作日历（时限、剩余工作日用）；没有时只按周末算 */
+    readonly workCalendar?: WorkCalendar;
+    /** 可点击组件按下时的波纹效果，默认开启；组件的 ripple prop 可以单独覆盖 */
+    readonly ripple: boolean;
+}
+/** 配置的注入键：createUi 在应用级提供，Provider 在局部覆盖 */
+export declare const ConfigContext: import("@zerodep-dev/vue-tsx-pro-tsx").Context<UiConfig>;
+/** 默认配置：亮色主题 + 简体中文 */
+export declare const defaultConfig: UiConfig;
+/** 当前的主题与语言配置；没有 createUi 与 Provider 时为默认配置 */
+export declare function useConfig(): UiConfig;
+/**
+ * 当前语言：`const lang = useLang()`，之后 `lang.confirm`、`lang.timeZone`。
+ * 返回的对象总是转发到最新配置，在渲染函数里读取即可随 Provider 切换语言。
+ */
+export declare function useLang(): Lang;
+/**
+ * 当前配置下的文字匹配：内置匹配（按当前语言忽略大小写与重音）或 textMatcher（拼音）任一命中。
+ * 在 setup 里调用，返回的函数在渲染、计算里调用（读到最新的语言与配置）
+ */
+export declare function useTextMatcher(): () => TextMatcher;

package/dist/config/context.js

@@ -0,0 +1,58 @@
+import { createMatcher } from "../utils/data/collation.js";
+import { zhCN } from "./lang/zh-CN.js";
+import { lightTheme } from "./theme/light.js";
+import { createContext } from "@zerodep-dev/vue-tsx-pro-tsx";
+//#region src/config/context.ts
+/**
+* 组件库配置（主题与语言）的上下文：应用级由 createUi 提供，局部由 <Provider> 覆盖；
+* 都没有时使用默认值（亮色主题 + 简体中文），组件单独使用也能工作。
+*/
+/** 配置的注入键：createUi 在应用级提供，Provider 在局部覆盖 */
+var ConfigContext = createContext("Provider");
+/** 默认配置：亮色主题 + 简体中文 */
+var defaultConfig = {
+	theme: lightTheme,
+	lang: zhCN,
+	defaults: {},
+	styles: {},
+	ripple: true
+};
+/** 当前的主题与语言配置；没有 createUi 与 Provider 时为默认配置 */
+function useConfig() {
+	return ConfigContext.inject(defaultConfig);
+}
+/**
+* 当前语言：`const lang = useLang()`，之后 `lang.confirm`、`lang.timeZone`。
+* 返回的对象总是转发到最新配置，在渲染函数里读取即可随 Provider 切换语言。
+*/
+function useLang() {
+	const config = useConfig();
+	return new Proxy({}, {
+		get: (_, key) => Reflect.get(config.lang, key),
+		has: (_, key) => Reflect.has(config.lang, key),
+		ownKeys: () => Reflect.ownKeys(config.lang),
+		getOwnPropertyDescriptor: (_, key) => {
+			const descriptor = Reflect.getOwnPropertyDescriptor(config.lang, key);
+			return descriptor && {
+				...descriptor,
+				configurable: true
+			};
+		}
+	});
+}
+/**
+* 当前配置下的文字匹配：内置匹配（按当前语言忽略大小写与重音）或 textMatcher（拼音）任一命中。
+* 在 setup 里调用，返回的函数在渲染、计算里调用（读到最新的语言与配置）
+*/
+function useTextMatcher() {
+	const config = useConfig();
+	return () => {
+		const builtin = createMatcher(config.lang.code);
+		const extra = config.textMatcher;
+		return extra ? (text, query) => builtin(text, query) || extra(text, query) : builtin;
+	};
+}
+//#endregion
+export { ConfigContext, defaultConfig, useConfig, useLang, useTextMatcher };
+
+//# sourceMappingURL=context.js.map

package/dist/config/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../src/config/context.ts"],"sourcesContent":["/**\n * 组件库配置（主题与语言）的上下文：应用级由 createUi 提供，局部由 <Provider> 覆盖；\n * 都没有时使用默认值（亮色主题 + 简体中文），组件单独使用也能工作。\n */\nimport { createContext } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { createMatcher } from '../utils/data/collation';\nimport type { WorkCalendar } from '../utils/data/workdays';\nimport type { HttpClient } from '../utils/request/http';\nimport type { ComponentDefaults } from './defaults';\nimport type { StyleLayers } from './styles';\nimport type { Lang } from './lang/lang';\nimport { zhCN } from './lang/zh-CN';\nimport { lightTheme } from './theme/light';\nimport type { Theme } from './theme/theme';\n\n/**\n * 代码高亮器：代码 + 语言 → 高亮后的行内 HTML（只含 span 与换行的 br，不含 pre、code），交给 CodeBlock。\n * 组件库不依赖具体实现；Shiki 的实现见子路径 `@zerodep-dev/vue-tsx-pro-ui/shiki` 的 createShikiHighlighter。\n * 返回的 HTML 直接写进页面，实现方负责转义代码里的文字。\n */\nexport type Highlighter = (code: string, lang: string) => Promise<string>;\n\n/**\n * 额外的文字匹配：选项过滤、命令面板、树的搜索在内置匹配（忽略大小写与重音的包含）之外再试它，任一命中就算。\n * 拼音匹配见子路径 `@zerodep-dev/vue-tsx-pro-ui/pinyin` 的 createPinyinMatcher\n */\nexport type TextMatcher = (text: string, query: string) => boolean;\n\n/**\n * 路由适配（参考 React Aria 的 RouterProvider 与 useHref）：组件库不依赖具体的路由库。\n * Link、LinkButton、导航组件渲染的仍是 <a href>；普通左键点击站内链接时改由 navigate 跳转（不刷新页面），\n * 新窗口打开、按着修饰键、外部链接、下载照常交给浏览器。\n *\n *   createUi({ router: { navigate: (href) => router.push(href), isActive: (href) => route.path === href } })\n */\nexport interface UiRouter {\n  /** 站内跳转；收到的是组件上写的原文（/orders），不是 resolve 之后的地址 */\n  navigate: (href: string) => void;\n  /**\n   * 站内链接渲染到 <a href> 上的真实地址：补上路由的 base（/admin/orders）、hash 模式的 #（#/orders），\n   * 新标签页打开、复制链接才对。不写时原样渲染\n   */\n  resolve?: (href: string) => string;\n  /** href 是不是当前页：导航组件据此加 aria-current=\"page\"。在渲染时调用，读路由的响应式状态就能跟随变化 */\n  isActive?: (href: string) => boolean;\n  /**\n   * 站内跳转之前问一下（useLeaveConfirmation 用）：guard 返回 false（或 resolve 成 false）时不跳转；返回注销函数。\n   * 只在路径变了时问，同一页里换 query、锚点不问\n   */\n  beforeLeave?: (guard: () => boolean | Promise<boolean>) => () => void;\n  /** 当前地址的查询参数（useQueryState 用）；读路由的响应式状态，在 watch、渲染里读能跟随变化 */\n  query?: () => QueryValues;\n  /**\n   * 改当前地址的查询参数（replace，不加历史记录）：patch 里的键覆盖，值为 undefined 的删掉，其余不动。\n   * 同一轮里调用几次要合并成一次跳转（各状态分别写入时互不覆盖）\n   */\n  replaceQuery?: (patch: QueryPatch) => void;\n}\n\n/** 地址里的查询参数：同名多个时是数组；只写了键（?flag）时是空字符串 */\nexport type QueryValues = Readonly<Record<string, string | readonly string[]>>;\n\n/** 要改的查询参数：undefined 是删掉 */\nexport type QueryPatch = Readonly<Record<string, string | readonly string[] | undefined>>;\n\n/** 提供方用 getter 暴露当前值，读取方在渲染或 computed 里读取即可跟随变化 */\nexport interface UiConfig {\n  /** 当前主题（明暗已按系统设置选定） */\n  readonly theme: Theme;\n  /** 当前语言：地区格式与界面文案 */\n  readonly lang: Lang;\n  /** 代码高亮器；没有时 CodeBlock 显示纯文本 */\n  readonly highlighter?: Highlighter;\n  /** 额外的文字匹配（拼音）；没有时只按字面匹配 */\n  readonly textMatcher?: TextMatcher;\n  /** 组件默认值（见 defaults.ts） */\n  readonly defaults: ComponentDefaults;\n  /** 组件的主题定制，外层在前（见 styles.ts） */\n  readonly styles: StyleLayers;\n  /** 路由适配；没有时链接就是普通的页面跳转 */\n  readonly router?: UiRouter;\n  /** 请求客户端（远程选项、上传、列表查询用）；没有时 useHttp 给一个默认的 createHttpClient() */\n  readonly http?: HttpClient;\n  /** 工作日历（时限、剩余工作日用）；没有时只按周末算 */\n  readonly workCalendar?: WorkCalendar;\n  /** 可点击组件按下时的波纹效果，默认开启；组件的 ripple prop 可以单独覆盖 */\n  readonly ripple: boolean;\n}\n\n/** 配置的注入键：createUi 在应用级提供，Provider 在局部覆盖 */\nexport const ConfigContext = createContext<UiConfig>('Provider');\n\n/** 默认配置：亮色主题 + 简体中文 */\nexport const defaultConfig: UiConfig = {\n  theme: lightTheme,\n  lang: zhCN,\n  defaults: {},\n  styles: {},\n  ripple: true,\n};\n\n/** 当前的主题与语言配置；没有 createUi 与 Provider 时为默认配置 */\nexport function useConfig(): UiConfig {\n  return ConfigContext.inject(defaultConfig);\n}\n\n/**\n * 当前语言：`const lang = useLang()`，之后 `lang.confirm`、`lang.timeZone`。\n * 返回的对象总是转发到最新配置，在渲染函数里读取即可随 Provider 切换语言。\n */\nexport function useLang(): Lang {\n  const config = useConfig();\n  // 所有读取都转发到当前语言，展开与 Object.keys 也能拿到完整字段\n  return new Proxy({} as Lang, {\n    get: (_, key) => Reflect.get(config.lang, key),\n    has: (_, key) => Reflect.has(config.lang, key),\n    ownKeys: () => Reflect.ownKeys(config.lang),\n    getOwnPropertyDescriptor: (_, key) => {\n      const descriptor = Reflect.getOwnPropertyDescriptor(config.lang, key);\n      return descriptor && { ...descriptor, configurable: true };\n    },\n  });\n}\n\n/**\n * 当前配置下的文字匹配：内置匹配（按当前语言忽略大小写与重音）或 textMatcher（拼音）任一命中。\n * 在 setup 里调用，返回的函数在渲染、计算里调用（读到最新的语言与配置）\n */\nexport function useTextMatcher(): () => TextMatcher {\n  const config = useConfig();\n  return () => {\n    const builtin = createMatcher(config.lang.code);\n    const extra = config.textMatcher;\n    return extra ? (text, query) => builtin(text, query) || extra(text, query) : builtin;\n  };\n}\n"],"mappings":";;;;;;;;;;AA0FA,IAAa,gBAAgB,cAAwB,UAAU;;AAG/D,IAAa,gBAA0B;CACrC,OAAO;CACP,MAAM;CACN,UAAU,CAAC;CACX,QAAQ,CAAC;CACT,QAAQ;AACV;;AAGA,SAAgB,YAAsB;CACpC,OAAO,cAAc,OAAO,aAAa;AAC3C;;;;;AAMA,SAAgB,UAAgB;CAC9B,MAAM,SAAS,UAAU;CAEzB,OAAO,IAAI,MAAM,CAAC,GAAW;EAC3B,MAAM,GAAG,QAAQ,QAAQ,IAAI,OAAO,MAAM,GAAG;EAC7C,MAAM,GAAG,QAAQ,QAAQ,IAAI,OAAO,MAAM,GAAG;EAC7C,eAAe,QAAQ,QAAQ,OAAO,IAAI;EAC1C,2BAA2B,GAAG,QAAQ;GACpC,MAAM,aAAa,QAAQ,yBAAyB,OAAO,MAAM,GAAG;GACpE,OAAO,cAAc;IAAE,GAAG;IAAY,cAAc;GAAK;EAC3D;CACF,CAAC;AACH;;;;;AAMA,SAAgB,iBAAoC;CAClD,MAAM,SAAS,UAAU;CACzB,aAAa;EACX,MAAM,UAAU,cAAc,OAAO,KAAK,IAAI;EAC9C,MAAM,QAAQ,OAAO;EACrB,OAAO,SAAS,MAAM,UAAU,QAAQ,MAAM,KAAK,KAAK,MAAM,MAAM,KAAK,IAAI;CAC/E;AACF"}

package/dist/config/createUi.d.ts

@@ -0,0 +1,52 @@
+/**
+ * 应用级配置：在宿主入口里 `app.use(createUi({ theme, lang }))`，所有 TSX 页面共享，不必逐页包裹 Provider。
+ * 传入 ref 或 getter 即可在运行时切换主题与语言。
+ */
+import { type MaybeRefOrGetter, type Plugin } from 'vue';
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type Highlighter, type TextMatcher, type UiRouter } from './context';
+import type { ComponentDefaults } from './defaults';
+import { type ComponentStyles } from './styles';
+import { type Lang } from './lang/lang';
+import type { WorkCalendar } from '../utils/data/workdays';
+import type { HttpClient } from '../utils/request/http';
+import { type ThemeInput } from './theme/theme';
+/** 应用级配置；theme 与 lang 可以传 ref 或 getter，运行时切换，其余在安装时确定 */
+export interface UiOptions {
+    /** 主题；不写时用亮色主题，也不改动页面根元素 */
+    theme?: MaybeRefOrGetter<ThemeInput>;
+    /** 只写要改的字段，其余用简体中文的默认值 */
+    lang?: MaybeRefOrGetter<Partial<Lang>>;
+    /** 代码高亮器（CodeBlock 用），如 `@zerodep-dev/vue-tsx-pro-ui/shiki` 的 createShikiHighlighter()；不写时显示纯文本 */
+    highlighter?: Highlighter;
+    /** 额外的文字匹配，如 `@zerodep-dev/vue-tsx-pro-ui/pinyin` 的 createPinyinMatcher()：选项过滤、命令面板认拼音；不写时只按字面匹配 */
+    textMatcher?: TextMatcher;
+    /** 组件默认值，如 `{ Button: { variant: 'outline' } }`（见 defaults.ts） */
+    defaults?: ComponentDefaults;
+    /** 组件的主题定制：追加样式、新增档位，如 `{ Button: { base: { root: { letterSpacing: '0.02em' } } } }`（见 styles.ts） */
+    styles?: ComponentStyles;
+    /** 路由适配：站内链接不刷新页面地跳转、导航组件判断当前页（见 UiRouter） */
+    router?: UiRouter;
+    /** 请求客户端：createHttpClient({ baseURL, onRequest, onResponse })，或包一层 axios、ky（见 HttpClient） */
+    http?: HttpClient;
+    /** 工作日历：createWorkCalendar({ holidays, workdays }) 带上法定节假日与调休；不写时只按周末算 */
+    workCalendar?: WorkCalendar;
+    /** 按下时的波纹效果，默认 true；关掉后组件的 ripple prop 仍可单独打开 */
+    ripple?: boolean;
+    /**
+     * 页面根元素也用主题的背景色、文字色与字体，并去掉 body 的默认外边距，默认 false。
+     * 整页都由组件库主题管理的站点（如文档站）打开：页面边缘、回弹滚动露出的地方不再是浏览器的默认色，
+     * AppShell 贴满窗口、四周不留 8px 的白边；配合 themeBootScript 时接手它写的行内颜色
+     */
+    paintDocument?: boolean;
+}
+/** paintDocument 时页面根元素的样式 */
+export declare const documentStyles: Readonly<{
+    body: css.CompiledStyles;
+    page: css.CompiledStyles;
+}>;
+/**
+ * 应用级配置的 Vue 插件：`app.use(createUi({ theme: { light: lightTheme, dark: darkTheme } }))`。
+ * 主题的 CSS 变量写在页面根元素上，所有 TSX 页面共享；应用卸载时撤销。
+ */
+export declare function createUi(options?: UiOptions): Plugin;

package/dist/config/createUi.js

@@ -0,0 +1,96 @@
+import { ConfigContext, defaultConfig } from "./context.js";
+import { mergeStyles } from "./styles.js";
+import { resolveTheme, themeVariables } from "./theme/theme.js";
+import { usePrefersDark } from "../utils/dom/media-query.js";
+import { defineLang } from "./lang/lang.js";
+import { computed, effectScope, toValue, watchEffect } from "vue";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/config/createUi.ts
+/**
+* 应用级配置：在宿主入口里 `app.use(createUi({ theme, lang }))`，所有 TSX 页面共享，不必逐页包裹 Provider。
+* 传入 ref 或 getter 即可在运行时切换主题与语言。
+*/
+/** paintDocument 时页面根元素的样式 */
+var documentStyles = css.create({
+	page: {
+		backgroundColor: "_background",
+		color: "_text",
+		fontFamily: "_sans",
+		lineHeight: "_normal",
+		WebkitFontSmoothing: "antialiased",
+		MozOsxFontSmoothing: "grayscale"
+	},
+	body: { margin: 0 }
+});
+/**
+* 应用级配置的 Vue 插件：`app.use(createUi({ theme: { light: lightTheme, dark: darkTheme } }))`。
+* 主题的 CSS 变量写在页面根元素上，所有 TSX 页面共享；应用卸载时撤销。
+*/
+function createUi(options = {}) {
+	return { install(app) {
+		const scope = effectScope();
+		app.onUnmount(() => scope.stop());
+		scope.run(() => {
+			const prefersDark = usePrefersDark();
+			const theme = computed(() => resolveTheme(toValue(options.theme) ?? defaultConfig.theme, prefersDark.value));
+			const lang = computed(() => defineLang(defaultConfig.lang, toValue(options.lang) ?? {}));
+			app.provide(ConfigContext.key, {
+				get theme() {
+					return theme.value;
+				},
+				get lang() {
+					return lang.value;
+				},
+				highlighter: options.highlighter,
+				textMatcher: options.textMatcher,
+				defaults: options.defaults ?? {},
+				styles: mergeStyles({}, options.styles),
+				router: options.router,
+				http: options.http,
+				workCalendar: options.workCalendar,
+				ripple: options.ripple ?? true
+			});
+			if (options.lang && typeof document !== "undefined") {
+				const root = document.documentElement;
+				const previous = {
+					lang: root.lang,
+					dir: root.dir
+				};
+				watchEffect(() => {
+					root.lang = lang.value.code;
+					root.dir = lang.value.direction;
+				});
+				app.onUnmount(() => Object.assign(root, previous));
+			}
+			if ((options.theme || options.paintDocument) && typeof document !== "undefined") {
+				const root = document.documentElement;
+				if (options.paintDocument) root.style.removeProperty("background-color");
+				if (options.paintDocument) root.style.removeProperty("color");
+				watchEffect((onCleanup) => onCleanup(applyTheme(root, theme.value, options.paintDocument ?? false)));
+				if (options.paintDocument && document.body) {
+					const body = document.body;
+					const classes = css.attrs(documentStyles.body).class?.split(" ") ?? [];
+					body.classList.add(...classes);
+					app.onUnmount(() => body.classList.remove(...classes));
+				}
+			}
+		});
+	} };
+}
+/** 把主题的 class、CSS 变量与 data-theme 写到元素上，返回撤销函数 */
+function applyTheme(element, theme, paint) {
+	const classes = css.attrs(...theme.styles, paint && documentStyles.page).class?.split(" ").filter(Boolean) ?? [];
+	const variables = themeVariables(theme);
+	element.classList.add(...classes);
+	for (const [name, value] of Object.entries(variables)) element.style.setProperty(name, value);
+	element.dataset.theme = theme.name;
+	return () => {
+		element.classList.remove(...classes);
+		for (const name of Object.keys(variables)) element.style.removeProperty(name);
+		delete element.dataset.theme;
+	};
+}
+//#endregion
+export { createUi, documentStyles };
+
+//# sourceMappingURL=createUi.js.map

package/dist/config/createUi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createUi.js","names":[],"sources":["../../src/config/createUi.ts"],"sourcesContent":["/**\n * 应用级配置：在宿主入口里 `app.use(createUi({ theme, lang }))`，所有 TSX 页面共享，不必逐页包裹 Provider。\n * 传入 ref 或 getter 即可在运行时切换主题与语言。\n */\nimport {\n  computed,\n  effectScope,\n  toValue,\n  watchEffect,\n  type MaybeRefOrGetter,\n  type Plugin,\n} from 'vue';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport {\n  ConfigContext,\n  defaultConfig,\n  type Highlighter,\n  type TextMatcher,\n  type UiRouter,\n} from './context';\nimport type { ComponentDefaults } from './defaults';\nimport { mergeStyles, type ComponentStyles } from './styles';\nimport { defineLang, type Lang } from './lang/lang';\nimport { usePrefersDark } from '../utils/dom/media-query';\nimport type { WorkCalendar } from '../utils/data/workdays';\nimport type { HttpClient } from '../utils/request/http';\nimport { resolveTheme, themeVariables, type Theme, type ThemeInput } from './theme/theme';\n\n/** 应用级配置；theme 与 lang 可以传 ref 或 getter，运行时切换，其余在安装时确定 */\nexport interface UiOptions {\n  /** 主题；不写时用亮色主题，也不改动页面根元素 */\n  theme?: MaybeRefOrGetter<ThemeInput>;\n  /** 只写要改的字段，其余用简体中文的默认值 */\n  lang?: MaybeRefOrGetter<Partial<Lang>>;\n  /** 代码高亮器（CodeBlock 用），如 `@zerodep-dev/vue-tsx-pro-ui/shiki` 的 createShikiHighlighter()；不写时显示纯文本 */\n  highlighter?: Highlighter;\n  /** 额外的文字匹配，如 `@zerodep-dev/vue-tsx-pro-ui/pinyin` 的 createPinyinMatcher()：选项过滤、命令面板认拼音；不写时只按字面匹配 */\n  textMatcher?: TextMatcher;\n  /** 组件默认值，如 `{ Button: { variant: 'outline' } }`（见 defaults.ts） */\n  defaults?: ComponentDefaults;\n  /** 组件的主题定制：追加样式、新增档位，如 `{ Button: { base: { root: { letterSpacing: '0.02em' } } } }`（见 styles.ts） */\n  styles?: ComponentStyles;\n  /** 路由适配：站内链接不刷新页面地跳转、导航组件判断当前页（见 UiRouter） */\n  router?: UiRouter;\n  /** 请求客户端：createHttpClient({ baseURL, onRequest, onResponse })，或包一层 axios、ky（见 HttpClient） */\n  http?: HttpClient;\n  /** 工作日历：createWorkCalendar({ holidays, workdays }) 带上法定节假日与调休；不写时只按周末算 */\n  workCalendar?: WorkCalendar;\n  /** 按下时的波纹效果，默认 true；关掉后组件的 ripple prop 仍可单独打开 */\n  ripple?: boolean;\n  /**\n   * 页面根元素也用主题的背景色、文字色与字体，并去掉 body 的默认外边距，默认 false。\n   * 整页都由组件库主题管理的站点（如文档站）打开：页面边缘、回弹滚动露出的地方不再是浏览器的默认色，\n   * AppShell 贴满窗口、四周不留 8px 的白边；配合 themeBootScript 时接手它写的行内颜色\n   */\n  paintDocument?: boolean;\n}\n\n/** paintDocument 时页面根元素的样式 */\nexport const documentStyles = css.create({\n  // 字号不设：根元素的字号是 rem 的基准，留给浏览器（用户的字号设置）\n  page: {\n    backgroundColor: '_background',\n    color: '_text',\n    fontFamily: '_sans',\n    lineHeight: '_normal',\n    // macOS 上用灰度抗锯齿，深色底上的浅色文字不发虚；其他系统忽略\n    WebkitFontSmoothing: 'antialiased',\n    MozOsxFontSmoothing: 'grayscale',\n  },\n  // 浏览器给 body 的 8px 外边距：整页的外壳（AppShell）要贴满窗口\n  body: { margin: 0 },\n});\n\n/**\n * 应用级配置的 Vue 插件：`app.use(createUi({ theme: { light: lightTheme, dark: darkTheme } }))`。\n * 主题的 CSS 变量写在页面根元素上，所有 TSX 页面共享；应用卸载时撤销。\n */\nexport function createUi(options: UiOptions = {}): Plugin {\n  return {\n    install(app) {\n      const scope = effectScope();\n      app.onUnmount(() => scope.stop());\n      scope.run(() => {\n        const prefersDark = usePrefersDark();\n        const theme = computed(() =>\n          resolveTheme(toValue(options.theme) ?? defaultConfig.theme, prefersDark.value),\n        );\n        const lang = computed(() => defineLang(defaultConfig.lang, toValue(options.lang) ?? {}));\n        app.provide(ConfigContext.key, {\n          get theme() {\n            return theme.value;\n          },\n          get lang() {\n            return lang.value;\n          },\n          highlighter: options.highlighter,\n          textMatcher: options.textMatcher,\n          defaults: options.defaults ?? {},\n          styles: mergeStyles({}, options.styles),\n          router: options.router,\n          http: options.http,\n          workCalendar: options.workCalendar,\n          ripple: options.ripple ?? true,\n        });\n        // 应用级的语言也写在页面根元素上（Provider 写在自己的元素上）：读屏按 lang 选发音，\n        // 从右到左的语言靠 dir 镜像排版与滚动条；没传 lang 时不动，宿主自己管\n        if (options.lang && typeof document !== 'undefined') {\n          const root = document.documentElement;\n          const previous = { lang: root.lang, dir: root.dir };\n          watchEffect(() => {\n            root.lang = lang.value.code;\n            root.dir = lang.value.direction;\n          });\n          app.onUnmount(() => Object.assign(root, previous));\n        }\n        // 应用级没有容器元素，主题变量挂在页面根元素上；变量名带 vtp- 前缀，不会与宿主冲突。\n        // 只开 paintDocument、不传主题时用默认主题（整页也要有底色、字体，body 去掉外边距）\n        if ((options.theme || options.paintDocument) && typeof document !== 'undefined') {\n          const root = document.documentElement;\n          // themeBootScript 在应用加载前写的行内颜色：交给主题的 class\n          if (options.paintDocument) root.style.removeProperty('background-color');\n          if (options.paintDocument) root.style.removeProperty('color');\n          watchEffect((onCleanup) =>\n            onCleanup(applyTheme(root, theme.value, options.paintDocument ?? false)),\n          );\n          if (options.paintDocument && document.body) {\n            const body = document.body;\n            const classes = css.attrs(documentStyles.body).class?.split(' ') ?? [];\n            body.classList.add(...classes);\n            app.onUnmount(() => body.classList.remove(...classes));\n          }\n        }\n      });\n    },\n  };\n}\n\n/** 把主题的 class、CSS 变量与 data-theme 写到元素上，返回撤销函数 */\nfunction applyTheme(element: HTMLElement, theme: Theme, paint: boolean) {\n  const classes =\n    css\n      .attrs(...theme.styles, paint && documentStyles.page)\n      .class?.split(' ')\n      .filter(Boolean) ?? [];\n  const variables = themeVariables(theme);\n  element.classList.add(...classes);\n  for (const [name, value] of Object.entries(variables)) element.style.setProperty(name, value);\n  element.dataset.theme = theme.name;\n  return () => {\n    element.classList.remove(...classes);\n    for (const name of Object.keys(variables)) element.style.removeProperty(name);\n    delete element.dataset.theme;\n  };\n}\n"],"mappings":";;;;;;;;;;;;;AA2DA,IAAa,iBAAiB,IAAI,OAAO;CAEvC,MAAM;EACJ,iBAAiB;EACjB,OAAO;EACP,YAAY;EACZ,YAAY;EAEZ,qBAAqB;EACrB,qBAAqB;CACvB;CAEA,MAAM,EAAE,QAAQ,EAAE;AACpB,CAAC;;;;;AAMD,SAAgB,SAAS,UAAqB,CAAC,GAAW;CACxD,OAAO,EACL,QAAQ,KAAK;EACX,MAAM,QAAQ,YAAY;EAC1B,IAAI,gBAAgB,MAAM,KAAK,CAAC;EAChC,MAAM,UAAU;GACd,MAAM,cAAc,eAAe;GACnC,MAAM,QAAQ,eACZ,aAAa,QAAQ,QAAQ,KAAK,KAAK,cAAc,OAAO,YAAY,KAAK,CAC/E;GACA,MAAM,OAAO,eAAe,WAAW,cAAc,MAAM,QAAQ,QAAQ,IAAI,KAAK,CAAC,CAAC,CAAC;GACvF,IAAI,QAAQ,cAAc,KAAK;IAC7B,IAAI,QAAQ;KACV,OAAO,MAAM;IACf;IACA,IAAI,OAAO;KACT,OAAO,KAAK;IACd;IACA,aAAa,QAAQ;IACrB,aAAa,QAAQ;IACrB,UAAU,QAAQ,YAAY,CAAC;IAC/B,QAAQ,YAAY,CAAC,GAAG,QAAQ,MAAM;IACtC,QAAQ,QAAQ;IAChB,MAAM,QAAQ;IACd,cAAc,QAAQ;IACtB,QAAQ,QAAQ,UAAU;GAC5B,CAAC;GAGD,IAAI,QAAQ,QAAQ,OAAO,aAAa,aAAa;IACnD,MAAM,OAAO,SAAS;IACtB,MAAM,WAAW;KAAE,MAAM,KAAK;KAAM,KAAK,KAAK;IAAI;IAClD,kBAAkB;KAChB,KAAK,OAAO,KAAK,MAAM;KACvB,KAAK,MAAM,KAAK,MAAM;IACxB,CAAC;IACD,IAAI,gBAAgB,OAAO,OAAO,MAAM,QAAQ,CAAC;GACnD;GAGA,KAAK,QAAQ,SAAS,QAAQ,kBAAkB,OAAO,aAAa,aAAa;IAC/E,MAAM,OAAO,SAAS;IAEtB,IAAI,QAAQ,eAAe,KAAK,MAAM,eAAe,kBAAkB;IACvE,IAAI,QAAQ,eAAe,KAAK,MAAM,eAAe,OAAO;IAC5D,aAAa,cACX,UAAU,WAAW,MAAM,MAAM,OAAO,QAAQ,iBAAiB,KAAK,CAAC,CACzE;IACA,IAAI,QAAQ,iBAAiB,SAAS,MAAM;KAC1C,MAAM,OAAO,SAAS;KACtB,MAAM,UAAU,IAAI,MAAM,eAAe,IAAI,CAAC,CAAC,OAAO,MAAM,GAAG,KAAK,CAAA;KACpE,KAAK,UAAU,IAAI,GAAG,OAAO;KAC7B,IAAI,gBAAgB,KAAK,UAAU,OAAO,GAAG,OAAO,CAAC;IACvD;GACF;EACF,CAAC;CACH,EACF;AACF;;AAGA,SAAS,WAAW,SAAsB,OAAc,OAAgB;CACtE,MAAM,UACJ,IACG,MAAM,GAAG,MAAM,QAAQ,SAAS,eAAe,IAAI,CAAC,CACpD,OAAO,MAAM,GAAG,CAAC,CACjB,OAAO,OAAO,KAAK,CAAA;CACxB,MAAM,YAAY,eAAe,KAAK;CACtC,QAAQ,UAAU,IAAI,GAAG,OAAO;CAChC,KAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,SAAS,GAAG,QAAQ,MAAM,YAAY,MAAM,KAAK;CAC5F,QAAQ,QAAQ,QAAQ,MAAM;CAC9B,aAAa;EACX,QAAQ,UAAU,OAAO,GAAG,OAAO;EACnC,KAAK,MAAM,QAAQ,OAAO,KAAK,SAAS,GAAG,QAAQ,MAAM,eAAe,IAAI;EAC5E,OAAO,QAAQ,QAAQ;CACzB;AACF"}

package/dist/config/defaults.d.ts

@@ -0,0 +1,71 @@
+import type { BadgeOptions } from '../base/badge-styles';
+import type { AlertOptions } from '../feedback/Alert';
+import type { EmptyOptions } from '../feedback/Empty';
+import type { ProgressOptions } from '../feedback/Progress';
+import type { ResultOptions } from '../feedback/Result';
+import type { IndicatorOptions } from '../base/Indicator';
+import type { LinkOptions } from '../base/Link';
+import type { DialogOptions } from '../overlay/Dialog';
+import type { DrawerOptions } from '../overlay/Drawer';
+import type { AvatarOptions } from '../display/Avatar';
+import type { CardOptions } from '../display/Card';
+import type { ChoiceOptions } from '../input/choice-styles';
+import type { ControlOptions } from '../input/control';
+import type { TabsOptions } from '../navigation/Tabs';
+import type { DataTableOptions } from '../table/table-styles';
+import type { ButtonOptions } from '../base/button-core';
+/** 可以配置默认值的组件与选项；新组件有外观档位时在这里登记 */
+export interface ComponentDefaults {
+    /** Button、LinkButton、IconButton、IconLinkButton 共用 */
+    Button?: Partial<Pick<ButtonOptions, 'variant' | 'tone' | 'size' | 'radius'>>;
+    /** Badge、Tag 共用 */
+    Badge?: BadgeOptions;
+    /** Link */
+    Link?: LinkOptions;
+    /** Indicator */
+    Indicator?: IndicatorOptions;
+    /** Alert */
+    Alert?: AlertOptions;
+    /** Progress */
+    Progress?: ProgressOptions;
+    /** Empty */
+    Empty?: EmptyOptions;
+    /** Result */
+    Result?: ResultOptions;
+    /** Card */
+    Card?: CardOptions;
+    /** Dialog、AlertDialog 共用 */
+    Dialog?: DialogOptions;
+    /** Drawer */
+    Drawer?: DrawerOptions;
+    /** Avatar */
+    Avatar?: AvatarOptions;
+    /** Tabs */
+    Tabs?: TabsOptions;
+    /** 输入框：TextField、Textarea、NumberField、Select、Combobox 共用 */
+    Input?: ControlOptions;
+    /** 勾选类控件：Checkbox、RadioGroup、Switch 共用 */
+    Choice?: ChoiceOptions;
+    /** 表格：DataTable、TreeDataTable 共用 */
+    DataTable?: DataTableOptions;
+    /** 静态表格 Table */
+    Table?: DataTableOptions;
+}
+/** 合并两层默认值：按组件逐个合并，内层写了的选项覆盖外层 */
+export declare function mergeDefaults(outer: ComponentDefaults, inner: ComponentDefaults | undefined): ComponentDefaults;
+/** useDefaults 合并后的选项：给了 fallback 的项一定有值，其余可能仍是 undefined（如不写时继承字号的 size） */
+export type ResolvedDefaults<Own, Fallback> = {
+    [K in keyof Own as K extends keyof Fallback ? K : never]-?: Exclude<Own[K], undefined>;
+} & {
+    [K in keyof Own as K extends keyof Fallback ? never : K]: Own[K];
+};
+/**
+ * 组件的外观选项逐项合并：显式写的 prop > 最近一层 Provider > createUi > fallback（组件自己的默认值）。
+ * 在 setup 里调用；返回的函数在渲染时调用，读到最新的 prop 与配置（Provider 切换后跟着变）。
+ *
+ *   const appearance = useDefaults('Card', () => ({ variant, padding }), { variant: 'surface', padding: 'lg' });
+ *   const s = recipe(appearance());   // recipe = useRecipe(cardRecipe)：档位交给配方（config/styles.ts）
+ */
+export declare function useDefaults<Name extends keyof ComponentDefaults, Own extends NonNullable<ComponentDefaults[Name]>, const Fallback extends {
+    [K in keyof Own]?: Exclude<Own[K], undefined>;
+} = {}>(name: Name, read: () => Own, fallback?: Fallback): () => ResolvedDefaults<Own, Fallback>;

package/dist/config/defaults.js

@@ -0,0 +1,45 @@
+import { useConfig } from "./context.js";
+import { computed } from "vue";
+//#region src/config/defaults.ts
+/**
+* 组件默认值：应用级 `createUi({ defaults })`、局部 `<Provider defaults>` 统一改组件的默认外观，
+* 不必每处都写（参考 Ant Design 的 ConfigProvider、MUI 主题的 defaultProps）。
+* 优先级：组件上显式写的 prop > 最近一层 Provider > createUi > 组件自己的默认值。
+*
+*   createUi({ defaults: { Button: { variant: 'outline', size: 'sm' } } })
+*
+* 只收外观类的选项（样式、尺寸、色调）；行为类的（disabled、loading）每处单独决定。
+*/
+/** 合并两层默认值：按组件逐个合并，内层写了的选项覆盖外层 */
+function mergeDefaults(outer, inner) {
+	if (!inner) return outer;
+	const merged = { ...outer };
+	for (const [name, options] of Object.entries(inner)) merged[name] = {
+		...outer[name],
+		...options
+	};
+	return merged;
+}
+/**
+* 组件的外观选项逐项合并：显式写的 prop > 最近一层 Provider > createUi > fallback（组件自己的默认值）。
+* 在 setup 里调用；返回的函数在渲染时调用，读到最新的 prop 与配置（Provider 切换后跟着变）。
+*
+*   const appearance = useDefaults('Card', () => ({ variant, padding }), { variant: 'surface', padding: 'lg' });
+*   const s = recipe(appearance());   // recipe = useRecipe(cardRecipe)：档位交给配方（config/styles.ts）
+*/
+function useDefaults(name, read, fallback) {
+	const config = useConfig();
+	const resolved = computed(() => {
+		const own = read();
+		const provided = config.defaults[name] ?? {};
+		const defaults = fallback ?? {};
+		const merged = {};
+		for (const key of Object.keys(own)) merged[key] = own[key] ?? provided[key] ?? defaults[key];
+		return merged;
+	});
+	return () => resolved.value;
+}
+//#endregion
+export { mergeDefaults, useDefaults };
+
+//# sourceMappingURL=defaults.js.map