layout.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = exports.basicProps = exports.Header = exports.Footer = exports.Content = void 0;
  7. var _vue = require("vue");
  8. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  9. var _useConfigInject = _interopRequireDefault(require("../config-provider/hooks/useConfigInject"));
  10. var _injectionKey = require("./injectionKey");
  11. var _style = _interopRequireDefault(require("./style"));
  12. const basicProps = () => ({
  13. prefixCls: String,
  14. hasSider: {
  15. type: Boolean,
  16. default: undefined
  17. },
  18. tagName: String
  19. });
  20. exports.basicProps = basicProps;
  21. function generator(_ref) {
  22. let {
  23. suffixCls,
  24. tagName,
  25. name
  26. } = _ref;
  27. return BasicComponent => {
  28. const Adapter = (0, _vue.defineComponent)({
  29. compatConfig: {
  30. MODE: 3
  31. },
  32. name,
  33. props: basicProps(),
  34. setup(props, _ref2) {
  35. let {
  36. slots
  37. } = _ref2;
  38. const {
  39. prefixCls
  40. } = (0, _useConfigInject.default)(suffixCls, props);
  41. return () => {
  42. const basicComponentProps = (0, _extends2.default)((0, _extends2.default)({}, props), {
  43. prefixCls: prefixCls.value,
  44. tagName
  45. });
  46. return (0, _vue.createVNode)(BasicComponent, basicComponentProps, slots);
  47. };
  48. }
  49. });
  50. return Adapter;
  51. };
  52. }
  53. const Basic = (0, _vue.defineComponent)({
  54. compatConfig: {
  55. MODE: 3
  56. },
  57. props: basicProps(),
  58. setup(props, _ref3) {
  59. let {
  60. slots
  61. } = _ref3;
  62. return () => (0, _vue.createVNode)(props.tagName, {
  63. class: props.prefixCls
  64. }, slots);
  65. }
  66. });
  67. const BasicLayout = (0, _vue.defineComponent)({
  68. compatConfig: {
  69. MODE: 3
  70. },
  71. inheritAttrs: false,
  72. props: basicProps(),
  73. setup(props, _ref4) {
  74. let {
  75. slots,
  76. attrs
  77. } = _ref4;
  78. const {
  79. prefixCls,
  80. direction
  81. } = (0, _useConfigInject.default)('', props);
  82. const [wrapSSR, hashId] = (0, _style.default)(prefixCls);
  83. const siders = (0, _vue.ref)([]);
  84. const siderHookProvider = {
  85. addSider: id => {
  86. siders.value = [...siders.value, id];
  87. },
  88. removeSider: id => {
  89. siders.value = siders.value.filter(currentId => currentId !== id);
  90. }
  91. };
  92. (0, _vue.provide)(_injectionKey.SiderHookProviderKey, siderHookProvider);
  93. const divCls = (0, _vue.computed)(() => {
  94. const {
  95. prefixCls,
  96. hasSider
  97. } = props;
  98. return {
  99. [hashId.value]: true,
  100. [`${prefixCls}`]: true,
  101. [`${prefixCls}-has-sider`]: typeof hasSider === 'boolean' ? hasSider : siders.value.length > 0,
  102. [`${prefixCls}-rtl`]: direction.value === 'rtl'
  103. };
  104. });
  105. return () => {
  106. const {
  107. tagName
  108. } = props;
  109. return wrapSSR((0, _vue.createVNode)(tagName, (0, _extends2.default)((0, _extends2.default)({}, attrs), {
  110. class: [divCls.value, attrs.class]
  111. }), slots));
  112. };
  113. }
  114. });
  115. const Layout = generator({
  116. suffixCls: 'layout',
  117. tagName: 'section',
  118. name: 'ALayout'
  119. })(BasicLayout);
  120. const Header = exports.Header = generator({
  121. suffixCls: 'layout-header',
  122. tagName: 'header',
  123. name: 'ALayoutHeader'
  124. })(Basic);
  125. const Footer = exports.Footer = generator({
  126. suffixCls: 'layout-footer',
  127. tagName: 'footer',
  128. name: 'ALayoutFooter'
  129. })(Basic);
  130. const Content = exports.Content = generator({
  131. suffixCls: 'layout-content',
  132. tagName: 'main',
  133. name: 'ALayoutContent'
  134. })(Basic);
  135. var _default = exports.default = Layout;