@antsoo-lib/components 0.1.11 → 0.1.13

package/src/menu/src/SubMenu.tsx

@@ -1,376 +0,0 @@
-import type { ExtractPropTypes, PropType } from 'vue'
-import {
-  computed,
-  defineComponent,
-  getCurrentInstance,
-  onBeforeUnmount,
-  shallowRef,
-  watch,
-} from 'vue'
-
-import type { MouseEventHandler } from '../../_util/EventInterface'
-import classNames from '../../_util/classNames'
-import isValid from '../../_util/isValid'
-import { getPropsSlot, isValidElement } from '../../_util/props-util'
-import type { CustomSlotsType, Key } from '../../_util/type'
-import { objectType } from '../../_util/type'
-import { cloneElement } from '../../_util/vnode'
-import PropTypes from '../../_util/vue-types'
-import Overflow from '../../vc-overflow'
-import devWarning from '../../vc-util/devWarning'
-import InlineSubMenuList from './InlineSubMenuList'
-import PopupTrigger from './PopupTrigger'
-import SubMenuList from './SubMenuList'
-import useDirectionStyle from './hooks/useDirectionStyle'
-import useProvideKeyPath, { useInjectKeyPath, useMeasure } from './hooks/useKeyPath'
-import {
-  MenuContextProvider,
-  useInjectForceRender,
-  useInjectMenu,
-  useProvideFirstLevel,
-  useProvideForceRender,
-} from './hooks/useMenuContext'
-import type { ItemType, MenuTheme } from './interface'
-
-let indexGuid = 0
-
-export const subMenuProps = () => ({
-  icon: PropTypes.any,
-  title: PropTypes.any,
-  disabled: Boolean,
-  level: Number,
-  popupClassName: String,
-  popupOffset: Array as unknown as PropType<[number, number]>,
-  internalPopupClose: Boolean,
-  eventKey: String,
-  expandIcon: Function as PropType<(p?: { isOpen: boolean; [key: string]: any }) => any>,
-  theme: String as PropType<MenuTheme>,
-  mode: String as PropType<'vertical' | 'horizontal' | 'inline'>,
-  onMouseenter: Function as PropType<MouseEventHandler>,
-  onMouseleave: Function as PropType<MouseEventHandler>,
-  onTitleClick: Function as PropType<(e: MouseEvent, key: Key) => void>,
-
-  // Internal user prop
-  originItemValue: objectType<ItemType>(),
-})
-
-export type SubMenuProps = Partial<ExtractPropTypes<ReturnType<typeof subMenuProps>>>
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ASubMenu',
-  inheritAttrs: false,
-  props: subMenuProps(),
-  slots: Object as CustomSlotsType<{
-    icon?: any
-    title?: any
-    expandIcon?: { isOpen: boolean; [key: string]: any }
-    default?: any
-  }>,
-  setup(props, { slots, attrs, emit }) {
-    useProvideFirstLevel(false)
-    const isMeasure = useMeasure()
-    const instance = getCurrentInstance()
-    const vnodeKey =
-      typeof instance.vnode.key === 'symbol' ? String(instance.vnode.key) : instance.vnode.key
-    devWarning(
-      typeof instance.vnode.key !== 'symbol',
-      'SubMenu',
-      `SubMenu \`:key="${String(vnodeKey)}"\` not support Symbol type`,
-    )
-    const key = isValid(vnodeKey) ? vnodeKey : `sub_menu_${++indexGuid}_$$_not_set_key`
-    const eventKey =
-      props.eventKey ??
-      (isValid(vnodeKey) ? `sub_menu_${++indexGuid}_$$_${vnodeKey}` : (key as string))
-    const { parentEventKeys, parentInfo, parentKeys } = useInjectKeyPath()
-    const keysPath = computed(() => [...parentKeys.value, key])
-    const childrenEventKeys = shallowRef([])
-    const menuInfo = {
-      eventKey,
-      key,
-      parentEventKeys,
-      childrenEventKeys,
-      parentKeys,
-    }
-    parentInfo.childrenEventKeys?.value.push(eventKey)
-    onBeforeUnmount(() => {
-      if (parentInfo.childrenEventKeys) {
-        parentInfo.childrenEventKeys.value = parentInfo.childrenEventKeys?.value.filter(
-          (k) => k != eventKey,
-        )
-      }
-    })
-
-    useProvideKeyPath(eventKey, key, menuInfo)
-
-    const {
-      prefixCls,
-      activeKeys,
-      disabled: contextDisabled,
-      changeActiveKeys,
-      mode: contextMode,
-      inlineCollapsed,
-      openKeys,
-      overflowDisabled,
-      onOpenChange,
-      registerMenuInfo,
-      unRegisterMenuInfo,
-      selectedSubMenuKeys,
-      expandIcon: menuExpandIcon,
-      theme,
-    } = useInjectMenu()
-
-    // 优先使用props传入的mode，否则使用上下文中的mode
-    const mode = computed(() => props.mode || contextMode.value)
-
-    const hasKey = vnodeKey !== undefined && vnodeKey !== null
-    // If not set key, use forceRender = true for children
-    // 如果没有 key，强制 render 子元素
-    const forceRender = !isMeasure && (useInjectForceRender() || !hasKey)
-    useProvideForceRender(forceRender)
-
-    if ((isMeasure && hasKey) || (!isMeasure && !hasKey) || forceRender) {
-      registerMenuInfo(eventKey, menuInfo)
-
-      onBeforeUnmount(() => {
-        unRegisterMenuInfo(eventKey)
-      })
-    }
-
-    const subMenuPrefixCls = computed(() => `${prefixCls.value}-submenu`)
-    const mergedDisabled = computed(() => contextDisabled.value || props.disabled)
-    const elementRef = shallowRef()
-    const popupRef = shallowRef()
-
-    // // ================================ Icon ================================
-    // const mergedItemIcon = itemIcon || contextItemIcon;
-    // const mergedExpandIcon = expandIcon || contextExpandIcon;
-
-    // ================================ Open ================================
-    const originOpen = computed(() => openKeys.value.includes(key))
-    const open = computed(() => !overflowDisabled.value && originOpen.value)
-
-    // =============================== Select ===============================
-    const childrenSelected = computed(() => {
-      return selectedSubMenuKeys.value.includes(key)
-    })
-
-    const isActive = shallowRef(false)
-    watch(
-      activeKeys,
-      () => {
-        isActive.value = !!activeKeys.value.find((val) => val === key)
-      },
-      { immediate: true },
-    )
-
-    // =============================== Events ===============================
-    // >>>> Title click
-    const onInternalTitleClick = (e: Event) => {
-      // Skip if disabled
-      if (mergedDisabled.value) {
-        return
-      }
-      emit('titleClick', e, key)
-
-      // Trigger open by click when mode is `inline`
-      if (mode.value === 'inline') {
-        onOpenChange(key, !originOpen.value)
-      }
-    }
-
-    const onMouseEnter = (event: MouseEvent) => {
-      if (!mergedDisabled.value) {
-        changeActiveKeys(keysPath.value)
-        emit('mouseenter', event)
-      }
-    }
-    const onMouseLeave = (event: MouseEvent) => {
-      if (!mergedDisabled.value) {
-        changeActiveKeys([])
-        emit('mouseleave', event)
-      }
-    }
-
-    // ========================== DirectionStyle ==========================
-    const directionStyle = useDirectionStyle(computed(() => keysPath.value.length))
-
-    // >>>>> Visible change
-    const onPopupVisibleChange = (newVisible: boolean) => {
-      if (mode.value !== 'inline') {
-        onOpenChange(key, newVisible)
-      }
-    }
-
-    /**
-     * Used for accessibility. Helper will focus element without key board.
-     * We should manually trigger an active
-     */
-    const onInternalFocus = () => {
-      changeActiveKeys(keysPath.value)
-    }
-
-    // =============================== Render ===============================
-    const popupId = eventKey && `${eventKey}-popup`
-
-    const popupClassName = computed(() =>
-      classNames(
-        prefixCls.value,
-        `${prefixCls.value}-${props.theme || theme.value}`,
-        props.popupClassName,
-      ),
-    )
-    const renderTitle = (title: any, icon: any) => {
-      if (!icon) {
-        return inlineCollapsed.value &&
-          !parentKeys.value.length &&
-          title &&
-          typeof title === 'string' ? (
-          <div class={`${prefixCls.value}-inline-collapsed-noicon`}>{title.charAt(0)}</div>
-        ) : (
-          <span class={`${prefixCls.value}-title-content`}>{title}</span>
-        )
-      }
-      // inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span
-      // ref: https://github.com/ant-design/ant-design/pull/23456
-      const titleIsSpan = isValidElement(title) && title.type === 'span'
-      return (
-        <>
-          {cloneElement(
-            typeof icon === 'function' ? icon(props.originItemValue) : icon,
-            {
-              class: `${prefixCls.value}-item-icon`,
-            },
-            false,
-          )}
-          {titleIsSpan ? title : <span class={`${prefixCls.value}-title-content`}>{title}</span>}
-        </>
-      )
-    }
-
-    // Cache mode if it change to `inline` which do not have popup motion
-    const triggerModeRef = computed(() => {
-      return mode.value !== 'inline' && keysPath.value.length > 1 ? 'vertical' : mode.value
-    })
-
-    const renderMode = computed(() => (mode.value === 'horizontal' ? 'vertical' : mode.value))
-
-    const subMenuTriggerModeRef = computed(() =>
-      triggerModeRef.value === 'horizontal' ? 'vertical' : triggerModeRef.value,
-    )
-    const baseTitleNode = () => {
-      const subMenuPrefixClsValue = subMenuPrefixCls.value
-      const icon = props.icon ?? slots.icon?.(props)
-      const expandIcon = props.expandIcon || slots.expandIcon || menuExpandIcon.value
-      const title = renderTitle(getPropsSlot(slots, props, 'title'), icon)
-      return (
-        <div
-          style={directionStyle.value}
-          class={`${subMenuPrefixClsValue}-title`}
-          tabindex={mergedDisabled.value ? null : -1}
-          ref={elementRef}
-          title={typeof title === 'string' ? title : null}
-          data-menu-id={key}
-          aria-expanded={open.value}
-          aria-haspopup
-          aria-controls={popupId}
-          aria-disabled={mergedDisabled.value}
-          onClick={onInternalTitleClick}
-          onFocus={onInternalFocus}
-        >
-          {title}
-
-          {/* Only non-horizontal mode shows the icon */}
-          {mode.value !== 'horizontal' && expandIcon ? (
-            expandIcon({ ...props, isOpen: open.value })
-          ) : (
-            <i class={`${subMenuPrefixClsValue}-arrow`} />
-          )}
-        </div>
-      )
-    }
-    return () => {
-      if (isMeasure) {
-        if (!hasKey) {
-          return null
-        }
-        return slots.default?.()
-      }
-      const subMenuPrefixClsValue = subMenuPrefixCls.value
-      let titleNode = () => null
-      if (!overflowDisabled.value && mode.value !== 'inline') {
-        const popupOffset = mode.value === 'horizontal' ? [0, 8] : [10, 0]
-        titleNode = () => (
-          <PopupTrigger
-            mode={triggerModeRef.value}
-            prefixCls={subMenuPrefixClsValue}
-            visible={!props.internalPopupClose && open.value}
-            popupClassName={popupClassName.value}
-            popupOffset={props.popupOffset || popupOffset}
-            disabled={mergedDisabled.value}
-            onVisibleChange={onPopupVisibleChange}
-            v-slots={{
-              popup: () => (
-                <MenuContextProvider mode={subMenuTriggerModeRef.value}>
-                  <SubMenuList
-                    id={popupId}
-                    ref={popupRef}
-                    v-slots={{ default: slots.default }}
-                  ></SubMenuList>
-                </MenuContextProvider>
-              ),
-            }}
-          >
-            {baseTitleNode()}
-          </PopupTrigger>
-        )
-      } else {
-        // 包裹一层，保持结构一致，防止动画丢失
-        // https://github.com/vueComponent/ant-design-vue/issues/4325
-        titleNode = () => <PopupTrigger v-slots={{ default: baseTitleNode }}></PopupTrigger>
-      }
-      return (
-        <MenuContextProvider mode={renderMode.value}>
-          <Overflow.Item
-            component="li"
-            {...attrs}
-            role="none"
-            class={classNames(
-              subMenuPrefixClsValue,
-              `${subMenuPrefixClsValue}-${mode.value}`,
-              attrs.class,
-              {
-                [`${subMenuPrefixClsValue}-open`]: open.value,
-                [`${subMenuPrefixClsValue}-active`]: isActive.value,
-                [`${subMenuPrefixClsValue}-selected`]: childrenSelected.value,
-                [`${subMenuPrefixClsValue}-disabled`]: mergedDisabled.value,
-              },
-            )}
-            onMouseenter={onMouseEnter}
-            onMouseleave={onMouseLeave}
-            data-submenu-id={key}
-            v-slots={{
-              default: () => {
-                return (
-                  <>
-                    {titleNode()}
-
-                    {/* Inline mode */}
-                    {!overflowDisabled.value && (
-                      <InlineSubMenuList
-                        id={popupId}
-                        open={open.value}
-                        keyPath={keysPath.value}
-                        v-slots={{ default: slots.default }}
-                      ></InlineSubMenuList>
-                    )}
-                  </>
-                )
-              },
-            }}
-          ></Overflow.Item>
-        </MenuContextProvider>
-      )
-    }
-  },
-})

