@antsoo-lib/components 0.1.11 → 0.1.13

package/src/drawer/index.tsx

@@ -1,441 +0,0 @@
-import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'
-
-import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'
-import {
-  computed,
-  defineComponent,
-  inject,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  provide,
-  shallowRef,
-  watch,
-} from 'vue'
-
-import type { KeyboardEventHandler, MouseEventHandler } from '../_util/EventInterface'
-import classnames from '../_util/classNames'
-import isNumeric from '../_util/isNumeric'
-import omit from '../_util/omit'
-import { getPropsSlot, initDefaultProps } from '../_util/props-util'
-import { getTransitionName, getTransitionProps } from '../_util/transition'
-import type { CustomSlotsType } from '../_util/type'
-import { objectType, withInstall } from '../_util/type'
-import PropTypes from '../_util/vue-types'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import { NoCompactStyle } from '../space/Compact'
-import VcDrawer from '../vc-drawer'
-import devWarning from '../vc-util/devWarning'
-import useStyle from './style'
-
-type ILevelMove = number | [number, number]
-
-const PlacementTypes = ['top', 'right', 'bottom', 'left'] as const
-export type placementType = (typeof PlacementTypes)[number]
-
-const SizeTypes = ['default', 'large'] as const
-export type sizeType = (typeof SizeTypes)[number]
-
-export interface PushState {
-  distance: string | number
-}
-
-const defaultPushState: PushState = { distance: 180 }
-type getContainerFunc = () => HTMLElement
-export function drawerProps() {
-  return {
-    autofocus: { type: Boolean, default: undefined },
-    closable: { type: Boolean, default: undefined },
-    closeIcon: PropTypes.any,
-    destroyOnClose: { type: Boolean, default: undefined },
-    forceRender: { type: Boolean, default: undefined },
-    getContainer: {
-      type: [String, Function, Boolean, Object] as PropType<
-        string | HTMLElement | getContainerFunc | false
-      >,
-      default: undefined as string | HTMLElement | getContainerFunc | false,
-    },
-    maskClosable: { type: Boolean, default: undefined },
-    mask: { type: Boolean, default: undefined },
-    maskStyle: objectType<CSSProperties>(),
-    rootClassName: String,
-    rootStyle: objectType<CSSProperties>(),
-    size: {
-      type: String as PropType<sizeType>,
-    },
-    drawerStyle: objectType<CSSProperties>(),
-    headerStyle: objectType<CSSProperties>(),
-    bodyStyle: objectType<CSSProperties>(),
-    contentWrapperStyle: {
-      type: Object as PropType<CSSProperties>,
-      default: undefined as CSSProperties,
-    },
-    title: PropTypes.any,
-    /** @deprecated Please use `open` instead */
-    visible: { type: Boolean, default: undefined },
-    open: { type: Boolean, default: undefined },
-    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    zIndex: Number,
-    prefixCls: String,
-    push: PropTypes.oneOfType([PropTypes.looseBool, { type: Object as PropType<PushState> }]),
-    placement: PropTypes.oneOf(PlacementTypes),
-    keyboard: { type: Boolean, default: undefined },
-    extra: PropTypes.any,
-    footer: PropTypes.any,
-    footerStyle: objectType<CSSProperties>(),
-    level: PropTypes.any,
-    levelMove: {
-      type: [Number, Array, Function] as PropType<
-        ILevelMove | ((e: { target: HTMLElement; open: boolean }) => ILevelMove)
-      >,
-    },
-    handle: PropTypes.any,
-    /** @deprecated Use `@afterVisibleChange` instead */
-    afterVisibleChange: Function as PropType<(visible: boolean) => void>,
-    /** @deprecated Please use `@afterOpenChange` instead */
-    onAfterVisibleChange: Function as PropType<(visible: boolean) => void>,
-    onAfterOpenChange: Function as PropType<(open: boolean) => void>,
-    /** @deprecated Please use `onUpdate:open` instead */
-    'onUpdate:visible': Function as PropType<(visible: boolean) => void>,
-    'onUpdate:open': Function as PropType<(open: boolean) => void>,
-    onClose: Function as PropType<MouseEventHandler | KeyboardEventHandler>,
-  }
-}
-
-export type DrawerProps = Partial<ExtractPropTypes<ReturnType<typeof drawerProps>>>
-
-const Drawer = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ADrawer',
-  inheritAttrs: false,
-  props: initDefaultProps(drawerProps(), {
-    closable: true,
-    placement: 'right',
-    maskClosable: true,
-    mask: true,
-    level: null,
-    keyboard: true,
-    push: defaultPushState,
-  }),
-  slots: Object as CustomSlotsType<{
-    closeIcon: any
-    title: any
-    extra: any
-    footer: any
-    handle: any
-    default: any
-  }>,
-  // emits: ['update:visible', 'close', 'afterVisibleChange'],
-  setup(props, { emit, slots, attrs }) {
-    const sPush = shallowRef(false)
-    const destroyClose = shallowRef(false)
-    const vcDrawer = shallowRef(null)
-    const load = shallowRef(false)
-    const visible = shallowRef(false)
-    const mergedOpen = computed(() => props.open ?? props.visible)
-    watch(
-      mergedOpen,
-      () => {
-        if (mergedOpen.value) {
-          load.value = true
-        } else {
-          visible.value = false
-        }
-      },
-      { immediate: true },
-    )
-    watch(
-      [mergedOpen, load],
-      () => {
-        if (mergedOpen.value && load.value) {
-          visible.value = true
-        }
-      },
-      { immediate: true },
-    )
-    const parentDrawerOpts = inject('parentDrawerOpts', null)
-    const { prefixCls, getPopupContainer, direction } = useConfigInject('drawer', props)
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-    const getContainer = computed(() =>
-      // 有可能为 false，所以不能直接判断
-      props.getContainer === undefined && getPopupContainer?.value
-        ? () => getPopupContainer.value(document.body)
-        : props.getContainer,
-    )
-
-    devWarning(
-      !props.afterVisibleChange,
-      'Drawer',
-      '`afterVisibleChange` prop is deprecated, please use `@afterVisibleChange` event instead',
-    )
-    // ========================== Warning ===========================
-    if (process.env.NODE_ENV !== 'production') {
-      ;[
-        ['visible', 'open'],
-        ['onUpdate:visible', 'onUpdate:open'],
-        ['onAfterVisibleChange', 'onAfterOpenChange'],
-      ].forEach(([deprecatedName, newName]) => {
-        devWarning(
-          !props[deprecatedName],
-          'Drawer',
-          `\`${deprecatedName}\` is deprecated, please use \`${newName}\` instead.`,
-        )
-      })
-    }
-
-    const setPush = () => {
-      sPush.value = true
-    }
-
-    const setPull = () => {
-      sPush.value = false
-      nextTick(() => {
-        domFocus()
-      })
-    }
-    provide('parentDrawerOpts', {
-      setPush,
-      setPull,
-    })
-
-    onMounted(() => {
-      if (mergedOpen.value && parentDrawerOpts) {
-        parentDrawerOpts.setPush()
-      }
-    })
-
-    onUnmounted(() => {
-      if (parentDrawerOpts) {
-        parentDrawerOpts.setPull()
-      }
-    })
-
-    watch(
-      visible,
-      () => {
-        if (parentDrawerOpts) {
-          if (visible.value) {
-            parentDrawerOpts.setPush()
-          } else {
-            parentDrawerOpts.setPull()
-          }
-        }
-      },
-      { flush: 'post' },
-    )
-
-    const domFocus = () => {
-      vcDrawer.value?.domFocus?.()
-    }
-
-    const close = (e: Event) => {
-      emit('update:visible', false)
-      emit('update:open', false)
-      emit('close', e)
-    }
-
-    const afterVisibleChange = (open: boolean) => {
-      if (!open) {
-        if (destroyClose.value === false) {
-          // set true only once
-          destroyClose.value = true
-        }
-        if (props.destroyOnClose) {
-          load.value = false
-        }
-      }
-      props.afterVisibleChange?.(open)
-      emit('afterVisibleChange', open)
-      emit('afterOpenChange', open)
-    }
-
-    const pushTransform = computed(() => {
-      const { push, placement } = props
-      let distance: number | string
-      if (typeof push === 'boolean') {
-        distance = push ? defaultPushState.distance : 0
-      } else {
-        distance = push!.distance
-      }
-
-      distance = Number.parseFloat(String(distance || 0))
-
-      if (placement === 'left' || placement === 'right') {
-        return `translateX(${placement === 'left' ? distance : -distance}px)`
-      }
-      if (placement === 'top' || placement === 'bottom') {
-        return `translateY(${placement === 'top' ? distance : -distance}px)`
-      }
-      return null
-    })
-    // ============================ Size ============================
-    const mergedWidth = computed(() => props.width ?? (props.size === 'large' ? 736 : 378))
-    const mergedHeight = computed(() => props.height ?? (props.size === 'large' ? 736 : 378))
-    const offsetStyle = computed(() => {
-      // https://github.com/ant-design/ant-design/issues/24287
-      const { mask, placement } = props
-      if (!visible.value && !mask) {
-        return {}
-      }
-      const val: CSSProperties = {}
-      if (placement === 'left' || placement === 'right') {
-        val.width = isNumeric(mergedWidth.value) ? `${mergedWidth.value}px` : mergedWidth.value
-      } else {
-        val.height = isNumeric(mergedHeight.value) ? `${mergedHeight.value}px` : mergedHeight.value
-      }
-      return val
-    })
-
-    const wrapperStyle = computed(() => {
-      const { zIndex, contentWrapperStyle } = props
-      const val = offsetStyle.value
-      return [
-        { zIndex, transform: sPush.value ? pushTransform.value : undefined },
-        { ...contentWrapperStyle },
-        val,
-      ]
-    })
-
-    const renderHeader = (prefixCls: string) => {
-      const { closable, headerStyle } = props
-      const extra = getPropsSlot(slots, props, 'extra')
-      const title = getPropsSlot(slots, props, 'title')
-      if (!title && !closable) {
-        return null
-      }
-
-      return (
-        <div
-          class={classnames(`${prefixCls}-header`, {
-            [`${prefixCls}-header-close-only`]: closable && !title && !extra,
-          })}
-          style={headerStyle}
-        >
-          <div class={`${prefixCls}-header-title`}>
-            {renderCloseIcon(prefixCls)}
-            {title && <div class={`${prefixCls}-title`}>{title}</div>}
-          </div>
-          {extra && <div class={`${prefixCls}-extra`}>{extra}</div>}
-        </div>
-      )
-    }
-
-    const renderCloseIcon = (prefixCls: string) => {
-      const { closable } = props
-      const $closeIcon = slots.closeIcon ? slots.closeIcon?.() : props.closeIcon
-      return (
-        closable && (
-          <button key="closer" onClick={close} aria-label="Close" class={`${prefixCls}-close`}>
-            {$closeIcon === undefined ? <CloseOutlined></CloseOutlined> : $closeIcon}
-          </button>
-        )
-      )
-    }
-
-    const renderBody = (prefixCls: string) => {
-      if (destroyClose.value && !props.forceRender && !load.value) {
-        return null
-      }
-
-      const { bodyStyle, drawerStyle } = props
-
-      return (
-        <div class={`${prefixCls}-wrapper-body`} style={drawerStyle}>
-          {renderHeader(prefixCls)}
-          <div key="body" class={`${prefixCls}-body`} style={bodyStyle}>
-            {slots.default?.()}
-          </div>
-          {renderFooter(prefixCls)}
-        </div>
-      )
-    }
-
-    const renderFooter = (prefixCls: string) => {
-      const footer = getPropsSlot(slots, props, 'footer')
-      if (!footer) {
-        return null
-      }
-
-      const footerClassName = `${prefixCls}-footer`
-      return (
-        <div class={footerClassName} style={props.footerStyle}>
-          {footer}
-        </div>
-      )
-    }
-    const drawerClassName = computed(() =>
-      classnames(
-        {
-          'no-mask': !props.mask,
-          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
-        },
-        props.rootClassName,
-        hashId.value,
-      ),
-    )
-    // =========================== Motion ===========================
-    const maskMotion = computed(() => {
-      return getTransitionProps(getTransitionName(prefixCls.value, 'mask-motion'))
-    })
-    const panelMotion = (motionPlacement: string) => {
-      return getTransitionProps(
-        getTransitionName(prefixCls.value, `panel-motion-${motionPlacement}`),
-      )
-    }
-
-    return () => {
-      const { width, height, placement, mask, forceRender, ...rest } = props
-
-      const vcDrawerProps: any = {
-        ...attrs,
-        ...omit(rest, [
-          'size',
-          'closeIcon',
-          'closable',
-          'destroyOnClose',
-          'drawerStyle',
-          'headerStyle',
-          'bodyStyle',
-          'title',
-          'push',
-          'onAfterVisibleChange',
-          'onClose',
-          'onUpdate:visible',
-          'onUpdate:open',
-          'visible',
-        ]),
-        forceRender,
-        onClose: close,
-        afterVisibleChange,
-        handler: false,
-        prefixCls: prefixCls.value,
-        open: visible.value,
-        showMask: mask,
-        placement,
-        ref: vcDrawer,
-      }
-      return wrapSSR(
-        <NoCompactStyle>
-          <VcDrawer
-            {...vcDrawerProps}
-            maskMotion={maskMotion.value}
-            motion={panelMotion}
-            width={mergedWidth.value}
-            height={mergedHeight.value}
-            getContainer={getContainer.value}
-            rootClassName={drawerClassName.value}
-            rootStyle={props.rootStyle}
-            contentWrapperStyle={wrapperStyle.value}
-            v-slots={{
-              handler: props.handle ? () => props.handle : slots.handle,
-              default: () => renderBody(prefixCls.value),
-            }}
-          ></VcDrawer>
-        </NoCompactStyle>,
-      )
-    }
-  },
-})
-
-export default withInstall(Drawer)

