@jetlinks-web/components 2.0.2 → 2.0.3

package/es/ProLayout/PageContainer/index.js

@@ -0,0 +1,324 @@
+import { Fragment as _Fragment } from "vue";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { createTextVNode as _createTextVNode } from "vue";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import { createVNode as _createVNode, isVNode as _isVNode } from "vue";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+var _excluded = ["title", "tabList", "tabActiveKey", "content", "pageHeaderRender", "header", "extraContent", "prefixedClassName", "prefixCls", "fixedHeader", "showBack"];
+import { withInstall } from 'ant-design-vue/es/_util/type';
+import { Affix, Spin, PageHeader, Tabs, Button } from 'ant-design-vue';
+import { defineComponent, unref, toRefs, computed } from 'vue';
+import { pageHeaderProps } from 'ant-design-vue/es/page-header';
+import { useRouteContext } from '../RouteContext';
+import { getSlotVNode } from '../util';
+import 'ant-design-vue/es/_util/type';
+import './index.less';
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
+}
+export var 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
+};
+export var pageContainerProps = _objectSpread(_objectSpread(_objectSpread({}, pageHeaderTabConfig), 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 _createVNode("span", {
+      "class": item.class || "tab-pane-".concat(item.key)
+    }, [item.tab]);
+  };
+  if (tabList && tabList.length) {
+    var _slot;
+    return _createVNode(Tabs, _objectSpread({
+      "class": "page-container-tabs",
+      "activeKey": tabActiveKey,
+      "onChange": function onChange(key) {
+        if (onTabChange) {
+          onTabChange(key);
+        }
+      },
+      "tabBarExtraContent": tabBarExtraContent
+    }, tabProps), _isSlot(_slot = tabList.map(function (item) {
+      return _createVNode(Tabs.TabPane, _objectSpread(_objectSpread({}, 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 _createVNode("div", {
+    "class": "".concat(prefixedClassName, "-detail")
+  }, [_createVNode("div", {
+    "class": "".concat(prefixedClassName, "-main")
+  }, [_createVNode("div", {
+    "class": "".concat(prefixedClassName, "-row")
+  }, [content && _createVNode("div", {
+    "class": "".concat(prefixedClassName, "-content")
+  }, [
+  // @ts-ignore
+  typeof content === 'function' && content() || content]), extraContent && _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 = _objectWithoutProperties(props, _excluded);
+  var value = useRouteContext();
+  if (pageHeaderRender === false) {
+    return null;
+  }
+  if (pageHeaderRender) {
+    return pageHeaderRender(_objectSpread({}, props));
+  }
+  var pageHeaderTitle = title;
+  if (!title && title !== false) {
+    pageHeaderTitle = value.title;
+  }
+  var unrefBreadcrumb = unref(value.breadcrumb || {});
+  var breadcrumb = props.breadcrumb || _objectSpread(_objectSpread({}, unrefBreadcrumb), {}, {
+    routes: unrefBreadcrumb.routes,
+    itemRender: unrefBreadcrumb.itemRender
+  });
+  var backProps = {};
+  if (showBack) {
+    // @ts-ignore
+    backProps.backIcon = _createVNode(Button, null, {
+      default: function _default() {
+        return [_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 _createVNode("div", {
+    "class": "".concat(prefixedClassName, "-wrap")
+  }, [_createVNode(PageHeader, _objectSpread(_objectSpread(_objectSpread({}, backProps), restProps), {}, {
+    "title": pageHeaderTitle,
+    "breadcrumb": breadcrumb,
+    "footer": renderFooter(_objectSpread(_objectSpread({}, restProps), {}, {
+      tabList: tabList,
+      tabActiveKey: tabActiveKey
+    })),
+    "prefixCls": prefixCls
+  }), {
+    default: function _default() {
+      return [header || renderPageHeader(content, extraContent, prefixedClassName)];
+    }
+  })]);
+};
+var PageContainer = defineComponent({
+  name: 'JPageContainer',
+  inheritAttrs: false,
+  props: pageContainerProps,
+  setup: function setup(props, _ref) {
+    var slots = _ref.slots,
+      attrs = _ref.attrs;
+    var _toRefs = toRefs(props),
+      loading = _toRefs.loading,
+      affixProps = _toRefs.affixProps,
+      ghost = _toRefs.ghost,
+      childrenFullHeight = _toRefs.childrenFullHeight;
+    var value = useRouteContext();
+    var getPrefixCls = value.getPrefixCls;
+    var prefixCls = props.prefixCls || getPrefixCls();
+    var prefixedClassName = computed(function () {
+      return "".concat(prefixCls, "-page-container");
+    });
+    var classNames = computed(function () {
+      return _defineProperty(_defineProperty({}, prefixedClassName.value, true), "".concat(prefixCls, "-page-container-ghost"), ghost.value);
+    });
+    var headerDom = computed(function () {
+      // const tags = getSlotVNode<DefaultPropRender>(slots, props, 'tags');
+      var headerContent = getSlotVNode(slots, props, 'content');
+      var extra = getSlotVNode(slots, props, 'extra');
+      var extraContent = getSlotVNode(slots, props, 'extraContent');
+      var subTitle = getSlotVNode(slots, props, 'subTitle');
+      var title = getSlotVNode(slots, props, 'title');
+      // @ts-ignore
+      return _createVNode(ProPageHeader, _objectSpread(_objectSpread({}, 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 _createVNode(_Fragment, null, [pure ? _createVNode("div", {
+        "class": classNames.value
+      }, [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)]) : _createVNode("div", {
+        "class": classNames.value,
+        "style": _objectSpread({}, attrs.style || {})
+      }, [fixedHeader && headerDom.value ? _createVNode(Affix, _objectSpread(_objectSpread({}, affixProps.value), {}, {
+        "offsetTop": value.hasHeader && value.fixedHeader ? value.headerHeight : 0
+      }), {
+        default: function _default() {
+          return [headerDom.value];
+        }
+      }) : headerDom.value, _createVNode("div", {
+        "class": "".concat(prefixedClassName.value, "-grid-content")
+      }, [loading.value ? _createVNode(Spin, null, null) : slots.default ? _createVNode("div", null, [_createVNode("div", {
+        "class": "".concat(prefixedClassName.value, "-children-content ").concat(childrenFullHeight.value ? 'children-full-height' : ''),
+        "style": _objectSpread({}, props.contentStyle || {})
+      }, [slots.default()]), value.hasFooterToolbar && _createVNode("div", {
+        "style": {
+          height: 48,
+          marginTop: 24
+        }
+      }, null)]) : null])])]);
+    };
+  }
+});
+export default withInstall(PageContainer);

package/es/ProLayout/PageContainer/typings.js

@@ -0,0 +1 @@
+export {};

package/es/ProLayout/RouteContext.js

@@ -0,0 +1,22 @@
+import { provide, reactive } from 'vue';
+import { useContext } from '@jetlinks-web/hooks';
+export var defaultPrefixCls = 'ant-pro';
+export var getPrefixCls = function getPrefixCls(suffixCls, customizePrefixCls) {
+  if (customizePrefixCls) return customizePrefixCls;
+  return suffixCls ? "".concat(defaultPrefixCls, "-").concat(suffixCls) : defaultPrefixCls;
+};
+export var defaultRouteContext = reactive({
+  getPrefixCls: getPrefixCls,
+  locale: function locale(t) {
+    return t;
+  },
+  contentWidth: 'Fluid',
+  hasFooterToolbar: false
+});
+export var routeContextInjectKey = Symbol('jetlinks-route-context');
+export var provideRouteContext = function provideRouteContext(value) {
+  provide(routeContextInjectKey, value);
+};
+export var useRouteContext = function useRouteContext() {
+  return useContext(routeContextInjectKey, defaultRouteContext);
+};

package/es/ProLayout/SiderMenu/BaseMenu.js

@@ -0,0 +1,285 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { isVNode as _isVNode } from "vue";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { createVNode as _createVNode } from "vue";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { defaultSettingProps } from '../defaultSettings';
+import { defineComponent, getCurrentInstance, isVNode, resolveComponent, watchEffect, withCtx } from 'vue';
+import { defaultPrefixCls } from '../RouteContext';
+import IconFont from '../../Icon';
+import { regular } from '@jetlinks-web/utils';
+import { Menu } from 'ant-design-vue';
+import { createFromIconfontCN } from '@ant-design/icons-vue';
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
+}
+export var baseMenuProps = _objectSpread(_objectSpread({}, defaultSettingProps), {}, {
+  prefixCls: {
+    type: String,
+    default: function _default() {
+      return defaultPrefixCls;
+    }
+  },
+  locale: {
+    type: [Function, Boolean],
+    default: function _default(t) {
+      return t;
+    }
+  },
+  menuData: {
+    type: Array,
+    default: function _default() {
+      return [];
+    }
+  },
+  mode: {
+    type: String,
+    default: 'inline'
+  },
+  theme: {
+    type: String,
+    default: 'dark'
+  },
+  collapsed: {
+    type: Boolean,
+    default: function _default() {
+      return false;
+    }
+  },
+  openKeys: {
+    type: Array,
+    default: function _default() {
+      return undefined;
+    }
+  },
+  selectedKeys: {
+    type: Array,
+    default: function _default() {
+      return undefined;
+    }
+  },
+  menuProps: {
+    type: Object,
+    default: function _default() {
+      return null;
+    }
+  },
+  menuItemRender: {
+    type: [Object, Function, Boolean],
+    default: function _default() {
+      return undefined;
+    }
+  },
+  subMenuItemRender: {
+    type: [Object, Function, Boolean],
+    default: function _default() {
+      return undefined;
+    }
+  },
+  onClick: [Function, Object]
+});
+var AntdIconFont = createFromIconfontCN({
+  scriptUrl: ''
+});
+var LazyIcon = function LazyIcon(props) {
+  var icon = props.icon,
+    iconUrl = props.iconUrl,
+    _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? defaultPrefixCls : _props$prefixCls;
+  if (!icon) return null;
+  if (isVNode(icon)) {
+    return icon;
+  }
+  if (typeof icon === 'string' && icon !== '') {
+    if (regular.isUrl(icon) || regular.isImg(icon)) {
+      return _createVNode("img", {
+        "src": icon,
+        "alt": "icon",
+        "class": "".concat(prefixCls, "-sider-menu-icon")
+      }, null);
+    }
+    return iconUrl ? _createVNode(AntdIconFont, {
+      "type": icon
+    }, null) : _createVNode(IconFont, {
+      "type": icon
+    }, null);
+  }
+};
+var MenuUtil = /*#__PURE__*/_createClass(function MenuUtil(_props, ctx) {
+  var _this = this;
+  _classCallCheck(this, MenuUtil);
+  _defineProperty(this, "getNavMenuItems", function () {
+    var menusData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    return menusData.map(function (item) {
+      return _this.getSubMenuOrItem(item);
+    }).filter(function (item) {
+      return item;
+    });
+  });
+  _defineProperty(this, "getSubMenuOrItem", function (item) {
+    var _item$meta, _item$meta2, _item$meta7, _item$meta8;
+    if (Array.isArray(item.children) && item.children.length > 0 && !(item === null || item === void 0 ? void 0 : (_item$meta = item.meta) === null || _item$meta === void 0 ? void 0 : _item$meta.hideInMenu) && !(item === null || item === void 0 ? void 0 : (_item$meta2 = item.meta) === null || _item$meta2 === void 0 ? void 0 : _item$meta2.hideChildrenInMenu)) {
+      var _slot;
+      var _item$meta3, _item$meta4, _item$meta5, _item$meta6;
+      if (_this.props.subMenuItemRender) {
+        var subMenuItemRender = withCtx(_this.props.subMenuItemRender, _this.ctx);
+        return subMenuItemRender({
+          item: item,
+          children: _this.getNavMenuItems(item.children)
+        });
+      }
+      var _this$props = _this.props,
+        prefixCls = _this$props.prefixCls,
+        locale = _this$props.locale;
+      var menuTitle = locale && locale((_item$meta3 = item.meta) === null || _item$meta3 === void 0 ? void 0 : _item$meta3.title) || ((_item$meta4 = item.meta) === null || _item$meta4 === void 0 ? void 0 : _item$meta4.title);
+      var defaultTitle = ((_item$meta5 = item.meta) === null || _item$meta5 === void 0 ? void 0 : _item$meta5.icon) ? _createVNode("span", {
+        "class": "".concat(prefixCls, "-menu-item")
+      }, [_createVNode("span", {
+        "class": "".concat(prefixCls, "-menu-item-title")
+      }, _isSlot(menuTitle) ? menuTitle : {
+        default: function _default() {
+          return [menuTitle];
+        }
+      })]) : _createVNode("span", {
+        "class": "".concat(prefixCls, "-menu-item")
+      }, _isSlot(menuTitle) ? menuTitle : {
+        default: function _default() {
+          return [menuTitle];
+        }
+      });
+      return _createVNode(Menu.SubMenu, {
+        "title": defaultTitle,
+        "key": item.path,
+        "popupClassName": "".concat(prefixCls, "-menu-popup"),
+        "icon": _createVNode(LazyIcon, {
+          "iconUrl": _this.props.iconfontUrl,
+          "icon": (_item$meta6 = item.meta) === null || _item$meta6 === void 0 ? void 0 : _item$meta6.icon
+        }, null)
+      }, _isSlot(_slot = _this.getNavMenuItems(item.children)) ? _slot : {
+        default: function _default() {
+          return [_slot];
+        }
+      });
+    }
+    var menuItemRender = _this.props.menuItemRender && withCtx(_this.props.menuItemRender, _this.ctx);
+    var _this$getMenuItem = _this.getMenuItem(item),
+      _this$getMenuItem2 = _slicedToArray(_this$getMenuItem, 2),
+      title = _this$getMenuItem2[0],
+      icon = _this$getMenuItem2[1];
+    return menuItemRender && menuItemRender({
+      item: item,
+      title: title,
+      icon: icon
+    }) || _createVNode(Menu.Item, {
+      "disabled": (_item$meta7 = item.meta) === null || _item$meta7 === void 0 ? void 0 : _item$meta7.disabled,
+      "danger": (_item$meta8 = item.meta) === null || _item$meta8 === void 0 ? void 0 : _item$meta8.danger,
+      "key": item.path
+    }, _isSlot(title) ? title : {
+      default: function _default() {
+        return [title];
+      }
+    });
+  });
+  _defineProperty(this, "getMenuItem", function (item) {
+    var _slot2;
+    var _item$meta9, _item$meta10, _item$meta11, _item$meta12, _item$meta13;
+    var meta = _objectSpread({}, item.meta);
+    var target = meta.target || null;
+    var hasUrl = regular.isUrl(item.path);
+    var CustomTag = target && 'a' || _this.RouterLink;
+    var props = {
+      to: _objectSpread({
+        name: item.name
+      }, item.meta)
+    };
+    var attrs = hasUrl || target ? _objectSpread(_objectSpread({}, item.meta), {}, {
+      href: item.path,
+      target: target
+    }) : {};
+    var _this$props2 = _this.props,
+      prefixCls = _this$props2.prefixCls,
+      locale = _this$props2.locale;
+    var icon = ((_item$meta9 = item.meta) === null || _item$meta9 === void 0 ? void 0 : _item$meta9.icon) && _createVNode(LazyIcon, {
+      "iconUrl": _this.props.iconfontUrl,
+      "icon": (_item$meta10 = item.meta) === null || _item$meta10 === void 0 ? void 0 : _item$meta10.icon
+    }, null) || undefined;
+    var menuTitle = locale && locale((_item$meta11 = item.meta) === null || _item$meta11 === void 0 ? void 0 : _item$meta11.title) || ((_item$meta12 = item.meta) === null || _item$meta12 === void 0 ? void 0 : _item$meta12.title);
+    var defaultTitle = ((_item$meta13 = item.meta) === null || _item$meta13 === void 0 ? void 0 : _item$meta13.icon) ? _createVNode(CustomTag, _objectSpread(_objectSpread(_objectSpread({}, attrs), props), {}, {
+      "class": "".concat(prefixCls, "-menu-item")
+    }), {
+      default: function _default() {
+        return [icon, _createVNode("span", {
+          "class": "".concat(prefixCls, "-menu-item-title")
+        }, _isSlot(menuTitle) ? menuTitle : {
+          default: function _default() {
+            return [menuTitle];
+          }
+        })];
+      }
+    }) : _createVNode(CustomTag, _objectSpread(_objectSpread(_objectSpread({}, attrs), props), {}, {
+      "class": "".concat(prefixCls, "-menu-item")
+    }), _isSlot(_slot2 = _createVNode("span", null, _isSlot(menuTitle) ? menuTitle : {
+      default: function _default() {
+        return [menuTitle];
+      }
+    })) ? _slot2 : {
+      default: function _default() {
+        return [_slot2];
+      }
+    });
+    return [defaultTitle, icon];
+  });
+  this.props = _props;
+  this.ctx = ctx;
+  this.RouterLink = resolveComponent('router-link');
+});
+export default defineComponent({
+  name: 'BaseMenu',
+  props: baseMenuProps,
+  emits: ['update:openKeys', 'update:selectedKeys', 'click'],
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit;
+    var ctx = getCurrentInstance();
+    var menuUtil = new MenuUtil(props, ctx);
+    watchEffect(function () {
+      if (props.iconfontUrl) {
+        AntdIconFont = createFromIconfontCN({
+          scriptUrl: props.iconfontUrl
+        });
+      }
+    });
+    var handleOpenChange = function handleOpenChange(openKeys) {
+      emit('update:openKeys', openKeys);
+    };
+    var handleSelect = function handleSelect(args) {
+      // ignore https? link handle selectkeys
+      if (regular.isUrl(args.key)) {
+        return;
+      }
+      emit('update:selectedKeys', args.selectedKeys);
+    };
+    var handleClick = function handleClick(args) {
+      emit('click', args);
+    };
+    return function () {
+      var _slot3;
+      return _createVNode(Menu, _objectSpread({
+        "key": "Menu",
+        "inlineIndent": 16,
+        "mode": props.mode,
+        "theme": props.theme,
+        "openKeys": props.openKeys === false ? [] : props.openKeys,
+        "selectedKeys": props.selectedKeys || [],
+        "onOpenChange": handleOpenChange,
+        "onSelect": handleSelect,
+        "onClick": handleClick
+      }, props.menuProps), _isSlot(_slot3 = menuUtil.getNavMenuItems(props.menuData)) ? _slot3 : {
+        default: function _default() {
+          return [_slot3];
+        }
+      });
+    };
+  }
+});