@jetlinks-web/components 2.7.1 → 2.7.3

package/lib/ProLayout/SiderMenu/SiderMenu.js

@@ -17,7 +17,11 @@ var _vueTypes = _interopRequireDefault(require("ant-design-vue/lib/_util/vue-typ
 var _Icon = _interopRequireDefault(require("../../Icon"));
 var _RouteContext = require("../RouteContext");
 require("../typings");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0, _vue.isVNode)(s);
+}
 var siderMenuProps = exports.siderMenuProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, _defaultSettings.defaultSettingProps), _BaseMenu.baseMenuProps), {}, {
   logo: {
     type: [Object, String, Function],
@@ -150,7 +154,11 @@ var defaultRenderLogoAndTitle = exports.defaultRenderLogoAndTitle = function def
   if (layout === 'mix' && renderFunction === false) {
     return null;
   }
-  var titleDom = (0, _vue.createVNode)("h1", null, [title]);
+  var titleDom = (0, _vue.createVNode)("h1", null, _isSlot(title) ? title : {
+    default: function _default() {
+      return [title];
+    }
+  });
   if (renderKey === 'menuHeaderRender') {
     return null;
   }
@@ -160,7 +168,11 @@ var defaultRenderLogoAndTitle = exports.defaultRenderLogoAndTitle = function def
     return renderFunction(logoDom, props.collapsed ? null : titleDom, props);
   }
   if (Array.isArray(renderFunction)) {
-    return (0, _vue.createVNode)(_vue.Fragment, null, [renderFunction]);
+    return (0, _vue.createVNode)(_vue.Fragment, null, _isSlot(renderFunction) ? renderFunction : {
+      default: function _default() {
+        return [renderFunction];
+      }
+    });
   }
   return (0, _vue.createVNode)("a", null, [logoDom, props.collapsed ? null : titleDom]);
 };
@@ -172,6 +184,7 @@ var defaultRenderCollapsedButton = exports.defaultRenderCollapsedButton = functi
   }, null);
 };
 var SiderMenu = function SiderMenu(props) {
+  var _slot;
   var collapsed = props.collapsed,
     siderWidth = props.siderWidth,
     breakpoint = props.breakpoint,
@@ -272,9 +285,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 && (0, _vue.createVNode)("div", {
+      }, _isSlot(headerDom) ? headerDom : {
+        default: function _default() {
+          return [headerDom];
+        }
+      }), extraDom && (0, _vue.createVNode)("div", {
         "class": (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(baseClassName, "-extra"), true), "".concat(baseClassName, "-extra-no-logo"), !headerDom)
-      }, [extraDom]), (0, _vue.createVNode)("div", {
+      }, _isSlot(extraDom) ? extraDom : {
+        default: function _default() {
+          return [extraDom];
+        }
+      }), (0, _vue.createVNode)("div", {
         "class": "".concat(baseClassName, "-body"),
         "style": "flex: 1; overflow: hidden auto;"
       }, [props.layoutType !== _defaultSettings.LayoutType.CARD ? menuContentRender && menuContentRender(props, defaultMenuDom) || defaultMenuDom : null]), (0, _vue.createVNode)("div", {
@@ -291,17 +312,17 @@ var SiderMenu = function SiderMenu(props) {
             props.onCollapse(!props.collapsed);
           }
         }
+      }, _isSlot(_slot = (0, _vue.createVNode)(_lib.Menu.Item, {
+        "key": 'collapsed-button',
+        "class": "".concat(baseClassName, "-collapsed-button"),
+        "title": false
       }, {
         default: function _default() {
-          return [(0, _vue.createVNode)(_lib.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/lib/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/lib/ProLayout/TopHeader/index.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.topNavHeaderProps = exports.baseHeaderProps = exports.TopNavHeader = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _vue = require("vue");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _vcResizeObserver = _interopRequireDefault(require("ant-design-vue/lib/vc-resize-observer"));
@@ -17,6 +17,9 @@ var _RouteContext = require("../RouteContext");
 var _BaseMenu = _interopRequireDefault(require("../SiderMenu/BaseMenu"));
 var _util = require("../util");
 var _excluded = ["rightContentRender"];
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0, _vue.isVNode)(s);
+}
 var baseHeaderProps = exports.baseHeaderProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _defaultSettings.defaultSettingProps), {}, {
   prefixCls: _vueTypes.default.string.def('ant-pro'),
   collapsed: _vueTypes.default.looseBool,
@@ -143,7 +146,11 @@ var TopNavHeader = exports.TopNavHeader = function TopNavHeader(props) {
     "class": "".concat(prefixCls, "-logo"),
     "key": "logo",
     "id": "logo"
-  }, [headerDom])]), (0, _vue.createVNode)("div", {
+  }, _isSlot(headerDom) ? headerDom : {
+    default: function _default() {
+      return [headerDom];
+    }
+  })]), (0, _vue.createVNode)("div", {
     "style": {
       flex: 1
     },

package/lib/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/lib/ProLayout/style/default.less

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

package/lib/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/lib/ProLayout/util.js

@@ -14,14 +14,14 @@ function clearMenuItem(menusData) {
   return menusData.map(function (item) {
     var _finalItem$meta;
     var finalItem = (0, _objectSpread2.default)({}, 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 (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
           children: clearMenuItem(finalItem.children)
@@ -38,7 +38,7 @@ function flatMap(menusData) {
   return menusData.map(function (item) {
     var _finalItem$meta3;
     var finalItem = (0, _objectSpread2.default)({}, 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/lib/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 */))