@king-design/intact 3.1.1-beta.3 → 3.1.2

package/components/form/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     item: {
@@ -36,9 +37,11 @@ const defaults = {
 let form: typeof defaults;
 setDefault(() => {
     form = deepDefaults(theme, {form: defaults}).form;
+    makeItemStyles?.clearCache();
+    makeFormStyles?.clearCache();
 });
 
-export function makeItemStyles(k: string) {
+export const makeItemStyles = cache(function makeItemStyles(k: string) {
     return css`
         display: flex;
         position: relative;
@@ -118,9 +121,9 @@ export function makeItemStyles(k: string) {
             vertical-align: middle;
         }
     `
-}
+});
 
-export function makeFormStyles(k: string) {
+export const makeFormStyles = cache(function makeFormStyles(k: string) {
     return css`
         // layout
         &.${k}-inline {
@@ -162,4 +165,4 @@ export function makeFormStyles(k: string) {
             `
         })}
     `;
-}
+});

package/components/form/useDirty.ts

@@ -10,6 +10,10 @@ export function useDirty(
     const instance = useInstance() as FormItem;
     const isDirty = useState(false);
 
+    if (instance.get('validateOnStart')) {
+        dirty();
+    }
+
     function onChange(e: Event) {
         dirty();
         instance.trigger('change', e);

package/components/grid/styles.ts

@@ -3,15 +3,18 @@ import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults} from '../../styles/utils';
 import '../../styles/global';
 import {breakpoints, responsiveMap} from './constants';
+import { cache } from '../utils';
 
-const defaults = {};
+// const defaults = {};
 
-let grid: typeof defaults;
-setDefault(() => {
-    grid = deepDefaults(theme, {grid: defaults}).grid;
-});
+// let grid: typeof defaults;
+// setDefault(() => {
+    // grid = deepDefaults(theme, {grid: defaults}).grid;
+    // makeRowStyles?.clearCache();
+    // makeColStyles?.clearCache();
+// });
 
-export function makeRowStyles(k: string) {
+export const makeRowStyles = cache(function makeRowStyles(k: string) {
     return css`
         position: relative;
         display: flex;
@@ -52,9 +55,9 @@ export function makeRowStyles(k: string) {
             align-items: baseline;
         }
     `;
-}
+});
 
-export function makeColStyles(k: string) {
+export const makeColStyles = cache(function makeColStyles(k: string) {
     return css`
         position: relative;
         width: 100%;
@@ -63,7 +66,7 @@ export function makeColStyles(k: string) {
         }
         ${makeBreakpointsCols(k)}
     `;
-}
+});
 
 function makeBreakpointsCols(k: string) {
     const styles: string[] = [];

package/components/icon/index.vdt

@@ -1,5 +1,5 @@
 import {addStyle, getRestProps} from '../utils';
-import makeStyles from './styles';
+import {makeStyles} from './styles';
 
 const {
     className, style, size, color,

package/components/icon/styles.ts

@@ -5,6 +5,7 @@ import {rotate} from '../../styles/keyframes';
 import {makeIconStyles} from '../../styles/fonts/iconfont';
 import '../../styles/fonts/ionicons';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     get transition() { return theme.transition.small },
@@ -21,12 +22,13 @@ const defaults = {
 let icon: typeof defaults;
 setDefault(() => {
     icon = deepDefaults(theme, {icon: defaults}).icon;
+    makeStyles?.clearCache();
 });
 
 export const colors = ['primary', 'warning', 'danger', 'success'] as const;
 export const sizes = ['large', 'small', 'mini'] as const;
 
-export default function makeStyles(k: string, color?: string) {
+export const makeStyles = cache(function makeStyles(k: string, color?: string) {
     // create the global icon styles
     makeIconStyles(k);
 
@@ -86,4 +88,4 @@ export default function makeStyles(k: string, color?: string) {
             color: ${icon.disabledColor} !important;
         }
     `;
-}
+});

package/components/input/styles.ts

@@ -3,6 +3,7 @@ import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, sizes, Sizes} from '../../styles/utils';
 import '../../styles/global';
 import {Input} from './';
