chore: adjust component file name

package.json

@@ -53,7 +53,7 @@
     "sortablejs": "^1.13.0",
     "tinymce": "^5.8.1",
     "vditor": "^3.8.5",
-    "vue": "3.1.0-beta.4",
+    "vue": "3.1.0-beta.5",
     "vue-i18n": "9.1.6",
     "vue-json-pretty": "^2.0.2",
     "vue-router": "^4.0.8",
@@ -80,7 +80,7 @@
     "@vitejs/plugin-legacy": "^1.4.0",
     "@vitejs/plugin-vue": "^1.2.2",
     "@vitejs/plugin-vue-jsx": "^1.1.4",
-    "@vue/compiler-sfc": "3.1.0-beta.4",
+    "@vue/compiler-sfc": "3.1.0-beta.5",
     "autoprefixer": "^10.2.6",
     "commitizen": "^4.2.4",
     "conventional-changelog-cli": "^2.1.1",
@@ -109,7 +109,7 @@
     "stylelint-config-standard": "^22.0.0",
     "stylelint-order": "^4.1.0",
     "ts-node": "^10.0.0",
-    "typescript": "4.2.4",
+    "typescript": "4.3.2",
     "vite": "2.3.3",
     "vite-plugin-compression": "^0.2.5",
     "vite-plugin-html": "^2.0.7",

src/components/Authority/index.ts

-import Authority from './src/index.vue';
+import Authority from './src/Authority.vue';
 
 export { Authority };

src/components/ClickOutSide/index.ts

-import ClickOutSide from './src/index.vue';
+import ClickOutSide from './src/ClickOutSide.vue';
 
 export { ClickOutSide };

src/components/ContextMenu/src/index.tsx → src/components/ContextMenu/src/ContextMenu.tsx

