@jetlinks-web/components 2.0.4 → 2.0.6

package/lib/ProLayout/PageContainer/index.js

@@ -14,7 +14,7 @@ var _antDesignVue = require("ant-design-vue");
 var _pageHeader = require("ant-design-vue/es/page-header");
 var _RouteContext = require("../RouteContext");
 var _util = require("../util");
-require("./index.less");
+var _vueTypes = _interopRequireDefault(require("ant-design-vue/es/_util/vue-types"));
 var _excluded = ["title", "tabList", "tabActiveKey", "content", "pageHeaderRender", "header", "extraContent", "prefixedClassName", "prefixCls", "fixedHeader", "showBack"];
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0, _vue.isVNode)(s);
@@ -62,7 +62,7 @@ var pageHeaderTabConfig = exports.pageHeaderTabConfig = {
 var pageContainerProps = exports.pageContainerProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, pageHeaderTabConfig), _pageHeader.pageHeaderProps), {}, {
   prefixCls: {
     type: String,
-    default: 'ant-pro'
+    default: _vueTypes.default.string.def('ant-pro')
   },
   title: {
     type: [Object, String, Boolean, Function],

package/lib/ProLayout/SiderMenu/BaseMenu.js

@@ -17,15 +17,14 @@ var _Icon = _interopRequireDefault(require("../../Icon"));
 var _utils = require("@jetlinks-web/utils");
 var _antDesignVue = require("ant-design-vue");
 var _iconsVue = require("@ant-design/icons-vue/lib/icons");
+require("ant-design-vue/es/_util/vue-types");
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0, _vue.isVNode)(s);
 }
 var baseMenuProps = exports.baseMenuProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _defaultSettings.defaultSettingProps), {}, {
   prefixCls: {
     type: String,
-    default: function _default() {
-      return _RouteContext.defaultPrefixCls;
-    }
+    default: _RouteContext.defaultPrefixCls
   },
   locale: {
     type: [Function, Boolean],

package/lib/ProLayout/SiderMenu/SiderMenu.js

@@ -112,12 +112,37 @@ var defaultRenderLogoAndTitle = exports.defaultRenderLogoAndTitle = function def
     logo = _props$logo === void 0 ? 'http://demo.jetlinks.cn/static/logo.760eb65c.png' : _props$logo,
     logoStyle = props.logoStyle,
     title = props.title,
-    layout = props.layout;
+    layout = props.layout,
+    apps = props.apps,
+    baseClassName = props.baseClassName;
+  var logoDom = defaultRenderLogo(logo, logoStyle);
   var renderFunction = props[renderKey || ''];
+  if (props.layoutType === _defaultSettings.LayoutType.CARD) {
+    return (0, _vue.createVNode)("a", null, [apps.length ? (0, _vue.createVNode)(_antDesignVue.Tooltip, {
+      "placement": "rightTop",
+      "color": "#fff",
+      "arrowPointAtCenter": true
+    }, {
+      default: function _default() {
+        return [logoDom];
+      },
+      title: function title() {
+        return apps.map(function (item) {
+          return (0, _vue.createVNode)("div", {
+            "class": "sider-app-menus"
+          }, [(0, _vue.createVNode)("div", {
+            "class": "sider-app-menus-item",
+            "onClick": function onClick() {
+              return props.onAppMenuClick(item);
+            }
+          }, [item.label])]);
+        });
+      }
+    }) : logoDom]);
+  }
   if (layout === 'mix' && renderFunction === false) {
     return null;
   }
-  var logoDom = defaultRenderLogo(logo, logoStyle);
   var titleDom = (0, _vue.createVNode)("h1", null, _isSlot(title) ? title : {
     default: function _default() {
       return [title];
@@ -182,9 +207,11 @@ var SiderMenu = function SiderMenu(props) {
       props.onSelect($event);
     }
   };
-  var headerDom = defaultRenderLogoAndTitle(props);
+  var headerDom = defaultRenderLogoAndTitle((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    baseClassName: baseClassName
+  }));
   var extraDom = menuExtraRender && menuExtraRender(props);
-  if (hasSplitMenu.value && (0, _vue.unref)(context.flatMenuData).length === 0) {
+  if (props.layoutType !== _defaultSettings.LayoutType.CARD && hasSplitMenu.value && (0, _vue.unref)(context.flatMenuData).length === 0) {
     return null;
   }
   var defaultMenuDom = (0, _vue.createVNode)(_BaseMenu.default, {
@@ -254,7 +281,7 @@ var SiderMenu = function SiderMenu(props) {
         }
       }), (0, _vue.createVNode)("div", {
         "style": "flex: 1; overflow: hidden auto;"
-      }, [menuContentRender && menuContentRender(props, defaultMenuDom) || defaultMenuDom]), (0, _vue.createVNode)("div", {
+      }, [props.layoutType === _defaultSettings.LayoutType.LIST ? menuContentRender && menuContentRender(props, defaultMenuDom) || defaultMenuDom : null]), (0, _vue.createVNode)("div", {
         "class": "".concat(baseClassName, "-links")
       }, [collapsedButtonRender !== false ? (0, _vue.createVNode)(_antDesignVue.Menu, {
         "class": "".concat(baseClassName, "-link-menu"),

package/lib/ProLayout/SiderMenu/index.less

@@ -1,212 +1,226 @@
-@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;
-        }
-    }
-
-    &-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;
-    }
-}
-
-@keyframes pro-layout-title-hide {
-    0% {
-        display: none;
-        opacity: 0;
-    }
-    80% {
-        display: none;
-        opacity: 0;
-    }
-    100% {
-        display: unset;
-        opacity: 1;
-    }
-}
+@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;
+        }
+    }
+
+    &-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/defaultSettings.js

@@ -1,9 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultSettings = exports.defaultSettingProps = void 0;
+exports.defaultSettings = exports.defaultSettingProps = exports.LayoutType = void 0;
+require("vue");
+var _vueTypes = _interopRequireDefault(require("ant-design-vue/es/_util/vue-types"));
 var defaultSettings = exports.defaultSettings = {
   theme: 'light',
   layout: 'mix',
@@ -18,6 +21,10 @@ var defaultSettings = exports.defaultSettings = {
   iconfontUrl: '',
   primaryColor: '#315EFB'
 };
+var LayoutType = exports.LayoutType = {
+  CARD: 'card',
+  LIST: 'list'
+};
 var defaultSettingProps = exports.defaultSettingProps = {
   theme: {
     type: String,
@@ -68,5 +75,36 @@ var defaultSettingProps = exports.defaultSettingProps = {
     default: function _default() {
       return defaultSettings.primaryColor;
     }
-  }
+  },
+  layoutType: {
+    type: String,
+    default: LayoutType.LIST
+  },
+  cardSiderWidth: {
+    type: Number,
+    default: 60
+  },
+  historyRoutes: {
+    type: Array,
+    default: function _default() {
+      return [];
+    }
+  },
+  historyActive: {
+    type: String,
+    default: undefined
+  },
+  pageFooterStyle: {
+    type: Object,
+    default: function _default() {
+      return undefined;
+    }
+  },
+  apps: {
+    type: Array,
+    default: function _default() {
+      return [];
+    }
+  },
+  onAppMenuClick: _vueTypes.default.func
 };

package/lib/ProLayout/index.js

@@ -4,6 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "LayoutType", {
+  enumerable: true,
+  get: function get() {
+    return _defaultSettings.LayoutType;
+  }
+});
 Object.defineProperty(exports, "PageContainer", {
   enumerable: true,
   get: function get() {
@@ -13,4 +19,8 @@ Object.defineProperty(exports, "PageContainer", {
 exports.default = void 0;
 var _BasicLayout = _interopRequireDefault(require("./Basic/BasicLayout"));
 var _PageContainer = _interopRequireDefault(require("./PageContainer"));
+var _defaultSettings = require("./defaultSettings");
+_BasicLayout.default.install = function (app) {
+  app.component(_BasicLayout.default.name, _BasicLayout.default);
+};
 var _default = exports.default = _BasicLayout.default;

package/lib/ProLayout/style/default.less

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

package/lib/ProTable/index.js

@@ -117,7 +117,7 @@ var tableProps = function tableProps() {
   });
 };
 var ProTable = (0, _vue.defineComponent)({
-  name: 'ProTable',
+  name: 'JProTable',
   slots: ['headerTitle', 'card', 'rightExtraRender', 'paginationRender' // 分页
   ],
   props: tableProps(),
@@ -414,4 +414,7 @@ var ProTable = (0, _vue.defineComponent)({
     };
   }
 });
+ProTable.install = function (app) {
+  app.component(ProTable.name, ProTable);
+};
 var _default2 = exports.default = ProTable;

package/lib/ProTable/style/index.css

@@ -1,3 +1,7 @@
+/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable */
+/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
 .jtable-body-spin {
   min-height: 100%;
   width: 100%;
@@ -35,7 +39,7 @@
   padding: 0 8px;
 }
 .jtable-body-spin .jtable-body .jtable-body-header .jtable-body-header-right .jtable-body-header-right-button .ant-radio-button-wrapper-checked .right-button-icon {
-  color: #315EFB;
+  color: #1890ff;
 }
 .jtable-body-spin .jtable-body .jtable-content {
   flex: 1;

package/lib/Scrollbar/index.js

@@ -6,4 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _Scrollbar = _interopRequireDefault(require("./Scrollbar.js"));
+_Scrollbar.default.install = function (app) {
+  app.component(_Scrollbar.default.name, _Scrollbar.default);
+};
 var _default = exports.default = _Scrollbar.default;