package/src/menu/src/SubMenuList.tsx

@@ -1,25 +0,0 @@
-import type { FunctionalComponent } from 'vue'
-
-import classNames from '../../_util/classNames'
-import { useInjectMenu } from './hooks/useMenuContext'
-
-const InternalSubMenuList: FunctionalComponent<any> = (_props, { slots, attrs }) => {
-  const { prefixCls, mode } = useInjectMenu()
-  return (
-    <ul
-      {...attrs}
-      class={classNames(
-        prefixCls.value,
-        `${prefixCls.value}-sub`,
-        `${prefixCls.value}-${mode.value === 'inline' ? 'inline' : 'vertical'}`,
-      )}
-      data-menu-list
-    >
-      {slots.default?.()}
-    </ul>
-  )
-}
-
-InternalSubMenuList.displayName = 'SubMenuList'
-
-export default InternalSubMenuList

package/src/menu/src/hooks/useDirectionStyle.ts

@@ -1,16 +0,0 @@
-import type { CSSProperties, ComputedRef } from 'vue'
-import { computed } from 'vue'
-
-import { useInjectMenu } from './useMenuContext'
-
-export default function useDirectionStyle(level: ComputedRef<number>): ComputedRef<CSSProperties> {
-  const { mode, rtl, inlineIndent } = useInjectMenu()
-
-  return computed(() =>
-    mode.value !== 'inline'
-      ? null
-      : rtl.value
-        ? { paddingRight: `${level.value * inlineIndent.value}px` }
-        : { paddingLeft: `${level.value * inlineIndent.value}px` },
-  )
-}

