Merge branch 'main' of https://github.com/WeBankFinTech/fes-design

WeBankFinTech · Dec 22, 2021 · 30a946d · 30a946d
2 parents 80a94c5 + 1992b12
commit 30a946d
Show file tree

Hide file tree

Showing 22 changed files with 268 additions and 191 deletions.
diff --git a/components/divider/divider.jsx b/components/divider/divider.jsx
@@ -32,9 +32,7 @@ export default defineComponent({
         return () => (
             <div className={classList.value}>
                 {!props.vertical ? (
-                    <div
-                        className={`${prefixCls}-text is-${props.titlePlacement}`}
-                    >
+                    <div class={`${prefixCls}-text is-${props.titlePlacement}`}>
                         {slots.default?.()}
                     </div>
                 ) : null}

diff --git a/components/dropdown/dropdown.jsx b/components/dropdown/dropdown.jsx
@@ -86,7 +86,7 @@ export default defineComponent({
         });
         const renderOptions = () => (
             <div
-                className={`${prefixCls}-option-wrapper ${
+                class={`${prefixCls}-option-wrapper ${
                     hasIcon.value ? 'has-icon' : ''
                 }`}
             >
@@ -100,15 +100,15 @@ export default defineComponent({
                     const label = option[props.labelField];
                     return (
                         <div
-                            className={optionClassList}
+                            class={optionClassList}
                             onClick={() => {
                                 handleClick(option);
                             }}
                         >
-                            <span className={`${prefixCls}-option-icon`}>
+                            <span class={`${prefixCls}-option-icon`}>
                                 {option.icon?.()}
                             </span>
-                            <span className={`${prefixCls}-option-label`}>
+                            <span class={`${prefixCls}-option-label`}>
                                 {isFunction(label) ? label(option) : label}
                             </span>
                         </div>

diff --git a/components/ellipsis/ellipsis.jsx b/components/ellipsis/ellipsis.jsx
@@ -75,7 +75,7 @@ export default defineComponent({
         const renderTrigger = () => (
             <span
                 ref={triggerRef}
-                className={classList.value}
+                class={classList.value}
                 style={style.value}
                 onMouseenter={handleDisabled}
             >

diff --git a/components/menu/menu.jsx b/components/menu/menu.jsx
@@ -119,6 +119,6 @@ export default defineComponent({
             return renderChildren(props.options);
         };
 
-        return () => <div className={classList.value}>{render()}</div>;
+        return () => <div class={classList.value}>{render()}</div>;
     },
 });
diff --git a/components/menu/menuGroup.jsx b/components/menu/menuGroup.jsx
@@ -1,5 +1,9 @@
 import {
-    defineComponent, getCurrentInstance, computed, onMounted, onBeforeUnmount,
+    defineComponent,
+    getCurrentInstance,
+    computed,
+    onMounted,
+    onBeforeUnmount,
 } from 'vue';
 import Ellipsis from '../ellipsis';
 import getPrefixCls from '../_util/getPrefixCls';
@@ -21,9 +25,7 @@ export default defineComponent({
     },
     setup(props, { slots }) {
         const instance = getCurrentInstance();
-        const {
-            rootMenu, parentMenu, paddingStyle,
-        } = useMenu(instance);
+        const { rootMenu, parentMenu, paddingStyle } = useMenu(instance);
         // 根节点 menu
         if (!rootMenu) {
             return console.warn(
@@ -37,7 +39,9 @@ export default defineComponent({
             );
         }
         const { children } = useChildren();
-        const isActive = computed(() => children.some(child => child?.isActive));
+        const isActive = computed(() =>
+            children.some((child) => child?.isActive),
+        );
         const subMenu = {
             uid: instance.uid,
             type: 'menuGroup',
@@ -51,11 +55,16 @@ export default defineComponent({
             parentMenu.removeChild(subMenu);
         });
         const renderTitle = () => {
-            const Wrapper = <Ellipsis triggerClass={`${prefixCls}-label`} style={paddingStyle.value}></Ellipsis>;
+            const Wrapper = (
+                <Ellipsis
+                    triggerClass={`${prefixCls}-label`}
+                    style={paddingStyle.value}
+                ></Ellipsis>
+            );
             return <Wrapper>{slots.label?.() || props.label}</Wrapper>;
         };
         return () => (
-            <div className={prefixCls}>
+            <div class={prefixCls}>
                 {renderTitle()}
                 {slots.default?.()}
             </div>

diff --git a/components/menu/menuItem.jsx b/components/menu/menuItem.jsx
@@ -25,9 +25,8 @@ export default defineComponent({
     },
     setup(props, { slots }) {
         const instance = getCurrentInstance();
-        const {
-            rootMenu, parentMenu, paddingStyle, onlyIcon,
-        } = useMenu(instance);
+        const { rootMenu, parentMenu, paddingStyle, onlyIcon } =
+            useMenu(instance);
         // 根节点 menu
         if (!rootMenu) {
             return console.warn(
@@ -55,28 +54,32 @@ export default defineComponent({
         onBeforeUnmount(() => {
             parentMenu.removeChild(menuItem);
         });
-        const classList = computed(() => [prefixCls, isActive.value && 'is-active'].filter(Boolean).join(' '));
+        const classList = computed(() =>
+            [prefixCls, isActive.value && 'is-active']
+                .filter(Boolean)
+                .join(' '),
+        );
         const handleClick = () => {
             rootMenu.clickMenuItem(props.value);
         };
         const renderTitle = () => {
-            const Wrapper = <Ellipsis triggerClass={`${prefixCls}-label`}></Ellipsis>;
+            const Wrapper = (
+                <Ellipsis triggerClass={`${prefixCls}-label`}></Ellipsis>
+            );
             return <Wrapper>{slots.label?.() || props.label}</Wrapper>;
         };
         const renderIcon = () => {
             if (slots.icon) {
-                return (
-                    <span className={`${prefixCls}-icon`}>{slots.icon()}</span>
-                );
+                return <span class={`${prefixCls}-icon`}>{slots.icon()}</span>;
             }
             if (onlyIcon.value) {
                 return renderTitle();
             }
             return null;
         };
         return () => (
-            <div className={classList.value} onClick={handleClick}>
-                <div className={`${prefixCls}-wrapper`} style={paddingStyle.value}>
+            <div class={classList.value} onClick={handleClick}>
+                <div class={`${prefixCls}-wrapper`} style={paddingStyle.value}>
                     {renderIcon()}
                     {!onlyIcon.value ? renderTitle() : null}
                 </div>

diff --git a/components/menu/subMenu.jsx b/components/menu/subMenu.jsx
@@ -17,7 +17,6 @@ import { COMPONENT_NAME } from './const';
 import useMenu from './useMenu';
 import useChildren from './useChildren';
 
-
 const prefixCls = getPrefixCls('sub-menu');
 export default defineComponent({
     name: COMPONENT_NAME.SUB_MENU,
@@ -56,7 +55,9 @@ export default defineComponent({
         }
         const { children } = useChildren();
         const isOpened = ref(false);
-        const isActive = computed(() => children.some(child => child?.isActive));
+        const isActive = computed(() =>
+            children.some((child) => child?.isActive),
+        );
         const subMenu = {
             uid: instance.uid,
             value: props.value,
@@ -70,7 +71,9 @@ export default defineComponent({
             // 默认展开全部
             if (rootMenu.props.defaultExpandAll) {
                 // 这才能触发watch
-                rootMenu.openedMenus.value = rootMenu.openedMenus.value.concat(props.value || instance.uid);
+                rootMenu.openedMenus.value = rootMenu.openedMenus.value.concat(
+                    props.value || instance.uid,
+                );
             }
         });
         onBeforeUnmount(() => {
@@ -82,16 +85,20 @@ export default defineComponent({
             }
             return 'right-start';
         });
-        const classList = computed(() => [prefixCls, isActive.value && 'is-active'].filter(Boolean).join(' '));
+        const classList = computed(() =>
+            [prefixCls, isActive.value && 'is-active']
+                .filter(Boolean)
+                .join(' '),
+        );
         const handleClickTrigger = () => {
             isOpened.value = !isOpened.value;
             rootMenu.clickSubMenu(subMenu, indexPath);
         };
         watch(rootMenu.openedMenus, () => {
-            if (
-                !rootMenu.renderWithPopper.value
-            ) {
-                const index = rootMenu.openedMenus.value.indexOf(props.value || instance.uid);
+            if (!rootMenu.renderWithPopper.value) {
+                const index = rootMenu.openedMenus.value.indexOf(
+                    props.value || instance.uid,
+                );
                 if (index === -1 && isOpened.value) {
                     isOpened.value = false;
                 } else if (index !== -1 && !isOpened.value) {
@@ -100,14 +107,14 @@ export default defineComponent({
             }
         });
         const renderTitle = () => {
-            const Wrapper = <Ellipsis triggerClass={`${prefixCls}-label`}></Ellipsis>;
+            const Wrapper = (
+                <Ellipsis triggerClass={`${prefixCls}-label`}></Ellipsis>
+            );
             return <Wrapper>{slots.label?.() || props.label}</Wrapper>;
         };
         const renderIcon = () => {
             if (slots.icon) {
-                return (
-                    <div className={`${prefixCls}-icon`}>{slots.icon()}</div>
-                );
+                return <div class={`${prefixCls}-icon`}>{slots.icon()}</div>;
             }
             if (onlyIcon.value) {
                 return renderTitle();
@@ -118,26 +125,26 @@ export default defineComponent({
             if (rootMenu.renderWithPopper.value) {
                 if (isFirstLevel.value) {
                     return (
-                        <span className={`${prefixCls}-arrow`}>
+                        <span class={`${prefixCls}-arrow`}>
                             {isOpened.value ? <UpOutlined /> : <DownOutlined />}
                         </span>
                     );
                 }
                 return (
-                    <span className={`${prefixCls}-arrow is-right`}>
+                    <span class={`${prefixCls}-arrow is-right`}>
                         <RightOutlined />
                     </span>
                 );
             }
             return (
-                <span className={`${prefixCls}-arrow is-right`}>
+                <span class={`${prefixCls}-arrow is-right`}>
                     {isOpened.value ? <UpOutlined /> : <DownOutlined />}
                 </span>
             );
         };
-        const renderWrapper = trigger => (
+        const renderWrapper = (trigger) => (
             <div
-                className={`${prefixCls}-wrapper`}
+                class={`${prefixCls}-wrapper`}
                 style={paddingStyle.value}
                 onClick={() => {
                     trigger === 'click' && handleClickTrigger();
@@ -174,7 +181,7 @@ export default defineComponent({
             );
         };
         return () => (
-            <div className={classList.value} ref={subMenuRef}>
+            <div class={classList.value} ref={subMenuRef}>
                 {renderContent()}
             </div>
         );

diff --git a/components/pagination/jumper.jsx b/components/pagination/jumper.jsx
@@ -1,6 +1,4 @@
-import {
-    defineComponent, toRefs, ref,
-} from 'vue';
+import { defineComponent, toRefs, ref } from 'vue';
 
 import getPrefixCls from '../_util/getPrefixCls';
 import FInput from '../input/input';
@@ -31,20 +29,21 @@ export default defineComponent({
             if (Number.isNaN(cur)) {
                 return;
             }
-            const currentPage = cur < 1 ? 1 : (cur > total.value ? total.value : cur);
+            const currentPage =
+                cur < 1 ? 1 : cur > total.value ? total.value : cur;
             current.value = currentPage;
             props.change(currentPage);
         };
         return () => (
-            <div className={`${prefixCls}-jumper`}>
-                <span className={`${prefixCls}-jumper-item`}>跳至</span>
-                <span className={`${prefixCls}-jumper-item`}>第</span>
+            <div class={`${prefixCls}-jumper`}>
+                <span class={`${prefixCls}-jumper-item`}>跳至</span>
+                <span class={`${prefixCls}-jumper-item`}>第</span>
                 <FInput
                     v-model={current.value}
                     placeholder=""
-                    onChange={handleChange}>
-                </FInput>
-                <span className={`${prefixCls}-jumper-item`}>页</span>
+                    onChange={handleChange}
+                ></FInput>
+                <span class={`${prefixCls}-jumper-item`}>页</span>
             </div>
         );
     },