+import { cache } from '../utils';
 
 const defaults = deepDefaults(
     {
@@ -67,9 +68,11 @@ const defaults = deepDefaults(
 let input: typeof defaults;
 setDefault(() => {
     input = deepDefaults(theme, {input: defaults}).input;
-})
+    makeStyles?.clearCache();
+    makeSearchStyles?.clearCache();
+});
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         display: inline-block;
         width: ${input.width};
@@ -322,9 +325,9 @@ export function makeStyles(k: string) {
             color: ${input.count.color};
         }
     `
-}
+});
 
-export function makeSearchStyles(k: string) {
+export const makeSearchStyles = cache(function makeSearchStyles(k: string) {
     return css`
         position: relative;
         display: inline-block;
@@ -377,4 +380,4 @@ export function makeSearchStyles(k: string) {
             }
         }
     `
-}
+});

package/components/layout/styles.ts

@@ -5,6 +5,7 @@ import '../../styles/global';
 import {menu} from '../menu/styles';
 import { isNullOrUndefined } from 'intact-shared';
 import { getStyle } from './helpers';
+import { cache } from '../utils';
 
 const sizes = ['small', 'large'] as const;
 export const themes = ['light', 'dark', 'white'] as const;
@@ -32,13 +33,17 @@ const defaults = {
 let layout: typeof defaults;
 setDefault(() => {
     layout = deepDefaults(theme, {layout: defaults}).layout;
+    makeLayoutStyles?.clearCache();
+    makeHeaderStyles?.clearCache();
+    makeAsideStyles?.clearCache();
+    makeBodyStyles?.clearCache();
 });
 
 export function getCollapseWidth(collapsedWidth?: string | number) {
     return isNullOrUndefined(collapsedWidth) ? layout.collapsedWidth : getStyle(collapsedWidth);
 }
 
-export function makeLayoutStyles(k: string) {
+export const makeLayoutStyles = cache(function makeLayoutStyles(k: string) {
     return css`
         display: flex;
         flex-direction: column;
@@ -54,9 +59,9 @@ export function makeLayoutStyles(k: string) {
             flex: 1;
         }
     `
-}
+});
 
-export function makeHeaderStyles(k: string) {
+export const makeHeaderStyles = cache(function makeHeaderStyles(k: string) {
     return css`
         display: flex;
         align-items: center;
@@ -99,9 +104,9 @@ export function makeHeaderStyles(k: string) {
             `
         })}
     `;
-}
+});
 
-export function makeAsideStyles(k: string) {
+export const makeAsideStyles = cache(function makeAsideStyles(k: string) {
     return css`
         transition: width ${layout.transition};
         display: flex;
@@ -131,11 +136,10 @@ export function makeAsideStyles(k: string) {
             width: auto !important;
         }
     `
-}
+});
 
-export function makeBodyStyles(k: string) {
+export const makeBodyStyles = cache(function makeBodyStyles(k: string) {
     return css`
         transition: padding-left ${layout.transition};
     `
-}
-
+});

package/components/menu/demos/recursive.md

