style: some code

Author: tangjinzhou

components/_util/hooks/useBreakpoint.ts

@@ -1,15 +1,18 @@
 import type { Ref } from 'vue';
-import { onMounted, onUnmounted, ref } from 'vue';
+import { getCurrentInstance, onMounted, onUnmounted, ref } from 'vue';
 import type { ScreenMap } from '../../_util/responsiveObserve';
 import ResponsiveObserve from '../../_util/responsiveObserve';
 
-function useBreakpoint(): Ref<ScreenMap> {
+function useBreakpoint(refreshOnChange = ref(true)): Ref<ScreenMap> {
   const screens = ref<ScreenMap>({});
   let token = null;
-
+  const instance = getCurrentInstance();
   onMounted(() => {
     token = ResponsiveObserve.subscribe(supportScreens => {
       screens.value = supportScreens;
+      if (refreshOnChange?.value) {
+        instance.update();
+      }
     });
   });
 

components/avatar/Avatar.tsx

@@ -51,8 +51,15 @@ const Avatar = defineComponent({
     const { prefixCls } = useConfigInject('avatar', props);
 
     const groupSize = useInjectSize();
-
-    const screens = useBreakpoint();
+    const size = computed(() => {
+      return props.size === 'default' ? groupSize.value : props.size;
+    });
+    const needResponsive = computed(() =>
+      Object.keys(typeof size.value === 'object' ? size.value || {} : {}).some(key =>
+        ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key),
+      ),
+    );
+    const screens = useBreakpoint(needResponsive);
     const responsiveSize = computed(() => {
       if (typeof props.size !== 'object') {
         return undefined;
@@ -126,27 +133,26 @@ const Avatar = defineComponent({
     });
 
     return () => {
-      const { shape, size: customSize, src, alt, srcset, draggable, crossOrigin } = props;
+      const { shape, src, alt, srcset, draggable, crossOrigin } = props;
       const icon = getPropsSlot(slots, props, 'icon');
       const pre = prefixCls.value;
-      const size = customSize === 'default' ? groupSize.value : customSize;
       const classString = {
         [`${attrs.class}`]: !!attrs.class,
         [pre]: true,
-        [`${pre}-lg`]: size === 'large',
-        [`${pre}-sm`]: size === 'small',
+        [`${pre}-lg`]: size.value === 'large',
+        [`${pre}-sm`]: size.value === 'small',
         [`${pre}-${shape}`]: shape,
         [`${pre}-image`]: src && isImgExist.value,
         [`${pre}-icon`]: icon,
       };
 
       const sizeStyle: CSSProperties =
-        typeof size === 'number'
+        typeof size.value === 'number'
           ? {
-              width: `${size}px`,
-              height: `${size}px`,
-              lineHeight: `${size}px`,
-              fontSize: icon ? `${size / 2}px` : '18px',
+              width: `${size.value}px`,
+              height: `${size.value}px`,
+              lineHeight: `${size.value}px`,
+              fontSize: icon ? `${size.value / 2}px` : '18px',
             }
           : {};
 
@@ -173,9 +179,9 @@ const Avatar = defineComponent({
           transform: transformString,
         };
         const sizeChildrenStyle =
-          typeof size === 'number'
+          typeof size.value === 'number'
             ? {
-                lineHeight: `${size}px`,
+                lineHeight: `${size.value}px`,
               }
             : {};
         childrenToRender = (

components/button/button.tsx

@@ -12,7 +12,7 @@ import {
 import Wave from '../_util/wave';
 import buttonTypes from './buttonTypes';
 import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
-import { flattenChildren, getPropsSlot } from '../_util/props-util';
+import { flattenChildren, getPropsSlot, initDefaultProps } from '../_util/props-util';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import devWarning from '../vc-util/devWarning';
 
@@ -32,7 +32,7 @@ export default defineComponent({
   name: 'AButton',
   inheritAttrs: false,
   __ANT_BUTTON: true,
-  props: buttonTypes(),
+  props: initDefaultProps(buttonTypes(), { type: 'default' }),
   slots: ['icon'],
   emits: ['click', 'mousedown'],
   setup(props, { slots, attrs, emit }) {

components/cascader/demo/multiple.vue

@@ -18,7 +18,7 @@ Select multiple options
 <template>
   <a-cascader
     v-model:value="value"
-    style="width: 233px"
+    style="width: 100%"
     multiple
     max-tag-count="responsive"
     :options="options"

components/cascader/index.en-US.md

@@ -76,6 +76,10 @@ interface Option {
   label?: VNode;
   disabled?: boolean;
   children?: Option[];
+  // Determines if this is a leaf node(effective when `loadData` is specified).
+  // `false` will force trade TreeNode as a parent node.
+  // Show expand icon even if the current node has no children.
+  isLeaf?: boolean;
 }
 ```
 

components/cascader/index.tsx

@@ -1,7 +1,7 @@
 import type { ShowSearchType, FieldNames, BaseOptionType, DefaultOptionType } from '../vc-cascader';
 import VcCascader, { cascaderProps as vcCascaderProps } from '../vc-cascader';
 import RightOutlined from '@ant-design/icons-vue/RightOutlined';
-import RedoOutlined from '@ant-design/icons-vue/RedoOutlined';
+import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
 import LeftOutlined from '@ant-design/icons-vue/LeftOutlined';
 import getIcons from '../select/utils/iconUtil';
 import type { VueNode } from '../_util/type';
@@ -215,7 +215,7 @@ const Cascader = defineComponent({
 
       const loadingIcon = (
         <span class={`${prefixCls.value}-menu-item-loading-icon`}>
-          <RedoOutlined spin />
+          <LoadingOutlined spin />
         </span>
       );
 

components/cascader/index.zh-CN.md

@@ -78,6 +78,9 @@ interface Option {
   label?: any;
   disabled?: boolean;
   children?: Option[];
+  // 标记是否为叶子节点，设置了 `loadData` 时有效
+  // 设为 `false` 时会强制标记为父节点，即使当前节点没有 children，也会显示展开图标
+  isLeaf?: boolean;
 }
 ```
 

components/config-provider/cssVariables.tsx

@@ -4,6 +4,8 @@ import { TinyColor } from '@ctrl/tinycolor';
 import { generate } from '@ant-design/colors';
 import type { Theme } from './context';
 import { updateCSS } from '../vc-util/Dom/dynamicCSS';
+import canUseDom from '../_util/canUseDom';
+import devWarning from '../vc-util/devWarning';
 
 const dynamicStyleMark = `-ant-${Date.now()}-${Math.random()}`;
 
@@ -86,12 +88,16 @@ export function registerTheme(globalPrefixCls: string, theme: Theme) {
     key => `--${globalPrefixCls}-${key}: ${variables[key]};`,
   );
 
-  updateCSS(
-    `
+  if (canUseDom()) {
+    updateCSS(
+      `
   :root {
     ${cssList.join('\n')}
   }
   `,
-    `${dynamicStyleMark}-dynamic-theme`,
-  );
+      `${dynamicStyleMark}-dynamic-theme`,
+    );
+  } else {
+    devWarning(false, 'ConfigProvider', 'SSR do not support dynamic theme with css variables.');
+  }
 }

components/config-provider/index.tsx

@@ -152,9 +152,7 @@ const ConfigProvider = defineComponent({
     }
     const validateMessagesRef = computed(() => {
       // Additional Form provider
-      let validateMessages: ValidateMessages = {
-        ...defaultLocale.Form?.defaultValidateMessages,
-      };
+      let validateMessages: ValidateMessages = {};
 
       if (props.locale) {
         validateMessages =

components/grid/index.ts

@@ -1,7 +1,11 @@
 import Row from './Row';
 import Col from './Col';
-import useBreakpoint from '../_util/hooks/useBreakpoint';
+import useInternalBreakpoint from '../_util/hooks/useBreakpoint';
 
+// Do not export params
+function useBreakpoint() {
+  return useInternalBreakpoint();
+}
 export type { RowProps } from './Row';
 
 export type { ColProps, ColSize } from './Col';