internal.js 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import { createTheme, useCacheToken, useStyleRegister } from '../_util/cssinjs';
  3. import version from '../version';
  4. import { PresetColors } from './interface';
  5. import defaultDerivative from './themes/default';
  6. import defaultSeedToken from './themes/seed';
  7. import formatToken from './util/alias';
  8. import genComponentStyleHook from './util/genComponentStyleHook';
  9. import statisticToken, { merge as mergeToken, statistic } from './util/statistic';
  10. import { objectType } from '../_util/type';
  11. import { triggerRef, unref, defineComponent, provide, computed, inject, watch, shallowRef } from 'vue';
  12. const defaultTheme = createTheme(defaultDerivative);
  13. export {
  14. // colors
  15. PresetColors,
  16. // Statistic
  17. statistic, statisticToken, mergeToken,
  18. // hooks
  19. useStyleRegister, genComponentStyleHook };
  20. // ================================ Context =================================
  21. // To ensure snapshot stable. We disable hashed in test env.
  22. export const defaultConfig = {
  23. token: defaultSeedToken,
  24. hashed: true
  25. };
  26. //defaultConfig
  27. const DesignTokenContextKey = Symbol('DesignTokenContext');
  28. export const globalDesignTokenApi = shallowRef();
  29. export const useDesignTokenProvider = value => {
  30. provide(DesignTokenContextKey, value);
  31. watch(value, () => {
  32. globalDesignTokenApi.value = unref(value);
  33. triggerRef(globalDesignTokenApi);
  34. }, {
  35. immediate: true,
  36. deep: true
  37. });
  38. };
  39. export const useDesignTokenInject = () => {
  40. return inject(DesignTokenContextKey, computed(() => globalDesignTokenApi.value || defaultConfig));
  41. };
  42. export const DesignTokenProvider = defineComponent({
  43. props: {
  44. value: objectType()
  45. },
  46. setup(props, _ref) {
  47. let {
  48. slots
  49. } = _ref;
  50. useDesignTokenProvider(computed(() => props.value));
  51. return () => {
  52. var _a;
  53. return (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots);
  54. };
  55. }
  56. });
  57. // ================================== Hook ==================================
  58. export function useToken() {
  59. const designTokenContext = inject(DesignTokenContextKey, computed(() => globalDesignTokenApi.value || defaultConfig));
  60. const salt = computed(() => `${version}-${designTokenContext.value.hashed || ''}`);
  61. const mergedTheme = computed(() => designTokenContext.value.theme || defaultTheme);
  62. const cacheToken = useCacheToken(mergedTheme, computed(() => [defaultSeedToken, designTokenContext.value.token]), computed(() => ({
  63. salt: salt.value,
  64. override: _extends({
  65. override: designTokenContext.value.token
  66. }, designTokenContext.value.components),
  67. formatToken
  68. })));
  69. return [mergedTheme, computed(() => cacheToken.value[0]), computed(() => designTokenContext.value.hashed ? cacheToken.value[1] : '')];
  70. }