@v-c/util 0.0.4 → 0.0.6

package/src/utils/transition.ts

@@ -1,128 +0,0 @@
-import type {
-  BaseTransitionProps,
-  CSSProperties,
-  Ref,
-  TransitionGroupProps,
-  TransitionProps,
-} from 'vue'
-import { nextTick } from 'vue'
-import { tuple } from '../type'
-
-const SelectPlacements = tuple('bottomLeft', 'bottomRight', 'topLeft', 'topRight')
-export type SelectCommonPlacement = (typeof SelectPlacements)[number]
-
-function getTransitionDirection(placement: SelectCommonPlacement | undefined) {
-  if (placement !== undefined && (placement === 'topLeft' || placement === 'topRight')) {
-    return `slide-down`
-  }
-  return `slide-up`
-}
-
-export function getTransitionProps(transitionName?: string, opt: TransitionProps = {}) {
-  if (!transitionName) {
-    return {}
-  }
-  const transitionProps: TransitionProps = transitionName
-    ? {
-        name: transitionName,
-        appear: true,
-        // type: 'animation',
-        // appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
-        // appearActiveClass: `antdv-base-transtion`,
-        // appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,
-        enterFromClass: `${transitionName}-enter ${transitionName}-enter-prepare ${transitionName}-enter-start`,
-        enterActiveClass: `${transitionName}-enter ${transitionName}-enter-prepare`,
-        enterToClass: `${transitionName}-enter ${transitionName}-enter-active`,
-        leaveFromClass: ` ${transitionName}-leave`,
-        leaveActiveClass: `${transitionName}-leave ${transitionName}-leave-active`,
-        leaveToClass: `${transitionName}-leave ${transitionName}-leave-active`,
-        ...opt,
-      }
-    : { css: false, ...opt }
-  return transitionProps
-}
-
-export function getTransitionGroupProps(transitionName: string, opt: TransitionProps = {}) {
-  const transitionProps: TransitionGroupProps = transitionName
-    ? {
-        name: transitionName,
-        appear: true,
-        // appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
-        appearActiveClass: `${transitionName}`,
-        appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,
-        enterFromClass: `${transitionName}-appear ${transitionName}-enter ${transitionName}-appear-prepare ${transitionName}-enter-prepare`,
-        enterActiveClass: `${transitionName}`,
-        enterToClass: `${transitionName}-enter ${transitionName}-appear ${transitionName}-appear-active ${transitionName}-enter-active`,
-        leaveActiveClass: `${transitionName} ${transitionName}-leave`,
-        leaveToClass: `${transitionName}-leave-active`,
-        ...opt,
-      }
-    : { css: false, ...opt }
-  return transitionProps
-}
-
-export declare type MotionEvent = (TransitionEvent | AnimationEvent) & {
-  deadline?: boolean
-}
-
-export declare type MotionEventHandler = (element: Element, done?: () => void) => CSSProperties
-
-export declare type MotionEndEventHandler = (element: Element, done?: () => void) => boolean | void
-
-// ================== Collapse Motion ==================
-const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 })
-const getRealHeight: MotionEventHandler = node => ({
-  height: `${node.scrollHeight}px`,
-  opacity: 1,
-})
-const getCurrentHeight: MotionEventHandler = (node: any) => ({ height: `${node.offsetHeight}px` })
-// const skipOpacityTransition: MotionEndEventHandler = (_, event) =>
-//   (event as TransitionEvent).propertyName === 'height';
-
-export interface CSSMotionProps extends Partial<BaseTransitionProps<Element>> {
-  name?: string
-  css?: boolean
-}
-
-function collapseMotion(name = 'ant-motion-collapse', style: Ref<CSSProperties>, className: Ref<string>): CSSMotionProps {
-  return {
-    name,
-    appear: true,
-    css: true,
-    onBeforeEnter: (node) => {
-      className.value = name
-      style.value = getCollapsedHeight(node)
-    },
-    onEnter: (node) => {
-      nextTick(() => {
-        style.value = getRealHeight(node)
-      })
-    },
-    onAfterEnter: () => {
-      className.value = ''
-      style.value = {}
-    },
-    onBeforeLeave: (node) => {
-      className.value = name
-      style.value = getCurrentHeight(node)
-    },
-    onLeave: (node) => {
-      setTimeout(() => {
-        style.value = getCollapsedHeight(node)
-      })
-    },
-    onAfterLeave: () => {
-      className.value = ''
-      style.value = {}
-    },
-  }
-}
-
-function getTransitionName(rootPrefixCls: string, motion: string, transitionName?: string) {
-  if (transitionName !== undefined) {
-    return transitionName
-  }
-  return `${rootPrefixCls}-${motion}`
-}
-
-export { collapseMotion, getTransitionDirection, getTransitionName }

