@veltra/compositions 1.0.8 → 1.0.10

package/dist/index.d.ts

@@ -4,11 +4,11 @@ import { useDrag } from "./use-drag/index.js";
 import { useFallbackProps, useFormFallbackProps } from "./use-fallback-props/index.js";
 import { useFocus } from "./use-focus/index.js";
 import { useFormComponent } from "./use-form-component/index.js";
-import { Updater, useUpdateLock } from "./use-lock/index.js";
+import { UserAction, UserActionResult, useUserAction } from "./use-user-action/index.js";
 import { useModel } from "./use-model/index.js";
 import { usePop } from "./use-pop/index.js";
 import { RefElement, ResizeObserverReturn, useObserverCallback, useResizeObserver } from "./use-resize-observer/index.js";
 import { useReactiveSize } from "./use-reactive-size/index.js";
 import { useTransition } from "./use-transition/index.js";
-import { VirtualReturned, useVirtual } from "./use-virtual/index.js";
-export { RefElement, ResizeObserverReturn, Updater, VirtualReturned, setDocumentSize, useComponentProps, useConfig, useDrag, useFallbackProps, useFocus, useFormComponent, useFormFallbackProps, useModel, useObserverCallback, usePop, useReactiveSize, useResizeObserver, useTransition, useUpdateLock, useVirtual };
+import { EstimateSize, GetItemKey, UseVirtualizerOptions, UseVirtualizerReturned, VirtualAlign, VirtualItem, VirtualMeasurement, VirtualRange, VirtualScrollOptions, VirtualSnapshot, Virtualizer, VirtualizerOptions, useVirtualizer } from "./use-virtualizer/index.js";
+export { EstimateSize, GetItemKey, RefElement, ResizeObserverReturn, UseVirtualizerOptions, UseVirtualizerReturned, UserAction, UserActionResult, VirtualAlign, VirtualItem, VirtualMeasurement, VirtualRange, VirtualScrollOptions, VirtualSnapshot, Virtualizer, VirtualizerOptions, setDocumentSize, useComponentProps, useConfig, useDrag, useFallbackProps, useFocus, useFormComponent, useFormFallbackProps, useModel, useObserverCallback, usePop, useReactiveSize, useResizeObserver, useTransition, useUserAction, useVirtualizer };

package/dist/index.js

@@ -4,11 +4,11 @@ import { useDrag } from "./use-drag/index.js";
 import { useFallbackProps, useFormFallbackProps } from "./use-fallback-props/index.js";
 import { useFocus } from "./use-focus/index.js";
 import { useFormComponent } from "./use-form-component/index.js";
-import { useUpdateLock } from "./use-lock/index.js";
+import { useUserAction } from "./use-user-action/index.js";
 import { useModel } from "./use-model/index.js";
 import { usePop } from "./use-pop/index.js";
 import { useObserverCallback, useResizeObserver } from "./use-resize-observer/index.js";
 import { useReactiveSize } from "./use-reactive-size/index.js";
 import { useTransition } from "./use-transition/index.js";
-import { useVirtual } from "./use-virtual/index.js";
-export { setDocumentSize, useComponentProps, useConfig, useDrag, useFallbackProps, useFocus, useFormComponent, useFormFallbackProps, useModel, useObserverCallback, usePop, useReactiveSize, useResizeObserver, useTransition, useUpdateLock, useVirtual };
+import { useVirtualizer } from "./use-virtualizer/index.js";
+export { setDocumentSize, useComponentProps, useConfig, useDrag, useFallbackProps, useFocus, useFormComponent, useFormFallbackProps, useModel, useObserverCallback, usePop, useReactiveSize, useResizeObserver, useTransition, useUserAction, useVirtualizer };

package/dist/use-component-props/index.js

