npm - @veltra/compositions - Versions diffs - 1.0.9 → 1.0.10 - Mend

@veltra/compositions 1.0.9 → 1.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/use-component-props/index.js +3 -1
package/dist/use-component-props/index.js.map +1 -1
package/dist/use-config/index.js +5 -0
package/dist/use-config/index.js.map +1 -1
package/dist/use-fallback-props/index.js.map +1 -1
package/dist/use-model/index.js.map +1 -1
package/dist/use-pop/index.js +2 -0
package/dist/use-pop/index.js.map +1 -1
package/dist/use-resize-observer/index.js.map +1 -1
package/dist/use-transition/use-css-transition.js +6 -0
package/dist/use-transition/use-css-transition.js.map +1 -1
package/package.json +2 -2

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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"}

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

	@@ -1 +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"}
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;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 CHANGED Viewed

	@@ -1 +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~~"}
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,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 CHANGED Viewed

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

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

	@@ -1 +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"}
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"}

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

	@@ -1 +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"}
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,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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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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~~QAAQ~~,~~CACJ~~;GAChB;AAEF,QAAO;EACL;EACA,QAAQ;AACN,UAAO,KAAK;;EAEd,QAAQ;AACN,UAAO,MAAM;;EAEhB"}
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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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@veltra/compositions",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "files": [
     "dist",
     "src"
@@ -20,7 +20,7 @@
     "@cat-kit/core": "^1.1.1",
     "@cat-kit/fe": "^1.1.1",
     "@floating-ui/dom": "^1.7.6",
-    "@veltra/utils": "1.0.9"
+    "@veltra/utils": "1.0.10"
   },
   "peerDependencies": {
     "vue": "^3.5.33"