package/src/drawer/index.zh-CN.md

@@ -1,59 +0,0 @@
----
-category: Components
-type: 反馈
-title: Drawer
-subtitle: 抽屉
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*v3TvSq2E0HAAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*4wzwRIBLuqEAAAAAAAAAAAAADrJ8AQ/original
----
-
-屏幕边缘滑出的浮层面板。
-
-## 何时使用
-
-抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到原任务。
-
-- 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。
-- 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。
-
-## API
-
-**🚨 注意：** v4 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v4 `class` 与 `style` 改至配置 Drawer 窗体样式以和 Modal 对齐。
-
-| 参数                | 说明                                                                           | 类型                                    | 默认值              | 版本  |
-| ------------------- | ------------------------------------------------------------------------------ | --------------------------------------- | ------------------- | ----- |
-| autofocus           | 抽屉展开后是否将焦点切换至其 Dom 节点                                          | boolean                                 | true                | 3.0.0 |
-| bodyStyle           | 可用于设置 Drawer 内容部分的样式                                               | CSSProperties                           | -                   |       |
-| class               | Drawer 容器外层 className 设置，如果需要设置最外层，请使用 rootClassName       | string                                  | -                   |       |
-| closable            | 是否显示左上角的关闭按钮                                                       | boolean                                 | true                |       |
-| closeIcon           | 自定义关闭图标                                                                 | VNode \| slot                           | `<CloseOutlined />` | 3.0.0 |
-| contentWrapperStyle | 可用于设置 Drawer 包裹内容部分的样式                                           | CSSProperties                           | -                   | 3.0.0 |
-| destroyOnClose      | 关闭时销毁 Drawer 里的子元素                                                   | boolean                                 | false               |       |
-| extra               | 抽屉右上角的操作区域                                                           | VNode \| slot                           | -                   | 3.0.0 |
-| footer              | 抽屉的页脚                                                                     | VNode \| slot                           | -                   | 3.0.0 |
-| footerStyle         | 抽屉页脚部件的样式                                                             | CSSProperties                           | -                   | 3.0.0 |
-| forceRender         | 预渲染 Drawer 内元素                                                           | boolean                                 | false               | 3.0.0 |
-| getContainer        | 指定 Drawer 挂载的节点，**并在容器内展现** \| `() => HTMLElement` \| Selectors | 'body'                                  |                     |
-| headerStyle         | 用于设置 Drawer 头部的样式                                                     | CSSProperties                           | -                   | 3.0.0 |
-| height              | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用                               | string \| number                        | 378                 |       |
-| keyboard            | 是否支持键盘 esc 关闭                                                          | boolean                                 | true                |       |
-| mask                | 是否展示遮罩                                                                   | Boolean                                 | true                |       |
-| maskClosable        | 点击蒙层是否允许关闭                                                           | boolean                                 | true                |       |
-| maskStyle           | 遮罩样式                                                                       | CSSProperties                           | {}                  |       |
-| placement           | 抽屉的方向                                                                     | 'top' \| 'right' \| 'bottom' \| 'left'  | 'right'             |       |
-| push                | 用于设置多层 Drawer 的推动行为                                                 | boolean \| {distance: string \| number} | { distance: 180 }   | 3.0.0 |
-| rootClassName       | 对话框外层容器的类名                                                           | string                                  | -                   | 4.0   |
-| rootStyle           | 可用于设置 Drawer 最外层容器的样式，和 `style` 的区别是作用节点包括 `mask`     | CSSProperties                           | -                   | 4.0   |
-| size                | 预设抽屉宽度（或高度），default `378px` 和 large `736px`                       | `default` \| `large`                    | `default`           | 3.0.0 |
-| style               | 设计 Drawer 容器样式，如果你只需要设置内容部分请使用 `bodyStyle`               | CSSProperties                           | -                   |       |
-| title               | 标题                                                                           | string \| slot                          | -                   |       |
-| open(v-model)       | Drawer 是否可见                                                                | boolean                                 | -                   | 4.0   |
-| width               | 宽度                                                                           | string \| number                        | 378                 |       |
-| zIndex              | 设置 Drawer 的 `z-index`                                                       | Number                                  | 1000                |       |
-
-## 事件
-
-| 事件名称        | 描述                                 | 类型           | 默认值 | 版本 |
-| --------------- | ------------------------------------ | -------------- | ------ | ---- |
-| afterOpenChange | 切换抽屉时动画结束后的回调           | function(open) | 无     | 4.0  |
-| close           | 点击遮罩层或左上角叉或取消按钮的回调 | function(e)    | 无     |      |