@antsoo-lib/components 0.1.11 → 0.1.12

package/src/drawer/style/index.ts

@@ -1,230 +0,0 @@
-import type { FullToken, GenerateStyle } from '../../theme/internal'
-import { genComponentStyleHook, mergeToken } from '../../theme/internal'
-import genMotionStyle from './motion'
-
-export interface ComponentToken {
-  zIndexPopup: number
-}
-
-export interface DrawerToken extends FullToken<'Drawer'> {
-  drawerFooterPaddingVertical: number
-  drawerFooterPaddingHorizontal: number
-}
-
-// =============================== Base ===============================
-const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
-  const {
-    componentCls,
-    zIndexPopup,
-    colorBgMask,
-    colorBgElevated,
-    motionDurationSlow,
-    motionDurationMid,
-    padding,
-    paddingLG,
-    fontSizeLG,
-    lineHeightLG,
-    lineWidth,
-    lineType,
-    colorSplit,
-    marginSM,
-    colorIcon,
-    colorIconHover,
-    colorText,
-    fontWeightStrong,
-    drawerFooterPaddingVertical,
-    drawerFooterPaddingHorizontal,
-  } = token
-
-  const wrapperCls = `${componentCls}-content-wrapper`
-
-  return {
-    [componentCls]: {
-      position: 'fixed',
-      inset: 0,
-      zIndex: zIndexPopup,
-      pointerEvents: 'none',
-
-      '&-pure': {
-        position: 'relative',
-        background: colorBgElevated,
-
-        [`&${componentCls}-left`]: {
-          boxShadow: token.boxShadowDrawerLeft,
-        },
-        [`&${componentCls}-right`]: {
-          boxShadow: token.boxShadowDrawerRight,
-        },
-        [`&${componentCls}-top`]: {
-          boxShadow: token.boxShadowDrawerUp,
-        },
-        [`&${componentCls}-bottom`]: {
-          boxShadow: token.boxShadowDrawerDown,
-        },
-      },
-
-      '&-inline': {
-        position: 'absolute',
-      },
-
-      // ====================== Mask ======================
-      [`${componentCls}-mask`]: {
-        position: 'absolute',
-        inset: 0,
-        zIndex: zIndexPopup,
-        background: colorBgMask,
-        pointerEvents: 'auto',
-      },
-
-      // ==================== Content =====================
-      [wrapperCls]: {
-        position: 'absolute',
-        zIndex: zIndexPopup,
-        transition: `all ${motionDurationSlow}`,
-
-        '&-hidden': {
-          display: 'none',
-        },
-      },
-
-      // Placement
-      [`&-left > ${wrapperCls}`]: {
-        top: 0,
-        bottom: 0,
-        left: {
-          _skip_check_: true,
-          value: 0,
-        },
-        boxShadow: token.boxShadowDrawerLeft,
-      },
-      [`&-right > ${wrapperCls}`]: {
-        top: 0,
-        right: {
-          _skip_check_: true,
-          value: 0,
-        },
-        bottom: 0,
-        boxShadow: token.boxShadowDrawerRight,
-      },
-      [`&-top > ${wrapperCls}`]: {
-        top: 0,
-        insetInline: 0,
-        boxShadow: token.boxShadowDrawerUp,
-      },
-      [`&-bottom > ${wrapperCls}`]: {
-        bottom: 0,
-        insetInline: 0,
-        boxShadow: token.boxShadowDrawerDown,
-      },
-
-      [`${componentCls}-content`]: {
-        width: '100%',
-        height: '100%',
-        overflow: 'auto',
-        background: colorBgElevated,
-        pointerEvents: 'auto',
-      },
-
-      // ===================== Panel ======================
-      [`${componentCls}-wrapper-body`]: {
-        display: 'flex',
-        flexDirection: 'column',
-        width: '100%',
-        height: '100%',
-      },
-
-      // Header
-      [`${componentCls}-header`]: {
-        display: 'flex',
-        flex: 0,
-        alignItems: 'center',
-        padding: `${padding}px ${paddingLG}px`,
-        fontSize: fontSizeLG,
-        lineHeight: lineHeightLG,
-        borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
-
-        '&-title': {
-          display: 'flex',
-          flex: 1,
-          alignItems: 'center',
-          minWidth: 0,
-          minHeight: 0,
-        },
-      },
-
-      [`${componentCls}-extra`]: {
-        flex: 'none',
-      },
-
-      [`${componentCls}-close`]: {
-        display: 'inline-block',
-        marginInlineEnd: marginSM,
-        color: colorIcon,
-        fontWeight: fontWeightStrong,
-        fontSize: fontSizeLG,
-        fontStyle: 'normal',
-        lineHeight: 1,
-        textAlign: 'center',
-        textTransform: 'none',
-        textDecoration: 'none',
-        background: 'transparent',
-        border: 0,
-        outline: 0,
-        cursor: 'pointer',
-        transition: `color ${motionDurationMid}`,
-        textRendering: 'auto',
-
-        '&:focus, &:hover': {
-          color: colorIconHover,
-          textDecoration: 'none',
-        },
-      },
-
-      [`${componentCls}-title`]: {
-        flex: 1,
-        margin: 0,
-        color: colorText,
-        fontWeight: token.fontWeightStrong,
-        fontSize: fontSizeLG,
-        lineHeight: lineHeightLG,
-      },
-
-      // Body
-      [`${componentCls}-body`]: {
-        flex: 1,
-        minWidth: 0,
-        minHeight: 0,
-        padding: paddingLG,
-        overflow: 'auto',
-      },
-
-      // Footer
-      [`${componentCls}-footer`]: {
-        flexShrink: 0,
-        padding: `${drawerFooterPaddingVertical}px ${drawerFooterPaddingHorizontal}px`,
-        borderTop: `${lineWidth}px ${lineType} ${colorSplit}`,
-      },
-
-      // ====================== RTL =======================
-      '&-rtl': {
-        direction: 'rtl',
-      },
-    },
-  }
-}
-
-// ============================== Export ==============================
-export default genComponentStyleHook(
-  'Drawer',
-  (token) => {
-    const drawerToken = mergeToken<DrawerToken>(token, {
-      drawerFooterPaddingVertical: token.paddingXS,
-      drawerFooterPaddingHorizontal: token.padding,
-    })
-
-    return [genDrawerStyle(drawerToken), genMotionStyle(drawerToken)]
-  },
-  (token) => ({
-    zIndexPopup: token.zIndexPopupBase,
-  }),
-)

