@knockout-js/layout 0.0.3 → 0.0.4-beta.0

package/esm/components/layout/index.js

@@ -17,9 +17,12 @@ import { gql, query } from "@knockout-js/ice-urql/request";
 import { iceUrqlInstance } from "../index";
 import { OpenWin } from "../icons/index";
 import { logoBase64 } from "./logo";
+import GatherMenu from "../gather-menu/index";
+import { BarsOutlined } from "@ant-design/icons";
 var userMenuListQuery = gql("query userMenuList($appCode:String!){\n  userMenus(appCode: $appCode){\n    id,parentID,kind,name,comments,displaySort,icon,route\n  }\n}");
 var Layout = function(props) {
     var _useState = _sliced_to_array(useState(LocaleType.zhCN), 2), locale = _useState[0], setLocale = _useState[1];
+    var _useState1 = _sliced_to_array(useState(false), 2), open = _useState1[0], setOpen = _useState1[1];
     // 根据列表格式化成菜单树结构
     var listFormatTree = useCallback(function(list, parentList) {
         if (!parentList) parentList = list.filter(function(item) {
@@ -33,103 +36,129 @@ var Layout = function(props) {
         });
         return parentList;
     }, []);
-    return /*#__PURE__*/ _jsx(CollectProviders, {
+    var isGatherMenu = !!props.gatherMenuProps;
+    return /*#__PURE__*/ _jsxs(CollectProviders, {
         locale: locale,
         dark: props.themeSwitchProps.value,
         pathname: props.pathname,
-        children: /*#__PURE__*/ _jsx(ProLayout, _object_spread_props(_object_spread({
-            className: styles.layout,
-            title: "adminx",
-            logo: /*#__PURE__*/ _jsx("img", {
-                src: logoBase64,
-                alt: "logo"
-            }),
-            layout: "mix",
-            fixSiderbar: true,
-            menu: {
-                locale: true,
-                request: /*#__PURE__*/ _async_to_generator(function() {
-                    var _result_data, result, meunList;
-                    return _ts_generator(this, function(_state) {
-                        switch(_state.label){
-                            case 0:
-                                return [
-                                    4,
-                                    query(userMenuListQuery, {
-                                        appCode: props.appCode
-                                    }, {
-                                        instanceName: iceUrqlInstance.ucenter
-                                    })
-                                ];
-                            case 1:
-                                result = _state.sent();
-                                if ((_result_data = result.data) === null || _result_data === void 0 ? void 0 : _result_data.userMenus.length) {
-                                    meunList = result.data.userMenus.map(function(item) {
-                                        return {
-                                            key: item.id,
-                                            name: item.name,
-                                            icon: item.icon ? props.IconFont ? /*#__PURE__*/ _jsx(props.IconFont, {
-                                                type: item.icon
-                                            }) : /*#__PURE__*/ _jsx("i", {
-                                                className: item.icon
-                                            }) : undefined,
-                                            parentId: item.parentID,
-                                            path: item.route
-                                        };
-                                    });
+        children: [
+            /*#__PURE__*/ _jsx(ProLayout, _object_spread_props(_object_spread({
+                className: styles.layout,
+                headerTitleRender: function(logo, title) {
+                    return /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            isGatherMenu ? /*#__PURE__*/ _jsx(BarsOutlined, {
+                                rev: undefined,
+                                style: {
+                                    fontSize: 20,
+                                    marginRight: 10
+                                },
+                                onClick: function() {
+                                    setOpen(true);
+                                }
+                            }) : /*#__PURE__*/ _jsx(_Fragment, {}),
+                            logo,
+                            title
+                        ]
+                    });
+                },
+                title: "adminx",
+                logo: /*#__PURE__*/ _jsx("img", {
+                    src: logoBase64,
+                    alt: "logo"
+                }),
+                layout: "mix",
+                fixSiderbar: true,
+                suppressSiderWhenMenuEmpty: true,
+                menu: isGatherMenu ? /*#__PURE__*/ _jsx(_Fragment, {}) : {
+                    locale: true,
+                    request: /*#__PURE__*/ _async_to_generator(function() {
+                        var _result_data, result, meunList;
+                        return _ts_generator(this, function(_state) {
+                            switch(_state.label){
+                                case 0:
+                                    return [
+                                        4,
+                                        query(userMenuListQuery, {
+                                            appCode: props.appCode
+                                        }, {
+                                            instanceName: iceUrqlInstance.ucenter
+                                        })
+                                    ];
+                                case 1:
+                                    result = _state.sent();
+                                    if ((_result_data = result.data) === null || _result_data === void 0 ? void 0 : _result_data.userMenus.length) {
+                                        meunList = result.data.userMenus.map(function(item) {
+                                            return {
+                                                key: item.id,
+                                                name: item.name,
+                                                icon: item.icon ? props.IconFont ? /*#__PURE__*/ _jsx(props.IconFont, {
+                                                    type: item.icon
+                                                }) : /*#__PURE__*/ _jsx("i", {
+                                                    className: item.icon
+                                                }) : undefined,
+                                                parentId: item.parentID,
+                                                path: item.route
+                                            };
+                                        });
+                                        return [
+                                            2,
+                                            listFormatTree(meunList)
+                                        ];
+                                    }
                                     return [
                                         2,
-                                        listFormatTree(meunList)
+                                        []
                                     ];
-                                }
-                                return [
-                                    2,
-                                    []
-                                ];
-                        }
-                    });
-                })
-            },
-            location: {
-                pathname: props.pathname
-            },
-            actionsRender: function() {
-                return [
-                    /*#__PURE__*/ _jsx(I18nDropdown, {
-                        onChange: function(value) {
-                            var _props_i18nProps, _props_i18nProps_onChange;
-                            setLocale(value);
-                            (_props_i18nProps = props.i18nProps) === null || _props_i18nProps === void 0 ? void 0 : (_props_i18nProps_onChange = _props_i18nProps.onChange) === null || _props_i18nProps_onChange === void 0 ? void 0 : _props_i18nProps_onChange.call(_props_i18nProps, value);
-                        }
-                    }),
-                    /*#__PURE__*/ _jsx(TenantDropdown, _object_spread({}, props.tenantProps)),
-                    /*#__PURE__*/ _jsx(AvatarDropdown, _object_spread({}, props.avatarProps)),
-                    /*#__PURE__*/ _jsx(ThemeSwitch, _object_spread({}, props.themeSwitchProps))
-                ];
-            },
-            menuItemRender: function(item, defaultDom) {
-                return item.path ? /*#__PURE__*/ _jsxs(_Fragment, {
-                    children: [
-                        /*#__PURE__*/ _jsx("a", {
-                            onClick: function() {
-                                var _props_onClickMenuItem;
-                                (_props_onClickMenuItem = props.onClickMenuItem) === null || _props_onClickMenuItem === void 0 ? void 0 : _props_onClickMenuItem.call(props, item, false);
-                            },
-                            children: defaultDom
-                        }),
-                        /*#__PURE__*/ _jsx(OpenWin, {
-                            className: styles.menuIconPopup,
-                            onClick: function() {
-                                var _props_onClickMenuItem;
-                                (_props_onClickMenuItem = props.onClickMenuItem) === null || _props_onClickMenuItem === void 0 ? void 0 : _props_onClickMenuItem.call(props, item, true);
                             }
-                        })
-                    ]
-                }) : defaultDom;
-            }
-        }, props.proLayoutProps), {
-            children: props.children
-        }))
+                        });
+                    })
+                },
+                location: {
+                    pathname: props.pathname
+                },
+                actionsRender: function() {
+                    return [
+                        /*#__PURE__*/ _jsx(I18nDropdown, {
+                            onChange: function(value) {
+                                var _props_i18nProps, _props_i18nProps_onChange;
+                                setLocale(value);
+                                (_props_i18nProps = props.i18nProps) === null || _props_i18nProps === void 0 ? void 0 : (_props_i18nProps_onChange = _props_i18nProps.onChange) === null || _props_i18nProps_onChange === void 0 ? void 0 : _props_i18nProps_onChange.call(_props_i18nProps, value);
+                            }
+                        }),
+                        /*#__PURE__*/ _jsx(TenantDropdown, _object_spread({}, props.tenantProps)),
+                        /*#__PURE__*/ _jsx(AvatarDropdown, _object_spread({}, props.avatarProps)),
+                        /*#__PURE__*/ _jsx(ThemeSwitch, _object_spread({}, props.themeSwitchProps))
+                    ];
+                },
+                menuItemRender: function(item, defaultDom) {
+                    return item.path ? /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx("a", {
+                                onClick: function() {
+                                    var _props_onClickMenuItem;
+                                    (_props_onClickMenuItem = props.onClickMenuItem) === null || _props_onClickMenuItem === void 0 ? void 0 : _props_onClickMenuItem.call(props, item, false);
+                                },
+                                children: defaultDom
+                            }),
+                            /*#__PURE__*/ _jsx(OpenWin, {
+                                className: styles.menuIconPopup,
+                                onClick: function() {
+                                    var _props_onClickMenuItem;
+                                    (_props_onClickMenuItem = props.onClickMenuItem) === null || _props_onClickMenuItem === void 0 ? void 0 : _props_onClickMenuItem.call(props, item, true);
+                                }
+                            })
+                        ]
+                    }) : defaultDom;
+                }
+            }, props.proLayoutProps), {
+                children: props.children
+            })),
+            /*#__PURE__*/ _jsx(GatherMenu, _object_spread_props(_object_spread({}, props.gatherMenuProps), {
+                open: open,
+                onChangeOpen: setOpen
+            }))
+        ]
     });
 };
 export default Layout;