package/src/vnode.ts

@@ -1,86 +0,0 @@
-import type { Slots, VNode, VNodeArrayChildren, VNodeProps } from 'vue'
-import type { RefObject } from './createRef'
-import { cloneVNode, Comment, Fragment, isVNode, render as VueRender } from 'vue'
-import { filterEmpty } from './props-util'
-import warning from './warning'
-
-type NodeProps = Record<string, any> &
-  Omit<VNodeProps, 'ref'> & { ref?: VNodeProps['ref'] | RefObject }
-
-export function cloneElement<T, U>(
-  vnode: VNode<T, U> | VNode<T, U>[],
-  nodeProps: NodeProps = {},
-  override = true,
-  mergeRef = false,
-): VNode<T, U> | null {
-  let ele = vnode
-  if (Array.isArray(vnode))
-    ele = filterEmpty(vnode)[0]
-
-  if (!ele)
-    return null
-
-  const node: any = cloneVNode(ele as VNode<T, U>, nodeProps as any, mergeRef)
-
-  // cloneVNode内部是合并属性，这里改成覆盖属性
-  node.props = (override ? { ...node.props, ...nodeProps } : node.props) as any
-  warning(typeof node.props.class !== 'object', 'class must be string')
-  return node
-}
-
-export function cloneVNodes(vnodes: any, nodeProps = {}, override = true) {
-  return vnodes.map((vnode: any) => cloneElement(vnode, nodeProps, override))
-}
-
-export function deepCloneElement<T, U>(
-  vnode: VNode<T, U> | VNode<T, U>[],
-  nodeProps: NodeProps = {},
-  override = true,
-  mergeRef = false,
-): any {
-  if (Array.isArray(vnode)) {
-    return vnode.map((item: any) => deepCloneElement(item, nodeProps, override, mergeRef))
-  }
-  else {
-    // 需要判断是否为vnode方可进行clone操作
-    if (!isVNode(vnode))
-      return vnode
-
-    const cloned: any = cloneElement(vnode, nodeProps, override, mergeRef)
-    if (Array.isArray(cloned.children))
-      cloned.children = deepCloneElement(cloned.children as VNode<T, U>[])
-
-    return cloned
-  }
-}
-
-export function triggerVNodeUpdate(vm: VNode, attrs: Record<string, any>, dom: any) {
-  VueRender(cloneVNode(vm, { ...attrs }), dom)
-}
-
-function ensureValidVNode(slot: VNodeArrayChildren | null) {
-  return (slot || []).some((child) => {
-    if (!isVNode(child))
-      return true
-    if (child.type === Comment)
-      return false
-    if (child.type === Fragment && !ensureValidVNode(child.children as VNodeArrayChildren))
-      return false
-    return true
-  })
-    ? slot
-    : null
-}
-
-export function customRenderSlot(
-  slots: Slots,
-  name: string,
-  props: Record<string, unknown>,
-  fallback?: () => VNodeArrayChildren,
-) {
-  const slot = slots[name]?.(props)
-  if (ensureValidVNode(slot as any))
-    return slot
-
-  return fallback?.()
-}

package/src/vueuse/unref-element.ts

@@ -1,13 +0,0 @@
-import type { ComponentPublicInstance, MaybeRef } from 'vue'
-import { toValue } from 'vue'
-
-export type VueInstance = ComponentPublicInstance
-/**
- * Get the dom element of a ref of element or Vue component instance
- *
- * @param elRef
- */
-export function unrefElement<T extends Element>(elRef: MaybeRef<T>): T {
-  const plain = toValue(elRef)
-  return (plain as any)?.$el ?? plain
-}

package/src/warning.ts

