@jetlinks-web/components 2.0.2 → 2.0.3

package/lib/ProLayout/SiderMenu/index.less

@@ -0,0 +1,212 @@
+@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;
+    }
+}

package/lib/ProLayout/SiderMenu/typings.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/ProLayout/TopHeader/index.js

@@ -0,0 +1,168 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.topNavHeaderProps = exports.baseHeaderProps = exports.TopNavHeader = void 0;
+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/es/vc-resize-observer"));
+var _SiderMenu = require("../SiderMenu/SiderMenu");
+var _vueTypes = _interopRequireDefault(require("ant-design-vue/es/_util/vue-types"));
+var _defaultSettings = require("../defaultSettings");
+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,
+  logo: _SiderMenu.siderMenuProps.logo,
+  logoStyle: _SiderMenu.siderMenuProps.logoStyle,
+  headerTheme: {
+    type: String,
+    default: 'dark'
+  },
+  menuData: {
+    type: Array,
+    default: function _default() {
+      return [];
+    }
+  },
+  splitMenus: _SiderMenu.siderMenuProps.splitMenus,
+  menuRender: {
+    type: [Object, Function],
+    default: function _default() {
+      return undefined;
+    }
+  },
+  menuHeaderRender: _SiderMenu.siderMenuProps.menuHeaderRender,
+  menuItemRender: _SiderMenu.siderMenuProps.menuItemRender,
+  subMenuItemRender: _SiderMenu.siderMenuProps.subMenuItemRender,
+  rightContentRender: {
+    type: [Object, Function],
+    default: function _default() {
+      return undefined;
+    }
+  },
+  collapsedButtonRender: _SiderMenu.siderMenuProps.collapsedButtonRender,
+  matchMenuKeys: _SiderMenu.siderMenuProps.matchMenuKeys,
+  // events
+  onMenuHeaderClick: _vueTypes.default.func,
+  onCollapse: _SiderMenu.siderMenuProps.onCollapse,
+  onOpenKeys: _SiderMenu.siderMenuProps.onOpenKeys,
+  onSelect: _SiderMenu.siderMenuProps.onSelect
+});
+var topNavHeaderProps = exports.topNavHeaderProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _SiderMenu.siderMenuProps), baseHeaderProps);
+var RightContent = function RightContent(_ref) {
+  var rightContentRender = _ref.rightContentRender,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var rightSize = (0, _vue.ref)('auto');
+  return (0, _vue.createVNode)("div", {
+    "style": {
+      minWidth: rightSize.value
+    }
+  }, [(0, _vue.createVNode)("div", {
+    "style": {
+      paddingRight: 8
+    }
+  }, [(0, _vue.createVNode)(_vcResizeObserver.default, {
+    "onResize": function onResize(_ref2) {
+      var width = _ref2.width;
+      rightSize.value = width;
+    }
+  }, {
+    default: function _default() {
+      return [rightContentRender && typeof rightContentRender === 'function' ? (0, _vue.createVNode)("div", null, [rightContentRender((0, _objectSpread2.default)({}, props))]) : rightContentRender];
+    }
+  })])]);
+};
+var TopNavHeader = exports.TopNavHeader = function TopNavHeader(props) {
+  var headerRef = (0, _vue.ref)();
+  var propPrefixCls = props.prefixCls,
+    onMenuHeaderClick = props.onMenuHeaderClick,
+    onOpenKeys = props.onOpenKeys,
+    onSelect = props.onSelect,
+    contentWidth = props.contentWidth,
+    rightContentRender = props.rightContentRender,
+    layout = props.layout,
+    menuData = props.menuData,
+    mode = props.mode;
+  var context = (0, _RouteContext.useRouteContext)();
+  var prefixCls = "".concat(propPrefixCls || _RouteContext.defaultPrefixCls, "-top-nav-header");
+  var headerDom = (0, _SiderMenu.defaultRenderLogoAndTitle)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    collapsed: false
+  }),
+  // REMARK:: Any time render header title
+  // layout === 'mix' ? 'headerTitleRender' : undefined,
+  // layout !== 'side' ? 'headerTitleRender' : undefined,
+  'headerTitleRender');
+  //
+  var MenusData = props.layout === 'side' ? [] : menuData;
+  if (props.layout === 'mix' && props.splitMenus) {
+    var noChildrenMenuData = (menuData || []).map(function (item) {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+        children: undefined,
+        component: undefined
+      });
+    });
+    MenusData = (0, _util.clearMenuItem)(noChildrenMenuData);
+  }
+  var _mode = (0, _vue.computed)(function () {
+    return props.layout === 'mix' && props.splitMenus ? 'horizontal' : mode;
+  });
+  var className = (0, _vue.computed)(function () {
+    return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, prefixCls, true), "light", props.theme === 'light'), "dark", props.theme === 'dark');
+  });
+  return (0, _vue.createVNode)("div", {
+    "class": className.value
+  }, [(0, _vue.createVNode)("div", {
+    "ref": headerRef,
+    "class": "".concat(prefixCls, "-main ").concat(contentWidth === 'Fixed' ? 'wide' : '')
+  }, [headerDom && (0, _vue.createVNode)("div", {
+    "class": "".concat(prefixCls, "-main-left"),
+    "onClick": onMenuHeaderClick
+  }, [(0, _vue.createVNode)("div", {
+    "class": "".concat(prefixCls, "-logo"),
+    "key": "logo",
+    "id": "logo"
+  }, _isSlot(headerDom) ? headerDom : {
+    default: function _default() {
+      return [headerDom];
+    }
+  })]), (0, _vue.createVNode)("div", {
+    "style": {
+      flex: 1
+    },
+    "class": "".concat(prefixCls, "-menu")
+  }, [(0, _vue.createVNode)(_BaseMenu.default, {
+    "prefixCls": propPrefixCls,
+    "locale": props.locale || context.locale,
+    "theme": props.theme,
+    "mode": _mode.value,
+    "collapsed": props.collapsed,
+    "iconfontUrl": props.iconfontUrl,
+    "menuData": MenusData,
+    "menuItemRender": props.menuItemRender,
+    "subMenuItemRender": props.subMenuItemRender,
+    "openKeys": context.openKeys,
+    "selectedKeys": context.selectedKeys,
+    "class": {
+      'top-nav-menu': props.mode === 'horizontal'
+    },
+    'onUpdate:openKeys': function onUpdateOpenKeys($event) {
+      return onOpenKeys && onOpenKeys($event);
+    },
+    'onUpdate:selectedKeys': function onUpdateSelectedKeys($event) {
+      return onSelect && onSelect($event);
+    }
+  }, null)]), rightContentRender && (0, _vue.createVNode)(RightContent, (0, _objectSpread2.default)({
+    "rightContentRender": rightContentRender
+  }, props), null)])]);
+};

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/defaultSettings.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultSettings = exports.defaultSettingProps = void 0;
+var defaultSettings = exports.defaultSettings = {
+  theme: 'light',
+  layout: 'mix',
+  contentWidth: 'Fluid',
+  fixedHeader: true,
+  fixSiderbar: true,
+  menu: {
+    locale: true
+  },
+  headerHeight: 48,
+  title: 'Jetlink UI Components',
+  iconfontUrl: '',
+  primaryColor: '#315EFB'
+};
+var defaultSettingProps = exports.defaultSettingProps = {
+  theme: {
+    type: String,
+    default: defaultSettings.theme
+  },
+  layout: {
+    type: String,
+    default: defaultSettings.layout
+  },
+  contentWidth: {
+    type: String,
+    default: defaultSettings.contentWidth
+  },
+  fixedHeader: {
+    type: Boolean,
+    default: defaultSettings.fixedHeader
+  },
+  fixSiderbar: {
+    type: Boolean,
+    default: defaultSettings.fixSiderbar
+  },
+  menu: {
+    type: Object,
+    default: function _default() {
+      return {
+        locale: true
+      };
+    }
+  },
+  headerHeight: {
+    type: Number,
+    default: defaultSettings.headerHeight
+  },
+  title: {
+    type: String,
+    default: function _default() {
+      return defaultSettings.title;
+    }
+  },
+  iconfontUrl: {
+    type: String,
+    default: function _default() {
+      return defaultSettings.iconfontUrl;
+    }
+  },
+  primaryColor: {
+    type: String,
+    default: function _default() {
+      return defaultSettings.primaryColor;
+    }
+  }
+};

package/lib/ProLayout/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PageContainer", {
+  enumerable: true,
+  get: function get() {
+    return _PageContainer.default;
+  }
+});
+exports.default = void 0;
+var _BasicLayout = _interopRequireDefault(require("./Basic/BasicLayout"));
+var _PageContainer = _interopRequireDefault(require("./PageContainer"));
+var _default = exports.default = _BasicLayout.default;

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

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./style.less");

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/typings.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});