package/esm/components/layout/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["D:\\codeing\\git\\github\\knockout-js\\packages\\layout\\src\\components\\layout\\index.tsx"],"sourcesContent":["import { MenuDataItem, ProLayout, ProLayoutProps } from '@ant-design/pro-layout';\r\nimport I18nDropdown, { I18nDropdownProps } from '../i18n-dropdown';\r\nimport TenantDropdown, { TenantDropdownProps } from '../tenant-dropdown';\r\nimport AvatarDropdown, { AvatarDropdownProps } from '../avatar-dropdown';\r\nimport ThemeSwitch, { ThemeSwitchProps } from '../theme-switch';\r\nimport styles from './layout.module.css';\r\nimport { ReactNode, useCallback, useState } from 'react';\r\nimport { UserMenuListQuery, UserMenuListQueryVariables } from '@knockout-js/api';\r\nimport { LocaleType } from '../locale';\r\nimport { CollectProviders } from '..';\r\nimport { gql, query } from '@knockout-js/ice-urql/request';\r\nimport { iceUrqlInstance } from '..';\r\nimport { OpenWin } from '../icons';\r\nimport { IconFontProps } from '@ant-design/icons/lib/components/IconFont';\r\nimport { logoBase64 } from './logo';\r\n\r\nexport interface LayoutProps {\r\n  /**\r\n   * 应用code\r\n   */\r\n  appCode: string;\r\n  /**\r\n   * 传递动态的 location.pathname\r\n   */\r\n  pathname: string;\r\n  /**\r\n   * 菜单启用iconfont\r\n   */\r\n  IconFont?: React.FC<IconFontProps<string>>;\r\n  /**\r\n   * I18nDropdown组件对应的参数\r\n   */\r\n  i18nProps?: I18nDropdownProps;\r\n  /**\r\n   * TenantDropdown组件对应的参数\r\n   */\r\n  tenantProps: TenantDropdownProps;\r\n  /**\r\n   * AvatarDropdown组件对应的参数\r\n   */\r\n  avatarProps: AvatarDropdownProps;\r\n  /**\r\n   * ThemeSwitch组件对应的参数\r\n   */\r\n  themeSwitchProps: ThemeSwitchProps;\r\n  /**\r\n  * ProLayout组件对应的参数\r\n  */\r\n  proLayoutProps?: ProLayoutProps;\r\n  /**\r\n   * 菜单点击返回 (item: MenuDataItem,isOpen?: boolean) => void;\r\n   */\r\n  onClickMenuItem?: (item: MenuDataItem & {\r\n    isUrl: boolean;\r\n    onClick: () => void;\r\n  },\r\n    isOpen?: boolean) => void;\r\n  /**\r\n   * 默认插槽\r\n   */\r\n  children?: ReactNode;\r\n\r\n}\r\n\r\nconst userMenuListQuery = gql(/* GraphQL */`query userMenuList($appCode:String!){\r\n  userMenus(appCode: $appCode){\r\n    id,parentID,kind,name,comments,displaySort,icon,route\r\n  }\r\n}`);\r\n\r\n\r\nconst Layout = (props: LayoutProps) => {\r\n\r\n  const [locale, setLocale] = useState(LocaleType.zhCN);\r\n\r\n  // 根据列表格式化成菜单树结构\r\n  const listFormatTree = useCallback((list: MenuDataItem[], parentList?: MenuDataItem[]) => {\r\n    if (!parentList) {\r\n      parentList = list.filter(item => item.parentId == '0');\r\n    }\r\n    parentList.forEach((pItem) => {\r\n      let children = list.filter(\r\n        (allItem) => allItem.parentId == pItem.key,\r\n      );\r\n      if (children && children.length) {\r\n        pItem.children = listFormatTree(list, children);\r\n      }\r\n    });\r\n    return parentList;\r\n  }, [])\r\n\r\n  return (\r\n    <CollectProviders\r\n      locale={locale}\r\n      dark={props.themeSwitchProps.value}\r\n      pathname={props.pathname}\r\n    >\r\n      <ProLayout\r\n        className={styles.layout}\r\n        title='adminx'\r\n        logo={<img src={logoBase64} alt=\"logo\" />}\r\n        layout=\"mix\"\r\n        fixSiderbar\r\n        menu={{\r\n          locale: true,\r\n          request: async () => {\r\n            const result = await query<UserMenuListQuery, UserMenuListQueryVariables>(userMenuListQuery, {\r\n              appCode: props.appCode\r\n            }, { instanceName: iceUrqlInstance.ucenter });\r\n            if (result.data?.userMenus.length) {\r\n              const meunList = result.data.userMenus.map(item => {\r\n                return {\r\n                  key: item.id,\r\n                  name: item.name,\r\n                  icon: item.icon ? props.IconFont ? <props.IconFont type={item.icon} /> : <i className={item.icon} /> : undefined,\r\n                  parentId: item.parentID,\r\n                  path: item.route,\r\n                } as MenuDataItem\r\n              })\r\n\r\n              return listFormatTree(meunList);\r\n            }\r\n            return [];\r\n          },\r\n        }}\r\n        location={{\r\n          pathname: props.pathname\r\n        }}\r\n        actionsRender={() => [\r\n          <I18nDropdown onChange={(value) => {\r\n            setLocale(value);\r\n            props.i18nProps?.onChange?.(value)\r\n          }} />,\r\n          <TenantDropdown {...props.tenantProps} />,\r\n          <AvatarDropdown {...props.avatarProps} />,\r\n          <ThemeSwitch {...props.themeSwitchProps} />,\r\n        ]}\r\n        menuItemRender={(item, defaultDom) => (item.path ? <>\r\n          <a\r\n            onClick={() => {\r\n              props.onClickMenuItem?.(item, false)\r\n            }}\r\n          >{defaultDom}</a>\r\n          <OpenWin\r\n            className={styles.menuIconPopup}\r\n            onClick={() => {\r\n              props.onClickMenuItem?.(item, true)\r\n            }}\r\n          />\r\n        </>\r\n          : defaultDom)}\r\n        {...props.proLayoutProps}\r\n      >\r\n        {props.children}\r\n      </ProLayout>\r\n    </CollectProviders>\r\n  )\r\n}\r\n\r\nexport default Layout\r\n"],"names":["ProLayout","I18nDropdown","TenantDropdown","AvatarDropdown","ThemeSwitch","styles","useCallback","useState","LocaleType","CollectProviders","gql","query","iceUrqlInstance","OpenWin","logoBase64","userMenuListQuery","Layout","props","zhCN","locale","setLocale","listFormatTree","list","parentList","filter","item","parentId","forEach","pItem","children","allItem","key","length","dark","themeSwitchProps","value","pathname","className","layout","title","logo","img","src","alt","fixSiderbar","menu","request","result","meunList","appCode","instanceName","ucenter","data","userMenus","map","id","name","icon","IconFont","type","i","undefined","parentID","path","route","location","actionsRender","onChange","i18nProps","tenantProps","avatarProps","menuItemRender","defaultDom","a","onClick","onClickMenuItem","menuIconPopup","proLayoutProps"],"mappings":"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"}
+{"version":3,"sources":["D:\\codeing\\git\\github\\knockout-js\\packages\\layout\\src\\components\\layout\\index.tsx"],"sourcesContent":["import { MenuDataItem, ProLayout, ProLayoutProps } from '@ant-design/pro-layout';\r\nimport I18nDropdown, { I18nDropdownProps } from '../i18n-dropdown';\r\nimport TenantDropdown, { TenantDropdownProps } from '../tenant-dropdown';\r\nimport AvatarDropdown, { AvatarDropdownProps } from '../avatar-dropdown';\r\nimport ThemeSwitch, { ThemeSwitchProps } from '../theme-switch';\r\nimport styles from './layout.module.css';\r\nimport { ReactNode, useCallback, useState } from 'react';\r\nimport { UserMenuListQuery, UserMenuListQueryVariables } from '@knockout-js/api';\r\nimport { LocaleType } from '../locale';\r\nimport { CollectProviders } from '..';\r\nimport { gql, query } from '@knockout-js/ice-urql/request';\r\nimport { iceUrqlInstance } from '..';\r\nimport { OpenWin } from '../icons';\r\nimport { IconFontProps } from '@ant-design/icons/lib/components/IconFont';\r\nimport { logoBase64 } from './logo';\r\nimport GatherMenu, { GatherMenuProps } from '../gather-menu';\r\nimport { BarsOutlined } from '@ant-design/icons';\r\n\r\nexport interface LayoutProps {\r\n  /**\r\n   * 应用code\r\n   */\r\n  appCode: string;\r\n  /**\r\n   * 传递动态的 location.pathname\r\n   */\r\n  pathname: string;\r\n  /**\r\n   * 菜单启用iconfont\r\n   */\r\n  IconFont?: React.FC<IconFontProps<string>>;\r\n  /**\r\n   * 集成菜单\r\n   */\r\n  gatherMenuProps?: GatherMenuProps;\r\n  /**\r\n   * I18nDropdown组件对应的参数\r\n   */\r\n  i18nProps?: I18nDropdownProps;\r\n  /**\r\n   * TenantDropdown组件对应的参数\r\n   */\r\n  tenantProps: TenantDropdownProps;\r\n  /**\r\n   * AvatarDropdown组件对应的参数\r\n   */\r\n  avatarProps: AvatarDropdownProps;\r\n  /**\r\n   * ThemeSwitch组件对应的参数\r\n   */\r\n  themeSwitchProps: ThemeSwitchProps;\r\n  /**\r\n  * ProLayout组件对应的参数\r\n  */\r\n  proLayoutProps?: ProLayoutProps;\r\n  /**\r\n   * 菜单点击返回 (item: MenuDataItem,isOpen?: boolean) => void;\r\n   */\r\n  onClickMenuItem?: (item: MenuDataItem & {\r\n    isUrl: boolean;\r\n    onClick: () => void;\r\n  },\r\n    isOpen?: boolean) => void;\r\n  /**\r\n   * 默认插槽\r\n   */\r\n  children?: ReactNode;\r\n\r\n}\r\n\r\nconst userMenuListQuery = gql(/* GraphQL */`query userMenuList($appCode:String!){\r\n  userMenus(appCode: $appCode){\r\n    id,parentID,kind,name,comments,displaySort,icon,route\r\n  }\r\n}`);\r\n\r\n\r\nconst Layout = (props: LayoutProps) => {\r\n\r\n  const [locale, setLocale] = useState(LocaleType.zhCN);\r\n  const [open, setOpen] = useState(false);\r\n\r\n  // 根据列表格式化成菜单树结构\r\n  const listFormatTree = useCallback((list: MenuDataItem[], parentList?: MenuDataItem[]) => {\r\n    if (!parentList) {\r\n      parentList = list.filter(item => item.parentId == '0');\r\n    }\r\n    parentList.forEach((pItem) => {\r\n      let children = list.filter(\r\n        (allItem) => allItem.parentId == pItem.key,\r\n      );\r\n      if (children && children.length) {\r\n        pItem.children = listFormatTree(list, children);\r\n      }\r\n    });\r\n    return parentList;\r\n  }, [])\r\n\r\n  const isGatherMenu = !!props.gatherMenuProps;\r\n\r\n  return (\r\n    <CollectProviders\r\n      locale={locale}\r\n      dark={props.themeSwitchProps.value}\r\n      pathname={props.pathname}\r\n    >\r\n      <ProLayout\r\n        className={styles.layout}\r\n        headerTitleRender={(logo, title) => {\r\n          return <>\r\n            {isGatherMenu ? <BarsOutlined\r\n              rev={undefined}\r\n              style={{ fontSize: 20, marginRight: 10 }}\r\n              onClick={() => {\r\n                setOpen(true);\r\n              }}\r\n            /> : <></>}\r\n            {logo}\r\n            {title}\r\n          </>\r\n        }}\r\n        title='adminx'\r\n        logo={<img src={logoBase64} alt=\"logo\" />}\r\n        layout=\"mix\"\r\n        fixSiderbar\r\n        suppressSiderWhenMenuEmpty\r\n        menu={isGatherMenu ? <></> : {\r\n          locale: true,\r\n          request: async () => {\r\n            const result = await query<UserMenuListQuery, UserMenuListQueryVariables>(userMenuListQuery, {\r\n              appCode: props.appCode\r\n            }, { instanceName: iceUrqlInstance.ucenter });\r\n            if (result.data?.userMenus.length) {\r\n              const meunList = result.data.userMenus.map(item => {\r\n                return {\r\n                  key: item.id,\r\n                  name: item.name,\r\n                  icon: item.icon ? props.IconFont ? <props.IconFont type={item.icon} /> : <i className={item.icon} /> : undefined,\r\n                  parentId: item.parentID,\r\n                  path: item.route,\r\n                } as MenuDataItem\r\n              })\r\n\r\n              return listFormatTree(meunList);\r\n            }\r\n            return [];\r\n          },\r\n        }}\r\n        location={{\r\n          pathname: props.pathname\r\n        }}\r\n        actionsRender={() => [\r\n          <I18nDropdown onChange={(value) => {\r\n            setLocale(value);\r\n            props.i18nProps?.onChange?.(value)\r\n          }} />,\r\n          <TenantDropdown {...props.tenantProps} />,\r\n          <AvatarDropdown {...props.avatarProps} />,\r\n          <ThemeSwitch {...props.themeSwitchProps} />,\r\n        ]}\r\n        menuItemRender={(item, defaultDom) => (item.path ? <>\r\n          <a\r\n            onClick={() => {\r\n              props.onClickMenuItem?.(item, false)\r\n            }}\r\n          >{defaultDom}</a>\r\n          <OpenWin\r\n            className={styles.menuIconPopup}\r\n            onClick={() => {\r\n              props.onClickMenuItem?.(item, true)\r\n            }}\r\n          />\r\n        </>\r\n          : defaultDom)}\r\n        {...props.proLayoutProps}\r\n      >\r\n        {props.children}\r\n      </ProLayout>\r\n      <GatherMenu\r\n        {...props.gatherMenuProps}\r\n        open={open}\r\n        onChangeOpen={setOpen}\r\n      />\r\n    </CollectProviders>\r\n  )\r\n}\r\n\r\nexport default Layout\r\n"],"names":["ProLayout","I18nDropdown","TenantDropdown","AvatarDropdown","ThemeSwitch","styles","useCallback","useState","LocaleType","CollectProviders","gql","query","iceUrqlInstance","OpenWin","logoBase64","GatherMenu","BarsOutlined","userMenuListQuery","Layout","props","zhCN","locale","setLocale","open","setOpen","listFormatTree","list","parentList","filter","item","parentId","forEach","pItem","children","allItem","key","length","isGatherMenu","gatherMenuProps","dark","themeSwitchProps","value","pathname","className","layout","headerTitleRender","logo","title","rev","undefined","style","fontSize","marginRight","onClick","img","src","alt","fixSiderbar","suppressSiderWhenMenuEmpty","menu","request","result","meunList","appCode","instanceName","ucenter","data","userMenus","map","id","name","icon","IconFont","type","i","parentID","path","route","location","actionsRender","onChange","i18nProps","tenantProps","avatarProps","menuItemRender","defaultDom","a","onClickMenuItem","menuIconPopup","proLayoutProps","onChangeOpen"],"mappings":";;;;;;AAAA,SAAuBA,SAAS,QAAwB,yBAAyB;AACjF,OAAOC,kBAAyC,yBAAmB;AACnE,OAAOC,oBAA6C,2BAAqB;AACzE,OAAOC,oBAA6C,2BAAqB;AACzE,OAAOC,iBAAuC,wBAAkB;AAChE,OAAOC,YAAY,sBAAsB;AACzC,SAAoBC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAEzD,SAASC,UAAU,QAAQ,kBAAY;AACvC,SAASC,gBAAgB,QAAQ,WAAK;AACtC,SAASC,GAAG,EAAEC,KAAK,QAAQ,gCAAgC;AAC3D,SAASC,eAAe,QAAQ,WAAK;AACrC,SAASC,OAAO,QAAQ,iBAAW;AAEnC,SAASC,UAAU,QAAQ,SAAS;AACpC,OAAOC,gBAAqC,uBAAiB;AAC7D,SAASC,YAAY,QAAQ,oBAAoB;AAsDjD,IAAMC,oBAAoBP,IAAkB;AAO5C,IAAMQ,SAAS,SAACC,OAAuB;IAErC,IAA4BZ,6BAAAA,SAASC,WAAWY,IAAI,OAA7CC,SAAqBd,cAAbe,YAAaf;IAC5B,IAAwBA,8BAAAA,SAAS,KAAK,OAA/BgB,OAAiBhB,eAAXiB,UAAWjB;IAExB,gBAAgB;IAChB,IAAMkB,iBAAiBnB,YAAY,SAACoB,MAAsBC,YAAgC;QACxF,IAAI,CAACA,YACHA,aAAaD,KAAKE,MAAM,CAACC,SAAAA;mBAAQA,KAAKC,QAAQ,IAAI;;QAEpDH,WAAWI,OAAO,CAAC,SAACC,OAAU;YAC5B,IAAIC,WAAWP,KAAKE,MAAM,CACxB,SAACM;uBAAYA,QAAQJ,QAAQ,IAAIE,MAAMG,GAAG;;YAE5C,IAAIF,YAAYA,SAASG,MAAM,EAC7BJ,MAAMC,QAAQ,GAAGR,eAAeC,MAAMO;QAE1C;QACA,OAAON;IACT,GAAG,EAAE;IAEL,IAAMU,eAAe,CAAC,CAAClB,MAAMmB,eAAe;IAE5C,qBACE,MAAC7B;QACCY,QAAQA;QACRkB,MAAMpB,MAAMqB,gBAAgB,CAACC,KAAK;QAClCC,UAAUvB,MAAMuB,QAAQ;;0BAExB,KAAC1C;gBACC2C,WAAWtC,OAAOuC,MAAM;gBACxBC,mBAAmB,SAACC,MAAMC,OAAU;oBAClC,qBAAO;;4BACJV,6BAAe,KAACrB;gCACfgC,KAAKC;gCACLC,OAAO;oCAAEC,UAAU;oCAAIC,aAAa;gCAAG;gCACvCC,SAAS,WAAM;oCACb7B,QAAQ,IAAI;gCACd;+CACG,mBAAK;4BACTsB;4BACAC;;;gBAEL;gBACAA,OAAM;gBACND,oBAAM,KAACQ;oBAAIC,KAAKzC;oBAAY0C,KAAI;;gBAChCZ,QAAO;gBACPa,WAAW;gBACXC,0BAA0B;gBAC1BC,MAAMtB,6BAAe,sBAAQ;oBAC3BhB,QAAQ,IAAI;oBACZuC,uBAAS,oBAAA,WAAY;4BAIfC,cAHEA,QAIEC;;;;oCAJO;;wCAAMnD,MAAqDM,mBAAmB;4CAC3F8C,SAAS5C,MAAM4C,OAAO;wCACxB,GAAG;4CAAEC,cAAcpD,gBAAgBqD,OAAO;wCAAC;;;oCAFrCJ,SAAS;oCAGf,IAAIA,CAAAA,eAAAA,OAAOK,IAAI,cAAXL,0BAAAA,KAAAA,IAAAA,aAAaM,UAAU/B,MAAM,EAAE;wCAC3B0B,WAAWD,OAAOK,IAAI,CAACC,SAAS,CAACC,GAAG,CAACvC,SAAAA,MAAQ;4CACjD,OAAO;gDACLM,KAAKN,KAAKwC,EAAE;gDACZC,MAAMzC,KAAKyC,IAAI;gDACfC,MAAM1C,KAAK0C,IAAI,GAAGpD,MAAMqD,QAAQ,iBAAG,KAACrD,MAAMqD,QAAQ;oDAACC,MAAM5C,KAAK0C,IAAI;mEAAO,KAACG;oDAAE/B,WAAWd,KAAK0C,IAAI;kDAAI,GAAGtB,SAAS;gDAChHnB,UAAUD,KAAK8C,QAAQ;gDACvBC,MAAM/C,KAAKgD,KAAK;4CAClB;wCACF;wCAEA;;4CAAOpD,eAAeqC;;oCACxB,CAAC;oCACD;;;;;;oBACF;gBACF,CAAC;gBACDgB,UAAU;oBACRpC,UAAUvB,MAAMuB,QAAQ;gBAC1B;gBACAqC,eAAe;oBAAM,OAAA;sCACnB,KAAC9E;4BAAa+E,UAAU,SAACvC,OAAU;oCAEjCtB;gCADAG,UAAUmB;gCACVtB,CAAAA,mBAAAA,MAAM8D,SAAS,cAAf9D,8BAAAA,KAAAA,IAAAA,6BAAAA,iBAAiB6D,6DAAjB7D,KAAAA,IAAAA,0BAAAA,KAAAA,kBAA4BsB;4BAC9B;;sCACA,KAACvC,mCAAmBiB,MAAM+D,WAAW;sCACrC,KAAC/E,mCAAmBgB,MAAMgE,WAAW;sCACrC,KAAC/E,gCAAgBe,MAAMqB,gBAAgB;qBACxC;;gBACD4C,gBAAgB,SAACvD,MAAMwD;oBAAgBxD,OAAAA,KAAK+C,IAAI,iBAAG;;0CACjD,KAACU;gCACCjC,SAAS,WAAM;wCACblC;oCAAAA,CAAAA,yBAAAA,MAAMoE,eAAe,cAArBpE,oCAAAA,KAAAA,IAAAA,uBAAAA,KAAAA,OAAwBU,MAAM,KAAK;gCACrC;0CACAwD;;0CACF,KAACxE;gCACC8B,WAAWtC,OAAOmF,aAAa;gCAC/BnC,SAAS,WAAM;wCACblC;oCAAAA,CAAAA,yBAAAA,MAAMoE,eAAe,cAArBpE,oCAAAA,KAAAA,IAAAA,uBAAAA,KAAAA,OAAwBU,MAAM,IAAI;gCACpC;;;yBAGAwD,UAAU;;eACVlE,MAAMsE,cAAc;0BAEvBtE,MAAMc,QAAQ;;0BAEjB,KAAClB,oDACKI,MAAMmB,eAAe;gBACzBf,MAAMA;gBACNmE,cAAclE;;;;AAItB;AAEA,eAAeN,OAAM"}

