feat: semi 2.61.0

rashagu · Jul 4, 2024 · 9d86c19 · 9d86c19
1 parent 8354fe2
commit 9d86c19
Show file tree

Hide file tree

Showing 27 changed files with 648 additions and 191 deletions.
diff --git a/docs/.vitepress/theme/layout/index.mts b/docs/.vitepress/theme/layout/index.mts
@@ -25,10 +25,22 @@ export { default as VPTeamPageTitle } from 'vitepress/dist/client/theme-default/
 export { default as VPTeamPageSection } from 'vitepress/dist/client/theme-default/components/VPTeamPageSection.vue';
 export { default as VPTeamMembers } from 'vitepress/dist/client/theme-default/components/VPTeamMembers.vue';
 export { useSidebar } from 'vitepress/dist/client/theme-default/composables/sidebar';
+import LiveCode from '../../../LiveCode.vue';
+import LiveCode2 from '../../../LiveCode2.vue';
+import DesignToken from '../../../DesignToken.vue';
+import Notice from '../../../Notice';
+import PureA from '../../../PureA';
+
 const theme = {
   Layout,
   enhanceApp: ({ app }) => {
     app.component('Badge', VPBadge);
+    // 注册自定义全局组件
+    app.component('LiveCode', LiveCode);
+    app.component('LiveCode2', LiveCode2);
+    app.component('DesignToken', DesignToken);
+    app.component('Notice', Notice);
+    app.component('PureA', PureA);
   }
-};
+}
 export default theme;
diff --git a/package.json b/package.json
@@ -32,24 +32,23 @@
     "packages/vite-plugin-semi-theme"
   ],
   "dependencies": {
-    "@douyinfe/semi-foundation": "2.60.0",
-    "@douyinfe/semi-theme-default": "2.60.0",
-    "@vue/repl": "4.2.1",
+    "@douyinfe/semi-foundation": "2.61.0",
+    "@douyinfe/semi-theme-default": "2.61.0",
+    "@vue/repl": "4.3.1",
     "lodash": "^4.17.21",
     "vue": "^3.4.31"
   },
   "devDependencies": {
-    "@types/lodash": "^4.17.5",
     "@babel/core": "^7.18.2",
     "@babel/plugin-proposal-decorators": "^7.18.2",
     "@babel/plugin-transform-runtime": "^7.18.2",
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.16.7",
     "@changesets/cli": "^2.27.1",
     "@chromatic-com/storybook": "1.3.4",
-    "@douyinfe/semi-theme-default": "2.60.0",
-    "@kousum/semi-icons-vue": "workspace: *",
+    "@douyinfe/semi-theme-default": "2.61.0",
     "@kousum/semi-icons-lab-vue": "workspace: *",
+    "@kousum/semi-icons-vue": "workspace: *",
     "@kousum/semi-illustrations-vue": "workspace: *",
     "@kousum/semi-ui-vue": "workspace: *",
     "@storybook/addon-essentials": "^8.1.7",
@@ -74,6 +73,7 @@
     "@svgr/plugin-svgo": "5.5.0",
     "@svgr/webpack": "5.5.0",
     "@testing-library/vue": "^8.1.0",
+    "@types/lodash": "^4.17.5",
     "@types/node": "^20.1.4",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
@@ -102,7 +102,7 @@
   },
   "pnpm": {
     "patchedDependencies": {
-      "@vue/repl@4.2.1": "patches/@vue__repl@4.2.1.patch"
+      "@vue/repl@4.3.1": "patches/@vue__repl@4.3.1.patch"
     }
   }
 }
diff --git a/packages/semi-animation-vue/package.json b/packages/semi-animation-vue/package.json
@@ -38,10 +38,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@douyinfe/semi-animation": "2.60.0",
-    "@douyinfe/semi-animation-styled": "2.60.0",
-    "@douyinfe/semi-foundation": "2.60.0",
-    "@douyinfe/semi-theme-default": "2.60.0",
+    "@douyinfe/semi-animation": "2.61.0",
+    "@douyinfe/semi-animation-styled": "2.61.0",
+    "@douyinfe/semi-foundation": "2.61.0",
+    "@douyinfe/semi-theme-default": "2.61.0",
     "classnames": "^2.3.2",
     "sass": "^1.57.1",
     "vue": "^3.4.31"

