@jetlinks-web/components 2.0.2 → 2.0.4-1

package/es/PermissionButton/index.js

@@ -0,0 +1,117 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+var _excluded = ["popConfirm", "tooltip", "hasPermission", "noPermissionTitle"];
+import { h, defineComponent, computed } from "vue";
+import { Button, Tooltip, Popconfirm } from 'ant-design-vue';
+import "ant-design-vue/es";
+import { omit } from "lodash-es";
+import { buttonProps } from "ant-design-vue/es/button/button";
+import { usePermission } from '@jetlinks-web/hooks';
+var definedProps = _objectSpread({
+  tooltip: {
+    type: Object
+  },
+  popConfirm: {
+    type: Object
+  },
+  hasPermission: {
+    type: [String, Array, Boolean],
+    default: undefined
+  },
+  style: {
+    type: Object
+  },
+  noPermissionTitle: {
+    type: String
+  }
+}, omit(buttonProps(), 'icon'));
+var PermissionButton = defineComponent({
+  name: 'PermissionButton',
+  // @ts-ignore
+  slots: ['button', 'icon'],
+  props: definedProps,
+  setup: function setup(props, _ref) {
+    var slots = _ref.slots;
+    var popConfirm = props.popConfirm,
+      tooltip = props.tooltip;
+    var _usePermission = usePermission(props.hasPermission),
+      hasPerm = _usePermission.hasPerm;
+    var permission = computed(function () {
+      if (!props.hasPermission || props.hasPermission === true) {
+        return true;
+      }
+      return hasPerm.value;
+    });
+    var isPermission = computed(function () {
+      if ('hasPermission' in props && permission.value) {
+        return 'disabled' in props ? props.disabled : false;
+      }
+      return true;
+    });
+    var hasPopConfirm = computed(function () {
+      return !!popConfirm;
+    }); // 是否包含确认弹窗
+    var hasTooltip = computed(function () {
+      return !!tooltip;
+    }); // 是否包含文字提示
+    return function () {
+      var popConfirm = props.popConfirm,
+        tooltip = props.tooltip,
+        hasPermission = props.hasPermission,
+        noPermissionTitle = props.noPermissionTitle,
+        buttonProps = _objectWithoutProperties(props, _excluded);
+      var button = !slots.button ? h(Button, _objectSpread(_objectSpread({}, buttonProps), {}, {
+        disabled: isPermission.value
+      }), {
+        default: function _default() {
+          var _slots$default;
+          return slots === null || slots === void 0 ? void 0 : (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots);
+        },
+        icon: function icon() {
+          var _slots$icon;
+          return slots === null || slots === void 0 ? void 0 : (_slots$icon = slots.icon) === null || _slots$icon === void 0 ? void 0 : _slots$icon.call(slots);
+        }
+      }) : slots.button();
+      // 文字提示
+      var _tooltip = tooltip ? h(Tooltip, _extends(tooltip, {
+        disabled: isPermission.value
+      }), {
+        default: function _default() {
+          return button;
+        }
+      }) : undefined;
+      // 无权限
+      var noPermissionButton = !permission.value ? h(Tooltip, {
+        title: noPermissionTitle || '暂无权限，请联系管理员'
+      }, {
+        default: function _default() {
+          return button;
+        }
+      }) : undefined;
+      // 二次确认
+      var _popConfirm = popConfirm ? h(Popconfirm, _extends({
+        overlayStyle: {
+          width: '220px'
+        }
+      }, popConfirm, {
+        disabled: !permission.value || buttonProps.disabled
+      }), {
+        default: function _default() {
+          return tooltip ? _tooltip : button;
+        }
+      }) : undefined;
+      if (permission.value) {
+        if (hasPopConfirm.value) {
+          return _popConfirm;
+        }
+        if (hasTooltip.value) {
+          return _tooltip;
+        }
+        return button;
+      }
+      return noPermissionButton;
+    };
+  }
+});
+export default PermissionButton;

package/es/ProLayout/Basic/BasicLayout.js