@@ -33,24 +33,22 @@ export default defineComponent({
     const wrapRef = ref<ElRef>(null);
     const showRef = ref(false);
 
-    const getStyle = computed(
-      (): CSSProperties => {
-        const { axis, items, styles, width } = props;
-        const { x, y } = axis || { x: 0, y: 0 };
-        const menuHeight = (items || []).length * 40;
-        const menuWidth = width;
-        const body = document.body;
-
-        const left = body.clientWidth < x + menuWidth ? x - menuWidth : x;
-        const top = body.clientHeight < y + menuHeight ? y - menuHeight : y;
-        return {
-          ...styles,
-          width: `${width}px`,
-          left: `${left + 1}px`,
-          top: `${top + 1}px`,
-        };
-      }
-    );
+    const getStyle = computed((): CSSProperties => {
+      const { axis, items, styles, width } = props;
+      const { x, y } = axis || { x: 0, y: 0 };
+      const menuHeight = (items || []).length * 40;
+      const menuWidth = width;
+      const body = document.body;
+
+      const left = body.clientWidth < x + menuWidth ? x - menuWidth : x;
+      const top = body.clientHeight < y + menuHeight ? y - menuHeight : y;
+      return {
+        ...styles,
+        width: `${width}px`,
+        left: `${left + 1}px`,
+        top: `${top + 1}px`,
+      };
+    });
 
     onMounted(() => {
       nextTick(() => (showRef.value = true));

src/components/ContextMenu/src/createContextMenu.ts

-import contextMenuVue from './index';
+import contextMenuVue from './ContextMenu';
 import { isClient } from '/@/utils/is';
 import { CreateContextOptions, ContextMenuProps } from './types';
 import { createVNode, render } from 'vue';

src/components/CountTo/index.ts

 // Transform vue-count-to to support vue3 version
 
 import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
-export const CountTo = createAsyncComponent(() => import('./src/index.vue'));
+export const CountTo = createAsyncComponent(() => import('./src/CountTo.vue'));

src/components/Cropper/index.ts

 import type Cropper from 'cropperjs';
 
 export type { Cropper };
-export { default as CropperImage } from './src/index.vue';
+export { default as CropperImage } from './src/Cropper.vue';

src/components/Cropper/src/index.vue → src/components/Cropper/src/Cropper.vue

@@ -76,22 +76,18 @@
 
       const isReady = ref(false);
 
-      const getImageStyle = computed(
-        (): CSSProperties => {
-          return {
-            height: props.height,
-            maxWidth: '100%',
-            ...props.imageStyle,
-          };
-        }
-      );
+      const getImageStyle = computed((): CSSProperties => {
+        return {
+          height: props.height,
+          maxWidth: '100%',
+          ...props.imageStyle,
+        };
+      });
 
-      const getWrapperStyle = computed(
-        (): CSSProperties => {
-          const { height } = props;
-          return { height: `${height}`.replace(/px/, '') + 'px' };
-        }
-      );
+      const getWrapperStyle = computed((): CSSProperties => {
+        const { height } = props;
+        return { height: `${height}`.replace(/px/, '') + 'px' };
+      });
 
       async function init() {
         const imgEl = unref(imgElRef);

src/components/Description/index.ts

-import Description from './src/index.vue';
+import Description from './src/Description.vue';
 
 export { Description };
 export * from './src/types';

src/components/Description/src/index.vue → src/components/Description/src/Description.vue

@@ -51,15 +51,13 @@
       /**
        * @description: Get configuration Collapse
        */
-      const getCollapseOptions = computed(
-        (): CollapseContainerOptions => {
-          return {
-            // Cannot be expanded by default
-            canExpand: false,
-            ...unref(getProps).collapseOptions,
-          };
-        }
-      );
+      const getCollapseOptions = computed((): CollapseContainerOptions => {
+        return {
+          // Cannot be expanded by default
+          canExpand: false,
+          ...unref(getProps).collapseOptions,
+        };
+      });
 
       const getDescriptionsProps = computed(() => {
         return { ...unref(attrs), ...unref(getProps) } as DescriptionsProps;

src/components/FlowChart/index.ts

 import type { App } from 'vue';
-import flowChart from './src/index.vue';
+import flowChart from './src/FlowChart.vue';
 
 export const FlowChart = Object.assign(flowChart, {
   install(app: App) {

src/components/FlowChart/src/index.vue → src/components/FlowChart/src/FlowChart.vue

@@ -55,7 +55,7 @@
       const appStore = useAppStore();
       const [register, { openModal }] = useModal();
       createFlowChartContext({
-        logicFlow: (lfInstance as unknown) as LogicFlow,
+        logicFlow: lfInstance as unknown as LogicFlow,
       });
 
       const getFlowOptions = computed(() => {

src/components/Icon/index.ts

-import Icon from './src/index.vue';
+import Icon from './src/Icon.vue';
 import SvgIcon from './src/SvgIcon.vue';
 import IconPicker from './src/IconPicker.vue';
 

src/components/Icon/src/index.vue → src/components/Icon/src/Icon.vue

@@ -72,21 +72,19 @@
         }
       };
 
-      const getWrapStyle = computed(
-        (): CSSProperties => {
-          const { size, color } = props;
-          let fs = size;
-          if (isString(size)) {
-            fs = parseInt(size, 10);
-          }
-
-          return {
-            fontSize: `${fs}px`,
-            color: color,
-            display: 'inline-flex',
-          };
+      const getWrapStyle = computed((): CSSProperties => {
+        const { size, color } = props;
+        let fs = size;
+        if (isString(size)) {
+          fs = parseInt(size, 10);
         }
-      );
+
+        return {
+          fontSize: `${fs}px`,
+          color: color,
+          display: 'inline-flex',
+        };
+      });
 
       watch(() => props.icon, update, { flush: 'post' });
 

src/components/Icon/src/IconPicker.vue

@@ -31,7 +31,18 @@
                   v-for="icon in getPaginationList"
                   :key="icon"
                   :class="currentSelect === icon ? 'border border-primary' : ''"
-                  class="p-2 w-1/8 cursor-pointer mr-1 mt-1 flex justify-center items-center border border-solid hover:border-primary"
+                  class="
+                    p-2
+                    w-1/8
+                    cursor-pointer
+                    mr-1
+                    mt-1
+                    flex
+                    justify-center
+                    items-center
+                    border border-solid
+                    hover:border-primary
+                  "
                   @click="handleClick(icon)"
                   :title="icon"
                 >
@@ -71,7 +82,7 @@
   import { ScrollContainer } from '/@/components/Container';
 
   import { Input, Popover, Pagination, Empty } from 'ant-design-vue';
-  import Icon from './index.vue';
+  import Icon from './Icon.vue';
   import SvgIcon from './SvgIcon.vue';
 
   import iconsData from '../data/icons.data';
@@ -108,9 +119,7 @@
       width: propTypes.string.def('100%'),
       pageSize: propTypes.number.def(140),
       copy: propTypes.bool.def(false),
-      mode: propTypes
-        .oneOf<('svg' | 'iconify')[]>(['svg', 'iconify'])
-        .def('iconify'),
+      mode: propTypes.oneOf<('svg' | 'iconify')[]>(['svg', 'iconify']).def('iconify'),
     },
     emits: ['change'],
     setup(props, { emit }) {

src/components/Loading/index.ts

-import Loading from './src/index.vue';
+import Loading from './src/Loading.vue';
 
 export { Loading };
 export { useLoading } from './src/useLoading';

src/components/Loading/src/createLoading.ts

@@ -2,7 +2,7 @@ import { VNode, defineComponent } from 'vue';
 import type { LoadingProps } from './types';
 
 import { createVNode, render, reactive, h } from 'vue';
-import Loading from './index.vue';
+import Loading from './Loading.vue';
 
 export function createLoading(props?: Partial<LoadingProps>, target?: HTMLElement, wait = false) {
   let vm: Nullable<VNode> = null;

src/components/Markdown/index.ts

 import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
-export const MarkDown = createAsyncComponent(() => import('./src/index.vue'));
+export const MarkDown = createAsyncComponent(() => import('./src/Markdown.vue'));
 
 export * from './src/types';

src/components/Preview/index.ts

-export { default as ImagePreview } from './src/index.vue';
+export { default as ImagePreview } from './src/Preview.vue';

src/components/Qrcode/index.ts

-export { default as QrCode } from './src/index.vue';
+export { default as QrCode } from './src/Qrcode.vue';
 
 export * from './src/types';

src/components/Scrollbar/index.ts

@@ -2,7 +2,7 @@
  * copy from element-ui
  */
 
-import Scrollbar from './src/index.vue';
+import Scrollbar from './src/Scrollbar.vue';
 
 export { Scrollbar };
 export type { ScrollbarType } from './src/types';

src/components/StrengthMeter/index.ts

-export { default as StrengthMeter } from './src/index.vue';
+export { default as StrengthMeter } from './src/StrengthMeter.vue';

src/components/Time/index.ts

-export { default as Time } from './src/index.vue';
+export { default as Time } from './src/Time.vue';

src/components/Tree/index.ts

-import BasicTree from './src/index.vue';
+import BasicTree from './src/Tree.vue';
 
 export { BasicTree };
 export type { ContextMenuItem } from '/@/hooks/web/useContextMenu';

src/components/VirtualScroll/index.ts

 import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 
-export const VScroll = createAsyncComponent(() => import('./src/index'));
+export const VScroll = createAsyncComponent(() => import('./src/VirtualScroll'));

src/components/VirtualScroll/src/index.tsx → src/components/VirtualScroll/src/VirtualScroll.tsx

@@ -54,33 +54,29 @@ export default defineComponent({
       return Math.min((props.items || []).length, state.last + unref(getBenchRef));
     });
 
-    const getContainerStyleRef = computed(
-      (): CSSProperties => {
-        return {
-          height: convertToUnit((props.items || []).length * unref(getItemHeightRef)),
-        };
-      }
-    );
+    const getContainerStyleRef = computed((): CSSProperties => {
+      return {
+        height: convertToUnit((props.items || []).length * unref(getItemHeightRef)),
+      };
+    });
 
-    const getWrapStyleRef = computed(
-      (): CSSProperties => {
-        const styles: Recordable<string> = {};
-        const height = convertToUnit(props.height);
-        const minHeight = convertToUnit(props.minHeight);
-        const minWidth = convertToUnit(props.minWidth);
-        const maxHeight = convertToUnit(props.maxHeight);
-        const maxWidth = convertToUnit(props.maxWidth);
-        const width = convertToUnit(props.width);
-
-        if (height) styles.height = height;
-        if (minHeight) styles.minHeight = minHeight;
-        if (minWidth) styles.minWidth = minWidth;
-        if (maxHeight) styles.maxHeight = maxHeight;
-        if (maxWidth) styles.maxWidth = maxWidth;
-        if (width) styles.width = width;
-        return styles;
-      }
-    );
+    const getWrapStyleRef = computed((): CSSProperties => {
+      const styles: Recordable<string> = {};
+      const height = convertToUnit(props.height);
+      const minHeight = convertToUnit(props.minHeight);
+      const minWidth = convertToUnit(props.minWidth);
+      const maxHeight = convertToUnit(props.maxHeight);
+      const maxWidth = convertToUnit(props.maxWidth);
+      const width = convertToUnit(props.width);
+
+      if (height) styles.height = height;
+      if (minHeight) styles.minHeight = minHeight;
+      if (minWidth) styles.minWidth = minWidth;
+      if (maxHeight) styles.maxHeight = maxHeight;
+      if (maxWidth) styles.maxWidth = maxWidth;
+      if (width) styles.width = width;
+      return styles;
+    });
 
     watch([() => props.itemHeight, () => props.height], () => {
       onScroll();