package/esm/components/locale/en_US.js

@@ -2,12 +2,14 @@ import ThemeSwitch from "../theme-switch/locale/en_US";
 import LeavePrompt from "../leave-prompt/locale/en_US";
 import AvatarDropdown from "../avatar-dropdown/locale/en_US";
 import TenantDropdown from "../tenant-dropdown/locale/en_US";
+import GatherMenu from "../gather-menu/locale/en_US";
 var localeValues = {
     locale: "en-us",
     ThemeSwitch: ThemeSwitch,
     LeavePrompt: LeavePrompt,
     AvatarDropdown: AvatarDropdown,
-    TenantDropdown: TenantDropdown
+    TenantDropdown: TenantDropdown,
+    GatherMenu: GatherMenu
 };
 export default localeValues;
 

package/esm/components/locale/en_US.js.map

@@ -1 +1 @@
-{"version":3,"sources":["D:\\codeing\\git\\github\\knockout-js\\packages\\layout\\src\\components\\locale\\en_US.ts"],"sourcesContent":["import { Locale } from \".\";\r\nimport ThemeSwitch from \"../theme-switch/locale/en_US\";\r\nimport LeavePrompt from \"../leave-prompt/locale/en_US\";\r\nimport AvatarDropdown from \"../avatar-dropdown/locale/en_US\";\r\nimport TenantDropdown from \"../tenant-dropdown/locale/en_US\";\r\n\r\nconst localeValues: Locale = {\r\n  locale: 'en-us',\r\n  ThemeSwitch,\r\n  LeavePrompt,\r\n  AvatarDropdown,\r\n  TenantDropdown,\r\n}\r\n\r\nexport default localeValues\r\n"],"names":["ThemeSwitch","LeavePrompt","AvatarDropdown","TenantDropdown","localeValues","locale"],"mappings":"AACA,OAAOA,iBAAiB,+BAA+B;AACvD,OAAOC,iBAAiB,+BAA+B;AACvD,OAAOC,oBAAoB,kCAAkC;AAC7D,OAAOC,oBAAoB,kCAAkC;AAE7D,IAAMC,eAAuB;IAC3BC,QAAQ;IACRL,aAAAA;IACAC,aAAAA;IACAC,gBAAAA;IACAC,gBAAAA;AACF;AAEA,eAAeC,aAAY"}
+{"version":3,"sources":["D:\\codeing\\git\\github\\knockout-js\\packages\\layout\\src\\components\\locale\\en_US.ts"],"sourcesContent":["import { Locale } from \".\";\r\nimport ThemeSwitch from \"../theme-switch/locale/en_US\";\r\nimport LeavePrompt from \"../leave-prompt/locale/en_US\";\r\nimport AvatarDropdown from \"../avatar-dropdown/locale/en_US\";\r\nimport TenantDropdown from \"../tenant-dropdown/locale/en_US\";\r\nimport GatherMenu from \"../gather-menu/locale/en_US\";\r\n\r\nconst localeValues: Locale = {\r\n  locale: 'en-us',\r\n  ThemeSwitch,\r\n  LeavePrompt,\r\n  AvatarDropdown,\r\n  TenantDropdown,\r\n  GatherMenu,\r\n}\r\n\r\nexport default localeValues\r\n"],"names":["ThemeSwitch","LeavePrompt","AvatarDropdown","TenantDropdown","GatherMenu","localeValues","locale"],"mappings":"AACA,OAAOA,iBAAiB,+BAA+B;AACvD,OAAOC,iBAAiB,+BAA+B;AACvD,OAAOC,oBAAoB,kCAAkC;AAC7D,OAAOC,oBAAoB,kCAAkC;AAC7D,OAAOC,gBAAgB,8BAA8B;AAErD,IAAMC,eAAuB;IAC3BC,QAAQ;IACRN,aAAAA;IACAC,aAAAA;IACAC,gBAAAA;IACAC,gBAAAA;IACAC,YAAAA;AACF;AAEA,eAAeC,aAAY"}

