feat: semi 2.55.1

package.json

@@ -40,8 +40,8 @@
     }
   },
   "dependencies": {
-    "@douyinfe/semi-foundation": "2.54.0",
-    "@douyinfe/semi-theme-default": "2.54.0",
+    "@douyinfe/semi-foundation": "2.55.1",
+    "@douyinfe/semi-theme-default": "2.55.1",
     "@vue/repl": "^3.2.0",
     "vue": "^3.4.19",
     "lodash": "^4.17.21"
@@ -66,7 +66,7 @@
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.16.7",
     "@changesets/cli": "^2.27.1",
-    "@douyinfe/semi-theme-default": "2.54.0",
+    "@douyinfe/semi-theme-default": "2.55.1",
     "@svgr/babel-plugin-add-jsx-attribute": "5.4.0",
     "@svgr/babel-plugin-remove-jsx-attribute": "5.4.0",
     "@svgr/babel-plugin-remove-jsx-empty-expression": "5.0.1",
@@ -103,7 +103,7 @@
     "vitest": "^1.3.1",
     "typescript": "^5.3.3",
     "vite": "5.1.4",
-    "vitepress": "1.0.0-rc.45",
+    "vitepress": "^1.0.1",
     "vue-tsc": "^1.8.27"
   }
 }

packages/semi-animation-vue/package.json

@@ -38,10 +38,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@douyinfe/semi-animation": "2.54.0",
-    "@douyinfe/semi-animation-styled": "2.54.0",
-    "@douyinfe/semi-foundation": "2.54.0",
-    "@douyinfe/semi-theme-default": "2.54.0",
+    "@douyinfe/semi-animation": "2.55.1",
+    "@douyinfe/semi-animation-styled": "2.55.1",
+    "@douyinfe/semi-foundation": "2.55.1",
+    "@douyinfe/semi-theme-default": "2.55.1",
     "classnames": "^2.3.2",
     "sass": "^1.57.1",
     "vue": "^3.4.19"

packages/semi-icons-lab-vue/package.json

@@ -27,8 +27,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@douyinfe/semi-foundation": "2.54.0",
-    "@douyinfe/semi-theme-default": "2.54.0",
+    "@douyinfe/semi-foundation": "2.55.1",
+    "@douyinfe/semi-theme-default": "2.55.1",
     "classnames": "^2.3.2",
     "sass": "^1.57.1",
     "vue": "^3.4.19"

packages/semi-icons-vue/package.json

@@ -27,8 +27,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@douyinfe/semi-foundation": "2.54.0",
-    "@douyinfe/semi-theme-default": "2.54.0",
+    "@douyinfe/semi-foundation": "2.55.1",
+    "@douyinfe/semi-theme-default": "2.55.1",
     "classnames": "^2.3.2",
     "sass": "^1.57.1",
     "vue": "^3.4.19"

packages/semi-illustrations-vue/package.json

@@ -25,8 +25,8 @@
     "build:icon": "node scripts/build-illustration.cjs"
   },
   "dependencies": {
-    "@douyinfe/semi-foundation": "2.54.0",
-    "@douyinfe/semi-theme-default": "2.54.0",
+    "@douyinfe/semi-foundation": "2.55.1",
+    "@douyinfe/semi-theme-default": "2.55.1",
     "classnames": "^2.3.2",
     "vue": "^3.4.19"
   },

packages/semi-ui-vue/package.json

