@v-c/util 0.0.2 → 0.0.3

package/src/utils/transition.ts

@@ -0,0 +1,128 @@
+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,8 +1,8 @@
 import type { Slots, VNode, VNodeArrayChildren, VNodeProps } from 'vue'
-import { Comment, Fragment, render as VueRender, cloneVNode, isVNode } 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'
-import type { RefObject } from './createRef'
 
 type NodeProps = Record<string, any> &
   Omit<VNodeProps, 'ref'> & { ref?: VNodeProps['ref'] | RefObject }

package/src/vueuse/unref-element.ts

@@ -0,0 +1,13 @@
+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/tsconfig.json

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

package/vite.config.ts

@@ -1,6 +1,6 @@
 import type { UserConfig } from 'vite'
-import { defineConfig, mergeConfig } 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'])

package/vitest.config.ts

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

package/tests/{Portal.test.tsx → Portal.spec.tsx}

@@ -1,8 +1,8 @@
+import { mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { defineComponent, onMounted, ref } from 'vue'
-import { mount } from '@vue/test-utils'
-import PortalWrapper, { getOpenCount } from '../src/PortalWrapper'
 import Portal from '../src/Portal'
+import PortalWrapper, { getOpenCount } from '../src/PortalWrapper'
 
 describe('portal', () => {
   let domContainer: HTMLDivElement