@jetlinks-web/components 2.0.2 → 2.0.3

package/lib/ProLayout/PageContainer/index.js

@@ -0,0 +1,327 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pageHeaderTabConfig = exports.pageContainerProps = exports.default = 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 _type = require("ant-design-vue/es/_util/type");
+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 _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);
+}
+var pageHeaderTabConfig = exports.pageHeaderTabConfig = {
+  /**
+   * @name tabs 的列表
+   */
+  tabList: {
+    type: [Object, Function, Array],
+    default: function _default() {
+      return undefined;
+    }
+  },
+  /**
+   * @name 当前选中 tab 的 key
+   */
+  tabActiveKey: String,
+  /**
+   * @name tab 上多余的区域
+   */
+  tabBarExtraContent: {
+    type: [Object, Function],
+    default: function _default() {
+      return undefined;
+    }
+  },
+  /**
+   * @name tabs 的其他配置
+   */
+  tabProps: {
+    type: Object,
+    default: function _default() {
+      return undefined;
+    }
+  },
+  /**
+   * @name 固定 PageHeader 到页面顶部
+   */
+  fixedHeader: Boolean,
+  // events
+  onTabChange: Function,
+  pure: Boolean
+};
+var pageContainerProps = exports.pageContainerProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, pageHeaderTabConfig), _pageHeader.pageHeaderProps), {}, {
+  prefixCls: {
+    type: String,
+    default: 'ant-pro'
+  },
+  title: {
+    type: [Object, String, Boolean, Function],
+    default: function _default() {
+      return null;
+    }
+  },
+  subTitle: {
+    type: [Object, String, Boolean, Function],
+    default: function _default() {
+      return null;
+    }
+  },
+  content: {
+    type: [Object, String, Boolean, Function],
+    default: function _default() {
+      return null;
+    }
+  },
+  extra: {
+    type: [Object, String, Boolean, Function],
+    default: function _default() {
+      return null;
+    }
+  },
+  extraContent: {
+    type: [Object, String, Boolean, Function],
+    default: function _default() {
+      return null;
+    }
+  },
+  header: {
+    type: [Object, String, Boolean, Function],
+    default: function _default() {
+      return null;
+    }
+  },
+  pageHeaderRender: {
+    type: [Object, Function, Boolean],
+    default: function _default() {
+      return undefined;
+    }
+  },
+  affixProps: {
+    type: [Object, Function]
+  },
+  ghost: {
+    type: Boolean,
+    default: function _default() {
+      return false;
+    }
+  },
+  loading: {
+    type: Boolean,
+    default: function _default() {
+      return undefined;
+    }
+  },
+  childrenFullHeight: {
+    type: Boolean,
+    default: function _default() {
+      return true;
+    }
+  },
+  pure: {
+    type: Boolean,
+    default: false
+  },
+  showBack: {
+    type: Boolean,
+    default: false
+  },
+  contentStyle: {
+    type: Object,
+    default: function _default() {
+      return {};
+    }
+  }
+});
+var renderFooter = function renderFooter(props) {
+  var tabList = props.tabList,
+    tabActiveKey = props.tabActiveKey,
+    onTabChange = props.onTabChange,
+    tabBarExtraContent = props.tabBarExtraContent,
+    tabProps = props.tabProps;
+  var tabPane = function tabPane(item) {
+    return (0, _vue.createVNode)("span", {
+      "class": item.class || "tab-pane-".concat(item.key)
+    }, [item.tab]);
+  };
+  if (tabList && tabList.length) {
+    var _slot;
+    return (0, _vue.createVNode)(_antDesignVue.Tabs, (0, _objectSpread2.default)({
+      "class": "page-container-tabs",
+      "activeKey": tabActiveKey,
+      "onChange": function onChange(key) {
+        if (onTabChange) {
+          onTabChange(key);
+        }
+      },
+      "tabBarExtraContent": tabBarExtraContent
+    }, tabProps), _isSlot(_slot = tabList.map(function (item) {
+      return (0, _vue.createVNode)(_antDesignVue.Tabs.TabPane, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+        "tab": tabPane(item),
+        "key": item.key
+      }), null);
+    })) ? _slot : {
+      default: function _default() {
+        return [_slot];
+      }
+    });
+  }
+  return null;
+};
+var renderPageHeader = function renderPageHeader(content, extraContent, prefixedClassName) {
+  if (!content && !extraContent) {
+    return null;
+  }
+  return (0, _vue.createVNode)("div", {
+    "class": "".concat(prefixedClassName, "-detail")
+  }, [(0, _vue.createVNode)("div", {
+    "class": "".concat(prefixedClassName, "-main")
+  }, [(0, _vue.createVNode)("div", {
+    "class": "".concat(prefixedClassName, "-row")
+  }, [content && (0, _vue.createVNode)("div", {
+    "class": "".concat(prefixedClassName, "-content")
+  }, [
+  // @ts-ignore
+  typeof content === 'function' && content() || content]), extraContent && (0, _vue.createVNode)("div", {
+    "class": "".concat(prefixedClassName, "-extraContent")
+  }, [
+  // @ts-ignore
+  typeof extraContent === 'function' && extraContent() || extraContent])])])]);
+};
+var ProPageHeader = function ProPageHeader(props) {
+  var title = props.title,
+    tabList = props.tabList,
+    tabActiveKey = props.tabActiveKey,
+    content = props.content,
+    pageHeaderRender = props.pageHeaderRender,
+    header = props.header,
+    extraContent = props.extraContent,
+    prefixedClassName = props.prefixedClassName,
+    prefixCls = props.prefixCls,
+    _ = props.fixedHeader,
+    showBack = props.showBack,
+    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var value = (0, _RouteContext.useRouteContext)();
+  if (pageHeaderRender === false) {
+    return null;
+  }
+  if (pageHeaderRender) {
+    return pageHeaderRender((0, _objectSpread2.default)({}, props));
+  }
+  var pageHeaderTitle = title;
+  if (!title && title !== false) {
+    pageHeaderTitle = value.title;
+  }
+  var unrefBreadcrumb = (0, _vue.unref)(value.breadcrumb || {});
+  var breadcrumb = props.breadcrumb || (0, _objectSpread2.default)((0, _objectSpread2.default)({}, unrefBreadcrumb), {}, {
+    routes: unrefBreadcrumb.routes,
+    itemRender: unrefBreadcrumb.itemRender
+  });
+  var backProps = {};
+  if (showBack) {
+    // @ts-ignore
+    backProps.backIcon = (0, _vue.createVNode)(_antDesignVue.Button, null, {
+      default: function _default() {
+        return [(0, _vue.createTextVNode)("\u8FD4\u56DE")];
+      }
+    });
+    backProps.onBack = function () {
+      var _value$back;
+      (_value$back = value.back) === null || _value$back === void 0 ? void 0 : _value$back.call(value);
+    };
+  }
+  return (0, _vue.createVNode)("div", {
+    "class": "".concat(prefixedClassName, "-wrap")
+  }, [(0, _vue.createVNode)(_antDesignVue.PageHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, backProps), restProps), {}, {
+    "title": pageHeaderTitle,
+    "breadcrumb": breadcrumb,
+    "footer": renderFooter((0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
+      tabList: tabList,
+      tabActiveKey: tabActiveKey
+    })),
+    "prefixCls": prefixCls
+  }), {
+    default: function _default() {
+      return [header || renderPageHeader(content, extraContent, prefixedClassName)];
+    }
+  })]);
+};
+var PageContainer = (0, _vue.defineComponent)({
+  name: 'JPageContainer',
+  inheritAttrs: false,
+  props: pageContainerProps,
+  setup: function setup(props, _ref) {
+    var slots = _ref.slots,
+      attrs = _ref.attrs;
+    var _toRefs = (0, _vue.toRefs)(props),
+      loading = _toRefs.loading,
+      affixProps = _toRefs.affixProps,
+      ghost = _toRefs.ghost,
+      childrenFullHeight = _toRefs.childrenFullHeight;
+    var value = (0, _RouteContext.useRouteContext)();
+    var getPrefixCls = value.getPrefixCls;
+    var prefixCls = props.prefixCls || getPrefixCls();
+    var prefixedClassName = (0, _vue.computed)(function () {
+      return "".concat(prefixCls, "-page-container");
+    });
+    var classNames = (0, _vue.computed)(function () {
+      return (0, _defineProperty2.default)((0, _defineProperty2.default)({}, prefixedClassName.value, true), "".concat(prefixCls, "-page-container-ghost"), ghost.value);
+    });
+    var headerDom = (0, _vue.computed)(function () {
+      // const tags = getSlotVNode<DefaultPropRender>(slots, props, 'tags');
+      var headerContent = (0, _util.getSlotVNode)(slots, props, 'content');
+      var extra = (0, _util.getSlotVNode)(slots, props, 'extra');
+      var extraContent = (0, _util.getSlotVNode)(slots, props, 'extraContent');
+      var subTitle = (0, _util.getSlotVNode)(slots, props, 'subTitle');
+      var title = (0, _util.getSlotVNode)(slots, props, 'title');
+      // @ts-ignore
+      return (0, _vue.createVNode)(ProPageHeader, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+        "prefixCls": undefined,
+        "prefixedClassName": prefixedClassName.value,
+        "ghost": ghost.value,
+        "title": title,
+        "subTitle": subTitle,
+        "content": headerContent,
+        "extra": extra,
+        "extraContent": extraContent
+      }), null);
+    });
+    return function () {
+      var _slots$default;
+      var fixedHeader = props.fixedHeader,
+        pure = props.pure;
+      return (0, _vue.createVNode)(_vue.Fragment, null, [pure ? (0, _vue.createVNode)("div", {
+        "class": classNames.value
+      }, [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)]) : (0, _vue.createVNode)("div", {
+        "class": classNames.value,
+        "style": (0, _objectSpread2.default)({}, attrs.style || {})
+      }, [fixedHeader && headerDom.value ? (0, _vue.createVNode)(_antDesignVue.Affix, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, affixProps.value), {}, {
+        "offsetTop": value.hasHeader && value.fixedHeader ? value.headerHeight : 0
+      }), {
+        default: function _default() {
+          return [headerDom.value];
+        }
+      }) : headerDom.value, (0, _vue.createVNode)("div", {
+        "class": "".concat(prefixedClassName.value, "-grid-content")
+      }, [loading.value ? (0, _vue.createVNode)(_antDesignVue.Spin, null, null) : slots.default ? (0, _vue.createVNode)("div", null, [(0, _vue.createVNode)("div", {
+        "class": "".concat(prefixedClassName.value, "-children-content ").concat(childrenFullHeight.value ? 'children-full-height' : ''),
+        "style": (0, _objectSpread2.default)({}, props.contentStyle || {})
+      }, [slots.default()]), value.hasFooterToolbar && (0, _vue.createVNode)("div", {
+        "style": {
+          height: 48,
+          marginTop: 24
+        }
+      }, null)]) : null])])]);
+    };
+  }
+});
+var _default2 = exports.default = (0, _type.withInstall)(PageContainer);

