@meethive/components 0.0.1

package/lib/ProLayout/PageContainer/index.js

@@ -0,0 +1,354 @@
+ 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 = {
+  /**
+   * @name tabs 的列表
+   */
+  tabList: {
+    type: [Object, Function, Array],
+    default: () => undefined
+  },
+  /**
+   * @name 当前选中 tab 的 key
+   */
+  tabActiveKey: String,
+  /**
+   * @name tab 上多余的区域
+   */
+  tabBarExtraContent: {
+    type: [Object, Function],
+    default: () => undefined
+  },
+  /**
+   * @name tabs 的其他配置
+   */
+  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)

package/lib/ProLayout/PageContainer/style.js

@@ -0,0 +1,85 @@
+export const genPageContainerStyle = (config) => {
+  const { token } = config
+  const proLayoutPageContainerCls = `${token.antCls}-pro-page-container`
+
+  return {
+    [`${proLayoutPageContainerCls}-children-content`]: {
+      margin: '24px 24px 0'
+    },
+    [`${proLayoutPageContainerCls}`]: {
+      [`${proLayoutPageContainerCls}-warp`]: {
+        backgroundColor: token.colorBgContainer,
+        [`${token.antCls}-tabs-bar`]: {
+          margin: 0
+        }
+      },
+      [`${proLayoutPageContainerCls}-ghost`]: {
+        [`${proLayoutPageContainerCls}-warp`]: {
+          backgroundColor: token.colorBgContainer
+        }
+      }
+    },
+    [`${proLayoutPageContainerCls}-main`]: {
+      [`${proLayoutPageContainerCls}-detail`]: {
+        display: 'flex'
+      },
+      [`${proLayoutPageContainerCls}-row`]: {
+        display: 'flex',
+        width: '100%'
+      },
+      [`${proLayoutPageContainerCls}-title-content`]: {
+        marginBottom: '16px'
+      },
+      [`${proLayoutPageContainerCls}-title,${proLayoutPageContainerCls}-content`]: {
+        flex: 'auto'
+      },
+      [`${proLayoutPageContainerCls}-extraContent,${proLayoutPageContainerCls}-main`]: {
+        flex: '0 1 auto'
+      },
+      [`${proLayoutPageContainerCls}-title`]: {
+        marginBottom: '16px'
+      },
+      [`${proLayoutPageContainerCls}-logo`]: {
+        marginBottom: '16px'
+      },
+      [`${proLayoutPageContainerCls}-extraContent`]: {
+        minWidth: '242px',
+        marginLeft: '88px',
+        textAlign: 'right'
+      }
+    },
+    [`@media screen and (max-width: ${token.screenXl}px)`]: {
+      [`${proLayoutPageContainerCls}-main`]: {
+        [`${proLayoutPageContainerCls}-extraContent`]: {
+          marginLeft: '44px'
+        }
+      }
+    },
+    [`@media screen and (max-width: ${token.screenLG}px)`]: {
+      [`${proLayoutPageContainerCls}-main`]: {
+        [`${proLayoutPageContainerCls}-extraContent`]: {
+          marginLeft: '20px'
+        }
+      }
+    },
+    [`@media screen and (max-width: ${token.screenMD}px)`]: {
+      [`${proLayoutPageContainerCls}-main`]: {
+        [`${proLayoutPageContainerCls}-row`]: {
+          display: 'block'
+        },
+        [`${proLayoutPageContainerCls}-extraContent,${proLayoutPageContainerCls}-action`]: {
+          marginLeft: 0,
+          textAlign: 'left'
+        }
+      }
+    },
+    [`@media screen and (max-width: ${token.screenSM}px)`]: {
+      [`${proLayoutPageContainerCls}-detail`]: {
+        display: 'block'
+      },
+      [`${proLayoutPageContainerCls}-extraContent`]: {
+        marginLeft: 0
+      }
+    }
+  }
+}

package/lib/ProLayout/RouteContext.js

@@ -0,0 +1,28 @@
+import { provide, reactive } from 'vue'
+import { useContext } from '@meethive/hooks'
+
+export const defaultPrefixCls = 'ant-pro'
+
+export const getPrefixCls = (suffixCls, customizePrefixCls) => {
+  if (customizePrefixCls) return customizePrefixCls
+  return suffixCls ? `${defaultPrefixCls}-${suffixCls}` : defaultPrefixCls
+}
+
+export const defaultRouteContext = reactive({
+  getPrefixCls: getPrefixCls,
+  locale: (t) => {
+    return t
+  },
+  contentWidth: 'Fluid',
+  hasFooterToolbar: false
+})
+
+export const routeContextInjectKey = Symbol('jetlinks-route-context')
+
+export const provideRouteContext = (value) => {
+  provide(routeContextInjectKey, value)
+}
+
+export const useRouteContext = () => {
+  return useContext(routeContextInjectKey, defaultRouteContext)
+}