@@ -23,9 +23,9 @@
     "url": "https://github.com/rashagu/semi-design-vue"
   },
   "dependencies": {
-    "@douyinfe/semi-foundation": "2.54.0",
-    "@douyinfe/semi-theme-default": "2.54.0",
-    "@douyinfe/semi-animation": "2.54.0",
+    "@douyinfe/semi-foundation": "2.55.1",
+    "@douyinfe/semi-theme-default": "2.55.1",
+    "@douyinfe/semi-animation": "2.55.1",
     "@kousum/semi-animation-vue": "^0.9.1",
     "@kousum/semi-icons-vue": "^0.9.1",
     "@kousum/semi-illustrations-vue": "^0.9.1",

packages/semi-ui-vue/src/components/button/splitButtonGroup.tsx

@@ -1,4 +1,14 @@
-import {defineComponent, ref, h, onActivated, Fragment, StyleValue, ComponentObjectPropsOptions, onMounted} from 'vue'
+import {
+  defineComponent,
+  ref,
+  h,
+  onActivated,
+  Fragment,
+  StyleValue,
+  ComponentObjectPropsOptions,
+  onMounted,
+  onUnmounted,
+} from 'vue';
 import classNames from 'classnames';
 import { cssClasses } from '@douyinfe/semi-foundation/button/constants';
 import '@douyinfe/semi-foundation/button/button.scss';
@@ -18,19 +28,40 @@ const SplitButtonGroup = defineComponent<SplitButtonGroupProps>((props, {slots})
   const { style, className } = props;
   const cls = classNames(`${prefixCls}-split`, className);
   const containerRef = ref()
-
+  let mutationObserver: MutationObserver | null = null;
 
 
   onMounted(()=>{
-    if (containerRef.value) {
+    const addClassName = () => {
       const buttons = containerRef.value.querySelectorAll('button');
       const firstButton = buttons[0];
       const lastButton = buttons[buttons.length - 1];
-      firstButton?.classList.add(`${prefixCls}-first`);
-      lastButton?.classList.add(`${prefixCls}-last`);
+      if (!firstButton?.classList.contains(`${prefixCls}-first`)) {
+        firstButton?.classList.add(`${prefixCls}-first`);
+      }
+      if (!lastButton?.classList.contains(`${prefixCls}-last`)) {
+        lastButton?.classList.add(`${prefixCls}-last`);
+      }
+
+    };
+    if (containerRef.value) {
+      addClassName();
+      const mutationObserver_ = new MutationObserver((mutations, observer) => {
+        for (const mutation of mutations) {
+          if ((mutation.type === 'attributes' && mutation.attributeName === 'class') || (mutation.type === 'childList' && Array.from(mutation.addedNodes).some(node => node.nodeName === 'BUTTON'))) {
+            addClassName();
+          }
+        }
+      });
+      mutationObserver_.observe(containerRef.value, { attributes: true, childList: true, subtree: true });
+      mutationObserver = mutationObserver_;
     }
   })
 
+  onUnmounted(()=>{
+    mutationObserver?.disconnect();
+  })
+
   return ()=>(
     <div ref={containerRef} class={cls} style={style} role="group"
          aria-label={props['aria-label']}>

packages/semi-ui-vue/src/components/collapse/collapse-context.tsx

@@ -11,7 +11,8 @@ export interface CollapseContextType{
     keepDOM: boolean;
     expandIconPosition: 'left' | 'right';
     onClick: (activeKey: string, e: MouseEvent) => void;
-    motion: boolean
+    motion: boolean;
+    lazyRender: boolean
 }
 
 

packages/semi-ui-vue/src/components/collapse/index.tsx

@@ -33,42 +33,45 @@ export interface CollapseReactProps extends CollapseProps {
   collapseIcon?: VNode;
   children?: VNode;
   style?: CSSProperties;
-  onChange?: (activeKey: CollapseProps['activeKey'], e: MouseEvent) => void
+  onChange?: (activeKey: CollapseProps['activeKey'], e: MouseEvent) => void;
+  lazyRender?: boolean
 }
 
 
 export type {CollapseState};
 
-const propTypes: ComponentObjectPropsOptions<CollapseProps> = {
+const propTypes: ComponentObjectPropsOptions<CollapseReactProps> = {
   activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   accordion: PropTypes.bool,
   clickHeaderToExpand: PropTypes.bool,
-  onChange: PropTypes.func as PropType<CollapseProps['onChange']>,
-  expandIcon: PropTypes.node,
-  collapseIcon: PropTypes.node,
+  onChange: PropTypes.func as PropType<CollapseReactProps['onChange']>,
+  expandIcon: PropTypes.node as PropType<CollapseReactProps['expandIcon']>,
+  collapseIcon: PropTypes.node as PropType<CollapseReactProps['collapseIcon']>,
   style: PropTypes.object,
   className: PropTypes.string,
   keepDOM: PropTypes.bool,
   motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.func, PropTypes.object]),
-  expandIconPosition: PropTypes.string as PropType<CollapseProps['expandIconPosition']>,
+  expandIconPosition: PropTypes.string as PropType<CollapseReactProps['expandIconPosition']>,
+  lazyRender: PropTypes.bool as PropType<CollapseReactProps['lazyRender']>,
 };
 
 const defaultProps = {
   defaultActiveKey: '',
   clickHeaderToExpand: true,
   onChange: noop,
-  expandIconPosition: 'right'
+  expandIconPosition: 'right',
+  lazyRender: false,
 };
-export const vuePropsType = vuePropsMake<CollapseProps>(propTypes, defaultProps)
-const Collapse = defineComponent<CollapseProps>((props, {}) => {
+export const vuePropsType = vuePropsMake<CollapseReactProps>(propTypes, defaultProps)
+const Collapse = defineComponent<CollapseReactProps>((props, {}) => {
   const slots = useSlots()
 
 
   const state = reactive<CollapseState>({
     activeSet: new Set()
   });
-  const {adapter: adapterInject, getDataAttr} = useBaseComponent<CollapseProps>(props, state)
+  const {adapter: adapterInject, getDataAttr} = useBaseComponent<CollapseReactProps>(props, state)
 
   function adapter_(): CollapseAdapter {
     return {
@@ -125,6 +128,7 @@ const Collapse = defineComponent<CollapseProps>((props, {}) => {
     // eslint-disable-next-line max-len
     const {
       defaultActiveKey,
+      lazyRender,
       accordion,
       style,
       motion,
@@ -149,7 +153,8 @@ const Collapse = defineComponent<CollapseProps>((props, {}) => {
             keepDOM,
             expandIconPosition,
             onClick: onChange,
-            motion
+            motion,
+            lazyRender,
           }}
         >
           {children}