@meethive/components 0.0.2 → 0.0.4

package/es/ProLayout/PageContainer/index.js

@@ -1,354 +1,277 @@
- function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
-import { defineComponent, computed, toRefs, unref } from 'vue'
-import { withInstall } from 'ant-design-vue/es/_util/type'
-import { Affix, Spin, PageHeader, Tabs, Button } from 'ant-design-vue'
-import { pageHeaderProps } from 'ant-design-vue/es/page-header'
-import { useRouteContext } from '../RouteContext'
-import { getSlotVNode } from '../util'
-import { LayoutType } from '../defaultSettings'
-import { useLocaleReceiver } from '../../LocaleReciver'
-import useProLayoutStyle from '../style'
-
-export const pageHeaderTabConfig = {
+import { defineComponent, computed, toRefs, unref } from 'vue';
+import { withInstall } from 'ant-design-vue/es/_util/type';
+import { Affix, Spin, PageHeader, Tabs, Button } from 'ant-design-vue';
+import { pageHeaderProps } from 'ant-design-vue/es/page-header';
+import { useRouteContext } from '../RouteContext';
+import { getSlotVNode } from '../util';
+import { LayoutType } from '../defaultSettings';
+import { useLocaleReceiver } from '../../LocaleReciver';
+import useProLayoutStyle from '../style';
+export const pageHeaderTabConfig = {
   /**
    * @name tabs 的列表
-   */
-  tabList: {
-    type: [Object, Function, Array],
-    default: () => undefined
-  },
+   */
+  tabList: {
+    type: [Object, Function, Array],
+    default: () => undefined
+  },
   /**
    * @name 当前选中 tab 的 key
-   */
-  tabActiveKey: String,
+   */
+  tabActiveKey: String,
   /**
    * @name tab 上多余的区域
-   */
-  tabBarExtraContent: {
-    type: [Object, Function],
-    default: () => undefined
-  },
+   */
+  tabBarExtraContent: {
+    type: [Object, Function],
+    default: () => undefined
+  },
   /**
    * @name tabs 的其他配置
-   */
-  tabProps: {
-    type: Object,
-    default: () => undefined
-  },
+   */
+  tabProps: {
+    type: Object,
+    default: () => undefined
+  },
   /**
    * @name 固定 PageHeader 到页面顶部
-   */
-  fixedHeader: Boolean,
-  // events
-  onTabChange: Function,
-  pure: Boolean
-}
-
-export const pageContainerProps = {
-  ...pageHeaderTabConfig,
-  ...pageHeaderProps,
-  prefixCls: {
-    type: String,
-    default: 'ant-pro'
-  },
-  title: {
-    type: [Object, String, Boolean, Function],
-    default: () => null
-  },
-  subTitle: {
-    type: [Object, String, Boolean, Function],
-    default: () => null
-  },
-  content: {
-    type: [Object, String, Boolean, Function],
-    default: () => null
-  },
-  extra: {
-    type: [Object, String, Boolean, Function],
-    default: () => null
-  },
-  extraContent: {
-    type: [Object, String, Boolean, Function],
-    default: () => null
-  },
-  header: {
-    type: [Object, String, Boolean, Function],
-    default: () => null
-  },
-  pageHeaderRender: {
-    type: [Object, Function, Boolean],
-    default: () => undefined
-  },
-  affixProps: {
-    type: [Object, Function]
-  },
-  ghost: {
-    type: Boolean,
-    default: () => false
-  },
-  loading: {
-    type: Boolean,
-    default: () => undefined
-  },
-  childrenFullHeight: {
-    type: Boolean,
-    default: () => true
-  },
-  pure: {
-    type: Boolean,
-    default: false
-  },
-  showBack: {
-    type: Boolean,
-    default: false
-  },
-  contentStyle: {
-    type: Object,
-    default: () => ({})
-  },
-  onBack: {
-    type: Function
-  }
-}
-
-const renderFooter = (props) => {
-  const {
-    tabList,
-    tabActiveKey,
-    onTabChange,
-    tabBarExtraContent,
-    tabProps
-  } = props
-
-  const tabPane = (item) => {
-    return React.createElement('span', { class: item.class || `tab-pane-${item.key}`,}, item.tab)
-  }
-
-  if (tabList && tabList.length) {
-    return (
-      React.createElement(Tabs, {
-        class: "page-container-tabs",
-        activeKey: tabActiveKey,
-        onChange: (key) => {
-          if (onTabChange) {
-            onTabChange(key)
-          }
-        },
-        tabBarExtraContent: tabBarExtraContent,
-        ...tabProps,}
-
-        , tabList.map((item) => (
-          React.createElement(Tabs.TabPane, {
-            ...item,
-            tab: tabPane(item),
-            key: item.key,}
-          )
-        ))
-      )
-    )
-  }
-  return null
-}
-
-const renderPageHeader = (content, extraContent, prefixedClassName) => {
-  if (!content && !extraContent) {
-    return null
-  }
-  return (
-    React.createElement('div', { class: `${prefixedClassName}-detail`,}
-      , React.createElement('div', { class: `${prefixedClassName}-main`,}
-        , React.createElement('div', { class: `${prefixedClassName}-row`,}
-          , content && (
-            React.createElement('div', { class: `${prefixedClassName}-content`,}
-              , typeof content === 'function' && content() || content
-            )
-          )
-          , extraContent && (
-            React.createElement('div', { class: `${prefixedClassName}-extraContent`,}
-              , typeof extraContent === 'function' && extraContent() || extraContent
-            )
-          )
-        )
-      )
-    )
-  )
-}
-
-const ProPageHeader = (props) => {
-  const {
-    title,
-    tabList,
-    tabActiveKey,
-    content,
-    pageHeaderRender,
-    header,
-    extraContent,
-    prefixedClassName,
-    prefixCls,
-    fixedHeader: _,
-    showBack,
-    onBack,
-    ...restProps
-  } = props
-
-  const value = useRouteContext()
-  const [contextLocale] = useLocaleReceiver('ProLayout')
-
-  if (pageHeaderRender === false) {
-    return null
-  }
-  if (pageHeaderRender) {
-    return pageHeaderRender({ ...props })
-  }
-
-  let pageHeaderTitle = title
-  if (!title && title !== false) {
-    pageHeaderTitle = (value ).title
-  }
-
-  const unrefBreadcrumb = unref((value ).breadcrumb || {})
-  const breadcrumb = props.breadcrumb || {
-    ...unrefBreadcrumb,
-    routes: unrefBreadcrumb.routes,
-    itemRender: unrefBreadcrumb.itemRender
-  }
-
-  const backProps = {}
-  if (showBack) {
-    // @ts-ignore
-    backProps.backIcon = React.createElement(Button, null, contextLocale.value.pageContainer.back)
-    backProps.onBack = () => {
-      if (props.onBack) {
-        props.onBack()
-      } else {
-        _optionalChain([(value ), 'access', _2 => _2.back, 'optionalCall', _3 => _3()])
-      }
-    }
-  }
-
-  const styles = (value ).layoutType === LayoutType.CARD
-    ? {
-        padding: props.extra || props.subTitle || pageHeaderTitle || tabList || props.extraContent || props.showBack || props.title
-          ? '16px 24px'
-          : '0px'
-      }
-    : {}
-
-  return (
-    React.createElement('div', { class: `${prefixedClassName}-wrap`,}
-      , React.createElement(PageHeader, {
-        style: styles,
-        ...backProps,
-        ...restProps,
-        title: pageHeaderTitle,
-        breadcrumb: (value ).layoutType === LayoutType.LIST ? breadcrumb : null,
-        footer: renderFooter({
-          ...restProps,
-          tabList,
-          tabActiveKey
-        }),
-        prefixCls: prefixCls,}
-
-        , header || renderPageHeader(content, extraContent, prefixedClassName)
-      )
-    )
-  )
-}
-
-const PageContainer = defineComponent({
-  name: 'JPageContainer',
-  inheritAttrs: false,
-  props: pageContainerProps ,
-  setup(props, { slots, attrs }) {
-    const {
-      loading,
-      affixProps,
-      ghost,
-      childrenFullHeight
-    } = toRefs(props)
-
-    const value = useRouteContext()
-    const getPrefixCls = (value ).getPrefixCls
-    const prefixCls = props.prefixCls || getPrefixCls()
-
-    const stylePrefixCls = computed(() => 'pro-layout')
-    const [wrapSSR, hashId] = useProLayoutStyle(stylePrefixCls)
-
-    const prefixedClassName = computed(() => `${prefixCls}-page-container`)
-
-    const classNames = computed(() => ({
-      [hashId.value]: true,
-      [prefixedClassName.value]: true,
-      [`${prefixCls}-page-container-ghost`]: ghost.value
-    }))
-
-    const headerDom = computed(() => {
-      // const tags = getSlotVNode<DefaultPropRender>(slots, props, 'tags');
-      const headerContent = getSlotVNode(slots, props, 'content')
-      const extra = getSlotVNode(slots, props, 'extra')
-      const extraContent = getSlotVNode(slots, props, 'extraContent')
-      const subTitle = getSlotVNode(slots, props, 'subTitle')
-      const title = getSlotVNode(slots, props, 'title')
-      // @ts-ignore
-      return (
-        React.createElement(ProPageHeader, {
-          ...props,
-          prefixCls: undefined,
-          prefixedClassName: prefixedClassName.value,
-          ghost: ghost.value,
-          title: title,
-          subTitle: subTitle,
-          content: headerContent,
-          extra: extra,
-          extraContent: extraContent,}
-        )
-      )
-    })
-
-    return () => {
-      const { fixedHeader, pure } = props
-
-      return (
-        React.createElement(React.Fragment, null
-          , pure ? (
-            React.createElement('div', { class: classNames.value,}
-              , _optionalChain([slots, 'access', _4 => _4.default, 'optionalCall', _5 => _5()])
-            )
-          ) : (
-            React.createElement('div', { class: classNames.value, style: { ...(attrs.style  || {}) },}
-              , fixedHeader && headerDom.value ? (
-                React.createElement(Affix, {
-                  ...affixProps.value,
-                  offsetTop: (value ).hasHeader && (value ).fixedHeader ? (value ).headerHeight : 0,}
-
-                  , headerDom.value
-                )
-              ) : (
-                headerDom.value
-              )
-              , React.createElement('div', { class: `${prefixedClassName.value}-grid-content`,}
-                , loading.value ? (
-                  React.createElement(Spin, null )
-                ) : slots.default ? (
-                  React.createElement('div', null
-                    , React.createElement('div', {
-                      class: `${prefixedClassName.value}-children-content ${childrenFullHeight.value ? 'children-full-height' : ''} ${hashId.value}`,
-                      style: { ...(props.contentStyle || {}) },}
-
-                      , slots.default()
-                    )
-                    , (value ).hasFooterToolbar && (
-                      React.createElement('div', { style: { height: 48, marginTop: 24 },} )
-                    )
-                  )
-                ) : null
-              )
-            )
-          )
-        )
-      )
-    }
-  }
-})
-
-export default withInstall(PageContainer)
+   */
+  fixedHeader: Boolean,
+  // events
+  onTabChange: Function,
+  pure: Boolean
+};
+export const pageContainerProps = {
+  ...pageHeaderTabConfig,
+  ...pageHeaderProps,
+  prefixCls: {
+    type: String,
+    default: 'ant-pro'
+  },
+  title: {
+    type: [Object, String, Boolean, Function],
+    default: () => null
+  },
+  subTitle: {
+    type: [Object, String, Boolean, Function],
+    default: () => null
+  },
+  content: {
+    type: [Object, String, Boolean, Function],
+    default: () => null
+  },
+  extra: {
+    type: [Object, String, Boolean, Function],
+    default: () => null
+  },
+  extraContent: {
+    type: [Object, String, Boolean, Function],
+    default: () => null
+  },
+  header: {
+    type: [Object, String, Boolean, Function],
+    default: () => null
+  },
+  pageHeaderRender: {
+    type: [Object, Function, Boolean],
+    default: () => undefined
+  },
+  affixProps: {
+    type: [Object, Function]
+  },
+  ghost: {
+    type: Boolean,
+    default: () => false
+  },
+  loading: {
+    type: Boolean,
+    default: () => undefined
+  },
+  childrenFullHeight: {
+    type: Boolean,
+    default: () => true
+  },
+  pure: {
+    type: Boolean,
+    default: false
+  },
+  showBack: {
+    type: Boolean,
+    default: false
+  },
+  contentStyle: {
+    type: Object,
+    default: () => ({})
+  },
+  onBack: {
+    type: Function
+  }
+};
+const renderFooter = props => {
+  const {
+    tabList,
+    tabActiveKey,
+    onTabChange,
+    tabBarExtraContent,
+    tabProps
+  } = props;
+  const tabPane = item => {
+    return <span class={item.class || `tab-pane-${item.key}`}>{item.tab}</span>;
+  };
+  if (tabList && tabList.length) {
+    return <Tabs class="page-container-tabs" activeKey={tabActiveKey} onChange={key => {
+      if (onTabChange) {
+        onTabChange(key);
+      }
+    }} tabBarExtraContent={tabBarExtraContent} {...tabProps}>
+        {tabList.map(item => <Tabs.TabPane {...item} tab={tabPane(item)} key={item.key} />)}
+      </Tabs>;
+  }
+  return null;
+};
+const renderPageHeader = (content, extraContent, prefixedClassName) => {
+  if (!content && !extraContent) {
+    return null;
+  }
+  return <div class={`${prefixedClassName}-detail`}>
+      <div class={`${prefixedClassName}-main`}>
+        <div class={`${prefixedClassName}-row`}>
+          {content && <div class={`${prefixedClassName}-content`}>
+              {typeof content === 'function' && content() || content}
+            </div>}
+          {extraContent && <div class={`${prefixedClassName}-extraContent`}>
+              {typeof extraContent === 'function' && extraContent() || extraContent}
+            </div>}
+        </div>
+      </div>
+    </div>;
+};
+const ProPageHeader = props => {
+  const {
+    title,
+    tabList,
+    tabActiveKey,
+    content,
+    pageHeaderRender,
+    header,
+    extraContent,
+    prefixedClassName,
+    prefixCls,
+    fixedHeader: _,
+    showBack,
+    onBack,
+    ...restProps
+  } = props;
+  const value = useRouteContext();
+  const [contextLocale] = useLocaleReceiver('ProLayout');
+  if (pageHeaderRender === false) {
+    return null;
+  }
+  if (pageHeaderRender) {
+    return pageHeaderRender({
+      ...props
+    });
+  }
+  let pageHeaderTitle = title;
+  if (!title && title !== false) {
+    pageHeaderTitle = value.title;
+  }
+  const unrefBreadcrumb = unref(value.breadcrumb || {});
+  const breadcrumb = props.breadcrumb || {
+    ...unrefBreadcrumb,
+    routes: unrefBreadcrumb.routes,
+    itemRender: unrefBreadcrumb.itemRender
+  };
+  const backProps = {};
+  if (showBack) {
+    // @ts-ignore
+    backProps.backIcon = <Button>{contextLocale.value.pageContainer.back}</Button>;
+    backProps.onBack = () => {
+      if (props.onBack) {
+        props.onBack();
+      } else {
+        value.back?.();
+      }
+    };
+  }
+  const styles = value.layoutType === LayoutType.CARD ? {
+    padding: props.extra || props.subTitle || pageHeaderTitle || tabList || props.extraContent || props.showBack || props.title ? '16px 24px' : '0px'
+  } : {};
+  return <div class={`${prefixedClassName}-wrap`}>
+      <PageHeader style={styles} {...backProps} {...restProps} title={pageHeaderTitle} breadcrumb={value.layoutType === LayoutType.LIST ? breadcrumb : null} footer={renderFooter({
+      ...restProps,
+      tabList,
+      tabActiveKey
+    })} prefixCls={prefixCls}>
+        {header || renderPageHeader(content, extraContent, prefixedClassName)}
+      </PageHeader>
+    </div>;
+};
+const PageContainer = defineComponent({
+  name: 'JPageContainer',
+  inheritAttrs: false,
+  props: pageContainerProps,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const {
+      loading,
+      affixProps,
+      ghost,
+      childrenFullHeight
+    } = toRefs(props);
+    const value = useRouteContext();
+    const getPrefixCls = value.getPrefixCls;
+    const prefixCls = props.prefixCls || getPrefixCls();
+    const stylePrefixCls = computed(() => 'pro-layout');
+    const [wrapSSR, hashId] = useProLayoutStyle(stylePrefixCls);
+    const prefixedClassName = computed(() => `${prefixCls}-page-container`);
+    const classNames = computed(() => ({
+      [hashId.value]: true,
+      [prefixedClassName.value]: true,
+      [`${prefixCls}-page-container-ghost`]: ghost.value
+    }));
+    const headerDom = computed(() => {
+      // const tags = getSlotVNode<DefaultPropRender>(slots, props, 'tags');
+      const headerContent = getSlotVNode(slots, props, 'content');
+      const extra = getSlotVNode(slots, props, 'extra');
+      const extraContent = getSlotVNode(slots, props, 'extraContent');
+      const subTitle = getSlotVNode(slots, props, 'subTitle');
+      const title = getSlotVNode(slots, props, 'title');
+      // @ts-ignore
+      return <ProPageHeader {...props} prefixCls={undefined} prefixedClassName={prefixedClassName.value} ghost={ghost.value} title={title} subTitle={subTitle} content={headerContent} extra={extra} extraContent={extraContent} />;
+    });
+    return () => {
+      const {
+        fixedHeader,
+        pure
+      } = props;
+      return <>
+          {pure ? <div class={classNames.value}>
+              {slots.default?.()}
+            </div> : <div class={classNames.value} style={{
+          ...(attrs.style || {})
+        }}>
+              {fixedHeader && headerDom.value ? <Affix {...affixProps.value} offsetTop={value.hasHeader && value.fixedHeader ? value.headerHeight : 0}>
+                  {headerDom.value}
+                </Affix> : headerDom.value}
+              <div class={`${prefixedClassName.value}-grid-content`}>
+                {loading.value ? <Spin /> : slots.default ? <div>
+                    <div class={`${prefixedClassName.value}-children-content ${childrenFullHeight.value ? 'children-full-height' : ''} ${hashId.value}`} style={{
+                ...(props.contentStyle || {})
+              }}>
+                      {slots.default()}
+                    </div>
+                    {value.hasFooterToolbar && <div style={{
+                height: 48,
+                marginTop: 24
+              }} />}
+                  </div> : null}
+              </div>
+            </div>}
+        </>;
+    };
+  }
+});
+export default withInstall(PageContainer);