@@ -0,0 +1,259 @@
+import { Fragment as _Fragment, createVNode as _createVNode, isVNode as _isVNode } from "vue";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+var _excluded = ["pure", "onCollapse", "onOpenKeys", "onSelect", "onMenuClick"];
+import SiderMenu, { siderMenuProps } from '../SiderMenu/SiderMenu';
+import { computed, defineComponent, provide, reactive, watchEffect, toRefs, h } from 'vue';
+import { defaultSettingProps } from '../defaultSettings';
+import { baseHeaderProps } from '../TopHeader';
+import Header, { headerViewProps } from './Header';
+import useConfigInject from 'ant-design-vue/es/_util/hooks/useConfigInject';
+import { pick } from 'lodash-es';
+import { defaultRouteContext, routeContextInjectKey } from '../RouteContext';
+import { getMenuFirstChildren, getSlot } from '../util';
+import { Layout, LayoutContent } from 'ant-design-vue';
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
+}
+export var basicLayoutProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, defaultSettingProps), siderMenuProps), baseHeaderProps), headerViewProps), {}, {
+  pure: Boolean,
+  loading: Boolean,
+  locale: {
+    type: [Function, Boolean],
+    default: function _default() {
+      return function (s) {
+        return s;
+      };
+    }
+  },
+  /**
+   * 是否禁用移动端模式，有的管理系统不需要移动端模式，此属性设置为true即可
+   */
+  disableMobile: {
+    type: Boolean,
+    required: false
+  },
+  isChildrenLayout: {
+    type: Boolean,
+    required: false
+  },
+  /**
+   * 兼用 content 的 margin
+   */
+  disableContentMargin: {
+    type: Boolean,
+    required: false
+  },
+  colSize: {
+    type: Number,
+    required: false
+  },
+  contentStyle: {
+    type: [String, Object],
+    default: function _default() {
+      return null;
+    }
+  },
+  breadcrumb: {
+    type: [Object, Function],
+    default: function _default() {
+      return null;
+    }
+  },
+  collapsedButtonRender: {
+    type: [Function, Object, Boolean],
+    default: function _default() {
+      return undefined;
+    }
+  },
+  breadcrumbRender: {
+    type: [Object, Function, Boolean],
+    default: function _default() {
+      return null;
+    }
+  },
+  headerContentRender: {
+    type: [Function, Object, Boolean],
+    default: function _default() {
+      return undefined;
+    }
+  },
+  headerRender: {
+    type: [Object, Function, Boolean],
+    default: function _default() {
+      return undefined;
+    }
+  }
+});
+export default defineComponent({
+  name: 'JProLayout',
+  inheritAttrs: false,
+  props: basicLayoutProps,
+  emits: ['update:collapsed', 'update:open-keys', 'update:selected-keys', 'collapse', 'openKeys', 'select', 'menuHeaderClick', 'menuClick', 'backClick'],
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit,
+      attrs = _ref.attrs,
+      slots = _ref.slots;
+    var _useConfigInject = useConfigInject('layout', {}),
+      prefixCls = _useConfigInject.prefixCls;
+    var isTop = computed(function () {
+      return props.layout === 'top';
+    });
+    var hasSide = computed(function () {
+      return props.layout === 'mix' || props.layout === 'side' || false;
+    });
+    var hasSplitMenu = computed(function () {
+      return props.layout === 'mix' && props.splitMenus;
+    });
+    var hasFlatMenu = computed(function () {
+      return hasSide.value && hasSplitMenu.value;
+    });
+    var siderWidth = computed(function () {
+      return props.collapsed ? props.collapsedWidth : props.siderWidth;
+    });
+    var onCollapse = function onCollapse(collapsed) {
+      emit('update:collapsed', collapsed);
+      emit('collapse', collapsed);
+    };
+    var onOpenKeys = function onOpenKeys(openKeys) {
+      emit('update:open-keys', openKeys);
+      emit('openKeys', openKeys);
+    };
+    var onSelect = function onSelect(selectedKeys) {
+      emit('update:selected-keys', selectedKeys);
+      emit('select', selectedKeys);
+    };
+    var onMenuHeaderClick = function onMenuHeaderClick(e) {
+      emit('menuHeaderClick', e);
+    };
+    var onMenuClick = function onMenuClick(args) {
+      emit('menuClick', args);
+    };
+    var onBack = function onBack(args) {
+      emit('backClick', args);
+    };
+    var baseClassName = computed(function () {
+      return "".concat(props.prefixCls, "-basicLayout");
+    });
+    var className = computed(function () {
+      return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, baseClassName.value, true), "".concat(baseClassName.value, "-top-menu"), isTop.value), "".concat(baseClassName.value, "-is-children"), props.isChildrenLayout), "".concat(baseClassName.value, "-fix-siderbar"), props.fixSiderbar), "".concat(baseClassName.value, "-").concat(props.layout), props.layout);
+    });
+    var genLayoutStyle = reactive({
+      position: 'relative'
+    });
+    watchEffect(function () {
+      if (props.isChildrenLayout || props.contentStyle && props.contentStyle.minHeight) {
+        genLayoutStyle.minHeight = 0;
+      }
+    });
+    var headerRender = function headerRender(p, matchMenuKeys) {
+      if (p.headerRender === false || p.pure) {
+        return null;
+      }
+      return h(Header, _objectSpread(_objectSpread({}, p), {}, {
+        matchMenuKeys: matchMenuKeys || []
+      }));
+      // <Header {...p} matchMenuKeys={matchMenuKeys || []} />;
+    };
+    var breadcrumb = computed(function () {
+      return _objectSpread(_objectSpread({}, props.breadcrumb), {}, {
+        itemRender: getSlot(slots, props, 'breadcrumbRender')
+      });
+    });
+    var flatMenuData = computed(function () {
+      return hasFlatMenu.value && props.selectedKeys && getMenuFirstChildren(props.menuData, props.selectedKeys[0]) || [];
+    });
+    var routeContext = reactive(_objectSpread(_objectSpread(_objectSpread({}, defaultRouteContext), pick(toRefs(props), ['pure', 'locale', 'menuData', 'openKeys', 'selectedKeys', 'contentWidth', 'disableMobile', 'fixSiderbar', 'fixedHeader', 'headerHeight'])), {}, {
+      siderWidth: siderWidth,
+      breadcrumb: breadcrumb,
+      flatMenuData: flatMenuData,
+      hasSide: hasSide,
+      back: onBack,
+      hasHeader: true,
+      flatMenu: hasFlatMenu
+    }));
+    provide(routeContextInjectKey, routeContext);
+    return function () {
+      var _slot;
+      var _slots$default, _slots$default2;
+      var pure = props.pure,
+        propsOnCollapse = props.onCollapse,
+        propsOnOpenKeys = props.onOpenKeys,
+        propsOnSelect = props.onSelect,
+        propsOnMenuClick = props.onMenuClick,
+        restProps = _objectWithoutProperties(props, _excluded);
+      var collapsedButtonRender = getSlot(slots, props, 'collapsedButtonRender');
+      var headerContentRender = getSlot(slots, props, 'headerContentRender');
+      var rightContentRender = getSlot(slots, props, 'rightContentRender');
+      var customHeaderRender = getSlot(slots, props, 'headerRender');
+      // menu
+      var menuHeaderRender = getSlot(slots, props, 'menuHeaderRender');
+      var menuExtraRender = getSlot(slots, props, 'menuExtraRender');
+      var menuContentRender = getSlot(slots, props, 'menuContentRender');
+      var menuItemRender = getSlot(slots, props, 'menuItemRender');
+      var subMenuItemRender = getSlot(slots, props, 'subMenuItemRender');
+      var headerDom = computed(function () {
+        return headerRender(_objectSpread(_objectSpread({}, props), {}, {
+          menuItemRender: menuItemRender,
+          subMenuItemRender: subMenuItemRender,
+          hasSiderMenu: !isTop.value,
+          menuData: props.menuData,
+          onCollapse: onCollapse,
+          onOpenKeys: onOpenKeys,
+          onSelect: onSelect,
+          onMenuHeaderClick: onMenuHeaderClick,
+          rightContentRender: rightContentRender,
+          collapsedButtonRender: collapsedButtonRender,
+          headerTitleRender: menuHeaderRender,
+          menuExtraRender: menuExtraRender,
+          menuContentRender: menuContentRender,
+          headerContentRender: headerContentRender,
+          headerRender: customHeaderRender,
+          theme: (props.theme || 'dark').toLocaleLowerCase().includes('dark') ? 'dark' : 'light'
+        }), props.matchMenuKeys);
+      });
+      routeContext.hasHeader = !!headerDom.value;
+      var contentClassName = computed(function () {
+        return _defineProperty(_defineProperty(_defineProperty({}, "".concat(baseClassName.value, "-content"), true), "".concat(baseClassName.value, "-has-header"), headerDom), "".concat(baseClassName.value, "-content-disable-margin"), props.disableContentMargin);
+      });
+      return _createVNode(_Fragment, null, [pure ? (_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots) : _createVNode("div", {
+        "class": className.value
+      }, [_createVNode(Layout, {
+        "style": _objectSpread({
+          minHeight: '100vh'
+        }, attrs.style || {})
+      }, {
+        default: function _default() {
+          return [headerDom.value, _createVNode(Layout, {
+            "style": genLayoutStyle,
+            "class": prefixCls.value
+          }, {
+            default: function _default() {
+              return [!isTop.value && _createVNode(SiderMenu, _objectSpread(_objectSpread({}, restProps), {}, {
+                "menuHeaderRender": menuHeaderRender,
+                "menuExtraRender": menuExtraRender,
+                "menuContentRender": menuContentRender,
+                "menuItemRender": menuItemRender,
+                "subMenuItemRender": subMenuItemRender,
+                "collapsedButtonRender": collapsedButtonRender,
+                "onCollapse": onCollapse,
+                "onSelect": onSelect,
+                "onOpenKeys": onOpenKeys,
+                "onMenuClick": onMenuClick
+              }), null), _createVNode(Layout, null, _isSlot(_slot = _createVNode(LayoutContent, null, {
+                default: function _default() {
+                  return [(_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots)];
+                }
+              })) ? _slot : {
+                default: function _default() {
+                  return [_slot];
+                }
+              })];
+            }
+          })];
+        }
+      })])]);
+    };
+  }
+});

