layout.js 3.1 KB

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