@@ -1,79 +0,0 @@
-let warned: Record<string, boolean> = {}
-
-export type preMessageFn = (
-  message: string,
-  type: 'warning' | 'note',
-) => string | null | undefined | number
-
-const preWarningFns: preMessageFn[] = []
-
-/**
- * Pre warning enable you to parse content before console.error.
- * Modify to null will prevent warning.
- */
-export function preMessage(fn: preMessageFn) {
-  preWarningFns.push(fn)
-}
-
-export function warning(valid: boolean, message: string) {
-  // Support uglify
-  if (
-    process.env.NODE_ENV !== 'production'
-    && !valid
-    && console !== undefined
-  ) {
-    const finalMessage = preWarningFns.reduce(
-      (msg, preMessageFn) => (preMessageFn as any)(msg ?? '', 'warning'),
-      message,
-    )
-
-    if (finalMessage)
-      console.error(`Warning: ${finalMessage}`)
-  }
-}
-
-export function note(valid: boolean, message: string) {
-  // Support uglify
-  if (
-    process.env.NODE_ENV !== 'production'
-    && !valid
-    && console !== undefined
-  ) {
-    const finalMessage = preWarningFns.reduce(
-      (msg, preMessageFn) => (preMessageFn as any)(msg ?? '', 'note'),
-      message,
-    )
-
-    if (finalMessage)
-      console.warn(`Note: ${finalMessage}`)
-  }
-}
-
-export function resetWarned() {
-  warned = {}
-}
-
-export function call(
-  method: (valid: boolean, message: string) => void,
-  valid: boolean,
-  message: string,
-) {
-  if (!valid && !warned[message]) {
-    method(false, message)
-    warned[message] = true
-  }
-}
-
-export function warningOnce(valid: boolean, message: string) {
-  call(warning, valid, message)
-}
-
-export function noteOnce(valid: boolean, message: string) {
-  call(note, valid, message)
-}
-
-warningOnce.preMessage = preMessage
-warningOnce.resetWarned = resetWarned
-warningOnce.noteOnce = noteOnce
-
-export default warningOnce

package/tests/Portal.spec.tsx