package/esm/components/locale/index.d.ts

@@ -3,12 +3,14 @@ import { TenantDropdownLocale } from '../tenant-dropdown';
 import { ThemeSwitchLocale } from '../theme-switch';
 import { LeavePromptLocale } from '../leave-prompt';
 import { AvatarDropdownLocale } from '../avatar-dropdown';
+import { GatherMenuLocale } from "../gather-menu";
 export interface Locale {
     locale: string;
     ThemeSwitch: ThemeSwitchLocale;
     LeavePrompt: LeavePromptLocale;
     AvatarDropdown: AvatarDropdownLocale;
     TenantDropdown: TenantDropdownLocale;
+    GatherMenu: GatherMenuLocale;
 }
 export declare enum LocaleType {
     zhCN = "zh-CN",

package/esm/components/locale/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["D:\\codeing\\git\\github\\knockout-js\\packages\\layout\\src\\components\\locale\\index.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\r\nimport zhCN from \"./zh_CN\";\r\nimport enUS from \"./en_US\";\r\nimport { TenantDropdownLocale } from '../tenant-dropdown';\r\nimport { ThemeSwitchLocale } from '../theme-switch';\r\nimport { LeavePromptLocale } from '../leave-prompt';\r\nimport { AvatarDropdownLocale } from '../avatar-dropdown';\r\n\r\nexport interface Locale {\r\n  locale: string;\r\n  ThemeSwitch: ThemeSwitchLocale;\r\n  LeavePrompt: LeavePromptLocale;\r\n  AvatarDropdown: AvatarDropdownLocale;\r\n  TenantDropdown: TenantDropdownLocale;\r\n}\r\n\r\nexport enum LocaleType {\r\n  zhCN = \"zh-CN\",\r\n  enUS = \"en-US\",\r\n}\r\n\r\nexport interface BasicProviderProps {\r\n  locale: LocaleType;\r\n  children?: React.ReactNode;\r\n}\r\n\r\n// 定义语言上下文\r\nexport const BasicContext = createContext<BasicProviderProps>({\r\n  locale: LocaleType.zhCN\r\n});\r\n\r\n/**\r\n * 组件上使用\r\n */\r\nexport default (props: BasicProviderProps) => {\r\n  const { locale, children } = props;\r\n  return <BasicContext.Provider value={{ locale: locale }}>{children}</BasicContext.Provider>\r\n}\r\n\r\nexport type LocaleComponentName = Exclude<keyof Locale, 'locale'>;\r\n/**\r\n * hook\r\n * @param componentName\r\n * @returns\r\n */\r\nexport const useLocale = <C extends LocaleComponentName>(componentName: C) => {\r\n  const ctx = useContext<BasicProviderProps>(BasicContext);\r\n  if (ctx.locale === LocaleType.enUS) {\r\n    return { ...enUS[componentName] }\r\n  }\r\n  // 默认zhCN\r\n  return { ...zhCN[componentName] }\r\n}\r\n"],"names":["createContext","useContext","zhCN","enUS","LocaleType","BasicContext","locale","props","children","Provider","value","useLocale","componentName","ctx"],"mappings":";;AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAClD,OAAOC,UAAU,UAAU;AAC3B,OAAOC,UAAU,UAAU;WAcpB;UAAKC,UAAU;IAAVA,WACVF,UAAO;IADGE,WAEVD,UAAO;GAFGC,eAAAA;AAUZ,UAAU;AACV,OAAO,IAAMC,6BAAeL,cAAkC;IAC5DM,QAAQF,WAAWF,IAAI;AACzB,GAAG;AAEH;;CAEC,GACD,eAAe,SAACK,OAA8B;IAC5C,IAAQD,SAAqBC,MAArBD,QAAQE,WAAaD,MAAbC;IAChB,qBAAO,KAACH,aAAaI,QAAQ;QAACC,OAAO;YAAEJ,QAAQA;QAAO;kBAAIE;;AAC5D,EAAC;AAGD;;;;CAIC,GACD,OAAO,IAAMG,YAAY,SAAgCC,eAAqB;IAC5E,IAAMC,MAAMZ,WAA+BI;IAC3C,IAAIQ,IAAIP,MAAM,KAAKF,WAAWD,IAAI,EAChC,OAAO,mBAAKA,IAAI,CAACS,cAAc;IAEjC,SAAS;IACT,OAAO,mBAAKV,IAAI,CAACU,cAAc;AACjC,EAAC"}
+{"version":3,"sources":["D:\\codeing\\git\\github\\knockout-js\\packages\\layout\\src\\components\\locale\\index.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\r\nimport zhCN from \"./zh_CN\";\r\nimport enUS from \"./en_US\";\r\nimport { TenantDropdownLocale } from '../tenant-dropdown';\r\nimport { ThemeSwitchLocale } from '../theme-switch';\r\nimport { LeavePromptLocale } from '../leave-prompt';\r\nimport { AvatarDropdownLocale } from '../avatar-dropdown';\r\nimport { GatherMenuLocale } from \"../gather-menu\";\r\n\r\nexport interface Locale {\r\n  locale: string;\r\n  ThemeSwitch: ThemeSwitchLocale;\r\n  LeavePrompt: LeavePromptLocale;\r\n  AvatarDropdown: AvatarDropdownLocale;\r\n  TenantDropdown: TenantDropdownLocale;\r\n  GatherMenu: GatherMenuLocale;\r\n}\r\n\r\nexport enum LocaleType {\r\n  zhCN = \"zh-CN\",\r\n  enUS = \"en-US\",\r\n}\r\n\r\nexport interface BasicProviderProps {\r\n  locale: LocaleType;\r\n  children?: React.ReactNode;\r\n}\r\n\r\n// 定义语言上下文\r\nexport const BasicContext = createContext<BasicProviderProps>({\r\n  locale: LocaleType.zhCN\r\n});\r\n\r\n/**\r\n * 组件上使用\r\n */\r\nexport default (props: BasicProviderProps) => {\r\n  const { locale, children } = props;\r\n  return <BasicContext.Provider value={{ locale: locale }}>{children}</BasicContext.Provider>\r\n}\r\n\r\nexport type LocaleComponentName = Exclude<keyof Locale, 'locale'>;\r\n/**\r\n * hook\r\n * @param componentName\r\n * @returns\r\n */\r\nexport const useLocale = <C extends LocaleComponentName>(componentName: C) => {\r\n  const ctx = useContext<BasicProviderProps>(BasicContext);\r\n  if (ctx.locale === LocaleType.enUS) {\r\n    return { ...enUS[componentName] }\r\n  }\r\n  // 默认zhCN\r\n  return { ...zhCN[componentName] }\r\n}\r\n"],"names":["createContext","useContext","zhCN","enUS","LocaleType","BasicContext","locale","props","children","Provider","value","useLocale","componentName","ctx"],"mappings":";;AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAClD,OAAOC,UAAU,UAAU;AAC3B,OAAOC,UAAU,UAAU;WAgBpB;UAAKC,UAAU;IAAVA,WACVF,UAAO;IADGE,WAEVD,UAAO;GAFGC,eAAAA;AAUZ,UAAU;AACV,OAAO,IAAMC,6BAAeL,cAAkC;IAC5DM,QAAQF,WAAWF,IAAI;AACzB,GAAG;AAEH;;CAEC,GACD,eAAe,SAACK,OAA8B;IAC5C,IAAQD,SAAqBC,MAArBD,QAAQE,WAAaD,MAAbC;IAChB,qBAAO,KAACH,aAAaI,QAAQ;QAACC,OAAO;YAAEJ,QAAQA;QAAO;kBAAIE;;AAC5D,EAAC;AAGD;;;;CAIC,GACD,OAAO,IAAMG,YAAY,SAAgCC,eAAqB;IAC5E,IAAMC,MAAMZ,WAA+BI;IAC3C,IAAIQ,IAAIP,MAAM,KAAKF,WAAWD,IAAI,EAChC,OAAO,mBAAKA,IAAI,CAACS,cAAc;IAEjC,SAAS;IACT,OAAO,mBAAKV,IAAI,CAACU,cAAc;AACjC,EAAC"}

