Skip to content

P
pro-layout
Commit 91f5f097 authored by Sendya's avatar Sendya
Browse files
Options

fix: splitMenus

parent 52e61964
Show whitespace changes
Inline Side-by-side
Showing with 83 additions and 147 deletions
examples/index.html
View file @ 91f5f097
<html>
<head>
<link href="index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="app">
<div></div>
</div>
</body>
<script src="index.js"></script>
</html>
\ No newline at end of file
examples/index.tsx
View file @ 91f5f097
import 'ant-design-vue/dist/antd.less';
import { createApp, defineComponent, onMounted, watch, ref, reactive } from 'vue';
import { RouterLink } from './mock-router';
import { Button, Avatar, message } from 'ant-design-vue';
import { Button, Avatar, Space, message } from 'ant-design-vue';
import { default as ProLayout } from '../src/';
import { menus } from './menus';
import * as Icon from '@ant-design/icons-vue';
......@@ -21,7 +21,7 @@ const BasicLayout = defineComponent({
console.log('keys', keys);
state.selectedKeys = keys;
},
navTheme: 'dark',
isMobile: false,
fixSiderbar: false,
fixedHeader: false,
......@@ -57,7 +57,7 @@ const BasicLayout = defineComponent({
<ProLayout
v-model={[state.collapsed, 'collapsed']}
layout={'mix'}
navTheme={'light'}
navTheme={state.navTheme}
i18n={(key: string) => key}
isMobile={state.isMobile}
fixSiderbar={state.fixSiderbar}
......@@ -69,7 +69,7 @@ const BasicLayout = defineComponent({
splitMenus={state.splitMenus}
v-slots={{
rightContentRender: () => (
<div style="color: #FFF;margin-right: 16px;">
<div style="margin-right: 16px;">
<Avatar icon={<Icon.UserOutlined />} /> Sendya
</div>
),
......@@ -81,13 +81,24 @@ const BasicLayout = defineComponent({
),
}}
>
<Space>
<Button
type="primary"
onClick={() => {
message.info('clicked.');
}}
>
Click Me!!
</Button>
<Button
onClick={() => {
state.navTheme = state.navTheme === 'light' ? 'dark' : 'light';
}}
>
Switch Theme
</Button>
</Space>
</ProLayout>
</RouteContextProvider>
);
......@@ -98,11 +109,8 @@ const SimpleDemo = {
setup() {
return () => (
<div class="components">
<h2># BasicLayout</h2>
<div>
<BasicLayout />
</div>
</div>
);
},
};
......@@ -116,4 +124,4 @@ Object.keys(Icon)
app.component(Icon[k].displayName, Icon[k]);
});
app.use(RouterLink).use(ProLayout).mount('#__vue-content>div');
app.use(RouterLink).use(ProLayout).mount('#app');
package.json
View file @ 91f5f097
{
"name": "@ant-design-vue/pro-layout",
"version": "3.0.0-alpha.4",
"version": "3.0.0-alpha.5",
"main": "./lib/index.js",
"module": "./es/index.js",
"sideEffects": false,
......@@ -72,7 +72,7 @@
},
"dependencies": {
"@babel/runtime": "^7.11.2",
"ant-design-vue": "^2.0.0-rc.5",
"ant-design-vue": "^2.0.0-rc.8",
"lodash-es": "^4.17.20",
"vue-types": "^3.0.1"
},
......
src/SiderMenu/SiderMenu.tsx
View file @ 91f5f097
......@@ -86,7 +86,6 @@ export const defaultRenderCollapsedButton = (collapsed?: boolean): RenderVNodeTy
const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) => {
const {
navTheme,
// menuData,
collapsed,
siderWidth,
......@@ -104,7 +103,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
// const isMix = computed(() => props.layout === 'mix');
// const fixed = computed(() => context.fixSiderbar);
// const runtimeTheme = computed(() => (props.layout === 'mix' && 'light') || 'dark');
const runtimeTheme = computed(() => (props.layout === 'mix' && 'light') || props.navTheme);
const runtimeSideWidth = computed(() =>
props.collapsed ? props.collapsedWidth : props.siderWidth,
);
......@@ -112,7 +111,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
const classNames = computed(() => {
return {
[baseClassName]: true,
[`${baseClassName}-${navTheme}`]: true,
[`${baseClassName}-${runtimeTheme.value}`]: true,
[`${baseClassName}-${props.layout}`]: true,
[`${baseClassName}-fixed`]: context.fixSiderbar,
};
......@@ -129,7 +128,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
}
const defaultMenuDom = (
<BaseMenu
theme={navTheme === 'realDark' ? 'dark' : navTheme}
theme={runtimeTheme.value === 'realDark' ? 'dark' : runtimeTheme.value}
mode="inline"
menuData={hasSide.value ? flatMenuData.value : context.menuData}
collapsed={props.collapsed}
......@@ -165,7 +164,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
)}
<Sider
class={classNames.value}
theme={navTheme === 'realDark' ? 'dark' : navTheme}
theme={runtimeTheme.value === 'realDark' ? 'dark' : runtimeTheme.value}
width={siderWidth}
breakpoint={breakpoint || undefined}
collapsed={collapsed}
......@@ -185,7 +184,7 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props: SiderMenuProps) =
<Menu
class={`${baseClassName}-link-menu`}
inlineIndent={16}
theme={navTheme as 'light' | 'dark'}
theme={runtimeTheme.value as 'light' | 'dark'}
selectedKeys={[]}
openKeys={[]}
mode="inline"
......
src/SiderMenu/index.less
View file @ 91f5f097
@import "~ant-design-vue/es/style/themes/default.less";
@import '~ant-design-vue/es/style/themes/default.less';
@import '../BasicLayout.less';
@pro-layout-sider-menu-prefix-cls: ~'@{ant-prefix}-pro-sider';
......@@ -208,7 +208,7 @@
.@{ant-prefix}-menu-inline {
.@{ant-prefix}-menu-item,
.@{ant-prefix}-menu-submenu-title {
width: 100%;
// width: 100%;
}
}
......@@ -261,6 +261,10 @@
.anticon {
font-size: 16px;
}
> span::after {
content: '';
display: inline;
}
}
.top-nav-menu li.@{ant-prefix}-menu-item {
......
src/utils/index.ts
View file @ 91f5f097
......@@ -63,7 +63,7 @@ export function flatMap(menusData: MenuDataItem[]): MenuDataItem[] {
}
export function getMenuFirstChildren(menus: MenuDataItem[], key: string) {
return (menus[menus.findIndex(menu => menu.path === key)] || {}).children;
return (menus[menus.findIndex(menu => menu.path === key)] || {}).children || [];
}
export const PropRenderType = {
......
yarn.lock
View file @ 91f5f097
......@@ -145,10 +145,10 @@
resolved "https://registry.yarnpkg.com/@ant-design/icons-svg/-/icons-svg-4.1.0.tgz#480b025f4b20ef7fe8f47d4a4846e4fee84ea06c"
integrity sha512-Fi03PfuUqRs76aI3UWYpP864lkrfPo0hluwGqh7NJdLhvH4iRDc3jbJqZIvRDLHKbXrvAfPPV3+zjUccfFvWOQ==
"@ant-design/icons-vue@^5.1.7":
version "5.1.8"
resolved "https://registry.yarnpkg.com/@ant-design/icons-vue/-/icons-vue-5.1.8.tgz#77d75bf2f0d35af50cf8d0bf689fb13760eff2ec"
integrity sha512-Ml3/+ZQtrCNPV/S8rMKON6eLOkPQwZHwKMdxRPm93Hw3SKc/LYacGpESdTeYOlShE90iHqt+zWZxzrb28ga0sw==
"@ant-design/icons-vue@^5.1.9":
version "5.1.9"
resolved "https://registry.npm.taobao.org/@ant-design/icons-vue/download/@ant-design/icons-vue-5.1.9.tgz#8d741a3290be61af7c71618c308cc1a946c4e434"
integrity sha1-jXQaMpC+Ya98cWGMMIzBqUbE5DQ=
dependencies:
"@ant-design/colors" "^5.0.0"
"@ant-design/icons-svg" "^4.0.0"
......@@ -2843,13 +2843,6 @@ acorn@^7.1.0, acorn@^7.1.1, acorn@^7.4.0:
resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
add-dom-event-listener@^1.0.2:
version "1.1.0"
resolved "https://registry.yarnpkg.com/add-dom-event-listener/-/add-dom-event-listener-1.1.0.tgz#6a92db3a0dd0abc254e095c0f1dc14acbbaae310"
integrity sha512-WCxx1ixHT0GQU9hb0KI/mhgRQhnU+U3GvwY6ZvVjYq8rsihIGoaIOUbY0yMPBxLH5MDtr0kz3fisWGNcbWW7Jw==
dependencies:
object-assign "4.x"
address@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
......@@ -2996,37 +2989,26 @@ ansi-wrap@0.1.0, ansi-wrap@^0.1.0:
resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
integrity sha1-qCJQ3bABXponyoLoLqYDu/pF768=
ant-design-vue@^2.0.0-rc.5:
version "2.0.0-rc.5"
resolved "https://registry.yarnpkg.com/ant-design-vue/-/ant-design-vue-2.0.0-rc.5.tgz#cad07b4f9d8153cd399f1e374f438a2322b74b37"
integrity sha512-1gdMaSjxiYuqWvfUTW9kTEOXqxWjk7gjI5zWiCv24vJ9O04SvxWtZEY1Rfcp3FZJl37BP7LT1Ee1CdHTBk0/+A==
ant-design-vue@^2.0.0-rc.8:
version "2.0.0-rc.8"
resolved "https://registry.npm.taobao.org/ant-design-vue/download/ant-design-vue-2.0.0-rc.8.tgz?cache=0&sync_timestamp=1610025633191&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fant-design-vue%2Fdownload%2Fant-design-vue-2.0.0-rc.8.tgz#0f219aedb27f1797228aab79fbbd8328a7389a9f"
integrity sha1-DyGa7bJ/F5ciiqt5+72DKKc4mp8=
dependencies:
"@ant-design-vue/use" "^0.0.1-0"
"@ant-design/icons-vue" "^5.1.7"
"@ant-design/icons-vue" "^5.1.9"
"@babel/runtime" "^7.10.5"
"@simonwep/pickr" "~1.7.0"
add-dom-event-listener "^1.0.2"
array-tree-filter "^2.1.0"
async-validator "^3.3.0"
babel-helper-vue-jsx-merge-props "^2.0.3"
component-classes "^1.2.6"
dom-align "^1.10.4"
dom-closest "^0.2.0"
dom-scroll-into-view "^2.0.0"
intersperse "^1.0.0"
is-mobile "^2.2.1"
is-negative-zero "^2.0.0"
ismobilejs "^1.0.0"
json2mq "^0.2.0"
lodash-es "^4.17.15"
moment "^2.27.0"
node-emoji "^1.10.0"
omit.js "^2.0.0"
raf "^3.4.0"
resize-observer-polyfill "^1.5.1"
scroll-into-view-if-needed "^2.2.25"
shallow-equal "^1.0.0"
shallowequal "^1.0.2"
vue-types "^3.0.0"
warning "^4.0.0"
......@@ -3510,11 +3492,6 @@ babel-helper-to-multiple-sequence-expressions@^0.5.0:
resolved "https://registry.yarnpkg.com/babel-helper-to-multiple-sequence-expressions/-/babel-helper-to-multiple-sequence-expressions-0.5.0.tgz#a3f924e3561882d42fcf48907aa98f7979a4588d"
integrity sha512-m2CvfDW4+1qfDdsrtf4dwOslQC3yhbgyBFptncp4wvtdrDHqueW7slsYv4gArie056phvQFhT2nRcGS4bnm6mA==
babel-helper-vue-jsx-merge-props@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
integrity sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==
babel-helpers@^6.24.1:
version "6.24.1"
resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.24.1.tgz#3471de9caec388e5c850e597e58a26ddf37602b2"
......@@ -4862,23 +4839,11 @@ commondir@^1.0.1:
resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
component-classes@^1.2.6:
version "1.2.6"
resolved "https://registry.yarnpkg.com/component-classes/-/component-classes-1.2.6.tgz#c642394c3618a4d8b0b8919efccbbd930e5cd691"
integrity sha1-xkI5TDYYpNiwuJGe/Mu9kw5c1pE=
dependencies:
component-indexof "0.0.3"
component-emitter@^1.2.1:
version "1.3.0"
resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
component-indexof@0.0.3:
version "0.0.3"
resolved "https://registry.yarnpkg.com/component-indexof/-/component-indexof-0.0.3.tgz#11d091312239eb8f32c8f25ae9cb002ffe8d3c24"
integrity sha1-EdCRMSI5648yyPJa6csAL/6NPCQ=
compressible@~2.0.16:
version "2.0.18"
resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
......@@ -5784,13 +5749,6 @@ dom-align@^1.10.4:
resolved "https://registry.yarnpkg.com/dom-align/-/dom-align-1.12.0.tgz#56fb7156df0b91099830364d2d48f88963f5a29c"
integrity sha512-YkoezQuhp3SLFGdOlr5xkqZ640iXrnHAwVYcDg8ZKRUtO7mSzSC2BA5V0VuyAwPSJA4CLIc6EDDJh4bEsD2+zA==
dom-closest@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/dom-closest/-/dom-closest-0.2.0.tgz#ebd9f91d1bf22e8d6f477876bbcd3ec90216c0cf"
integrity sha1-69n5HRvyLo1vR3h2u80+yQIWwM8=
dependencies:
dom-matches ">=1.0.1"
dom-converter@^0.2:
version "0.2.0"
resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
......@@ -5798,11 +5756,6 @@ dom-converter@^0.2:
dependencies:
utila "~0.4"
dom-matches@>=1.0.1:
version "2.0.0"
resolved "https://registry.yarnpkg.com/dom-matches/-/dom-matches-2.0.0.tgz#d2728b416a87533980eb089b848d253cf23a758c"
integrity sha1-0nKLQWqHUzmA6wibhI0lPPI6dYw=
dom-scroll-into-view@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/dom-scroll-into-view/-/dom-scroll-into-view-2.0.1.tgz#0decc8522801fd8d3f1c6ba355a74d382c5f989b"
......@@ -8480,11 +8433,6 @@ interpret@^1.0.0, interpret@^1.4.0:
resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
intersperse@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/intersperse/-/intersperse-1.0.0.tgz#f2561fb1cfef9f5277cc3347a22886b4351a5181"
integrity sha1-8lYfsc/vn1J3zDNHoiiGtDUaUYE=
invariant@^2.2.2, invariant@^2.2.4:
version "2.2.4"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
......@@ -8981,11 +8929,6 @@ isexe@^2.0.0:
resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
ismobilejs@^1.0.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/ismobilejs/-/ismobilejs-1.1.1.tgz#c56ca0ae8e52b24ca0f22ba5ef3215a2ddbbaa0e"
integrity sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw==
isobject@^2.0.0, isobject@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
......@@ -10147,13 +10090,6 @@ json-stringify-safe@~5.0.1:
resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
json2mq@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
integrity sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=
dependencies:
string-convert "^0.2.0"
json3@^3.3.2:
version "3.3.3"
resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.3.tgz#7fc10e375fc5ae42c4705a5cc0aa6f62be305b81"
......@@ -10888,11 +10824,6 @@ lodash.templatesettings@^3.0.0:
lodash._reinterpolate "^3.0.0"
lodash.escape "^3.0.0"
lodash.toarray@^4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
integrity sha1-JMS/zWsvuji/0FlNsRedjptlZWE=
lodash.toplainobject@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/lodash.toplainobject/-/lodash.toplainobject-3.0.0.tgz#28790ad942d293d78aa663a07ecf7f52ca04198d"
......@@ -11578,13 +11509,6 @@ no-case@^2.2.0:
dependencies:
lower-case "^1.1.1"
node-emoji@^1.10.0:
version "1.10.0"
resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da"
integrity sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==
dependencies:
lodash.toarray "^4.4.0"
node-forge@^0.10.0:
version "0.10.0"
resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3"
......@@ -13203,7 +13127,7 @@ querystringify@^2.1.1:
resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
raf@^3.4.0, raf@^3.4.1:
raf@^3.4.1:
version "3.4.1"
resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
......@@ -14076,11 +14000,6 @@ shallow-equal@^1.0.0:
resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
shallowequal@^1.0.2:
version "1.1.0"
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
shebang-command@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
......@@ -14483,11 +14402,6 @@ strict-uri-encode@^1.0.0:
resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
string-convert@^0.2.0:
version "0.2.1"
resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
integrity sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c=
string-hash@^1.1.1:
version "1.1.3"
resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment