@jetlinks-web/components 2.7.1 → 2.7.2

package/es/ProLayout/SiderMenu/SiderMenu.js

@@ -1,6 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createVNode as _createVNode, createTextVNode as _createTextVNode, Fragment as _Fragment } from "vue";
+import { createVNode as _createVNode, resolveDirective as _resolveDirective, createTextVNode as _createTextVNode, isVNode as _isVNode, Fragment as _Fragment } from "vue";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { LayoutSider as Sider, Menu, Tooltip } from 'ant-design-vue/es/';
 import BaseMenu, { baseMenuProps } from './BaseMenu';
@@ -10,6 +10,9 @@ import IconFont from '../../Icon';
 import { useRouteContext } from '../RouteContext';
 import { computed, unref } from 'vue';
 import "../typings";
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
+}
 export var siderMenuProps = _objectSpread(_objectSpread(_objectSpread({}, defaultSettingProps), baseMenuProps), {}, {
   logo: {
     type: [Object, String, Function],
@@ -142,7 +145,11 @@ export var defaultRenderLogoAndTitle = function defaultRenderLogoAndTitle(props)
   if (layout === 'mix' && renderFunction === false) {
     return null;
   }
-  var titleDom = _createVNode("h1", null, [title]);
+  var titleDom = _createVNode("h1", null, _isSlot(title) ? title : {
+    default: function _default() {
+      return [title];
+    }
+  });
   if (renderKey === 'menuHeaderRender') {
     return null;
   }
@@ -152,7 +159,11 @@ export var defaultRenderLogoAndTitle = function defaultRenderLogoAndTitle(props)
     return renderFunction(logoDom, props.collapsed ? null : titleDom, props);
   }
   if (Array.isArray(renderFunction)) {
-    return _createVNode(_Fragment, null, [renderFunction]);
+    return _createVNode(_Fragment, null, _isSlot(renderFunction) ? renderFunction : {
+      default: function _default() {
+        return [renderFunction];
+      }
+    });
   }
   return _createVNode("a", null, [logoDom, props.collapsed ? null : titleDom]);
 };
@@ -164,6 +175,7 @@ export var defaultRenderCollapsedButton = function defaultRenderCollapsedButton(
   }, null);
 };
 var SiderMenu = function SiderMenu(props) {
+  var _slot;
   var collapsed = props.collapsed,
     siderWidth = props.siderWidth,
     breakpoint = props.breakpoint,
@@ -264,9 +276,17 @@ var SiderMenu = function SiderMenu(props) {
         "onClick": props.layout !== 'mix' ? props.onMenuHeaderClick : undefined,
         "id": "logo",
         "style": props === null || props === void 0 ? void 0 : props.logoStyle
-      }, [headerDom]), extraDom && _createVNode("div", {
+      }, _isSlot(headerDom) ? headerDom : {
+        default: function _default() {
+          return [headerDom];
+        }
+      }), extraDom && _createVNode("div", {
         "class": _defineProperty(_defineProperty({}, "".concat(baseClassName, "-extra"), true), "".concat(baseClassName, "-extra-no-logo"), !headerDom)
-      }, [extraDom]), _createVNode("div", {
+      }, _isSlot(extraDom) ? extraDom : {
+        default: function _default() {
+          return [extraDom];
+        }
+      }), _createVNode("div", {
         "class": "".concat(baseClassName, "-body"),
         "style": "flex: 1; overflow: hidden auto;"
       }, [props.layoutType !== LayoutType.CARD ? menuContentRender && menuContentRender(props, defaultMenuDom) || defaultMenuDom : null]), _createVNode("div", {
@@ -283,17 +303,17 @@ var SiderMenu = function SiderMenu(props) {
             props.onCollapse(!props.collapsed);
           }
         }
+      }, _isSlot(_slot = _createVNode(Menu.Item, {
+        "key": 'collapsed-button',
+        "class": "".concat(baseClassName, "-collapsed-button"),
+        "title": false
       }, {
         default: function _default() {
-          return [_createVNode(Menu.Item, {
-            "key": 'collapsed-button',
-            "class": "".concat(baseClassName, "-collapsed-button"),
-            "title": false
-          }, {
-            default: function _default() {
-              return [collapsedButtonRender && typeof collapsedButtonRender === 'function' ? collapsedButtonRender(collapsed) : collapsedButtonRender];
-            }
-          })];
+          return [collapsedButtonRender && typeof collapsedButtonRender === 'function' ? collapsedButtonRender(collapsed) : collapsedButtonRender];
+        }
+      })) ? _slot : {
+        default: function _default() {
+          return [_slot];
         }
       }) : null])];
     }

