feat: semi 2.67.0

rashagu · Sep 29, 2024 · 1fe4387 · 1fe4387
1 parent d00381c
commit 1fe4387
Show file tree

Hide file tree

Showing 25 changed files with 311 additions and 246 deletions.
diff --git a/package.json b/package.json
@@ -34,11 +34,11 @@
     "packages/vite-plugin-semi-theme"
   ],
   "dependencies": {
-    "@douyinfe/semi-foundation": "2.66.1",
-    "@douyinfe/semi-theme-default": "2.66.1",
+    "@douyinfe/semi-foundation": "2.67.0",
+    "@douyinfe/semi-theme-default": "2.67.0",
     "@vue/repl": "4.3.1",
     "lodash": "^4.17.21",
-    "vue": "^3.5.9"
+    "vue": "^3.5.10"
   },
   "devDependencies": {
     "@babel/core": "^7.18.2",
@@ -48,7 +48,7 @@
     "@babel/preset-react": "^7.16.7",
     "@changesets/cli": "^2.27.1",
     "@chromatic-com/storybook": "1.3.4",
-    "@douyinfe/semi-theme-default": "2.66.1",
+    "@douyinfe/semi-theme-default": "2.67.0",
     "@kousum/semi-icons-lab-vue": "workspace: *",
     "@kousum/semi-icons-vue": "workspace: *",
     "@kousum/semi-illustrations-vue": "workspace: *",

diff --git a/packages/semi-animation-vue/package.json b/packages/semi-animation-vue/package.json
@@ -38,13 +38,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@douyinfe/semi-animation": "2.66.1",
-    "@douyinfe/semi-animation-styled": "2.66.1",
-    "@douyinfe/semi-foundation": "2.66.1",
-    "@douyinfe/semi-theme-default": "2.66.1",
+    "@douyinfe/semi-animation": "2.67.0",
+    "@douyinfe/semi-animation-styled": "2.67.0",
+    "@douyinfe/semi-foundation": "2.67.0",
+    "@douyinfe/semi-theme-default": "2.67.0",
     "classnames": "^2.3.2",
     "sass": "^1.57.1",
-    "vue": "^3.5.9"
+    "vue": "^3.5.10"
   },
   "peerDependencies": {
     "vue": ">=3.4.3"

diff --git a/packages/semi-icons-lab-vue/package.json b/packages/semi-icons-lab-vue/package.json
@@ -28,11 +28,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@douyinfe/semi-foundation": "2.66.1",
-    "@douyinfe/semi-theme-default": "2.66.1",
+    "@douyinfe/semi-foundation": "2.67.0",
+    "@douyinfe/semi-theme-default": "2.67.0",
     "classnames": "^2.3.2",
     "sass": "^1.57.1",
-    "vue": "^3.5.9"
+    "vue": "^3.5.10"
   },
   "peerDependencies": {
     "vue": ">=3.4.3"

diff --git a/packages/semi-icons-vue/package.json b/packages/semi-icons-vue/package.json
@@ -22,11 +22,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@douyinfe/semi-foundation": "2.66.1",
-    "@douyinfe/semi-theme-default": "2.66.1",
+    "@douyinfe/semi-foundation": "2.67.0",
+    "@douyinfe/semi-theme-default": "2.67.0",
     "classnames": "^2.3.2",
     "sass": "^1.57.1",
-    "vue": "^3.5.9"
+    "vue": "^3.5.10"
   },
   "peerDependencies": {
     "vue": ">=3.4.3"

diff --git a/packages/semi-illustrations-vue/package.json b/packages/semi-illustrations-vue/package.json
@@ -26,10 +26,10 @@
     "build:icon": "node scripts/build-illustration.cjs"
   },
   "dependencies": {
-    "@douyinfe/semi-foundation": "2.66.1",
-    "@douyinfe/semi-theme-default": "2.66.1",
+    "@douyinfe/semi-foundation": "2.67.0",
+    "@douyinfe/semi-theme-default": "2.67.0",
     "classnames": "^2.3.2",
-    "vue": "^3.5.9"
+    "vue": "^3.5.10"
   },
   "peerDependencies": {
     "vue": ">=3.4.3"

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.66.1",
-    "@douyinfe/semi-theme-default": "2.66.1",
-    "@douyinfe/semi-animation": "2.66.1",
+    "@douyinfe/semi-foundation": "2.67.0",
+    "@douyinfe/semi-theme-default": "2.67.0",
+    "@douyinfe/semi-animation": "2.67.0",
     "@kousum/semi-animation-vue": "workspace:*",
     "@kousum/semi-icons-vue": "workspace:*",
     "@kousum/semi-illustrations-vue": "workspace:*",
@@ -52,7 +52,7 @@
     "lottie-web": "^5.12.2",
     "@mdx-js/vue": "^3.0.1",
     "unified": "^11.0.5",
-    "vue": "^3.5.9"
+    "vue": "^3.5.10"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",

diff --git a/packages/semi-ui-vue/src/App.tsx b/packages/semi-ui-vue/src/App.tsx
@@ -159,6 +159,7 @@ import ModalDocsDemo from './components/modal/__test__/ModalDocsDemo';
 import SelectDocsDemo from './components/select/__test__/SelectDocsDemo';
 import HotKeysDemo2 from './components/hotKeys/__test__/HotKeysDemo2';
 import HotKeysDocsDemo from './components/hotKeys/__test__/HotKeysDocsDemo';
+import OptionDemo from './components/autoComplete/__test__/OptionDemo';
 
 export interface ExampleProps {
   name?: string
@@ -229,7 +230,7 @@ const App = defineComponent<ExampleProps>((props, {slots}) => {
         {/*<TableDemo8 />*/}
         {/*<TableDemo9 />*/}
         {/*<TableDemo10 />*/}
-        <TableDemo11 />
+        {/*<TableDemo11 />*/}
         {/*<TableDemo12 />*/}
         {/*<TableDemo13Virtualized />*/}
         {/*<PaginationDemo />*/}
@@ -298,6 +299,7 @@ const App = defineComponent<ExampleProps>((props, {slots}) => {
         {/*<TagInputDemo />*/}
 
         {/*<AutoCompleteDemo/>*/}
+        <OptionDemo/>
         {/*<DiyItemAutoComplete/>*/}
         {/*<RemoteAutoComplete/>*/}
         {/*<AutoCompleteSFC/>*/}

diff --git a/packages/semi-ui-vue/src/components/autoComplete/__test__/test.spec.tsx b/packages/semi-ui-vue/src/components/autoComplete/__test__/test.spec.tsx
@@ -3,6 +3,7 @@ import {mount} from "@vue/test-utils";
 import { expect, test } from 'vitest'
 import Comp from "./AutoCompleteItemsDemo";
 import OptionDemo from "./OptionDemo";
+import { render, screen, } from '@testing-library/vue';
 
 test('AutoComplete test', async () => {
   const wrapper = mount(Comp, {})
@@ -13,8 +14,7 @@ test('AutoComplete test', async () => {
 })
 
 test('AutoComplete Option test', async () => {
-  const wrapper = mount(OptionDemo, {})
-
-  const profileLink = wrapper.get('.semi-autoComplete-option')
-  expect(profileLink.text()).toEqual('[email protected]')
+  render(OptionDemo, {})
+  const option = await screen.findByRole('option')
+  expect(option.textContent).toEqual('[email protected]')
 })
diff --git a/packages/semi-ui-vue/src/components/autoComplete/index.tsx b/packages/semi-ui-vue/src/components/autoComplete/index.tsx
@@ -14,7 +14,7 @@ import Spin from '../spin';
 import Popover from '../popover';
 import Input, { InputProps } from '../input';
 import Trigger, { TriggerProps } from '../trigger';
-
+import { getUuidShort } from '@douyinfe/semi-foundation/utils/uuid';
 import Option from './option';
 import warning from '@douyinfe/semi-foundation/utils/warning';
 import '@douyinfe/semi-foundation/autoComplete/autoComplete.scss';
@@ -167,6 +167,30 @@ function AutoCompleteFunc<T extends AutoCompleteItems>() {
           updateFocusIndex: (focusIndex: number): void => {
             state.focusIndex = focusIndex;
           },
+          updateScrollTop: (index?: number) => {
+            let optionClassName;
+            /**
+             * Unlike Select which needs to process renderOptionItem separately, when renderItem is enabled in autocomplete
+             *  the content passed by the user is still wrapped in the selector of .semi-autocomplete-option
+             * so the selector does not need to be judged separately.
+             */
+            optionClassName = `.${prefixCls}-option-selected`;
+            if (index !== undefined) {
+              optionClassName = `.${prefixCls}-option:nth-child(${index + 1})`;
+            }
+
+            let destNode = document.querySelector(`#${prefixCls}-${optionListId} ${optionClassName}`) as HTMLDivElement;
+            if (Array.isArray(destNode)) {
+              destNode = destNode[0];
+            }
+            if (destNode) {
+              const destParent = destNode.parentNode as HTMLDivElement;
+              destParent.scrollTop = destNode.offsetTop -
+                destParent.offsetTop -
+                (destParent.clientHeight / 2) +
+                (destNode.clientHeight / 2);
+            }
+          },
         };
         return {
           ...adapterInject(),
@@ -251,7 +275,7 @@ function AutoCompleteFunc<T extends AutoCompleteItems>() {
       const foundation = new AutoCompleteFoundation(adapter);
       const triggerRef = ref();
       const optionsRef = ref();
-
+      let optionListId: string = "";
       warning(
         'triggerRender' in props && typeof props.triggerRender === 'function',
         `[Semi AutoComplete]
@@ -263,6 +287,7 @@ function AutoCompleteFunc<T extends AutoCompleteItems>() {
 
       onMounted(() => {
         foundation.init();
+        optionListId = getUuidShort();
       });
 
       onUnmounted(() => {
@@ -440,7 +465,7 @@ function AutoCompleteFunc<T extends AutoCompleteItems>() {
           ...dropdownStyle,
         };
         return (
-          <div class={listCls} role="listbox" style={style}>
+          <div class={listCls} role="listbox" style={style} id={`${prefixCls}-${optionListId}`}>
             {!loading ? optionsNode : renderLoading()}
           </div>
         );

diff --git a/packages/semi-ui-vue/src/components/cascader/index.tsx b/packages/semi-ui-vue/src/components/cascader/index.tsx
@@ -1052,14 +1052,14 @@ const Index = defineComponent({
       const inner = useCustomTrigger
         ? renderCustomTrigger()
         : [
-            <Fragment key={'prefix'}>{prefix || insetLabel ? renderPrefix() : null}</Fragment>,
-            <Fragment key={'selection'}>
-              <div class={sectionCls}>{renderSelectContent()}</div>
-            </Fragment>,
-            <Fragment key={'clearbtn'}>{renderClearBtn()}</Fragment>,
-            <Fragment key={'suffix'}>{suffix ? renderSuffix() : null}</Fragment>,
-            <Fragment key={'arrow'}>{renderArrow()}</Fragment>,
-          ];
+          <Fragment key={'prefix'}>{prefix || insetLabel ? renderPrefix() : null}</Fragment>,
+          <Fragment key={'selection'}>
+            <div class={sectionCls}>{renderSelectContent()}</div>
+          </Fragment>,
+          <Fragment key={'suffix'}>{suffix ? renderSuffix() : null}</Fragment>,
+          <Fragment key={'clearbtn'}>{renderClearBtn()}</Fragment>,
+          <Fragment key={'arrow'}>{renderArrow()}</Fragment>,
+        ];
       /**
        * Reasons for disabling the a11y eslint rule:
        * The following attributes(aria-controls,aria-expanded) will be automatically added by Tooltip, no need to declare here

diff --git a/packages/semi-ui-vue/src/components/cascader/item.tsx b/packages/semi-ui-vue/src/components/cascader/item.tsx
@@ -429,6 +429,9 @@ const Item = defineComponent({
 
     function renderEmpty() {
       const { emptyContent } = props;
+      if (emptyContent === null) {
+        return null;
+      }
       return (
         <LocaleConsumer componentName="Cascader">
           {(locale: Locale['Cascader']) => (

diff --git a/packages/semi-ui-vue/src/components/chat/chatBox/chatPropsType.ts b/packages/semi-ui-vue/src/components/chat/chatBox/chatPropsType.ts
@@ -19,6 +19,7 @@ export const chatContentVuePropsType: CombineProps<ChatContentProps> = {
   onMessageCopy: PropTypes.func as PropType<ChatContentProps['onMessageCopy']>,
   chatBoxRenderConfig: PropTypes.object,
   customMarkDownComponents: PropTypes.object,
+  renderDivider: PropTypes.func as PropType<ChatContentProps['renderDivider']>,
 }
 
 

diff --git a/packages/semi-ui-vue/src/components/chat/chatContent.tsx b/packages/semi-ui-vue/src/components/chat/chatContent.tsx
@@ -31,14 +31,14 @@ const ChatContent = defineComponent({
         roleConfig,
         chatBoxRenderConfig,
         align,
-        customMarkDownComponents,
+        customMarkDownComponents, renderDivider,
       } = props;
       return (
         <Fragment>
           {chats.map((item, index) => {
             const lastMessage = index === chats.length - 1;
             return item.role === ROLE.DIVIDER ? (
-              <Divider key={item.id} className={PREFIX_DIVIDER}>
+              renderDivider ? renderDivider(item) : <Divider key={item.id} className={PREFIX_DIVIDER}>
                 <LocaleConsumer componentName="Chat">
                   {(locale: Locale['Chat']) => locale['clearContext']}
                 </LocaleConsumer>

diff --git a/packages/semi-ui-vue/src/components/chat/index.tsx b/packages/semi-ui-vue/src/components/chat/index.tsx
@@ -72,6 +72,7 @@ export const chatPropTypes: CombineProps<ChatProps> = {
   uploadProps: PropTypes.object,
   uploadTipProps: PropTypes.object,
   mode: PropTypes.string as PropType<ChatProps['mode']>,
+  renderDivider: PropTypes.func as PropType<ChatProps['renderDivider']>,
 };
 const defaultProps = {
   align: CHAT_ALIGN.LEFT_RIGHT,
@@ -317,7 +318,7 @@ const index = defineComponent({
         hintCls,
         uploadProps,
         uploadTipProps,
-        sendHotKey,
+        sendHotKey, renderDivider
       } = props;
       const { backBottomVisible, chats, wheelScroll, uploadAreaVisible } = state;
       let showStopGenerateFlag = false;
@@ -371,6 +372,7 @@ const index = defineComponent({
                   onMessageReset={foundation.resetMessage}
                   onMessageCopy={onMessageCopy}
                   chatBoxRenderConfig={chatBoxRenderConfig}
+                  renderDivider={renderDivider}
                 />
                 {/* hint area */}
                 {!!hints?.length && (

diff --git a/packages/semi-ui-vue/src/components/chat/interface.ts b/packages/semi-ui-vue/src/components/chat/interface.ts
@@ -19,7 +19,8 @@ export interface CommonChatsProps {
   onMessageReset?: (message?: Message) => void;
   onMessageCopy?: (message?: Message) => void;
   chatBoxRenderConfig?: ChatBoxRenderConfig;
-  customMarkDownComponents?: MDXProps['components']
+  customMarkDownComponents?: MDXProps['components'];
+  renderDivider?: (message?: Message) => VNode;
 }
 
 export interface ChatProps extends CommonChatsProps {

diff --git a/packages/semi-ui-vue/src/components/checkbox/checkbox.tsx b/packages/semi-ui-vue/src/components/checkbox/checkbox.tsx
@@ -225,7 +225,7 @@ const Checkbox = defineComponent({
         [`${prefix}-unChecked`]: !props_.checked,
         [`${prefix}-cardType`]: props_.isCardType,
         [`${prefix}-cardType_disabled`]: props_.disabled && props_.isCardType,
-        [`${prefix}-cardType_unDisabled`]: !(props_.disabled && props_.isCardType),
+        [`${prefix}-cardType_enable`]: !(props_.disabled && props_.isCardType),
         [`${prefix}-cardType_checked`]: props_.isCardType && props_.checked && !props_.disabled,
         [`${prefix}-cardType_checked_disabled`]: props_.isCardType && props_.checked && props_.disabled,
         [className]: Boolean(className),

diff --git a/packages/semi-ui-vue/src/components/form/baseForm.tsx b/packages/semi-ui-vue/src/components/form/baseForm.tsx
@@ -29,6 +29,7 @@ import {
 import { vuePropsMake } from '../PropTypes';
 import { useBaseComponent } from '../_base/baseComponent';
 import { CombineProps } from '../interface';
+import ErrorMessage, { ReactFieldError } from './errorMessage';
 const prefix = cssClasses.PREFIX;
 
 interface BaseFormState {
@@ -44,6 +45,7 @@ const propTypes: CombineProps<BaseFormProps> = {
   onReset: PropTypes.func as PropType<BaseFormProps['onReset']>,
   // Triggered when the value of the form is updated, only when the value of the subfield changes. The entry parameter is formState.values
   onValueChange: PropTypes.func as PropType<BaseFormProps['onValueChange']>,
+  onErrorChange: PropTypes.func as PropType<BaseFormProps['onErrorChange']>,
   autoScrollToError: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
   allowEmpty: PropTypes.bool,
   className: PropTypes.string,
@@ -74,6 +76,7 @@ const defaultProps = {
   onSubmit: noop,
   onReset: noop,
   onValueChange: noop,
+  onErrorChange: noop,
   layout: 'vertical',
   labelPosition: 'top',
   allowEmpty: false,
@@ -135,6 +138,9 @@ const Form = defineComponent({
         notifyValueChange: (values: any, changedValues: any) => {
           props.onValueChange(values, changedValues);
         },
+        notifyErrorChange: (errors: Record<any, ReactFieldError>, changedError: Partial<Record<any, ReactFieldError>>) => {
+          props.onErrorChange(errors, changedError);
+        },
         notifyReset: () => {
           props.onReset();
         },
@@ -234,6 +240,7 @@ const Form = defineComponent({
         onChange,
         onSubmit,
         onSubmitFail,
+        onErrorChange,
         onValueChange,
         component,
         render,

diff --git a/packages/semi-ui-vue/src/components/form/errorMessage.tsx b/packages/semi-ui-vue/src/components/form/errorMessage.tsx
@@ -6,10 +6,11 @@ import { IconAlertTriangle, IconAlertCircle } from '@kousum/semi-icons-vue';
 import { CombineProps, VueJsxNode } from '../interface';
 import { cloneVNode, ComponentObjectPropsOptions, CSSProperties, defineComponent, h, isVNode, useSlots } from 'vue';
 import { vuePropsMake } from '../PropTypes';
+import type { BasicFieldError } from '@douyinfe/semi-foundation/form/interface';
 
 const prefix = cssClasses.PREFIX;
 
-export type ReactFieldError = Array<any> | VueJsxNode;
+export type ReactFieldError = BasicFieldError | VueJsxNode;
 
 export interface ErrorMessageProps {
   error?: ReactFieldError;

diff --git a/packages/semi-ui-vue/src/components/form/interface.ts b/packages/semi-ui-vue/src/components/form/interface.ts
@@ -69,7 +69,7 @@ export type CommonexcludeType = {
 
 export type RadioCheckboxExcludeProps = {
     defaultValue?: any;
-    chekced?: boolean;
+    checked?: boolean;
     defaultChecked?: boolean;
     field: string;
 };
@@ -114,6 +114,7 @@ export interface BaseFormProps <Values extends Record<string, any> = any> {
     onSubmitFail?: (errors: Record<keyof Values, FieldError>, values: Partial<Values>, e?: any) => void;
     onReset?: () => void;
     onValueChange?: (values: Values, changedValue: Partial<Values>) => void;
+    onErrorChange?: (errors: Record<keyof Values, FieldError>, changedError?: Partial<Record<keyof Values, FieldError>>) => void;
     onChange?: (formState: FormState) => void;
     allowEmpty?: boolean;
     validateFields?: (values: Values) => string | Partial<AllErrors<Values>>;