package/esm/components/locale/zh_CN.js

@@ -2,12 +2,14 @@ import ThemeSwitch from "../theme-switch/locale/zh_CN";
 import LeavePrompt from "../leave-prompt/locale/zh_CN";
 import AvatarDropdown from "../avatar-dropdown/locale/zh_CN";
 import TenantDropdown from "../tenant-dropdown/locale/zh_CN";
+import GatherMenu from "../gather-menu/locale/zh_CN";
 var localeValues = {
     locale: "zh-cn",
     ThemeSwitch: ThemeSwitch,
     LeavePrompt: LeavePrompt,
     AvatarDropdown: AvatarDropdown,
-    TenantDropdown: TenantDropdown
+    TenantDropdown: TenantDropdown,
+    GatherMenu: GatherMenu
 };
 export default localeValues;
 

package/esm/components/locale/zh_CN.js.map

@@ -1 +1 @@
-{"version":3,"sources":["D:\\codeing\\git\\github\\knockout-js\\packages\\layout\\src\\components\\locale\\zh_CN.ts"],"sourcesContent":["import { Locale } from \".\";\r\nimport ThemeSwitch from \"../theme-switch/locale/zh_CN\";\r\nimport LeavePrompt from \"../leave-prompt/locale/zh_CN\";\r\nimport AvatarDropdown from \"../avatar-dropdown/locale/zh_CN\";\r\nimport TenantDropdown from \"../tenant-dropdown/locale/zh_CN\";\r\n\r\nconst localeValues: Locale = {\r\n  locale: 'zh-cn',\r\n  ThemeSwitch,\r\n  LeavePrompt,\r\n  AvatarDropdown,\r\n  TenantDropdown,\r\n}\r\n\r\nexport default localeValues\r\n"],"names":["ThemeSwitch","LeavePrompt","AvatarDropdown","TenantDropdown","localeValues","locale"],"mappings":"AACA,OAAOA,iBAAiB,+BAA+B;AACvD,OAAOC,iBAAiB,+BAA+B;AACvD,OAAOC,oBAAoB,kCAAkC;AAC7D,OAAOC,oBAAoB,kCAAkC;AAE7D,IAAMC,eAAuB;IAC3BC,QAAQ;IACRL,aAAAA;IACAC,aAAAA;IACAC,gBAAAA;IACAC,gBAAAA;AACF;AAEA,eAAeC,aAAY"}
+{"version":3,"sources":["D:\\codeing\\git\\github\\knockout-js\\packages\\layout\\src\\components\\locale\\zh_CN.ts"],"sourcesContent":["import { Locale } from \".\";\r\nimport ThemeSwitch from \"../theme-switch/locale/zh_CN\";\r\nimport LeavePrompt from \"../leave-prompt/locale/zh_CN\";\r\nimport AvatarDropdown from \"../avatar-dropdown/locale/zh_CN\";\r\nimport TenantDropdown from \"../tenant-dropdown/locale/zh_CN\";\r\nimport GatherMenu from \"../gather-menu/locale/zh_CN\";\r\n\r\nconst localeValues: Locale = {\r\n  locale: 'zh-cn',\r\n  ThemeSwitch,\r\n  LeavePrompt,\r\n  AvatarDropdown,\r\n  TenantDropdown,\r\n  GatherMenu,\r\n}\r\n\r\nexport default localeValues\r\n"],"names":["ThemeSwitch","LeavePrompt","AvatarDropdown","TenantDropdown","GatherMenu","localeValues","locale"],"mappings":"AACA,OAAOA,iBAAiB,+BAA+B;AACvD,OAAOC,iBAAiB,+BAA+B;AACvD,OAAOC,oBAAoB,kCAAkC;AAC7D,OAAOC,oBAAoB,kCAAkC;AAC7D,OAAOC,gBAAgB,8BAA8B;AAErD,IAAMC,eAAuB;IAC3BC,QAAQ;IACRN,aAAAA;IACAC,aAAAA;IACAC,gBAAAA;IACAC,gBAAAA;IACAC,YAAAA;AACF;AAEA,eAAeC,aAAY"}