package/es/ProLayout/SiderMenu/index.less

@@ -0,0 +1,231 @@
+@import '../style/default.less';
+
+@pro-layout-sider-menu-prefix-cls: ~'@{ant-prefix}-pro-sider';
+
+@nav-header-height: @pro-layout-header-height;
+
+.@{pro-layout-sider-menu-prefix-cls} {
+    position: relative;
+    background-color: @layout-sider-background;
+    border-right: 0;
+    // FIXME: 临时修正(可能不会做兼容)
+    z-index: 20;
+
+    // 这里关掉了动画，不然使用无法兼容
+    .@{ant-prefix}-menu {
+        background: transparent;
+    }
+
+    &.@{ant-prefix}-layout-sider-light {
+        .@{ant-prefix}-menu-item a {
+            color: @heading-color;
+        }
+        .@{ant-prefix}-menu-item-selected a,
+        .@{ant-prefix}-menu-item a:hover {
+            color: @primary-color;
+        }
+    }
+
+    &-logo {
+        position: relative;
+        display: flex;
+        align-items: center;
+        padding: 16px 16px;
+        cursor: pointer;
+        transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+        > a {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 32px;
+        }
+
+        img {
+            display: inline-block;
+            height: 32px;
+            vertical-align: middle;
+        }
+
+        h1 {
+            display: inline-block;
+            height: 32px;
+            margin: 0 0 0 12px;
+            color: white;
+            font-weight: 600;
+            font-size: 18px;
+            line-height: 32px;
+            vertical-align: middle;
+            animation: pro-layout-title-hide 0.3s;
+        }
+    }
+
+    &-logo-card {
+      padding: 16px 0;
+      justify-content: center;
+    }
+
+    &-extra {
+        margin-bottom: 16px;
+        padding: 0 16px;
+        &-no-logo {
+            margin-top: 16px;
+        }
+    }
+
+    &-menu {
+        position: relative;
+        z-index: 10;
+        min-height: 100%;
+        box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+    }
+
+    .@{ant-prefix}-layout-sider-children {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+
+        ::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.15);
+            border-radius: 3px;
+            box-shadow: inset 0 0 5px rgba(37, 37, 37, 0.05);
+        }
+
+        /* 滚动条滑块 */
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 3px;
+            box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.05);
+        }
+    }
+
+    &.@{ant-prefix}-layout-sider-collapsed {
+        .@{ant-prefix}-menu-inline-collapsed {
+            width: 48px;
+        }
+        .@{pro-layout-sider-menu-prefix-cls} {
+            &-logo {
+                padding: 16px 8px;
+            }
+        }
+    }
+
+    &.@{ant-prefix}-layout-sider.@{pro-layout-sider-menu-prefix-cls}-fixed {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 99; // react pro-components: z-index: 100;
+        height: 100%;
+        overflow: auto;
+        overflow-x: hidden;
+        box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
+        > .@{ant-prefix}-menu-root {
+            :not(.@{pro-layout-sider-menu-prefix-cls}-link-menu) {
+                height: ~'calc(100vh - @{nav-header-height})';
+                overflow-y: auto;
+            }
+        }
+    }
+
+    &-light {
+        background-color: @component-background;
+        box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
+
+        .@{ant-prefix}-layout-sider-children {
+            ::-webkit-scrollbar-track {
+                background: rgba(0, 0, 0, 0.06);
+                border-radius: 3px;
+                box-shadow: inset 0 0 5px rgba(0, 21, 41, 0.05);
+            }
+
+            /* 滚动条滑块 */
+            ::-webkit-scrollbar-thumb {
+                background: rgba(0, 0, 0, 0.12);
+                border-radius: 3px;
+                box-shadow: inset 0 0 5px rgba(0, 21, 41, 0.05);
+            }
+        }
+
+        .@{pro-layout-sider-menu-prefix-cls}-logo {
+            h1 {
+                color: @primary-color;
+            }
+        }
+        .@{ant-prefix}-menu-light {
+            border-right-color: transparent;
+        }
+
+        .@{pro-layout-sider-menu-prefix-cls}-collapsed-button {
+            border-top: @border-width-base @border-style-base
+                @border-color-split;
+        }
+    }
+
+    &-icon {
+        width: 14px;
+        vertical-align: baseline;
+    }
+
+    &-links {
+        width: 100%;
+        ul.@{ant-prefix}-menu-root {
+            height: auto;
+        }
+    }
+
+    &-collapsed-button {
+        border-top: @border-width-base @border-style-base rgba(0, 0, 0, 0.25);
+        .anticon {
+            font-size: 16px;
+        }
+    }
+
+    .top-nav-menu li.@{ant-prefix}-menu-item {
+        height: 100%;
+        line-height: 1;
+    }
+    .drawer .drawer-content {
+        background: @layout-sider-background;
+    }
+}
+
+// 修正菜单 collapsed 时，icon 与 title 的间距
+.@{ant-prefix}-pro-menu-item {
+    .anticon + .@{ant-prefix}-pro-menu-item-title {
+        margin-left: 10px;
+    }
+}
+
+.sider-app-menus {
+  width: 100px;
+  background-color: #fff;
+  cursor: pointer;
+  padding: 6px;
+  transition: all .3s;
+  border-radius: 4px;
+  color: #333;
+
+  &:hover {
+    background-color: #efefef;
+  }
+}
+
+@keyframes pro-layout-title-hide {
+    0% {
+        display: none;
+        opacity: 0;
+    }
+    80% {
+        display: none;
+        opacity: 0;
+    }
+    100% {
+        display: unset;
+        opacity: 1;
+    }
+}