package/src/menu/src/hooks/useItems.tsx

@@ -1,137 +0,0 @@
-import type { VNode } from 'vue'
-import { ref, shallowRef, watch } from 'vue'
-
-import type { Key } from '../../../_util/type'
-import MenuDivider from '../Divider'
-import ItemGroup from '../ItemGroup'
-import type { MenuProps } from '../Menu'
-import MenuItem from '../MenuItem'
-import SubMenu from '../SubMenu'
-import type {
-  MenuDividerType as VcMenuDividerType,
-  MenuItemGroupType as VcMenuItemGroupType,
-  MenuItemType as VcMenuItemType,
-  SubMenuType as VcSubMenuType,
-} from '../interface'
-import type { StoreMenuInfo } from './useMenuContext'
-
-export interface MenuItemType extends VcMenuItemType {
-  danger?: boolean
-  icon?: VNode | ((item: MenuItemType) => VNode)
-  title?: string
-}
-
-export interface SubMenuType extends Omit<VcSubMenuType, 'children'> {
-  icon?: VNode | ((item: SubMenuType) => VNode)
-  children: ItemType[]
-}
-
-export interface MenuItemGroupType extends Omit<VcMenuItemGroupType, 'children'> {
-  children?: MenuItemType[]
-  key?: Key
-}
-
-export interface MenuDividerType extends VcMenuDividerType {
-  dashed?: boolean
-  key?: Key
-}
-
-export type ItemType = MenuItemType | SubMenuType | MenuItemGroupType | MenuDividerType | null
-
-function convertItemsToNodes(
-  list: ItemType[],
-  store: Map<string, StoreMenuInfo>,
-  parentMenuInfo?: {
-    childrenEventKeys: string[]
-    parentKeys: string[]
-  },
-) {
-  return (list || [])
-    .map((opt, index) => {
-      if (opt && typeof opt === 'object') {
-        const { label, children, key, type, ...restProps } = opt as any
-        const mergedKey = key ?? `tmp-${index}`
-        // 此处 eventKey === key, 移除 children 后可以移除 eventKey
-        const parentKeys = parentMenuInfo ? parentMenuInfo.parentKeys.slice() : []
-        const childrenEventKeys = []
-        // if
-        const menuInfo = {
-          eventKey: mergedKey,
-          key: mergedKey,
-          parentEventKeys: ref<string[]>(parentKeys),
-          parentKeys: ref<string[]>(parentKeys),
-          childrenEventKeys: ref<string[]>(childrenEventKeys),
-          isLeaf: false,
-        }
-
-        // MenuItemGroup & SubMenuItem
-        if (children || type === 'group') {
-          if (type === 'group') {
-            const childrenNodes = convertItemsToNodes(children, store, parentMenuInfo)
-            // Group
-            return (
-              <ItemGroup key={mergedKey} {...restProps} title={label} originItemValue={opt}>
-                {childrenNodes}
-              </ItemGroup>
-            )
-          }
-          store.set(mergedKey, menuInfo)
-          if (parentMenuInfo) {
-            parentMenuInfo.childrenEventKeys.push(mergedKey)
-          }
-          // Sub Menu
-          const childrenNodes = convertItemsToNodes(children, store, {
-            childrenEventKeys,
-            parentKeys: [].concat(parentKeys, mergedKey),
-          })
-          return (
-            <SubMenu key={mergedKey} {...restProps} title={label} originItemValue={opt}>
-              {childrenNodes}
-            </SubMenu>
-          )
-        }
-
-        // MenuItem & Divider
-        if (type === 'divider') {
-          return <MenuDivider key={mergedKey} {...restProps} />
-        }
-        menuInfo.isLeaf = true
-        store.set(mergedKey, menuInfo)
-        return (
-          <MenuItem key={mergedKey} {...restProps} originItemValue={opt}>
-            {label}
-          </MenuItem>
-        )
-      }
-
-      return null
-    })
-    .filter((opt) => opt)
-}
-
-// FIXME: Move logic here in v4
-/**
- * We simply convert `items` to VueNode for reuse origin component logic. But we need move all the
- * logic from component into this hooks when in v4
- */
-export default function useItems(props: MenuProps) {
-  const itemsNodes = shallowRef([])
-  const hasItmes = shallowRef(false)
-  const store = shallowRef(new Map<string, StoreMenuInfo>())
-  watch(
-    () => props.items,
-    () => {
-      const newStore = new Map<string, StoreMenuInfo>()
-      hasItmes.value = false
-      if (props.items) {
-        hasItmes.value = true
-        itemsNodes.value = convertItemsToNodes(props.items as ItemType[], newStore)
-      } else {
-        itemsNodes.value = undefined
-      }
-      store.value = newStore
-    },
-    { immediate: true, deep: true },
-  )
-  return { itemsNodes, store, hasItmes }
-}