package/esm/components/modal/index.d.ts

@@ -0,0 +1,18 @@
+import { ModalProps as AntdModalProps } from "antd";
+import { ReactNode } from "react";
+export type ModalProps = AntdModalProps & {
+    /**
+     * 是否头部可拖拽
+     */
+    isDraggable?: boolean;
+    /**
+     * 是否满屏
+     */
+    defaultScreenful?: boolean;
+    /**
+     * 全屏图标
+     */
+    screenfulIcon?: ReactNode | false;
+};
+declare const Modal: (props: ModalProps) => JSX.Element;
+export default Modal;

package/esm/components/modal/index.js

@@ -0,0 +1,90 @@
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ice/jsx-runtime/jsx-runtime";
+import { ExpandOutlined } from "@ant-design/icons";
+import { Modal as AntdModal, Button } from "antd";
+import { useRef, useState } from "react";
+import Draggable from "react-draggable";
+import styles from "./index.module.css";
+var Modal = function(props) {
+    var width = props.width, style = props.style, title = props.title, defaultScreenful = props.defaultScreenful, isDraggable = props.isDraggable, screenfulIcon = props.screenfulIcon, restProps = _object_without_properties(props, [
+        "width",
+        "style",
+        "title",
+        "defaultScreenful",
+        "isDraggable",
+        "screenfulIcon"
+    ]);
+    var _useState = _sliced_to_array(useState(defaultScreenful !== null && defaultScreenful !== void 0 ? defaultScreenful : false), 2), screenful = _useState[0], setScreenful = _useState[1];
+    var _useState1 = _sliced_to_array(useState(true), 2), disabled = _useState1[0], setDisabled = _useState1[1];
+    var _useState2 = _sliced_to_array(useState({
+        left: 0,
+        top: 0,
+        bottom: 0,
+        right: 0
+    }), 2), bounds = _useState2[0], setBounds = _useState2[1];
+    var draggleRef = useRef(null);
+    return /*#__PURE__*/ _jsx(AntdModal, _object_spread_props(_object_spread({}, restProps), {
+        className: screenful ? styles.screenfulModal : undefined,
+        width: screenful ? "auto" : width,
+        style: screenful ? {
+            top: 0
+        } : style,
+        title: /*#__PURE__*/ _jsxs("div", {
+            className: screenful ? "" : styles.modal,
+            onMouseOver: function() {
+                if (screenful) {
+                    setDisabled(true);
+                    return;
+                }
+                if (disabled) setDisabled(false);
+            },
+            onMouseOut: function() {
+                setDisabled(true);
+            },
+            children: [
+                title,
+                screenfulIcon === false ? /*#__PURE__*/ _jsx(_Fragment, {}) : /*#__PURE__*/ _jsx(Button, {
+                    className: styles.screenfulIcon,
+                    type: "text",
+                    size: "small",
+                    onClick: function(event) {
+                        event.stopPropagation();
+                        setScreenful(!screenful);
+                    },
+                    children: screenfulIcon ? screenfulIcon : /*#__PURE__*/ _jsx(ExpandOutlined, {
+                        rev: undefined
+                    })
+                })
+            ]
+        }),
+        modalRender: function(modal) {
+            return screenful ? modal : isDraggable === false ? modal : /*#__PURE__*/ _jsx(Draggable, {
+                disabled: disabled,
+                bounds: bounds,
+                nodeRef: draggleRef,
+                onStart: function(event, uiData) {
+                    var _draggleRef_current;
+                    var _window_document_documentElement = window.document.documentElement, clientWidth = _window_document_documentElement.clientWidth, clientHeight = _window_document_documentElement.clientHeight;
+                    var targetRect = (_draggleRef_current = draggleRef.current) === null || _draggleRef_current === void 0 ? void 0 : _draggleRef_current.getBoundingClientRect();
+                    if (!targetRect) return;
+                    setBounds({
+                        left: -targetRect.left + uiData.x,
+                        right: clientWidth - (targetRect.right - uiData.x),
+                        top: -targetRect.top + uiData.y,
+                        bottom: clientHeight - (targetRect.bottom - uiData.y)
+                    });
+                },
+                children: /*#__PURE__*/ _jsx("div", {
+                    ref: draggleRef,
+                    children: modal
+                })
+            });
+        }
+    }));
+};
+export default Modal;
+
+ //# sourceMappingURL=D:\codeing\git\github\knockout-js\packages\layout\esm\components\modal\index.js.map

