@antdv-vue/pro-provider 0.0.0-stage → 2.0.0

package/CHANGELOG.md

@@ -0,0 +1,68 @@
+# @antdv-vue/pro-provider
+
+## 2.0.0
+
+### Major Changes
+
+- feat!: remove the UMD bundle target from package builds.
+- docs: sync structured changelog pages for every package.
+
+## 1.0.14
+
+### Patch Changes
+
+- fix provider Algorithm bugs
+
+## 1.0.13
+
+### Patch Changes
+
+- fix layout filed form card bugs
+
+## 1.0.12
+
+### Patch Changes
+
+- Fix layout multi-tab prop forwarding, make SettingDrawer extra settings extensible, and align docs deployment build command.
+
+## 1.0.11
+
+### Patch Changes
+
+- Refine layout multi-tab rendering and setting drawer dark theme behavior.
+
+## 1.0.10
+
+### Patch Changes
+
+- fix provider styles and locale exports
+
+## 1.0.9
+
+### Patch Changes
+
+- fix bugs
+
+## 1.0.8
+
+### Patch Changes
+
+- create listy card mode
+
+## 1.0.7
+
+### Patch Changes
+
+- change version
+
+## 1.0.6
+
+### Patch Changes
+
+- fix layout bugs and listy
+
+## 1.0.5
+
+### Patch Changes
+
+- fix ProForm bugs

package/README.md

@@ -1,3 +1,137 @@
-# Temporary Holding Version
+# @antdv-vue/pro-provider
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Global configuration provider, internationalization (i18n), and theme context for Pro Components.
+
+## Installation
+
+```bash
+npm install @antdv-vue/pro-provider
+# or
+pnpm add @antdv-vue/pro-provider
+```
+
+## Peer Dependencies
+
+- `vue` >= 3.5.30
+- `antdv-next` >= 1.3.6
+
+## What's Included
+
+### Components
+
+| Component | Description |
+|-----------|-------------|
+| `ProConfigProvider` | Global configuration provider for Pro Components |
+
+### Exports
+
+| Export | Description |
+|--------|-------------|
+| `ProConfigProvider` | Global config provider wrapper component |
+| `useIntl` | Composable to access current internationalization instance |
+| `intlMap` | Built-in i18n language map |
+| Context utilities | Shared context providers and consumers |
+| `useStyle` | CSS-in-JS style composition utilities |
+| Layout token types | Type definitions for layout design tokens |
+
+### ProConfigProvider Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `dark` | `boolean` | `false` | Enable dark theme |
+| `compact` | `boolean` | `false` | Enable compact mode |
+| `needDeps` | `boolean` | — | Whether dependencies are needed |
+| `token` | `DeepPartial<ProAliasToken>` | — | Custom design tokens |
+| `prefixCls` | `string` | — | CSS class prefix |
+| `valueTypeMap` | `Record<string, ProRenderFieldPropsType>` | — | Custom value type renderers |
+| `hashed` | `boolean` | — | Enable CSS-in-JS hash |
+| `intl` | `IntlType` | — | Custom internationalization instance |
+
+### Core Types
+
+| Type | Description |
+|------|-------------|
+| `ProSchemaValueEnumType` | Value enum configuration (text, status, color, disabled) |
+| `ProSchemaValueEnumMap` | Map-based value enum |
+| `ProSchemaValueEnumObj` | Object-based value enum |
+| `ProFieldFCMode` | Field render mode: `'read' \| 'edit' \| 'update'` |
+| `BaseProFieldFC` | Base field component type |
+| `ProFieldFCRenderProps` | Field render props |
+| `ProRenderFieldPropsType` | Custom field renderer type |
+| `ParamsType` | General params type |
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { ProConfigProvider } from '@antdv-vue/pro-provider'
+</script>
+
+<template>
+  <ProConfigProvider :dark="false" :compact="false">
+    <YourApp />
+  </ProConfigProvider>
+</template>
+```
+
+### Theme Integration
+
+Use `ConfigProvider.theme` for antdv-next component tokens and `ProConfigProvider.token` for Pro component tokens.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const dark = ref(false)
+const compact = ref(false)
+</script>
+
+<template>
+  <a-config-provider :theme="{ token: { colorPrimary: '#1677ff' } }">
+    <ProConfigProvider
+      :dark="dark"
+      :compact="compact"
+      :token="{
+        layout: {
+          header: {
+            colorBgHeader: '#001529',
+            colorHeaderTitle: '#fff',
+          },
+        },
+      }"
+    >
+      <YourApp />
+    </ProConfigProvider>
+  </a-config-provider>
+</template>
+```
+
+- `dark` and `compact` merge antdv-next algorithms into the current theme algorithm.
+- Nested providers are scoped to their own subtree. Child provider tokens do not update unrelated global Pro components.
+- Pro theme variables are emitted as CSS variables with the `css-var-pro` key, so dynamic theme changes update variable styles instead of reinserting component style text.
+- Generated styles reuse `ConfigProvider.csp.nonce` when CSP is configured.
+
+### Style Hook for Pro Components
+
+`useStyle` is the shared CSS-in-JS helper for Pro packages. Component style hooks generated by `useStyle` return both the hash class and the CSS variable scope class:
+
+```tsx
+const [hashId, cssVarCls] = useStyle(prefixCls)
+
+return () => (
+  <div class={[prefixCls.value, hashId.value, cssVarCls.value]}>
+    {slots.default?.()}
+  </div>
+)
+```
+
+When authoring a Pro component:
+
+- attach both `hashId` and `cssVarCls` to the component root;
+- keep component styles expressed with token values instead of hard-coded theme colors;
+- pass `injectStyle: false` only when a component intentionally wants to skip runtime style injection;
+- reset/common styles are registered before component styles so component selectors with overlapping prefixes keep priority.
+
+## License
+
+[MIT](../../LICENSE)

