@veltra/utils 1.1.1 → 1.1.3

package/dist/dom/expand-transition.d.ts

@@ -0,0 +1,27 @@
+//#region src/dom/expand-transition.d.ts
+interface ExpandTransitionOptions {
+  transition?: string;
+  enterTransition?: string;
+  leaveTransition?: string;
+  opacity?: boolean;
+}
+declare class ExpandTransition {
+  private options;
+  private cleanupMap;
+  constructor(options?: ExpandTransitionOptions);
+  cancel(el: HTMLElement): void;
+  enter(el: HTMLElement): void;
+  afterEnter(el: HTMLElement): void;
+  beforeLeave(el: HTMLElement): void;
+  leave(el: HTMLElement): void;
+  afterLeave(el: HTMLElement): void;
+  expand(el: HTMLElement): void;
+  collapse(el: HTMLElement): void;
+  setExpanded(el: HTMLElement, expanded: boolean): void;
+  private animate;
+  private resetTransitionStyles;
+  private resetTemporaryStyles;
+}
+//#endregion
+export { ExpandTransition, ExpandTransitionOptions };
+//# sourceMappingURL=expand-transition.d.ts.map

package/dist/dom/expand-transition.js

@@ -0,0 +1,149 @@
+import { removeStyles, setStyles } from "./style.js";
+//#region src/dom/expand-transition.ts
+function readVerticalPadding(el) {
+	const { paddingTop, paddingBottom } = getComputedStyle(el);
+	return {
+		paddingTop,
+		paddingBottom
+	};
+}
+function getTransition(options, type) {
+	return (type === "enter" ? options.enterTransition : options.leaveTransition) ?? options.transition ?? "height 0.25s cubic-bezier(0.4, 0, 0.2, 1)";
+}
+var ExpandTransition = class {
+	cleanupMap = /* @__PURE__ */ new Map();
+	constructor(options = {}) {
+		this.options = options;
+	}
+	cancel(el) {
+		this.cleanupMap.get(el)?.();
+		this.cleanupMap.delete(el);
+	}
+	enter(el) {
+		const height = el.scrollHeight;
+		const { paddingTop, paddingBottom } = readVerticalPadding(el);
+		setStyles(el, {
+			boxSizing: "border-box",
+			height: 0,
+			paddingTop: 0,
+			paddingBottom: 0,
+			overflow: "hidden",
+			transition: getTransition(this.options, "enter"),
+			willChange: this.options.opacity ? "height, opacity" : "height"
+		});
+		if (this.options.opacity) el.style.opacity = "0";
+		el.offsetHeight;
+		setStyles(el, {
+			height: `${height}px`,
+			paddingTop,
+			paddingBottom
+		});
+		if (this.options.opacity) el.style.opacity = "1";
+	}
+	afterEnter(el) {
+		this.resetTransitionStyles(el);
+	}
+	beforeLeave(el) {
+		const { paddingTop, paddingBottom } = readVerticalPadding(el);
+		setStyles(el, {
+			boxSizing: "border-box",
+			height: `${el.scrollHeight}px`,
+			paddingTop,
+			paddingBottom,
+			overflow: "hidden",
+			transition: getTransition(this.options, "leave"),
+			willChange: this.options.opacity ? "height, opacity" : "height"
+		});
+		if (this.options.opacity) el.style.opacity = "1";
+	}
+	leave(el) {
+		el.offsetHeight;
+		setStyles(el, {
+			height: 0,
+			paddingTop: 0,
+			paddingBottom: 0
+		});
+		if (this.options.opacity) el.style.opacity = "0";
+	}
+	afterLeave(el) {
+		this.resetTransitionStyles(el);
+	}
+	expand(el) {
+		this.animate(el, true);
+	}
+	collapse(el) {
+		this.animate(el, false);
+	}
+	setExpanded(el, expanded) {
+		this.cancel(el);
+		this.resetTemporaryStyles(el);
+		el.style.overflow = "hidden";
+		el.style.height = expanded ? "auto" : "0px";
+	}
+	animate(el, expanded) {
+		this.cancel(el);
+		const startHeight = el.offsetHeight;
+		const endHeight = expanded ? el.scrollHeight : 0;
+		const { paddingTop, paddingBottom } = readVerticalPadding(el);
+		if (startHeight === endHeight) {
+			this.setExpanded(el, expanded);
+			return;
+		}
+		setStyles(el, {
+			boxSizing: "border-box",
+			height: `${startHeight}px`,
+			paddingTop,
+			paddingBottom,
+			overflow: "hidden",
+			transition: getTransition(this.options, expanded ? "enter" : "leave"),
+			willChange: "height"
+		});
+		el.offsetHeight;
+		setStyles(el, {
+			height: `${endHeight}px`,
+			paddingTop: expanded ? paddingTop : 0,
+			paddingBottom: expanded ? paddingBottom : 0
+		});
+		const cleanup = () => {
+			el.removeEventListener("transitionend", onEnd);
+			el.removeEventListener("transitioncancel", onEnd);
+			this.cleanupMap.delete(el);
+		};
+		const onEnd = (e) => {
+			if (e.target !== el || e.propertyName !== "height") return;
+			cleanup();
+			this.resetTemporaryStyles(el);
+			el.style.overflow = "hidden";
+			el.style.height = expanded ? "auto" : "0px";
+		};
+		el.addEventListener("transitionend", onEnd);
+		el.addEventListener("transitioncancel", onEnd);
+		this.cleanupMap.set(el, cleanup);
+	}
+	resetTransitionStyles(el) {
+		removeStyles(el, [
+			"box-sizing",
+			"height",
+			"padding-top",
+			"padding-bottom",
+			"overflow",
+			"transition",
+			"opacity",
+			"will-change"
+		]);
+	}
+	resetTemporaryStyles(el) {
+		removeStyles(el, [
+			"box-sizing",
+			"padding-top",
+			"padding-bottom",
+			"transition",
+			"opacity",
+			"will-change"
+		]);
+	}
+};
+//#endregion
+export { ExpandTransition };
+
+//# sourceMappingURL=expand-transition.js.map

