@king-design/intact 3.1.1 → 3.1.3

package/components/dropdown/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, getLeft, getRight} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     item: {
@@ -25,9 +26,11 @@ const defaults = {
 let dropdown: typeof defaults;
 setDefault(() => {
     dropdown = deepDefaults(theme, {dropdown: defaults}).dropdown;
+    makeMenuStyles?.clearCache();
+    makeItemStyles?.clearCache();
 });
 
-export function makeMenuStyles(k: string) {
+export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
     return css`
         position: absolute;
         min-width: ${dropdown.menu.minWidth};
@@ -44,9 +47,9 @@ export function makeMenuStyles(k: string) {
             display: block;
         }
     `
-}
+});
 
-export function makeItemStyles(k: string) {
+export const makeItemStyles = cache(function makeItemStyles(k: string) {
     return css`
         padding: ${dropdown.item.padding};
         cursor: pointer;
@@ -86,4 +89,4 @@ export function makeItemStyles(k: string) {
             vertical-align: baseline;
         }
     `
-}
+});

package/components/dropdown/usePosition.ts

@@ -1,8 +1,7 @@
 import {useInstance, findDomFromVNode} from 'intact';
 import type {Dropdown} from './';
 import {Options, position, Feedback} from '../position';
-import {noop} from 'intact-shared';
-import {isObject} from 'intact-shared';
+import {noop, isObject, isFunction} from 'intact-shared';
 import { isEqualObject } from '../utils';
 
 export type FeedbackCallback = (feedback: Feedback) => void;
@@ -19,21 +18,32 @@ export function usePosition() {
 
     (['of', 'position'] as const).forEach(item => {
         instance.watch(item, (newValue, oldValue) => {
-            // return if object is the same
             if (
+                !instance.get('value') ||
+                // return if object is the same
                 isObject(newValue) && isObject(oldValue) &&
                 // is not event object
                 !(newValue instanceof Event) &&
                 isEqualObject(newValue, oldValue)
-            )  {
-                return;
-            }
-            if (instance.get('value')) {
-                handle(noop);
-            }
+            ) return;
+
+            handle(noop);
         }, {presented: true, inited: true});
     });
 
+    // watch container, it is not commonly used
+    instance.watch('container', (newValue, oldValue) => {
+        if (
+            !instance.get('value') ||
+            // return if function is the same. Not rigorous!
+            isFunction(newValue) &&
+            isFunction(oldValue) &&
+            newValue.toString() === oldValue.toString()
+        ) return;
+
+        handle(noop);
+    }, { presented: true, inited: true });
+
     // if the dropdown is nested, we must show child after parent has positioned
     function p(
         ofElement: HTMLElement | MouseEvent | undefined,

package/components/editable/styles.ts

@@ -2,6 +2,7 @@ import {css, cx} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults}  from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     iconGap: '0 0 0 8px',
@@ -15,11 +16,12 @@ const defaults = {
 let editable: typeof defaults;
 setDefault(() => {
     editable = deepDefaults(theme, {editable: defaults}).editable;
+    makeStyles?.clearCache();
 });
 
 export {editable};
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         display: inline-flex;
         align-items: center;
@@ -34,4 +36,4 @@ export function makeStyles(k: string) {
             }
         }
     `;
-}
+});

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/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>
+```