perf: remove optional chain

CHANGELOG.zh_CN.md

 ## Wip
 
+### ✨ Features
+
+- 面包屑支持显示图标
+- 新增 tinymce 富文本组件
+
+### 🎫 Chores
+
+- 删除代码内的可选链语法
+
 ### 🐛 Bug Fixes
 
 - 修复抽屉组件自动高度及显示 footer 显示问题
 - 修复表单查询后重置回默认值
+- 修复菜单没有子节点时显示折叠的问题
+- 修复面包屑显示样式问题
+- 修复 modal 在 destroyOnClose=true 时多次打开拖拽失效
 
 # 2.0.0-rc.4 (2020-10-21)
 

src/components/Authority/index.ts

+import Authority from './src/index.vue';
+export default Authority;

src/components/Authority/index.tsx → src/components/Authority/src/index.vue

-import { defineComponent, PropType, computed, unref } from 'vue';
+<script lang="ts">
+  import { defineComponent, PropType, computed, unref } from 'vue';
 
-import { PermissionModeEnum } from '/@/enums/appEnum';
-import { RoleEnum } from '/@/enums/roleEnum';
-import { usePermission } from '/@/hooks/web/usePermission';
-import { appStore } from '/@/store/modules/app';
-import { getSlot } from '/@/utils/helper/tsxHelper';
+  import { PermissionModeEnum } from '/@/enums/appEnum';
+  import { RoleEnum } from '/@/enums/roleEnum';
+  import { usePermission } from '/@/hooks/web/usePermission';
+  import { appStore } from '/@/store/modules/app';
+  import { getSlot } from '/@/utils/helper/tsxHelper';
 