package/dist/dom/expand-transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expand-transition.js","names":[],"sources":["../../src/dom/expand-transition.ts"],"sourcesContent":["import { removeStyles, setStyles } from './style'\n\nexport interface ExpandTransitionOptions {\n  transition?: string\n  enterTransition?: string\n  leaveTransition?: string\n  opacity?: boolean\n}\n\nfunction readVerticalPadding(el: HTMLElement) {\n  const { paddingTop, paddingBottom } = getComputedStyle(el)\n  return { paddingTop, paddingBottom }\n}\n\nfunction getTransition(options: ExpandTransitionOptions, type: 'enter' | 'leave') {\n  return (\n    (type === 'enter' ? options.enterTransition : options.leaveTransition) ??\n    options.transition ??\n    'height 0.25s cubic-bezier(0.4, 0, 0.2, 1)'\n  )\n}\n\nexport class ExpandTransition {\n  private cleanupMap = new Map<HTMLElement, () => void>()\n\n  constructor(private options: ExpandTransitionOptions = {}) {}\n\n  cancel(el: HTMLElement) {\n    this.cleanupMap.get(el)?.()\n    this.cleanupMap.delete(el)\n  }\n\n  enter(el: HTMLElement) {\n    const height = el.scrollHeight\n    const { paddingTop, paddingBottom } = readVerticalPadding(el)\n\n    setStyles(el, {\n      boxSizing: 'border-box',\n      height: 0,\n      paddingTop: 0,\n      paddingBottom: 0,\n      overflow: 'hidden',\n      transition: getTransition(this.options, 'enter'),\n      willChange: this.options.opacity ? 'height, opacity' : 'height'\n    })\n\n    if (this.options.opacity) {\n      el.style.opacity = '0'\n    }\n\n    void el.offsetHeight\n\n    setStyles(el, { height: `${height}px`, paddingTop, paddingBottom })\n\n    if (this.options.opacity) {\n      el.style.opacity = '1'\n    }\n  }\n\n  afterEnter(el: HTMLElement) {\n    this.resetTransitionStyles(el)\n  }\n\n  beforeLeave(el: HTMLElement) {\n    const { paddingTop, paddingBottom } = readVerticalPadding(el)\n\n    setStyles(el, {\n      boxSizing: 'border-box',\n      height: `${el.scrollHeight}px`,\n      paddingTop,\n      paddingBottom,\n      overflow: 'hidden',\n      transition: getTransition(this.options, 'leave'),\n      willChange: this.options.opacity ? 'height, opacity' : 'height'\n    })\n\n    if (this.options.opacity) {\n      el.style.opacity = '1'\n    }\n  }\n\n  leave(el: HTMLElement) {\n    void el.offsetHeight\n\n    setStyles(el, { height: 0, paddingTop: 0, paddingBottom: 0 })\n\n    if (this.options.opacity) {\n      el.style.opacity = '0'\n    }\n  }\n\n  afterLeave(el: HTMLElement) {\n    this.resetTransitionStyles(el)\n  }\n\n  expand(el: HTMLElement) {\n    this.animate(el, true)\n  }\n\n  collapse(el: HTMLElement) {\n    this.animate(el, false)\n  }\n\n  setExpanded(el: HTMLElement, expanded: boolean) {\n    this.cancel(el)\n    this.resetTemporaryStyles(el)\n    el.style.overflow = 'hidden'\n    el.style.height = expanded ? 'auto' : '0px'\n  }\n\n  private animate(el: HTMLElement, expanded: boolean) {\n    this.cancel(el)\n\n    const startHeight = el.offsetHeight\n    const endHeight = expanded ? el.scrollHeight : 0\n    const { paddingTop, paddingBottom } = readVerticalPadding(el)\n\n    if (startHeight === endHeight) {\n      this.setExpanded(el, expanded)\n      return\n    }\n\n    setStyles(el, {\n      boxSizing: 'border-box',\n      height: `${startHeight}px`,\n      paddingTop,\n      paddingBottom,\n      overflow: 'hidden',\n      transition: getTransition(this.options, expanded ? 'enter' : 'leave'),\n      willChange: 'height'\n    })\n\n    void el.offsetHeight\n\n    setStyles(el, {\n      height: `${endHeight}px`,\n      paddingTop: expanded ? paddingTop : 0,\n      paddingBottom: expanded ? paddingBottom : 0\n    })\n\n    const cleanup = () => {\n      el.removeEventListener('transitionend', onEnd)\n      el.removeEventListener('transitioncancel', onEnd)\n      this.cleanupMap.delete(el)\n    }\n\n    const onEnd = (e: TransitionEvent) => {\n      if (e.target !== el || e.propertyName !== 'height') return\n      cleanup()\n      this.resetTemporaryStyles(el)\n      el.style.overflow = 'hidden'\n      el.style.height = expanded ? 'auto' : '0px'\n    }\n\n    el.addEventListener('transitionend', onEnd)\n    el.addEventListener('transitioncancel', onEnd)\n    this.cleanupMap.set(el, cleanup)\n  }\n\n  private resetTransitionStyles(el: HTMLElement) {\n    removeStyles(el, [\n      'box-sizing',\n      'height',\n      'padding-top',\n      'padding-bottom',\n      'overflow',\n      'transition',\n      'opacity',\n      'will-change'\n    ])\n  }\n\n  private resetTemporaryStyles(el: HTMLElement) {\n    removeStyles(el, [\n      'box-sizing',\n      'padding-top',\n      'padding-bottom',\n      'transition',\n      'opacity',\n      'will-change'\n    ])\n  }\n}\n"],"mappings":"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"}

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import { BEM, BEMFactory, makeBEM } from "./helper/make-bem.js";
 import { CLS_PREFIX, FORM_EMPTY_CONTENT, NAME_SPACE } from "./shared/constants.js";
 import { addClass, bem, removeClass } from "./dom/class-name.js";