package/lib/ProLayout/SiderMenu/BaseMenu.js

@@ -0,0 +1,241 @@
+ 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, watchEffect, isVNode, resolveComponent, getCurrentInstance, withCtx, } from 'vue'
+import { Menu } from 'ant-design-vue'
+import { createFromIconfontCN } from '@ant-design/icons-vue'
+import { defaultSettingProps } from '../defaultSettings'
+import { defaultPrefixCls } from '../RouteContext'
+import IconFont from '../../Icon'
+import { regular } from '@meethive/utils'
+
+let AntdIconFont = createFromIconfontCN({
+  scriptUrl: ''
+})
+
+const LazyIcon = (props) => {
+  const { icon, iconUrl, prefixCls = defaultPrefixCls } = props
+  if (!icon) return null
+  if (isVNode(icon)) {
+    return icon
+  }
+  if (typeof icon === 'string' && icon !== '') {
+    if (regular.isUrl(icon) || regular.isImg(icon)) {
+      return (
+        React.createElement('img', {
+          src: icon,
+          alt: "icon",
+          class: `${prefixCls}-sider-menu-icon`,}
+        )
+      )
+    }
+    return iconUrl
+      ? React.createElement(AntdIconFont, { type: icon,} )
+      : React.createElement(IconFont, { type: icon,} )
+  }
+  return null
+}
+
+export const baseMenuProps = {
+  ...defaultSettingProps,
+  prefixCls: {
+    type: String,
+    default: defaultPrefixCls
+  },
+  locale: {
+    type: [Function, Boolean],
+    default: (t) => t
+  },
+  menuData: {
+    type: Array,
+    default: () => []
+  },
+  mode: {
+    type: String,
+    default: 'inline'
+  },
+  theme: {
+    type: String,
+    default: 'dark'
+  },
+  collapsed: {
+    type: Boolean,
+    default: () => false
+  },
+  openKeys: {
+    type: Array,
+    default: () => undefined
+  },
+  selectedKeys: {
+    type: Array,
+    default: () => undefined
+  },
+  menuProps: {
+    type: Object,
+    default: () => null
+  },
+  menuItemRender: {
+    type: [Object, Function, Boolean],
+    default: () => undefined
+  },
+  subMenuItemRender: {
+    type: [Object, Function, Boolean],
+    default: () => undefined
+  },
+  onClick: [Function, Object]
+}
+
+// MenuUtil class for recursive menu rendering (matching ES source)
+class MenuUtil {
+  
+  
+  
+
+  constructor(_props, ctx) {;MenuUtil.prototype.__init.call(this);MenuUtil.prototype.__init2.call(this);MenuUtil.prototype.__init3.call(this);
+    this.props = _props
+    this.ctx = ctx
+    this.RouterLink = resolveComponent('router-link')
+  }
+
+  __init() {this.getNavMenuItems = (menusData = []) => {
+    return menusData.map((item) => this.getSubMenuOrItem(item)).filter((item) => item)
+  }}
+
+  __init2() {this.getSubMenuOrItem = (item) => {
+    if (
+      Array.isArray(item.children) &&
+      item.children.length > 0 &&
+      !_optionalChain([item, 'access', _27 => _27.meta, 'optionalAccess', _28 => _28.hideInMenu]) &&
+      !_optionalChain([item, 'access', _29 => _29.meta, 'optionalAccess', _30 => _30.hideChildrenInMenu])
+    ) {
+      if (this.props.subMenuItemRender) {
+        const subMenuItemRender = withCtx(this.props.subMenuItemRender, this.ctx)
+        return subMenuItemRender({
+          item,
+          children: this.getNavMenuItems(item.children)
+        })
+      }
+      const { prefixCls, locale } = this.props
+      const menuTitle = locale && locale(_optionalChain([item, 'access', _31 => _31.meta, 'optionalAccess', _32 => _32.title])) || _optionalChain([item, 'access', _33 => _33.meta, 'optionalAccess', _34 => _34.title])
+      const defaultTitle = _optionalChain([item, 'access', _35 => _35.meta, 'optionalAccess', _36 => _36.icon])
+        ? React.createElement('span', { class: `${prefixCls}-menu-item`,}
+            , React.createElement('span', { class: `${prefixCls}-menu-item-title`,}, menuTitle)
+          )
+        : React.createElement('span', { class: `${prefixCls}-menu-item`,}, menuTitle)
+
+      return (
+        React.createElement(Menu.SubMenu, {
+          title: defaultTitle,
+          key: item.key || item.path,
+          popupClassName: `${prefixCls}-menu-popup`,
+          icon: React.createElement(LazyIcon, { iconUrl: this.props.iconfontUrl, icon: _optionalChain([item, 'access', _37 => _37.meta, 'optionalAccess', _38 => _38.icon]),} ),}
+
+          , this.getNavMenuItems(item.children)
+        )
+      )
+    }
+
+    const menuItemRender = this.props.menuItemRender && withCtx(this.props.menuItemRender, this.ctx)
+    const [title, icon] = this.getMenuItem(item)
+
+    return (
+      menuItemRender &&
+      menuItemRender({
+        item,
+        title,
+        icon
+      })
+    ) || (
+      React.createElement(Menu.Item, {
+        disabled: _optionalChain([item, 'access', _39 => _39.meta, 'optionalAccess', _40 => _40.disabled]),
+        danger: _optionalChain([item, 'access', _41 => _41.meta, 'optionalAccess', _42 => _42.danger]),
+        key: item.key || item.path,}
+
+        , title
+      )
+    )
+  }}
+
+  __init3() {this.getMenuItem = (item) => {
+    const meta = { ...item.meta }
+    const target = meta.target || null
+    const hasUrl = regular.isUrl(item.path)
+    const CustomTag = (target && 'a') || this.RouterLink
+    const routerProps = {
+      to: {
+        name: item.name,
+        ...item.meta
+      }
+    }
+    const attrs = hasUrl || target ? {
+      ...item.meta,
+      href: item.path,
+      target: target
+    } : {}
+    const { prefixCls, locale } = this.props
+    const icon = _optionalChain([item, 'access', _43 => _43.meta, 'optionalAccess', _44 => _44.icon]) && (
+      React.createElement(LazyIcon, { iconUrl: this.props.iconfontUrl, icon: _optionalChain([item, 'access', _45 => _45.meta, 'optionalAccess', _46 => _46.icon]),} )
+    ) || undefined
+    const menuTitle = locale && locale(_optionalChain([item, 'access', _47 => _47.meta, 'optionalAccess', _48 => _48.title])) || _optionalChain([item, 'access', _49 => _49.meta, 'optionalAccess', _50 => _50.title])
+    const defaultTitle = _optionalChain([item, 'access', _51 => _51.meta, 'optionalAccess', _52 => _52.icon])
+      ? React.createElement(CustomTag, { ...attrs, ...routerProps, class: `${prefixCls}-menu-item`,}
+          , icon
+          , React.createElement('span', { class: `${prefixCls}-menu-item-title`,}, menuTitle)
+        )
+      : React.createElement(CustomTag, { ...attrs, ...routerProps, class: `${prefixCls}-menu-item`,}
+          , React.createElement('span', null, menuTitle)
+        )
+    return [defaultTitle, icon]
+  }}
+}
+
+export default defineComponent({
+  name: 'BaseMenu',
+  props: baseMenuProps ,
+  emits: ['update:openKeys', 'update:selectedKeys', 'click'],
+  setup(props, { emit }) {
+    const ctx = getCurrentInstance()
+    const menuUtil = new MenuUtil(props, ctx)
+
+    watchEffect(() => {
+      if (props.iconfontUrl) {
+        AntdIconFont = createFromIconfontCN({
+          scriptUrl: props.iconfontUrl
+        })
+      }
+    })
+
+    const handleOpenChange = (openKeys) => {
+      emit('update:openKeys', openKeys)
+    }
+
+    const handleSelect = (args) => {
+      // ignore https? link handle selectkeys
+      if (regular.isUrl(args.key)) {
+        return
+      }
+      emit('update:selectedKeys', args.selectedKeys)
+    }
+
+    const handleClick = (args) => {
+      emit('click', args)
+    }
+
+    return () => {
+      return (
+        React.createElement(Menu, {
+          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,}
+
+          , menuUtil.getNavMenuItems(props.menuData)
+        )
+      )
+    }
+  }
+})