-export default defineComponent({
+  export default defineComponent({
     name: 'Authority',
     props: {
       // 指定角色可见
@@ -51,11 +52,14 @@ export default defineComponent({
         if (mode === PermissionModeEnum.ROLE) {
           return renderRoleAuth();
         }
+
         // 基于后台编码渲染
         if (mode === PermissionModeEnum.BACK) {
           return renderCodeAuth();
         }
+
         return getSlot(slots);
       };
     },
-});
+  });
+</script>

src/components/Basic/index.ts

 export { default as BasicArrow } from './src/BasicArrow.vue';
-export { default as BasicHelp } from './src/BasicHelp';
+export { default as BasicHelp } from './src/BasicHelp.vue';
 export { default as BasicTitle } from './src/BasicTitle.vue';

src/components/Basic/src/BasicHelp.less

-@import (reference) '../../../design/index.less';
-
-.base-help {
-  display: inline-block;
-  margin-left: 6px;
-  font-size: 14px;
-  color: @text-color-help-dark;
-  cursor: pointer;
-
-  &:hover {
-    color: @primary-color;
-  }
-
-  &__wrap {
-    p {
-      margin-bottom: 0;
-    }
-  }
-}

src/components/Basic/src/BasicHelp.tsx → src/components/Basic/src/BasicHelp.vue

-import type { PropType } from 'vue';
+<script lang="ts">
+  import type { PropType } from 'vue';
 
-import { Tooltip } from 'ant-design-vue';
-import { InfoCircleOutlined } from '@ant-design/icons-vue';
-import { defineComponent, computed, unref } from 'vue';
+  import { Tooltip } from 'ant-design-vue';
+  import { InfoCircleOutlined } from '@ant-design/icons-vue';
+  import { defineComponent, computed, unref, h } from 'vue';
 
-import { getPopupContainer } from '/@/utils';
+  import { getPopupContainer } from '/@/utils';
 
-import { isString, isArray } from '/@/utils/is';
-import { getSlot } from '/@/utils/helper/tsxHelper';
-import './BasicHelp.less';
-export default defineComponent({
+  import { isString, isArray } from '/@/utils/is';
+  import { getSlot } from '/@/utils/helper/tsxHelper';
+  export default defineComponent({
     name: 'BaseHelp',
+    components: { Tooltip },
     props: {
       // max-width
       maxWidth: {
@@ -71,37 +72,66 @@ export default defineComponent({
       const renderTitle = () => {
         const list = props.text;
         if (isString(list)) {
-        return <p>{list}</p>;
+          return h('p', list);
         }
         if (isArray(list)) {
           return list.map((item, index) => {
-          return (
-            <p key={item}>
-              {props.showIndex ? `${index + 1}. ` : ''}
-              {item}
-            </p>
-          );
+            return h('p', { key: item }, [props.showIndex ? `${index + 1}. ` : '', item]);
           });
         }
         return null;
       };
-    return () => (
-      <Tooltip
-        title={(<div style={unref(getWrapStyleRef)}>{renderTitle()}</div>) as any}
-        placement="right"
-        overlayStyle={unref(getOverlayStyleRef)}
-        autoAdjustOverflow={true}
-        overlayClassName="base-help__wrap"
-        getPopupContainer={() => getPopupContainer()}
-      >
-        {{
-          default: () => (
-            <span class="base-help" style={unref(getMainStyleRef)}>
-              {getSlot(slots) || <InfoCircleOutlined />}
-            </span>
+      return () => {
+        return h(
+          Tooltip,
+          {
+            title: h(
+              'div',
+              {
+                style: unref(getWrapStyleRef),
+              },
+              [renderTitle()]
+            ) as any,
+            overlayClassName: 'base-help__wrap',
+            autoAdjustOverflow: true,
+            overlayStyle: unref(getOverlayStyleRef),
+            placement: 'right',
+            getPopupContainer: () => getPopupContainer(),
+          },
+          {
+            default: () =>
+              h(
+                'span',
+                {
+                  class: 'base-help',
+                  style: unref(getMainStyleRef),
+                },
+                getSlot(slots) || h(InfoCircleOutlined)
               ),
-        }}
-      </Tooltip>
+          }
         );
+      };
     },
-});
+  });
+</script>
+<style lang="less">
+  @import (reference) '../../../design/index.less';
+
+  .base-help {
+    display: inline-block;
+    margin-left: 6px;
+    font-size: 14px;
+    color: @text-color-help-dark;
+    cursor: pointer;
+
+    &:hover {
+      color: @primary-color;
+    }
+
+    &__wrap {
+      p {
+        margin-bottom: 0;
+      }
+    }
+  }
+</style>

src/components/Button/types.ts

-import { VNodeChild } from 'vue';
-
-export interface BasicButtonProps {
-  /**
-   * can be set to primary ghost dashed danger(added in 2.7) or omitted (meaning default)
-   * @default 'default'
-   * @type string
-   */
-  type?: 'primary' | 'danger' | 'dashed' | 'ghost' | 'default';
-
-  /**
-   * set the original html type of button
-   * @default 'button'
-   * @type string
-   */
-  htmlType?: 'button' | 'submit' | 'reset' | 'menu';
-
-  /**
-   * set the icon of button
-   * @type string
-   */
-  icon?: VNodeChild | JSX.Element;
-
-  /**
-   * can be set to circle or circle-outline or omitted
-   * @type string
-   */
-  shape?: 'circle' | 'circle-outline';
-
-  /**
-   * can be set to small large or omitted
-   * @default 'default'
-   * @type string
-   */
-  size?: 'small' | 'large' | 'default';
-
-  /**
-   * set the loading status of button
-   * @default false
-   * @type boolean | { delay: number }
-   */
-  loading?: boolean | { delay: number };
-
-  /**
-   * disabled state of button
-   * @default false
-   * @type boolean
-   */
-  disabled?: boolean;
-
-  /**
-   * make background transparent and invert text and border colors, added in 2.7
-   * @default false
-   * @type boolean
-   */
-  ghost?: boolean;
-
-  /**
-   * option to fit button width to its parent width
-   * @default false
-   * @type boolean
-   */
-  block?: boolean;
-
-  onClick?: (e?: Event) => void;
-}

src/components/Table/src/components/TableAction.tsx

@@ -84,10 +84,11 @@ export default defineComponent({
       const { dropDownActions = [], actions } = props;
       return (
         <div class={prefixCls}>
-          {actions?.map((action, index) => {
+          {actions &&
+            actions.map((action, index) => {
               return renderPopConfirm(action, index);
             })}
-          {dropDownActions?.length && (
+          {dropDownActions && dropDownActions.length && (
             <Dropdown>
               {{
                 default: dropdownDefaultSLot,

src/components/Table/src/components/renderEditableCell.tsx

@@ -45,8 +45,8 @@ const EditableCell = defineComponent({
     const isEditRef = ref(false);
     const currentValueRef = ref<string | boolean>(props.value);
 
-    function handleChange(e: ChangeEvent | string | boolean) {
-      if (Reflect.has((e as ChangeEvent)?.target, 'value')) {
+    function handleChange(e: any) {
+      if (e && e.target && Reflect.has(e.target, 'value')) {
         currentValueRef.value = (e as ChangeEvent).target.value;
       }
       if (isString(e) || isBoolean(e)) {
@@ -58,7 +58,7 @@ const EditableCell = defineComponent({
       isEditRef.value = true;
       nextTick(() => {
         const el = unref(elRef);
-        el?.focus();
+        el && el.focus();
       });
     }
 
@@ -84,7 +84,7 @@ const EditableCell = defineComponent({
     function onClickOutside() {
       const { component } = props;
 
-      if (component?.includes('Input')) {
+      if (component && component.includes('Input')) {
         handleCancel();
       }
     }

src/components/Table/src/hooks/useDataSource.ts

@@ -89,7 +89,7 @@ export function useDataSource(
         pageParams = {};
       } else {
         const { current, pageSize } = unref(getPaginationRef) as PaginationProps;
-        pageParams[pageField] = opt?.page || current;
+        pageParams[pageField] = (opt && opt.page) || current;
         pageParams[sizeField] = pageSize;
       }
 

src/components/Tinymce/src/Editor.vue

@@ -53,13 +53,12 @@
       });
 
       const initOptions = computed(() => {
-        const { height, menubar } = props;
+        const { height, options } = props;
         return {
           selector: `#${unref(tinymceId)}`,
           height: height,
           toolbar: toolbar,
-          theme: 'silver',
-          menubar: menubar,
+          menubar: 'file edit insert view format table',
           plugins: plugins,
           // 语言包
           language_url: 'resource/tinymce/langs/zh_CN.js',
@@ -70,6 +69,7 @@
           advlist_bullet_styles: 'square',
           advlist_number_styles: 'default',
           object_resizing: false,
+          ...options,
           setup: (editor: any) => {
             editorRef.value = editor;
             editor.on('init', (e: Event) => initSetup(e));

src/components/Tinymce/src/props.ts

 import { PropType } from 'vue';
 
 export const basicProps = {
-  menubar: {
-    type: String as PropType<string>,
-    default: 'file edit insert view format table',
+  options: {
+    type: Object as PropType<any>,
+    default: {},
   },
   value: {
     type: String as PropType<string>,

src/views/demo/editor/tinymce/index.vue

 <template>
-  <div class="flex p-4">
-    {{ value }}
+  <div class="p-4">
     <Tinymce v-model="value" @change="handleChange" width="100%" />
   </div>
 </template>
@@ -15,9 +14,6 @@
       function handleChange(value: string) {
         console.log(value);
       }
-      // setTimeout(() => {
-      //   value.value = '1233';
-      // }, 5000);
       return { handleChange, value };
     },
   });

vite.config.ts

@@ -8,7 +8,6 @@ import {
   // externals,
   cdnConf,
 } from './build/config/vite/cdn';
-
 import { createProxy } from './build/config/vite/proxy';
 import { createMockServer } from 'vite-plugin-mock';
 import PurgeIcons from 'vite-plugin-purge-icons';