index.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import { createVNode as _createVNode } from "vue";
  3. var __rest = this && this.__rest || function (s, e) {
  4. var t = {};
  5. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  6. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  7. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  8. }
  9. return t;
  10. };
  11. import { watch, computed, reactive, defineComponent, watchEffect } from 'vue';
  12. import defaultRenderEmpty from './renderEmpty';
  13. import LocaleProvider, { ANT_MARK } from '../locale-provider';
  14. import LocaleReceiver from '../locale-provider/LocaleReceiver';
  15. import message from '../message';
  16. import notification from '../notification';
  17. import { registerTheme } from './cssVariables';
  18. import defaultLocale from '../locale/en_US';
  19. import useStyle from './style';
  20. import useTheme from './hooks/useTheme';
  21. import defaultSeedToken from '../theme/themes/seed';
  22. import { useConfigContextProvider, useConfigContextInject, configProviderProps, useProvideGlobalForm, defaultIconPrefixCls } from './context';
  23. import { useProviderSize } from './SizeContext';
  24. import { useProviderDisabled } from './DisabledContext';
  25. import { createTheme } from '../_util/cssinjs';
  26. import { DesignTokenProvider } from '../theme/internal';
  27. export const defaultPrefixCls = 'ant';
  28. export { defaultIconPrefixCls };
  29. function getGlobalPrefixCls() {
  30. return globalConfigForApi.prefixCls || defaultPrefixCls;
  31. }
  32. function getGlobalIconPrefixCls() {
  33. return globalConfigForApi.iconPrefixCls || defaultIconPrefixCls;
  34. }
  35. const globalConfigBySet = reactive({}); // 权重最大
  36. export const globalConfigForApi = reactive({});
  37. export const configConsumerProps = ['getTargetContainer', 'getPopupContainer', 'rootPrefixCls', 'getPrefixCls', 'renderEmpty', 'csp', 'autoInsertSpaceInButton', 'locale', 'pageHeader'];
  38. watchEffect(() => {
  39. _extends(globalConfigForApi, globalConfigBySet);
  40. globalConfigForApi.prefixCls = getGlobalPrefixCls();
  41. globalConfigForApi.iconPrefixCls = getGlobalIconPrefixCls();
  42. globalConfigForApi.getPrefixCls = (suffixCls, customizePrefixCls) => {
  43. if (customizePrefixCls) return customizePrefixCls;
  44. return suffixCls ? `${globalConfigForApi.prefixCls}-${suffixCls}` : globalConfigForApi.prefixCls;
  45. };
  46. globalConfigForApi.getRootPrefixCls = () => {
  47. // If Global prefixCls provided, use this
  48. if (globalConfigForApi.prefixCls) {
  49. return globalConfigForApi.prefixCls;
  50. }
  51. // Fallback to default prefixCls
  52. return getGlobalPrefixCls();
  53. };
  54. });
  55. let stopWatchEffect;
  56. const setGlobalConfig = params => {
  57. if (stopWatchEffect) {
  58. stopWatchEffect();
  59. }
  60. stopWatchEffect = watchEffect(() => {
  61. _extends(globalConfigBySet, reactive(params));
  62. _extends(globalConfigForApi, reactive(params));
  63. });
  64. if (params.theme) {
  65. registerTheme(getGlobalPrefixCls(), params.theme);
  66. }
  67. };
  68. export const globalConfig = () => ({
  69. getPrefixCls: (suffixCls, customizePrefixCls) => {
  70. if (customizePrefixCls) return customizePrefixCls;
  71. return suffixCls ? `${getGlobalPrefixCls()}-${suffixCls}` : getGlobalPrefixCls();
  72. },
  73. getIconPrefixCls: getGlobalIconPrefixCls,
  74. getRootPrefixCls: () => {
  75. // If Global prefixCls provided, use this
  76. if (globalConfigForApi.prefixCls) {
  77. return globalConfigForApi.prefixCls;
  78. }
  79. // Fallback to default prefixCls
  80. return getGlobalPrefixCls();
  81. }
  82. });
  83. const ConfigProvider = defineComponent({
  84. compatConfig: {
  85. MODE: 3
  86. },
  87. name: 'AConfigProvider',
  88. inheritAttrs: false,
  89. props: configProviderProps(),
  90. setup(props, _ref) {
  91. let {
  92. slots
  93. } = _ref;
  94. const parentContext = useConfigContextInject();
  95. const getPrefixCls = (suffixCls, customizePrefixCls) => {
  96. const {
  97. prefixCls = 'ant'
  98. } = props;
  99. if (customizePrefixCls) return customizePrefixCls;
  100. const mergedPrefixCls = prefixCls || parentContext.getPrefixCls('');
  101. return suffixCls ? `${mergedPrefixCls}-${suffixCls}` : mergedPrefixCls;
  102. };
  103. const iconPrefixCls = computed(() => props.iconPrefixCls || parentContext.iconPrefixCls.value || defaultIconPrefixCls);
  104. const shouldWrapSSR = computed(() => iconPrefixCls.value !== parentContext.iconPrefixCls.value);
  105. const csp = computed(() => {
  106. var _a;
  107. return props.csp || ((_a = parentContext.csp) === null || _a === void 0 ? void 0 : _a.value);
  108. });
  109. const wrapSSR = useStyle(iconPrefixCls);
  110. const mergedTheme = useTheme(computed(() => props.theme), computed(() => {
  111. var _a;
  112. return (_a = parentContext.theme) === null || _a === void 0 ? void 0 : _a.value;
  113. }));
  114. const renderEmptyComponent = name => {
  115. const renderEmpty = props.renderEmpty || slots.renderEmpty || parentContext.renderEmpty || defaultRenderEmpty;
  116. return renderEmpty(name);
  117. };
  118. const autoInsertSpaceInButton = computed(() => {
  119. var _a, _b;
  120. return (_a = props.autoInsertSpaceInButton) !== null && _a !== void 0 ? _a : (_b = parentContext.autoInsertSpaceInButton) === null || _b === void 0 ? void 0 : _b.value;
  121. });
  122. const locale = computed(() => {
  123. var _a;
  124. return props.locale || ((_a = parentContext.locale) === null || _a === void 0 ? void 0 : _a.value);
  125. });
  126. watch(locale, () => {
  127. globalConfigBySet.locale = locale.value;
  128. }, {
  129. immediate: true
  130. });
  131. const direction = computed(() => {
  132. var _a;
  133. return props.direction || ((_a = parentContext.direction) === null || _a === void 0 ? void 0 : _a.value);
  134. });
  135. const space = computed(() => {
  136. var _a, _b;
  137. return (_a = props.space) !== null && _a !== void 0 ? _a : (_b = parentContext.space) === null || _b === void 0 ? void 0 : _b.value;
  138. });
  139. const virtual = computed(() => {
  140. var _a, _b;
  141. return (_a = props.virtual) !== null && _a !== void 0 ? _a : (_b = parentContext.virtual) === null || _b === void 0 ? void 0 : _b.value;
  142. });
  143. const dropdownMatchSelectWidth = computed(() => {
  144. var _a, _b;
  145. return (_a = props.dropdownMatchSelectWidth) !== null && _a !== void 0 ? _a : (_b = parentContext.dropdownMatchSelectWidth) === null || _b === void 0 ? void 0 : _b.value;
  146. });
  147. const getTargetContainer = computed(() => {
  148. var _a;
  149. return props.getTargetContainer !== undefined ? props.getTargetContainer : (_a = parentContext.getTargetContainer) === null || _a === void 0 ? void 0 : _a.value;
  150. });
  151. const getPopupContainer = computed(() => {
  152. var _a;
  153. return props.getPopupContainer !== undefined ? props.getPopupContainer : (_a = parentContext.getPopupContainer) === null || _a === void 0 ? void 0 : _a.value;
  154. });
  155. const pageHeader = computed(() => {
  156. var _a;
  157. return props.pageHeader !== undefined ? props.pageHeader : (_a = parentContext.pageHeader) === null || _a === void 0 ? void 0 : _a.value;
  158. });
  159. const input = computed(() => {
  160. var _a;
  161. return props.input !== undefined ? props.input : (_a = parentContext.input) === null || _a === void 0 ? void 0 : _a.value;
  162. });
  163. const pagination = computed(() => {
  164. var _a;
  165. return props.pagination !== undefined ? props.pagination : (_a = parentContext.pagination) === null || _a === void 0 ? void 0 : _a.value;
  166. });
  167. const form = computed(() => {
  168. var _a;
  169. return props.form !== undefined ? props.form : (_a = parentContext.form) === null || _a === void 0 ? void 0 : _a.value;
  170. });
  171. const select = computed(() => {
  172. var _a;
  173. return props.select !== undefined ? props.select : (_a = parentContext.select) === null || _a === void 0 ? void 0 : _a.value;
  174. });
  175. const componentSize = computed(() => props.componentSize);
  176. const componentDisabled = computed(() => props.componentDisabled);
  177. const wave = computed(() => {
  178. var _a, _b;
  179. return (_a = props.wave) !== null && _a !== void 0 ? _a : (_b = parentContext.wave) === null || _b === void 0 ? void 0 : _b.value;
  180. });
  181. const configProvider = {
  182. csp,
  183. autoInsertSpaceInButton,
  184. locale,
  185. direction,
  186. space,
  187. virtual,
  188. dropdownMatchSelectWidth,
  189. getPrefixCls,
  190. iconPrefixCls,
  191. theme: computed(() => {
  192. var _a, _b;
  193. return (_a = mergedTheme.value) !== null && _a !== void 0 ? _a : (_b = parentContext.theme) === null || _b === void 0 ? void 0 : _b.value;
  194. }),
  195. renderEmpty: renderEmptyComponent,
  196. getTargetContainer,
  197. getPopupContainer,
  198. pageHeader,
  199. input,
  200. pagination,
  201. form,
  202. select,
  203. componentSize,
  204. componentDisabled,
  205. transformCellText: computed(() => props.transformCellText),
  206. wave
  207. };
  208. // ================================ Dynamic theme ================================
  209. const memoTheme = computed(() => {
  210. const _a = mergedTheme.value || {},
  211. {
  212. algorithm,
  213. token
  214. } = _a,
  215. rest = __rest(_a, ["algorithm", "token"]);
  216. const themeObj = algorithm && (!Array.isArray(algorithm) || algorithm.length > 0) ? createTheme(algorithm) : undefined;
  217. return _extends(_extends({}, rest), {
  218. theme: themeObj,
  219. token: _extends(_extends({}, defaultSeedToken), token)
  220. });
  221. });
  222. const validateMessagesRef = computed(() => {
  223. var _a, _b;
  224. // Additional Form provider
  225. let validateMessages = {};
  226. if (locale.value) {
  227. validateMessages = ((_a = locale.value.Form) === null || _a === void 0 ? void 0 : _a.defaultValidateMessages) || ((_b = defaultLocale.Form) === null || _b === void 0 ? void 0 : _b.defaultValidateMessages) || {};
  228. }
  229. if (props.form && props.form.validateMessages) {
  230. validateMessages = _extends(_extends({}, validateMessages), props.form.validateMessages);
  231. }
  232. return validateMessages;
  233. });
  234. useConfigContextProvider(configProvider);
  235. useProvideGlobalForm({
  236. validateMessages: validateMessagesRef
  237. });
  238. useProviderSize(componentSize);
  239. useProviderDisabled(componentDisabled);
  240. const renderProvider = legacyLocale => {
  241. var _a, _b;
  242. let childNode = shouldWrapSSR.value ? wrapSSR((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)) : (_b = slots.default) === null || _b === void 0 ? void 0 : _b.call(slots);
  243. if (props.theme) {
  244. const _childNode = function () {
  245. return childNode;
  246. }();
  247. childNode = _createVNode(DesignTokenProvider, {
  248. "value": memoTheme.value
  249. }, {
  250. default: () => [_childNode]
  251. });
  252. }
  253. return _createVNode(LocaleProvider, {
  254. "locale": locale.value || legacyLocale,
  255. "ANT_MARK__": ANT_MARK
  256. }, {
  257. default: () => [childNode]
  258. });
  259. };
  260. watchEffect(() => {
  261. if (direction.value) {
  262. message.config({
  263. rtl: direction.value === 'rtl'
  264. });
  265. notification.config({
  266. rtl: direction.value === 'rtl'
  267. });
  268. }
  269. });
  270. return () => _createVNode(LocaleReceiver, {
  271. "children": (_, __, legacyLocale) => renderProvider(legacyLocale)
  272. }, null);
  273. }
  274. });
  275. ConfigProvider.config = setGlobalConfig;
  276. ConfigProvider.install = function (app) {
  277. app.component(ConfigProvider.name, ConfigProvider);
  278. };
  279. export default ConfigProvider;