package/src/drawer/style/motion.ts

@@ -1,134 +0,0 @@
-import type { DrawerToken } from '.'
-import type { GenerateStyle } from '../../theme/internal'
-
-const genMotionStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
-  const { componentCls, motionDurationSlow } = token
-
-  const sharedPanelMotion = {
-    '&-enter, &-appear, &-leave': {
-      '&-start': {
-        transition: 'none',
-      },
-
-      '&-active': {
-        transition: `all ${motionDurationSlow}`,
-      },
-    },
-  }
-
-  return {
-    [componentCls]: {
-      // ======================== Mask ========================
-      [`${componentCls}-mask-motion`]: {
-        '&-enter, &-appear, &-leave': {
-          '&-active': {
-            transition: `all ${motionDurationSlow}`,
-          },
-        },
-
-        '&-enter, &-appear': {
-          opacity: 0,
-          '&-active': {
-            opacity: 1,
-          },
-        },
-
-        '&-leave': {
-          opacity: 1,
-          '&-active': {
-            opacity: 0,
-          },
-        },
-      },
-
-      // ======================= Panel ========================
-      [`${componentCls}-panel-motion`]: {
-        // Left
-        '&-left': [
-          sharedPanelMotion,
-          {
-            '&-enter, &-appear': {
-              '&-start': {
-                transform: 'translateX(-100%) !important',
-              },
-              '&-active': {
-                transform: 'translateX(0)',
-              },
-            },
-            '&-leave': {
-              transform: 'translateX(0)',
-              '&-active': {
-                transform: 'translateX(-100%)',
-              },
-            },
-          },
-        ],
-
-        // Right
-        '&-right': [
-          sharedPanelMotion,
-          {
-            '&-enter, &-appear': {
-              '&-start': {
-                transform: 'translateX(100%) !important',
-              },
-              '&-active': {
-                transform: 'translateX(0)',
-              },
-            },
-            '&-leave': {
-              transform: 'translateX(0)',
-              '&-active': {
-                transform: 'translateX(100%)',
-              },
-            },
-          },
-        ],
-
-        // Top
-        '&-top': [
-          sharedPanelMotion,
-          {
-            '&-enter, &-appear': {
-              '&-start': {
-                transform: 'translateY(-100%) !important',
-              },
-              '&-active': {
-                transform: 'translateY(0)',
-              },
-            },
-            '&-leave': {
-              transform: 'translateY(0)',
-              '&-active': {
-                transform: 'translateY(-100%)',
-              },
-            },
-          },
-        ],
-
-        // Bottom
-        '&-bottom': [
-          sharedPanelMotion,
-          {
-            '&-enter, &-appear': {
-              '&-start': {
-                transform: 'translateY(100%) !important',
-              },
-              '&-active': {
-                transform: 'translateY(0)',
-              },
-            },
-            '&-leave': {
-              transform: 'translateY(0)',
-              '&-active': {
-                transform: 'translateY(100%)',
-              },
-            },
-          },
-        ],
-      },
-    },
-  }
-}
-
-export default genMotionStyle