package/lib/ProLayout/PageContainer/index.less

@@ -0,0 +1,103 @@
+@import '../style/default.less';
+
+@pro-layout-page-container: ~'@{ant-prefix}-pro-page-container';
+
+.@{pro-layout-page-container}-children-content {
+    margin: 24px 24px 0;
+}
+
+.@{pro-layout-page-container} {
+    &-warp {
+        background-color: @component-background;
+        .@{ant-prefix}-tabs-bar {
+            margin: 0;
+        }
+    }
+    &-ghost {
+        .@{pro-layout-page-container}-warp {
+            background-color: @component-background;
+        }
+    }
+}
+
+.@{pro-layout-page-container}-main {
+    .@{pro-layout-page-container}-detail {
+        display: flex;
+    }
+
+    .@{pro-layout-page-container}-row {
+        display: flex;
+        width: 100%;
+    }
+
+    .@{pro-layout-page-container}-title-content {
+        margin-bottom: 16px;
+    }
+
+    .@{pro-layout-page-container}-title,
+    .@{pro-layout-page-container}-content {
+        flex: auto;
+    }
+
+    .@{pro-layout-page-container}-extraContent,
+    .@{pro-layout-page-container}-main {
+        flex: 0 1 auto;
+    }
+
+    .@{pro-layout-page-container}-main {
+        width: 100%;
+    }
+
+    .@{pro-layout-page-container}-title {
+        margin-bottom: 16px;
+    }
+
+    .@{pro-layout-page-container}-logo {
+        margin-bottom: 16px;
+    }
+
+    .@{pro-layout-page-container}-extraContent {
+        min-width: 242px;
+        margin-left: 88px;
+        text-align: right;
+    }
+}
+
+@media screen and (max-width: @screen-xl) {
+    .@{pro-layout-page-container}-main {
+        .@{pro-layout-page-container}-extraContent {
+            margin-left: 44px;
+        }
+    }
+}
+
+@media screen and (max-width: @screen-lg) {
+    .@{pro-layout-page-container}-main {
+        .@{pro-layout-page-container}-extraContent {
+            margin-left: 20px;
+        }
+    }
+}
+
+@media screen and (max-width: @screen-md) {
+    .@{pro-layout-page-container}-main {
+        .@{pro-layout-page-container}-row {
+            display: block;
+        }
+
+        .@{pro-layout-page-container}-action,
+        .@{pro-layout-page-container}-extraContent {
+            margin-left: 0;
+            text-align: left;
+        }
+    }
+}
+
+@media screen and (max-width: @screen-sm) {
+    .@{pro-layout-page-container}-detail {
+        display: block;
+    }
+    .@{pro-layout-page-container}-extraContent {
+        margin-left: 0;
+    }
+}