+import { ExpandTransition, ExpandTransitionOptions } from "./dom/expand-transition.js";
 import { getHighlightChunks } from "./dom/highlight.js";
 import { getNearestScrollParent, getScrollParents, scrollIntoContainerView } from "./dom/position.js";
 import { removeStyles, setStyles, withUnit } from "./dom/style.js";
@@ -15,5 +16,5 @@ import { extractNormalVNodes, isComment, isFragment, isTemplate, isTextNode, sha
 import { middleProxy } from "./reactive/proxy.js";
 import { DeconstructValue, DefineEvent, Index, Null, RenderReturn, Undef } from "./types/helper.js";
 import { BreakpointName, ColorType, ComponentProps, ComponentSize, FormComponentProps, PropsWithServerQuery } from "./types/component-common.js";
-import { FormContextInjectProps } from "./types/form-context.js";
-export { AnimeConfig, BEM, BEMFactory, BreakpointName, CLS_PREFIX, ColorType, ComponentProps, ComponentSize, Data, DeconstructValue, DefineEvent, FORM_EMPTY_CONTENT, FormComponentProps, FormContextInjectProps, Index, NAME_SPACE, Null, PresetRule, PropsWithServerQuery, RenderReturn, Tween, TweenConfig, Undef, ValidateRule, Validator, ValidatorConfig, addClass, bem, createIncrease, createToggle, extractNormalVNodes, getHighlightChunks, getNearestScrollParent, getScrollParents, isComment, isFragment, isTemplate, isTextNode, makeBEM, middleProxy, nextFrame, removeClass, removeStyles, scrollIntoContainerView, setStyles, shallowComputed, withUnit, zIndex };
+import { FormContextModel, FormContextProps, injectFormContext, provideFormContext } from "./types/form-context.js";
+export { AnimeConfig, BEM, BEMFactory, BreakpointName, CLS_PREFIX, ColorType, ComponentProps, ComponentSize, Data, DeconstructValue, DefineEvent, ExpandTransition, ExpandTransitionOptions, FORM_EMPTY_CONTENT, FormComponentProps, FormContextModel, FormContextProps, Index, NAME_SPACE, Null, PresetRule, PropsWithServerQuery, RenderReturn, Tween, TweenConfig, Undef, ValidateRule, Validator, ValidatorConfig, addClass, bem, createIncrease, createToggle, extractNormalVNodes, getHighlightChunks, getNearestScrollParent, getScrollParents, injectFormContext, isComment, isFragment, isTemplate, isTextNode, makeBEM, middleProxy, nextFrame, provideFormContext, removeClass, removeStyles, scrollIntoContainerView, setStyles, shallowComputed, withUnit, zIndex };

package/dist/index.js

@@ -1,9 +1,10 @@
 import { makeBEM } from "./helper/make-bem.js";
 import { CLS_PREFIX, FORM_EMPTY_CONTENT, NAME_SPACE } from "./shared/constants.js";
 import { addClass, bem, removeClass } from "./dom/class-name.js";
+import { removeStyles, setStyles, withUnit } from "./dom/style.js";
+import { ExpandTransition } from "./dom/expand-transition.js";
 import { getHighlightChunks } from "./dom/highlight.js";
 import { getNearestScrollParent, getScrollParents, scrollIntoContainerView } from "./dom/position.js";
-import { removeStyles, setStyles, withUnit } from "./dom/style.js";
 import { createIncrease } from "./helper/create-increase.js";
 import { zIndex } from "./dom/z-index.js";
 import { Validator } from "./form/validate.js";
@@ -12,4 +13,5 @@ import { Tween } from "./helper/tween.js";
 import { nextFrame } from "./helper/frame.js";
 import { extractNormalVNodes, isComment, isFragment, isTemplate, isTextNode, shallowComputed } from "./helper/vue.js";
 import { middleProxy } from "./reactive/proxy.js";
-export { CLS_PREFIX, FORM_EMPTY_CONTENT, NAME_SPACE, Tween, Validator, addClass, bem, createIncrease, createToggle, extractNormalVNodes, getHighlightChunks, getNearestScrollParent, getScrollParents, isComment, isFragment, isTemplate, isTextNode, makeBEM, middleProxy, nextFrame, removeClass, removeStyles, scrollIntoContainerView, setStyles, shallowComputed, withUnit, zIndex };
+import { injectFormContext, provideFormContext } from "./types/form-context.js";
+export { CLS_PREFIX, ExpandTransition, FORM_EMPTY_CONTENT, NAME_SPACE, Tween, Validator, addClass, bem, createIncrease, createToggle, extractNormalVNodes, getHighlightChunks, getNearestScrollParent, getScrollParents, injectFormContext, isComment, isFragment, isTemplate, isTextNode, makeBEM, middleProxy, nextFrame, provideFormContext, removeClass, removeStyles, scrollIntoContainerView, setStyles, shallowComputed, withUnit, zIndex };

package/dist/types/form-context.d.ts

@@ -1,6 +1,34 @@
+import { ComponentSize } from "./component-common.js";
+
 //#region src/types/form-context.d.ts
-/** 表单 provide/inject 上下文（完整 props 见 @veltra/desktop/types/form） */
-type FormContextInjectProps = Record<string, unknown>;
+interface FormContextModel {
+  errors: Map<any, string[] | undefined>;
+  fields: Record<string, {
+    required?: unknown;
+  }>;
+}
+interface FormContextProps {
+  /** 表单列宽 */
+  labelWidth?: string | number;
+  /** 表单尺寸 */
+  size?: ComponentSize;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 是否只读 */
+  readonly?: boolean;
+  /** 是否隐藏提示 */
+  noTips?: boolean;
+  /** 表单数据模型 */
+  model?: FormContextModel;
+}
+type FormPropsLike = Partial<FormContextProps> & Record<string, any>;
+type DIContext = {
+  /** 表单属性 */formProps: FormPropsLike;
+};
+declare function provideFormContext<T extends FormPropsLike>(props: T): void;
+declare function injectFormContext(): {
+  /** 是否在表单中 */inForm: boolean;
+} & Partial<DIContext>;
 //#endregion
-export { FormContextInjectProps };
+export { FormContextModel, FormContextProps, injectFormContext, provideFormContext };
 //# sourceMappingURL=form-context.d.ts.map

package/dist/types/form-context.js

@@ -0,0 +1,17 @@
+import { inject, provide } from "vue";
+//#region src/types/form-context.ts
+const FormComponentDIKey = Symbol("FormComponentDIKey");
+function provideFormContext(props) {
+	if (props) provide(FormComponentDIKey, { formProps: props });
+}
+function injectFormContext() {
+	const context = inject(FormComponentDIKey, void 0) || {};
+	return {
+		inForm: !!context,
+		...context
+	};
+}
+//#endregion
+export { injectFormContext, provideFormContext };
+
+//# sourceMappingURL=form-context.js.map

package/dist/types/form-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-context.js","names":[],"sources":["../../src/types/form-context.ts"],"sourcesContent":["import { type InjectionKey, inject, provide } from 'vue'\n\nimport type { ComponentSize } from './component-common'\n\nexport interface FormContextModel {\n  errors: Map<any, string[] | undefined>\n  fields: Record<string, { required?: unknown }>\n}\n\nexport interface FormContextProps {\n  /** 表单列宽 */\n  labelWidth?: string | number\n  /** 表单尺寸 */\n  size?: ComponentSize\n  /** 是否禁用 */\n  disabled?: boolean\n  /** 是否只读 */\n  readonly?: boolean\n  /** 是否隐藏提示 */\n  noTips?: boolean\n  /** 表单数据模型 */\n  model?: FormContextModel\n}\n\ntype FormPropsLike = Partial<FormContextProps> & Record<string, any>\n\ntype DIContext = {\n  /** 表单属性 */\n  formProps: FormPropsLike\n}\n\nconst FormComponentDIKey: InjectionKey<DIContext> = Symbol('FormComponentDIKey')\n\nexport function provideFormContext<T extends FormPropsLike>(props: T): void {\n  if (props) {\n    provide(FormComponentDIKey, { formProps: props })\n  }\n}\n\nexport function injectFormContext(): {\n  /** 是否在表单中 */\n  inForm: boolean\n} & Partial<DIContext> {\n  const context = inject(FormComponentDIKey, undefined) || {}\n  return { inForm: !!context, ...context }\n}\n"],"mappings":";;AA+BA,MAAM,qBAA8C,OAAO,qBAAqB;AAEhF,SAAgB,mBAA4C,OAAgB;AAC1E,KAAI,MACF,SAAQ,oBAAoB,EAAE,WAAW,OAAO,CAAC;;AAIrD,SAAgB,oBAGO;CACrB,MAAM,UAAU,OAAO,oBAAoB,KAAA,EAAU,IAAI,EAAE;AAC3D,QAAO;EAAE,QAAQ,CAAC,CAAC;EAAS,GAAG;EAAS"}

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 import { Data, PresetRule, ValidateRule, ValidatorConfig } from "./utils/form/validate.js";
 import { DeconstructValue, DefineEvent, Index, Null, RenderReturn, Undef } from "./helper.js";
 import { BreakpointName, ColorType, ComponentProps, ComponentSize, FormComponentProps, PropsWithServerQuery } from "./component-common.js";
-import { FormContextInjectProps } from "./form-context.js";
-export { BreakpointName, ColorType, ComponentProps, ComponentSize, Data, DeconstructValue, DefineEvent, FormComponentProps, FormContextInjectProps, Index, Null, PresetRule, PropsWithServerQuery, RenderReturn, Undef, ValidateRule, ValidatorConfig };
+import { FormContextModel, FormContextProps, injectFormContext, provideFormContext } from "./form-context.js";
+export { BreakpointName, ColorType, ComponentProps, ComponentSize, Data, DeconstructValue, DefineEvent, FormComponentProps, FormContextModel, FormContextProps, Index, Null, PresetRule, PropsWithServerQuery, RenderReturn, Undef, ValidateRule, ValidatorConfig, injectFormContext, provideFormContext };

package/dist/types/index.js

@@ -0,0 +1,2 @@
+import { injectFormContext, provideFormContext } from "./form-context.js";
+export { injectFormContext, provideFormContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/utils",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "files": [
     "dist",
     "src"

package/src/dom/__test__/expand-transition.test.ts

@@ -0,0 +1,98 @@
+// @vitest-environment happy-dom
+import { ExpandTransition } from '../expand-transition'
+
+function createPanel() {
+  const el = document.createElement('div')
+
+  el.style.paddingTop = '2px'
+  el.style.paddingBottom = '2px'
+  document.body.appendChild(el)
+
+  Object.defineProperties(el, {
+    offsetHeight: { configurable: true, value: 16 },
+    scrollHeight: { configurable: true, value: 44 }
+  })
+
+  return el
+}
+
+function fireHeightTransitionEnd(el: HTMLElement) {
+  const event = new Event('transitionend') as TransitionEvent
+  Object.defineProperty(event, 'propertyName', { configurable: true, value: 'height' })
+  el.dispatchEvent(event)
+}
+
+describe('ExpandTransition', () => {
+  it('drives Vue transition hooks with a measured border-box height', () => {
+    const el = createPanel()
+    const transition = new ExpandTransition({
+      enterTransition: 'height 0.25s ease, padding-top 0.25s ease, padding-bottom 0.25s ease',
+      leaveTransition: 'height 0.2s ease, padding-top 0.2s ease, padding-bottom 0.2s ease',
+      opacity: true
+    })
+
+    try {
+      transition.enter(el)
+
+      expect(el.style.height).toBe('44px')
+      expect(el.style.paddingTop).toBe('2px')
+      expect(el.style.paddingBottom).toBe('2px')
+      expect(el.style.boxSizing).toBe('border-box')
+      expect(el.style.opacity).toBe('1')
+
+      transition.beforeLeave(el)
+      transition.leave(el)
+
+      expect(el.style.height).toBe('0px')
+      expect(el.style.paddingTop).toBe('0px')
+      expect(el.style.paddingBottom).toBe('0px')
+      expect(el.style.boxSizing).toBe('border-box')
+      expect(el.style.opacity).toBe('0')
+    } finally {
+      el.remove()
+    }
+  })
+
+  it('keeps expanded imperative panels at auto height after transition end', () => {
+    const el = createPanel()
+    const transition = new ExpandTransition({ transition: 'height 0.25s ease' })
+
+    try {
+      transition.expand(el)
+
+      expect(el.style.height).toBe('44px')
+      expect(el.style.overflow).toBe('hidden')
+
+      fireHeightTransitionEnd(el)
+
+      expect(el.style.height).toBe('auto')
+      expect(el.style.transition).toBe('')
+      expect(el.style.willChange).toBe('')
+    } finally {
+      el.remove()
+      transition.cancel(el)
+    }
+  })
+
+  it('keeps collapsed imperative panels at zero height after transition end', () => {
+    const el = createPanel()
+    const transition = new ExpandTransition({ transition: 'height 0.25s ease' })
+
+    try {
+      transition.collapse(el)
+
+      expect(el.style.height).toBe('0px')
+      expect(el.style.paddingTop).toBe('0px')
+      expect(el.style.paddingBottom).toBe('0px')
+
+      fireHeightTransitionEnd(el)
+
+      expect(el.style.height).toBe('0px')
+      expect(el.style.transition).toBe('')
+      expect(el.style.willChange).toBe('')
+    } finally {
+      el.remove()
+      transition.cancel(el)
+    }
+  })
+})

package/src/dom/expand-transition.ts

@@ -0,0 +1,183 @@
+import { removeStyles, setStyles } from './style'
+
+export interface ExpandTransitionOptions {
+  transition?: string
+  enterTransition?: string
+  leaveTransition?: string
+  opacity?: boolean
+}
+
+function readVerticalPadding(el: HTMLElement) {
+  const { paddingTop, paddingBottom } = getComputedStyle(el)
+  return { paddingTop, paddingBottom }
+}
+
+function getTransition(options: ExpandTransitionOptions, type: 'enter' | 'leave') {
+  return (
+    (type === 'enter' ? options.enterTransition : options.leaveTransition) ??
+    options.transition ??
+    'height 0.25s cubic-bezier(0.4, 0, 0.2, 1)'
+  )
+}
+
+export class ExpandTransition {
+  private cleanupMap = new Map<HTMLElement, () => void>()
+
+  constructor(private options: ExpandTransitionOptions = {}) {}
+
+  cancel(el: HTMLElement) {
+    this.cleanupMap.get(el)?.()
+    this.cleanupMap.delete(el)
+  }
+
+  enter(el: HTMLElement) {
+    const height = el.scrollHeight
+    const { paddingTop, paddingBottom } = readVerticalPadding(el)
+
+    setStyles(el, {
+      boxSizing: 'border-box',
+      height: 0,
+      paddingTop: 0,
+      paddingBottom: 0,
+      overflow: 'hidden',
+      transition: getTransition(this.options, 'enter'),
+      willChange: this.options.opacity ? 'height, opacity' : 'height'
+    })
+
+    if (this.options.opacity) {
+      el.style.opacity = '0'
+    }
+
+    void el.offsetHeight
+
+    setStyles(el, { height: `${height}px`, paddingTop, paddingBottom })
+
+    if (this.options.opacity) {
+      el.style.opacity = '1'
+    }
+  }
+
+  afterEnter(el: HTMLElement) {
+    this.resetTransitionStyles(el)
+  }
+
+  beforeLeave(el: HTMLElement) {
+    const { paddingTop, paddingBottom } = readVerticalPadding(el)
+
+    setStyles(el, {
+      boxSizing: 'border-box',
+      height: `${el.scrollHeight}px`,
+      paddingTop,
+      paddingBottom,
+      overflow: 'hidden',
+      transition: getTransition(this.options, 'leave'),
+      willChange: this.options.opacity ? 'height, opacity' : 'height'
+    })
+
+    if (this.options.opacity) {
+      el.style.opacity = '1'
+    }
+  }
+
+  leave(el: HTMLElement) {
+    void el.offsetHeight
+
+    setStyles(el, { height: 0, paddingTop: 0, paddingBottom: 0 })
+
+    if (this.options.opacity) {
+      el.style.opacity = '0'
+    }
+  }
+
+  afterLeave(el: HTMLElement) {
+    this.resetTransitionStyles(el)
+  }
+
+  expand(el: HTMLElement) {
+    this.animate(el, true)
+  }
+
+  collapse(el: HTMLElement) {
+    this.animate(el, false)
+  }
+
+  setExpanded(el: HTMLElement, expanded: boolean) {
+    this.cancel(el)
+    this.resetTemporaryStyles(el)
+    el.style.overflow = 'hidden'
+    el.style.height = expanded ? 'auto' : '0px'
+  }
+
+  private animate(el: HTMLElement, expanded: boolean) {
+    this.cancel(el)
+
+    const startHeight = el.offsetHeight
+    const endHeight = expanded ? el.scrollHeight : 0
+    const { paddingTop, paddingBottom } = readVerticalPadding(el)
+
+    if (startHeight === endHeight) {
+      this.setExpanded(el, expanded)
+      return
+    }
+
+    setStyles(el, {
+      boxSizing: 'border-box',
+      height: `${startHeight}px`,
+      paddingTop,
+      paddingBottom,
+      overflow: 'hidden',
+      transition: getTransition(this.options, expanded ? 'enter' : 'leave'),
+      willChange: 'height'
+    })
+
+    void el.offsetHeight
+
+    setStyles(el, {
+      height: `${endHeight}px`,
+      paddingTop: expanded ? paddingTop : 0,
+      paddingBottom: expanded ? paddingBottom : 0
+    })
+
+    const cleanup = () => {
+      el.removeEventListener('transitionend', onEnd)
+      el.removeEventListener('transitioncancel', onEnd)
+      this.cleanupMap.delete(el)
+    }
+
+    const onEnd = (e: TransitionEvent) => {
+      if (e.target !== el || e.propertyName !== 'height') return
+      cleanup()
+      this.resetTemporaryStyles(el)
+      el.style.overflow = 'hidden'
+      el.style.height = expanded ? 'auto' : '0px'
+    }
+
+    el.addEventListener('transitionend', onEnd)
+    el.addEventListener('transitioncancel', onEnd)
+    this.cleanupMap.set(el, cleanup)
+  }
+
+  private resetTransitionStyles(el: HTMLElement) {
+    removeStyles(el, [
+      'box-sizing',
+      'height',
+      'padding-top',
+      'padding-bottom',
+      'overflow',
+      'transition',
+      'opacity',
+      'will-change'
+    ])
+  }
+
+  private resetTemporaryStyles(el: HTMLElement) {
+    removeStyles(el, [
+      'box-sizing',
+      'padding-top',
+      'padding-bottom',
+      'transition',
+      'opacity',
+      'will-change'
+    ])
+  }
+}

package/src/index.ts

@@ -1,5 +1,7 @@
 export * from './dom/class-name'
 
+export * from './dom/expand-transition'
+
 export * from './dom/highlight'
 
 export * from './dom/position'

package/src/types/form-context.ts

@@ -1,2 +1,46 @@
-/** 表单 provide/inject 上下文（完整 props 见 @veltra/desktop/types/form） */
-export type FormContextInjectProps = Record<string, unknown>
+import { type InjectionKey, inject, provide } from 'vue'
+
+import type { ComponentSize } from './component-common'
+
+export interface FormContextModel {
+  errors: Map<any, string[] | undefined>
+  fields: Record<string, { required?: unknown }>
+}
+
+export interface FormContextProps {
+  /** 表单列宽 */
+  labelWidth?: string | number
+  /** 表单尺寸 */
+  size?: ComponentSize
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 是否只读 */
+  readonly?: boolean
+  /** 是否隐藏提示 */
+  noTips?: boolean
+  /** 表单数据模型 */
+  model?: FormContextModel
+}
+
+type FormPropsLike = Partial<FormContextProps> & Record<string, any>
+
+type DIContext = {
+  /** 表单属性 */
+  formProps: FormPropsLike
+}
+
+const FormComponentDIKey: InjectionKey<DIContext> = Symbol('FormComponentDIKey')
+
+export function provideFormContext<T extends FormPropsLike>(props: T): void {
+  if (props) {
+    provide(FormComponentDIKey, { formProps: props })
+  }
+}
+
+export function injectFormContext(): {
+  /** 是否在表单中 */
+  inForm: boolean
+} & Partial<DIContext> {
+  const context = inject(FormComponentDIKey, undefined) || {}
+  return { inForm: !!context, ...context }
+}