fix: export style less file

package.json

@@ -14,7 +14,8 @@
       "import": "./dist/pro-layout.es.js",
       "require": "./dist/pro-layout.umd.js"
     },
-    "./dist/style.css": "./dist/style.css"
+    "./dist/style.css": "./dist/style.css",
+    "./dist/style.less": "./dist/style.less"
   },
   "repository": {
     "type": "git",
@@ -27,7 +28,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
-    "serve": "vite preview"
+    "serve": "vite preview",
+    "build:types": "tsc -b --force tsconfig.esm.json"
   },
   "peerDependencies": {
     "ant-design-vue": ">=2.2.0",
@@ -37,10 +39,10 @@
   "dependencies": {
     "ant-design-vue": "^2.2.2",
     "lodash-es": "^4.17.21",
-    "omit.js": "^2.0.2",
     "vue": "^3.1.0",
     "vue-router": "^4.0.10"
   },
+  "types": "./dist",
   "devDependencies": {
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^16.0.1",
@@ -56,8 +58,11 @@
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-vue": "^7.13.0",
+    "fs-extra": "^10.0.0",
     "less": "^4.1.1",
     "prettier": "^2.3.2",
+    "tsc": "^2.0.3",
+    "tsup": "^4.12.5",
     "typescript": "^4.3.2",
     "vite": "^2.4.0",
     "vite-dts": "^1.0.3",

scripts/vite/less.ts

+import fs from 'fs-extra';
+import { resolve, dirname } from 'path';
+import { normalizePath } from 'vite';
+
+import type { Plugin, ResolvedConfig } from 'vite';
+
+const excludeRegx = /node_modules/;
+export default (): Plugin => {
+  let config: ResolvedConfig;
+  let output: string;
+  const src = resolve('./src');
+  const charset = 'utf-8';
+  const maps = new Map<string, string>();
+  return {
+    name: 'vite-plugin-lessmerge',
+    enforce: 'pre',
+    apply: 'build',
+    configResolved(resolvedConfig: ResolvedConfig) {
+      config = resolvedConfig;
+      output = resolve(config.build.outDir);
+    },
+    transform(code: string, id: string) {
+      if (!id.endsWith('.less') || excludeRegx.test(id)) {
+        return;
+      }
+      const filePath = id.replace(src, output);
+      maps.set(filePath, code);
+      console.log('filepath', filePath);
+      return code;
+    },
+    async closeBundle() {
+      for (const [file, code] of maps.entries()) {
+        await fs.mkdir(dirname(file), { recursive: true });
+        await fs.writeFile(normalizePath(file), code, charset);
+      }
+
+      // write style.less
+      await fs.copy(resolve(src, 'index.less'), resolve(output, 'style.less'));
+    },
+  };
+};

src/BasicLayout.tsx

@@ -4,9 +4,9 @@ import type { CSSProperties, PropType, ExtractPropTypes } from 'vue';
 import 'ant-design-vue/es/layout/style';
 import Layout from 'ant-design-vue/es/layout';
 import omit from 'omit.js';
-import { withInstall } from 'ant-design-vue/es/_util/type';
 import useMediaQuery from './hooks/useMediaQuery';
 
+import { withInstall } from 'ant-design-vue/es/_util/type';
 import { defaultSettingProps } from './defaultSettings';
 import { getPrefixCls, defaultRouteContext } from './RouteContext';
 import type { BreadcrumbProps } from './RouteContext';
@@ -75,7 +75,6 @@ export type BasicLayoutProps = Partial<ExtractPropTypes<typeof basicLayoutProps>
 
 const ProLayout = defineComponent({
   name: 'ProLayout',
-  props: basicLayoutProps,
   // inheritAttrs: false,
   emits: [
     'update:collapsed',
@@ -87,6 +86,7 @@ const ProLayout = defineComponent({
     'menuHeaderClick',
     'menuClick',
   ],
+  props: basicLayoutProps,
   setup(props, { emit, slots }) {
     const refProps = toRefs(props);
     const isTop = computed(() => props.layout === 'top');
@@ -165,7 +165,7 @@ const ProLayout = defineComponent({
     const menuHeaderRender = getPropsSlot(slots, props, 'menuHeaderRender');
     const footerRender = getPropsSlot(slots, props, 'footerRender');
     // const menuRender = getPropsSlot(slots, props, 'menuRender');
-    const breadcrumbRender = props.breadcrumbRender || slots.breadcrumbRender;
+    const breadcrumbRender = props['breadcrumbRender'] || slots['breadcrumbRender'];
     const headerDom = computed(() =>
       headerRender(
         {
@@ -192,14 +192,13 @@ const ProLayout = defineComponent({
       locale: refProps.locale.value || defaultRouteContext.locale,
       breadcrumb: computed(() => {
         return {
-          ...unref(props.breadcrumb),
+          ...refProps.breadcrumb,
           itemRender: breadcrumbRender,
         };
       }),
       contentWidth: refProps.contentWidth, // 'Fluid',
       layout: refProps.layout,
       navTheme: refProps.navTheme,
-      isMobile: unref(isMobile),
       splitMenus: refProps.splitMenus,
       fixedHeader: refProps.fixSiderbar,
       fixSiderbar: refProps.fixSiderbar,

src/FooterToolbar/index.tsx

@@ -4,7 +4,6 @@ import { computed, defineComponent, onBeforeUnmount, onMounted, PropType } from
 import { RouteContextProps, useRouteContext } from '../RouteContext';
 import { getMenuFirstChildren } from '../utils';
 import type { CustomRender } from '../typings';
-
 export interface FooterToolbarProps {
   extra?: CustomRender | JSX.Element;
   renderContent?: (
@@ -55,9 +54,6 @@ const FooterToolbar = defineComponent({
     });
     const width = computed(() => {
       const { isMobile, sideWidth, layout } = routeContext;
-      if (isMobile) {
-        return '100%';
-      }
       if (!sideWidth || layout === 'top') {
         return '100%';
       }

src/GlobalHeader/index.tsx

@@ -30,7 +30,7 @@ const renderLogo = (
   return logoDom;
 };
 
-const GlobalHeader: FunctionalComponent<GlobalHeaderProps> = (props, { slots }) => {
+export const GlobalHeader: FunctionalComponent<GlobalHeaderProps> = (props, { slots }) => {
   const {
     isMobile,
     logo,
@@ -108,7 +108,4 @@ const GlobalHeader: FunctionalComponent<GlobalHeaderProps> = (props, { slots })
     </div>
   );
 };
-// GlobalHeader.emits = ['menuHeaderClick', 'collapse', 'openKeys', 'select'];
-GlobalHeader.inheritAttrs = false;
-
-export { GlobalHeader };
+GlobalHeader.emits = ['menuHeaderClick', 'collapse', 'openKeys', 'select'];

src/GridContent/index.less

+@import 'ant-design-vue/es/style/themes/default.less';
+
+@pro-layout-grid-content-prefix-cls: ~'@{ant-prefix}-pro-grid-content';
+
+.@{pro-layout-grid-content-prefix-cls} {
+  width: 100%;
+  &.wide {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+}
\ No newline at end of file

src/GridContent/index.tsx

-import './GridContent.less';
+import './index.less';
 
 import { FunctionalComponent, CSSProperties } from 'vue';
 import { PureSettings } from '../defaultSettings';

src/Header.tsx

@@ -4,7 +4,6 @@ import type { RouteRecordRaw } from 'vue-router';
 import 'ant-design-vue/es/layout/style';
 import Layout from 'ant-design-vue/es/layout';
 
-import omit from 'omit.js';
 import { GlobalHeader } from './GlobalHeader';
 import type { GlobalHeaderProps } from './GlobalHeader';
 import globalHeaderProps from './GlobalHeader/headerProps';
@@ -12,7 +11,6 @@ import { TopNavHeader } from './TopNavHeader';
 import { useRouteContext } from './RouteContext';
 import type { CustomRender, WithFalse } from './typings';
 import { clearMenuItem, PropTypes } from './utils';
-
 import './Header.less';
 
 const { Header } = Layout;
@@ -42,8 +40,8 @@ export const headerViewProps = {
 export type HeaderViewProps = Partial<ExtractPropTypes<typeof headerViewProps> & GlobalHeaderProps>;
 
 export const HeaderView = defineComponent({
-  name: 'HeaderView',
   inheritAttrs: false,
+  name: 'HeaderView',
   props: headerViewProps,
   setup(props) {
     const {
@@ -75,14 +73,9 @@ export const HeaderView = defineComponent({
         [`${prefixCls.value}-top-menu`]: isTop.value,
       };
     });
-    const restProps = computed(() => omit(props, ['onCollapse']));
-    const renderContent = computed(() => {
+    const renderContent = () => {
       let defaultDom = (
-        <GlobalHeader
-          {...restProps.value}
-          onCollapse={onCollapse.value}
-          menuData={clearMenuData.value}
-        >
+        <GlobalHeader {...props} onCollapse={onCollapse.value} menuData={clearMenuData.value}>
           {props.headerContentRender && props.headerContentRender(props)}
         </GlobalHeader>
       );
@@ -101,7 +94,7 @@ export const HeaderView = defineComponent({
         return props.headerRender(props, defaultDom);
       }
       return defaultDom;
-    });
+    };
 
     /**
      * 计算侧边栏的宽度，不然导致左边的样式会出问题
@@ -135,7 +128,7 @@ export const HeaderView = defineComponent({
             }}
             class={className.value}
           >
-            {renderContent.value}
+            {renderContent()}
           </Header>
         </>
       );

src/SiderMenu/SiderMenu.tsx

@@ -9,11 +9,11 @@ import 'ant-design-vue/es/layout/style';
 import Layout from 'ant-design-vue/es/layout';
 import 'ant-design-vue/es/menu/style';
 import Menu from 'ant-design-vue/es/menu';
-import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
 import BaseMenu, { baseMenuProps } from './BaseMenu';
 import { WithFalse, CustomRender } from '../typings';
 import { SiderProps } from './typings';
 import { defaultSettingProps } from '../defaultSettings';
+import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
 import { useRouteContext } from '../RouteContext';
 import { PropTypes, getMenuFirstChildren } from '../utils';
 import './index.less';
@@ -124,8 +124,7 @@ export const defaultRenderLogoAndTitle = (
   if (typeof renderFunction === 'function') {
     // when collapsed, no render title
     return renderFunction(logoDom, props.collapsed ? null : titleDom, props);
-  }
-  if (Array.isArray(renderFunction)) {
+  } else if (Array.isArray(renderFunction)) {
     return <>{renderFunction}</>;
   }
   if (layout === 'mix' && renderKey === 'menuHeaderRender') {

src/TopNavHeader/index.tsx

 import { ref, computed } from 'vue';
 import type { FunctionalComponent, ExtractPropTypes } from 'vue';
-import ResizeObserver from 'ant-design-vue/es/vc-resize-observer';
 import globalHeaderProps from '../GlobalHeader/headerProps';
 import { siderMenuProps, defaultRenderLogoAndTitle } from '../SiderMenu/SiderMenu';
 import type { SiderMenuProps } from '../SiderMenu/SiderMenu';
 import BaseMenu from '../SiderMenu/BaseMenu';
 
+import { default as ResizeObserver } from 'ant-design-vue/es/vc-resize-observer';
+import type { FormatMessage } from '../typings';
 import { useRouteContext } from '../RouteContext';
 import './index.less';
 
-export const topNavHeaderProps = { ...siderMenuProps, ...globalHeaderProps };
+export const topNavHeaderProps = Object.assign({}, siderMenuProps, globalHeaderProps);
 
 export type TopNavHeaderProps = Partial<ExtractPropTypes<typeof topNavHeaderProps>> &
   Partial<SiderMenuProps>;

src/index.less

+@import "./BasicLayout.less";
+@import "./Header.less";
+@import "./FooterToolbar/index.less";
+@import "./GlobalHeader/index.less";
+@import "./GlobalFooter/index.less";
+@import "./GridContent/index.less";
+@import "./PageContainer/index.less";
+@import "./TopNavHeader/index.less";
+@import "./SiderMenu/index.less";

src/index.ts

@@ -25,5 +25,5 @@ export { default as WaterMark } from './WaterMark';
 export type { WaterMarkProps } from './WaterMark';
 
 export { default } from './BasicLayout';
-export { default as ProLayout } from './BasicLayout';
+// export { default as ProLayout } from './BasicLayout';
 export type { BasicLayoutProps } from './BasicLayout';

tsconfig.esm.json

+{
+  "compilerOptions": {
+    "plugins": [
+      {
+        "name": "@vuedx/typescript-plugin-vue"
+      }
+    ],
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "lib": ["esnext", "dom"],
+    "types": ["vite/client", "node"],
+    "baseUrl": "./",
+    "paths": {
+      "@/*":["./src/*"],
+      "@ant-design-vue/pro-layout":["./src/index.ts"]
+    },
+    "noEmit": false,
+    "declaration": true,
+    "outDir": "./dist",
+    "emitDeclarationOnly": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "examples/**/*.vue"]
+}

tsconfig.json

@@ -20,7 +20,7 @@
     "paths": {
       "@/*":["./src/*"],
       "@ant-design-vue/pro-layout":["./src/index.ts"]
-    },
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "examples/**/*.vue"]
 }

vite.config.ts

@@ -2,11 +2,19 @@ import { resolve } from 'path';
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
-import dts from 'vite-dts';
+import vueLess from './scripts/vite/less';
+// import dts from 'vite-plugin-dts';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), vueJsx(), dts()],
+  plugins: [
+    vue(),
+    vueJsx(),
+    vueLess(),
+    /*     dts({
+      tsConfigFilePath: resolve(__dirname, './tsconfig.json'),
+    }), */
+  ],
   resolve: {
     alias: {
       '@ant-design-vue/pro-layout': resolve(__dirname, 'src'),
@@ -21,6 +29,7 @@ export default defineConfig({
     rollupOptions: {
       external: ['vue', '@ant-design/icons-vue', 'ant-design-vue', 'antd', 'moment'],
       output: {
+        exports: "named",
         // Provide global variables to use in the UMD build
         // for externalized deps
         globals: {