package/lib/ProLayout/PageContainer/typings.js

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

package/lib/ProLayout/RouteContext.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRouteContext = exports.routeContextInjectKey = exports.provideRouteContext = exports.getPrefixCls = exports.defaultRouteContext = exports.defaultPrefixCls = void 0;
+var _vue = require("vue");
+var _hooks = require("@jetlinks-web/hooks");
+var defaultPrefixCls = exports.defaultPrefixCls = 'ant-pro';
+var getPrefixCls = exports.getPrefixCls = function getPrefixCls(suffixCls, customizePrefixCls) {
+  if (customizePrefixCls) return customizePrefixCls;
+  return suffixCls ? "".concat(defaultPrefixCls, "-").concat(suffixCls) : defaultPrefixCls;
+};
+var defaultRouteContext = exports.defaultRouteContext = (0, _vue.reactive)({
+  getPrefixCls: getPrefixCls,
+  locale: function locale(t) {
+    return t;
+  },
+  contentWidth: 'Fluid',
+  hasFooterToolbar: false
+});
+var routeContextInjectKey = exports.routeContextInjectKey = Symbol('jetlinks-route-context');
+var provideRouteContext = exports.provideRouteContext = function provideRouteContext(value) {
+  (0, _vue.provide)(routeContextInjectKey, value);
+};
+var useRouteContext = exports.useRouteContext = function useRouteContext() {
+  return (0, _hooks.useContext)(routeContextInjectKey, defaultRouteContext);
+};