@@ -10,7 +10,9 @@ function useComponentProps(props) {
 	return defineComponent({
 		name: "ComponentCommonProps",
 		inheritAttrs: false,
-		props: { tag: { type: String } },
+		props: { 
+		/** 渲染一个标准html5标签 */
+tag: { type: String } },
 		setup(componentProps, { slots, attrs }) {
 			const isPropsRef = isRef(props);
 			const staticKeys = isPropsRef ? null : Object.keys(props);

package/dist/use-component-props/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/use-component-props/index.ts"],"sourcesContent":["import { extractNormalVNodes } from '@veltra/utils'\nimport { defineComponent, isRef, type MaybeRef, createVNode, cloneVNode, type Component } from 'vue'\n\n/**\n * 生成一个用于设置组件通用属性的组件\n * @param props 组件通用的属性\n * @returns\n */\nexport function useComponentProps<T extends Record<string, any>>(\n  props: MaybeRef<T & Record<string, any>>\n): Component {\n  return defineComponent({\n    name: 'ComponentCommonProps',\n    inheritAttrs: false,\n\n    props: {\n      /** 渲染一个标准html5标签 */\n      tag: { type: String }\n    },\n\n    setup(componentProps, { slots, attrs }) {\n      const isPropsRef = isRef(props)\n      // 非 ref 时 keys 固定，缓存避免每次 render 重复计算\n      const staticKeys = isPropsRef ? null : Object.keys(props)\n\n      const mergeNodesProps = (commonProps: Record<string, any>) => {\n        const nodes = extractNormalVNodes(slots.default?.() ?? [])\n        if (!nodes?.length) return undefined\n\n        const keys = staticKeys ?? Object.keys(commonProps)\n        return nodes.map((node) => {\n          const mergedProps: Record<string, any> = {}\n          let count = 0\n          for (let i = 0; i < keys.length; i++) {\n            const key = keys[i]!\n            // node中已定义的属性优先\n            if (node.props?.[key] !== undefined) continue\n            mergedProps[key] = attrs[key] !== undefined ? attrs[key] : commonProps[key]\n            count++\n          }\n          return count > 0 ? cloneVNode(node, mergedProps) : node\n        })\n      }\n\n      return () => {\n        const _props = isPropsRef ? props.value : props\n        const nodes = mergeNodesProps(_props)\n\n        if (componentProps.tag) {\n          if (!nodes) return undefined\n          const tagProps = Object.keys(attrs).reduce<Record<string, any>>((acc, cur) => {\n            if (!(cur in _props)) {\n              acc[cur] = attrs[cur]\n            }\n            return acc\n          }, {})\n          return createVNode(componentProps.tag, tagProps, nodes)\n        }\n        return nodes\n      }\n    }\n  })\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,kBACd,OACW;AACX,QAAO,gBAAgB;EACrB,MAAM;EACN,cAAc;EAEd,OAAO,EAEL,KAAK,EAAE,MAAM,QAAQ,EACtB;EAED,MAAM,gBAAgB,EAAE,OAAO,SAAS;GACtC,MAAM,aAAa,MAAM,MAAM;GAE/B,MAAM,aAAa,aAAa,OAAO,OAAO,KAAK,MAAM;GAEzD,MAAM,mBAAmB,gBAAqC;IAC5D,MAAM,QAAQ,oBAAoB,MAAM,WAAW,IAAI,EAAE,CAAC;AAC1D,QAAI,CAAC,OAAO,OAAQ,QAAO,KAAA;IAE3B,MAAM,OAAO,cAAc,OAAO,KAAK,YAAY;AACnD,WAAO,MAAM,KAAK,SAAS;KACzB,MAAM,cAAmC,EAAE;KAC3C,IAAI,QAAQ;AACZ,UAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;MACpC,MAAM,MAAM,KAAK;AAEjB,UAAI,KAAK,QAAQ,SAAS,KAAA,EAAW;AACrC,kBAAY,OAAO,MAAM,SAAS,KAAA,IAAY,MAAM,OAAO,YAAY;AACvE;;AAEF,YAAO,QAAQ,IAAI,WAAW,MAAM,YAAY,GAAG;MACnD;;AAGJ,gBAAa;IACX,MAAM,SAAS,aAAa,MAAM,QAAQ;IAC1C,MAAM,QAAQ,gBAAgB,OAAO;AAErC,QAAI,eAAe,KAAK;AACtB,SAAI,CAAC,MAAO,QAAO,KAAA;KACnB,MAAM,WAAW,OAAO,KAAK,MAAM,CAAC,QAA6B,KAAK,QAAQ;AAC5E,UAAI,EAAE,OAAO,QACX,KAAI,OAAO,MAAM;AAEnB,aAAO;QACN,EAAE,CAAC;AACN,YAAO,YAAY,eAAe,KAAK,UAAU,MAAM;;AAEzD,WAAO;;;EAGZ,CAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/use-component-props/index.ts"],"sourcesContent":["import { extractNormalVNodes } from '@veltra/utils'\nimport { defineComponent, isRef, type MaybeRef, createVNode, cloneVNode, type Component } from 'vue'\n\n/**\n * 生成一个用于设置组件通用属性的组件\n * @param props 组件通用的属性\n * @returns\n */\nexport function useComponentProps<T extends Record<string, any>>(\n  props: MaybeRef<T & Record<string, any>>\n): Component {\n  return defineComponent({\n    name: 'ComponentCommonProps',\n    inheritAttrs: false,\n\n    props: {\n      /** 渲染一个标准html5标签 */\n      tag: { type: String }\n    },\n\n    setup(componentProps, { slots, attrs }) {\n      const isPropsRef = isRef(props)\n      // 非 ref 时 keys 固定，缓存避免每次 render 重复计算\n      const staticKeys = isPropsRef ? null : Object.keys(props)\n\n      const mergeNodesProps = (commonProps: Record<string, any>) => {\n        const nodes = extractNormalVNodes(slots.default?.() ?? [])\n        if (!nodes?.length) return undefined\n\n        const keys = staticKeys ?? Object.keys(commonProps)\n        return nodes.map((node) => {\n          const mergedProps: Record<string, any> = {}\n          let count = 0\n          for (let i = 0; i < keys.length; i++) {\n            const key = keys[i]!\n            // node中已定义的属性优先\n            if (node.props?.[key] !== undefined) continue\n            mergedProps[key] = attrs[key] !== undefined ? attrs[key] : commonProps[key]\n            count++\n          }\n          return count > 0 ? cloneVNode(node, mergedProps) : node\n        })\n      }\n\n      return () => {\n        const _props = isPropsRef ? props.value : props\n        const nodes = mergeNodesProps(_props)\n\n        if (componentProps.tag) {\n          if (!nodes) return undefined\n          const tagProps = Object.keys(attrs).reduce<Record<string, any>>((acc, cur) => {\n            if (!(cur in _props)) {\n              acc[cur] = attrs[cur]\n            }\n            return acc\n          }, {})\n          return createVNode(componentProps.tag, tagProps, nodes)\n        }\n        return nodes\n      }\n    }\n  })\n}\n"],"mappings":";;;;;;;;AAQA,SAAgB,kBACd,OACW;AACX,QAAO,gBAAgB;EACrB,MAAM;EACN,cAAc;EAEd,OAAO;;AAEL,KAAK,EAAE,MAAM,QAAQ,EACtB;EAED,MAAM,gBAAgB,EAAE,OAAO,SAAS;GACtC,MAAM,aAAa,MAAM,MAAM;GAE/B,MAAM,aAAa,aAAa,OAAO,OAAO,KAAK,MAAM;GAEzD,MAAM,mBAAmB,gBAAqC;IAC5D,MAAM,QAAQ,oBAAoB,MAAM,WAAW,IAAI,EAAE,CAAC;AAC1D,QAAI,CAAC,OAAO,OAAQ,QAAO,KAAA;IAE3B,MAAM,OAAO,cAAc,OAAO,KAAK,YAAY;AACnD,WAAO,MAAM,KAAK,SAAS;KACzB,MAAM,cAAmC,EAAE;KAC3C,IAAI,QAAQ;AACZ,UAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;MACpC,MAAM,MAAM,KAAK;AAEjB,UAAI,KAAK,QAAQ,SAAS,KAAA,EAAW;AACrC,kBAAY,OAAO,MAAM,SAAS,KAAA,IAAY,MAAM,OAAO,YAAY;AACvE;;AAEF,YAAO,QAAQ,IAAI,WAAW,MAAM,YAAY,GAAG;MACnD;;AAGJ,gBAAa;IACX,MAAM,SAAS,aAAa,MAAM,QAAQ;IAC1C,MAAM,QAAQ,gBAAgB,OAAO;AAErC,QAAI,eAAe,KAAK;AACtB,SAAI,CAAC,MAAO,QAAO,KAAA;KACnB,MAAM,WAAW,OAAO,KAAK,MAAM,CAAC,QAA6B,KAAK,QAAQ;AAC5E,UAAI,EAAE,OAAO,QACX,KAAI,OAAO,MAAM;AAEnB,aAAO;QACN,EAAE,CAAC;AACN,YAAO,YAAY,eAAe,KAAK,UAAU,MAAM;;AAEzD,WAAO;;;EAGZ,CAAC"}

package/dist/use-config/index.js

@@ -39,7 +39,12 @@ function deepSet(original, extend) {
 function useConfig() {
 	ensureDocumentSizeSync();
 	return {
+		/** 全局配置 */
 		config: readonly(state),
+		/**
+		* 设置全局配置项
+		* @param conf
+		*/
 		setConfig(conf) {
 			deepSet(state, conf);
 		}

package/dist/use-config/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/use-config/index.ts"],"sourcesContent":["import { isObj } from '@cat-kit/core'\nimport type { ComponentSize } from '@veltra/utils'\nimport { reactive, readonly, watch } from 'vue'\n\ninterface State {\n  /** 是否开启动画，机器老可以关闭动画来获得性能 */\n  animation: boolean\n  /** 组件尺寸大小 */\n  size: ComponentSize\n  /** 表单 */\n  form: {\n    /** 标签宽度 */\n    labelWidth?: number | number\n  }\n  paginator: { pageSize: number; pageSizeOptions: number[] }\n}\n\nconst state = reactive<State>({\n  animation: true,\n  size: 'default',\n  form: { labelWidth: 80 },\n  paginator: { pageSize: 40, pageSizeOptions: [40, 100, 200, 500, 1000] }\n})\n\nexport function setDocumentSize(size: ComponentSize, oldSize?: ComponentSize): void {\n  if (typeof document === 'undefined') return\n  if (oldSize) {\n    document.documentElement.classList.remove(oldSize)\n  }\n  document.documentElement.classList.add(size)\n}\n\nlet stopDocumentSizeSync: (() => void) | null = null\n\nfunction ensureDocumentSizeSync(): void {\n  if (stopDocumentSizeSync) return\n  if (typeof document === 'undefined') return\n\n  stopDocumentSizeSync = watch(\n    () => state.size,\n    (size, oldSize) => setDocumentSize(size, oldSize)\n  )\n}\n\nfunction deepSet(original: Record<string, any>, extend: Record<string, any>) {\n  Object.keys(extend).forEach((key) => {\n    const val = original[key]\n    const targetVal = extend[key]\n    if (isObj(val)) {\n      if (isObj(targetVal)) {\n        deepSet(val, targetVal)\n      } else {\n        console.warn(`extend['${key}']应该是一个对象`)\n      }\n    } else {\n      original[key] = targetVal\n    }\n  })\n}\n\nexport function useConfig(): {\n  config: Readonly<State>\n  setConfig: (conf: Partial<State>) => void\n} {\n  ensureDocumentSizeSync()\n  return {\n    /** 全局配置 */\n    config: readonly(state) as Readonly<State>,\n    /**\n     * 设置全局配置项\n     * @param conf\n     */\n    setConfig(conf: Partial<State>) {\n      deepSet(state, conf)\n    }\n  }\n}\n"],"mappings":";;;AAiBA,MAAM,QAAQ,SAAgB;CAC5B,WAAW;CACX,MAAM;CACN,MAAM,EAAE,YAAY,IAAI;CACxB,WAAW;EAAE,UAAU;EAAI,iBAAiB;GAAC;GAAI;GAAK;GAAK;GAAK;GAAK;EAAE;CACxE,CAAC;AAEF,SAAgB,gBAAgB,MAAqB,SAA+B;AAClF,KAAI,OAAO,aAAa,YAAa;AACrC,KAAI,QACF,UAAS,gBAAgB,UAAU,OAAO,QAAQ;AAEpD,UAAS,gBAAgB,UAAU,IAAI,KAAK;;AAG9C,IAAI,uBAA4C;AAEhD,SAAS,yBAA+B;AACtC,KAAI,qBAAsB;AAC1B,KAAI,OAAO,aAAa,YAAa;AAErC,wBAAuB,YACf,MAAM,OACX,MAAM,YAAY,gBAAgB,MAAM,QAAQ,CAClD;;AAGH,SAAS,QAAQ,UAA+B,QAA6B;AAC3E,QAAO,KAAK,OAAO,CAAC,SAAS,QAAQ;EACnC,MAAM,MAAM,SAAS;EACrB,MAAM,YAAY,OAAO;AACzB,MAAI,MAAM,IAAI,CACZ,KAAI,MAAM,UAAU,CAClB,SAAQ,KAAK,UAAU;MAEvB,SAAQ,KAAK,WAAW,IAAI,WAAW;MAGzC,UAAS,OAAO;GAElB;;AAGJ,SAAgB,YAGd;AACA,yBAAwB;AACxB,QAAO;EAEL,QAAQ,SAAS,MAAM;EAKvB,UAAU,MAAsB;AAC9B,WAAQ,OAAO,KAAK;;EAEvB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/use-config/index.ts"],"sourcesContent":["import { isObj } from '@cat-kit/core'\nimport type { ComponentSize } from '@veltra/utils'\nimport { reactive, readonly, watch } from 'vue'\n\ninterface State {\n  /** 是否开启动画，机器老可以关闭动画来获得性能 */\n  animation: boolean\n  /** 组件尺寸大小 */\n  size: ComponentSize\n  /** 表单 */\n  form: {\n    /** 标签宽度 */\n    labelWidth?: number | number\n  }\n  paginator: { pageSize: number; pageSizeOptions: number[] }\n}\n\nconst state = reactive<State>({\n  animation: true,\n  size: 'default',\n  form: { labelWidth: 80 },\n  paginator: { pageSize: 40, pageSizeOptions: [40, 100, 200, 500, 1000] }\n})\n\nexport function setDocumentSize(size: ComponentSize, oldSize?: ComponentSize): void {\n  if (typeof document === 'undefined') return\n  if (oldSize) {\n    document.documentElement.classList.remove(oldSize)\n  }\n  document.documentElement.classList.add(size)\n}\n\nlet stopDocumentSizeSync: (() => void) | null = null\n\nfunction ensureDocumentSizeSync(): void {\n  if (stopDocumentSizeSync) return\n  if (typeof document === 'undefined') return\n\n  stopDocumentSizeSync = watch(\n    () => state.size,\n    (size, oldSize) => setDocumentSize(size, oldSize)\n  )\n}\n\nfunction deepSet(original: Record<string, any>, extend: Record<string, any>) {\n  Object.keys(extend).forEach((key) => {\n    const val = original[key]\n    const targetVal = extend[key]\n    if (isObj(val)) {\n      if (isObj(targetVal)) {\n        deepSet(val, targetVal)\n      } else {\n        console.warn(`extend['${key}']应该是一个对象`)\n      }\n    } else {\n      original[key] = targetVal\n    }\n  })\n}\n\nexport function useConfig(): {\n  config: Readonly<State>\n  setConfig: (conf: Partial<State>) => void\n} {\n  ensureDocumentSizeSync()\n  return {\n    /** 全局配置 */\n    config: readonly(state) as Readonly<State>,\n    /**\n     * 设置全局配置项\n     * @param conf\n     */\n    setConfig(conf: Partial<State>) {\n      deepSet(state, conf)\n    }\n  }\n}\n"],"mappings":";;;AAiBA,MAAM,QAAQ,SAAgB;CAC5B,WAAW;CACX,MAAM;CACN,MAAM,EAAE,YAAY,IAAI;CACxB,WAAW;EAAE,UAAU;EAAI,iBAAiB;GAAC;GAAI;GAAK;GAAK;GAAK;GAAK;EAAE;CACxE,CAAC;AAEF,SAAgB,gBAAgB,MAAqB,SAA+B;AAClF,KAAI,OAAO,aAAa,YAAa;AACrC,KAAI,QACF,UAAS,gBAAgB,UAAU,OAAO,QAAQ;AAEpD,UAAS,gBAAgB,UAAU,IAAI,KAAK;;AAG9C,IAAI,uBAA4C;AAEhD,SAAS,yBAA+B;AACtC,KAAI,qBAAsB;AAC1B,KAAI,OAAO,aAAa,YAAa;AAErC,wBAAuB,YACf,MAAM,OACX,MAAM,YAAY,gBAAgB,MAAM,QAAQ,CAClD;;AAGH,SAAS,QAAQ,UAA+B,QAA6B;AAC3E,QAAO,KAAK,OAAO,CAAC,SAAS,QAAQ;EACnC,MAAM,MAAM,SAAS;EACrB,MAAM,YAAY,OAAO;AACzB,MAAI,MAAM,IAAI,CACZ,KAAI,MAAM,UAAU,CAClB,SAAQ,KAAK,UAAU;MAEvB,SAAQ,KAAK,WAAW,IAAI,WAAW;MAGzC,UAAS,OAAO;GAElB;;AAGJ,SAAgB,YAGd;AACA,yBAAwB;AACxB,QAAO;;EAEL,QAAQ,SAAS,MAAM;;;;;EAKvB,UAAU,MAAsB;AAC9B,WAAQ,OAAO,KAAK;;EAEvB"}

package/dist/use-fallback-props/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/use-fallback-props/index.ts"],"sourcesContent":["import type { ComponentSize } from '@veltra/utils'\nimport { computed, type ComputedRef } from 'vue'\n\nimport { useConfig } from '../use-config'\n\n/**\n * 使用回滚属性，用于控制多级属性的使用优先级，如果多级属性中不存在该值，则使用全局配置中的属性，如再不存在则为undefined\n * @param propsList 属性列表，最右边的属性优先级最高\n * @param fallbackProps 要回滚的属性和默认值\n */\nexport function useFallbackProps<\n  F extends Record<string, any>,\n  R extends {\n    [key in keyof F]: ComputedRef<F[key]>\n  }\n>(propsList: Record<string, any>[], fallbackProps: F): R {\n  const { config } = useConfig()\n\n  let result = {} as R\n\n  for (const key in fallbackProps) {\n    if (fallbackProps.hasOwnProperty(key)) {\n      const defaultValue = fallbackProps[key]\n      const ref = computed<any>(() => {\n        for (let i = propsList.length - 1; i > -1; --i) {\n          const props = propsList[i]!\n\n          if (props[key] !== undefined) {\n            return props[key]\n          }\n        }\n\n        return config[key as string] ?? defaultValue\n      })\n\n      result[key as keyof F] = ref as R[keyof F]\n    }\n  }\n\n  return result\n}\n\ntype FormFallbackProps = { size: ComponentSize; disabled: boolean; readonly: boolean }\n\n/**\n * 表单组件的回滚属性\n * @param propsList props列表\n * @returns\n */\nexport function useFormFallbackProps(propsList: Record<string, any>[]): {\n  [key in keyof FormFallbackProps]: ComputedRef<FormFallbackProps[key]>\n}\n\n/**\n * 表单组件的回滚属性\n * @param propsList props列表\n * @param fallbackProps 回滚属性，可以只指定部分表单属性\n * @returns\n */\nexport function useFormFallbackProps<F extends Partial<FormFallbackProps>>(\n  propsList: Record<string, any>[],\n  fallbackProps: F\n): {\n  [key in keyof F]: key extends keyof FormFallbackProps\n    ? ComputedRef<FormFallbackProps[key]>\n    : never\n}\nexport function useFormFallbackProps(\n  propsList: Record<string, any>[],\n  fallbackProps?: Record<string, any>\n): any {\n  if (!fallbackProps) {\n    fallbackProps = { size: 'default', disabled: false, readonly: false }\n  }\n  return useFallbackProps(propsList, fallbackProps)\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,iBAKd,WAAkC,eAAqB;CACvD,MAAM,EAAE,WAAW,WAAW;CAE9B,IAAI,SAAS,EAAE;AAEf,MAAK,MAAM,OAAO,cAChB,KAAI,cAAc,eAAe,IAAI,EAAE;EACrC,MAAM,eAAe,cAAc;AAanC,SAAO,OAZK,eAAoB;AAC9B,QAAK,IAAI,IAAI,UAAU,SAAS,GAAG,IAAI,IAAI,EAAE,GAAG;IAC9C,MAAM,QAAQ,UAAU;AAExB,QAAI,MAAM,SAAS,KAAA,EACjB,QAAO,MAAM;;AAIjB,UAAO,OAAO,QAAkB;IAChC;;AAMN,QAAO;;AA4BT,SAAgB,qBACd,WACA,eACK;AACL,KAAI,CAAC,cACH,iBAAgB;EAAE,MAAM;EAAW,UAAU;EAAO,UAAU;EAAO;AAEvE,QAAO,iBAAiB,WAAW,cAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/use-fallback-props/index.ts"],"sourcesContent":["import type { ComponentSize } from '@veltra/utils'\nimport { computed, type ComputedRef } from 'vue'\n\nimport { useConfig } from '../use-config'\n\n/**\n * 使用回滚属性，用于控制多级属性的使用优先级，如果多级属性中不存在该值，则使用全局配置中的属性，如再不存在则为undefined\n * @param propsList 属性列表，最右边的属性优先级最高\n * @param fallbackProps 要回滚的属性和默认值\n */\nexport function useFallbackProps<\n  F extends Record<string, any>,\n  R extends {\n    [key in keyof F]: ComputedRef<F[key]>\n  }\n>(propsList: Record<string, any>[], fallbackProps: F): R {\n  const { config } = useConfig()\n\n  let result = {} as R\n\n  for (const key in fallbackProps) {\n    if (fallbackProps.hasOwnProperty(key)) {\n      const defaultValue = fallbackProps[key]\n      const ref = computed<any>(() => {\n        for (let i = propsList.length - 1; i > -1; --i) {\n          const props = propsList[i]!\n\n          if (props[key] !== undefined) {\n            return props[key]\n          }\n        }\n\n        return config[key as string] ?? defaultValue\n      })\n\n      result[key as keyof F] = ref as R[keyof F]\n    }\n  }\n\n  return result\n}\n\ntype FormFallbackProps = { size: ComponentSize; disabled: boolean; readonly: boolean }\n\n/**\n * 表单组件的回滚属性\n * @param propsList props列表\n * @returns\n */\nexport function useFormFallbackProps(propsList: Record<string, any>[]): {\n  [key in keyof FormFallbackProps]: ComputedRef<FormFallbackProps[key]>\n}\n\n/**\n * 表单组件的回滚属性\n * @param propsList props列表\n * @param fallbackProps 回滚属性，可以只指定部分表单属性\n * @returns\n */\nexport function useFormFallbackProps<F extends Partial<FormFallbackProps>>(\n  propsList: Record<string, any>[],\n  fallbackProps: F\n): {\n  [key in keyof F]: key extends keyof FormFallbackProps\n    ? ComputedRef<FormFallbackProps[key]>\n    : never\n}\nexport function useFormFallbackProps(\n  propsList: Record<string, any>[],\n  fallbackProps?: Record<string, any>\n): any {\n  if (!fallbackProps) {\n    fallbackProps = { size: 'default', disabled: false, readonly: false }\n  }\n  return useFallbackProps(propsList, fallbackProps)\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,iBAKd,WAAkC,eAAqB;CACvD,MAAM,EAAE,WAAW,WAAW;CAE9B,IAAI,SAAS,EAAE;AAEf,MAAK,MAAM,OAAO,cAChB,KAAI,cAAc,eAAe,IAAI,EAAE;EACrC,MAAM,eAAe,cAAc;AAanC,SAAO,OAZK,eAAoB;AAC9B,QAAK,IAAI,IAAI,UAAU,SAAS,GAAG,IAAI,IAAI,EAAE,GAAG;IAC9C,MAAM,QAAQ,UAAU;AAExB,QAAI,MAAM,SAAS,KAAA,EACjB,QAAO,MAAM;;AAIjB,UAAO,OAAO,QAAkB;IAGN;;AAIhC,QAAO;;AA4BT,SAAgB,qBACd,WACA,eACK;AACL,KAAI,CAAC,cACH,iBAAgB;EAAE,MAAM;EAAW,UAAU;EAAO,UAAU;EAAO;AAEvE,QAAO,iBAAiB,WAAW,cAAc"}

package/dist/use-model/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/use-model/index.ts"],"sourcesContent":["import { type Ref, ref, watch, shallowRef } from 'vue'\n\ninterface ModelOptions<Props extends Record<string, unknown>, Name extends keyof Props> {\n  /** 组件定义的属性 */\n  props: Props\n  /** 属性名称 */\n  propName?: Name\n  /** 事件触发函数 */\n  emit: (...args: any[]) => void\n  /** 是否为本地模式, 默认为true, 本地模式允许组件不受控来触发视图更新 */\n  local?: boolean | (() => boolean)\n  /** 默认值 */\n  defaultValue?: Props[Name]\n  /**\n   * 是否浅层响应\n   * @default false\n   */\n  shallow?: boolean\n}\n\n/**\n * 返回一个基于提供的选项的响应式模型值。\n * 该方法在将来可能会被替代, 目前使用是为了类型提示可用\n * 如果 local 选项为true, 模型值将是响应式的，并与属性值同步。\n * 如果 local 选项为 false，则模型值将是一个代理对象，具有 getter 和 setter。当值发生更改时，它会触发一个更新事件。\n * @param options - 选项\n * @returns - 一个模型值\n */\n\nexport function useModel<\n  Props extends Record<string, any>,\n  Name extends keyof Props = 'modelValue'\n>(\n  options: ModelOptions<Props, Name>\n): Ref<Props[Name] | undefined> | { __v_isRef: boolean; value: Props[Name] } {\n  const {\n    props,\n    propName = 'modelValue',\n    emit,\n    local = true,\n    defaultValue,\n    shallow = false\n  } = options\n\n  if (local) {\n    const _default = props[propName] ?? defaultValue\n    const r = shallow ? shallowRef : ref\n\n    // 创建一个响应式对象\n    const _value = r(_default)\n\n    // 监听属性的变更\n    watch(\n      () => props[propName],\n      (v) => {\n        _value.value = v\n      }\n    )\n\n    const getLocal = () => {\n      return typeof local === 'function' ? local() : local\n    }\n\n    const value = {\n      __v_isRef: true,\n      get value() {\n        return _value.value\n      },\n      set value(v) {\n        if (v !== _value.value) {\n          emit(`update:${propName as string}`, v)\n        }\n        if (getLocal()) {\n          _value.value = v\n        }\n      }\n    }\n\n    return value\n  }\n\n  // 创建一个拥有getter和setter的对象\n  const value = {\n    __v_isRef: true,\n\n    get value(): Props[Name] {\n      return (props[propName] ?? defaultValue) as Props[Name]\n    },\n\n    set value(v: Props[Name]) {\n      emit(`update:${propName as string}`, v)\n    }\n  }\n\n  return value\n}\n"],"mappings":";;;;;;;;;;AA6BA,SAAgB,SAId,SAC2E;CAC3E,MAAM,EACJ,OACA,WAAW,cACX,MACA,QAAQ,MACR,cACA,UAAU,UACR;AAEJ,KAAI,OAAO;EACT,MAAM,WAAW,MAAM,aAAa;EAIpC,MAAM,UAHI,UAAU,aAAa,KAGhB,SAAS;AAG1B,cACQ,MAAM,YACX,MAAM;AACL,UAAO,QAAQ;IAElB;EAED,MAAM,iBAAiB;AACrB,UAAO,OAAO,UAAU,aAAa,OAAO,GAAG;;AAkBjD,SAfc;GACZ,WAAW;GACX,IAAI,QAAQ;AACV,WAAO,OAAO;;GAEhB,IAAI,MAAM,GAAG;AACX,QAAI,MAAM,OAAO,MACf,MAAK,UAAU,YAAsB,EAAE;AAEzC,QAAI,UAAU,CACZ,QAAO,QAAQ;;GAGpB;;AAkBH,QAZc;EACZ,WAAW;EAEX,IAAI,QAAqB;AACvB,UAAQ,MAAM,aAAa;;EAG7B,IAAI,MAAM,GAAgB;AACxB,QAAK,UAAU,YAAsB,EAAE;;EAE1C"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/use-model/index.ts"],"sourcesContent":["import { type Ref, ref, watch, shallowRef } from 'vue'\n\ninterface ModelOptions<Props extends Record<string, unknown>, Name extends keyof Props> {\n  /** 组件定义的属性 */\n  props: Props\n  /** 属性名称 */\n  propName?: Name\n  /** 事件触发函数 */\n  emit: (...args: any[]) => void\n  /** 是否为本地模式, 默认为true, 本地模式允许组件不受控来触发视图更新 */\n  local?: boolean | (() => boolean)\n  /** 默认值 */\n  defaultValue?: Props[Name]\n  /**\n   * 是否浅层响应\n   * @default false\n   */\n  shallow?: boolean\n}\n\n/**\n * 返回一个基于提供的选项的响应式模型值。\n * 该方法在将来可能会被替代, 目前使用是为了类型提示可用\n * 如果 local 选项为true, 模型值将是响应式的，并与属性值同步。\n * 如果 local 选项为 false，则模型值将是一个代理对象，具有 getter 和 setter。当值发生更改时，它会触发一个更新事件。\n * @param options - 选项\n * @returns - 一个模型值\n */\n\nexport function useModel<\n  Props extends Record<string, any>,\n  Name extends keyof Props = 'modelValue'\n>(\n  options: ModelOptions<Props, Name>\n): Ref<Props[Name] | undefined> | { __v_isRef: boolean; value: Props[Name] } {\n  const {\n    props,\n    propName = 'modelValue',\n    emit,\n    local = true,\n    defaultValue,\n    shallow = false\n  } = options\n\n  if (local) {\n    const _default = props[propName] ?? defaultValue\n    const r = shallow ? shallowRef : ref\n\n    // 创建一个响应式对象\n    const _value = r(_default)\n\n    // 监听属性的变更\n    watch(\n      () => props[propName],\n      (v) => {\n        _value.value = v\n      }\n    )\n\n    const getLocal = () => {\n      return typeof local === 'function' ? local() : local\n    }\n\n    const value = {\n      __v_isRef: true,\n      get value() {\n        return _value.value\n      },\n      set value(v) {\n        if (v !== _value.value) {\n          emit(`update:${propName as string}`, v)\n        }\n        if (getLocal()) {\n          _value.value = v\n        }\n      }\n    }\n\n    return value\n  }\n\n  // 创建一个拥有getter和setter的对象\n  const value = {\n    __v_isRef: true,\n\n    get value(): Props[Name] {\n      return (props[propName] ?? defaultValue) as Props[Name]\n    },\n\n    set value(v: Props[Name]) {\n      emit(`update:${propName as string}`, v)\n    }\n  }\n\n  return value\n}\n"],"mappings":";;;;;;;;;;AA6BA,SAAgB,SAId,SAC2E;CAC3E,MAAM,EACJ,OACA,WAAW,cACX,MACA,QAAQ,MACR,cACA,UAAU,UACR;AAEJ,KAAI,OAAO;EACT,MAAM,WAAW,MAAM,aAAa;EAIpC,MAAM,UAHI,UAAU,aAAa,KAGhB,SAAS;AAG1B,cACQ,MAAM,YACX,MAAM;AACL,UAAO,QAAQ;IAElB;EAED,MAAM,iBAAiB;AACrB,UAAO,OAAO,UAAU,aAAa,OAAO,GAAG;;AAkBjD,SAAO;GAdL,WAAW;GACX,IAAI,QAAQ;AACV,WAAO,OAAO;;GAEhB,IAAI,MAAM,GAAG;AACX,QAAI,MAAM,OAAO,MACf,MAAK,UAAU,YAAsB,EAAE;AAEzC,QAAI,UAAU,CACZ,QAAO,QAAQ;;GAKT;;AAgBd,QAAO;EAXL,WAAW;EAEX,IAAI,QAAqB;AACvB,UAAQ,MAAM,aAAa;;EAG7B,IAAI,MAAM,GAAgB;AACxB,QAAK,UAAU,YAAsB,EAAE;;EAI/B"}

package/dist/use-pop/index.js

@@ -111,7 +111,9 @@ function usePop(options) {
 		removeResizeEvents();
 	});
 	return {
+		/** 更新浮框位置 */
 		update,
+		/** 浮框容器id */
 		popperContainerId
 	};
 }

package/dist/use-pop/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/use-pop/index.ts"],"sourcesContent":["import {\n  computePosition,\n  flip,\n  shift,\n  arrow,\n  offset,\n  type ComputePositionReturn,\n  type Placement\n} from '@floating-ui/dom'\nimport { getScrollParents, setStyles } from '@veltra/utils'\nimport { isRef, onBeforeUnmount, watch, type Ref, type ShallowRef } from 'vue'\n\ntype TipDirection = 'top' | 'bottom' | 'left' | 'right'\ntype TipAlign = 'center' | 'start' | 'end'\n\ninterface Options {\n  /** 触发元素 */\n  triggerRef: ShallowRef<HTMLElement | undefined>\n  /** 内容元素 */\n  contentRef: ShallowRef<HTMLElement | undefined>\n  /**\n   * 箭头元素，如果存在，则会在弹框的箭头位置显示箭头\n   */\n  arrowRef?: ShallowRef<HTMLElement | undefined>\n  /** 方向 */\n  direction?: ShallowRef<TipDirection> | TipDirection\n  /** 对齐方式 */\n  alignment?: ShallowRef<TipAlign> | TipAlign\n  /**\n   * 箭头大小\n   * @default 10\n   */\n  arrowSize?: number\n  /**\n   * 触发器元素位置变更时回调，\n   * 一般用于在触发器元素位置变更时更新弹框位置\n   */\n  onTriggerPositionChange?: () => void\n  /** 更新元素前回调 */\n  onBeforeUpdate?: (triggerEl: HTMLElement, contentEl: HTMLElement) => void\n  /** 更新元素后回调 */\n  onAfterUpdate?: (position: ComputePositionReturn) => void\n  /** 弹框弹出时回调 */\n  onPop?: (position: ComputePositionReturn) => void\n}\n\ninterface PopResult {\n  /**\n   * 更新弹框位置\n   */\n  update: () => Promise<void>\n  /** 浮框容器id */\n  popperContainerId: string\n}\n\nlet popperContainer: HTMLElement | null = null\n\nconst popperContainerId = 'pop-container'\n\n/**\n * 浮框组合式函数\n * @param options 选项\n * @returns\n */\nexport function usePop(options: Options): PopResult {\n  if (!popperContainer) {\n    popperContainer = document.createElement('div')\n    popperContainer.id = popperContainerId\n    document.body.appendChild(popperContainer)\n  }\n\n  const {\n    triggerRef,\n    contentRef,\n    arrowRef,\n    arrowSize = 10,\n    onTriggerPositionChange,\n    onAfterUpdate,\n    onBeforeUpdate,\n    direction,\n    alignment,\n    onPop\n  } = options\n\n  /** 箭头位置 */\n  const arrowPlacementDict = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }\n\n  function getMaybeRefValue<T>(value?: Ref<T> | T) {\n    return isRef(value) ? value.value : value\n  }\n\n  /**\n   * 更新浮框位置\n   * @param callbackOnPop 是否在弹出时回调\n   */\n  async function update(callbackOnPop = false) {\n    const triggerEl = triggerRef.value\n    const contentEl = contentRef.value\n\n    if (!(triggerEl instanceof HTMLElement) || !(contentEl instanceof HTMLElement)) {\n      return\n    }\n\n    onBeforeUpdate?.(triggerEl, contentEl)\n\n    // 计算位置 ↓↓↓\n    const middleware = [offset(arrowRef?.value ? arrowSize : 6), flip(), shift()]\n\n    if (arrowRef?.value) {\n      middleware.push(arrow({ element: arrowRef.value }))\n    }\n\n    const _direction = getMaybeRefValue(direction) ?? 'top'\n    const _alignment = getMaybeRefValue(alignment) ?? 'center'\n\n    const position = await computePosition(triggerEl, contentEl, {\n      middleware,\n\n      placement: `${_direction}${_alignment === 'center' ? '' : `-${_alignment}`}` as Placement\n    })\n\n    const { x, y, middlewareData, placement } = position\n\n    setStyles(contentEl, { left: `${x}px`, top: `${y}px` })\n    callbackOnPop && onPop?.(position)\n    onAfterUpdate?.(position)\n\n    // 设置箭头位置 ↓↓↓\n    if (middlewareData.arrow) {\n      const { x: arrowX, y: arrowY } = middlewareData.arrow\n\n      const arrowPlacement =\n        arrowPlacementDict[placement.split('-')[0]! as keyof typeof arrowPlacementDict]\n      const size = `${arrowSize}px`\n      // 箭头半径\n      const arrowRadius = arrowSize / 2\n\n      setStyles(arrowRef!.value!, {\n        width: size,\n        height: size,\n        left: arrowX && `${arrowX - arrowRadius}px`,\n        top: arrowY && `${arrowY - arrowRadius}px`,\n        [arrowPlacement]: `-${arrowRadius}px`\n      })\n    }\n    // 设置箭头位置 ↑↑↑\n  }\n\n  let scrollParents: HTMLElement[] = []\n\n  /** 为触发器元素的祖先元素添加滚动事件 */\n  function addScrollEvents() {\n    if (!triggerRef.value) return\n    if (onTriggerPositionChange) {\n      scrollParents = getScrollParents(triggerRef.value)\n      scrollParents.forEach((el) => {\n        el.addEventListener('scroll', onTriggerPositionChange)\n      })\n    }\n  }\n\n  /** 移除触发器元素祖先元素的滚动事件 */\n  function removeScrollEvents() {\n    if (onTriggerPositionChange) {\n      scrollParents.forEach((el) => {\n        el.removeEventListener('scroll', onTriggerPositionChange)\n      })\n    }\n\n    scrollParents = []\n  }\n\n  function addResizeEvents() {\n    onTriggerPositionChange && window.addEventListener('resize', onTriggerPositionChange)\n  }\n\n  function removeResizeEvents() {\n    onTriggerPositionChange && window.removeEventListener('resize', onTriggerPositionChange)\n  }\n\n  watch(\n    [contentRef, () => getMaybeRefValue(direction), () => getMaybeRefValue(alignment)],\n    ([content]) => {\n      if (content) {\n        update(true)\n        addScrollEvents()\n        addResizeEvents()\n        return\n      }\n      removeScrollEvents()\n      removeResizeEvents()\n    }\n  )\n\n  onBeforeUnmount(() => {\n    removeScrollEvents()\n    removeResizeEvents()\n  })\n\n  return {\n    /** 更新浮框位置 */\n    update,\n    /** 浮框容器id */\n    popperContainerId\n  }\n}\n"],"mappings":";;;;AAuDA,IAAI,kBAAsC;AAE1C,MAAM,oBAAoB;;;;;;AAO1B,SAAgB,OAAO,SAA6B;AAClD,KAAI,CAAC,iBAAiB;AACpB,oBAAkB,SAAS,cAAc,MAAM;AAC/C,kBAAgB,KAAK;AACrB,WAAS,KAAK,YAAY,gBAAgB;;CAG5C,MAAM,EACJ,YACA,YACA,UACA,YAAY,IACZ,yBACA,eACA,gBACA,WACA,WACA,UACE;;CAGJ,MAAM,qBAAqB;EAAE,KAAK;EAAU,OAAO;EAAQ,QAAQ;EAAO,MAAM;EAAS;CAEzF,SAAS,iBAAoB,OAAoB;AAC/C,SAAO,MAAM,MAAM,GAAG,MAAM,QAAQ;;;;;;CAOtC,eAAe,OAAO,gBAAgB,OAAO;EAC3C,MAAM,YAAY,WAAW;EAC7B,MAAM,YAAY,WAAW;AAE7B,MAAI,EAAE,qBAAqB,gBAAgB,EAAE,qBAAqB,aAChE;AAGF,mBAAiB,WAAW,UAAU;EAGtC,MAAM,aAAa;GAAC,OAAO,UAAU,QAAQ,YAAY,EAAE;GAAE,MAAM;GAAE,OAAO;GAAC;AAE7E,MAAI,UAAU,MACZ,YAAW,KAAK,MAAM,EAAE,SAAS,SAAS,OAAO,CAAC,CAAC;EAGrD,MAAM,aAAa,iBAAiB,UAAU,IAAI;EAClD,MAAM,aAAa,iBAAiB,UAAU,IAAI;EAElD,MAAM,WAAW,MAAM,gBAAgB,WAAW,WAAW;GAC3D;GAEA,WAAW,GAAG,aAAa,eAAe,WAAW,KAAK,IAAI;GAC/D,CAAC;EAEF,MAAM,EAAE,GAAG,GAAG,gBAAgB,cAAc;AAE5C,YAAU,WAAW;GAAE,MAAM,GAAG,EAAE;GAAK,KAAK,GAAG,EAAE;GAAK,CAAC;AACvD,mBAAiB,QAAQ,SAAS;AAClC,kBAAgB,SAAS;AAGzB,MAAI,eAAe,OAAO;GACxB,MAAM,EAAE,GAAG,QAAQ,GAAG,WAAW,eAAe;GAEhD,MAAM,iBACJ,mBAAmB,UAAU,MAAM,IAAI,CAAC;GAC1C,MAAM,OAAO,GAAG,UAAU;GAE1B,MAAM,cAAc,YAAY;AAEhC,aAAU,SAAU,OAAQ;IAC1B,OAAO;IACP,QAAQ;IACR,MAAM,UAAU,GAAG,SAAS,YAAY;IACxC,KAAK,UAAU,GAAG,SAAS,YAAY;KACtC,iBAAiB,IAAI,YAAY;IACnC,CAAC;;;CAKN,IAAI,gBAA+B,EAAE;;CAGrC,SAAS,kBAAkB;AACzB,MAAI,CAAC,WAAW,MAAO;AACvB,MAAI,yBAAyB;AAC3B,mBAAgB,iBAAiB,WAAW,MAAM;AAClD,iBAAc,SAAS,OAAO;AAC5B,OAAG,iBAAiB,UAAU,wBAAwB;KACtD;;;;CAKN,SAAS,qBAAqB;AAC5B,MAAI,wBACF,eAAc,SAAS,OAAO;AAC5B,MAAG,oBAAoB,UAAU,wBAAwB;IACzD;AAGJ,kBAAgB,EAAE;;CAGpB,SAAS,kBAAkB;AACzB,6BAA2B,OAAO,iBAAiB,UAAU,wBAAwB;;CAGvF,SAAS,qBAAqB;AAC5B,6BAA2B,OAAO,oBAAoB,UAAU,wBAAwB;;AAG1F,OACE;EAAC;QAAkB,iBAAiB,UAAU;QAAQ,iBAAiB,UAAU;EAAC,GACjF,CAAC,aAAa;AACb,MAAI,SAAS;AACX,UAAO,KAAK;AACZ,oBAAiB;AACjB,oBAAiB;AACjB;;AAEF,sBAAoB;AACpB,sBAAoB;GAEvB;AAED,uBAAsB;AACpB,sBAAoB;AACpB,sBAAoB;GACpB;AAEF,QAAO;EAEL;EAEA;EACD"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/use-pop/index.ts"],"sourcesContent":["import {\n  computePosition,\n  flip,\n  shift,\n  arrow,\n  offset,\n  type ComputePositionReturn,\n  type Placement\n} from '@floating-ui/dom'\nimport { getScrollParents, setStyles } from '@veltra/utils'\nimport { isRef, onBeforeUnmount, watch, type Ref, type ShallowRef } from 'vue'\n\ntype TipDirection = 'top' | 'bottom' | 'left' | 'right'\ntype TipAlign = 'center' | 'start' | 'end'\n\ninterface Options {\n  /** 触发元素 */\n  triggerRef: ShallowRef<HTMLElement | undefined>\n  /** 内容元素 */\n  contentRef: ShallowRef<HTMLElement | undefined>\n  /**\n   * 箭头元素，如果存在，则会在弹框的箭头位置显示箭头\n   */\n  arrowRef?: ShallowRef<HTMLElement | undefined>\n  /** 方向 */\n  direction?: ShallowRef<TipDirection> | TipDirection\n  /** 对齐方式 */\n  alignment?: ShallowRef<TipAlign> | TipAlign\n  /**\n   * 箭头大小\n   * @default 10\n   */\n  arrowSize?: number\n  /**\n   * 触发器元素位置变更时回调，\n   * 一般用于在触发器元素位置变更时更新弹框位置\n   */\n  onTriggerPositionChange?: () => void\n  /** 更新元素前回调 */\n  onBeforeUpdate?: (triggerEl: HTMLElement, contentEl: HTMLElement) => void\n  /** 更新元素后回调 */\n  onAfterUpdate?: (position: ComputePositionReturn) => void\n  /** 弹框弹出时回调 */\n  onPop?: (position: ComputePositionReturn) => void\n}\n\ninterface PopResult {\n  /**\n   * 更新弹框位置\n   */\n  update: () => Promise<void>\n  /** 浮框容器id */\n  popperContainerId: string\n}\n\nlet popperContainer: HTMLElement | null = null\n\nconst popperContainerId = 'pop-container'\n\n/**\n * 浮框组合式函数\n * @param options 选项\n * @returns\n */\nexport function usePop(options: Options): PopResult {\n  if (!popperContainer) {\n    popperContainer = document.createElement('div')\n    popperContainer.id = popperContainerId\n    document.body.appendChild(popperContainer)\n  }\n\n  const {\n    triggerRef,\n    contentRef,\n    arrowRef,\n    arrowSize = 10,\n    onTriggerPositionChange,\n    onAfterUpdate,\n    onBeforeUpdate,\n    direction,\n    alignment,\n    onPop\n  } = options\n\n  /** 箭头位置 */\n  const arrowPlacementDict = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }\n\n  function getMaybeRefValue<T>(value?: Ref<T> | T) {\n    return isRef(value) ? value.value : value\n  }\n\n  /**\n   * 更新浮框位置\n   * @param callbackOnPop 是否在弹出时回调\n   */\n  async function update(callbackOnPop = false) {\n    const triggerEl = triggerRef.value\n    const contentEl = contentRef.value\n\n    if (!(triggerEl instanceof HTMLElement) || !(contentEl instanceof HTMLElement)) {\n      return\n    }\n\n    onBeforeUpdate?.(triggerEl, contentEl)\n\n    // 计算位置 ↓↓↓\n    const middleware = [offset(arrowRef?.value ? arrowSize : 6), flip(), shift()]\n\n    if (arrowRef?.value) {\n      middleware.push(arrow({ element: arrowRef.value }))\n    }\n\n    const _direction = getMaybeRefValue(direction) ?? 'top'\n    const _alignment = getMaybeRefValue(alignment) ?? 'center'\n\n    const position = await computePosition(triggerEl, contentEl, {\n      middleware,\n\n      placement: `${_direction}${_alignment === 'center' ? '' : `-${_alignment}`}` as Placement\n    })\n\n    const { x, y, middlewareData, placement } = position\n\n    setStyles(contentEl, { left: `${x}px`, top: `${y}px` })\n    callbackOnPop && onPop?.(position)\n    onAfterUpdate?.(position)\n\n    // 设置箭头位置 ↓↓↓\n    if (middlewareData.arrow) {\n      const { x: arrowX, y: arrowY } = middlewareData.arrow\n\n      const arrowPlacement =\n        arrowPlacementDict[placement.split('-')[0]! as keyof typeof arrowPlacementDict]\n      const size = `${arrowSize}px`\n      // 箭头半径\n      const arrowRadius = arrowSize / 2\n\n      setStyles(arrowRef!.value!, {\n        width: size,\n        height: size,\n        left: arrowX && `${arrowX - arrowRadius}px`,\n        top: arrowY && `${arrowY - arrowRadius}px`,\n        [arrowPlacement]: `-${arrowRadius}px`\n      })\n    }\n    // 设置箭头位置 ↑↑↑\n  }\n\n  let scrollParents: HTMLElement[] = []\n\n  /** 为触发器元素的祖先元素添加滚动事件 */\n  function addScrollEvents() {\n    if (!triggerRef.value) return\n    if (onTriggerPositionChange) {\n      scrollParents = getScrollParents(triggerRef.value)\n      scrollParents.forEach((el) => {\n        el.addEventListener('scroll', onTriggerPositionChange)\n      })\n    }\n  }\n\n  /** 移除触发器元素祖先元素的滚动事件 */\n  function removeScrollEvents() {\n    if (onTriggerPositionChange) {\n      scrollParents.forEach((el) => {\n        el.removeEventListener('scroll', onTriggerPositionChange)\n      })\n    }\n\n    scrollParents = []\n  }\n\n  function addResizeEvents() {\n    onTriggerPositionChange && window.addEventListener('resize', onTriggerPositionChange)\n  }\n\n  function removeResizeEvents() {\n    onTriggerPositionChange && window.removeEventListener('resize', onTriggerPositionChange)\n  }\n\n  watch(\n    [contentRef, () => getMaybeRefValue(direction), () => getMaybeRefValue(alignment)],\n    ([content]) => {\n      if (content) {\n        update(true)\n        addScrollEvents()\n        addResizeEvents()\n        return\n      }\n      removeScrollEvents()\n      removeResizeEvents()\n    }\n  )\n\n  onBeforeUnmount(() => {\n    removeScrollEvents()\n    removeResizeEvents()\n  })\n\n  return {\n    /** 更新浮框位置 */\n    update,\n    /** 浮框容器id */\n    popperContainerId\n  }\n}\n"],"mappings":";;;;AAuDA,IAAI,kBAAsC;AAE1C,MAAM,oBAAoB;;;;;;AAO1B,SAAgB,OAAO,SAA6B;AAClD,KAAI,CAAC,iBAAiB;AACpB,oBAAkB,SAAS,cAAc,MAAM;AAC/C,kBAAgB,KAAK;AACrB,WAAS,KAAK,YAAY,gBAAgB;;CAG5C,MAAM,EACJ,YACA,YACA,UACA,YAAY,IACZ,yBACA,eACA,gBACA,WACA,WACA,UACE;;CAGJ,MAAM,qBAAqB;EAAE,KAAK;EAAU,OAAO;EAAQ,QAAQ;EAAO,MAAM;EAAS;CAEzF,SAAS,iBAAoB,OAAoB;AAC/C,SAAO,MAAM,MAAM,GAAG,MAAM,QAAQ;;;;;;CAOtC,eAAe,OAAO,gBAAgB,OAAO;EAC3C,MAAM,YAAY,WAAW;EAC7B,MAAM,YAAY,WAAW;AAE7B,MAAI,EAAE,qBAAqB,gBAAgB,EAAE,qBAAqB,aAChE;AAGF,mBAAiB,WAAW,UAAU;EAGtC,MAAM,aAAa;GAAC,OAAO,UAAU,QAAQ,YAAY,EAAE;GAAE,MAAM;GAAE,OAAO;GAAC;AAE7E,MAAI,UAAU,MACZ,YAAW,KAAK,MAAM,EAAE,SAAS,SAAS,OAAO,CAAC,CAAC;EAGrD,MAAM,aAAa,iBAAiB,UAAU,IAAI;EAClD,MAAM,aAAa,iBAAiB,UAAU,IAAI;EAElD,MAAM,WAAW,MAAM,gBAAgB,WAAW,WAAW;GAC3D;GAEA,WAAW,GAAG,aAAa,eAAe,WAAW,KAAK,IAAI;GAC/D,CAAC;EAEF,MAAM,EAAE,GAAG,GAAG,gBAAgB,cAAc;AAE5C,YAAU,WAAW;GAAE,MAAM,GAAG,EAAE;GAAK,KAAK,GAAG,EAAE;GAAK,CAAC;AACvD,mBAAiB,QAAQ,SAAS;AAClC,kBAAgB,SAAS;AAGzB,MAAI,eAAe,OAAO;GACxB,MAAM,EAAE,GAAG,QAAQ,GAAG,WAAW,eAAe;GAEhD,MAAM,iBACJ,mBAAmB,UAAU,MAAM,IAAI,CAAC;GAC1C,MAAM,OAAO,GAAG,UAAU;GAE1B,MAAM,cAAc,YAAY;AAEhC,aAAU,SAAU,OAAQ;IAC1B,OAAO;IACP,QAAQ;IACR,MAAM,UAAU,GAAG,SAAS,YAAY;IACxC,KAAK,UAAU,GAAG,SAAS,YAAY;KACtC,iBAAiB,IAAI,YAAY;IACnC,CAAC;;;CAKN,IAAI,gBAA+B,EAAE;;CAGrC,SAAS,kBAAkB;AACzB,MAAI,CAAC,WAAW,MAAO;AACvB,MAAI,yBAAyB;AAC3B,mBAAgB,iBAAiB,WAAW,MAAM;AAClD,iBAAc,SAAS,OAAO;AAC5B,OAAG,iBAAiB,UAAU,wBAAwB;KACtD;;;;CAKN,SAAS,qBAAqB;AAC5B,MAAI,wBACF,eAAc,SAAS,OAAO;AAC5B,MAAG,oBAAoB,UAAU,wBAAwB;IACzD;AAGJ,kBAAgB,EAAE;;CAGpB,SAAS,kBAAkB;AACzB,6BAA2B,OAAO,iBAAiB,UAAU,wBAAwB;;CAGvF,SAAS,qBAAqB;AAC5B,6BAA2B,OAAO,oBAAoB,UAAU,wBAAwB;;AAG1F,OACE;EAAC;QAAkB,iBAAiB,UAAU;QAAQ,iBAAiB,UAAU;EAAC,GACjF,CAAC,aAAa;AACb,MAAI,SAAS;AACX,UAAO,KAAK;AACZ,oBAAiB;AACjB,oBAAiB;AACjB;;AAEF,sBAAoB;AACpB,sBAAoB;GAEvB;AAED,uBAAsB;AACpB,sBAAoB;AACpB,sBAAoB;GACpB;AAEF,QAAO;;EAEL;;EAEA;EACD"}

package/dist/use-resize-observer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/use-resize-observer/index.ts"],"sourcesContent":["import { type Ref, type ShallowRef, onBeforeUnmount, watch } from 'vue'\n\nexport type RefElement =\n  | ShallowRef<HTMLElement | undefined | null>\n  | Ref<HTMLElement | undefined | null>\n\ninterface ResizeObserverOptions {\n  /** 目标节点 */\n  targets: RefElement | RefElement[]\n  /** resize事件 */\n  onResize: ResizeObserverCallback\n  /** 指定观察条件 */\n  when?: () => boolean\n}\n\n/** 监听器 */\nexport type ResizeObserverReturn = {\n  /** 终止监听 */\n  disconnect: () => void\n}\n\n/**\n * 取消监听\n * @param targets 目标节点\n * @param observer 观察器\n */\nfunction unobserve(targets: RefElement | RefElement[], observer?: ResizeObserver) {\n  if (Array.isArray(targets)) {\n    return targets.forEach((target) => unobserve(target, observer))\n  }\n  if (!targets.value || !observer) return\n  observer.unobserve(targets.value)\n  observer.disconnect()\n}\n\n/**\n * 监听目标尺寸变化\n * @param options 选项\n */\nexport function useResizeObserver(options: ResizeObserverOptions): ResizeObserverReturn {\n  const { targets, onResize } = options\n\n  let observer: ResizeObserver | undefined\n\n  if (Array.isArray(targets)) {\n    watch(\n      targets,\n      (val, oldVal) => {\n        // 清除旧的观察\n        oldVal.forEach((target) => {\n          target && observer?.unobserve(target)\n        })\n\n        if (!observer && !!val.length) {\n          observer = new ResizeObserver(onResize)\n        }\n\n        val.forEach((target) => {\n          target && observer?.observe(target)\n        })\n      },\n      { immediate: true }\n    )\n  } else {\n    watch(\n      targets,\n      (val, oldVal) => {\n        oldVal && observer?.unobserve(oldVal)\n        if (!observer && val) {\n          observer = new ResizeObserver(onResize)\n        }\n        val && observer?.observe(val)\n      },\n      { immediate: true }\n    )\n  }\n\n  onBeforeUnmount(() => {\n    unobserve(targets, observer)\n    observer = undefined\n  })\n\n  return {\n    disconnect() {\n      unobserve(targets, observer)\n      observer = undefined\n    }\n  }\n}\n\n/**\n * 监听元素尺寸变化\n */\nexport function useObserverCallback(): {\n  observeEl: <El extends HTMLElement>(\n    el: El,\n    cb: (entry: Omit<ResizeObserverEntry, 'target'> & { target: El }) => void\n  ) => void\n  unobserveEl: (el: HTMLElement) => void\n} {\n  const observerElMap = new Map<HTMLElement, Function>()\n\n  const observer = new ResizeObserver((entries) => {\n    entries.forEach((entry) => {\n      const target = entry.target as HTMLElement\n      if (!target.dataset.ob) {\n        target.dataset.ob = 'true'\n        return\n      }\n      const fn = observerElMap.get(target)\n\n      fn?.(entry)\n    })\n  })\n\n  /**\n   * 监听元素尺寸\n   * @param el 元素\n   * @param cb 回调\n   */\n  function observeEl<El extends HTMLElement>(\n    el: El,\n    cb: (entry: Omit<ResizeObserverEntry, 'target'> & { target: El }) => void\n  ) {\n    observer.observe(el)\n    observerElMap.set(el, cb)\n  }\n\n  /**\n   * 取消监听元素尺寸\n   * @param el 元素\n   */\n  function unobserveEl(el: HTMLElement) {\n    observer.unobserve(el)\n    delete el.dataset.ob\n    observerElMap.delete(el)\n  }\n\n  onBeforeUnmount(() => {\n    observerElMap.forEach((_, el) => {\n      observer.unobserve(el)\n    })\n    observerElMap.clear()\n    observer.disconnect()\n  })\n\n  return { observeEl, unobserveEl }\n}\n"],"mappings":";;;;;;;AA0BA,SAAS,UAAU,SAAoC,UAA2B;AAChF,KAAI,MAAM,QAAQ,QAAQ,CACxB,QAAO,QAAQ,SAAS,WAAW,UAAU,QAAQ,SAAS,CAAC;AAEjE,KAAI,CAAC,QAAQ,SAAS,CAAC,SAAU;AACjC,UAAS,UAAU,QAAQ,MAAM;AACjC,UAAS,YAAY;;;;;;AAOvB,SAAgB,kBAAkB,SAAsD;CACtF,MAAM,EAAE,SAAS,aAAa;CAE9B,IAAI;AAEJ,KAAI,MAAM,QAAQ,QAAQ,CACxB,OACE,UACC,KAAK,WAAW;AAEf,SAAO,SAAS,WAAW;AACzB,aAAU,UAAU,UAAU,OAAO;IACrC;AAEF,MAAI,CAAC,YAAY,CAAC,CAAC,IAAI,OACrB,YAAW,IAAI,eAAe,SAAS;AAGzC,MAAI,SAAS,WAAW;AACtB,aAAU,UAAU,QAAQ,OAAO;IACnC;IAEJ,EAAE,WAAW,MAAM,CACpB;KAED,OACE,UACC,KAAK,WAAW;AACf,YAAU,UAAU,UAAU,OAAO;AACrC,MAAI,CAAC,YAAY,IACf,YAAW,IAAI,eAAe,SAAS;AAEzC,SAAO,UAAU,QAAQ,IAAI;IAE/B,EAAE,WAAW,MAAM,CACpB;AAGH,uBAAsB;AACpB,YAAU,SAAS,SAAS;AAC5B,aAAW,KAAA;GACX;AAEF,QAAO,EACL,aAAa;AACX,YAAU,SAAS,SAAS;AAC5B,aAAW,KAAA;IAEd;;;;;AAMH,SAAgB,sBAMd;CACA,MAAM,gCAAgB,IAAI,KAA4B;CAEtD,MAAM,WAAW,IAAI,gBAAgB,YAAY;AAC/C,UAAQ,SAAS,UAAU;GACzB,MAAM,SAAS,MAAM;AACrB,OAAI,CAAC,OAAO,QAAQ,IAAI;AACtB,WAAO,QAAQ,KAAK;AACpB;;AAES,iBAAc,IAAI,OAAO,GAE/B,MAAM;IACX;GACF;;;;;;CAOF,SAAS,UACP,IACA,IACA;AACA,WAAS,QAAQ,GAAG;AACpB,gBAAc,IAAI,IAAI,GAAG;;;;;;CAO3B,SAAS,YAAY,IAAiB;AACpC,WAAS,UAAU,GAAG;AACtB,SAAO,GAAG,QAAQ;AAClB,gBAAc,OAAO,GAAG;;AAG1B,uBAAsB;AACpB,gBAAc,SAAS,GAAG,OAAO;AAC/B,YAAS,UAAU,GAAG;IACtB;AACF,gBAAc,OAAO;AACrB,WAAS,YAAY;GACrB;AAEF,QAAO;EAAE;EAAW;EAAa"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/use-resize-observer/index.ts"],"sourcesContent":["import { type Ref, type ShallowRef, onBeforeUnmount, watch } from 'vue'\n\nexport type RefElement =\n  | ShallowRef<HTMLElement | undefined | null>\n  | Ref<HTMLElement | undefined | null>\n\ninterface ResizeObserverOptions {\n  /** 目标节点 */\n  targets: RefElement | RefElement[]\n  /** resize事件 */\n  onResize: ResizeObserverCallback\n  /** 指定观察条件 */\n  when?: () => boolean\n}\n\n/** 监听器 */\nexport type ResizeObserverReturn = {\n  /** 终止监听 */\n  disconnect: () => void\n}\n\n/**\n * 取消监听\n * @param targets 目标节点\n * @param observer 观察器\n */\nfunction unobserve(targets: RefElement | RefElement[], observer?: ResizeObserver) {\n  if (Array.isArray(targets)) {\n    return targets.forEach((target) => unobserve(target, observer))\n  }\n  if (!targets.value || !observer) return\n  observer.unobserve(targets.value)\n  observer.disconnect()\n}\n\n/**\n * 监听目标尺寸变化\n * @param options 选项\n */\nexport function useResizeObserver(options: ResizeObserverOptions): ResizeObserverReturn {\n  const { targets, onResize } = options\n\n  let observer: ResizeObserver | undefined\n\n  if (Array.isArray(targets)) {\n    watch(\n      targets,\n      (val, oldVal) => {\n        // 清除旧的观察\n        oldVal.forEach((target) => {\n          target && observer?.unobserve(target)\n        })\n\n        if (!observer && !!val.length) {\n          observer = new ResizeObserver(onResize)\n        }\n\n        val.forEach((target) => {\n          target && observer?.observe(target)\n        })\n      },\n      { immediate: true }\n    )\n  } else {\n    watch(\n      targets,\n      (val, oldVal) => {\n        oldVal && observer?.unobserve(oldVal)\n        if (!observer && val) {\n          observer = new ResizeObserver(onResize)\n        }\n        val && observer?.observe(val)\n      },\n      { immediate: true }\n    )\n  }\n\n  onBeforeUnmount(() => {\n    unobserve(targets, observer)\n    observer = undefined\n  })\n\n  return {\n    disconnect() {\n      unobserve(targets, observer)\n      observer = undefined\n    }\n  }\n}\n\n/**\n * 监听元素尺寸变化\n */\nexport function useObserverCallback(): {\n  observeEl: <El extends HTMLElement>(\n    el: El,\n    cb: (entry: Omit<ResizeObserverEntry, 'target'> & { target: El }) => void\n  ) => void\n  unobserveEl: (el: HTMLElement) => void\n} {\n  const observerElMap = new Map<HTMLElement, Function>()\n\n  const observer = new ResizeObserver((entries) => {\n    entries.forEach((entry) => {\n      const target = entry.target as HTMLElement\n      if (!target.dataset.ob) {\n        target.dataset.ob = 'true'\n        return\n      }\n      const fn = observerElMap.get(target)\n\n      fn?.(entry)\n    })\n  })\n\n  /**\n   * 监听元素尺寸\n   * @param el 元素\n   * @param cb 回调\n   */\n  function observeEl<El extends HTMLElement>(\n    el: El,\n    cb: (entry: Omit<ResizeObserverEntry, 'target'> & { target: El }) => void\n  ) {\n    observer.observe(el)\n    observerElMap.set(el, cb)\n  }\n\n  /**\n   * 取消监听元素尺寸\n   * @param el 元素\n   */\n  function unobserveEl(el: HTMLElement) {\n    observer.unobserve(el)\n    delete el.dataset.ob\n    observerElMap.delete(el)\n  }\n\n  onBeforeUnmount(() => {\n    observerElMap.forEach((_, el) => {\n      observer.unobserve(el)\n    })\n    observerElMap.clear()\n    observer.disconnect()\n  })\n\n  return { observeEl, unobserveEl }\n}\n"],"mappings":";;;;;;;AA0BA,SAAS,UAAU,SAAoC,UAA2B;AAChF,KAAI,MAAM,QAAQ,QAAQ,CACxB,QAAO,QAAQ,SAAS,WAAW,UAAU,QAAQ,SAAS,CAAC;AAEjE,KAAI,CAAC,QAAQ,SAAS,CAAC,SAAU;AACjC,UAAS,UAAU,QAAQ,MAAM;AACjC,UAAS,YAAY;;;;;;AAOvB,SAAgB,kBAAkB,SAAsD;CACtF,MAAM,EAAE,SAAS,aAAa;CAE9B,IAAI;AAEJ,KAAI,MAAM,QAAQ,QAAQ,CACxB,OACE,UACC,KAAK,WAAW;AAEf,SAAO,SAAS,WAAW;AACzB,aAAU,UAAU,UAAU,OAAO;IACrC;AAEF,MAAI,CAAC,YAAY,CAAC,CAAC,IAAI,OACrB,YAAW,IAAI,eAAe,SAAS;AAGzC,MAAI,SAAS,WAAW;AACtB,aAAU,UAAU,QAAQ,OAAO;IACnC;IAEJ,EAAE,WAAW,MAAM,CACpB;KAED,OACE,UACC,KAAK,WAAW;AACf,YAAU,UAAU,UAAU,OAAO;AACrC,MAAI,CAAC,YAAY,IACf,YAAW,IAAI,eAAe,SAAS;AAEzC,SAAO,UAAU,QAAQ,IAAI;IAE/B,EAAE,WAAW,MAAM,CACpB;AAGH,uBAAsB;AACpB,YAAU,SAAS,SAAS;AAC5B,aAAW,KAAA;GACX;AAEF,QAAO,EACL,aAAa;AACX,YAAU,SAAS,SAAS;AAC5B,aAAW,KAAA;IAEd;;;;;AAMH,SAAgB,sBAMd;CACA,MAAM,gCAAgB,IAAI,KAA4B;CAEtD,MAAM,WAAW,IAAI,gBAAgB,YAAY;AAC/C,UAAQ,SAAS,UAAU;GACzB,MAAM,SAAS,MAAM;AACrB,OAAI,CAAC,OAAO,QAAQ,IAAI;AACtB,WAAO,QAAQ,KAAK;AACpB;;AAES,iBAAc,IAAI,OAE3B,GAAG,MAAM;IACX;GACF;;;;;;CAOF,SAAS,UACP,IACA,IACA;AACA,WAAS,QAAQ,GAAG;AACpB,gBAAc,IAAI,IAAI,GAAG;;;;;;CAO3B,SAAS,YAAY,IAAiB;AACpC,WAAS,UAAU,GAAG;AACtB,SAAO,GAAG,QAAQ;AAClB,gBAAc,OAAO,GAAG;;AAG1B,uBAAsB;AACpB,gBAAc,SAAS,GAAG,OAAO;AAC/B,YAAS,UAAU,GAAG;IACtB;AACF,gBAAc,OAAO;AACrB,WAAS,YAAY;GACrB;AAEF,QAAO;EAAE;EAAW;EAAa"}

package/dist/use-transition/use-css-transition.js

@@ -18,11 +18,17 @@ function useCssTransition(options) {
 	const classes = computed(() => {
 		const _name = typeof name === "string" ? name : name.value;
 		return {
+			/** 进入前的类 */
 			enterFrom: `${_name}-enter-from`,
+			/** 进入后最终的类 */
 			enterTo: `${_name}-enter-to`,
+			/** 【进入动画】持续时的类 */
 			enterActive: `${_name}-enter-active`,
+			/** 离开前的类 */
 			leaveFrom: `${_name}-leave-from`,
+			/** 离开类 */
 			leaveTo: `${_name}-leave-to`,
+			/** 【离开动画】持续时的类 */
 			leaveActive: `${_name}-leave-active`
 		};
 	});

package/dist/use-transition/use-css-transition.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-css-transition.js","names":[],"sources":["../../src/use-transition/use-css-transition.ts"],"sourcesContent":["import { createToggle } from '@veltra/utils'\nimport { isRef, watch, onBeforeUnmount, computed } from 'vue'\n\nimport type { Returned, CssTransitionOptions } from './type'\n\nconst increaseTransitionCount = (el: HTMLElement & { _count?: number }) => {\n  el._count = (el._count ?? 0) + 1\n}\n\nconst decreaseTransitionCount = (el: HTMLElement & { _count?: number }) => {\n  el._count = (el._count ?? 0) - 1\n  if (el._count <= 0) {\n    delete el._count\n  }\n}\n\n/**\n * 使用css过渡\n * @param options 过渡选项\n */\nexport function useCssTransition(options: CssTransitionOptions): Returned {\n  const {\n    name,\n    target,\n    afterEnter,\n    afterLeave,\n    enterCanceled,\n    leaveCanceled,\n    keepEnterTo = false\n  } = options\n\n  const getDom = (): (HTMLElement & { _count?: number }) | undefined =>\n    isRef(target) ? target.value : target\n\n  const classes = computed(() => {\n    const _name = typeof name === 'string' ? name : name.value\n    return {\n      /** 进入前的类 */\n      enterFrom: `${_name}-enter-from`,\n      /** 进入后最终的类 */\n      enterTo: `${_name}-enter-to`,\n      /** 【进入动画】持续时的类 */\n      enterActive: `${_name}-enter-active`,\n      /** 离开前的类 */\n      leaveFrom: `${_name}-leave-from`,\n      /** 离开类 */\n      leaveTo: `${_name}-leave-to`,\n      /** 【离开动画】持续时的类 */\n      leaveActive: `${_name}-leave-active`\n    }\n  })\n\n  /** 开始进入动画 */\n  const startTransitionIn = () => {\n    const { enterActive, enterTo, enterFrom } = classes.value\n    const dom = getDom()\n\n    dom?.classList.add(enterFrom)\n\n    requestAnimationFrame(() => {\n      dom?.classList.add(enterActive)\n      requestAnimationFrame(() => {\n        dom?.classList.remove(enterFrom)\n        dom?.classList.add(enterTo)\n      })\n    })\n  }\n\n  /** 开始离开动画 */\n  const startTransitionOut = () => {\n    const { leaveTo, leaveActive, leaveFrom, enterTo } = classes.value\n    const dom = getDom()\n\n    // 标记动画进入离开状态\n    if (keepEnterTo) {\n      dom?.classList.remove(enterTo)\n    }\n    dom?.classList.add(leaveFrom, leaveActive)\n\n    requestAnimationFrame(() => {\n      dom?.classList.add(leaveActive)\n      requestAnimationFrame(() => {\n        dom?.classList.remove(leaveFrom)\n        dom?.classList.add(leaveTo)\n      })\n    })\n  }\n\n  const [active, toggle] = createToggle(false, (_active) => {\n    _active ? startTransitionIn() : startTransitionOut()\n  })\n\n  const transitionEndHandler = (e: TransitionEvent) => {\n    e.stopPropagation()\n\n    const { leaveActive, enterActive, enterTo, leaveTo } = classes.value\n    const dom = getDom()\n\n    if (dom !== e.target) return\n\n    decreaseTransitionCount(dom)\n\n    if (dom._count) return\n\n    // 激活状态，移除enter-active类\n    if (active.value) {\n      if (keepEnterTo) {\n        dom?.classList.remove(enterActive)\n      } else {\n        dom?.classList.remove(enterActive, enterTo)\n      }\n      afterEnter?.()\n    } else {\n      dom?.classList.remove(leaveActive, leaveTo)\n      afterLeave?.()\n    }\n  }\n\n  const transitionRunHandler = (e: TransitionEvent) => {\n    e.stopPropagation()\n    const dom = getDom()\n    if (dom !== e.target) return\n    increaseTransitionCount(dom)\n  }\n\n  const transitionCancelHandler = (e: TransitionEvent) => {\n    e.stopPropagation()\n    const dom = getDom()\n\n    if (dom !== e.target) return\n    decreaseTransitionCount(dom)\n\n    if (dom._count) return\n\n    const { leaveActive, enterActive } = classes.value\n\n    // 激活状态，移除enter-active类\n    if (active.value) {\n      dom?.classList.remove(enterActive)\n      enterCanceled?.()\n    } else {\n      dom?.classList.remove(leaveActive)\n      leaveCanceled?.()\n    }\n  }\n\n  /** 添加事件 */\n  const addEvent = (el?: HTMLElement) => {\n    el?.addEventListener('transitioncancel', transitionCancelHandler)\n    el?.addEventListener('transitionend', transitionEndHandler)\n    el?.addEventListener('transitionrun', transitionRunHandler)\n  }\n\n  /** 移除事件 */\n  const removeEvent = (el?: HTMLElement) => {\n    el?.removeEventListener('transitioncancel', transitionCancelHandler)\n    el?.removeEventListener('transitionend', transitionEndHandler)\n    el?.removeEventListener('transitionrun', transitionRunHandler)\n  }\n\n  if (isRef(target)) {\n    watch(target, (_target, oldTarget) => {\n      if (oldTarget) {\n        removeEvent(oldTarget)\n      }\n      _target && addEvent(_target)\n    })\n  } else if (target) {\n    addEvent(target)\n  }\n\n  onBeforeUnmount(() => {\n    const dom = getDom()\n    removeEvent(dom)\n  })\n\n  return {\n    toggle,\n    enter() {\n      toggle(true)\n    },\n    leave() {\n      toggle(false)\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-css-transition.js","names":[],"sources":["../../src/use-transition/use-css-transition.ts"],"sourcesContent":["import { createToggle } from '@veltra/utils'\nimport { isRef, watch, onBeforeUnmount, computed } from 'vue'\n\nimport type { Returned, CssTransitionOptions } from './type'\n\nconst increaseTransitionCount = (el: HTMLElement & { _count?: number }) => {\n  el._count = (el._count ?? 0) + 1\n}\n\nconst decreaseTransitionCount = (el: HTMLElement & { _count?: number }) => {\n  el._count = (el._count ?? 0) - 1\n  if (el._count <= 0) {\n    delete el._count\n  }\n}\n\n/**\n * 使用css过渡\n * @param options 过渡选项\n */\nexport function useCssTransition(options: CssTransitionOptions): Returned {\n  const {\n    name,\n    target,\n    afterEnter,\n    afterLeave,\n    enterCanceled,\n    leaveCanceled,\n    keepEnterTo = false\n  } = options\n\n  const getDom = (): (HTMLElement & { _count?: number }) | undefined =>\n    isRef(target) ? target.value : target\n\n  const classes = computed(() => {\n    const _name = typeof name === 'string' ? name : name.value\n    return {\n      /** 进入前的类 */\n      enterFrom: `${_name}-enter-from`,\n      /** 进入后最终的类 */\n      enterTo: `${_name}-enter-to`,\n      /** 【进入动画】持续时的类 */\n      enterActive: `${_name}-enter-active`,\n      /** 离开前的类 */\n      leaveFrom: `${_name}-leave-from`,\n      /** 离开类 */\n      leaveTo: `${_name}-leave-to`,\n      /** 【离开动画】持续时的类 */\n      leaveActive: `${_name}-leave-active`\n    }\n  })\n\n  /** 开始进入动画 */\n  const startTransitionIn = () => {\n    const { enterActive, enterTo, enterFrom } = classes.value\n    const dom = getDom()\n\n    dom?.classList.add(enterFrom)\n\n    requestAnimationFrame(() => {\n      dom?.classList.add(enterActive)\n      requestAnimationFrame(() => {\n        dom?.classList.remove(enterFrom)\n        dom?.classList.add(enterTo)\n      })\n    })\n  }\n\n  /** 开始离开动画 */\n  const startTransitionOut = () => {\n    const { leaveTo, leaveActive, leaveFrom, enterTo } = classes.value\n    const dom = getDom()\n\n    // 标记动画进入离开状态\n    if (keepEnterTo) {\n      dom?.classList.remove(enterTo)\n    }\n    dom?.classList.add(leaveFrom, leaveActive)\n\n    requestAnimationFrame(() => {\n      dom?.classList.add(leaveActive)\n      requestAnimationFrame(() => {\n        dom?.classList.remove(leaveFrom)\n        dom?.classList.add(leaveTo)\n      })\n    })\n  }\n\n  const [active, toggle] = createToggle(false, (_active) => {\n    _active ? startTransitionIn() : startTransitionOut()\n  })\n\n  const transitionEndHandler = (e: TransitionEvent) => {\n    e.stopPropagation()\n\n    const { leaveActive, enterActive, enterTo, leaveTo } = classes.value\n    const dom = getDom()\n\n    if (dom !== e.target) return\n\n    decreaseTransitionCount(dom)\n\n    if (dom._count) return\n\n    // 激活状态，移除enter-active类\n    if (active.value) {\n      if (keepEnterTo) {\n        dom?.classList.remove(enterActive)\n      } else {\n        dom?.classList.remove(enterActive, enterTo)\n      }\n      afterEnter?.()\n    } else {\n      dom?.classList.remove(leaveActive, leaveTo)\n      afterLeave?.()\n    }\n  }\n\n  const transitionRunHandler = (e: TransitionEvent) => {\n    e.stopPropagation()\n    const dom = getDom()\n    if (dom !== e.target) return\n    increaseTransitionCount(dom)\n  }\n\n  const transitionCancelHandler = (e: TransitionEvent) => {\n    e.stopPropagation()\n    const dom = getDom()\n\n    if (dom !== e.target) return\n    decreaseTransitionCount(dom)\n\n    if (dom._count) return\n\n    const { leaveActive, enterActive } = classes.value\n\n    // 激活状态，移除enter-active类\n    if (active.value) {\n      dom?.classList.remove(enterActive)\n      enterCanceled?.()\n    } else {\n      dom?.classList.remove(leaveActive)\n      leaveCanceled?.()\n    }\n  }\n\n  /** 添加事件 */\n  const addEvent = (el?: HTMLElement) => {\n    el?.addEventListener('transitioncancel', transitionCancelHandler)\n    el?.addEventListener('transitionend', transitionEndHandler)\n    el?.addEventListener('transitionrun', transitionRunHandler)\n  }\n\n  /** 移除事件 */\n  const removeEvent = (el?: HTMLElement) => {\n    el?.removeEventListener('transitioncancel', transitionCancelHandler)\n    el?.removeEventListener('transitionend', transitionEndHandler)\n    el?.removeEventListener('transitionrun', transitionRunHandler)\n  }\n\n  if (isRef(target)) {\n    watch(target, (_target, oldTarget) => {\n      if (oldTarget) {\n        removeEvent(oldTarget)\n      }\n      _target && addEvent(_target)\n    })\n  } else if (target) {\n    addEvent(target)\n  }\n\n  onBeforeUnmount(() => {\n    const dom = getDom()\n    removeEvent(dom)\n  })\n\n  return {\n    toggle,\n    enter() {\n      toggle(true)\n    },\n    leave() {\n      toggle(false)\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/use-user-action/index.d.ts

@@ -0,0 +1,32 @@
+//#region src/use-user-action/index.d.ts
+type UserAction = <T extends (...args: any[]) => void | Promise<void>>(fn: T) => (...args: Parameters<T>) => Promise<void>;
+interface UserActionResult {
+  isUserActive: () => boolean;
+  userAction: UserAction;
+}
+/**
+ * 创建用户活动
+ * @description
+ * 解决"组件内部 emit 更新 → 外部 props 回传 → 监听 props 的副作用再次触发
+ * 内部状态变更"的循环更新问题。典型搭配：
+ *
+ * ```ts
+ * const { userAction, isUserActive } = useUserAction()
+ *
+ * // 将函数标记为一个用户动作
+ * const handleSelect = userAction((date: Dater) => {
+ *   currentDate.value = date
+ *   emit('update:modelValue', date.format(fmt))
+ * })
+ *
+ * // modelValue 回显：用户活动期间跳过
+ * watch(() => props.modelValue, (v) => {
+ *   if (isUserActive()) return
+ *   currentDate.value = v ? date(v) : undefined
+ * })
+ * ```
+ */
+declare function useUserAction(): UserActionResult;
+//#endregion
+export { UserAction, UserActionResult, useUserAction };
+//# sourceMappingURL=index.d.ts.map

package/dist/use-user-action/index.js

@@ -0,0 +1,50 @@
+import { nextTick } from "vue";
+//#region src/use-user-action/index.ts
+/**
+* 创建用户活动
+* @description
+* 解决"组件内部 emit 更新 → 外部 props 回传 → 监听 props 的副作用再次触发
+* 内部状态变更"的循环更新问题。典型搭配：
+*
+* ```ts
+* const { userAction, isUserActive } = useUserAction()
+*
+* // 将函数标记为一个用户动作
+* const handleSelect = userAction((date: Dater) => {
+*   currentDate.value = date
+*   emit('update:modelValue', date.format(fmt))
+* })
+*
+* // modelValue 回显：用户活动期间跳过
+* watch(() => props.modelValue, (v) => {
+*   if (isUserActive()) return
+*   currentDate.value = v ? date(v) : undefined
+* })
+* ```
+*/
+function useUserAction() {
+	let actionCount = 0;
+	const isUserActive = () => {
+		return actionCount > 0;
+	};
+	const userAction = (fn) => {
+		return async (...args) => {
+			actionCount++;
+			try {
+				await fn(...args);
+			} catch (error) {
+				console.error(error);
+			}
+			await nextTick();
+			actionCount--;
+		};
+	};
+	return {
+		isUserActive,
+		userAction
+	};
+}
+//#endregion
+export { useUserAction };
+
+//# sourceMappingURL=index.js.map

package/dist/use-user-action/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/use-user-action/index.ts"],"sourcesContent":["import { nextTick } from 'vue'\n\nexport type UserAction = <T extends (...args: any[]) => void | Promise<void>>(\n  fn: T\n) => (...args: Parameters<T>) => Promise<void>\n\nexport interface UserActionResult {\n  isUserActive: () => boolean\n  userAction: UserAction\n}\n\n/**\n * 创建用户活动\n * @description\n * 解决\"组件内部 emit 更新 → 外部 props 回传 → 监听 props 的副作用再次触发\n * 内部状态变更\"的循环更新问题。典型搭配：\n *\n * ```ts\n * const { userAction, isUserActive } = useUserAction()\n *\n * // 将函数标记为一个用户动作\n * const handleSelect = userAction((date: Dater) => {\n *   currentDate.value = date\n *   emit('update:modelValue', date.format(fmt))\n * })\n *\n * // modelValue 回显：用户活动期间跳过\n * watch(() => props.modelValue, (v) => {\n *   if (isUserActive()) return\n *   currentDate.value = v ? date(v) : undefined\n * })\n * ```\n */\nexport function useUserAction(): UserActionResult {\n  let actionCount = 0\n  const isUserActive = () => {\n    return actionCount > 0\n  }\n\n  const userAction: UserAction = (fn) => {\n    return async (...args) => {\n      actionCount++\n\n      try {\n        await fn(...args)\n      } catch (error) {\n        console.error(error)\n      }\n      await nextTick()\n\n      actionCount--\n    }\n  }\n\n  return { isUserActive, userAction }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiCA,SAAgB,gBAAkC;CAChD,IAAI,cAAc;CAClB,MAAM,qBAAqB;AACzB,SAAO,cAAc;;CAGvB,MAAM,cAA0B,OAAO;AACrC,SAAO,OAAO,GAAG,SAAS;AACxB;AAEA,OAAI;AACF,UAAM,GAAG,GAAG,KAAK;YACV,OAAO;AACd,YAAQ,MAAM,MAAM;;AAEtB,SAAM,UAAU;AAEhB;;;AAIJ,QAAO;EAAE;EAAc;EAAY"}

package/dist/use-virtualizer/index.d.ts

@@ -0,0 +1,69 @@
+import { MaybeRefOrGetter, Ref, ShallowRef } from "vue";
+import { EstimateSize, GetItemKey, VirtualAlign, VirtualItem, VirtualMeasurement, VirtualRange, VirtualScrollOptions, VirtualSnapshot, Virtualizer as Virtualizer$1, VirtualizerOptions } from "@cat-kit/fe";
+
+//#region src/use-virtualizer/index.d.ts
+type MaybeEl = HTMLElement | null | undefined;
+interface UseVirtualizerOptions extends Omit<VirtualizerOptions, 'count'> {
+  /** 响应式虚拟项总数；内部 `watch` 驱动 `virtualizer.setCount`。 */
+  count: Ref<number>;
+  /**
+   * 响应式滚动容器；变更时自动 `connect` / `disconnect`。
+   * `immediate: true`，初始为 `null` 时等价于 `disconnect()`。
+   */
+  scrollEl: MaybeRefOrGetter<MaybeEl>;
+  /**
+   * 可选：内容承接元素。hook 订阅到结构性更新时直接写入
+   * `style.height = totalSize + 'px'`（水平模式为 `width`），
+   * **不经过 Vue 响应式**——因此 `totalSize` 的变化不会触发模板重渲染。
+   * 当引用切换为 `null` 时，会清空此前写入的内联尺寸，恢复 CSS 默认。
+   */
+  contentEl?: MaybeRefOrGetter<MaybeEl>;
+  /** 可选：首项前占位元素。语义同 `contentEl`，写 `beforeSize`。 */
+  beforeEl?: MaybeRefOrGetter<MaybeEl>;
+  /** 可选：末项后占位元素。语义同 `contentEl`，写 `afterSize`。 */
+  afterEl?: MaybeRefOrGetter<MaybeEl>;
+}
+interface UseVirtualizerReturned {
+  /**
+   * 底层 `Virtualizer` 实例。
+   *
+   * 未做包装；消费者可直接调用 `scrollToIndex` / `scrollToOffset` /
+   * `reset` / `measureMany` / `setOptions` / `measureElement` 等方法。
+   */
+  virtualizer: Virtualizer$1;
+  /**
+   * 完整快照 shallowRef。任一结构性变化（items/range/isScrolling/各种 size）都会更新。
+   * 大多数消费者只需 `items` / `isScrolling`，此 ref 仅在需要 `range` / `totalSize` 等
+   * 其它字段时使用。
+   */
+  snapshot: ShallowRef<VirtualSnapshot>;
+  /**
+   * 仅在底层 `items` 引用变化时才更新的 shallowRef。
+   *
+   * 独立于 `snapshot`，用于模板 `v-for`；这样 `isScrolling` 等字段的切换不会
+   * 连带触发 `items.map(...)` 的重新求值。
+   */
+  items: ShallowRef<VirtualItem[]>;
+  /** 仅在布尔值变化时更新的 `isScrolling` 状态。 */
+  isScrolling: ShallowRef<boolean>;
+}
+/**
+ * Vue 适配层：把 `@cat-kit/fe` 的 `Virtualizer` 生命周期与响应式系统对接。
+ *
+ * 设计原则：
+ * 1. **尺寸写入走 DOM**：`contentEl` / `beforeEl` / `afterEl` 一旦传入，
+ *    hook 在 `subscribe` 回调中命令式写 `style.height`；消费者模板无需绑定
+ *    `totalSize` / `beforeSize` / `afterSize`，滚动时 Vue 不会因尺寸变化重渲染。
+ * 2. **`items` / `isScrolling` 独立拆分**：底层 subscribe 一次回调可能同时包含
+ *    items 变化与 isScrolling 切换；拆成两个 shallowRef 后，消费者 `v-for`
+ *    的 `computed(() => items.value.map(...))` 不会因 `isScrolling` 变化而重新执行。
+ * 3. **业务语义外置**：阈值判定 / key 组装 / `scrollToIndex` 对齐方式由消费者组装。
+ *
+ * 约束：
+ * - `initialOffset` / `initialViewport` 仅构造时生效，后续 `setOptions` 忽略（底层契约）。
+ * - 消费者若需运行时切换 `estimateSize` / `getItemKey` 等字段，调用 `virtualizer.setOptions(...)`。
+ */
+declare function useVirtualizer(options: UseVirtualizerOptions): UseVirtualizerReturned;
+//#endregion
+export { type EstimateSize, type GetItemKey, UseVirtualizerOptions, UseVirtualizerReturned, type VirtualAlign, type VirtualItem, type VirtualMeasurement, type VirtualRange, type VirtualScrollOptions, type VirtualSnapshot, type Virtualizer$1 as Virtualizer, type VirtualizerOptions, useVirtualizer };
+//# sourceMappingURL=index.d.ts.map

package/dist/use-virtualizer/index.js

@@ -0,0 +1,87 @@
+import { onScopeDispose, shallowRef, toValue, watch } from "vue";
+import { Virtualizer } from "@cat-kit/fe";
+//#region src/use-virtualizer/index.ts
+function writeSize(el, size, horizontal) {
+	if (!el) return;
+	if (horizontal) el.style.width = `${size}px`;
+	else el.style.height = `${size}px`;
+}
+function clearSize(el, horizontal) {
+	if (!el) return;
+	if (horizontal) el.style.width = "";
+	else el.style.height = "";
+}
+/**
+* Vue 适配层：把 `@cat-kit/fe` 的 `Virtualizer` 生命周期与响应式系统对接。
+*
+* 设计原则：
+* 1. **尺寸写入走 DOM**：`contentEl` / `beforeEl` / `afterEl` 一旦传入，
+*    hook 在 `subscribe` 回调中命令式写 `style.height`；消费者模板无需绑定
+*    `totalSize` / `beforeSize` / `afterSize`，滚动时 Vue 不会因尺寸变化重渲染。
+* 2. **`items` / `isScrolling` 独立拆分**：底层 subscribe 一次回调可能同时包含
+*    items 变化与 isScrolling 切换；拆成两个 shallowRef 后，消费者 `v-for`
+*    的 `computed(() => items.value.map(...))` 不会因 `isScrolling` 变化而重新执行。
+* 3. **业务语义外置**：阈值判定 / key 组装 / `scrollToIndex` 对齐方式由消费者组装。
+*
+* 约束：
+* - `initialOffset` / `initialViewport` 仅构造时生效，后续 `setOptions` 忽略（底层契约）。
+* - 消费者若需运行时切换 `estimateSize` / `getItemKey` 等字段，调用 `virtualizer.setOptions(...)`。
+*/
+function useVirtualizer(options) {
+	const { count, scrollEl, contentEl, beforeEl, afterEl, ...initOptions } = options;
+	const horizontal = initOptions.horizontal === true;
+	const virtualizer = new Virtualizer({
+		...initOptions,
+		count: count.value
+	});
+	const initialSnapshot = virtualizer.getSnapshot();
+	const snapshot = shallowRef(initialSnapshot);
+	const items = shallowRef(initialSnapshot.items);
+	const isScrolling = shallowRef(initialSnapshot.isScrolling);
+	function flushSizes(s) {
+		writeSize(toValue(contentEl) ?? null, s.totalSize, horizontal);
+		writeSize(toValue(beforeEl) ?? null, s.beforeSize, horizontal);
+		writeSize(toValue(afterEl) ?? null, s.afterSize, horizontal);
+	}
+	flushSizes(initialSnapshot);
+	const unsubscribe = virtualizer.subscribe((next) => {
+		snapshot.value = next;
+		if (next.items !== items.value) items.value = next.items;
+		if (next.isScrolling !== isScrolling.value) isScrolling.value = next.isScrolling;
+		flushSizes(next);
+	});
+	watch(count, (c) => {
+		virtualizer.setCount(c);
+	});
+	watch(() => toValue(scrollEl) ?? null, (el) => {
+		if (el) virtualizer.connect(el);
+		else virtualizer.disconnect();
+	}, { immediate: true });
+	function bindSizeSlot(source, pick) {
+		if (source === void 0) return;
+		watch(() => toValue(source) ?? null, (el, oldEl) => {
+			if (oldEl && oldEl !== el) clearSize(oldEl, horizontal);
+			if (el) writeSize(el, pick(snapshot.value), horizontal);
+		});
+	}
+	bindSizeSlot(contentEl, (s) => s.totalSize);
+	bindSizeSlot(beforeEl, (s) => s.beforeSize);
+	bindSizeSlot(afterEl, (s) => s.afterSize);
+	onScopeDispose(() => {
+		unsubscribe();
+		virtualizer.destroy();
+		clearSize(toValue(contentEl) ?? null, horizontal);
+		clearSize(toValue(beforeEl) ?? null, horizontal);
+		clearSize(toValue(afterEl) ?? null, horizontal);
+	});
+	return {
+		virtualizer,
+		snapshot,
+		items,
+		isScrolling
+	};
+}
+//#endregion
+export { useVirtualizer };
+
+//# sourceMappingURL=index.js.map

package/dist/use-virtualizer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/use-virtualizer/index.ts"],"sourcesContent":["import {\n  Virtualizer,\n  type EstimateSize,\n  type GetItemKey,\n  type VirtualAlign,\n  type VirtualItem,\n  type VirtualMeasurement,\n  type VirtualRange,\n  type VirtualScrollOptions,\n  type VirtualSnapshot,\n  type VirtualizerOptions\n} from '@cat-kit/fe'\nimport {\n  onScopeDispose,\n  shallowRef,\n  toValue,\n  watch,\n  type MaybeRefOrGetter,\n  type Ref,\n  type ShallowRef\n} from 'vue'\n\nexport type {\n  EstimateSize,\n  GetItemKey,\n  VirtualAlign,\n  VirtualItem,\n  VirtualMeasurement,\n  VirtualRange,\n  VirtualScrollOptions,\n  VirtualSnapshot,\n  Virtualizer,\n  VirtualizerOptions\n}\n\ntype MaybeEl = HTMLElement | null | undefined\n\nexport interface UseVirtualizerOptions extends Omit<VirtualizerOptions, 'count'> {\n  /** 响应式虚拟项总数；内部 `watch` 驱动 `virtualizer.setCount`。 */\n  count: Ref<number>\n  /**\n   * 响应式滚动容器；变更时自动 `connect` / `disconnect`。\n   * `immediate: true`，初始为 `null` 时等价于 `disconnect()`。\n   */\n  scrollEl: MaybeRefOrGetter<MaybeEl>\n  /**\n   * 可选：内容承接元素。hook 订阅到结构性更新时直接写入\n   * `style.height = totalSize + 'px'`（水平模式为 `width`），\n   * **不经过 Vue 响应式**——因此 `totalSize` 的变化不会触发模板重渲染。\n   * 当引用切换为 `null` 时，会清空此前写入的内联尺寸，恢复 CSS 默认。\n   */\n  contentEl?: MaybeRefOrGetter<MaybeEl>\n  /** 可选：首项前占位元素。语义同 `contentEl`，写 `beforeSize`。 */\n  beforeEl?: MaybeRefOrGetter<MaybeEl>\n  /** 可选：末项后占位元素。语义同 `contentEl`，写 `afterSize`。 */\n  afterEl?: MaybeRefOrGetter<MaybeEl>\n}\n\nexport interface UseVirtualizerReturned {\n  /**\n   * 底层 `Virtualizer` 实例。\n   *\n   * 未做包装；消费者可直接调用 `scrollToIndex` / `scrollToOffset` /\n   * `reset` / `measureMany` / `setOptions` / `measureElement` 等方法。\n   */\n  virtualizer: Virtualizer\n  /**\n   * 完整快照 shallowRef。任一结构性变化（items/range/isScrolling/各种 size）都会更新。\n   * 大多数消费者只需 `items` / `isScrolling`，此 ref 仅在需要 `range` / `totalSize` 等\n   * 其它字段时使用。\n   */\n  snapshot: ShallowRef<VirtualSnapshot>\n  /**\n   * 仅在底层 `items` 引用变化时才更新的 shallowRef。\n   *\n   * 独立于 `snapshot`，用于模板 `v-for`；这样 `isScrolling` 等字段的切换不会\n   * 连带触发 `items.map(...)` 的重新求值。\n   */\n  items: ShallowRef<VirtualItem[]>\n  /** 仅在布尔值变化时更新的 `isScrolling` 状态。 */\n  isScrolling: ShallowRef<boolean>\n}\n\nfunction writeSize(el: MaybeEl, size: number, horizontal: boolean): void {\n  if (!el) return\n  if (horizontal) el.style.width = `${size}px`\n  else el.style.height = `${size}px`\n}\n\nfunction clearSize(el: MaybeEl, horizontal: boolean): void {\n  if (!el) return\n  if (horizontal) el.style.width = ''\n  else el.style.height = ''\n}\n\n/**\n * Vue 适配层：把 `@cat-kit/fe` 的 `Virtualizer` 生命周期与响应式系统对接。\n *\n * 设计原则：\n * 1. **尺寸写入走 DOM**：`contentEl` / `beforeEl` / `afterEl` 一旦传入，\n *    hook 在 `subscribe` 回调中命令式写 `style.height`；消费者模板无需绑定\n *    `totalSize` / `beforeSize` / `afterSize`，滚动时 Vue 不会因尺寸变化重渲染。\n * 2. **`items` / `isScrolling` 独立拆分**：底层 subscribe 一次回调可能同时包含\n *    items 变化与 isScrolling 切换；拆成两个 shallowRef 后，消费者 `v-for`\n *    的 `computed(() => items.value.map(...))` 不会因 `isScrolling` 变化而重新执行。\n * 3. **业务语义外置**：阈值判定 / key 组装 / `scrollToIndex` 对齐方式由消费者组装。\n *\n * 约束：\n * - `initialOffset` / `initialViewport` 仅构造时生效，后续 `setOptions` 忽略（底层契约）。\n * - 消费者若需运行时切换 `estimateSize` / `getItemKey` 等字段，调用 `virtualizer.setOptions(...)`。\n */\nexport function useVirtualizer(options: UseVirtualizerOptions): UseVirtualizerReturned {\n  const { count, scrollEl, contentEl, beforeEl, afterEl, ...initOptions } = options\n  const horizontal = initOptions.horizontal === true\n\n  const virtualizer = new Virtualizer({ ...initOptions, count: count.value })\n\n  const initialSnapshot = virtualizer.getSnapshot()\n  const snapshot = shallowRef<VirtualSnapshot>(initialSnapshot)\n  const items = shallowRef<VirtualItem[]>(initialSnapshot.items)\n  const isScrolling = shallowRef<boolean>(initialSnapshot.isScrolling)\n\n  function flushSizes(s: VirtualSnapshot): void {\n    writeSize(toValue(contentEl) ?? null, s.totalSize, horizontal)\n    writeSize(toValue(beforeEl) ?? null, s.beforeSize, horizontal)\n    writeSize(toValue(afterEl) ?? null, s.afterSize, horizontal)\n  }\n\n  // 初次同步，覆盖构造阶段 count > 0 场景（容器未 connect 时 totalSize 已有值）。\n  flushSizes(initialSnapshot)\n\n  const unsubscribe = virtualizer.subscribe((next) => {\n    snapshot.value = next\n    if (next.items !== items.value) items.value = next.items\n    if (next.isScrolling !== isScrolling.value) isScrolling.value = next.isScrolling\n    flushSizes(next)\n  })\n\n  watch(count, (c) => {\n    virtualizer.setCount(c)\n  })\n\n  watch(\n    () => toValue(scrollEl) ?? null,\n    (el) => {\n      if (el) virtualizer.connect(el)\n      else virtualizer.disconnect()\n    },\n    { immediate: true }\n  )\n\n  // 元素引用切换时：清旧元素的内联尺寸 + 立即给新元素写入当前快照值。\n  // 不向 hook 返回值暴露这些元素（消费者用 :ref 绑定自己的 ref 即可）。\n  function bindSizeSlot(\n    source: MaybeRefOrGetter<MaybeEl> | undefined,\n    pick: (s: VirtualSnapshot) => number\n  ): void {\n    if (source === undefined) return\n    watch(\n      () => toValue(source) ?? null,\n      (el, oldEl) => {\n        if (oldEl && oldEl !== el) clearSize(oldEl, horizontal)\n        if (el) writeSize(el, pick(snapshot.value), horizontal)\n      }\n    )\n  }\n\n  bindSizeSlot(contentEl, (s) => s.totalSize)\n  bindSizeSlot(beforeEl, (s) => s.beforeSize)\n  bindSizeSlot(afterEl, (s) => s.afterSize)\n\n  onScopeDispose(() => {\n    unsubscribe()\n    virtualizer.destroy()\n    clearSize(toValue(contentEl) ?? null, horizontal)\n    clearSize(toValue(beforeEl) ?? null, horizontal)\n    clearSize(toValue(afterEl) ?? null, horizontal)\n  })\n\n  return { virtualizer, snapshot, items, isScrolling }\n}\n"],"mappings":";;;AAmFA,SAAS,UAAU,IAAa,MAAc,YAA2B;AACvE,KAAI,CAAC,GAAI;AACT,KAAI,WAAY,IAAG,MAAM,QAAQ,GAAG,KAAK;KACpC,IAAG,MAAM,SAAS,GAAG,KAAK;;AAGjC,SAAS,UAAU,IAAa,YAA2B;AACzD,KAAI,CAAC,GAAI;AACT,KAAI,WAAY,IAAG,MAAM,QAAQ;KAC5B,IAAG,MAAM,SAAS;;;;;;;;;;;;;;;;;;AAmBzB,SAAgB,eAAe,SAAwD;CACrF,MAAM,EAAE,OAAO,UAAU,WAAW,UAAU,SAAS,GAAG,gBAAgB;CAC1E,MAAM,aAAa,YAAY,eAAe;CAE9C,MAAM,cAAc,IAAI,YAAY;EAAE,GAAG;EAAa,OAAO,MAAM;EAAO,CAAC;CAE3E,MAAM,kBAAkB,YAAY,aAAa;CACjD,MAAM,WAAW,WAA4B,gBAAgB;CAC7D,MAAM,QAAQ,WAA0B,gBAAgB,MAAM;CAC9D,MAAM,cAAc,WAAoB,gBAAgB,YAAY;CAEpE,SAAS,WAAW,GAA0B;AAC5C,YAAU,QAAQ,UAAU,IAAI,MAAM,EAAE,WAAW,WAAW;AAC9D,YAAU,QAAQ,SAAS,IAAI,MAAM,EAAE,YAAY,WAAW;AAC9D,YAAU,QAAQ,QAAQ,IAAI,MAAM,EAAE,WAAW,WAAW;;AAI9D,YAAW,gBAAgB;CAE3B,MAAM,cAAc,YAAY,WAAW,SAAS;AAClD,WAAS,QAAQ;AACjB,MAAI,KAAK,UAAU,MAAM,MAAO,OAAM,QAAQ,KAAK;AACnD,MAAI,KAAK,gBAAgB,YAAY,MAAO,aAAY,QAAQ,KAAK;AACrE,aAAW,KAAK;GAChB;AAEF,OAAM,QAAQ,MAAM;AAClB,cAAY,SAAS,EAAE;GACvB;AAEF,aACQ,QAAQ,SAAS,IAAI,OAC1B,OAAO;AACN,MAAI,GAAI,aAAY,QAAQ,GAAG;MAC1B,aAAY,YAAY;IAE/B,EAAE,WAAW,MAAM,CACpB;CAID,SAAS,aACP,QACA,MACM;AACN,MAAI,WAAW,KAAA,EAAW;AAC1B,cACQ,QAAQ,OAAO,IAAI,OACxB,IAAI,UAAU;AACb,OAAI,SAAS,UAAU,GAAI,WAAU,OAAO,WAAW;AACvD,OAAI,GAAI,WAAU,IAAI,KAAK,SAAS,MAAM,EAAE,WAAW;IAE1D;;AAGH,cAAa,YAAY,MAAM,EAAE,UAAU;AAC3C,cAAa,WAAW,MAAM,EAAE,WAAW;AAC3C,cAAa,UAAU,MAAM,EAAE,UAAU;AAEzC,sBAAqB;AACnB,eAAa;AACb,cAAY,SAAS;AACrB,YAAU,QAAQ,UAAU,IAAI,MAAM,WAAW;AACjD,YAAU,QAAQ,SAAS,IAAI,MAAM,WAAW;AAChD,YAAU,QAAQ,QAAQ,IAAI,MAAM,WAAW;GAC/C;AAEF,QAAO;EAAE;EAAa;EAAU;EAAO;EAAa"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/compositions",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "files": [
     "dist",
     "src"
@@ -17,15 +17,12 @@
     "check-types": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@cat-kit/core": "^1.0.1",
+    "@cat-kit/core": "^1.1.1",
+    "@cat-kit/fe": "^1.1.1",
     "@floating-ui/dom": "^1.7.6",
-    "@tanstack/vue-virtual": "^3.13.23",
-    "@veltra/utils": "1.0.8"
-  },
-  "devDependencies": {
-    "tsdown": "^0.21.7"
+    "@veltra/utils": "1.0.10"
   },
   "peerDependencies": {
-    "vue": "^3.5.0"
+    "vue": "^3.5.33"
   }
 }

package/src/index.ts

@@ -10,7 +10,7 @@ export * from './use-focus'
 
 export * from './use-form-component'
 
-export * from './use-lock'
+export * from './use-user-action'
 
 export * from './use-model'
 
@@ -22,4 +22,4 @@ export * from './use-resize-observer'
 
 export * from './use-transition'
 
-export * from './use-virtual'
+export * from './use-virtualizer'

package/src/use-user-action/index.ts

@@ -0,0 +1,56 @@
+import { nextTick } from 'vue'
+
+export type UserAction = <T extends (...args: any[]) => void | Promise<void>>(
+  fn: T
+) => (...args: Parameters<T>) => Promise<void>
+
+export interface UserActionResult {
+  isUserActive: () => boolean
+  userAction: UserAction
+}
+
+/**
+ * 创建用户活动
+ * @description
+ * 解决"组件内部 emit 更新 → 外部 props 回传 → 监听 props 的副作用再次触发
+ * 内部状态变更"的循环更新问题。典型搭配：
+ *
+ * ```ts
+ * const { userAction, isUserActive } = useUserAction()
+ *
+ * // 将函数标记为一个用户动作
+ * const handleSelect = userAction((date: Dater) => {
+ *   currentDate.value = date
+ *   emit('update:modelValue', date.format(fmt))
+ * })
+ *
+ * // modelValue 回显：用户活动期间跳过
+ * watch(() => props.modelValue, (v) => {
+ *   if (isUserActive()) return
+ *   currentDate.value = v ? date(v) : undefined
+ * })
+ * ```
+ */
+export function useUserAction(): UserActionResult {
+  let actionCount = 0
+  const isUserActive = () => {
+    return actionCount > 0
+  }
+
+  const userAction: UserAction = (fn) => {
+    return async (...args) => {
+      actionCount++
+
+      try {
+        await fn(...args)
+      } catch (error) {
+        console.error(error)
+      }
+      await nextTick()
+
+      actionCount--
+    }
+  }
+
+  return { isUserActive, userAction }
+}

package/src/use-virtualizer/index.ts

@@ -0,0 +1,181 @@
+import {
+  Virtualizer,
+  type EstimateSize,
+  type GetItemKey,
+  type VirtualAlign,
+  type VirtualItem,
+  type VirtualMeasurement,
+  type VirtualRange,
+  type VirtualScrollOptions,
+  type VirtualSnapshot,
+  type VirtualizerOptions
+} from '@cat-kit/fe'
+import {
+  onScopeDispose,
+  shallowRef,
+  toValue,
+  watch,
+  type MaybeRefOrGetter,
+  type Ref,
+  type ShallowRef
+} from 'vue'
+
+export type {
+  EstimateSize,
+  GetItemKey,
+  VirtualAlign,
+  VirtualItem,
+  VirtualMeasurement,
+  VirtualRange,
+  VirtualScrollOptions,
+  VirtualSnapshot,
+  Virtualizer,
+  VirtualizerOptions
+}
+
+type MaybeEl = HTMLElement | null | undefined
+
+export interface UseVirtualizerOptions extends Omit<VirtualizerOptions, 'count'> {
+  /** 响应式虚拟项总数；内部 `watch` 驱动 `virtualizer.setCount`。 */
+  count: Ref<number>
+  /**
+   * 响应式滚动容器；变更时自动 `connect` / `disconnect`。
+   * `immediate: true`，初始为 `null` 时等价于 `disconnect()`。
+   */
+  scrollEl: MaybeRefOrGetter<MaybeEl>
+  /**
+   * 可选：内容承接元素。hook 订阅到结构性更新时直接写入
+   * `style.height = totalSize + 'px'`（水平模式为 `width`），
+   * **不经过 Vue 响应式**——因此 `totalSize` 的变化不会触发模板重渲染。
+   * 当引用切换为 `null` 时，会清空此前写入的内联尺寸，恢复 CSS 默认。
+   */
+  contentEl?: MaybeRefOrGetter<MaybeEl>
+  /** 可选：首项前占位元素。语义同 `contentEl`，写 `beforeSize`。 */
+  beforeEl?: MaybeRefOrGetter<MaybeEl>
+  /** 可选：末项后占位元素。语义同 `contentEl`，写 `afterSize`。 */
+  afterEl?: MaybeRefOrGetter<MaybeEl>
+}
+
+export interface UseVirtualizerReturned {
+  /**
+   * 底层 `Virtualizer` 实例。
+   *
+   * 未做包装；消费者可直接调用 `scrollToIndex` / `scrollToOffset` /
+   * `reset` / `measureMany` / `setOptions` / `measureElement` 等方法。
+   */
+  virtualizer: Virtualizer
+  /**
+   * 完整快照 shallowRef。任一结构性变化（items/range/isScrolling/各种 size）都会更新。
+   * 大多数消费者只需 `items` / `isScrolling`，此 ref 仅在需要 `range` / `totalSize` 等
+   * 其它字段时使用。
+   */
+  snapshot: ShallowRef<VirtualSnapshot>
+  /**
+   * 仅在底层 `items` 引用变化时才更新的 shallowRef。
+   *
+   * 独立于 `snapshot`，用于模板 `v-for`；这样 `isScrolling` 等字段的切换不会
+   * 连带触发 `items.map(...)` 的重新求值。
+   */
+  items: ShallowRef<VirtualItem[]>
+  /** 仅在布尔值变化时更新的 `isScrolling` 状态。 */
+  isScrolling: ShallowRef<boolean>
+}
+
+function writeSize(el: MaybeEl, size: number, horizontal: boolean): void {
+  if (!el) return
+  if (horizontal) el.style.width = `${size}px`
+  else el.style.height = `${size}px`
+}
+
+function clearSize(el: MaybeEl, horizontal: boolean): void {
+  if (!el) return
+  if (horizontal) el.style.width = ''
+  else el.style.height = ''
+}
+
+/**
+ * Vue 适配层：把 `@cat-kit/fe` 的 `Virtualizer` 生命周期与响应式系统对接。
+ *
+ * 设计原则：
+ * 1. **尺寸写入走 DOM**：`contentEl` / `beforeEl` / `afterEl` 一旦传入，
+ *    hook 在 `subscribe` 回调中命令式写 `style.height`；消费者模板无需绑定
+ *    `totalSize` / `beforeSize` / `afterSize`，滚动时 Vue 不会因尺寸变化重渲染。
+ * 2. **`items` / `isScrolling` 独立拆分**：底层 subscribe 一次回调可能同时包含
+ *    items 变化与 isScrolling 切换；拆成两个 shallowRef 后，消费者 `v-for`
+ *    的 `computed(() => items.value.map(...))` 不会因 `isScrolling` 变化而重新执行。
+ * 3. **业务语义外置**：阈值判定 / key 组装 / `scrollToIndex` 对齐方式由消费者组装。
+ *
+ * 约束：
+ * - `initialOffset` / `initialViewport` 仅构造时生效，后续 `setOptions` 忽略（底层契约）。
+ * - 消费者若需运行时切换 `estimateSize` / `getItemKey` 等字段，调用 `virtualizer.setOptions(...)`。
+ */
+export function useVirtualizer(options: UseVirtualizerOptions): UseVirtualizerReturned {
+  const { count, scrollEl, contentEl, beforeEl, afterEl, ...initOptions } = options
+  const horizontal = initOptions.horizontal === true
+
+  const virtualizer = new Virtualizer({ ...initOptions, count: count.value })
+
+  const initialSnapshot = virtualizer.getSnapshot()
+  const snapshot = shallowRef<VirtualSnapshot>(initialSnapshot)
+  const items = shallowRef<VirtualItem[]>(initialSnapshot.items)
+  const isScrolling = shallowRef<boolean>(initialSnapshot.isScrolling)
+
+  function flushSizes(s: VirtualSnapshot): void {
+    writeSize(toValue(contentEl) ?? null, s.totalSize, horizontal)
+    writeSize(toValue(beforeEl) ?? null, s.beforeSize, horizontal)
+    writeSize(toValue(afterEl) ?? null, s.afterSize, horizontal)
+  }
+
+  // 初次同步，覆盖构造阶段 count > 0 场景（容器未 connect 时 totalSize 已有值）。
+  flushSizes(initialSnapshot)
+
+  const unsubscribe = virtualizer.subscribe((next) => {
+    snapshot.value = next
+    if (next.items !== items.value) items.value = next.items
+    if (next.isScrolling !== isScrolling.value) isScrolling.value = next.isScrolling
+    flushSizes(next)
+  })
+
+  watch(count, (c) => {
+    virtualizer.setCount(c)
+  })
+
+  watch(
+    () => toValue(scrollEl) ?? null,
+    (el) => {
+      if (el) virtualizer.connect(el)
+      else virtualizer.disconnect()
+    },
+    { immediate: true }
+  )
+
+  // 元素引用切换时：清旧元素的内联尺寸 + 立即给新元素写入当前快照值。
+  // 不向 hook 返回值暴露这些元素（消费者用 :ref 绑定自己的 ref 即可）。
+  function bindSizeSlot(
+    source: MaybeRefOrGetter<MaybeEl> | undefined,
+    pick: (s: VirtualSnapshot) => number
+  ): void {
+    if (source === undefined) return
+    watch(
+      () => toValue(source) ?? null,
+      (el, oldEl) => {
+        if (oldEl && oldEl !== el) clearSize(oldEl, horizontal)
+        if (el) writeSize(el, pick(snapshot.value), horizontal)
+      }
+    )
+  }
+
+  bindSizeSlot(contentEl, (s) => s.totalSize)
+  bindSizeSlot(beforeEl, (s) => s.beforeSize)
+  bindSizeSlot(afterEl, (s) => s.afterSize)
+
+  onScopeDispose(() => {
+    unsubscribe()
+    virtualizer.destroy()
+    clearSize(toValue(contentEl) ?? null, horizontal)
+    clearSize(toValue(beforeEl) ?? null, horizontal)
+    clearSize(toValue(afterEl) ?? null, horizontal)
+  })
+
+  return { virtualizer, snapshot, items, isScrolling }
+}

package/dist/use-lock/index.d.ts

@@ -1,28 +0,0 @@
-//#region src/use-lock/index.d.ts
-type Update = (fn: Function) => any;
-type Lock = (fn: Function) => Promise<void>;
-interface Updater {
-  /**
-   * 更新
-   * @description 在非锁定时执行传入的函数
-   */
-  update: Update;
-  /**
-   * 更新并锁定
-   * @description 执行传入的函数，并锁定更新操作，直到函数执行完成
-   */
-  updateAndLock: Lock;
-}
-/**
- * 数据更新锁
- * @description
- * 更新锁主要用于防止组件数据更新时，循环触发更新。
- *
- * @returns 该函数返回两个函数：
- * 1. update: 更新函数，在非锁定时执行传入的函数
- * 2. lock: 锁定函数，执行时会锁定更新操作，直到锁定操作结束
- */
-declare function useUpdateLock(): Updater;
-//#endregion
-export { Updater, useUpdateLock };
-//# sourceMappingURL=index.d.ts.map

package/dist/use-lock/index.js

@@ -1,36 +0,0 @@
-import { nextTick } from "vue";
-//#region src/use-lock/index.ts
-/**
-* 数据更新锁
-* @description
-* 更新锁主要用于防止组件数据更新时，循环触发更新。
-*
-* @returns 该函数返回两个函数：
-* 1. update: 更新函数，在非锁定时执行传入的函数
-* 2. lock: 锁定函数，执行时会锁定更新操作，直到锁定操作结束
-*/
-function useUpdateLock() {
-	let lockedCount = 0;
-	function update(fn) {
-		if (lockedCount > 0) return;
-		return fn();
-	}
-	async function updateAndLock(fn) {
-		lockedCount++;
-		try {
-			await fn();
-		} catch (error) {
-			console.error(error);
-		}
-		await nextTick();
-		lockedCount--;
-	}
-	return {
-		updateAndLock,
-		update
-	};
-}
-//#endregion
-export { useUpdateLock };
-
-//# sourceMappingURL=index.js.map

package/dist/use-lock/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/use-lock/index.ts"],"sourcesContent":["import { nextTick } from 'vue'\n\ntype Update = (fn: Function) => any\ntype Lock = (fn: Function) => Promise<void>\n\nexport interface Updater {\n  /**\n   * 更新\n   * @description 在非锁定时执行传入的函数\n   */\n  update: Update\n  /**\n   * 更新并锁定\n   * @description 执行传入的函数，并锁定更新操作，直到函数执行完成\n   */\n  updateAndLock: Lock\n}\n\n/**\n * 数据更新锁\n * @description\n * 更新锁主要用于防止组件数据更新时，循环触发更新。\n *\n * @returns 该函数返回两个函数：\n * 1. update: 更新函数，在非锁定时执行传入的函数\n * 2. lock: 锁定函数，执行时会锁定更新操作，直到锁定操作结束\n */\nexport function useUpdateLock(): Updater {\n  let lockedCount = 0\n\n  function update(fn: Function) {\n    if (lockedCount > 0) return\n    return fn()\n  }\n\n  async function updateAndLock(fn: Function) {\n    lockedCount++\n\n    try {\n      await fn()\n    } catch (error) {\n      console.error(error)\n    }\n    await nextTick()\n\n    lockedCount--\n  }\n\n  return { updateAndLock, update }\n}\n"],"mappings":";;;;;;;;;;;AA2BA,SAAgB,gBAAyB;CACvC,IAAI,cAAc;CAElB,SAAS,OAAO,IAAc;AAC5B,MAAI,cAAc,EAAG;AACrB,SAAO,IAAI;;CAGb,eAAe,cAAc,IAAc;AACzC;AAEA,MAAI;AACF,SAAM,IAAI;WACH,OAAO;AACd,WAAQ,MAAM,MAAM;;AAEtB,QAAM,UAAU;AAEhB;;AAGF,QAAO;EAAE;EAAe;EAAQ"}

package/dist/use-virtual/index.d.ts

@@ -1,30 +0,0 @@
-import { ComputedRef, Ref, ShallowRef } from "vue";
-import { VirtualItem } from "@tanstack/vue-virtual";
-
-//#region src/use-virtual/index.d.ts
-interface Options {
-  /** 指定启用虚拟列表的阈值 */
-  virtualThreshold?: number | Ref<number | undefined>;
-  /** 数量 */
-  count: Ref<number>;
-  /** 滚动容器 */
-  scrollEl: ShallowRef<HTMLElement | null>;
-  /** 估算高度(宽度) */
-  estimateSize?: (index: number) => number;
-  /** 列表项之间的间距 */
-  gap?: number;
-}
-type CustomVirtualItem = Omit<VirtualItem, 'key'> & {
-  key: number | string;
-};
-type VirtualReturned = {
-  /** 虚拟列表 */virtualList: ShallowRef<CustomVirtualItem[]>; /** 总高度 */
-  totalHeight: ShallowRef<number>; /** 测量元素高度 */
-  measureElement: (el: any) => void; /** 滚动到指定索引 */
-  scrollTo: (index: number) => void; /** 是否启用虚拟列表 */
-  virtualEnabled: ComputedRef<boolean>;
-};
-declare function useVirtual(options: Options): VirtualReturned;
-//#endregion
-export { VirtualReturned, useVirtual };
-//# sourceMappingURL=index.d.ts.map

package/dist/use-virtual/index.js

@@ -1,67 +0,0 @@
-import { computed, isRef, onScopeDispose, shallowRef, watch } from "vue";
-import { Virtualizer, elementScroll, observeElementOffset, observeElementRect } from "@tanstack/vue-virtual";
-//#region src/use-virtual/index.ts
-const defaultEstimateSize = () => 34;
-function useVirtual(options) {
-	const { count, scrollEl, estimateSize, virtualThreshold, gap } = options;
-	const enabled = computed(() => {
-		if (isRef(virtualThreshold)) return virtualThreshold.value ? count.value > virtualThreshold.value : true;
-		return virtualThreshold ? count.value > virtualThreshold : true;
-	});
-	const virtualList = shallowRef([]);
-	/** 总高度 */
-	const totalHeight = shallowRef(0);
-	function updateVirtualList() {
-		if (enabled.value) {
-			totalHeight.value = v.getTotalSize();
-			virtualList.value = v.getVirtualItems();
-		}
-	}
-	const virtualizerOptions = computed(() => {
-		return {
-			enabled: enabled.value,
-			count: count.value,
-			getScrollElement: () => scrollEl.value,
-			estimateSize: estimateSize ?? defaultEstimateSize,
-			overscan: 3,
-			gap,
-			observeElementRect,
-			observeElementOffset,
-			scrollToFn: elementScroll,
-			onChange: updateVirtualList
-		};
-	});
-	const v = new Virtualizer(virtualizerOptions.value);
-	updateVirtualList();
-	const cleanup = v._didMount();
-	watch(scrollEl, (el) => {
-		el && v._willUpdate();
-	}, { immediate: true });
-	watch(() => virtualizerOptions.value, (o) => {
-		v.setOptions(o);
-		v._willUpdate();
-		updateVirtualList();
-	});
-	onScopeDispose(() => {
-		cleanup();
-	});
-	function scrollTo(index) {
-		v.scrollToIndex(index, { align: "center" });
-	}
-	/** 测量元素高度 */
-	function measureElement(el) {
-		if (!el) return;
-		v.measureElement(el);
-	}
-	return {
-		virtualEnabled: enabled,
-		virtualList,
-		totalHeight,
-		measureElement,
-		scrollTo
-	};
-}
-//#endregion
-export { useVirtual };
-
-//# sourceMappingURL=index.js.map

package/dist/use-virtual/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/use-virtual/index.ts"],"sourcesContent":["import {\n  elementScroll,\n  observeElementOffset,\n  observeElementRect,\n  type VirtualItem,\n  Virtualizer\n} from '@tanstack/vue-virtual'\nimport {\n  computed,\n  isRef,\n  onScopeDispose,\n  shallowRef,\n  watch,\n  type ComputedRef,\n  type Ref,\n  type ShallowRef\n} from 'vue'\n\ninterface Options {\n  /** 指定启用虚拟列表的阈值 */\n  virtualThreshold?: number | Ref<number | undefined>\n  /** 数量 */\n  count: Ref<number>\n  /** 滚动容器 */\n  scrollEl: ShallowRef<HTMLElement | null>\n  /** 估算高度(宽度) */\n  estimateSize?: (index: number) => number\n  /** 列表项之间的间距 */\n  gap?: number\n}\n\ntype CustomVirtualItem = Omit<VirtualItem, 'key'> & { key: number | string }\n\nexport type VirtualReturned = {\n  /** 虚拟列表 */\n  virtualList: ShallowRef<CustomVirtualItem[]>\n  /** 总高度 */\n  totalHeight: ShallowRef<number>\n  /** 测量元素高度 */\n  measureElement: (el: any) => void\n  /** 滚动到指定索引 */\n  scrollTo: (index: number) => void\n  /** 是否启用虚拟列表 */\n  virtualEnabled: ComputedRef<boolean>\n}\n\nconst defaultEstimateSize = () => 34\n\nexport function useVirtual(options: Options): VirtualReturned {\n  const { count, scrollEl, estimateSize, virtualThreshold, gap } = options\n\n  const enabled = computed(() => {\n    if (isRef(virtualThreshold)) {\n      return virtualThreshold.value ? count.value > virtualThreshold.value : true\n    }\n\n    return virtualThreshold ? count.value > virtualThreshold : true\n  })\n\n  const virtualList = shallowRef<CustomVirtualItem[]>([])\n\n  /** 总高度 */\n  const totalHeight = shallowRef(0)\n\n  function updateVirtualList() {\n    if (enabled.value) {\n      totalHeight.value = v.getTotalSize()\n      virtualList.value = v.getVirtualItems() as CustomVirtualItem[]\n    }\n  }\n\n  const virtualizerOptions = computed(() => {\n    return {\n      enabled: enabled.value,\n      count: count.value,\n      getScrollElement: () => scrollEl.value,\n      estimateSize: estimateSize ?? defaultEstimateSize,\n      overscan: 3,\n      gap,\n      observeElementRect: observeElementRect,\n      observeElementOffset: observeElementOffset,\n      scrollToFn: elementScroll,\n      onChange: updateVirtualList\n    }\n  })\n\n  const v = new Virtualizer(virtualizerOptions.value)\n\n  updateVirtualList()\n\n  const cleanup = v._didMount()\n\n  watch(\n    scrollEl,\n    (el) => {\n      el && v._willUpdate()\n    },\n    { immediate: true }\n  )\n\n  watch(\n    () => virtualizerOptions.value,\n    (o) => {\n      v.setOptions(o)\n\n      v._willUpdate()\n\n      updateVirtualList()\n    }\n  )\n\n  onScopeDispose(() => {\n    cleanup()\n  })\n\n  function scrollTo(index: number) {\n    v.scrollToIndex(index, { align: 'center' })\n  }\n\n  /** 测量元素高度 */\n  function measureElement(el: Element) {\n    if (!el) return\n\n    v.measureElement(el)\n\n    return undefined\n  }\n\n  return { virtualEnabled: enabled, virtualList, totalHeight, measureElement, scrollTo }\n}\n"],"mappings":";;;AA8CA,MAAM,4BAA4B;AAElC,SAAgB,WAAW,SAAmC;CAC5D,MAAM,EAAE,OAAO,UAAU,cAAc,kBAAkB,QAAQ;CAEjE,MAAM,UAAU,eAAe;AAC7B,MAAI,MAAM,iBAAiB,CACzB,QAAO,iBAAiB,QAAQ,MAAM,QAAQ,iBAAiB,QAAQ;AAGzE,SAAO,mBAAmB,MAAM,QAAQ,mBAAmB;GAC3D;CAEF,MAAM,cAAc,WAAgC,EAAE,CAAC;;CAGvD,MAAM,cAAc,WAAW,EAAE;CAEjC,SAAS,oBAAoB;AAC3B,MAAI,QAAQ,OAAO;AACjB,eAAY,QAAQ,EAAE,cAAc;AACpC,eAAY,QAAQ,EAAE,iBAAiB;;;CAI3C,MAAM,qBAAqB,eAAe;AACxC,SAAO;GACL,SAAS,QAAQ;GACjB,OAAO,MAAM;GACb,wBAAwB,SAAS;GACjC,cAAc,gBAAgB;GAC9B,UAAU;GACV;GACoB;GACE;GACtB,YAAY;GACZ,UAAU;GACX;GACD;CAEF,MAAM,IAAI,IAAI,YAAY,mBAAmB,MAAM;AAEnD,oBAAmB;CAEnB,MAAM,UAAU,EAAE,WAAW;AAE7B,OACE,WACC,OAAO;AACN,QAAM,EAAE,aAAa;IAEvB,EAAE,WAAW,MAAM,CACpB;AAED,aACQ,mBAAmB,QACxB,MAAM;AACL,IAAE,WAAW,EAAE;AAEf,IAAE,aAAa;AAEf,qBAAmB;GAEtB;AAED,sBAAqB;AACnB,WAAS;GACT;CAEF,SAAS,SAAS,OAAe;AAC/B,IAAE,cAAc,OAAO,EAAE,OAAO,UAAU,CAAC;;;CAI7C,SAAS,eAAe,IAAa;AACnC,MAAI,CAAC,GAAI;AAET,IAAE,eAAe,GAAG;;AAKtB,QAAO;EAAE,gBAAgB;EAAS;EAAa;EAAa;EAAgB;EAAU"}

package/src/use-lock/index.ts

@@ -1,50 +0,0 @@
-import { nextTick } from 'vue'
-
-type Update = (fn: Function) => any
-type Lock = (fn: Function) => Promise<void>
-
-export interface Updater {
-  /**
-   * 更新
-   * @description 在非锁定时执行传入的函数
-   */
-  update: Update
-  /**
-   * 更新并锁定
-   * @description 执行传入的函数，并锁定更新操作，直到函数执行完成
-   */
-  updateAndLock: Lock
-}
-
-/**
- * 数据更新锁
- * @description
- * 更新锁主要用于防止组件数据更新时，循环触发更新。
- *
- * @returns 该函数返回两个函数：
- * 1. update: 更新函数，在非锁定时执行传入的函数
- * 2. lock: 锁定函数，执行时会锁定更新操作，直到锁定操作结束
- */
-export function useUpdateLock(): Updater {
-  let lockedCount = 0
-
-  function update(fn: Function) {
-    if (lockedCount > 0) return
-    return fn()
-  }
-
-  async function updateAndLock(fn: Function) {
-    lockedCount++
-
-    try {
-      await fn()
-    } catch (error) {
-      console.error(error)
-    }
-    await nextTick()
-
-    lockedCount--
-  }
-
-  return { updateAndLock, update }
-}

package/src/use-virtual/index.ts

@@ -1,130 +0,0 @@
-import {
-  elementScroll,
-  observeElementOffset,
-  observeElementRect,
-  type VirtualItem,
-  Virtualizer
-} from '@tanstack/vue-virtual'
-import {
-  computed,
-  isRef,
-  onScopeDispose,
-  shallowRef,
-  watch,
-  type ComputedRef,
-  type Ref,
-  type ShallowRef
-} from 'vue'
-
-interface Options {
-  /** 指定启用虚拟列表的阈值 */
-  virtualThreshold?: number | Ref<number | undefined>
-  /** 数量 */
-  count: Ref<number>
-  /** 滚动容器 */
-  scrollEl: ShallowRef<HTMLElement | null>
-  /** 估算高度(宽度) */
-  estimateSize?: (index: number) => number
-  /** 列表项之间的间距 */
-  gap?: number
-}
-
-type CustomVirtualItem = Omit<VirtualItem, 'key'> & { key: number | string }
-
-export type VirtualReturned = {
-  /** 虚拟列表 */
-  virtualList: ShallowRef<CustomVirtualItem[]>
-  /** 总高度 */
-  totalHeight: ShallowRef<number>
-  /** 测量元素高度 */
-  measureElement: (el: any) => void
-  /** 滚动到指定索引 */
-  scrollTo: (index: number) => void
-  /** 是否启用虚拟列表 */
-  virtualEnabled: ComputedRef<boolean>
-}
-
-const defaultEstimateSize = () => 34
-
-export function useVirtual(options: Options): VirtualReturned {
-  const { count, scrollEl, estimateSize, virtualThreshold, gap } = options
-
-  const enabled = computed(() => {
-    if (isRef(virtualThreshold)) {
-      return virtualThreshold.value ? count.value > virtualThreshold.value : true
-    }
-
-    return virtualThreshold ? count.value > virtualThreshold : true
-  })
-
-  const virtualList = shallowRef<CustomVirtualItem[]>([])
-
-  /** 总高度 */
-  const totalHeight = shallowRef(0)
-
-  function updateVirtualList() {
-    if (enabled.value) {
-      totalHeight.value = v.getTotalSize()
-      virtualList.value = v.getVirtualItems() as CustomVirtualItem[]
-    }
-  }
-
-  const virtualizerOptions = computed(() => {
-    return {
-      enabled: enabled.value,
-      count: count.value,
-      getScrollElement: () => scrollEl.value,
-      estimateSize: estimateSize ?? defaultEstimateSize,
-      overscan: 3,
-      gap,
-      observeElementRect: observeElementRect,
-      observeElementOffset: observeElementOffset,
-      scrollToFn: elementScroll,
-      onChange: updateVirtualList
-    }
-  })
-
-  const v = new Virtualizer(virtualizerOptions.value)
-
-  updateVirtualList()
-
-  const cleanup = v._didMount()
-
-  watch(
-    scrollEl,
-    (el) => {
-      el && v._willUpdate()
-    },
-    { immediate: true }
-  )
-
-  watch(
-    () => virtualizerOptions.value,
-    (o) => {
-      v.setOptions(o)
-
-      v._willUpdate()
-
-      updateVirtualList()
-    }
-  )
-
-  onScopeDispose(() => {
-    cleanup()
-  })
-
-  function scrollTo(index: number) {
-    v.scrollToIndex(index, { align: 'center' })
-  }
-
-  /** 测量元素高度 */
-  function measureElement(el: Element) {
-    if (!el) return
-
-    v.measureElement(el)
-
-    return undefined
-  }
-
-  return { virtualEnabled: enabled, virtualList, totalHeight, measureElement, scrollTo }
-}