package/esm/components/modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["D:\\codeing\\git\\github\\knockout-js\\packages\\layout\\src\\components\\modal\\index.tsx"],"sourcesContent":["import { ExpandOutlined } from \"@ant-design/icons\";\r\nimport { Modal as AntdModal, Button, ModalProps as AntdModalProps } from \"antd\";\r\nimport { ReactNode, useRef, useState } from \"react\";\r\nimport Draggable from 'react-draggable';\r\nimport styles from './index.module.css';\r\n\r\nexport type ModalProps = AntdModalProps & {\r\n  /**\r\n   * 是否头部可拖拽\r\n   */\r\n  isDraggable?: boolean;\r\n  /**\r\n   * 是否满屏\r\n   */\r\n  defaultScreenful?: boolean;\r\n  /**\r\n   * 全屏图标\r\n   */\r\n  screenfulIcon?: ReactNode | false;\r\n}\r\n\r\nconst Modal = (props: ModalProps) => {\r\n  const { width, style, title, defaultScreenful, isDraggable, screenfulIcon, ...restProps } = props;\r\n  const [screenful, setScreenful] = useState(defaultScreenful ?? false);\r\n  const [disabled, setDisabled] = useState(true);\r\n  const [bounds, setBounds] = useState({ left: 0, top: 0, bottom: 0, right: 0 });\r\n  const draggleRef = useRef<HTMLDivElement>(null);\r\n\r\n  return <AntdModal\r\n    {...restProps}\r\n    className={screenful ? styles.screenfulModal : undefined}\r\n    width={screenful ? 'auto' : width}\r\n    style={screenful ? { top: 0 } : style}\r\n    title={\r\n      <div\r\n        className={screenful ? \"\" : styles.modal}\r\n        onMouseOver={() => {\r\n          if (screenful) {\r\n            setDisabled(true);\r\n            return;\r\n          }\r\n          if (disabled) {\r\n            setDisabled(false);\r\n          }\r\n        }}\r\n        onMouseOut={() => {\r\n          setDisabled(true);\r\n        }}\r\n      >\r\n        {title}\r\n        {screenfulIcon === false ? <></> : <Button\r\n          className={styles.screenfulIcon}\r\n          type=\"text\"\r\n          size=\"small\"\r\n          onClick={(event) => {\r\n            event.stopPropagation();\r\n            setScreenful(!screenful);\r\n          }}\r\n        >\r\n          {screenfulIcon ? screenfulIcon : <ExpandOutlined rev={undefined} />}\r\n        </Button>\r\n        }\r\n      </div>\r\n    }\r\n    modalRender={(modal) => (\r\n      screenful ? modal : isDraggable === false ? modal : <Draggable\r\n        disabled={disabled}\r\n        bounds={bounds}\r\n        nodeRef={draggleRef}\r\n        onStart={(event, uiData) => {\r\n          const { clientWidth, clientHeight } = window.document.documentElement;\r\n          const targetRect = draggleRef.current?.getBoundingClientRect();\r\n          if (!targetRect) {\r\n            return;\r\n          }\r\n          setBounds({\r\n            left: -targetRect.left + uiData.x,\r\n            right: clientWidth - (targetRect.right - uiData.x),\r\n            top: -targetRect.top + uiData.y,\r\n            bottom: clientHeight - (targetRect.bottom - uiData.y),\r\n          });\r\n        }}\r\n      >\r\n        <div ref={draggleRef}>{modal}</div>\r\n      </Draggable>\r\n    )}\r\n  />;\r\n}\r\n\r\nexport default Modal;\r\n"],"names":["ExpandOutlined","Modal","AntdModal","Button","useRef","useState","Draggable","styles","props","width","style","title","defaultScreenful","isDraggable","screenfulIcon","restProps","screenful","setScreenful","disabled","setDisabled","left","top","bottom","right","bounds","setBounds","draggleRef","className","screenfulModal","undefined","div","modal","onMouseOver","onMouseOut","type","size","onClick","event","stopPropagation","rev","modalRender","nodeRef","onStart","uiData","window","document","documentElement","clientWidth","clientHeight","targetRect","current","getBoundingClientRect","x","y","ref"],"mappings":";;;;;AAAA,SAASA,cAAc,QAAQ,oBAAoB;AACnD,SAASC,SAASC,SAAS,EAAEC,MAAM,QAAsC,OAAO;AAChF,SAAoBC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AACpD,OAAOC,eAAe,kBAAkB;AACxC,OAAOC,YAAY,qBAAqB;AAiBxC,IAAMN,QAAQ,SAACO,OAAsB;IACnC,IAAQC,QAAoFD,MAApFC,OAAOC,QAA6EF,MAA7EE,OAAOC,QAAsEH,MAAtEG,OAAOC,mBAA+DJ,MAA/DI,kBAAkBC,cAA6CL,MAA7CK,aAAaC,gBAAgCN,MAAhCM,eAAkBC,uCAAcP;QAApFC;QAAOC;QAAOC;QAAOC;QAAkBC;QAAaC;;IAC5D,IAAkCT,6BAAAA,SAASO,6BAAAA,8BAAAA,mBAAoB,KAAK,OAA7DI,YAA2BX,cAAhBY,eAAgBZ;IAClC,IAAgCA,8BAAAA,SAAS,IAAI,OAAtCa,WAAyBb,eAAfc,cAAed;IAChC,IAA4BA,8BAAAA,SAAS;QAAEe,MAAM;QAAGC,KAAK;QAAGC,QAAQ;QAAGC,OAAO;IAAE,QAArEC,SAAqBnB,eAAboB,YAAapB;IAC5B,IAAMqB,aAAatB,OAAuB,IAAI;IAE9C,qBAAO,KAACF,mDACFa;QACJY,WAAWX,YAAYT,OAAOqB,cAAc,GAAGC,SAAS;QACxDpB,OAAOO,YAAY,SAASP,KAAK;QACjCC,OAAOM,YAAY;YAAEK,KAAK;QAAE,IAAIX,KAAK;QACrCC,qBACE,MAACmB;YACCH,WAAWX,YAAY,KAAKT,OAAOwB,KAAK;YACxCC,aAAa,WAAM;gBACjB,IAAIhB,WAAW;oBACbG,YAAY,IAAI;oBAChB;gBACF,CAAC;gBACD,IAAID,UACFC,YAAY,KAAK;YAErB;YACAc,YAAY,WAAM;gBAChBd,YAAY,IAAI;YAClB;;gBAECR;gBACAG,kBAAkB,KAAK,iBAAG,oCAAQ,KAACX;oBAClCwB,WAAWpB,OAAOO,aAAa;oBAC/BoB,MAAK;oBACLC,MAAK;oBACLC,SAAS,SAACC,OAAU;wBAClBA,MAAMC,eAAe;wBACrBrB,aAAa,CAACD;oBAChB;8BAECF,gBAAgBA,8BAAgB,KAACd;wBAAeuC,KAAKV;sBAAa;kBAC5D;;;QAIbW,aAAa,SAACT;YACZf,OAAAA,YAAYe,QAAQlB,gBAAgB,KAAK,GAAGkB,sBAAQ,KAACzB;gBACnDY,UAAUA;gBACVM,QAAQA;gBACRiB,SAASf;gBACTgB,SAAS,SAACL,OAAOM,QAAW;wBAEPjB;oBADnB,IAAsCkB,mCAAAA,OAAOC,QAAQ,CAACC,eAAe,EAA7DC,cAA8BH,iCAA9BG,aAAaC,eAAiBJ,iCAAjBI;oBACrB,IAAMC,aAAavB,CAAAA,sBAAAA,WAAWwB,OAAO,cAAlBxB,iCAAAA,KAAAA,IAAAA,oBAAoByB;oBACvC,IAAI,CAACF,YACH;oBAEFxB,UAAU;wBACRL,MAAM,CAAC6B,WAAW7B,IAAI,GAAGuB,OAAOS,CAAC;wBACjC7B,OAAOwB,cAAeE,CAAAA,WAAW1B,KAAK,GAAGoB,OAAOS,CAAC,AAADA;wBAChD/B,KAAK,CAAC4B,WAAW5B,GAAG,GAAGsB,OAAOU,CAAC;wBAC/B/B,QAAQ0B,eAAgBC,CAAAA,WAAW3B,MAAM,GAAGqB,OAAOU,CAAC,AAADA;oBACrD;gBACF;0BAEA,cAAA,KAACvB;oBAAIwB,KAAK5B;8BAAaK;;cACb;;;AAGlB;AAEA,eAAe9B,MAAM"}