package/dist/ConfigProviderContainer.d.ts

@@ -0,0 +1,10 @@
+import { ProConfigProviderProps } from "./typing.js";
+import * as _$vue from "vue";
+import { CustomSlotsType, VueNode } from "@v-c/util/dist/type";
+
+//#region src/ConfigProviderContainer.d.ts
+declare const ConfigProviderContainer: _$vue.DefineSetupFnComponent<ProConfigProviderProps, {}, CustomSlotsType<{
+  default?: () => VueNode;
+}>, ProConfigProviderProps & {}, _$vue.PublicProps>;
+//#endregion
+export { ConfigProviderContainer as default };

package/dist/ConfigProviderContainer.js

@@ -0,0 +1,207 @@
+import { findIntlKeyByAntdLocaleKey, intlMap, zhCNIntl } from "./intl.js";
+import { useProCacheTokenProvider, useProConfig, useProConfigProvider } from "./context.js";
+import { getLayoutDesignToken, proLayoutUnitless } from "./typing/layoutToken.js";
+import { isNeedOpenHash } from "./utils/index.js";
+import { shallowMergeOneLevel } from "./utils/merge.js";
+import { computed, createVNode, defineComponent, mergeProps, watch } from "vue";
+import { useCacheToken } from "@antdv-next/cssinjs";
+import { ConfigProvider, theme } from "antdv-next";
+import { useConfig } from "antdv-next/config-provider/context";
+import { ignore } from "antdv-next/dist/theme/useToken";
+import dayjs from "dayjs";
+import "dayjs/locale/zh-cn";
+//#region src/ConfigProviderContainer.tsx
+const preserve = {
+	screenXS: true,
+	screenXSMin: true,
+	screenXSMax: true,
+	screenSM: true,
+	screenSMMin: true,
+	screenSMMax: true,
+	screenMD: true,
+	screenMDMin: true,
+	screenMDMax: true,
+	screenLG: true,
+	screenLGMin: true,
+	screenLGMax: true,
+	screenXL: true,
+	screenXLMin: true,
+	screenXLMax: true,
+	screenXXL: true,
+	screenXXLMin: true,
+	screenXXLMax: true,
+	screenXXXL: true,
+	screenXXXLMin: true
+};
+function flattenToken(token, prefix = "") {
+	const result = {};
+	for (const [key, value] of Object.entries(token)) {
+		const currentKey = prefix ? `${prefix}${key.charAt(0).toUpperCase()}${key.slice(1)}` : key;
+		if (value && typeof value === "object" && !Array.isArray(value)) Object.assign(result, flattenToken(value, currentKey));
+		else result[currentKey] = value;
+	}
+	return result;
+}
+/**
+* 解析最终使用的 intl 实例。优先级从高到低：
+* 1. 组件 props 显式传入的 `intl`
+* 2. 父级 Provider 里非 `default` 的 intl（即用户已显式配置过）
+* 3. 根据 antd 的 locale 推断（zh_CN → zh-CN → zhCNIntl）
+* 4. 兜底 zh-CN
+*/
+function resolveIntl(propsIntl, parentIntl, antdLocaleName) {
+	if (propsIntl) return propsIntl;
+	if (parentIntl && parentIntl.locale !== "default") return parentIntl;
+	if (antdLocaleName) {
+		const key = findIntlKeyByAntdLocaleKey(antdLocaleName);
+		const found = key ? intlMap[key] : void 0;
+		if (found) return found;
+	}
+	return zhCNIntl;
+}
+const ConfigProviderContainer = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const config = useConfig();
+	const proProvide = useProConfig();
+	const tokenContext = theme.useToken?.();
+	const mergedProps = computed(() => ({
+		...attrs,
+		...props
+	}));
+	/**
+	* pro 的 类
+	* @example ref('.ant-pro')
+	*/
+	const proComponentsCls = computed(() => mergedProps.value.prefixCls ? `.${mergedProps.value.prefixCls}` : `.${config.value.getPrefixCls()}-pro`);
+	const antCls = computed(() => `.${config.value.getPrefixCls()}`);
+	const salt = computed(() => `${proComponentsCls.value}`);
+	const proLayoutTokenMerge = computed(() => getLayoutDesignToken(mergedProps.value.token || {}, tokenContext.token.value));
+	const proProvideValue = computed(() => {
+		return {
+			...proProvide.value,
+			dark: mergedProps.value.dark ?? proProvide.value.dark,
+			compact: mergedProps.value.compact ?? proProvide.value.compact,
+			token: shallowMergeOneLevel(proProvide.value.token, tokenContext.token.value, {
+				proComponentsCls: proComponentsCls.value,
+				antCls: antCls.value,
+				themeId: tokenContext.theme.value.id,
+				layout: proLayoutTokenMerge.value
+			}),
+			intl: resolveIntl(mergedProps.value.intl, proProvide.value.intl, config.value.locale?.locale)
+		};
+	});
+	const finalToken = computed(() => ({
+		...proProvideValue.value?.token || {},
+		proComponentsCls: proComponentsCls.value
+	}));
+	const cacheToken = useCacheToken(tokenContext.theme, computed(() => {
+		const { layout, ...restFinalToken } = finalToken.value || {};
+		const prolayoutToken = flattenToken({ layout }, "pro");
+		return [tokenContext.token.value, {
+			...restFinalToken,
+			...prolayoutToken
+		}];
+	}), computed(() => {
+		const { layout, ...restFinalToken } = finalToken.value || {};
+		const prolayoutToken = flattenToken({ layout }, "pro");
+		return {
+			salt: salt.value,
+			override: {
+				...restFinalToken,
+				...prolayoutToken
+			},
+			cssVar: {
+				key: "css-var-pro",
+				unitless: proLayoutUnitless,
+				ignore,
+				preserve,
+				prefix: "ant"
+			},
+			nonce: config.value.csp?.nonce
+		};
+	}));
+	const hashed = computed(() => {
+		if (mergedProps.value.hashed === false) return false;
+		if (proProvide.value.hashed === false) return false;
+		return true;
+	});
+	const hashId = computed(() => {
+		if (mergedProps.value.hashed === false) return "";
+		if (proProvide.value.hashed === false) return "";
+		if (isNeedOpenHash() === false) return "";
+		else return cacheToken.value[1];
+	});
+	watch(() => config.value.locale?.locale, () => {
+		dayjs.locale(config.value.locale?.locale || "zh-cn");
+	}, { immediate: true });
+	const themeConfig = computed(() => {
+		const { locale, getPrefixCls, ...restConfig } = config.value;
+		return {
+			...restConfig.theme,
+			hashId: hashId.value,
+			hashed: hashed.value && isNeedOpenHash()
+		};
+	});
+	const proConfigConsumerValue = computed(() => {
+		return {
+			...proProvideValue.value,
+			valueTypeMap: mergedProps.value.valueTypeMap || proProvide.value.valueTypeMap,
+			token: finalToken.value,
+			theme: tokenContext.theme.value,
+			hashed: hashed.value,
+			hashId: hashId.value,
+			prefixCls: mergedProps.value.prefixCls
+		};
+	});
+	useProCacheTokenProvider({
+		realToken: computed(() => cacheToken.value[2]),
+		token: computed(() => cacheToken.value[0])
+	});
+	useProConfigProvider(proConfigConsumerValue);
+	return () => {
+		const { locale, getPrefixCls, ...restConfig } = config.value;
+		return createVNode(ConfigProvider, mergeProps(restConfig, { "theme": themeConfig.value }), { default: () => [slots.default?.()] });
+	};
+}, {
+	props: {
+		dark: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		compact: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		needDeps: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		token: {
+			type: Object,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		valueTypeMap: {
+			type: Object,
+			required: false
+		},
+		hashed: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		intl: {
+			type: Object,
+			required: false
+		}
+	},
+	name: "ConfigProviderContainer",
+	inheritAttrs: false
+});
+//#endregion
+export { ConfigProviderContainer as default };

