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

package/dist/typing.d.ts

@@ -0,0 +1,99 @@
+import { IntlType } from "./intl.js";
+import { DeepPartial } from "./typing/layoutToken.js";
+import { ProAliasToken } from "./useStyle/index.js";
+import { VueNode } from "@v-c/util/dist/type";
+import { Key } from "antdv-next/dist/table/interface";
+
+//#region src/typing.d.ts
+interface ProConfigProviderProps {
+  dark?: boolean;
+  compact?: boolean;
+  needDeps?: boolean;
+  token?: DeepPartial<ProAliasToken>;
+  prefixCls?: string;
+  valueTypeMap?: Record<string, ProRenderFieldPropsType>;
+  hashed?: boolean;
+  intl?: IntlType;
+}
+/**
+ * 用于配置 ValueEnum 的通用配置
+ */
+interface ProSchemaValueEnumType {
+  /** @name text 演示的文案 */
+  text: VueNode;
+  /** @name status 预定的颜色 */
+  status?: string;
+  /** @name  color 自定义的颜色 */
+  color?: string;
+  /** @name disabled  是否禁用 */
+  disabled?: boolean;
+}
+/**
+ * 支持 Map 和 Object
+ *
+ * @name ProSchemaValueEnumMap ValueEnum 的类型
+ */
+type ProSchemaValueEnumMap = Map<string | number | boolean, ProSchemaValueEnumType | VueNode>;
+/**
+ * 支持 Map 和 Object
+ */
+type ProSchemaValueEnumObj = Record<string, ProSchemaValueEnumType | VueNode>;
+type ProFieldFCMode = 'read' | 'edit' | 'update';
+/**
+ * BaseProFieldFC 的类型设置
+ */
+interface BaseProFieldFC<T = any> {
+  /** 值的类型 */
+  text?: VueNode;
+  'onUpdate:text'?: (text: VueNode) => void;
+  /** 放置到组件上 props */
+  fieldProps?: T;
+  /**
+   * 组件的渲染模式类型
+   * @option read 渲染只读模式
+   * @option edit 渲染编辑模式
+   * @option update 渲染更新模式
+   */
+  mode?: ProFieldFCMode;
+  /** 轻量模式 */
+  light?: boolean;
+  /** Label */
+  label?: VueNode;
+  /** 映射值的类型 */
+  valueEnum?: ProSchemaValueEnumObj | ProSchemaValueEnumMap;
+  /** 唯一的key，用于网络请求 */
+  proFieldKey?: Key;
+}
+/** Render 第二个参数，里面包含了一些常用的参数 */
+type ProFieldFCRenderProps<T = any> = {
+  mode?: ProFieldFCMode;
+  readonly?: boolean;
+  placeholder?: string | string[];
+  value?: any;
+  'onUpdate:value'?: (value: any) => void;
+  onChange?: (...rest: any[]) => void;
+} & BaseProFieldFC<T>;
+interface ProRenderFieldPropsType<T = any> {
+  /**
+   * 自定义只读模式的渲染器
+   * @params props 关于dom的配置
+   * @params dom 默认的 dom
+   * @return 返回一个用于读的 dom
+   */
+  render?: ((text: any, props: Omit<ProFieldFCRenderProps<T>, 'value' | 'onUpdate:value' | 'onChange'> & {
+    [key: string]: any;
+  }, dom: VueNode) => VueNode);
+  /**
+   * 一个自定义的编辑渲染器。
+   * @params text 默认的值类型
+   * @params props 关于dom的配置
+   * @params dom 默认的 dom
+   * @return 返回一个用于编辑的dom
+   */
+  formItemRender?: ((text: any, props: ProFieldFCRenderProps<T> & {
+    [key: string]: any;
+  }, dom: VueNode) => VueNode);
+}
+type ParamsType = Record<string, any>;
+//#endregion
+export { BaseProFieldFC, ParamsType, ProConfigProviderProps, ProFieldFCMode, ProFieldFCRenderProps, ProRenderFieldPropsType, ProSchemaValueEnumType };

package/dist/typing.js

@@ -0,0 +1 @@
+export {};