@@ -0,0 +1,340 @@
+---
+title: 递归渲染子菜单
+order: 5
+---
+
+由于`Menu`和`MenuItem`必须直接嵌套才能渲染子菜单，所以在vue下，必须使用jsx才能实现递归渲染，递归组件会
+阻断直接嵌套关系，导致达不到效果
+
+```vdt
+import {Menu, MenuItem, Icon} from 'kpc';
+
+const renderMenuItem = (item) => {
+    return <MenuItem key={item.key}>
+        {item.title}
+        {item.children && item.children.length && (
+            <Menu>
+                {item.children.map(renderMenuItem)}
+            </Menu>
+        )}
+    </MenuItem>
+}
+
+<Menu
+    v-model:expandedKeys="expandedKeys"
+    v-model:selectedKey="selectedKey"
+>
+    <b:header>
+        <Icon class="ion-star" />测试
+    </b:header>
+    {this.get('menuList').map(renderMenuItem)}
+</Menu>
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+
+    static defaults() {
+        return {
+            expandedKeys: [],
+            selectedKey: '3-1',
+            menuList: [
+                {
+                    key: '1',
+                    title: 'menu 1'
+                },
+                {
+                    key: '2',
+                    title: 'menu 2'
+                },
+                {
+                    key: '3',
+                    title: 'menu 3',
+                    children: [
+                        {
+                            key: '3-1',
+                            title: 'sub menu 1'
+                        },
+                        {
+                            key: '3-2',
+                            title: 'sub menu 2'
+                        },
+                        {
+                            key: '3-3',
+                            title: 'sub menu 3'
+                        },
+                        {
+                            key: '3-4',
+                            title: 'sub menu 4',
+                            children: [
+                                {
+                                    key: '3-4-1',
+                                    title: 'option 1'
+                                },
+                                {
+                                    key: '3-4-2',
+                                    title: 'option 2'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    key: '4',
+                    title: 'menu 4'
+                },
+            ]
+        };
+    }
+}
+```
+
+```tsx
+import { Menu, MenuItem, Icon } from '@king-design/react';
+import React, { useState } from 'react';
+
+type MenuItemData = {
+    key: string;
+    title: string;
+    children?: MenuItemData[];
+}
+
+export default function() {
+    const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
+    const [selectedKey, setSelectedKey] = useState('3-1');
+    const [menuList] = useState<MenuItemData[]>([
+        {
+            key: '1',
+            title: 'menu 1'
+        },
+        {
+            key: '2',
+            title: 'menu 2'
+        },
+        {
+            key: '3',
+            title: 'menu 3',
+            children: [
+                {
+                    key: '3-1',
+                    title: 'sub menu 1'
+                },
+                {
+                    key: '3-2',
+                    title: 'sub menu 2'
+                },
+                {
+                    key: '3-3',
+                    title: 'sub menu 3'
+                },
+                {
+                    key: '3-4',
+                    title: 'sub menu 4',
+                    children: [
+                        {
+                            key: '3-4-1',
+                            title: 'option 1'
+                        },
+                        {
+                            key: '3-4-2',
+                            title: 'option 2'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            key: '4',
+            title: 'menu 4'
+        },
+    ]);
+
+    return <Menu
+        expandedKeys={expandedKeys}
+        onChangeExpandedKeys={(v) => setExpandedKeys(v!)}
+        selectedKey={selectedKey}
+        onChangeSelectedKey={(v) => setSelectedKey(v!)}
+        slotHeader={<><Icon className="ion-star" />测试</>}
+    >
+        {menuList.map(renderMenuItem)}
+    </Menu>
+}
+
+function renderMenuItem(item: MenuItemData) {
+    return <MenuItem key={item.key}>
+        {item.title}
+        {item.children && item.children.length && (
+            <Menu>
+                {item.children.map(renderMenuItem)}
+            </Menu>
+        )}
+    </MenuItem>
+}
+```
+
+```vue
+<script lang="jsx">
+import { Menu, MenuItem, Icon } from "@king-design/vue-legacy";
+export default {
+    data() {
+        return {
+            expandedKeys: [],
+            selectedKey: '3-1',
+            menuList: [
+                {
+                    key: '1',
+                    title: 'menu 1'
+                },
+                {
+                    key: '2',
+                    title: 'menu 2'
+                },
+                {
+                    key: '3',
+                    title: 'menu 3',
+                    children: [
+                        {
+                            key: '3-1',
+                            title: 'sub menu 1'
+                        },
+                        {
+                            key: '3-2',
+                            title: 'sub menu 2'
+                        },
+                        {
+                            key: '3-3',
+                            title: 'sub menu 3'
+                        },
+                        {
+                            key: '3-4',
+                            title: 'sub menu 4',
+                            children: [
+                                {
+                                    key: '3-4-1',
+                                    title: 'option 1'
+                                },
+                                {
+                                    key: '3-4-2',
+                                    title: 'option 2'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    key: '4',
+                    title: 'menu 4'
+                },
+            ]
+        };
+    },
+    render(h) {
+        const renderMenuItem = (item) => {
+            return <MenuItem key={item.key}>
+                {item.title}
+                {item.children && item.children.length && (
+                    <Menu>
+                        {item.children.map(renderMenuItem)}
+                    </Menu>
+                )}
+            </MenuItem>
+        }
+
+        return (
+            <Menu
+                expandedKeys={this.expandedKeys}
+                onChangeExpandedKeys={(v) => (this.expandedKeys = v)}
+                selectedKey={this.selectedKey}
+                onChangeSelectedKey={(v) => (this.selectedKey = v)}
+            >
+                <template slot="header">
+                    <Icon class="ion-star" />测试
+                </template>
+                {this.menuList.map(renderMenuItem)}
+            </Menu>
+        ) 
+    }
+};
+</script>
+```
+
+```vue3
+<script lang="jsx">
+import { Menu, MenuItem, Icon } from "@king-design/vue";
+import { ref, defineComponent } from 'vue';
+
+export default defineComponent({
+    setup() {
+        const expandedKeys = ref([]);
+        const selectedKey = ref('3-1');
+        const menuList = [
+            {
+                key: '1',
+                title: 'menu 1'
+            },
+            {
+                key: '2',
+                title: 'menu 2'
+            },
+            {
+                key: '3',
+                title: 'menu 3',
+                children: [
+                    {
+                        key: '3-1',
+                        title: 'sub menu 1'
+                    },
+                    {
+                        key: '3-2',
+                        title: 'sub menu 2'
+                    },
+                    {
+                        key: '3-3',
+                        title: 'sub menu 3'
+                    },
+                    {
+                        key: '3-4',
+                        title: 'sub menu 4',
+                        children: [
+                            {
+                                key: '3-4-1',
+                                title: 'option 1'
+                            },
+                            {
+                                key: '3-4-2',
+                                title: 'option 2'
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                key: '4',
+                title: 'menu 4'
+            },
+        ];
+        const renderMenuItem = (item) => {
+            return <MenuItem key={item.key}>
+                {item.title}
+                {item.children && item.children.length && (
+                    <Menu>
+                        {item.children.map(renderMenuItem)}
+                    </Menu>
+                )}
+            </MenuItem>
+        }
+
+        return () => (
+            <Menu
+                v-model:expandedKeys={expandedKeys.value}
+                v-model:selectedKey={selectedKey.value}
+                v-slots={{ header() { return <><Icon class="ion-star" />测试</> } }}
+            >
+                {menuList.map(renderMenuItem)}
+            </Menu>
+        );
+    }
+});
+</script>
+```