package/src/dropdown/dropdown-button.tsx

@@ -1,120 +0,0 @@
-import EllipsisOutlined from '@ant-design/icons-vue/EllipsisOutlined'
-
-import type { ExtractPropTypes, HTMLAttributes } from 'vue'
-import { computed, defineComponent } from 'vue'
-
-import classNames from '../_util/classNames'
-import { initDefaultProps } from '../_util/props-util'
-import type { CustomSlotsType } from '../_util/type'
-import Button from '../button'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import Dropdown from './dropdown'
-import { dropdownButtonProps } from './props'
-import useStyle from './style'
-
-const ButtonGroup = Button.Group
-
-export type DropdownButtonProps = Partial<ExtractPropTypes<ReturnType<typeof dropdownButtonProps>>>
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ADropdownButton',
-  inheritAttrs: false,
-  __ANT_BUTTON: true,
-  props: initDefaultProps(dropdownButtonProps(), {
-    trigger: 'hover',
-    placement: 'bottomRight',
-    type: 'default',
-  }),
-  // emits: ['click', 'visibleChange', 'update:visible'],s
-  slots: Object as CustomSlotsType<{
-    icon: any
-    leftButton: { button: any }
-    rightButton: { button: any }
-    overlay: any
-    default: any
-  }>,
-  setup(props, { slots, attrs, emit }) {
-    const handleVisibleChange = (val: boolean) => {
-      emit('update:visible', val)
-      emit('visibleChange', val)
-      emit('update:open', val)
-      emit('openChange', val)
-    }
-
-    const { prefixCls, direction, getPopupContainer } = useConfigInject('dropdown', props)
-    const buttonPrefixCls = computed(() => `${prefixCls.value}-button`)
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-    return () => {
-      const {
-        type = 'default',
-        disabled,
-        danger,
-        loading,
-        htmlType,
-        class: className = '',
-        overlay = slots.overlay?.(),
-        trigger,
-        align,
-        open,
-        visible,
-        onVisibleChange: _onVisibleChange,
-        placement = direction.value === 'rtl' ? 'bottomLeft' : 'bottomRight',
-        href,
-        title,
-        icon = slots.icon?.() || <EllipsisOutlined />,
-        mouseEnterDelay,
-        mouseLeaveDelay,
-        overlayClassName,
-        overlayStyle,
-        destroyPopupOnHide,
-        onClick,
-        'onUpdate:open': _updateVisible,
-        ...restProps
-      } = { ...props, ...attrs } as DropdownButtonProps & HTMLAttributes
-
-      const dropdownProps = {
-        align,
-        disabled,
-        trigger: disabled ? [] : trigger,
-        placement,
-        getPopupContainer: getPopupContainer?.value,
-        onOpenChange: handleVisibleChange,
-        mouseEnterDelay,
-        mouseLeaveDelay,
-        open: open ?? visible,
-        overlayClassName,
-        overlayStyle,
-        destroyPopupOnHide,
-      }
-
-      const leftButton = (
-        <Button
-          danger={danger}
-          type={type}
-          disabled={disabled}
-          loading={loading}
-          onClick={onClick}
-          htmlType={htmlType}
-          href={href}
-          title={title}
-          v-slots={{ default: slots.default }}
-        ></Button>
-      )
-
-      const rightButton = <Button danger={danger} type={type} icon={icon} />
-
-      return wrapSSR(
-        <ButtonGroup
-          {...restProps}
-          class={classNames(buttonPrefixCls.value, className, hashId.value)}
-        >
-          {slots.leftButton ? slots.leftButton({ button: leftButton }) : leftButton}
-          <Dropdown {...dropdownProps} v-slots={{ overlay: () => overlay }}>
-            {slots.rightButton ? slots.rightButton({ button: rightButton }) : rightButton}
-          </Dropdown>
-        </ButtonGroup>,
-      )
-    }
-  },
-})