package/es/ProLayout/TopHeader/index.js

@@ -1,3 +1,4 @@
+import { isVNode as _isVNode } from "vue";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { createVNode as _createVNode } from "vue";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
@@ -11,6 +12,9 @@ import { defaultSettingProps, LayoutType } from '../defaultSettings';
 import { defaultPrefixCls, useRouteContext } from '../RouteContext';
 import BaseMenu from '../SiderMenu/BaseMenu';
 import { clearMenuItem } from '../util';
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
+}
 export var baseHeaderProps = _objectSpread(_objectSpread({}, defaultSettingProps), {}, {
   prefixCls: PropTypes.string.def('ant-pro'),
   collapsed: PropTypes.looseBool,
@@ -137,7 +141,11 @@ export var TopNavHeader = function TopNavHeader(props) {
     "class": "".concat(prefixCls, "-logo"),
     "key": "logo",
     "id": "logo"
-  }, [headerDom])]), _createVNode("div", {
+  }, _isSlot(headerDom) ? headerDom : {
+    default: function _default() {
+      return [headerDom];
+    }
+  })]), _createVNode("div", {
     "style": {
       flex: 1
     },

package/es/ProLayout/TopHeader/index.less

@@ -0,0 +1,174 @@
+@import '../style/default.less';
+
+@top-nav-header-prefix-cls: ~'@{ant-prefix}-pro-top-nav-header';
+@pro-layout-global-header-prefix-cls: ~'@{ant-prefix}-pro-global-header';
+
+@pro-layout-header-bg: @component-background;
+@pro-layout-header-hover-bg: @component-background;
+@pro-layout-header-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+
+.@{pro-layout-global-header-prefix-cls} {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 16px;
+    background: @pro-layout-header-bg;
+    box-shadow: @pro-layout-header-box-shadow;
+    > * {
+        height: 100%;
+    }
+
+    &-collapsed-button {
+        display: flex;
+        align-items: center;
+        margin-left: 16px;
+        font-size: 20px;
+    }
+
+    &-layout {
+        &-mix {
+            background-color: @layout-sider-background;
+            .@{pro-layout-global-header-prefix-cls}-logo {
+                h1 {
+                    color: @btn-primary-color;
+                }
+            }
+            .anticon {
+                color: @btn-primary-color;
+            }
+        }
+    }
+
+    &-logo {
+        position: relative;
+        overflow: hidden;
+        a {
+            display: flex;
+            align-items: center;
+            height: 100%;
+            img {
+                height: 28px;
+            }
+            h1 {
+                height: 32px;
+                margin: 0 0 0 8px;
+                margin: 0 0 0 12px;
+                color: @primary-color;
+                font-weight: 600;
+                font-size: 18px;
+                line-height: 32px;
+            }
+        }
+    }
+
+    &-menu {
+        .anticon {
+            margin-right: 8px;
+        }
+        .@{ant-prefix}-dropdown-menu-item {
+            min-width: 160px;
+        }
+    }
+
+    .dark {
+        height: @pro-layout-header-height;
+        .action {
+            color: rgba(255, 255, 255, 0.85);
+            > i {
+                color: rgba(255, 255, 255, 0.85);
+            }
+            &:hover,
+            &.opened {
+                background: @primary-color;
+            }
+            .@{ant-prefix}-badge {
+                color: rgba(255, 255, 255, 0.85);
+            }
+        }
+    }
+}
+
+.@{top-nav-header-prefix-cls} {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    box-shadow: 0 1px 4px 0 rgba(0, 21, 41, 0.12);
+    transition: background 0.3s, width 0.2s;
+
+    .@{ant-prefix}-menu {
+        background: transparent;
+    }
+
+    &.light {
+        background-color: @component-background;
+        .@{top-nav-header-prefix-cls}-logo {
+            h1 {
+                color: @heading-color;
+            }
+        }
+        .anticon {
+            color: inherit;
+        }
+    }
+
+    &-main {
+        display: flex;
+        height: 100%;
+        padding-left: 16px;
+        &-left {
+            display: flex;
+            min-width: 192px;
+        }
+    }
+
+    .anticon {
+        color: @btn-primary-color;
+    }
+
+    &-logo {
+        position: relative;
+        min-width: 165px;
+        height: 100%;
+        overflow: hidden;
+
+        img {
+            display: inline-block;
+            height: 32px;
+            vertical-align: middle;
+        }
+
+        h1 {
+            display: inline-block;
+            margin: 0 0 0 12px;
+            color: @btn-primary-color;
+            font-weight: 600;
+            font-size: 16px;
+            vertical-align: top;
+        }
+    }
+
+    &-menu {
+        min-width: 0;
+
+        .@{ant-prefix}-menu.@{ant-prefix}-menu-horizontal {
+            height: 100%;
+            border: none;
+
+            .@{ant-prefix}-menu-item {
+                height: 100%;
+
+                .@{ant-prefix}-badge {
+                    color: unset;
+                }
+            }
+        }
+    }
+}
+
+// replace sub.item
+.@{ant-prefix}-pro-menu-popup {
+    .@{ant-prefix}-badge {
+        color: unset;
+    }
+}

package/es/ProLayout/style/default.less

@@ -0,0 +1,4 @@
+@import 'ant-design-vue/es/style/themes/index.less';
+
+@basicLayout-prefix-cls: ~'@{ant-prefix}-pro-basicLayout';
+@pro-layout-header-height: 48px;

package/es/ProLayout/style/style.less

@@ -0,0 +1,7 @@
+@import './default.less';
+
+@import '../Basic/BasicLayout.less';
+@import '../Basic/Header.less';
+@import '../PageContainer/index.less';
+@import '../SiderMenu/index.less';
+@import '../TopHeader/index.less';

package/es/ProLayout/util.js

@@ -3,14 +3,14 @@ export function clearMenuItem(menusData) {
   return menusData.map(function (item) {
     var _finalItem$meta;
     var finalItem = _objectSpread({}, item);
-    if ((_finalItem$meta = finalItem.meta) !== null && _finalItem$meta !== void 0 && _finalItem$meta.hideInMenu) {
+    if ((_finalItem$meta = finalItem.meta) === null || _finalItem$meta === void 0 ? void 0 : _finalItem$meta.hideInMenu) {
       return null;
     }
-    if (finalItem && finalItem !== null && finalItem !== void 0 && finalItem.children) {
+    if (finalItem && (finalItem === null || finalItem === void 0 ? void 0 : finalItem.children)) {
       var _finalItem$meta2;
-      if (!((_finalItem$meta2 = finalItem.meta) !== null && _finalItem$meta2 !== void 0 && _finalItem$meta2.hideChildInMenu) && finalItem.children.some(function (child) {
+      if (!((_finalItem$meta2 = finalItem.meta) === null || _finalItem$meta2 === void 0 ? void 0 : _finalItem$meta2.hideChildInMenu) && finalItem.children.some(function (child) {
         var _child$meta;
-        return child && child.name && !((_child$meta = child.meta) !== null && _child$meta !== void 0 && _child$meta.hideInMenu);
+        return child && child.name && !((_child$meta = child.meta) === null || _child$meta === void 0 ? void 0 : _child$meta.hideInMenu);
       })) {
         return _objectSpread(_objectSpread({}, item), {}, {
           children: clearMenuItem(finalItem.children)
@@ -27,7 +27,7 @@ export function flatMap(menusData) {
   return menusData.map(function (item) {
     var _finalItem$meta3;
     var finalItem = _objectSpread({}, item);
-    if (!finalItem.name || (_finalItem$meta3 = finalItem.meta) !== null && _finalItem$meta3 !== void 0 && _finalItem$meta3.hideInMenu) {
+    if (!finalItem.name || ((_finalItem$meta3 = finalItem.meta) === null || _finalItem$meta3 === void 0 ? void 0 : _finalItem$meta3.hideInMenu)) {
       return null;
     }
     if (finalItem.children) {

package/es/ProTable/Content.js

@@ -41,7 +41,7 @@ function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]
   "handleCheckedAllChange": "setup-const"
 } */
 import { defineComponent as _defineComponent } from 'vue';
-import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderList as _renderList, Fragment as _Fragment, mergeProps as _mergeProps, renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, normalizeProps as _normalizeProps, createSlots as _createSlots, createBlock as _createBlock } from "vue";
+import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderList as _renderList, Fragment as _Fragment, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, mergeProps as _mergeProps, createSlots as _createSlots, createBlock as _createBlock } from "vue";
 const _hoisted_1 = { class: "jtable-box" };
 const _hoisted_2 = {
     key: 0,
@@ -147,7 +147,7 @@ const __sfc_main__ = _defineComponent({
                                         key: item[props.rowKey],
                                         onClick: ($event) => (onClick(item))
                                     }, [
-                                        _renderSlot(_ctx.$slots, "card", _mergeProps({ ref_for: true }, item))
+                                        _renderSlot(_ctx.$slots, "card", _normalizeProps(_guardReactiveProps(item)))
                                     ], 10 /* CLASS, PROPS */, _hoisted_4));
                                 }), 128 /* KEYED_FRAGMENT */))
                             ], 4 /* STYLE */))