package/src/menu/src/hooks/useKeyPath.ts

@@ -1,46 +0,0 @@
-import type { ComputedRef, InjectionKey } from 'vue'
-import { computed, defineComponent, inject, provide } from 'vue'
-
-import type { Key } from '../../../_util/type'
-import type { StoreMenuInfo } from './useMenuContext'
-
-export const OVERFLOW_KEY = '$$__vc-menu-more__key'
-const KeyPathContext: InjectionKey<{
-  parentEventKeys: ComputedRef<string[]>
-  parentKeys: ComputedRef<Key[]>
-  parentInfo: StoreMenuInfo
-}> = Symbol('KeyPathContext')
-
-const useInjectKeyPath = () => {
-  return inject(KeyPathContext, {
-    parentEventKeys: computed(() => []),
-    parentKeys: computed(() => []),
-    parentInfo: {} as StoreMenuInfo,
-  })
-}
-
-const useProvideKeyPath = (eventKey: string, key: Key, menuInfo: StoreMenuInfo) => {
-  const { parentEventKeys, parentKeys } = useInjectKeyPath()
-  const eventKeys = computed(() => [...parentEventKeys.value, eventKey])
-  const keys = computed(() => [...parentKeys.value, key])
-  provide(KeyPathContext, { parentEventKeys: eventKeys, parentKeys: keys, parentInfo: menuInfo })
-  return keys
-}
-
-const measure = Symbol('measure')
-export const PathContext = defineComponent({
-  compatConfig: { MODE: 3 },
-  setup(_props, { slots }) {
-    // 不需要响应式
-    provide(measure, true)
-    return () => slots.default?.()
-  },
-})
-
-export const useMeasure = () => {
-  return inject(measure, false)
-}
-
-export { KeyPathContext, useInjectKeyPath, useProvideKeyPath }
-
-export default useProvideKeyPath