package/src/dropdown/dropdown.tsx

@@ -1,219 +0,0 @@
-import RightOutlined from '@ant-design/icons-vue/RightOutlined'
-
-import type { ExtractPropTypes } from 'vue'
-import { computed, defineComponent } from 'vue'
-
-import classNames from '../_util/classNames'
-import omit from '../_util/omit'
-import getPlacements from '../_util/placements'
-import { initDefaultProps, isValidElement } from '../_util/props-util'
-import type { CustomSlotsType } from '../_util/type'
-import { cloneElement } from '../_util/vnode'
-import warning from '../_util/warning'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import { useProvideOverride } from '../menu/src/OverrideContext'
-import RcDropdown from '../vc-dropdown'
-import devWarning from '../vc-util/devWarning'
-import DropdownButton from './dropdown-button'
-import { dropdownProps } from './props'
-import useStyle from './style'
-
-export type DropdownProps = Partial<ExtractPropTypes<ReturnType<typeof dropdownProps>>>
-
-const Dropdown = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ADropdown',
-  inheritAttrs: false,
-  props: initDefaultProps(dropdownProps(), {
-    mouseEnterDelay: 0.15,
-    mouseLeaveDelay: 0.1,
-    placement: 'bottomLeft',
-    trigger: 'hover',
-  }),
-  // emits: ['visibleChange', 'update:visible'],
-  slots: Object as CustomSlotsType<{
-    default?: any
-    overlay?: any
-  }>,
-  setup(props, { slots, attrs, emit }) {
-    const { prefixCls, rootPrefixCls, direction, getPopupContainer } = useConfigInject(
-      'dropdown',
-      props,
-    )
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-    // Warning for deprecated usage
-    if (process.env.NODE_ENV !== 'production') {
-      ;[
-        ['visible', 'open'],
-        ['onVisibleChange', 'onOpenChange'],
-        ['onUpdate:visible', 'onUpdate:open'],
-      ].forEach(([deprecatedName, newName]) => {
-        warning(
-          props[deprecatedName] === undefined,
-          'Dropdown',
-          `\`${deprecatedName}\` is deprecated which will be removed in next major version, please use \`${newName}\` instead.`,
-        )
-      })
-    }
-
-    const transitionName = computed(() => {
-      const { placement = '', transitionName } = props
-      if (transitionName !== undefined) {
-        return transitionName
-      }
-      if (placement.includes('top')) {
-        return `${rootPrefixCls.value}-slide-down`
-      }
-      return `${rootPrefixCls.value}-slide-up`
-    })
-    useProvideOverride({
-      prefixCls: computed(() => `${prefixCls.value}-menu`),
-      expandIcon: computed(() => {
-        return (
-          <span class={`${prefixCls.value}-menu-submenu-arrow`}>
-            <RightOutlined class={`${prefixCls.value}-menu-submenu-arrow-icon`} />
-          </span>
-        )
-      }),
-      mode: computed(() => 'vertical'),
-      selectable: computed(() => false),
-      onClick: () => {},
-      validator: ({ mode }) => {
-        // Warning if use other mode
-        warning(
-          !mode || mode === 'vertical',
-          'Dropdown',
-          `mode="${mode}" is not supported for Dropdown's Menu.`,
-        )
-      },
-    })
-    const renderOverlay = () => {
-      // rc-dropdown already can process the function of overlay, but we have check logic here.
-      // So we need render the element to check and pass back to rc-dropdown.
-      const overlay = props.overlay || slots.overlay?.()
-      const overlayNode = Array.isArray(overlay) ? overlay[0] : overlay
-
-      if (!overlayNode) return null
-      const overlayProps = overlayNode.props || {}
-
-      // Warning if use other mode
-      devWarning(
-        !overlayProps.mode || overlayProps.mode === 'vertical',
-        'Dropdown',
-        `mode="${overlayProps.mode}" is not supported for Dropdown's Menu.`,
-      )
-
-      // menu cannot be selectable in dropdown defaultly
-      const { selectable = false, expandIcon = (overlayNode.children as any)?.expandIcon?.() } =
-        overlayProps
-
-      const overlayNodeExpandIcon =
-        typeof expandIcon !== 'undefined' && isValidElement(expandIcon) ? (
-          expandIcon
-        ) : (
-          <span class={`${prefixCls.value}-menu-submenu-arrow`}>
-            <RightOutlined class={`${prefixCls.value}-menu-submenu-arrow-icon`} />
-          </span>
-        )
-
-      const fixedModeOverlay = isValidElement(overlayNode)
-        ? cloneElement(overlayNode, {
-            mode: 'vertical',
-            selectable,
-            expandIcon: () => overlayNodeExpandIcon,
-          })
-        : overlayNode
-
-      return fixedModeOverlay
-    }
-
-    const placement = computed(() => {
-      const placement = props.placement
-      if (!placement) {
-        return direction.value === 'rtl' ? 'bottomRight' : 'bottomLeft'
-      }
-
-      if (placement.includes('Center')) {
-        const newPlacement = placement.slice(0, placement.indexOf('Center'))
-        devWarning(
-          !placement.includes('Center'),
-          'Dropdown',
-          `You are using '${placement}' placement in Dropdown, which is deprecated. Try to use '${newPlacement}' instead.`,
-        )
-        return newPlacement
-      }
-      return placement
-    })
-
-    const mergedVisible = computed(() => {
-      return typeof props.visible === 'boolean' ? props.visible : props.open
-    })
-
-    const handleVisibleChange = (val: boolean) => {
-      emit('update:visible', val)
-      emit('visibleChange', val)
-      emit('update:open', val)
-      emit('openChange', val)
-    }
-
-    return () => {
-      const { arrow, trigger, disabled, overlayClassName } = props
-      const child = slots.default?.()[0]
-      const dropdownTrigger = cloneElement(
-        child,
-        Object.assign(
-          {
-            class: classNames(
-              child?.props?.class,
-              {
-                [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
-              },
-              `${prefixCls.value}-trigger`,
-            ),
-          },
-          disabled ? { disabled } : {},
-        ),
-      )
-
-      const overlayClassNameCustomized = classNames(overlayClassName, hashId.value, {
-        [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
-      })
-
-      const triggerActions = disabled ? [] : trigger
-      let alignPoint: boolean
-      if (triggerActions && triggerActions.includes('contextmenu')) {
-        alignPoint = true
-      }
-
-      const builtinPlacements = getPlacements({
-        arrowPointAtCenter: typeof arrow === 'object' && arrow.pointAtCenter,
-        autoAdjustOverflow: true,
-      })
-      const dropdownProps = omit(
-        {
-          ...props,
-          ...attrs,
-          visible: mergedVisible.value,
-          builtinPlacements,
-          overlayClassName: overlayClassNameCustomized,
-          arrow: !!arrow,
-          alignPoint,
-          prefixCls: prefixCls.value,
-          getPopupContainer: getPopupContainer?.value,
-          transitionName: transitionName.value,
-          trigger: triggerActions,
-          onVisibleChange: handleVisibleChange,
-          placement: placement.value,
-        },
-        ['overlay', 'onUpdate:visible'],
-      )
-      return wrapSSR(
-        <RcDropdown {...dropdownProps} v-slots={{ overlay: renderOverlay }}>
-          {dropdownTrigger}
-        </RcDropdown>,
-      )
-    }
-  },
-})
-Dropdown.Button = DropdownButton
-export default Dropdown