package/components/menu/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, getLeft, palette} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const sizes = ['large', 'small'] as const;
 
@@ -81,11 +82,15 @@ const defaults = {
 let menu: typeof defaults;
 setDefault(() => {
     menu = deepDefaults(theme, {menu: defaults}).menu;
+    makeMenuStyles?.clearCache();
+    makeItemStyles?.clearCache();
+    makeTitleStyles?.clearCache();
+    makeNestedMenuStyles?.clearCache();
 });
 
 export {menu};
 
-export function makeMenuStyles(k: string) {
+export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
     // we must increase the priority by adding &.${k}-menu
     // to override the css of dropdownMenu
     return css`
@@ -209,9 +214,9 @@ export function makeMenuStyles(k: string) {
             }
         }
     `
-}
+});
 
-export function makeTitleStyles(k: string) {
+export const makeTitleStyles = cache(function makeTitleStyles(k: string) {
     const item = menu.item;
     return css`
         display: flex;
@@ -222,16 +227,16 @@ export function makeTitleStyles(k: string) {
         overflow: hidden;
         flex-wrap: nowrap;
     `;
-}
+});
 
-export function makeItemStyles(k: string) {
+export const makeItemStyles = cache(function makeItemStyles(k: string) {
     const item = menu.item;
     return css`
         .${k}-menu-title {
             cursor: pointer;
-            height: ${menu.item.height};
+            height: ${item.height};
             &:hover {
-                color: ${menu.item.hoverColor};
+                color: ${item.hoverColor};
             }
         }
         .${k}-menu-name {
@@ -256,7 +261,7 @@ export function makeItemStyles(k: string) {
         // expanded
         &.${k}-expanded {
             > .${k}-menu-title {
-                color: ${menu.item.hoverColor};
+                color: ${item.hoverColor};
                 .${k}-menu-arrow {
                     transform: rotateX(180deg);
                 }
@@ -266,35 +271,35 @@ export function makeItemStyles(k: string) {
         // highlighted
         &.${k}-highlighted {
             > .${k}-menu-title {
-                color: ${menu.item.hoverColor};
+                color: ${item.hoverColor};
             }
         }
 
         // active
         &.${k}-active {
             > .${k}-menu-title {
-                color: ${menu.item.hoverColor} !important;
-                background: ${menu.item.activeBgColor};
+                color: ${item.hoverColor} !important;
+                background: ${item.activeBgColor};
             }
         }
 
         // disabled
         &.${k}-disabled {
             > .${k}-menu-title {
-                color: ${menu.item.disabledColor} !important;
+                color: ${item.disabledColor} !important;
                 cursor: not-allowed;
             }
         }
 
         // dot
         .${k}-menu-dot {
-            font-size: ${menu.item.dotFontSize};
+            font-size: ${item.dotFontSize};
             transform: scale(.4);
         }
     `
-}
+});
 
-export function makeNestedMenuStyles(k: string, hasIcon: boolean, parentPaddingLeft: string = getLeft(menu.item.padding)) {
+export const makeNestedMenuStyles = cache(function makeNestedMenuStyles(k: string, hasIcon: boolean, parentPaddingLeft: string = getLeft(menu.item.padding)) {
     const paddingLeft = `${parentPaddingLeft}${hasIcon ? ' + ' + menu.icon.width : ''} + ${menu.icon.gap}`;
     return [
         css`
@@ -308,4 +313,4 @@ export function makeNestedMenuStyles(k: string, hasIcon: boolean, parentPaddingL
         `,
         paddingLeft,
     ]
-}
+});