diff --git a/packages/semi-icons-lab-vue/package.json b/packages/semi-icons-lab-vue/package.json
@@ -28,8 +28,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@douyinfe/semi-foundation": "2.60.0",
-    "@douyinfe/semi-theme-default": "2.60.0",
+    "@douyinfe/semi-foundation": "2.61.0",
+    "@douyinfe/semi-theme-default": "2.61.0",
     "classnames": "^2.3.2",
     "sass": "^1.57.1",
     "vue": "^3.4.31"

diff --git a/packages/semi-icons-vue/package.json b/packages/semi-icons-vue/package.json
@@ -22,8 +22,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@douyinfe/semi-foundation": "2.60.0",
-    "@douyinfe/semi-theme-default": "2.60.0",
+    "@douyinfe/semi-foundation": "2.61.0",
+    "@douyinfe/semi-theme-default": "2.61.0",
     "classnames": "^2.3.2",
     "sass": "^1.57.1",
     "vue": "^3.4.31"

diff --git a/packages/semi-illustrations-vue/package.json b/packages/semi-illustrations-vue/package.json
@@ -26,8 +26,8 @@
     "build:icon": "node scripts/build-illustration.cjs"
   },
   "dependencies": {
-    "@douyinfe/semi-foundation": "2.60.0",
-    "@douyinfe/semi-theme-default": "2.60.0",
+    "@douyinfe/semi-foundation": "2.61.0",
+    "@douyinfe/semi-theme-default": "2.61.0",
     "classnames": "^2.3.2",
     "vue": "^3.4.31"
   },