package/dist/ProConfigProvider.d.ts

@@ -0,0 +1,12 @@
+import { ProConfigProviderProps } from "./typing.js";
+import * as _$vue from "vue";
+import { Plugin } from "vue";
+import { CustomSlotsType, VueNode } from "@v-c/util/dist/type";
+
+//#region src/ProConfigProvider.d.ts
+declare const _ProConfigProvider: _$vue.DefineSetupFnComponent<ProConfigProviderProps, {}, CustomSlotsType<{
+  default?: () => VueNode;
+}>, ProConfigProviderProps & {}, _$vue.PublicProps>;
+declare const ProConfigProvider: typeof _ProConfigProvider & Plugin;
+//#endregion
+export { ProConfigProvider as default };

package/dist/ProConfigProvider.js

@@ -0,0 +1,115 @@
+import { useProConfig } from "./context.js";
+import ConfigProviderContainer from "./ConfigProviderContainer.js";
+import { Fragment, computed, createVNode, defineComponent, mergeProps } from "vue";
+import { ConfigProvider, theme } from "antdv-next";
+import { useConfig } from "antdv-next/config-provider/context";
+import zh_CN from "antdv-next/locale/zh_CN";
+//#region src/ProConfigProvider.tsx
+function omitUndefined(obj) {
+	const newObj = {};
+	Object.keys(obj || {}).forEach((key) => {
+		if (obj?.[key] !== void 0) newObj[key] = obj[key];
+	});
+	if (Object.keys(newObj || {}).length < 1) return;
+	return newObj;
+}
+function uniqueAlgorithm(algorithms) {
+	return Array.from(new Set(algorithms));
+}
+const ProConfigProvider = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const config = useConfig();
+	const proProvide = useProConfig();
+	const mergedProps = computed(() => ({
+		...attrs,
+		...props
+	}));
+	const mergeAlgorithm = () => {
+		const algorithm = config.value.theme?.algorithm;
+		const isDark = mergedProps.value.dark ?? proProvide.value.dark;
+		const isCompact = mergedProps.value.compact ?? proProvide.value.compact;
+		if (algorithm) {
+			if (!Array.isArray(algorithm)) {
+				if (isDark && !isCompact) return uniqueAlgorithm([algorithm, theme.darkAlgorithm]).filter(Boolean);
+				else if (!isDark && isCompact) return uniqueAlgorithm([algorithm, theme.compactAlgorithm]).filter(Boolean);
+				else if (isDark && isCompact) return uniqueAlgorithm([
+					algorithm,
+					theme.darkAlgorithm,
+					theme.compactAlgorithm
+				]).filter(Boolean);
+			} else if (isDark && !isCompact) return uniqueAlgorithm([...algorithm || [], theme.darkAlgorithm]).filter(Boolean);
+			else if (!isDark && isCompact) return uniqueAlgorithm([...algorithm || [], theme.compactAlgorithm]).filter(Boolean);
+			else if (isDark && isCompact) return uniqueAlgorithm([
+				...algorithm || [],
+				theme.darkAlgorithm,
+				theme.compactAlgorithm
+			]).filter(Boolean);
+		} else if (isDark && !isCompact) return [theme.darkAlgorithm];
+		else if (!isDark && isCompact) return [theme.compactAlgorithm];
+		else if (isDark && isCompact) return [theme.darkAlgorithm, theme.compactAlgorithm];
+		return algorithm;
+	};
+	const isNullProvide = computed(() => mergedProps.value.needDeps && proProvide.value.hashId !== void 0 && Object.keys(Object.fromEntries(Object.entries(mergedProps.value).filter(([, v]) => v !== void 0))).sort().join("-") === "needDeps");
+	const configProviderProps = computed(() => {
+		const { locale, theme, ...rest } = config.value;
+		return {
+			...rest,
+			locale: locale || zh_CN,
+			theme: omitUndefined({
+				...theme,
+				algorithm: mergeAlgorithm()
+			})
+		};
+	});
+	return () => {
+		const { token } = mergedProps.value;
+		if (isNullProvide.value) return createVNode(Fragment, null, [slots.default?.()]);
+		return createVNode(ConfigProvider, configProviderProps.value, { default: () => [createVNode(ConfigProviderContainer, mergeProps(mergedProps.value, { "token": token }), slots)] });
+	};
+}, {
+	props: {
+		dark: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		compact: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		needDeps: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		token: {
+			type: Object,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		valueTypeMap: {
+			type: Object,
+			required: false
+		},
+		hashed: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		intl: {
+			type: Object,
+			required: false
+		}
+	},
+	name: "ProConfigProvider",
+	inheritAttrs: false
+});
+ProConfigProvider.install = (app) => {
+	app.component(ProConfigProvider.name, ProConfigProvider);
+	return app;
+};
+//#endregion
+export { ProConfigProvider as default };