package/dist/useStyle/index.d.ts

@@ -0,0 +1,162 @@
+import { ProFlattenTokenType, ProTokenType } from "../typing/layoutToken.js";
+import { hashCode } from "./token.js";
+import * as _$vue from "vue";
+import { Ref } from "vue";
+import * as _$_antdv_next_cssinjs0 from "@antdv-next/cssinjs";
+import { CSSObject, StyleInfo, Theme, TokenMap, genCalc } from "@antdv-next/cssinjs";
+import { GlobalToken } from "antdv-next";
+import genMaxMin from "@antdv-next/cssinjs/dist/cssinjs-utils/util/maxmin";
+import * as _$antdv_next_dist_theme_internal0 from "antdv-next/dist/theme/internal";
+import * as _$antdv_next_dist_theme_themes_default_index0 from "antdv-next/dist/theme/themes/default/index";
+import * as _$antdv_next_dist_theme_interface_index0 from "antdv-next/dist/theme/interface/index";
+import { AliasToken, CSSInterpolation } from "antdv-next/dist/theme/interface/index";
+import * as _$antdv_next_dist_theme_getDesignToken0 from "antdv-next/dist/theme/getDesignToken";
+
+//#region src/useStyle/index.d.ts
+/**
+ * 把一个颜色设置一下透明度
+ * @example (#fff, 0.5) => rgba(255, 255, 255, 0.5)
+ * @param baseColor {string}
+ * @param alpha {number} 0-1
+ * @returns rgba {string}
+ */
+declare function setAlpha(baseColor: string, alpha: number): string;
+/**
+ * 把一个颜色修改一些明度
+ * @example (#000, 50) => #808080
+ * @param baseColor {string}
+ * @param brightness {number} 0-100
+ * @returns hexColor {string}
+ */
+declare function lighten(baseColor: string, brightness: number): string;
+type GenerateStyle<ComponentToken extends object = GlobalToken, ReturnType = CSSInterpolation> = (token: ComponentToken, ...rest: any[]) => ReturnType;
+declare const proTheme: {
+  defaultSeed: _$antdv_next_dist_theme_internal0.SeedToken;
+  useToken: () => {
+    theme: _$vue.Ref<_$_antdv_next_cssinjs0.Theme<_$antdv_next_dist_theme_internal0.SeedToken, AliasToken>, _$_antdv_next_cssinjs0.Theme<_$antdv_next_dist_theme_internal0.SeedToken, AliasToken>>;
+    token: _$vue.Ref<GlobalToken, GlobalToken>;
+    hashId: _$vue.Ref<string, string>;
+  };
+  defaultAlgorithm: typeof _$antdv_next_dist_theme_themes_default_index0.default;
+  darkAlgorithm: _$_antdv_next_cssinjs0.DerivativeFunc<_$antdv_next_dist_theme_internal0.SeedToken, _$antdv_next_dist_theme_interface_index0.MapToken>;
+  compactAlgorithm: _$_antdv_next_cssinjs0.DerivativeFunc<_$antdv_next_dist_theme_internal0.SeedToken, _$antdv_next_dist_theme_interface_index0.MapToken>;
+  getDesignToken: typeof _$antdv_next_dist_theme_getDesignToken0.default;
+  defaultConfig: {
+    token: _$antdv_next_dist_theme_internal0.SeedToken;
+    override: {
+      override: _$antdv_next_dist_theme_internal0.SeedToken;
+    };
+    hashed: boolean;
+  };
+} | {
+  useToken: () => {
+    theme: _$vue.ComputedRef<Theme<any, any>>;
+    token: _$vue.ComputedRef<GlobalToken>;
+    hashId: _$vue.ComputedRef<string>;
+  };
+  token: {
+    theme: _$vue.ComputedRef<Theme<any, any>>;
+    token: _$vue.ComputedRef<GlobalToken>;
+    hashId: _$vue.ComputedRef<string>;
+  };
+  emptyTheme: Theme<any, any>;
+  hashCode: typeof hashCode;
+  defaultToken: GlobalToken;
+};
+declare const useToken: (() => {
+  theme: _$vue.ComputedRef<Theme<any, any>>;
+  token: _$vue.ComputedRef<GlobalToken>;
+  hashId: _$vue.ComputedRef<string>;
+}) | (() => {
+  theme: _$vue.Ref<_$_antdv_next_cssinjs0.Theme<_$antdv_next_dist_theme_internal0.SeedToken, AliasToken>, _$_antdv_next_cssinjs0.Theme<_$antdv_next_dist_theme_internal0.SeedToken, AliasToken>>;
+  token: _$vue.Ref<GlobalToken, GlobalToken>;
+  hashId: _$vue.Ref<string, string>;
+});
+type ProAliasToken = GlobalToken & ProTokenType & {
+  themeId: number;
+  /**
+   * pro 的 className
+   * @type {string}
+   * @example .ant-pro
+   */
+  proComponentsCls: string;
+  /**
+   * antd 的 className
+   * @type {string}
+   * @example .ant
+   */
+  antCls: string;
+  /**
+   * antd 的 iconCls
+   * @type {string}
+   * @example .anticon
+   */
+  iconCls?: string;
+};
+type ProAliasCssVarToken = GlobalToken & ProFlattenTokenType & {
+  componentCls: string;
+  themeId: number;
+  /**
+   * pro 的 className
+   * @type {string}
+   * @example .ant-pro
+   */
+  proComponentsCls: string;
+  /**
+   * antd 的 className
+   * @type {string}
+   * @example .ant
+   */
+  antCls: string;
+  /**
+   * antd 的 iconCls
+   * @type {string}
+   * @example .anticon
+   */
+  iconCls?: string;
+  calc: ReturnType<typeof genCalc>;
+  min: ReturnType<typeof genMaxMin>['min'];
+  max: ReturnType<typeof genMaxMin>['max'];
+} & {
+  [key: string]: any;
+};
+declare function resetComponent(token: ProAliasToken): CSSObject;
+declare function operationUnit(token: ProAliasToken): CSSObject;
+declare const useStyle: (component: string | [string, string], styleFn: (token: ProAliasCssVarToken, info: StyleInfo & {
+    proComponentsCls: string;
+  }) => CSSInterpolation, getDefaultToken?: (token: AliasToken) => TokenMap, options?: {
+    /**
+     * Component tokens that do not need unit.
+     */
+    unitless?: Record<string, boolean>;
+    /**
+     * Only use component style in client side. Ignore in SSR.
+     */
+    clientOnly?: boolean;
+    /**
+     * Set order of component style.
+     * @default -999
+     */
+    order?: number;
+    /**
+     * Whether generate styles
+     * @default true
+     */
+    injectStyle?: boolean;
+  }) => (prefixCls: Ref<string>, rootCls?: Ref<string | undefined>) => readonly [Ref<string, string>, _$vue.ComputedRef<string | undefined>], genComponentStyleHook: (componentName: string | [string, string], styleFn: (token: ProAliasCssVarToken, info: StyleInfo & {
+    proComponentsCls: string;
+  }) => CSSInterpolation, getDefaultToken: ((token: AliasToken) => TokenMap) | undefined, options?: {
+    deprecatedTokens?: any[];
+    /**
+     * Only use component style in client side. Ignore in SSR.
+     */
+    clientOnly?: boolean;
+    /**
+     * Set order of component style. Default is -999.
+     */
+    order?: number;
+    injectStyle?: boolean;
+    unitless?: Record<string, boolean>;
+  }) => (prefixCls: Ref<string>) => Ref<string, string>;
+//#endregion
+export { GenerateStyle, ProAliasCssVarToken, ProAliasToken, genComponentStyleHook, lighten, operationUnit, proTheme, resetComponent, setAlpha, useStyle, useToken };