@@ -1,199 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { afterEach, beforeEach, describe, expect, it } from 'vitest'
-import { defineComponent, onMounted, ref } from 'vue'
-import Portal from '../src/Portal'
-import PortalWrapper, { getOpenCount } from '../src/PortalWrapper'
-
-describe('portal', () => {
-  let domContainer: HTMLDivElement
-
-  window.requestAnimationFrame = callback => window.setTimeout(callback)
-  window.cancelAnimationFrame = id => window.clearTimeout(id)
-
-  beforeEach(() => {
-    domContainer = document.createElement('div')
-    document.body.appendChild(domContainer)
-  })
-
-  afterEach(() => {
-    document.body.removeChild(domContainer)
-  })
-  it('forceRender', () => {
-    const divRef = ref<HTMLDivElement>()
-
-    const wrapper = mount(
-      <PortalWrapper forceRender>
-        {{
-          default: () => <div ref={divRef as any}>2333</div>,
-        }}
-      </PortalWrapper>,
-    )
-
-    expect(divRef.value).toBeTruthy()
-    wrapper.unmount()
-  })
-
-  it('didUpdate', () => {
-    let times = 0
-    const didUpdate = () => {
-      ++times
-    }
-
-    let wrapper = mount(
-      <Portal
-        didUpdate={didUpdate}
-        getContainer={() => document.createElement('div')}
-      >
-        light
-      </Portal>,
-    )
-    expect(times).toEqual(0)
-    wrapper.unmount()
-    wrapper = mount(
-      <Portal
-        didUpdate={didUpdate}
-        getContainer={() => document.createElement('div')}
-        {...{ justForceUpdate: true }}
-      >
-        light
-      </Portal>,
-    )
-    expect(times).toEqual(1)
-    wrapper.unmount()
-  })
-
-  describe('getContainer', () => {
-    it('string', () => {
-      const div = document.createElement('div')
-      div.id = 'bamboo-light'
-      document.body.appendChild(div)
-
-      const wrapper = mount(
-        <PortalWrapper visible getContainer="#bamboo-light">
-          {() => <div>2333</div>}
-        </PortalWrapper>,
-      )
-
-      expect((document as any).querySelector?.('#bamboo-light').childElementCount)
-        .toEqual(1)
-
-      document.body.removeChild(div)
-      wrapper.unmount()
-    })
-
-    it('function', () => {
-      const div = document.createElement('div')
-
-      const wrapper = mount(
-        <PortalWrapper visible getContainer={() => div}>
-          {() => <div>2333</div>}
-        </PortalWrapper>,
-      )
-
-      expect(div.childElementCount).toEqual(1)
-
-      wrapper.unmount()
-    })
-
-    it('htmlElement', () => {
-      const div = document.createElement('div')
-
-      const wrapper = mount(
-        <PortalWrapper visible getContainer={div}>
-          {() => <div>2333</div>}
-        </PortalWrapper>,
-      )
-
-      expect(div.childElementCount).toEqual(1)
-      wrapper.unmount()
-    })
-
-    it('delay', () => {
-      let dom: any
-      const wrapper = mount(defineComponent({
-        setup() {
-          const divRef = ref<HTMLDivElement>()
-          onMounted(() => {
-            dom = divRef.value as any
-          })
-          return () => {
-            return (
-              <div>
-                <PortalWrapper visible getContainer={() => divRef.value!}>
-                  {() => <div />}
-                </PortalWrapper>
-                <div ref={divRef as any} />
-              </div>
-            )
-          }
-        },
-      }))
-
-      expect(dom?.childElementCount).toEqual(1)
-      wrapper.unmount()
-    })
-  })
-
-  describe('openCount', () => {
-    it('start as 0', () => {
-      expect(getOpenCount()).toEqual(0)
-
-      const wrapper = mount(
-        <PortalWrapper visible={false}>{() => <div>2333</div>}</PortalWrapper>,
-      )
-      expect(getOpenCount()).toEqual(0)
-
-      const wrapper1 = mount(<PortalWrapper visible>{() => <div>2333</div>}</PortalWrapper>)
-      expect(getOpenCount()).toEqual(1)
-
-      wrapper.unmount()
-      wrapper1.unmount()
-    })
-
-    it('correct count', () => {
-      const Demo = defineComponent({
-        props: {
-          count: Number,
-          visible: Boolean,
-        },
-        setup(props) {
-          return () => {
-            const { count, visible } = props
-            const getItem = (index: number) => {
-              return (
-                <>
-                  <PortalWrapper key={index} visible={visible}>
-                    {() => <div>2333</div>}
-                  </PortalWrapper>
-                </>
-              )
-            }
-            return (
-              <>
-                {Array.from({ length: count as any }).fill(null).map((_, index) => getItem(index))}
-              </>
-            )
-          }
-        },
-      })
-
-      expect(getOpenCount()).toEqual(0)
-
-      let wrapper = mount(<Demo count={1} visible />)
-      expect(getOpenCount()).toEqual(1)
-      wrapper.unmount()
-
-      wrapper = mount(<Demo count={2} visible />)
-      expect(getOpenCount()).toEqual(2)
-      wrapper.unmount()
-
-      wrapper = mount(<Demo count={1} visible />)
-      expect(getOpenCount()).toEqual(1)
-      wrapper.unmount()
-
-      wrapper = mount(<Demo count={1} visible={false} />)
-      expect(getOpenCount()).toEqual(0)
-      wrapper.unmount()
-    })
-  })
-})

package/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "extends": ["../../tsconfig.json"],
-  "compilerOptions": {
-    "strictNullChecks": false,
-    "noImplicitAny": false
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"]
-}

package/vite.config.ts

@@ -1,18 +0,0 @@
-import type { UserConfig } from 'vite'
-import fg from 'fast-glob'
-import { defineConfig, mergeConfig } from 'vite'
-import { buildCommon } from '../../scripts/build.common'
-
-const entry = fg.sync(['src/**/*.ts', 'src/**/*.tsx', '!src/**/*.test.ts', '!src/**/*.test.tsx', '!src/**/tests'])
-
-export default defineConfig({
-  ...mergeConfig(buildCommon({
-    external: ['vue'],
-  }), {
-    build: {
-      lib: {
-        entry,
-      },
-    },
-  } as UserConfig),
-})

package/vitest.config.ts

@@ -1,11 +0,0 @@
-import { defineProject, mergeConfig } from 'vitest/config'
-import configShared from '../../vitest.config.ts'
-
-export default mergeConfig(
-  configShared,
-  defineProject({
-    test: {
-      environment: 'jsdom',
-    },
-  }),
-)