package/es/ProLayout/Basic/Header.js

@@ -0,0 +1,97 @@
+import { createVNode as _createVNode, Fragment as _Fragment, isVNode as _isVNode } from "vue";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { baseHeaderProps, TopNavHeader } from '../TopHeader';
+import PropTypes from 'ant-design-vue/es/_util/vue-types';
+import { defineComponent, computed, toRefs } from 'vue';
+import { useRouteContext } from '../RouteContext';
+import { Layout } from 'ant-design-vue';
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
+}
+export var headerViewProps = _objectSpread(_objectSpread({}, baseHeaderProps), {}, {
+  headerRender: {
+    type: [Object, Function, Boolean],
+    default: function _default() {
+      return undefined;
+    }
+  },
+  headerTitleRender: {
+    type: [Object, Function, Boolean],
+    default: function _default() {
+      return undefined;
+    }
+  },
+  headerContentRender: {
+    type: [Object, Function, Boolean],
+    default: function _default() {
+      return undefined;
+    }
+  },
+  hasSiderMenu: PropTypes.looseBool,
+  siderWidth: PropTypes.number.def(208)
+});
+export default defineComponent({
+  name: 'HeaderView',
+  inheritAttrs: false,
+  props: headerViewProps,
+  setup: function setup(props) {
+    var _toRefs = toRefs(props),
+      prefixCls = _toRefs.prefixCls,
+      fixedHeader = _toRefs.fixedHeader,
+      headerHeight = _toRefs.headerHeight,
+      layout = _toRefs.layout,
+      theme = _toRefs.theme,
+      onCollapse = _toRefs.onCollapse;
+    var context = useRouteContext();
+    var needFixedHeader = computed(function () {
+      return fixedHeader.value || context.fixedHeader;
+    });
+    var isTop = computed(function () {
+      return layout.value === 'top';
+    });
+    var className = computed(function () {
+      return _defineProperty(_defineProperty({}, "".concat(prefixCls.value, "-fixed-header"), needFixedHeader.value), "".concat(prefixCls.value, "-top-menu"), isTop.value);
+    });
+    var renderContent = function renderContent() {
+      var defaultDom = _createVNode(TopNavHeader, _objectSpread(_objectSpread({
+        "theme": theme.value,
+        "mode": "horizontal"
+      }, props), {}, {
+        "onCollapse": onCollapse.value,
+        "menuData": context.menuData
+      }), null);
+      if (props.headerRender) {
+        return props.headerRender(props, defaultDom);
+      }
+      return defaultDom;
+    };
+    var right = computed(function () {
+      return needFixedHeader.value ? 0 : undefined;
+    });
+    return function () {
+      var _slot;
+      return _createVNode(_Fragment, null, [needFixedHeader.value && _createVNode(Layout.Header, {
+        "style": {
+          height: "".concat(headerHeight.value, "px"),
+          lineHeight: "".concat(headerHeight.value, "px"),
+          background: 'transparent'
+        }
+      }, null), _createVNode(Layout.Header, {
+        "style": {
+          padding: 0,
+          height: "".concat(headerHeight.value, "px"),
+          lineHeight: "".concat(headerHeight.value, "px"),
+          width: '100%',
+          zIndex: 100,
+          right: right.value
+        },
+        "class": className.value
+      }, _isSlot(_slot = renderContent()) ? _slot : {
+        default: function _default() {
+          return [_slot];
+        }
+      })]);
+    };
+  }
+});