diff --git a/packages/semi-ui-vue/package.json b/packages/semi-ui-vue/package.json
@@ -24,9 +24,9 @@
     "url": "https://github.com/rashagu/semi-design-vue"
   },
   "dependencies": {
-    "@douyinfe/semi-foundation": "2.60.0",
-    "@douyinfe/semi-theme-default": "2.60.0",
-    "@douyinfe/semi-animation": "2.60.0",
+    "@douyinfe/semi-foundation": "2.61.0",
+    "@douyinfe/semi-theme-default": "2.61.0",
+    "@douyinfe/semi-animation": "2.61.0",
     "@kousum/semi-animation-vue": "^0.14.2",
     "@kousum/semi-icons-vue": "^0.14.2",
     "@kousum/semi-illustrations-vue": "^0.14.2",

diff --git a/packages/semi-ui-vue/src/App.tsx b/packages/semi-ui-vue/src/App.tsx
@@ -163,7 +163,7 @@ const App = defineComponent<ExampleProps>((props, {slots}) => {
         {/*<AnchorDemo />*/}
         {/*<TabsDemo />*/}
         {/*<TabsDemo3/>*/}
-        {/*<TabsDemo4/>*/}
+        <TabsDemo4/>
         {/*<TabsDemoVueSFC/>*/}
         {/*<CardDemo >*/}
         {/*  {a.value}*/}
@@ -252,7 +252,7 @@ const App = defineComponent<ExampleProps>((props, {slots}) => {
         {/*<NumeralDemo/>*/}
         {/*<TextDemo/>*/}
         {/*<LinkDemo/>*/}
-        <TypoCopyDemo/>
+        {/*<TypoCopyDemo/>*/}
         {/*<div style={{color:'#E91E63',width: 100, display:'flex', flexWrap:'wrap'}}>*/}
         {/*  <Button />*/}
         {/*<DemoButtonSFC/>*/}

diff --git a/packages/semi-ui-vue/src/components/breadcrumb/index.tsx b/packages/semi-ui-vue/src/components/breadcrumb/index.tsx
@@ -62,6 +62,7 @@ export interface BreadcrumbProps extends BaseProps {
     /* Style type for ellipsis area */
     moreType?: MoreType;
     'aria-label'?: AriaAttributes['aria-label'];
+    activeIndex?: number
 }
 
 interface BreadcrumbState {
@@ -70,6 +71,7 @@ interface BreadcrumbState {
 
 
 const propTypes_:ComponentObjectPropsOptions<BreadcrumbProps> = {
+    activeIndex: propTypes.number,
     routes: propTypes.array,
     onClick: propTypes.func as PropType<BreadcrumbProps['onClick']>,
     separator: propTypes.node as PropType<BreadcrumbProps['separator']>,
@@ -205,10 +207,10 @@ const Breadcrumb = defineComponent<BreadcrumbProps>((props, {}) => {
                 <BreadcrumbItem
                   {...route}
                   key={key}
-                  active={idx === items.length - 1}
+                  active={props.activeIndex !== undefined ? props.activeIndex===idx : idx === items.length - 1}
                   route={route._origin}
                   // eslint-disable-next-line max-len
-                  shouldRenderSeparator={!(shouldCollapse && (hasRenderMore || moreTypeIsPopover) && inCollapseArea)}
+                  shouldRenderSeparator={ (idx !== items.length - 1) && !(shouldCollapse && (hasRenderMore || moreTypeIsPopover) && inCollapseArea)}
                 >
                     {renderItem ? renderItem(route._origin) : route.name}
                 </BreadcrumbItem>
@@ -260,8 +262,8 @@ const Breadcrumb = defineComponent<BreadcrumbProps>((props, {}) => {
 
                   return cloneVNode(item, {
                       key: `${idx}-item`,
-                      active: idx === items.length - 1,
-                      shouldRenderSeparator: !(shouldCollapse && (hasRenderMore || moreTypeIsPopover) && inCollapseArea)
+                      active: props.activeIndex !== undefined ? props.activeIndex === idx : idx === items.length - 1,
+                      shouldRenderSeparator: (idx !== items.length - 1) && (!(shouldCollapse && (hasRenderMore || moreTypeIsPopover) && inCollapseArea))
                   });
               })
             );

diff --git a/packages/semi-ui-vue/src/components/breadcrumb/item.tsx b/packages/semi-ui-vue/src/components/breadcrumb/item.tsx
@@ -226,9 +226,7 @@ const BreadcrumbItem = defineComponent<BreadcrumbItemProps>(
       } = props;
       const pageLabel = active ? { 'aria-current': 'page' as const } : {};
       const item = renderItem();
-      const separator = !active
-        ? props.separator || <span class={`${clsPrefix}-separator`}>{(context.value as any).separator}</span>
-        : null;
+      const separator = props.separator || <span class={`${clsPrefix}-separator`}>{context.value.separator}</span>;
       const wrapperCLs = cls({
         [`${clsPrefix}-item-wrap`]: true,
         // [`${clsPrefix}-item-wrap-iconOnly`]: !!children && props.icon,

diff --git a/packages/semi-ui-vue/src/components/form/baseForm.tsx b/packages/semi-ui-vue/src/components/form/baseForm.tsx
@@ -168,6 +168,13 @@ const Form = defineComponent<BaseFormProps>((props, {}) => {
             },
             getFieldDOM: (field: string) =>
               document.querySelector(`.${cssClasses.PREFIX}-field[x-field-id="${field}"]`),
+            getFieldErrorDOM: (field: string) => {
+                const { formId } = state;
+                const { id } = props;
+                const xId = id ? id : formId;
+                let selector = `form[x-form-id="${xId}"] .${cssClasses.PREFIX}-field[x-field-id="${field}"] .${cssClasses.PREFIX}-field-error-message`;
+                return document.querySelector(selector);
+            }
         };
     }
     const adapter = adapter_()

diff --git a/packages/semi-ui-vue/src/components/overflowList/index.tsx b/packages/semi-ui-vue/src/components/overflowList/index.tsx
@@ -18,7 +18,7 @@ import {
   h,
   isVNode, nextTick, PropType,
   reactive, ref, shallowRef,
-  useSlots,
+  useSlots, VNode,
   watch,
 } from 'vue';
 import {vuePropsMake} from "../PropTypes";
@@ -49,7 +49,10 @@ export interface OverflowListProps {
   visibleItemRenderer?: (item: OverflowItem, index: number) => VueJsxNode;
   wrapperClassName?: string;
   wrapperStyle?: CSSProperties;
-  itemKey?: Key | ((item: OverflowItem) => Key)
+  itemKey?: Key | ((item: OverflowItem) => Key);
+  onVisibleStateChange?: (visibleState: Map<string, boolean>) => void;
+  overflowRenderDirection?: "both"|"start"|'end' // used in tabs, not exposed to user
+  collapseMask?: any
 }
 
 export interface OverflowListState {
@@ -76,6 +79,7 @@ const defaultProps = {
   threshold: 0.75,
   visibleItemRenderer: (): VueJsxNode => null,
   onOverflow: () => null,
+  overflowRenderDirection: "both",
 };
 const propTypes:ComponentObjectPropsOptions<OverflowListProps> = {
   // if render in scroll mode, key is required in items
@@ -93,6 +97,9 @@ const propTypes:ComponentObjectPropsOptions<OverflowListProps> = {
   visibleItemRenderer: PropTypes.func as PropType<OverflowListProps['visibleItemRenderer']>,
   wrapperClassName: PropTypes.string,
   wrapperStyle: PropTypes.object,
+  collapseMask: PropTypes.object as PropType<OverflowListProps['collapseMask']>,
+  overflowRenderDirection: PropTypes.string as PropType<OverflowListProps['overflowRenderDirection']>,
+  onVisibleStateChange: PropTypes.func as PropType<OverflowListProps['onVisibleStateChange']>,
 };
 export const vuePropsType = vuePropsMake<OverflowListProps>(propTypes, defaultProps)
 const OverflowList = defineComponent<OverflowListProps>((props, {}) => {
@@ -152,6 +159,7 @@ const OverflowList = defineComponent<OverflowListProps>((props, {}) => {
       ...adapterInject(),
       updateVisibleState: (visibleState): void => {
         state.visibleState = visibleState
+        props.onVisibleStateChange?.(visibleState);
       },
       updateStates: (states): void => {
         states && Object.keys(states).forEach(key => {
@@ -307,28 +315,36 @@ const OverflowList = defineComponent<OverflowListProps>((props, {}) => {
     }
     const inner =
       renderMode === RenderMode.SCROLL ?
-        [
-          overflow[0],
-          <div
+        (()=>{
+          const list = [<div
             class={cls(wrapperClassName, `${prefixCls}-scroll-wrapper`)}
             ref={(ref): void => {
-              // @ts-ignore
-              scroller = ref;
+              scroller = ref as any;
             }}
-            style={{...wrapperStyle}}
+            style={{ ...wrapperStyle }}
             key={`${prefixCls}-scroll-wrapper`}
           >
-            {visible.map(visibleItemRenderer).map((item: VueJsxNode) => {
-              const {forwardRef, key} = item as any;
-              return cloneVNode(item as any, {
+            {visible.map(visibleItemRenderer).map((item) => {
+              const { forwardRef, key } = item as any;
+              return cloneVNode(item as VNode, {
                 ref: (node: any) => mergeRef(forwardRef, node, key),
                 'data-scrollkey': `${key}`,
                 key,
               });
             })}
-          </div>,
-          overflow[1],
-        ] :
+          </div>];
+          if (props.overflowRenderDirection === "both") {
+            list.unshift(overflow[0]);
+            list.push(overflow[1]);
+          } else if (props.overflowRenderDirection === "start") {
+            list.unshift(overflow[1]);
+            list.unshift(overflow[0]);
+          } else {
+            list.push(overflow[0]);
+            list.push(overflow[1]);
+          }
+          return list;
+        })() :
         [
           collapseFrom === Boundary.START ? overflow : null,
           visible.map((item, idx) => {

diff --git a/packages/semi-ui-vue/src/components/pagination/index.tsx b/packages/semi-ui-vue/src/components/pagination/index.tsx
@@ -383,6 +383,7 @@ const Pagination = defineComponent<PaginationProps>((props, {}) => {
         i < 3 ? (content = restLeftPageList) : (content = restRightPageList);
         return (
           <Popover
+            rePosKey={props.currentPage}
             trigger="hover"
             // onVisibleChange={visible=>handleRestHover(visible, i < 3 ? 'left' : 'right')}
             content={renderRestPageList(content)}