Skip to content

P
pro-layout
Commit 86e775e5 authored by Sendya's avatar Sendya
Browse files
Options

fix: some typo

parent d84a09d5
Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 64 deletions
examples/index.tsx
View file @ 86e775e5
import { createApp, reactive } from 'vue'; import { createApp, reactive } from 'vue';
import { Button, message } from 'ant-design-vue'; import { Button, message } from 'ant-design-vue';
import BasicLayout from '../src/BasicLayout'; import { default as BasicLayout } from '../src/BasicLayout';
import 'ant-design-vue/dist/antd.less'; import 'ant-design-vue/dist/antd.less';
import { menus } from './menus';
import BaseMenu, { useMenuState } from '../src/SiderMenu/BaseMenu';
import * as Icon from '@ant-design/icons-vue';
const SimpleDemo = { const SimpleDemo = {
setup() { setup() {
const state = reactive({ const { state: menuState } = useMenuState({
collapsed: false, collapsed: false,
}); openKeys: [],
selectedKeys: [],
})
return () => ( return () => (
<div className="components"> <div class="components">
<h2># BasicLayout</h2> <h2># BasicLayout</h2>
<BasicLayout <BasicLayout
collapsed={state.collapsed} menus={menus}
onCollapsed={collapsed => { collapsed={menuState.collapsed}
state.collapsed = collapsed; openKeys={menuState.openKeys}
selectedKeys={menuState.selectedKeys}
{...{
'onUpdate:collapsed': $event => {
menuState.collapsed = $event;
},
'onUpdate:openKeys': $event => {
menuState.openKeys = $event
},
'onUpdate:selectedKeys': $event => {
menuState.selectedKeys = $event
}
}} }}
> >
<Button <Button
...@@ -33,4 +50,11 @@ const SimpleDemo = { ...@@ -33,4 +50,11 @@ const SimpleDemo = {
const app = createApp(SimpleDemo); const app = createApp(SimpleDemo);
const filterIcons = ['default', 'createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor']
Object.keys(Icon)
.filter(k => !filterIcons.includes(k))
.forEach(k => {
app.component(Icon[k].displayName, Icon[k])
})
app.use(BasicLayout).mount('#__vue-content>div'); app.use(BasicLayout).mount('#__vue-content>div');
examples/pro-provider.tsx
View file @ 86e775e5
...@@ -53,12 +53,13 @@ const ProProviderDemo = defineComponent({ ...@@ -53,12 +53,13 @@ const ProProviderDemo = defineComponent({
const TestChildComponent = defineComponent({ const TestChildComponent = defineComponent({
setup () { setup () {
const config = inject(injectProConfigKey, defaultProProviderProps) const config = inject(injectProConfigKey, defaultProProviderProps);
const prefixCls = config.getPrefixCls('child-component');
return () => { return () => {
const { i18n, contentWidth } = config const { i18n, contentWidth } = config
return ( return (
<div class="test-child-component"> <div class={prefixCls}>
<p>TestChildComponent:</p> <p>TestChildComponent:</p>
<div> <div>
i18n: {i18n.toString()} i18n: {i18n.toString()}
......
package.json
View file @ 86e775e5
...@@ -60,13 +60,14 @@ ...@@ -60,13 +60,14 @@
"dependencies": { "dependencies": {
"@babel/runtime": "^7.10.4", "@babel/runtime": "^7.10.4",
"ant-design-vue": "^2.0.0-beta.10", "ant-design-vue": "^2.0.0-beta.10",
"lodash": "^4.17.15" "lodash-es": "^4.17.15",
"vue-types": "^3.0.1"
}, },
"config": { "config": {
"port": 9528, "port": 9528,
"entry": { "entry": {
"@ant-design-vue/pro-layout": [ "@ant-design-vue/pro-layout": [
"./src/index.jsx" "./index.tsx"
] ]
}, },
"loaders": [ "loaders": [
......
src/BasicLayout.tsx
View file @ 86e775e5
...@@ -4,44 +4,49 @@ import { h, App } from 'vue'; ...@@ -4,44 +4,49 @@ import { h, App } from 'vue';
import { Layout, Menu } from 'ant-design-vue'; import { Layout, Menu } from 'ant-design-vue';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'; import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
import ProProvider from './ProProvider'; import { default as ProProvider } from './ProProvider';
import { default as SiderMenu } from './SiderMenu/SiderMenu';
import { createContext } from './RouteContext';
const defaultI18nRender = (key: string) => key const defaultI18nRender = (key: string) => key
const { state, provider: RouteContextProvider } = createContext({
isMobile: false,
menuData: [],
hasSiderMenu: true,
hasHeader: true,
siderWidth: 208,
})
const BasicLayout = (props, { emit, slots }) => { const BasicLayout = (props, { emit, slots }) => {
const handleClick = () => { const handleClick = () => {
emit('collapsed', !props.collapsed) emit('update:collapsed', !props.collapsed)
}
const handleOpenChange = (openKeys): void => {
emit('update:openKeys', openKeys)
}
const handleSelect = (selectedKeys: string[]): void => {
emit('update:selectedKeys', selectedKeys)
} }
return ( return (
<ProProvider {...props} i18n={defaultI18nRender}> <ProProvider {...props} i18n={defaultI18nRender}>
<Layout class="ant-pro-basicLayout"> <RouteContextProvider>
<Layout.Sider collapsed={props.collapsed} trigger={null} collapsible> <Layout class="ant-pro-basicLayout">
<div class="logo" /> <SiderMenu {...props} />
<Menu theme="dark" mode="inline" selectedKeys={props.selectedKeys}> <Layout>
<Menu.Item key="1"> <Layout.Header style="background: #fff; padding: 0">
<span>nav 1</span> {
</Menu.Item> props.collapsed
<Menu.Item key="2"> ? <MenuUnfoldOutlined class="trigger" onClick={handleClick} />
<span>nav 2</span> : <MenuFoldOutlined class="trigger" onClick={handleClick} />
</Menu.Item> }
<Menu.Item key="3"> </Layout.Header>
<span>nav 3</span> <Layout.Content style={{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }}>
</Menu.Item> {slots.default && slots.default()}
</Menu> </Layout.Content>
</Layout.Sider> </Layout>
<Layout>
<Layout.Header style="background: #fff; padding: 0">
{
props.collapsed
? <MenuUnfoldOutlined class="trigger" onClick={handleClick} />
: <MenuFoldOutlined class="trigger" onClick={handleClick} />
}
</Layout.Header>
<Layout.Content style={{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }}>
{slots.default && slots.default()}
</Layout.Content>
</Layout> </Layout>
</Layout> </RouteContextProvider>
</ProProvider> </ProProvider>
) )
}; };
......
src/ProProvider/index.tsx
View file @ 86e775e5
...@@ -2,13 +2,13 @@ import { defineComponent, reactive, toRefs, Ref, InjectionKey, provide, SetupCon ...@@ -2,13 +2,13 @@ import { defineComponent, reactive, toRefs, Ref, InjectionKey, provide, SetupCon
import { ContentWidth } from '../typings'; import { ContentWidth } from '../typings';
export interface ProProviderData { export interface ProProviderData {
getPrefixCls?: (suffixCls: string, customizePrefixCls: string) => string; getPrefixCls?: (suffixCls?: string, customizePrefixCls?: string) => string;
i18n?: (t: string) => string; i18n?: (t: string) => string;
contentWidth?: ContentWidth; contentWidth?: ContentWidth;
} }
export const defaultProProviderProps: ProProviderData = { export const defaultProProviderProps: ProProviderData = {
getPrefixCls: (suffixCls: string, customizePrefixCls: string) => { getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => {
if (customizePrefixCls) return customizePrefixCls; if (customizePrefixCls) return customizePrefixCls;
return `ant-pro-${suffixCls}`; return `ant-pro-${suffixCls}`;
}, },
...@@ -36,7 +36,7 @@ const ProProvider = defineComponent({ ...@@ -36,7 +36,7 @@ const ProProvider = defineComponent({
}, },
setup (props, { slots }: SetupContext) { setup (props, { slots }: SetupContext) {
const { prefixCls, i18n, contentWidth } = toRefs(props) const { prefixCls, i18n, contentWidth } = toRefs(props)
const getPrefixCls = (suffixCls: string, customizePrefixCls: string): string => { const getPrefixCls = (suffixCls?: string, customizePrefixCls?: string): string => {
if (customizePrefixCls) return customizePrefixCls; if (customizePrefixCls) return customizePrefixCls;
return suffixCls ? `${prefixCls.value}-${suffixCls}` : prefixCls.value; return suffixCls ? `${prefixCls.value}-${suffixCls}` : prefixCls.value;
} }
......
src/RouteContext.tsx
View file @ 86e775e5
import { defineComponent, h, reactive, provide, inject, toRefs, UnwrapRef, PropType, SetupContext, InjectionKey, VNode, RendererNode, RendererElement } from 'vue'; import { defineComponent, h, reactive, provide, inject, toRefs, UnwrapRef, PropType, SetupContext, InjectionKey, VNode, RendererNode, RendererElement } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { RouteProps } from './typings'; import { RouteProps } from './typings';
import { PureSettings } from './defaultSettings'; import { PureSettings } from './defaultSettings';
......
src/SiderMenu/BaseMenu.tsx
View file @ 86e775e5
...@@ -68,6 +68,7 @@ export interface BaseMenuProps extends Partial<PureSettings> { ...@@ -68,6 +68,7 @@ export interface BaseMenuProps extends Partial<PureSettings> {
mode?: MenuMode; mode?: MenuMode;
onCollapse?: (collapsed: boolean) => void; onCollapse?: (collapsed: boolean) => void;
openKeys?: WithFalse<string[]> | undefined; openKeys?: WithFalse<string[]> | undefined;
selectedKeys?: WithFalse<string[]> | undefined;
handleOpenChange?: (openKeys: string[]) => void; handleOpenChange?: (openKeys: string[]) => void;
theme?: MenuTheme | 'realDark'; theme?: MenuTheme | 'realDark';
i18n?: (t: string) => string | VNodeChild; i18n?: (t: string) => string | VNodeChild;
...@@ -91,15 +92,11 @@ export const VueBaseMenuProps = { ...@@ -91,15 +92,11 @@ export const VueBaseMenuProps = {
default: false, default: false,
}, },
openKeys: { openKeys: {
type: Array as PropType<string[]>, type: Array as PropType<WithFalse<string[]>>,
required: true, required: true,
}, },
handleOpenChange: {
type: Function as PropType<(openKeys: WithFalse<string[]>) => void>,
default: () => undefined,
},
selectedKeys: { selectedKeys: {
type: Array as PropType<string[]>, type: Array as PropType<WithFalse<string[]>>,
required: true, required: true,
}, },
} }
...@@ -217,8 +214,8 @@ export default defineComponent({ ...@@ -217,8 +214,8 @@ export default defineComponent({
}, VueBaseMenuProps), }, VueBaseMenuProps),
emits: ['update:openKeys', 'update:selectedKeys'], emits: ['update:openKeys', 'update:selectedKeys'],
setup (props, { emit } ) { setup (props, { emit } ) {
console.log('props.mode', props.mode) const { mode } = toRefs(props);
const isInline = computed(() => props.mode === 'inline') const isInline = computed(() => mode.value === 'inline')
const handleOpenChange: OpenEventHandler = (openKeys): void => { const handleOpenChange: OpenEventHandler = (openKeys): void => {
emit('update:openKeys', openKeys) emit('update:openKeys', openKeys)
} }
......
src/SiderMenu/SiderMenu.tsx
View file @ 86e775e5
import './index.less'; import './index.less';
import { VNodeChild, SetupContext } from 'vue'; import { VNodeChild, SetupContext, inject } from 'vue';
import 'ant-design-vue/es/layout/style'; import 'ant-design-vue/es/layout/style';
import Layout from 'ant-design-vue/es/layout'; import Layout from 'ant-design-vue/es/layout';
...@@ -8,6 +8,8 @@ import BaseMenu, { BaseMenuProps } from './BaseMenu'; ...@@ -8,6 +8,8 @@ import BaseMenu, { BaseMenuProps } from './BaseMenu';
import { WithFalse } from '../typings'; import { WithFalse } from '../typings';
import { SiderProps } from './typings'; import { SiderProps } from './typings';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'; import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
import { menus } from '../../examples/menus';
import { defaultProProviderProps, injectProConfigKey } from '../ProProvider';
const { Sider } = Layout; const { Sider } = Layout;
...@@ -25,6 +27,7 @@ export interface SiderMenuProps extends Pick<BaseMenuProps, Exclude<keyof BaseMe ...@@ -25,6 +27,7 @@ export interface SiderMenuProps extends Pick<BaseMenuProps, Exclude<keyof BaseMe
onMenuHeaderClick?: (e: MouseEvent) => void; onMenuHeaderClick?: (e: MouseEvent) => void;
hide?: boolean; hide?: boolean;
onOpenChange?: (openKeys: WithFalse<string[]>) => void; onOpenChange?: (openKeys: WithFalse<string[]>) => void;
onSelect?: (selectedKeys: WithFalse<string[]>) => void;
} }
export const defaultRenderLogo = (logo: VNodeChild | JSX.Element): VNodeChild | JSX.Element => { export const defaultRenderLogo = (logo: VNodeChild | JSX.Element): VNodeChild | JSX.Element => {
...@@ -87,9 +90,13 @@ const SiderMenu = (props: SiderMenuProps, context: SetupContext) => { ...@@ -87,9 +90,13 @@ const SiderMenu = (props: SiderMenuProps, context: SetupContext) => {
menuContentRender, menuContentRender,
prefixCls, prefixCls,
onOpenChange, onOpenChange,
onSelect,
headerHeight, headerHeight,
} = props; } = props;
const baseClassName = `${props.prefixCls}-sider`; console.log('props', props)
const config = inject(injectProConfigKey, defaultProProviderProps)
const baseClassName = config.getPrefixCls('sider');
const siderClassName = { const siderClassName = {
[baseClassName]: true, [baseClassName]: true,
[`${baseClassName}-fixed`]: fixSiderbar, [`${baseClassName}-fixed`]: fixSiderbar,
...@@ -101,15 +108,26 @@ const SiderMenu = (props: SiderMenuProps, context: SetupContext) => { ...@@ -101,15 +108,26 @@ const SiderMenu = (props: SiderMenuProps, context: SetupContext) => {
const extraDom = menuExtraRender && menuExtraRender(props); const extraDom = menuExtraRender && menuExtraRender(props);
const menuDom = menuContentRender !== false && ( return (
<BaseMenu <Sider
{...props} class={siderClassName}
mode="inline" collapsed={collapsed}
handleOpenChange={onOpenChange} >
style={{ <BaseMenu
width: '100%', {...props}
}} menus={menus}
class={`${baseClassName}-menu`} theme={props.theme}
/> mode={props.mode}
collapsed={props.collapsed}
openKeys={props.openKeys}
selectedKeys={props.selectedKeys}
style={{
width: '100%',
}}
class={`${baseClassName}-menu`}
/>
</Sider>
); );
}; };
export default SiderMenu;
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