package/dist/useStyle/index.js

@@ -0,0 +1,254 @@
+import { useProCacheToken, useProConfig } from "../context.js";
+import token_default from "./token.js";
+import { computed } from "vue";
+import { genCalc, mergeToken, statisticToken, token2CSSVar, useCSSVarRegister } from "@antdv-next/cssinjs";
+import { theme } from "antdv-next";
+import { useConfig } from "antdv-next/config-provider/context";
+import useLocalToken, { unitless } from "antdv-next/dist/theme/useToken";
+import { FastColor } from "@ant-design/fast-color";
+import useUniqueMemo from "@antdv-next/cssinjs/dist/cssinjs-utils/_util/hooks/useUniqueMemo";
+import useDefaultCSP from "@antdv-next/cssinjs/dist/cssinjs-utils/hooks/useCSP";
+import getComponentToken from "@antdv-next/cssinjs/dist/cssinjs-utils/util/getComponentToken";
+import getCompVarPrefix from "@antdv-next/cssinjs/dist/cssinjs-utils/util/getCompVarPrefix";
+import getDefaultComponentToken from "@antdv-next/cssinjs/dist/cssinjs-utils/util/getDefaultComponentToken";
+import genMaxMin from "@antdv-next/cssinjs/dist/cssinjs-utils/util/maxmin";
+import useStyleRegister from "@antdv-next/cssinjs/dist/hooks/useStyleRegister";
+//#region src/useStyle/index.ts
+/**
+* 把一个颜色设置一下透明度
+* @example (#fff, 0.5) => rgba(255, 255, 255, 0.5)
+* @param baseColor {string}
+* @param alpha {number} 0-1
+* @returns rgba {string}
+*/
+function setAlpha(baseColor, alpha) {
+	return new FastColor(baseColor).setA(alpha).toRgbString();
+}
+/**
+* 把一个颜色修改一些明度
+* @example (#000, 50) => #808080
+* @param baseColor {string}
+* @param brightness {number} 0-100
+* @returns hexColor {string}
+*/
+function lighten(baseColor, brightness) {
+	return new FastColor(baseColor).lighten(brightness).toHexString();
+}
+function genTheme() {
+	if (typeof theme === "undefined" || !theme) return token_default;
+	return theme;
+}
+const proTheme = genTheme();
+const useToken = proTheme.useToken;
+function resetComponent(token) {
+	return {
+		boxSizing: "border-box",
+		margin: 0,
+		padding: 0,
+		color: token.colorText,
+		fontSize: token.fontSize,
+		lineHeight: token.lineHeight,
+		listStyle: "none",
+		"*, *::before, *::after": { boxSizing: "border-box" }
+	};
+}
+function operationUnit(token) {
+	return {
+		color: token.colorLink,
+		outline: "none",
+		cursor: "pointer",
+		transition: `color ${token.motionDurationSlow}`,
+		"&:focus, &:hover": { color: token.colorLinkHover },
+		"&:active": { color: token.colorLinkActive }
+	};
+}
+function hashString(input) {
+	let hash = 5381;
+	for (let i = 0; i < input.length; i += 1) hash = hash * 33 ^ input.charCodeAt(i);
+	return (hash >>> 0).toString(36);
+}
+function genStyleUtils(config) {
+	const { useCSP = useDefaultCSP, useToken: useAntdToken, usePrefix, getCompUnitless } = config;
+	function genStyleHooks(component, styleFn, getDefaultToken, options) {
+		const componentName = Array.isArray(component) ? component[0] : component;
+		function prefixToken(key) {
+			return `${String(componentName)}${key.slice(0, 1).toUpperCase()}${key.slice(1)}`;
+		}
+		const originUnitless = options?.unitless || {};
+		const compUnitless = {
+			...typeof getCompUnitless === "function" ? getCompUnitless() : {},
+			[prefixToken("zIndexPopup")]: true
+		};
+		Object.keys(originUnitless).forEach((key) => {
+			compUnitless[prefixToken(key)] = originUnitless[key];
+		});
+		const mergedOptions = {
+			...options,
+			unitless: compUnitless,
+			prefixToken
+		};
+		const useStyle = genComponentStyleHook(component, styleFn, getDefaultToken, mergedOptions);
+		const useCSSVar = genCSSVarRegister(componentName, getDefaultToken, mergedOptions);
+		return (prefixCls, rootCls = prefixCls) => {
+			return [useStyle(prefixCls), useCSSVar(rootCls)];
+		};
+	}
+	function genCSSVarRegister(component, getDefaultToken, options) {
+		const { unitless: compUnitless, prefixToken, ignore } = options;
+		return (rootCls) => {
+			const { cssVar, hashId, realToken } = useAntdToken();
+			const csp = useCSP();
+			useCSSVarRegister(computed(() => {
+				const _cssVar = cssVar.value;
+				return {
+					path: [component],
+					prefix: _cssVar?.prefix,
+					key: _cssVar.key,
+					unitless: compUnitless,
+					ignore,
+					hashId: hashId?.value,
+					nonce: () => csp.value.nonce,
+					token: realToken?.value,
+					scope: rootCls.value
+				};
+			}), () => {
+				const defaultToken = getDefaultComponentToken(component, realToken.value, getDefaultToken);
+				const componentToken = getComponentToken(component, realToken.value, defaultToken, { deprecatedTokens: options?.deprecatedTokens });
+				if (defaultToken) Object.keys(defaultToken).forEach((key) => {
+					componentToken[prefixToken(key)] = componentToken[key];
+					delete componentToken[key];
+				});
+				return componentToken;
+			});
+			return computed(() => cssVar?.value?.key);
+		};
+	}
+	function genComponentStyleHook(componentName, styleFn, getDefaultToken, options = {}) {
+		const cells = Array.isArray(componentName) ? componentName : [componentName, componentName];
+		const [component] = cells;
+		const styleRegisterKey = `${cells.join("-")}-${hashString(styleFn.toString())}`;
+		const mergedLayer = config.layer || { name: "antd-pro" };
+		return (prefixCls) => {
+			const { theme, hashId, token, realToken, cssVar, zeroRuntime } = useAntdToken();
+			if (computed(() => {
+				return zeroRuntime?.value;
+			}).value) return hashId;
+			const prefix = usePrefix();
+			const csp = useCSP();
+			const type = "css";
+			const calc = computed(() => useUniqueMemo(() => {
+				const unitlessCssVar = /* @__PURE__ */ new Set();
+				Object.keys(options.unitless || {}).forEach((key) => {
+					unitlessCssVar.add(key);
+					unitlessCssVar.add(token2CSSVar(key, cssVar?.value?.prefix));
+					unitlessCssVar.add(token2CSSVar(key, getCompVarPrefix(component, cssVar?.value?.prefix)));
+				});
+				return genCalc(type, unitlessCssVar);
+			}, [
+				type,
+				component,
+				cssVar?.value?.prefix
+			]));
+			const { max, min } = genMaxMin(type);
+			const sharedConfig = computed(() => {
+				return {
+					theme: theme?.value,
+					token: token?.value,
+					hashId: hashId?.value,
+					nonce: () => csp.value.nonce,
+					clientOnly: options.clientOnly,
+					layer: mergedLayer,
+					order: options.order || -999
+				};
+			});
+			const getMergedToken = () => {
+				const { token: proxyToken, flush } = statisticToken(token.value);
+				const tokenForCalc = realToken?.value || proxyToken;
+				const defaultComponentToken = getDefaultComponentToken(component, tokenForCalc, getDefaultToken);
+				const componentToken = getComponentToken(component, tokenForCalc, defaultComponentToken, { deprecatedTokens: options.deprecatedTokens });
+				if (defaultComponentToken && typeof defaultComponentToken === "object") Object.keys(defaultComponentToken).forEach((key) => {
+					defaultComponentToken[key] = `var(${token2CSSVar(key, getCompVarPrefix(component, cssVar?.value?.prefix))})`;
+				});
+				return {
+					componentToken,
+					flush,
+					mergedToken: mergeToken(proxyToken, {
+						componentCls: `.${prefixCls.value}`,
+						prefixCls: prefixCls.value,
+						proComponentsCls: `.${prefix.value.rootPrefixCls}-pro`,
+						iconCls: `.${prefix.value.iconPrefixCls}`,
+						antCls: `.${prefix.value.rootPrefixCls}`,
+						calc: calc.value,
+						max,
+						min
+					}, defaultComponentToken)
+				};
+			};
+			useStyleRegister(computed(() => {
+				return {
+					...sharedConfig.value,
+					path: [
+						styleRegisterKey,
+						prefixCls.value,
+						prefix.value.iconPrefixCls
+					]
+				};
+			}), () => {
+				if (options.injectStyle === false) return [];
+				const { componentToken, flush, mergedToken } = getMergedToken();
+				const styleInterpolation = styleFn(mergedToken, {
+					hashId: hashId.value,
+					prefixCls: prefixCls.value,
+					rootPrefixCls: prefix.value.rootPrefixCls,
+					iconPrefixCls: prefix.value.iconPrefixCls,
+					proComponentsCls: `${prefix.value.rootPrefixCls}-pro`
+				});
+				flush(component, componentToken);
+				return styleInterpolation;
+			});
+			return hashId;
+		};
+	}
+	return {
+		genStyleHooks,
+		genComponentStyleHook
+	};
+}
+const { genStyleHooks: useStyle, genComponentStyleHook } = genStyleUtils({
+	usePrefix: () => {
+		const configCtx = useConfig();
+		return computed(() => {
+			const { getPrefixCls, iconPrefixCls } = configCtx.value;
+			return {
+				rootPrefixCls: getPrefixCls(),
+				iconPrefixCls
+			};
+		});
+	},
+	useToken() {
+		const proProvide = useProConfig();
+		const { realToken: proRealToken, token: proToken } = useProCacheToken();
+		const [theme, localToken, localHashId, localRealToken, , zeroRuntime] = useLocalToken();
+		return {
+			theme,
+			realToken: computed(() => proRealToken?.value || localRealToken.value),
+			hashId: computed(() => {
+				if (proProvide.value.hashed === false) return "";
+				return proProvide.value.hashId ?? localHashId.value ?? "";
+			}),
+			token: computed(() => proToken?.value || localToken.value),
+			cssVar: computed(() => ({
+				prefix: "ant",
+				key: "css-var-pro"
+			})),
+			zeroRuntime
+		};
+	},
+	useCSP: () => {
+		const configCtx = useConfig();
+		return computed(() => configCtx.value?.csp ?? {});
+	},
+	getCompUnitless: () => unitless
+});
+//#endregion
+export { genComponentStyleHook, lighten, operationUnit, proTheme, resetComponent, setAlpha, useStyle, useToken };

package/dist/useStyle/token.d.ts

@@ -0,0 +1,35 @@
+import * as _$vue from "vue";
+import * as _$_antdv_next_cssinjs0 from "@antdv-next/cssinjs";
+import { GlobalToken } from "antdv-next";
+
+//#region src/useStyle/token.d.ts
+declare const defaultToken: GlobalToken;
+declare function hashCode(str: string, seed?: number): number;
+declare const emptyTheme: _$_antdv_next_cssinjs0.Theme<any, any>;
+declare const token: {
+  theme: _$vue.ComputedRef<_$_antdv_next_cssinjs0.Theme<any, any>>;
+  token: _$vue.ComputedRef<GlobalToken>;
+  hashId: _$vue.ComputedRef<string>;
+};
+declare const useToken: () => {
+  theme: _$vue.ComputedRef<_$_antdv_next_cssinjs0.Theme<any, any>>;
+  token: _$vue.ComputedRef<GlobalToken>;
+  hashId: _$vue.ComputedRef<string>;
+};
+declare const _default: {
+  useToken: () => {
+    theme: _$vue.ComputedRef<_$_antdv_next_cssinjs0.Theme<any, any>>;
+    token: _$vue.ComputedRef<GlobalToken>;
+    hashId: _$vue.ComputedRef<string>;
+  };
+  token: {
+    theme: _$vue.ComputedRef<_$_antdv_next_cssinjs0.Theme<any, any>>;
+    token: _$vue.ComputedRef<GlobalToken>;
+    hashId: _$vue.ComputedRef<string>;
+  };
+  emptyTheme: _$_antdv_next_cssinjs0.Theme<any, any>;
+  hashCode: typeof hashCode;
+  defaultToken: GlobalToken;
+};
+//#endregion
+export { _default as default, defaultToken, emptyTheme, hashCode, token, useToken };