package/esm/components/modal/index.module.css

@@ -0,0 +1,20 @@
+.modal {
+  cursor: move;
+}
+
+.screenfulIcon {
+  position: absolute;
+  right: 40px;
+  top: 16px;
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.screenfulModal {
+  max-width: 100vw;
+  padding-bottom: 0;
+
+  :global(.ant-modal-body) {
+    height: calc(100vh - 116px);
+    overflow: auto;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knockout-js/layout",
-  "version": "0.0.3",
+  "version": "0.0.4-beta.0",
   "description": "组件功能描述",
   "files": [
     "esm",
@@ -40,12 +40,16 @@
     "@ant-design/pro-layout": "^7.16.6",
     "@ant-design/pro-provider": "^2.12.1",
     "@ant-design/pro-table": "^3.8.2",
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/utilities": "^3.2.1",
     "@ice/jsx-runtime": "^0.2.0",
     "@ice/runtime": "^1.2.4",
     "@swc/helpers": "^0.5.1",
     "antd": "^5.6.3",
     "react-activation": "^0.12.4",
-    "@knockout-js/api": "^0.0.3",
+    "react-draggable": "^4.4.5",
+    "@knockout-js/api": "^0.0.4-beta.0",
     "@knockout-js/ice-urql": "^0.0.3"
   },
   "devDependencies": {